Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

aui-toolbar-debug.js 7.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. AUI.add('aui-toolbar', function(A) {
  2. /**
  3. * The Toolbar Utility
  4. *
  5. * @module aui-toolbar
  6. */
  7. var Lang = A.Lang,
  8. isString = Lang.isString,
  9. HORIZONTAL = 'horizontal',
  10. NAME = 'toolbar',
  11. ORIENTATION = 'orientation',
  12. TOOLBARSPACER = 'toolbarspacer',
  13. VERTICAL = 'vertical',
  14. getClassName = A.getClassName,
  15. CSS_FIRST = getClassName(NAME, 'first'),
  16. CSS_HORIZONTAL = getClassName(NAME, HORIZONTAL),
  17. CSS_ITEM = getClassName(NAME, 'item'),
  18. CSS_ITEM_CONTENT = getClassName(NAME, 'item', 'content'),
  19. CSS_LAST = getClassName(NAME, 'last'),
  20. CSS_VERTICAL = getClassName(NAME, VERTICAL),
  21. isButtonItem = function(v) {
  22. return ( v instanceof A.ButtonItem );
  23. },
  24. isToolbarSpacer = function(v) {
  25. return ( v instanceof A.ToolbarSpacer );
  26. },
  27. TPL_GENERIC = '<span></span>';
  28. /**
  29. * A base class for Toolbar, providing:
  30. * <ul>
  31. * <li>Widget Lifecycle (initializer, renderUI, bindUI, syncUI, destructor)</li>
  32. * <li>The ability to manage multiple <a href="ButtonItem.html">ButtonItem</a> widgets as one group</li>
  33. * <li>Managed user interaction states (default, active, hover)</li>
  34. * <li>Keyboard accessible</li>
  35. * </ul>
  36. *
  37. * Quick Example:<br/>
  38. *
  39. * <pre><code>var instance = new A.Toolbar({
  40. * children: [
  41. * {icon: 'plus', label: 'Add'},
  42. * {icon: 'minus', label: 'Delete'}
  43. * ]
  44. * }).render();
  45. * </code></pre>
  46. *
  47. * Check the list of <a href="Toolbar.html#configattributes">Configuration Attributes</a> available for
  48. * Toolbar.
  49. *
  50. * @param config {Object} Object literal specifying widget configuration properties.
  51. *
  52. * @class Toolbar
  53. * @constructor
  54. * @extends Component
  55. * @uses WidgetParent
  56. */
  57. var Toolbar = A.Component.create(
  58. {
  59. NAME: NAME,
  60. ATTRS: {
  61. /**
  62. * Receives an interaction state of active when the user clicks on it.
  63. *
  64. * @attribute activeState
  65. * @type boolean
  66. */
  67. activeState: {},
  68. /**
  69. * Receives the toolbar items.
  70. *
  71. * @attribute children
  72. * @type Array
  73. */
  74. /**
  75. * Receives a default interaction state.
  76. *
  77. * @attribute defaultState
  78. * @type boolean
  79. */
  80. defaultState: {},
  81. /**
  82. * Receives an interaction state of hover during the
  83. * <code>mouseover</code> event.
  84. *
  85. * @attribute hoverState
  86. * @type boolean
  87. */
  88. hoverState: {},
  89. /**
  90. * The default type of child widget to render into the Element
  91. *
  92. * @attribute defaultChildType
  93. * @default ButtonItem
  94. * @type String | Object
  95. */
  96. defaultChildType: {
  97. value: 'ButtonItem'
  98. },
  99. /**
  100. * Representing the orientation of the progress bar. Could be
  101. * <code>horizontal</code> or <code>vertical</code>.
  102. *
  103. * @attribute orientation
  104. * @default 'horizontal'
  105. * @type String
  106. */
  107. orientation: {
  108. value: HORIZONTAL,
  109. validator: function(val) {
  110. return isString(val) && (val === HORIZONTAL || val === VERTICAL);
  111. }
  112. }
  113. },
  114. UI_ATTRS: [ORIENTATION],
  115. prototype: {
  116. BOUNDING_TEMPLATE: TPL_GENERIC,
  117. CONTENT_TEMPLATE: TPL_GENERIC,
  118. /**
  119. * Construction logic executed during Toolbar instantiation. Lifecycle.
  120. *
  121. * @method initializer
  122. * @protected
  123. */
  124. initializer: function() {
  125. var instance = this;
  126. A.Do.before(instance._addByIconId, instance, 'add');
  127. },
  128. /*
  129. * Lifecycle
  130. */
  131. /**
  132. * Bind the events on the Toolbar UI. Lifecycle.
  133. *
  134. * @method bindUI
  135. * @protected
  136. */
  137. bindUI: function() {
  138. var instance = this;
  139. instance.on('addChild', instance._onAddButton);
  140. instance.after('addChild', instance._afterAddButton);
  141. instance.after('removeChild', instance._afterRemoveButton);
  142. },
  143. /**
  144. * Sync the Toolbar UI. Lifecycle.
  145. *
  146. * @method syncUI
  147. * @protected
  148. */
  149. syncUI: function() {
  150. var instance = this;
  151. var length = instance.size() - 1;
  152. var indexFirst = -1;
  153. var indexLast = -1;
  154. instance.each(
  155. function(item, index, collection) {
  156. var itemBoundingBox = item.get('boundingBox');
  157. if (isButtonItem(item)) {
  158. if (indexFirst == -1) {
  159. indexFirst = index;
  160. }
  161. else {
  162. indexLast = index;
  163. }
  164. itemBoundingBox.toggleClass(CSS_FIRST, index == indexFirst);
  165. itemBoundingBox.toggleClass(CSS_LAST, index == length);
  166. itemBoundingBox.addClass(CSS_ITEM);
  167. }
  168. else {
  169. if (index == indexFirst + 1) {
  170. indexLast = indexFirst;
  171. }
  172. if (indexLast != -1) {
  173. collection.item(indexLast).get('boundingBox').toggleClass(CSS_LAST, true);
  174. }
  175. indexFirst = -1;
  176. indexLast = -1;
  177. }
  178. }
  179. );
  180. },
  181. /*
  182. * Methods
  183. */
  184. /**
  185. * Overloads the add method so that if only a string is passed in, it will be
  186. * assumed to be the icon, and will automatically create a configuration
  187. * object for it.
  188. *
  189. * @method _addByIconId
  190. * @param {String} icon the icon name or object or array of objects to add to the toolbar
  191. * @protected
  192. * @return {String}
  193. */
  194. _addByIconId: function(icon) {
  195. var instance = this;
  196. if (Lang.isString(icon)) {
  197. var item = {
  198. icon: icon
  199. };
  200. return new A.Do.AlterArgs(null, [item]);
  201. }
  202. },
  203. /**
  204. * Syncs the UI after a button is added.
  205. *
  206. * @method _afterAddButton
  207. * @param {EventFacade} event
  208. * @protected
  209. */
  210. _afterAddButton: function(event) {
  211. var instance = this;
  212. instance.syncUI();
  213. },
  214. /**
  215. * Syncs the UI after a button is removed.
  216. *
  217. * @method _afterRemoveButton
  218. * @param {EventFacade} event
  219. * @protected
  220. */
  221. _afterRemoveButton: function(event) {
  222. var instance = this;
  223. event.child.destroy();
  224. instance.syncUI();
  225. },
  226. /**
  227. * Updates the UI for the orientation attribute.
  228. *
  229. * @method _uiSetOrientation
  230. * @param {String} newVal The new value
  231. * @protected
  232. */
  233. _uiSetOrientation: function(val) {
  234. var instance = this;
  235. var boundingBox = instance.get('boundingBox');
  236. var horizontal = (val == HORIZONTAL);
  237. boundingBox.toggleClass(CSS_HORIZONTAL, horizontal);
  238. boundingBox.toggleClass(CSS_VERTICAL, !horizontal);
  239. }
  240. }
  241. }
  242. );
  243. var ToolbarSpacer = A.Component.create(
  244. {
  245. NAME: TOOLBARSPACER,
  246. AUGMENTS: [A.WidgetChild],
  247. ATTRS: {
  248. },
  249. prototype: {
  250. BOUNDING_TEMPLATE: TPL_GENERIC,
  251. CONTENT_TEMPLATE: null
  252. }
  253. }
  254. );
  255. A.ToolbarSpacer = ToolbarSpacer;
  256. var WidgetParentId = function() {
  257. var instance = this;
  258. instance._CHILD_MAP = new A.DataSet();
  259. instance.on('addChild', instance._onAddChildById);
  260. instance.after('addChild', instance._afterAddChildById);
  261. instance.after('removeChild', instance._afterRemoveChildById);
  262. A.Do.before(instance._findById, instance, 'item');
  263. A.Do.before(instance._findById, instance, 'remove');
  264. };
  265. WidgetParentId.prototype = {
  266. _afterAddChildById: function(event) {
  267. var instance = this;
  268. var id = event.child.get('id');
  269. instance._CHILD_MAP.insert(event.index, id, event.child);
  270. },
  271. _afterRemoveChildById: function(event) {
  272. var instance = this;
  273. var id = event.child.get('id');
  274. instance._CHILD_MAP.removeKey(id);
  275. },
  276. _findById: function(id) {
  277. var instance = this;
  278. if (Lang.isString(id)) {
  279. var index = instance._CHILD_MAP.indexOfKey(id);
  280. return new A.Do.AlterArgs(null, [index]);
  281. }
  282. },
  283. _onAddChildById: function(event) {
  284. var instance = this;
  285. var id = event.child.get('id');
  286. if (instance._CHILD_MAP.indexOfKey(id) > -1) {
  287. event.preventDefault();
  288. }
  289. }
  290. };
  291. A.Toolbar = A.Component.build(NAME, Toolbar, [A.WidgetParent, WidgetParentId], { dynamic: false });
  292. }, '@VERSION@' ,{requires:['aui-base','aui-button-item','aui-data-set','widget-parent'], skinnable:true});