mirror of
https://git.tt-rss.org/git/tt-rss.git
synced 2025-12-13 22:05:56 +00:00
upgrade Dojo to 1.6.1
This commit is contained in:
Andrew Dolgov
@@ -1,199 +1,483 @@
|
||||
/*
|
||||
Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
|
||||
Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
|
||||
Available via Academic Free License >= 2.1 OR the modified BSD license.
|
||||
see: http://dojotoolkit.org/license for details
|
||||
*/
|
||||
|
||||
|
||||
if(!dojo._hasResource["dijit.layout.ScrollingTabController"]){
|
||||
dojo._hasResource["dijit.layout.ScrollingTabController"]=true;
|
||||
if(!dojo._hasResource["dijit.layout.ScrollingTabController"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
|
||||
dojo._hasResource["dijit.layout.ScrollingTabController"] = true;
|
||||
dojo.provide("dijit.layout.ScrollingTabController");
|
||||
dojo.require("dijit.layout.TabController");
|
||||
dojo.require("dijit.Menu");
|
||||
dojo.declare("dijit.layout.ScrollingTabController",dijit.layout.TabController,{templateString:dojo.cache("dijit.layout","templates/ScrollingTabController.html","<div class=\"dijitTabListContainer-${tabPosition}\" style=\"visibility:hidden\">\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_menuBtn\" iconClass=\"dijitTabStripMenuIcon\"\n\t\t\tdojoAttachPoint=\"_menuBtn\" showLabel=false>▼</div>\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_leftBtn\" iconClass=\"dijitTabStripSlideLeftIcon\"\n\t\t\tdojoAttachPoint=\"_leftBtn\" dojoAttachEvent=\"onClick: doSlideLeft\" showLabel=false>◀</div>\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_rightBtn\" iconClass=\"dijitTabStripSlideRightIcon\"\n\t\t\tdojoAttachPoint=\"_rightBtn\" dojoAttachEvent=\"onClick: doSlideRight\" showLabel=false>▶</div>\n\t<div class='dijitTabListWrapper' dojoAttachPoint='tablistWrapper'>\n\t\t<div wairole='tablist' dojoAttachEvent='onkeypress:onkeypress'\n\t\t\t\tdojoAttachPoint='containerNode' class='nowrapTabStrip'></div>\n\t</div>\n</div>\n"),useMenu:true,useSlider:true,tabStripClass:"",widgetsInTemplate:true,_minScroll:5,attributeMap:dojo.delegate(dijit._Widget.prototype.attributeMap,{"class":"containerNode"}),postCreate:function(){
|
||||
this.inherited(arguments);
|
||||
var n=this.domNode;
|
||||
this.scrollNode=this.tablistWrapper;
|
||||
this._initButtons();
|
||||
if(!this.tabStripClass){
|
||||
this.tabStripClass="dijitTabContainer"+this.tabPosition.charAt(0).toUpperCase()+this.tabPosition.substr(1).replace(/-.*/,"")+"None";
|
||||
dojo.addClass(n,"tabStrip-disabled");
|
||||
}
|
||||
dojo.addClass(this.tablistWrapper,this.tabStripClass);
|
||||
},onStartup:function(){
|
||||
this.inherited(arguments);
|
||||
dojo.style(this.domNode,"visibility","visible");
|
||||
this._postStartup=true;
|
||||
},onAddChild:function(_1,_2){
|
||||
this.inherited(arguments);
|
||||
var _3;
|
||||
if(this.useMenu){
|
||||
var _4=this.containerId;
|
||||
_3=new dijit.MenuItem({id:_1.id+"_stcMi",label:_1.title,dir:_1.dir,lang:_1.lang,onClick:dojo.hitch(this,function(){
|
||||
var _5=dijit.byId(_4);
|
||||
_5.selectChild(_1);
|
||||
})});
|
||||
this._menuChildren[_1.id]=_3;
|
||||
this._menu.addChild(_3,_2);
|
||||
}
|
||||
this.pane2handles[_1.id].push(this.connect(this.pane2button[_1.id],"set",function(_6,_7){
|
||||
if(this._postStartup){
|
||||
if(_6=="label"){
|
||||
if(_3){
|
||||
_3.set(_6,_7);
|
||||
}
|
||||
if(this._dim){
|
||||
this.resize(this._dim);
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
dojo.style(this.containerNode,"width",(dojo.style(this.containerNode,"width")+200)+"px");
|
||||
},onRemoveChild:function(_8,_9){
|
||||
var _a=this.pane2button[_8.id];
|
||||
if(this._selectedTab===_a.domNode){
|
||||
this._selectedTab=null;
|
||||
}
|
||||
if(this.useMenu&&_8&&_8.id&&this._menuChildren[_8.id]){
|
||||
this._menu.removeChild(this._menuChildren[_8.id]);
|
||||
this._menuChildren[_8.id].destroy();
|
||||
delete this._menuChildren[_8.id];
|
||||
}
|
||||
this.inherited(arguments);
|
||||
},_initButtons:function(){
|
||||
this._menuChildren={};
|
||||
this._btnWidth=0;
|
||||
this._buttons=dojo.query("> .tabStripButton",this.domNode).filter(function(_b){
|
||||
if((this.useMenu&&_b==this._menuBtn.domNode)||(this.useSlider&&(_b==this._rightBtn.domNode||_b==this._leftBtn.domNode))){
|
||||
this._btnWidth+=dojo.marginBox(_b).w;
|
||||
return true;
|
||||
}else{
|
||||
dojo.style(_b,"display","none");
|
||||
return false;
|
||||
}
|
||||
},this);
|
||||
if(this.useMenu){
|
||||
this._menu=new dijit.Menu({id:this.id+"_menu",dir:this.dir,lang:this.lang,targetNodeIds:[this._menuBtn.domNode],leftClickToOpen:true,refocus:false});
|
||||
this._supportingWidgets.push(this._menu);
|
||||
}
|
||||
},_getTabsWidth:function(){
|
||||
var _c=this.getChildren();
|
||||
if(_c.length){
|
||||
var _d=_c[this.isLeftToRight()?0:_c.length-1].domNode,_e=_c[this.isLeftToRight()?_c.length-1:0].domNode;
|
||||
return _e.offsetLeft+dojo.style(_e,"width")-_d.offsetLeft;
|
||||
}else{
|
||||
return 0;
|
||||
}
|
||||
},_enableBtn:function(_f){
|
||||
var _10=this._getTabsWidth();
|
||||
_f=_f||dojo.style(this.scrollNode,"width");
|
||||
return _10>0&&_f<_10;
|
||||
},resize:function(dim){
|
||||
if(this.domNode.offsetWidth==0){
|
||||
return;
|
||||
}
|
||||
this._dim=dim;
|
||||
this.scrollNode.style.height="auto";
|
||||
this._contentBox=dijit.layout.marginBox2contentBox(this.domNode,{h:0,w:dim.w});
|
||||
this._contentBox.h=this.scrollNode.offsetHeight;
|
||||
dojo.contentBox(this.domNode,this._contentBox);
|
||||
var _11=this._enableBtn(this._contentBox.w);
|
||||
this._buttons.style("display",_11?"":"none");
|
||||
this._leftBtn.layoutAlign="left";
|
||||
this._rightBtn.layoutAlign="right";
|
||||
this._menuBtn.layoutAlign=this.isLeftToRight()?"right":"left";
|
||||
dijit.layout.layoutChildren(this.domNode,this._contentBox,[this._menuBtn,this._leftBtn,this._rightBtn,{domNode:this.scrollNode,layoutAlign:"client"}]);
|
||||
if(this._selectedTab){
|
||||
if(this._anim&&this._anim.status()=="playing"){
|
||||
this._anim.stop();
|
||||
}
|
||||
var w=this.scrollNode,sl=this._convertToScrollLeft(this._getScrollForSelectedTab());
|
||||
w.scrollLeft=sl;
|
||||
}
|
||||
this._setButtonClass(this._getScroll());
|
||||
this._postResize=true;
|
||||
},_getScroll:function(){
|
||||
var sl=(this.isLeftToRight()||dojo.isIE<8||(dojo.isIE&&dojo.isQuirks)||dojo.isWebKit)?this.scrollNode.scrollLeft:dojo.style(this.containerNode,"width")-dojo.style(this.scrollNode,"width")+(dojo.isIE==8?-1:1)*this.scrollNode.scrollLeft;
|
||||
return sl;
|
||||
},_convertToScrollLeft:function(val){
|
||||
if(this.isLeftToRight()||dojo.isIE<8||(dojo.isIE&&dojo.isQuirks)||dojo.isWebKit){
|
||||
return val;
|
||||
}else{
|
||||
var _12=dojo.style(this.containerNode,"width")-dojo.style(this.scrollNode,"width");
|
||||
return (dojo.isIE==8?-1:1)*(val-_12);
|
||||
}
|
||||
},onSelectChild:function(_13){
|
||||
var tab=this.pane2button[_13.id];
|
||||
if(!tab||!_13){
|
||||
return;
|
||||
}
|
||||
var _14=tab.domNode;
|
||||
if(this._postResize&&_14!=this._selectedTab){
|
||||
this._selectedTab=_14;
|
||||
var sl=this._getScroll();
|
||||
if(sl>_14.offsetLeft||sl+dojo.style(this.scrollNode,"width")<_14.offsetLeft+dojo.style(_14,"width")){
|
||||
this.createSmoothScroll().play();
|
||||
}
|
||||
}
|
||||
this.inherited(arguments);
|
||||
},_getScrollBounds:function(){
|
||||
var _15=this.getChildren(),_16=dojo.style(this.scrollNode,"width"),_17=dojo.style(this.containerNode,"width"),_18=_17-_16,_19=this._getTabsWidth();
|
||||
if(_15.length&&_19>_16){
|
||||
return {min:this.isLeftToRight()?0:_15[_15.length-1].domNode.offsetLeft,max:this.isLeftToRight()?(_15[_15.length-1].domNode.offsetLeft+dojo.style(_15[_15.length-1].domNode,"width"))-_16:_18};
|
||||
}else{
|
||||
var _1a=this.isLeftToRight()?0:_18;
|
||||
return {min:_1a,max:_1a};
|
||||
}
|
||||
},_getScrollForSelectedTab:function(){
|
||||
var w=this.scrollNode,n=this._selectedTab,_1b=dojo.style(this.scrollNode,"width"),_1c=this._getScrollBounds();
|
||||
var pos=(n.offsetLeft+dojo.style(n,"width")/2)-_1b/2;
|
||||
pos=Math.min(Math.max(pos,_1c.min),_1c.max);
|
||||
return pos;
|
||||
},createSmoothScroll:function(x){
|
||||
if(arguments.length>0){
|
||||
var _1d=this._getScrollBounds();
|
||||
x=Math.min(Math.max(x,_1d.min),_1d.max);
|
||||
}else{
|
||||
x=this._getScrollForSelectedTab();
|
||||
}
|
||||
if(this._anim&&this._anim.status()=="playing"){
|
||||
this._anim.stop();
|
||||
}
|
||||
var _1e=this,w=this.scrollNode,_1f=new dojo._Animation({beforeBegin:function(){
|
||||
if(this.curve){
|
||||
delete this.curve;
|
||||
}
|
||||
var _20=w.scrollLeft,_21=_1e._convertToScrollLeft(x);
|
||||
_1f.curve=new dojo._Line(_20,_21);
|
||||
},onAnimate:function(val){
|
||||
w.scrollLeft=val;
|
||||
}});
|
||||
this._anim=_1f;
|
||||
this._setButtonClass(x);
|
||||
return _1f;
|
||||
},_getBtnNode:function(e){
|
||||
var n=e.target;
|
||||
while(n&&!dojo.hasClass(n,"tabStripButton")){
|
||||
n=n.parentNode;
|
||||
}
|
||||
return n;
|
||||
},doSlideRight:function(e){
|
||||
this.doSlide(1,this._getBtnNode(e));
|
||||
},doSlideLeft:function(e){
|
||||
this.doSlide(-1,this._getBtnNode(e));
|
||||
},doSlide:function(_22,_23){
|
||||
if(_23&&dojo.hasClass(_23,"dijitTabDisabled")){
|
||||
return;
|
||||
}
|
||||
var _24=dojo.style(this.scrollNode,"width");
|
||||
var d=(_24*0.75)*_22;
|
||||
var to=this._getScroll()+d;
|
||||
this._setButtonClass(to);
|
||||
this.createSmoothScroll(to).play();
|
||||
},_setButtonClass:function(_25){
|
||||
var _26=this._getScrollBounds();
|
||||
this._leftBtn.set("disabled",_25<=_26.min);
|
||||
this._rightBtn.set("disabled",_25>=_26.max);
|
||||
}});
|
||||
dojo.declare("dijit.layout._ScrollingTabControllerButton",dijit.form.Button,{baseClass:"dijitTab tabStripButton",templateString:dojo.cache("dijit.layout","templates/_ScrollingTabControllerButton.html","<div dojoAttachEvent=\"onclick:_onButtonClick\">\n\t<div waiRole=\"presentation\" class=\"dijitTabInnerDiv\" dojoattachpoint=\"innerDiv,focusNode\">\n\t\t<div waiRole=\"presentation\" class=\"dijitTabContent dijitButtonContents\" dojoattachpoint=\"tabContent\">\n\t\t\t<img waiRole=\"presentation\" alt=\"\" src=\"${_blankGif}\" class=\"dijitTabStripIcon\" dojoAttachPoint=\"iconNode\"/>\n\t\t\t<span dojoAttachPoint=\"containerNode,titleNode\" class=\"dijitButtonText\"></span>\n\t\t</div>\n\t</div>\n</div>\n"),tabIndex:"-1"});
|
||||
dojo.require("dijit.form.Button");
|
||||
dojo.require("dijit._HasDropDown");
|
||||
|
||||
|
||||
dojo.declare("dijit.layout.ScrollingTabController",
|
||||
dijit.layout.TabController,
|
||||
{
|
||||
// summary:
|
||||
// Set of tabs with left/right arrow keys and a menu to switch between tabs not
|
||||
// all fitting on a single row.
|
||||
// Works only for horizontal tabs (either above or below the content, not to the left
|
||||
// or right).
|
||||
// tags:
|
||||
// private
|
||||
|
||||
templateString: dojo.cache("dijit.layout", "templates/ScrollingTabController.html", "<div class=\"dijitTabListContainer-${tabPosition}\" style=\"visibility:hidden\">\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerMenuButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_menuBtn\" containerId=\"${containerId}\" iconClass=\"dijitTabStripMenuIcon\"\n\t\t\tdropDownPosition=\"below-alt, above-alt\"\n\t\t\tdojoAttachPoint=\"_menuBtn\" showLabel=\"false\">▼</div>\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_leftBtn\" iconClass=\"dijitTabStripSlideLeftIcon\"\n\t\t\tdojoAttachPoint=\"_leftBtn\" dojoAttachEvent=\"onClick: doSlideLeft\" showLabel=\"false\">◀</div>\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_rightBtn\" iconClass=\"dijitTabStripSlideRightIcon\"\n\t\t\tdojoAttachPoint=\"_rightBtn\" dojoAttachEvent=\"onClick: doSlideRight\" showLabel=\"false\">▶</div>\n\t<div class='dijitTabListWrapper' dojoAttachPoint='tablistWrapper'>\n\t\t<div role='tablist' dojoAttachEvent='onkeypress:onkeypress'\n\t\t\t\tdojoAttachPoint='containerNode' class='nowrapTabStrip'></div>\n\t</div>\n</div>\n"),
|
||||
|
||||
// useMenu: [const] Boolean
|
||||
// True if a menu should be used to select tabs when they are too
|
||||
// wide to fit the TabContainer, false otherwise.
|
||||
useMenu: true,
|
||||
|
||||
// useSlider: [const] Boolean
|
||||
// True if a slider should be used to select tabs when they are too
|
||||
// wide to fit the TabContainer, false otherwise.
|
||||
useSlider: true,
|
||||
|
||||
// tabStripClass: [const] String
|
||||
// The css class to apply to the tab strip, if it is visible.
|
||||
tabStripClass: "",
|
||||
|
||||
widgetsInTemplate: true,
|
||||
|
||||
// _minScroll: Number
|
||||
// The distance in pixels from the edge of the tab strip which,
|
||||
// if a scroll animation is less than, forces the scroll to
|
||||
// go all the way to the left/right.
|
||||
_minScroll: 5,
|
||||
|
||||
attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, {
|
||||
"class": "containerNode"
|
||||
}),
|
||||
|
||||
buildRendering: function(){
|
||||
this.inherited(arguments);
|
||||
var n = this.domNode;
|
||||
|
||||
this.scrollNode = this.tablistWrapper;
|
||||
this._initButtons();
|
||||
|
||||
if(!this.tabStripClass){
|
||||
this.tabStripClass = "dijitTabContainer" +
|
||||
this.tabPosition.charAt(0).toUpperCase() +
|
||||
this.tabPosition.substr(1).replace(/-.*/, "") +
|
||||
"None";
|
||||
dojo.addClass(n, "tabStrip-disabled")
|
||||
}
|
||||
|
||||
dojo.addClass(this.tablistWrapper, this.tabStripClass);
|
||||
},
|
||||
|
||||
onStartup: function(){
|
||||
this.inherited(arguments);
|
||||
|
||||
// Do not show the TabController until the related
|
||||
// StackController has added it's children. This gives
|
||||
// a less visually jumpy instantiation.
|
||||
dojo.style(this.domNode, "visibility", "visible");
|
||||
this._postStartup = true;
|
||||
},
|
||||
|
||||
onAddChild: function(page, insertIndex){
|
||||
this.inherited(arguments);
|
||||
|
||||
// changes to the tab button label or iconClass will have changed the width of the
|
||||
// buttons, so do a resize
|
||||
dojo.forEach(["label", "iconClass"], function(attr){
|
||||
this.pane2watches[page.id].push(
|
||||
this.pane2button[page.id].watch(attr, dojo.hitch(this, function(name, oldValue, newValue){
|
||||
if(this._postStartup && this._dim){
|
||||
this.resize(this._dim);
|
||||
}
|
||||
}))
|
||||
);
|
||||
}, this);
|
||||
|
||||
// Increment the width of the wrapper when a tab is added
|
||||
// This makes sure that the buttons never wrap.
|
||||
// The value 200 is chosen as it should be bigger than most
|
||||
// Tab button widths.
|
||||
dojo.style(this.containerNode, "width",
|
||||
(dojo.style(this.containerNode, "width") + 200) + "px");
|
||||
},
|
||||
|
||||
onRemoveChild: function(page, insertIndex){
|
||||
// null out _selectedTab because we are about to delete that dom node
|
||||
var button = this.pane2button[page.id];
|
||||
if(this._selectedTab === button.domNode){
|
||||
this._selectedTab = null;
|
||||
}
|
||||
|
||||
this.inherited(arguments);
|
||||
},
|
||||
|
||||
_initButtons: function(){
|
||||
// summary:
|
||||
// Creates the buttons used to scroll to view tabs that
|
||||
// may not be visible if the TabContainer is too narrow.
|
||||
|
||||
// Make a list of the buttons to display when the tab labels become
|
||||
// wider than the TabContainer, and hide the other buttons.
|
||||
// Also gets the total width of the displayed buttons.
|
||||
this._btnWidth = 0;
|
||||
this._buttons = dojo.query("> .tabStripButton", this.domNode).filter(function(btn){
|
||||
if((this.useMenu && btn == this._menuBtn.domNode) ||
|
||||
(this.useSlider && (btn == this._rightBtn.domNode || btn == this._leftBtn.domNode))){
|
||||
this._btnWidth += dojo._getMarginSize(btn).w;
|
||||
return true;
|
||||
}else{
|
||||
dojo.style(btn, "display", "none");
|
||||
return false;
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
|
||||
_getTabsWidth: function(){
|
||||
var children = this.getChildren();
|
||||
if(children.length){
|
||||
var leftTab = children[this.isLeftToRight() ? 0 : children.length - 1].domNode,
|
||||
rightTab = children[this.isLeftToRight() ? children.length - 1 : 0].domNode;
|
||||
return rightTab.offsetLeft + dojo.style(rightTab, "width") - leftTab.offsetLeft;
|
||||
}else{
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
|
||||
_enableBtn: function(width){
|
||||
// summary:
|
||||
// Determines if the tabs are wider than the width of the TabContainer, and
|
||||
// thus that we need to display left/right/menu navigation buttons.
|
||||
var tabsWidth = this._getTabsWidth();
|
||||
width = width || dojo.style(this.scrollNode, "width");
|
||||
return tabsWidth > 0 && width < tabsWidth;
|
||||
},
|
||||
|
||||
resize: function(dim){
|
||||
// summary:
|
||||
// Hides or displays the buttons used to scroll the tab list and launch the menu
|
||||
// that selects tabs.
|
||||
|
||||
if(this.domNode.offsetWidth == 0){
|
||||
return;
|
||||
}
|
||||
|
||||
// Save the dimensions to be used when a child is renamed.
|
||||
this._dim = dim;
|
||||
|
||||
// Set my height to be my natural height (tall enough for one row of tab labels),
|
||||
// and my content-box width based on margin-box width specified in dim parameter.
|
||||
// But first reset scrollNode.height in case it was set by layoutChildren() call
|
||||
// in a previous run of this method.
|
||||
this.scrollNode.style.height = "auto";
|
||||
this._contentBox = dijit.layout.marginBox2contentBox(this.domNode, {h: 0, w: dim.w});
|
||||
this._contentBox.h = this.scrollNode.offsetHeight;
|
||||
dojo.contentBox(this.domNode, this._contentBox);
|
||||
|
||||
// Show/hide the left/right/menu navigation buttons depending on whether or not they
|
||||
// are needed.
|
||||
var enable = this._enableBtn(this._contentBox.w);
|
||||
this._buttons.style("display", enable ? "" : "none");
|
||||
|
||||
// Position and size the navigation buttons and the tablist
|
||||
this._leftBtn.layoutAlign = "left";
|
||||
this._rightBtn.layoutAlign = "right";
|
||||
this._menuBtn.layoutAlign = this.isLeftToRight() ? "right" : "left";
|
||||
dijit.layout.layoutChildren(this.domNode, this._contentBox,
|
||||
[this._menuBtn, this._leftBtn, this._rightBtn, {domNode: this.scrollNode, layoutAlign: "client"}]);
|
||||
|
||||
// set proper scroll so that selected tab is visible
|
||||
if(this._selectedTab){
|
||||
if(this._anim && this._anim.status() == "playing"){
|
||||
this._anim.stop();
|
||||
}
|
||||
var w = this.scrollNode,
|
||||
sl = this._convertToScrollLeft(this._getScrollForSelectedTab());
|
||||
w.scrollLeft = sl;
|
||||
}
|
||||
|
||||
// Enable/disabled left right buttons depending on whether or not user can scroll to left or right
|
||||
this._setButtonClass(this._getScroll());
|
||||
|
||||
this._postResize = true;
|
||||
|
||||
// Return my size so layoutChildren() can use it.
|
||||
// Also avoids IE9 layout glitch on browser resize when scroll buttons present
|
||||
return {h: this._contentBox.h, w: dim.w};
|
||||
},
|
||||
|
||||
_getScroll: function(){
|
||||
// summary:
|
||||
// Returns the current scroll of the tabs where 0 means
|
||||
// "scrolled all the way to the left" and some positive number, based on #
|
||||
// of pixels of possible scroll (ex: 1000) means "scrolled all the way to the right"
|
||||
var sl = (this.isLeftToRight() || dojo.isIE < 8 || (dojo.isIE && dojo.isQuirks) || dojo.isWebKit) ? this.scrollNode.scrollLeft :
|
||||
dojo.style(this.containerNode, "width") - dojo.style(this.scrollNode, "width")
|
||||
+ (dojo.isIE == 8 ? -1 : 1) * this.scrollNode.scrollLeft;
|
||||
return sl;
|
||||
},
|
||||
|
||||
_convertToScrollLeft: function(val){
|
||||
// summary:
|
||||
// Given a scroll value where 0 means "scrolled all the way to the left"
|
||||
// and some positive number, based on # of pixels of possible scroll (ex: 1000)
|
||||
// means "scrolled all the way to the right", return value to set this.scrollNode.scrollLeft
|
||||
// to achieve that scroll.
|
||||
//
|
||||
// This method is to adjust for RTL funniness in various browsers and versions.
|
||||
if(this.isLeftToRight() || dojo.isIE < 8 || (dojo.isIE && dojo.isQuirks) || dojo.isWebKit){
|
||||
return val;
|
||||
}else{
|
||||
var maxScroll = dojo.style(this.containerNode, "width") - dojo.style(this.scrollNode, "width");
|
||||
return (dojo.isIE == 8 ? -1 : 1) * (val - maxScroll);
|
||||
}
|
||||
},
|
||||
|
||||
onSelectChild: function(/*dijit._Widget*/ page){
|
||||
// summary:
|
||||
// Smoothly scrolls to a tab when it is selected.
|
||||
|
||||
var tab = this.pane2button[page.id];
|
||||
if(!tab || !page){return;}
|
||||
|
||||
// Scroll to the selected tab, except on startup, when scrolling is handled in resize()
|
||||
var node = tab.domNode;
|
||||
if(this._postResize && node != this._selectedTab){
|
||||
this._selectedTab = node;
|
||||
|
||||
var sl = this._getScroll();
|
||||
|
||||
if(sl > node.offsetLeft ||
|
||||
sl + dojo.style(this.scrollNode, "width") <
|
||||
node.offsetLeft + dojo.style(node, "width")){
|
||||
this.createSmoothScroll().play();
|
||||
}
|
||||
}
|
||||
|
||||
this.inherited(arguments);
|
||||
},
|
||||
|
||||
_getScrollBounds: function(){
|
||||
// summary:
|
||||
// Returns the minimum and maximum scroll setting to show the leftmost and rightmost
|
||||
// tabs (respectively)
|
||||
var children = this.getChildren(),
|
||||
scrollNodeWidth = dojo.style(this.scrollNode, "width"), // about 500px
|
||||
containerWidth = dojo.style(this.containerNode, "width"), // 50,000px
|
||||
maxPossibleScroll = containerWidth - scrollNodeWidth, // scrolling until right edge of containerNode visible
|
||||
tabsWidth = this._getTabsWidth();
|
||||
|
||||
if(children.length && tabsWidth > scrollNodeWidth){
|
||||
// Scrolling should happen
|
||||
return {
|
||||
min: this.isLeftToRight() ? 0 : children[children.length-1].domNode.offsetLeft,
|
||||
max: this.isLeftToRight() ?
|
||||
(children[children.length-1].domNode.offsetLeft + dojo.style(children[children.length-1].domNode, "width")) - scrollNodeWidth :
|
||||
maxPossibleScroll
|
||||
};
|
||||
}else{
|
||||
// No scrolling needed, all tabs visible, we stay either scrolled to far left or far right (depending on dir)
|
||||
var onlyScrollPosition = this.isLeftToRight() ? 0 : maxPossibleScroll;
|
||||
return {
|
||||
min: onlyScrollPosition,
|
||||
max: onlyScrollPosition
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
_getScrollForSelectedTab: function(){
|
||||
// summary:
|
||||
// Returns the scroll value setting so that the selected tab
|
||||
// will appear in the center
|
||||
var w = this.scrollNode,
|
||||
n = this._selectedTab,
|
||||
scrollNodeWidth = dojo.style(this.scrollNode, "width"),
|
||||
scrollBounds = this._getScrollBounds();
|
||||
|
||||
// TODO: scroll minimal amount (to either right or left) so that
|
||||
// selected tab is fully visible, and just return if it's already visible?
|
||||
var pos = (n.offsetLeft + dojo.style(n, "width")/2) - scrollNodeWidth/2;
|
||||
pos = Math.min(Math.max(pos, scrollBounds.min), scrollBounds.max);
|
||||
|
||||
// TODO:
|
||||
// If scrolling close to the left side or right side, scroll
|
||||
// all the way to the left or right. See this._minScroll.
|
||||
// (But need to make sure that doesn't scroll the tab out of view...)
|
||||
return pos;
|
||||
},
|
||||
|
||||
createSmoothScroll: function(x){
|
||||
// summary:
|
||||
// Creates a dojo._Animation object that smoothly scrolls the tab list
|
||||
// either to a fixed horizontal pixel value, or to the selected tab.
|
||||
// description:
|
||||
// If an number argument is passed to the function, that horizontal
|
||||
// pixel position is scrolled to. Otherwise the currently selected
|
||||
// tab is scrolled to.
|
||||
// x: Integer?
|
||||
// An optional pixel value to scroll to, indicating distance from left.
|
||||
|
||||
// Calculate position to scroll to
|
||||
if(arguments.length > 0){
|
||||
// position specified by caller, just make sure it's within bounds
|
||||
var scrollBounds = this._getScrollBounds();
|
||||
x = Math.min(Math.max(x, scrollBounds.min), scrollBounds.max);
|
||||
}else{
|
||||
// scroll to center the current tab
|
||||
x = this._getScrollForSelectedTab();
|
||||
}
|
||||
|
||||
if(this._anim && this._anim.status() == "playing"){
|
||||
this._anim.stop();
|
||||
}
|
||||
|
||||
var self = this,
|
||||
w = this.scrollNode,
|
||||
anim = new dojo._Animation({
|
||||
beforeBegin: function(){
|
||||
if(this.curve){ delete this.curve; }
|
||||
var oldS = w.scrollLeft,
|
||||
newS = self._convertToScrollLeft(x);
|
||||
anim.curve = new dojo._Line(oldS, newS);
|
||||
},
|
||||
onAnimate: function(val){
|
||||
w.scrollLeft = val;
|
||||
}
|
||||
});
|
||||
this._anim = anim;
|
||||
|
||||
// Disable/enable left/right buttons according to new scroll position
|
||||
this._setButtonClass(x);
|
||||
|
||||
return anim; // dojo._Animation
|
||||
},
|
||||
|
||||
_getBtnNode: function(/*Event*/ e){
|
||||
// summary:
|
||||
// Gets a button DOM node from a mouse click event.
|
||||
// e:
|
||||
// The mouse click event.
|
||||
var n = e.target;
|
||||
while(n && !dojo.hasClass(n, "tabStripButton")){
|
||||
n = n.parentNode;
|
||||
}
|
||||
return n;
|
||||
},
|
||||
|
||||
doSlideRight: function(/*Event*/ e){
|
||||
// summary:
|
||||
// Scrolls the menu to the right.
|
||||
// e:
|
||||
// The mouse click event.
|
||||
this.doSlide(1, this._getBtnNode(e));
|
||||
},
|
||||
|
||||
doSlideLeft: function(/*Event*/ e){
|
||||
// summary:
|
||||
// Scrolls the menu to the left.
|
||||
// e:
|
||||
// The mouse click event.
|
||||
this.doSlide(-1,this._getBtnNode(e));
|
||||
},
|
||||
|
||||
doSlide: function(/*Number*/ direction, /*DomNode*/ node){
|
||||
// summary:
|
||||
// Scrolls the tab list to the left or right by 75% of the widget width.
|
||||
// direction:
|
||||
// If the direction is 1, the widget scrolls to the right, if it is
|
||||
// -1, it scrolls to the left.
|
||||
|
||||
if(node && dojo.hasClass(node, "dijitTabDisabled")){return;}
|
||||
|
||||
var sWidth = dojo.style(this.scrollNode, "width");
|
||||
var d = (sWidth * 0.75) * direction;
|
||||
|
||||
var to = this._getScroll() + d;
|
||||
|
||||
this._setButtonClass(to);
|
||||
|
||||
this.createSmoothScroll(to).play();
|
||||
},
|
||||
|
||||
_setButtonClass: function(/*Number*/ scroll){
|
||||
// summary:
|
||||
// Disables the left scroll button if the tabs are scrolled all the way to the left,
|
||||
// or the right scroll button in the opposite case.
|
||||
// scroll: Integer
|
||||
// amount of horizontal scroll
|
||||
|
||||
var scrollBounds = this._getScrollBounds();
|
||||
this._leftBtn.set("disabled", scroll <= scrollBounds.min);
|
||||
this._rightBtn.set("disabled", scroll >= scrollBounds.max);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
dojo.declare("dijit.layout._ScrollingTabControllerButtonMixin", null, {
|
||||
baseClass: "dijitTab tabStripButton",
|
||||
|
||||
templateString: dojo.cache("dijit.layout", "templates/_ScrollingTabControllerButton.html", "<div dojoAttachEvent=\"onclick:_onButtonClick\">\n\t<div role=\"presentation\" class=\"dijitTabInnerDiv\" dojoattachpoint=\"innerDiv,focusNode\">\n\t\t<div role=\"presentation\" class=\"dijitTabContent dijitButtonContents\" dojoattachpoint=\"tabContent\">\n\t\t\t<img role=\"presentation\" alt=\"\" src=\"${_blankGif}\" class=\"dijitTabStripIcon\" dojoAttachPoint=\"iconNode\"/>\n\t\t\t<span dojoAttachPoint=\"containerNode,titleNode\" class=\"dijitButtonText\"></span>\n\t\t</div>\n\t</div>\n</div>\n"),
|
||||
|
||||
// Override inherited tabIndex: 0 from dijit.form.Button, because user shouldn't be
|
||||
// able to tab to the left/right/menu buttons
|
||||
tabIndex: "",
|
||||
|
||||
// Similarly, override FormWidget.isFocusable() because clicking a button shouldn't focus it
|
||||
// either (this override avoids focus() call in FormWidget.js)
|
||||
isFocusable: function(){ return false; }
|
||||
});
|
||||
|
||||
dojo.declare("dijit.layout._ScrollingTabControllerButton",
|
||||
[dijit.form.Button, dijit.layout._ScrollingTabControllerButtonMixin]);
|
||||
|
||||
dojo.declare(
|
||||
"dijit.layout._ScrollingTabControllerMenuButton",
|
||||
[dijit.form.Button, dijit._HasDropDown, dijit.layout._ScrollingTabControllerButtonMixin],
|
||||
{
|
||||
// id of the TabContainer itself
|
||||
containerId: "",
|
||||
|
||||
// -1 so user can't tab into the button, but so that button can still be focused programatically.
|
||||
// Because need to move focus to the button (or somewhere) before the menu is hidden or IE6 will crash.
|
||||
tabIndex: "-1",
|
||||
|
||||
isLoaded: function(){
|
||||
// recreate menu every time, in case the TabContainer's list of children (or their icons/labels) have changed
|
||||
return false;
|
||||
},
|
||||
|
||||
loadDropDown: function(callback){
|
||||
this.dropDown = new dijit.Menu({
|
||||
id: this.containerId + "_menu",
|
||||
dir: this.dir,
|
||||
lang: this.lang
|
||||
});
|
||||
var container = dijit.byId(this.containerId);
|
||||
dojo.forEach(container.getChildren(), function(page){
|
||||
var menuItem = new dijit.MenuItem({
|
||||
id: page.id + "_stcMi",
|
||||
label: page.title,
|
||||
iconClass: page.iconClass,
|
||||
dir: page.dir,
|
||||
lang: page.lang,
|
||||
onClick: function(){
|
||||
container.selectChild(page);
|
||||
}
|
||||
});
|
||||
this.dropDown.addChild(menuItem);
|
||||
}, this);
|
||||
callback();
|
||||
},
|
||||
|
||||
closeDropDown: function(/*Boolean*/ focus){
|
||||
this.inherited(arguments);
|
||||
if(this.dropDown){
|
||||
this.dropDown.destroyRecursive();
|
||||
delete this.dropDown;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user