API Docs for: 1.0.0
Show:

File: Resources/public/js/views/ez-usermenuview.js

  1. /*
  2. * Copyright (C) eZ Systems AS. All rights reserved.
  3. * For full copyright and license information view LICENSE file distributed with this source code.
  4. */
  5. YUI.add('ez-usermenuview', function (Y) {
  6. 'use strict';
  7. /**
  8. * Provides the User Menu View class
  9. *
  10. * @module ez-usermenuview
  11. */
  12. Y.namespace('eZ');
  13.  
  14. var CLASS_HIDDEN = 'is-user-menu-hidden';
  15.  
  16. /**
  17. * The User Menu view
  18. *
  19. * @namespace eZ
  20. * @class UserMenuView
  21. * @constructor
  22. * @extends eZ.View
  23. */
  24. Y.eZ.UserMenuView = Y.Base.create('userMenuView', Y.eZ.View, [], {
  25. initializer: function () {
  26. this.containerTemplate = '<ul class="ez-view-usermenuview ' + CLASS_HIDDEN + '"/>';
  27.  
  28. this.on('displayedChange', this._uiToggleUserMenu);
  29. this.on('activeChange', this._setActiveViews);
  30. },
  31.  
  32. /**
  33. * Renders the user menu view
  34. *
  35. * @method render
  36. * @return {eZ.UserMenuView} the view itself
  37. */
  38. render: function () {
  39. this._renderMenuItems();
  40.  
  41. return this;
  42. },
  43.  
  44. /**
  45. * Toggles the displayed value.
  46. *
  47. * @method toggleDisplayed
  48. * @public
  49. */
  50. toggleDisplayed: function () {
  51. this._set('displayed', !this.get('displayed'));
  52. },
  53.  
  54. /**
  55. * Hides the user menu.
  56. *
  57. * @method hide
  58. * @public
  59. */
  60. hide: function () {
  61. this._set('displayed', false);
  62. },
  63.  
  64. /**
  65. * Toggles the visibility of a user menu.
  66. *
  67. * @method _uiToggleUserMenu
  68. * @protected
  69. * @param event {Object} event facade
  70. */
  71. _uiToggleUserMenu: function (event) {
  72. var userMenu = this.get('container');
  73.  
  74. if (event.newVal) {
  75. userMenu.removeClass(CLASS_HIDDEN);
  76. } else {
  77. userMenu.addClass(CLASS_HIDDEN);
  78. }
  79. },
  80.  
  81. /**
  82. * Sets active flag to the item view
  83. *
  84. * @method _setActiveViews
  85. * @protected
  86. * @param event {Object} event facade
  87. */
  88. _setActiveViews: function (event) {
  89. var items = this.get('items');
  90.  
  91. items.forEach(function (item) {
  92. item.set('active', event.newVal);
  93. });
  94. },
  95.  
  96. /**
  97. * Renders menu items views
  98. *
  99. * @method _renderMenuItems
  100. * @protected
  101. */
  102. _renderMenuItems: function () {
  103. var menuItemsContainer = this.get('container'),
  104. items = this.get('items');
  105.  
  106. items.sort(function (a, b) {
  107. return b.get('priority') - a.get('priority');
  108. });
  109.  
  110. items.forEach(Y.bind(function (item) {
  111. menuItemsContainer.append(item.render().get('container'));
  112. }, this));
  113. },
  114.  
  115. /**
  116. * Adds item to the menu and fire event when it's done
  117. *
  118. * @method addMenuItem
  119. * @public
  120. * @param view {Object}
  121. */
  122. addMenuItem: function (view) {
  123. var items = this.get('items');
  124.  
  125. items.push(view);
  126.  
  127. view.addTarget(this);
  128.  
  129. /**
  130. * Fired when the view is added to the user menu
  131. *
  132. * @event addedToUserMenu
  133. * @param userMenu {Object} the user menu view
  134. */
  135. view.fire('addedToUserMenu', {
  136. userMenu: this,
  137. });
  138. },
  139. }, {
  140. ATTRS: {
  141. /**
  142. * Contains the views for the user menu items
  143. *
  144. * @attribute items
  145. * @type {Array}
  146. */
  147. items: {
  148. valueFn: function () {
  149. return [
  150. new Y.eZ.UserMenuItemFireEventView({
  151. bubbleTargets: this,
  152. title: Y.eZ.trans('logout', {}, 'navigationhub'),
  153. eventName: 'logOut',
  154. }),
  155. ];
  156. }
  157. },
  158.  
  159. /**
  160. * Whether the user menu is displayed or not
  161. *
  162. * @attribute displayed
  163. * @type Boolean
  164. * @default false
  165. * @readOnly
  166. */
  167. displayed: {
  168. value: false,
  169. readOnly: true
  170. }
  171. }
  172. });
  173. });
  174.