| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358 |
- AUI.add('aui-toolbar', function(A) {
- /**
- * The Toolbar Utility
- *
- * @module aui-toolbar
- */
-
- var Lang = A.Lang,
- isString = Lang.isString,
-
- HORIZONTAL = 'horizontal',
- NAME = 'toolbar',
- ORIENTATION = 'orientation',
- TOOLBARSPACER = 'toolbarspacer',
- VERTICAL = 'vertical',
-
- getClassName = A.getClassName,
-
- CSS_FIRST = getClassName(NAME, 'first'),
- CSS_HORIZONTAL = getClassName(NAME, HORIZONTAL),
- CSS_ITEM = getClassName(NAME, 'item'),
- CSS_ITEM_CONTENT = getClassName(NAME, 'item', 'content'),
- CSS_LAST = getClassName(NAME, 'last'),
- CSS_VERTICAL = getClassName(NAME, VERTICAL),
-
- isButtonItem = function(v) {
- return ( v instanceof A.ButtonItem );
- },
-
- isToolbarSpacer = function(v) {
- return ( v instanceof A.ToolbarSpacer );
- },
-
- TPL_GENERIC = '<span></span>';
-
- /**
- * A base class for Toolbar, providing:
- * <ul>
- * <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li>
- * <li>The ability to manage multiple <a href="ButtonItem.html">ButtonItem</a> widgets as one group</li>
- * <li>Managed user interaction states (default, active, hover)</li>
- * <li>Keyboard accessible</li>
- * </ul>
- *
- * Quick Example:<br/>
- *
- * <pre><code>var instance = new A.Toolbar({
- * children: [
- * {icon: 'plus', label: 'Add'},
- * {icon: 'minus', label: 'Delete'}
- * ]
- * }).render();
- * </code></pre>
- *
- * Check the list of <a href="Toolbar.html#configattributes">Configuration Attributes</a> available for
- * Toolbar.
- *
- * @param config {Object} Object literal specifying widget configuration properties.
- *
- * @class Toolbar
- * @constructor
- * @extends Component
- * @uses WidgetParent
- */
-
- var Toolbar = A.Component.create(
- {
- NAME: NAME,
-
- ATTRS: {
- /**
- * Receives an interaction state of active when the user clicks on it.
- *
- * @attribute activeState
- * @type boolean
- */
- activeState: {},
-
- /**
- * Receives the toolbar items.
- *
- * @attribute children
- * @type Array
- */
-
- /**
- * Receives a default interaction state.
- *
- * @attribute defaultState
- * @type boolean
- */
- defaultState: {},
-
- /**
- * Receives an interaction state of hover during the
- * <code>mouseover</code> event.
- *
- * @attribute hoverState
- * @type boolean
- */
- hoverState: {},
-
- /**
- * The default type of child widget to render into the Element
- *
- * @attribute defaultChildType
- * @default ButtonItem
- * @type String | Object
- */
- defaultChildType: {
- value: 'ButtonItem'
- },
-
- /**
- * Representing the orientation of the progress bar. Could be
- * <code>horizontal</code> or <code>vertical</code>.
- *
- * @attribute orientation
- * @default 'horizontal'
- * @type String
- */
- orientation: {
- value: HORIZONTAL,
- validator: function(val) {
- return isString(val) && (val === HORIZONTAL || val === VERTICAL);
- }
- }
- },
-
- UI_ATTRS: [ORIENTATION],
-
- prototype: {
- BOUNDING_TEMPLATE: TPL_GENERIC,
- CONTENT_TEMPLATE: TPL_GENERIC,
-
- /**
- * Construction logic executed during Toolbar instantiation. Lifecycle.
- *
- * @method initializer
- * @protected
- */
- initializer: function() {
- var instance = this;
-
- A.Do.before(instance._addByIconId, instance, 'add');
- },
-
- /*
- * Lifecycle
- */
-
- /**
- * Bind the events on the Toolbar UI. Lifecycle.
- *
- * @method bindUI
- * @protected
- */
- bindUI: function() {
- var instance = this;
-
- instance.on('addChild', instance._onAddButton);
-
- instance.after('addChild', instance._afterAddButton);
- instance.after('removeChild', instance._afterRemoveButton);
- },
-
- /**
- * Sync the Toolbar UI. Lifecycle.
- *
- * @method syncUI
- * @protected
- */
- syncUI: function() {
- var instance = this;
-
- var length = instance.size() - 1;
- var indexFirst = -1;
- var indexLast = -1;
-
- instance.each(
- function(item, index, collection) {
- var itemBoundingBox = item.get('boundingBox');
-
- if (isButtonItem(item)) {
- if (indexFirst == -1) {
- indexFirst = index;
- }
- else {
- indexLast = index;
- }
-
- itemBoundingBox.toggleClass(CSS_FIRST, index == indexFirst);
- itemBoundingBox.toggleClass(CSS_LAST, index == length);
-
- itemBoundingBox.addClass(CSS_ITEM);
- }
- else {
- if (index == indexFirst + 1) {
- indexLast = indexFirst;
- }
-
- if (indexLast != -1) {
- collection.item(indexLast).get('boundingBox').toggleClass(CSS_LAST, true);
- }
-
- indexFirst = -1;
- indexLast = -1;
- }
- }
- );
- },
-
- /*
- * Methods
- */
-
- /**
- * Overloads the add method so that if only a string is passed in, it will be
- * assumed to be the icon, and will automatically create a configuration
- * object for it.
- *
- * @method _addByIconId
- * @param {String} icon the icon name or object or array of objects to add to the toolbar
- * @protected
- * @return {String}
- */
- _addByIconId: function(icon) {
- var instance = this;
-
- if (Lang.isString(icon)) {
- var item = {
- icon: icon
- };
-
- return new A.Do.AlterArgs(null, [item]);
- }
- },
-
- /**
- * Syncs the UI after a button is added.
- *
- * @method _afterAddButton
- * @param {EventFacade} event
- * @protected
- */
- _afterAddButton: function(event) {
- var instance = this;
-
- instance.syncUI();
- },
-
- /**
- * Syncs the UI after a button is removed.
- *
- * @method _afterRemoveButton
- * @param {EventFacade} event
- * @protected
- */
- _afterRemoveButton: function(event) {
- var instance = this;
-
- event.child.destroy();
-
- instance.syncUI();
- },
-
- /**
- * Updates the UI for the orientation attribute.
- *
- * @method _uiSetOrientation
- * @param {String} newVal The new value
- * @protected
- */
- _uiSetOrientation: function(val) {
- var instance = this;
- var boundingBox = instance.get('boundingBox');
- var horizontal = (val == HORIZONTAL);
-
- boundingBox.toggleClass(CSS_HORIZONTAL, horizontal);
- boundingBox.toggleClass(CSS_VERTICAL, !horizontal);
- }
- }
- }
- );
-
- var ToolbarSpacer = A.Component.create(
- {
- NAME: TOOLBARSPACER,
-
- AUGMENTS: [A.WidgetChild],
-
- ATTRS: {
- },
-
- prototype: {
- BOUNDING_TEMPLATE: TPL_GENERIC,
- CONTENT_TEMPLATE: null
- }
- }
- );
-
- A.ToolbarSpacer = ToolbarSpacer;
-
- var WidgetParentId = function() {
- var instance = this;
-
- instance._CHILD_MAP = new A.DataSet();
-
- instance.on('addChild', instance._onAddChildById);
-
- instance.after('addChild', instance._afterAddChildById);
- instance.after('removeChild', instance._afterRemoveChildById);
-
- A.Do.before(instance._findById, instance, 'item');
- A.Do.before(instance._findById, instance, 'remove');
- };
-
- WidgetParentId.prototype = {
- _afterAddChildById: function(event) {
- var instance = this;
-
- var id = event.child.get('id');
-
- instance._CHILD_MAP.insert(event.index, id, event.child);
- },
-
- _afterRemoveChildById: function(event) {
- var instance = this;
-
- var id = event.child.get('id');
-
- instance._CHILD_MAP.removeKey(id);
- },
-
- _findById: function(id) {
- var instance = this;
-
- if (Lang.isString(id)) {
- var index = instance._CHILD_MAP.indexOfKey(id);
-
- return new A.Do.AlterArgs(null, [index]);
- }
- },
-
- _onAddChildById: function(event) {
- var instance = this;
-
- var id = event.child.get('id');
-
- if (instance._CHILD_MAP.indexOfKey(id) > -1) {
- event.preventDefault();
- }
- }
- };
-
- A.Toolbar = A.Component.build(NAME, Toolbar, [A.WidgetParent, WidgetParentId], { dynamic: false });
-
- }, '@VERSION@' ,{requires:['aui-base','aui-button-item','aui-data-set','widget-parent'], skinnable:true});
|