API Docs for: 1.0.0
Show:

File: Resources/public/js/views/subitem/ez-subitemlistmoreview.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-subitemlistmoreview', function (Y) {
  6. "use strict";
  7. /**
  8. * Provides the subitem list view paginated with a *Load More* button
  9. *
  10. * @module ez-subitemlistmoreview
  11. */
  12. Y.namespace('eZ');
  13.  
  14. var COLUMN_SORT_ASC_CLASS = 'ez-subitem-column-sortable-asc',
  15. COLUMN_SORT_DESC_CLASS = 'ez-subitem-column-sortable-desc',
  16. events = {
  17. '.ez-subitem-column-sortable': {
  18. 'tap': '_toggleSorting',
  19. },
  20. };
  21.  
  22. /**
  23. * The subitem list view paginated with a *Load More* button
  24. *
  25. * @namespace eZ
  26. * @class SubitemListMoreView
  27. * @constructor
  28. * @extends eZ.AsynchronousSubitemView
  29. */
  30. Y.eZ.SubitemListMoreView = Y.Base.create('subitemListMoreView', Y.eZ.AsynchronousSubitemView, [], {
  31. initializer: function () {
  32. this._addDOMEventHandlers(events);
  33. this._set('identifier', 'listmore');
  34. this._set('name', Y.eZ.trans('list.view', {}, 'subitem'));
  35.  
  36. this._ItemView = this.get('itemViewConstructor');
  37. this._itemViewBaseConfig = {
  38. displayedProperties: this.get('displayedProperties'),
  39. };
  40.  
  41. this.after('*:editingPriorityChange', function (e) {
  42. if ( e.newVal ) {
  43. this._lockPriorityEdit(e.target);
  44. } else {
  45. this._unlockPriorityEdit();
  46. }
  47. });
  48.  
  49. this.on('*:updatePriority', function (e) {
  50. if ( this._isSortedByPriority() ) {
  51. this._set('loading', true);
  52. this._disableLoadMore();
  53. e.location.onceAfter('priorityChange', Y.bind(this._refresh, this));
  54. }
  55. });
  56.  
  57. this.after('activeChange', this._addSortOrderClass);
  58. this.after('sortConditionChange', this._addSortOrderClass);
  59. },
  60.  
  61. /**
  62. * Returns whether the subitems should be sorted by priority.
  63. *
  64. * @method _isSortedByPriority
  65. * @private
  66. * @return {Boolean}
  67. */
  68. _isSortedByPriority: function () {
  69. return this.get('location').get('sortField') === 'PRIORITY';
  70. },
  71.  
  72. /**
  73. * Restores the `canEditPriority` attribute so that the priority can be
  74. * editing in all views
  75. *
  76. * @method _unlockPriorityEdit
  77. * @protected
  78. */
  79. _unlockPriorityEdit: function () {
  80. this._itemViews.forEach(function (itemView) {
  81. itemView.set('canEditPriority', true);
  82. });
  83. },
  84.  
  85. /**
  86. * Makes sure only one priority can be edited at a time.
  87. *
  88. * @protected
  89. * @method _lockPriorityEdit
  90. * @param {View} view the view where the priority occurs
  91. */
  92. _lockPriorityEdit: function (view) {
  93. this._itemViews.forEach(function (itemView) {
  94. itemView.set('canEditPriority', (itemView === view));
  95. });
  96. },
  97.  
  98. /**
  99. * Resets the selected status from columns
  100. *
  101. * @protected
  102. * @method _resetSortOrderClass
  103. */
  104. _resetSortOrderClass: function() {
  105. var columns = this.get('container').all('.ez-subitem-column-sortable');
  106.  
  107. columns.each( function (column) {
  108. column.removeClass(COLUMN_SORT_ASC_CLASS);
  109. column.removeClass(COLUMN_SORT_DESC_CLASS);
  110. });
  111. },
  112.  
  113. /**
  114. * Adds the sort class according to the `sortCondition` attribute
  115. *
  116. * @protected
  117. * @method _addSortOrderClass
  118. */
  119. _addSortOrderClass: function () {
  120. var sortCondition = this.get('sortCondition'),
  121. property = this._getPropertyBySortField(sortCondition.sortField),
  122. column = this.get('container').one('.ez-subitem-' + property + '-column');
  123.  
  124. this._resetSortOrderClass();
  125.  
  126. if (column) {
  127. if (sortCondition.sortOrder === 'ASC') {
  128. column.addClass(COLUMN_SORT_ASC_CLASS);
  129. } else {
  130. column.addClass(COLUMN_SORT_DESC_CLASS);
  131. }
  132. }
  133. },
  134.  
  135. /**
  136. * Toggles the sorting of columns
  137. * First click is asc, second click is desc.
  138. *
  139. * @protected
  140. * @method _toggleSorting
  141. * @param {EventFacade} e
  142. */
  143. _toggleSorting: function (e) {
  144. var property = e.target.getAttribute("data-column-identifier"),
  145. sortField = this.get('availableProperties')[property].sortField,
  146. sortOrder = 'ASC';
  147.  
  148. if (e.target.hasClass(COLUMN_SORT_ASC_CLASS)) {
  149. sortOrder = 'DESC';
  150. }
  151.  
  152. this.set('sortCondition', {
  153. sortField: sortField,
  154. sortOrder: sortOrder,
  155. });
  156. },
  157.  
  158. /**
  159. * Retrives the property for a given sortField
  160. *
  161. * @protected
  162. * @method _getPropertyBySortField
  163. * @param {String} sortField
  164. * @return {String} property
  165. */
  166. _getPropertyBySortField: function (sortField) {
  167. var property;
  168.  
  169. Y.Object.some(this.get('availableProperties'), function (propertyData, propertyName) {
  170. if (propertyData.sortField == sortField) {
  171. property = propertyName;
  172. return true;
  173. }
  174. });
  175.  
  176. return property;
  177. },
  178.  
  179. render: function () {
  180. if ( !this.get('items') ) {
  181. this.get('container').setHTML(this.template({
  182. location: this.get('location').toJSON(),
  183. columns: this._getColumns(),
  184. }));
  185. }
  186. return this;
  187. },
  188.  
  189. /**
  190. * Returns an array of objects describing the columns to add to the
  191. * list. Each object contains an `identifier` and a `name`.
  192. *
  193. * @method _getColumns
  194. * @protected
  195. * @return Array
  196. */
  197. _getColumns: function () {
  198. return this.get('displayedProperties').map(function (identifier) {
  199. return {
  200. name: this.get('propertyNames')[identifier],
  201. identifier: identifier,
  202. sortable: this.get('availableProperties')[identifier].sortable,
  203. };
  204. }, this);
  205. },
  206. }, {
  207. ATTRS: {
  208. /**
  209. * The properties to display
  210. *
  211. * @attribute displayedProperties
  212. * @type Array
  213. */
  214. displayedProperties: {
  215. value: ['name', 'lastModificationDate', 'contentType', 'priority', 'translations'],
  216. },
  217.  
  218. /**
  219. * Lists the available properties to display.
  220. * Each entry in this object is an object with:
  221. *
  222. * * `sortable`: a boolean stating if the property can be sorted.
  223. * * `sortField`: a string with the sortField corresponding to the property
  224. *
  225. * @attribute availableProperties
  226. * @type Object
  227. * @readOnly
  228. */
  229. availableProperties: {
  230. readOnly: true,
  231. value: {
  232. 'name': {
  233. 'sortable': true,
  234. 'sortField': 'NAME',
  235. },
  236. 'lastModificationDate': {
  237. 'sortable': true,
  238. 'sortField': 'MODIFIED',
  239. },
  240. 'contentType': {
  241. 'sortable': false,
  242. },
  243. 'priority': {
  244. 'sortable': true,
  245. 'sortField': 'PRIORITY',
  246. },
  247. 'translations': {
  248. 'sortable': false,
  249. },
  250. },
  251. },
  252.  
  253. /**
  254. * A key value object to store the human readable names of the
  255. * columns.
  256. *
  257. * @attribute propertyNames
  258. * @type {Object}
  259. */
  260. propertyNames: {
  261. valueFn: function () {
  262. return {
  263. 'name': Y.eZ.trans('name', {}, 'subitem'),
  264. 'lastModificationDate': Y.eZ.trans('modified', {}, 'subitem'),
  265. 'contentType': Y.eZ.trans('content.type', {}, 'subitem'),
  266. 'priority': Y.eZ.trans('priority', {}, 'subitem'),
  267. 'translations': Y.eZ.trans('translations', {}, 'subitem'),
  268. };
  269. }
  270. },
  271.  
  272. /**
  273. * The constructor function to use to instance the item view
  274. * instances.
  275. *
  276. * @attribute itemViewConstructor
  277. * @type {Function}
  278. * @default {Y.eZ.SubitemListItemView}
  279. */
  280. itemViewConstructor: {
  281. valueFn: function () {
  282. return Y.eZ.SubitemListItemView;
  283. },
  284. },
  285. }
  286. });
  287. });
  288.