From ca3ad6305ec0655ad8475a12ac2228b61cdd9ba0 Mon Sep 17 00:00:00 2001 From: Lionel LASKE Date: Sat, 25 Aug 2012 20:23:36 +0000 Subject: Init commit --- (limited to 'html/lib/onyx/source/MoreToolbar.js') diff --git a/html/lib/onyx/source/MoreToolbar.js b/html/lib/onyx/source/MoreToolbar.js new file mode 100644 index 0000000..83afb68 --- /dev/null +++ b/html/lib/onyx/source/MoreToolbar.js @@ -0,0 +1,141 @@ +/** + onyx.MoreToolbar is a kind of onyx.Toolbar that can adapt to different screen sizes by moving overflowing controls and content into an onyx.Menu + + {kind: "onyx.MoreToolbar", components: [ + {content: "More Toolbar", unmoveable: true}, + {kind: "onyx.Button", content: "Alpha"}, + {kind: "onyx.Button", content: "Beta"}, + {kind: "onyx.Button", content: "Gamma", unmoveable: true}, + {kind: "onyx.Button", content: "Epsilon"} + ]}, + + A control can be forced to never move to the menu by setting the optional unmovable property to true (default is false). + + Optionally you can specify a class to be applied to the menu via the menuClass property. You can also specify a class for items that have been moved via the the movedClass property. +*/ + +enyo.kind({ + name: "onyx.MoreToolbar", + //* @public + classes: "onyx-toolbar onyx-more-toolbar", + //* style class to be applied to the menu + menuClass: "", + //* style class to be applied to individual controls moved from the toolbar to the menu + movedClass: "", + //* @protected + layoutKind: "FittableColumnsLayout", + noStretch: true, + handlers: { + onHide: "reflow" + }, + tools: [ + {name: "client", fit: true, classes: "onyx-toolbar-inline"}, + {name: "nard", kind: "onyx.MenuDecorator", showing: false, onActivate: "activated", components: [ + {kind: "onyx.IconButton", classes: "onyx-more-button"}, + {name: "menu", kind: "onyx.Menu", classes: "onyx-more-menu", prepend: true} + ]} + ], + initComponents: function() { + if(this.menuClass && this.menuClass.length>0 && !this.$.menu.hasClass(this.menuClass)) { + this.$.menu.addClass(this.menuClass); + } + this.createChrome(this.tools); + this.inherited(arguments); + }, + reflow: function() { + this.inherited(arguments); + if (this.isContentOverflowing()) { + this.$.nard.show(); + if (this.popItem()) { + this.reflow(); + } + } else if (this.tryPushItem()) { + this.reflow(); + } else if (!this.$.menu.children.length) { + this.$.nard.hide(); + this.$.menu.hide(); + } + }, + activated: function(inSender, inEvent) { + this.addRemoveClass("active",inEvent.originator.active); + }, + popItem: function() { + var c = this.findCollapsibleItem(); + if (c) { + //apply movedClass is needed + if(this.movedClass && this.movedClass.length>0 && !c.hasClass(this.movedClass)) { + c.addClass(this.movedClass); + } + this.$.menu.addChild(c); + var p = this.$.menu.hasNode(); + if (p && c.hasNode()) { + c.insertNodeInParent(p); + } + return true; + } + }, + pushItem: function() { + var c$ = this.$.menu.children; + var c = c$[0]; + if (c) { + //remove any applied movedClass + if(this.movedClass && this.movedClass.length>0 && c.hasClass(this.movedClass)) { + c.removeClass(this.movedClass); + } + this.$.client.addChild(c); + var p = this.$.client.hasNode(); + if (p && c.hasNode()) { + var nextChild = undefined; + var currIndex; + for(var i=0; i this.$.client.node.clientWidth); + return ((n.offsetLeft + n.offsetWidth) > this.$.client.node.clientWidth); + } + } + }, + findCollapsibleItem: function() { + var c$ = this.$.client.children; + for (var i=c$.length-1; c=c$[i]; i--) { + if (!c.unmoveable) { + return c; + } else { + if(c.toolbarIndex==undefined) { + c.toolbarIndex = i; + } + } + } + } +}); -- cgit v0.9.1