mirror of
https://github.com/Alfresco/alfresco-community-repo.git
synced 2025-08-14 17:58:59 +00:00
838e7d5381
git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5282 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
432 lines
14 KiB
JavaScript
432 lines
14 KiB
JavaScript
/*
|
|
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
|
|
}
|
|
}
|
|
});
|