mirror of
https://github.com/Alfresco/alfresco-community-repo.git
synced 2025-08-14 17:58:59 +00:00
New build scripts
git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5282 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
This commit is contained in:
Gavin Cornwell
431
source/web/scripts/ajax/dojo/src/widget/Button.js
Normal file
431
source/web/scripts/ajax/dojo/src/widget/Button.js
Normal file
@@ -0,0 +1,431 @@
|
||||
/*
|
||||
Copyright (c) 2004-2006, The Dojo Foundation
|
||||
All Rights Reserved.
|
||||
|
||||
Licensed under the Academic Free License version 2.1 or above OR the
|
||||
modified BSD license. For more information on Dojo licensing, see:
|
||||
|
||||
http://dojotoolkit.org/community/licensing.shtml
|
||||
*/
|
||||
|
||||
dojo.provide("dojo.widget.Button");
|
||||
|
||||
dojo.require("dojo.lang.extras");
|
||||
dojo.require("dojo.html.*");
|
||||
dojo.require("dojo.html.selection");
|
||||
dojo.require("dojo.widget.*");
|
||||
|
||||
/*
|
||||
* usage
|
||||
* <button dojoType="button" onClick="...">Hello world</button>
|
||||
*
|
||||
* var button1 = dojo.widget.createWidget("Button", {caption: "hello world", onClick: foo});
|
||||
* document.body.appendChild(button1.domNode);
|
||||
*/
|
||||
dojo.widget.defineWidget(
|
||||
"dojo.widget.Button",
|
||||
dojo.widget.HtmlWidget,
|
||||
{
|
||||
// summary
|
||||
// Basically the same thing as a normal HTML button, but with special styling.
|
||||
|
||||
isContainer: true,
|
||||
|
||||
// caption: String
|
||||
// text to display in button
|
||||
caption: "",
|
||||
|
||||
templatePath: dojo.uri.dojoUri("src/widget/templates/ButtonTemplate.html"),
|
||||
templateCssPath: dojo.uri.dojoUri("src/widget/templates/ButtonTemplate.css"),
|
||||
|
||||
// inactiveImg: Url
|
||||
// prefix of filename holding images (left, center, right) for button in normal state
|
||||
inactiveImg: "src/widget/templates/images/soriaButton-",
|
||||
|
||||
// activeImg: Url
|
||||
// prefix of filename holding images (left, center, right) for button when it's being hovered over
|
||||
activeImg: "src/widget/templates/images/soriaActive-",
|
||||
|
||||
// pressedImg: Url
|
||||
// prefix of filename holding images (left, center, right) for button between mouse-down and mouse-up
|
||||
pressedImg: "src/widget/templates/images/soriaPressed-",
|
||||
|
||||
// disabledImg: Url
|
||||
// prefix of filename holding images (left, center, right) for button when it's disabled (aka, grayed-out)
|
||||
disabledImg: "src/widget/templates/images/soriaDisabled-",
|
||||
|
||||
// widget2height: Number
|
||||
// shape of the button's end pieces;
|
||||
// the height of the end pieces is a function of the button's height (which in turn is a function of the button's content),
|
||||
// and then the width of the end pieces is relative to their height.
|
||||
width2height: 1.0/3.0,
|
||||
|
||||
fillInTemplate: function(){
|
||||
if(this.caption){
|
||||
this.containerNode.appendChild(document.createTextNode(this.caption));
|
||||
}
|
||||
dojo.html.disableSelection(this.containerNode);
|
||||
},
|
||||
|
||||
postCreate: function(){
|
||||
this._sizeMyself();
|
||||
},
|
||||
|
||||
_sizeMyself: function(){
|
||||
// we cannot size correctly if any of our ancestors are hidden (display:none),
|
||||
// so temporarily attach to document.body
|
||||
if(this.domNode.parentNode){
|
||||
var placeHolder = document.createElement("span");
|
||||
dojo.html.insertBefore(placeHolder, this.domNode);
|
||||
}
|
||||
dojo.body().appendChild(this.domNode);
|
||||
|
||||
this._sizeMyselfHelper();
|
||||
|
||||
// Put this.domNode back where it was originally
|
||||
if(placeHolder){
|
||||
dojo.html.insertBefore(this.domNode, placeHolder);
|
||||
dojo.html.removeNode(placeHolder);
|
||||
}
|
||||
},
|
||||
|
||||
_sizeMyselfHelper: function(){
|
||||
var mb = dojo.html.getMarginBox(this.containerNode);
|
||||
this.height = mb.height;
|
||||
this.containerWidth = mb.width;
|
||||
var endWidth= this.height * this.width2height;
|
||||
|
||||
this.containerNode.style.left=endWidth+"px";
|
||||
|
||||
this.leftImage.height = this.rightImage.height = this.centerImage.height = this.height;
|
||||
this.leftImage.width = this.rightImage.width = endWidth+1;
|
||||
this.centerImage.width = this.containerWidth;
|
||||
this.centerImage.style.left=endWidth+"px";
|
||||
this._setImage(this.disabled ? this.disabledImg : this.inactiveImg);
|
||||
|
||||
if ( this.disabled ) {
|
||||
dojo.html.prependClass(this.domNode, "dojoButtonDisabled");
|
||||
this.domNode.removeAttribute("tabIndex");
|
||||
dojo.widget.wai.setAttr(this.domNode, "waiState", "disabled", true);
|
||||
} else {
|
||||
dojo.html.removeClass(this.domNode, "dojoButtonDisabled");
|
||||
this.domNode.setAttribute("tabIndex", "0");
|
||||
dojo.widget.wai.setAttr(this.domNode, "waiState", "disabled", false);
|
||||
}
|
||||
|
||||
this.domNode.style.height=this.height + "px";
|
||||
this.domNode.style.width= (this.containerWidth+2*endWidth) + "px";
|
||||
},
|
||||
|
||||
onMouseOver: function(/*Event*/ e){
|
||||
// summary: callback when user mouses-over the button
|
||||
if( this.disabled ){ return; }
|
||||
dojo.html.prependClass(this.buttonNode, "dojoButtonHover");
|
||||
this._setImage(this.activeImg);
|
||||
},
|
||||
|
||||
onMouseDown: function(/*Event*/ e){
|
||||
// summary: callback when user starts to click the button
|
||||
if( this.disabled ){ return; }
|
||||
dojo.html.prependClass(this.buttonNode, "dojoButtonDepressed");
|
||||
dojo.html.removeClass(this.buttonNode, "dojoButtonHover");
|
||||
this._setImage(this.pressedImg);
|
||||
},
|
||||
|
||||
onMouseUp: function(/*Event*/ e){
|
||||
// summary: callback when the user finishes clicking
|
||||
if( this.disabled ){ return; }
|
||||
dojo.html.prependClass(this.buttonNode, "dojoButtonHover");
|
||||
dojo.html.removeClass(this.buttonNode, "dojoButtonDepressed");
|
||||
this._setImage(this.activeImg);
|
||||
},
|
||||
|
||||
onMouseOut: function(/*Event*/ e){
|
||||
// summary: callback when the user moves the mouse off the button
|
||||
if( this.disabled ){ return; }
|
||||
if( e.toElement && dojo.html.isDescendantOf(e.toElement, this.buttonNode) ){
|
||||
return; // Ignore IE mouseOut events that dont actually leave button - Prevents hover image flicker in IE
|
||||
}
|
||||
dojo.html.removeClass(this.buttonNode, "dojoButtonHover");
|
||||
dojo.html.removeClass(this.buttonNode, "dojoButtonDepressed");
|
||||
this._setImage(this.inactiveImg);
|
||||
},
|
||||
|
||||
onKey: function(/*Event*/ e){
|
||||
// summary: callback when the user presses a key (on key-down)
|
||||
if (!e.key) { return; }
|
||||
var menu = dojo.widget.getWidgetById(this.menuId);
|
||||
if (e.key == e.KEY_ENTER || e.key == " "){
|
||||
this.onMouseDown(e);
|
||||
this.buttonClick(e);
|
||||
dojo.lang.setTimeout(this, "onMouseUp", 75, e);
|
||||
dojo.event.browser.stopEvent(e);
|
||||
}
|
||||
if(menu && menu.isShowingNow && e.key == e.KEY_DOWN_ARROW){
|
||||
// disconnect onBlur when focus moves into menu
|
||||
dojo.event.disconnect(this.domNode, "onblur", this, "onBlur");
|
||||
// allow event to propagate to menu
|
||||
}
|
||||
},
|
||||
|
||||
onFocus: function(/*Event*/ e){
|
||||
// summary: callback on focus to the button
|
||||
var menu = dojo.widget.getWidgetById(this.menuId);
|
||||
if (menu){
|
||||
dojo.event.connectOnce(this.domNode, "onblur", this, "onBlur");
|
||||
}
|
||||
},
|
||||
|
||||
onBlur: function(/*Event*/ e){
|
||||
// summary: callback when button loses focus
|
||||
var menu = dojo.widget.getWidgetById(this.menuId);
|
||||
if ( !menu ) { return; }
|
||||
|
||||
if ( menu.close && menu.isShowingNow ){
|
||||
menu.close();
|
||||
}
|
||||
},
|
||||
|
||||
buttonClick: function(/*Event*/ e){
|
||||
// summary: internal function for handling button clicks
|
||||
if(!this.disabled){
|
||||
// focus may fail when tabIndex is not supported on div's
|
||||
// by the browser, or when the node is disabled
|
||||
try { this.domNode.focus(); } catch(e2) {};
|
||||
this.onClick(e);
|
||||
}
|
||||
},
|
||||
|
||||
onClick: function(/*Event*/ e) {
|
||||
// summary: callback for when button is clicked; user can override this function
|
||||
},
|
||||
|
||||
_setImage: function(/*String*/ prefix){
|
||||
this.leftImage.src=dojo.uri.dojoUri(prefix + "l.gif");
|
||||
this.centerImage.src=dojo.uri.dojoUri(prefix + "c.gif");
|
||||
this.rightImage.src=dojo.uri.dojoUri(prefix + "r.gif");
|
||||
},
|
||||
|
||||
_toggleMenu: function(/*String*/ menuId){
|
||||
var menu = dojo.widget.getWidgetById(menuId);
|
||||
if ( !menu ) { return; }
|
||||
if ( menu.open && !menu.isShowingNow) {
|
||||
var pos = dojo.html.getAbsolutePosition(this.domNode, false);
|
||||
menu.open(pos.x, pos.y+this.height, this);
|
||||
} else if ( menu.close && menu.isShowingNow ){
|
||||
menu.close();
|
||||
} else {
|
||||
menu.toggle();
|
||||
}
|
||||
},
|
||||
|
||||
setCaption: function(/*String*/ content){
|
||||
// summary: reset the caption (text) of the button; takes an HTML string
|
||||
this.caption=content;
|
||||
this.containerNode.innerHTML=content;
|
||||
this._sizeMyself();
|
||||
},
|
||||
|
||||
setDisabled: function(/*Boolean*/ disabled){
|
||||
// summary: set disabled state of button
|
||||
this.disabled=disabled;
|
||||
this._sizeMyself();
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* usage
|
||||
* <button dojoType="DropDownButton" menuId="mymenu">Hello world</button>
|
||||
*
|
||||
* var button1 = dojo.widget.createWidget("DropDownButton", {caption: "hello world", menuId: foo});
|
||||
* document.body.appendChild(button1.domNode);
|
||||
*/
|
||||
dojo.widget.defineWidget(
|
||||
"dojo.widget.DropDownButton",
|
||||
dojo.widget.Button,
|
||||
{
|
||||
// summary
|
||||
// push the button and a menu shows up
|
||||
// menuId: String
|
||||
// widget id of the menu that this button should activate
|
||||
menuId: "",
|
||||
|
||||
// downArrow: Url
|
||||
// path of arrow image to display to the right of the button text
|
||||
downArrow: "src/widget/templates/images/whiteDownArrow.gif",
|
||||
|
||||
// disabledDownArray: Url
|
||||
// path of arrow image to display to the right of the button text, when the button is disabled
|
||||
disabledDownArrow: "src/widget/templates/images/whiteDownArrow.gif",
|
||||
|
||||
fillInTemplate: function(){
|
||||
dojo.widget.DropDownButton.superclass.fillInTemplate.apply(this, arguments);
|
||||
|
||||
this.arrow = document.createElement("img");
|
||||
dojo.html.setClass(this.arrow, "downArrow");
|
||||
|
||||
dojo.widget.wai.setAttr(this.domNode, "waiState", "haspopup", this.menuId);
|
||||
},
|
||||
|
||||
_sizeMyselfHelper: function(){
|
||||
// draw the arrow (todo: why is the arror in containerNode rather than outside it?)
|
||||
this.arrow.src = dojo.uri.dojoUri(this.disabled ? this.disabledDownArrow : this.downArrow);
|
||||
this.containerNode.appendChild(this.arrow);
|
||||
|
||||
dojo.widget.DropDownButton.superclass._sizeMyselfHelper.call(this);
|
||||
},
|
||||
|
||||
onClick: function(/*Event*/ e){
|
||||
// summary: callback when button is clicked; user shouldn't override this function or else the menu won't toggle
|
||||
this._toggleMenu(this.menuId);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* usage
|
||||
* <button dojoType="ComboButton" onClick="..." menuId="mymenu">Hello world</button>
|
||||
*
|
||||
* var button1 = dojo.widget.createWidget("DropDownButton", {caption: "hello world", onClick: foo, menuId: "myMenu"});
|
||||
* document.body.appendChild(button1.domNode);
|
||||
*/
|
||||
dojo.widget.defineWidget(
|
||||
"dojo.widget.ComboButton",
|
||||
dojo.widget.Button,
|
||||
{
|
||||
// summary
|
||||
// left side is normal button, right side displays menu
|
||||
// menuId: String
|
||||
// widget id of the menu that this button should activate
|
||||
menuId: "",
|
||||
|
||||
templatePath: dojo.uri.dojoUri("src/widget/templates/ComboButtonTemplate.html"),
|
||||
|
||||
// splitWidth: Integer
|
||||
// # of pixels between left & right part of button
|
||||
splitWidth: 2,
|
||||
|
||||
// arrowWidth: Integer
|
||||
// width of segment holding down arrow
|
||||
arrowWidth: 5,
|
||||
|
||||
_sizeMyselfHelper: function(/*Event*/ e){
|
||||
var mb = dojo.html.getMarginBox(this.containerNode);
|
||||
this.height = mb.height;
|
||||
this.containerWidth = mb.width;
|
||||
|
||||
var endWidth= this.height/3;
|
||||
|
||||
if(this.disabled){
|
||||
dojo.widget.wai.setAttr(this.domNode, "waiState", "disabled", true);
|
||||
this.domNode.removeAttribute("tabIndex");
|
||||
}
|
||||
else {
|
||||
dojo.widget.wai.setAttr(this.domNode, "waiState", "disabled", false);
|
||||
this.domNode.setAttribute("tabIndex", "0");
|
||||
}
|
||||
|
||||
// left part
|
||||
this.leftImage.height = this.rightImage.height = this.centerImage.height =
|
||||
this.arrowBackgroundImage.height = this.height;
|
||||
this.leftImage.width = endWidth+1;
|
||||
this.centerImage.width = this.containerWidth;
|
||||
this.buttonNode.style.height = this.height + "px";
|
||||
this.buttonNode.style.width = endWidth + this.containerWidth + "px";
|
||||
this._setImage(this.disabled ? this.disabledImg : this.inactiveImg);
|
||||
|
||||
// right part
|
||||
this.arrowBackgroundImage.width=this.arrowWidth;
|
||||
this.rightImage.width = endWidth+1;
|
||||
this.rightPart.style.height = this.height + "px";
|
||||
this.rightPart.style.width = this.arrowWidth + endWidth + "px";
|
||||
this._setImageR(this.disabled ? this.disabledImg : this.inactiveImg);
|
||||
|
||||
// outer container
|
||||
this.domNode.style.height=this.height + "px";
|
||||
var totalWidth = this.containerWidth+this.splitWidth+this.arrowWidth+2*endWidth;
|
||||
this.domNode.style.width= totalWidth + "px";
|
||||
},
|
||||
|
||||
_setImage: function(prefix){
|
||||
this.leftImage.src=dojo.uri.dojoUri(prefix + "l.gif");
|
||||
this.centerImage.src=dojo.uri.dojoUri(prefix + "c.gif");
|
||||
},
|
||||
|
||||
/*** functions on right part of button ***/
|
||||
rightOver: function(/*Event*/ e){
|
||||
// summary:
|
||||
// callback when mouse-over right part of button;
|
||||
// onMouseOver() is the callback for the left side of the button.
|
||||
if( this.disabled ){ return; }
|
||||
dojo.html.prependClass(this.rightPart, "dojoButtonHover");
|
||||
this._setImageR(this.activeImg);
|
||||
},
|
||||
|
||||
rightDown: function(/*Event*/ e){
|
||||
// summary:
|
||||
// callback when mouse-down right part of button;
|
||||
// onMouseDown() is the callback for the left side of the button.
|
||||
if( this.disabled ){ return; }
|
||||
dojo.html.prependClass(this.rightPart, "dojoButtonDepressed");
|
||||
dojo.html.removeClass(this.rightPart, "dojoButtonHover");
|
||||
this._setImageR(this.pressedImg);
|
||||
},
|
||||
|
||||
rightUp: function(/*Event*/ e){
|
||||
// summary:
|
||||
// callback when mouse-up right part of button;
|
||||
// onMouseUp() is the callback for the left side of the button.
|
||||
if( this.disabled ){ return; }
|
||||
dojo.html.prependClass(this.rightPart, "dojoButtonHover");
|
||||
dojo.html.removeClass(this.rightPart, "dojoButtonDepressed");
|
||||
this._setImageR(this.activeImg);
|
||||
},
|
||||
|
||||
rightOut: function(/*Event*/ e){
|
||||
// summary:
|
||||
// callback when moving the mouse off of the right part of button;
|
||||
// onMouseOut() is the callback for the left side of the button.
|
||||
if( this.disabled ){ return; }
|
||||
dojo.html.removeClass(this.rightPart, "dojoButtonHover");
|
||||
dojo.html.removeClass(this.rightPart, "dojoButtonDepressed");
|
||||
this._setImageR(this.inactiveImg);
|
||||
},
|
||||
|
||||
rightClick: function(/*Event*/ e){
|
||||
// summary:
|
||||
// callback when clicking the right part of button;
|
||||
// onClick() is the callback for the left side of the button.
|
||||
if( this.disabled ){ return; }
|
||||
// focus may fail when tabIndex is not supported on div's
|
||||
// by the browser, or when the node is disabled
|
||||
try { this.domNode.focus(); } catch(e2) {};
|
||||
this._toggleMenu(this.menuId);
|
||||
},
|
||||
|
||||
_setImageR: function(prefix){
|
||||
this.arrowBackgroundImage.src=dojo.uri.dojoUri(prefix + "c.gif");
|
||||
this.rightImage.src=dojo.uri.dojoUri(prefix + "r.gif");
|
||||
},
|
||||
|
||||
/*** keyboard functions ***/
|
||||
|
||||
onKey: function(/*Event*/ e){
|
||||
if (!e.key) { return; }
|
||||
var menu = dojo.widget.getWidgetById(this.menuId);
|
||||
if(e.key== e.KEY_ENTER || e.key == " "){
|
||||
this.onMouseDown(e);
|
||||
this.buttonClick(e);
|
||||
dojo.lang.setTimeout(this, "onMouseUp", 75, e);
|
||||
dojo.event.browser.stopEvent(e);
|
||||
} else if (e.key == e.KEY_DOWN_ARROW && e.altKey){
|
||||
this.rightDown(e);
|
||||
this.rightClick(e);
|
||||
dojo.lang.setTimeout(this, "rightUp", 75, e);
|
||||
dojo.event.browser.stopEvent(e);
|
||||
} else if(menu && menu.isShowingNow && e.key == e.KEY_DOWN_ARROW){
|
||||
// disconnect onBlur when focus moves into menu
|
||||
dojo.event.disconnect(this.domNode, "onblur", this, "onBlur");
|
||||
// allow event to propagate to menu
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user