API Docs for: 1.0.0
Show:

File: Resources/public/js/views/subitem/ez-subitemlistmoreview.js

/*
 * Copyright (C) eZ Systems AS. All rights reserved.
 * For full copyright and license information view LICENSE file distributed with this source code.
 */
YUI.add('ez-subitemlistmoreview', function (Y) {
    "use strict";
    /**
     * Provides the subitem list view paginated with a *Load More* button
     *
     * @module ez-subitemlistmoreview
     */
    Y.namespace('eZ');

    var COLUMN_SORT_ASC_CLASS = 'ez-subitem-column-sortable-asc',
        COLUMN_SORT_DESC_CLASS = 'ez-subitem-column-sortable-desc',
        events = {
            '.ez-subitem-column-sortable': {
                'tap': '_toggleSorting',
            },
        };

    /**
     * The subitem list view paginated with a *Load More* button
     *
     * @namespace eZ
     * @class SubitemListMoreView
     * @constructor
     * @extends eZ.AsynchronousSubitemView
     */
    Y.eZ.SubitemListMoreView = Y.Base.create('subitemListMoreView', Y.eZ.AsynchronousSubitemView, [], {
        initializer: function () {
            this._addDOMEventHandlers(events);
            this._set('identifier', 'listmore');
            this._set('name', Y.eZ.trans('list.view', {}, 'subitem'));

            this._ItemView = this.get('itemViewConstructor');
            this._itemViewBaseConfig = {
                displayedProperties: this.get('displayedProperties'),
            };

            this.after('*:editingPriorityChange', function (e) {
                if ( e.newVal ) {
                    this._lockPriorityEdit(e.target);
                } else {
                    this._unlockPriorityEdit();
                }
            });

            this.on('*:updatePriority', function (e) {
                if ( this._isSortedByPriority() ) {
                    this._set('loading', true);
                    this._disableLoadMore();
                    e.location.onceAfter('priorityChange', Y.bind(this._refresh, this));
                }
            });

            this.after('activeChange', this._addSortOrderClass);
            this.after('sortConditionChange', this._addSortOrderClass);
        },

        /**
         * Returns whether the subitems should be sorted by priority.
         *
         * @method _isSortedByPriority
         * @private
         * @return {Boolean}
         */
        _isSortedByPriority: function () {
            return this.get('location').get('sortField') === 'PRIORITY';
        },

        /**
         * Restores the `canEditPriority` attribute so that the priority can be
         * editing in all views
         *
         * @method _unlockPriorityEdit
         * @protected
         */
        _unlockPriorityEdit: function () {
            this._itemViews.forEach(function (itemView) {
                itemView.set('canEditPriority', true);
            });
        },

        /**
         * Makes sure only one priority can be edited at a time.
         *
         * @protected
         * @method _lockPriorityEdit
         * @param {View} view the view where the priority occurs
         */
        _lockPriorityEdit: function (view) {
            this._itemViews.forEach(function (itemView) {
                itemView.set('canEditPriority', (itemView === view));
            });
        },

        /**
         * Resets the selected status from columns
         *
         * @protected
         * @method _resetSortOrderClass
         */
        _resetSortOrderClass: function() {
            var columns = this.get('container').all('.ez-subitem-column-sortable');

            columns.each( function (column) {
                column.removeClass(COLUMN_SORT_ASC_CLASS);
                column.removeClass(COLUMN_SORT_DESC_CLASS);
            });
        },

        /**
         * Adds the sort class according to the `sortCondition` attribute
         *
         * @protected
         * @method _addSortOrderClass
         */
        _addSortOrderClass: function () {
            var sortCondition = this.get('sortCondition'),
                property = this._getPropertyBySortField(sortCondition.sortField),
                column = this.get('container').one('.ez-subitem-' + property + '-column');

            this._resetSortOrderClass();

            if (column) {
                if (sortCondition.sortOrder === 'ASC') {
                    column.addClass(COLUMN_SORT_ASC_CLASS);
                } else {
                    column.addClass(COLUMN_SORT_DESC_CLASS);
                }
            }
        },

        /**
         * Toggles the sorting of columns
         * First click is asc, second click is desc.
         *
         * @protected
         * @method _toggleSorting
         * @param {EventFacade} e
         */
        _toggleSorting: function (e) {
            var property = e.target.getAttribute("data-column-identifier"),
                sortField = this.get('availableProperties')[property].sortField,
                sortOrder = 'ASC';

            if (e.target.hasClass(COLUMN_SORT_ASC_CLASS)) {
                sortOrder = 'DESC';
            }

            this.set('sortCondition', {
                sortField: sortField,
                sortOrder: sortOrder,
            });
        },

        /**
         * Retrives the property for a given sortField
         *
         * @protected
         * @method _getPropertyBySortField
         * @param {String} sortField
         * @return {String} property
         */
        _getPropertyBySortField: function (sortField) {
            var property;

            Y.Object.some(this.get('availableProperties'), function (propertyData, propertyName) {
                if (propertyData.sortField == sortField) {
                    property = propertyName;
                    return true;
                }
            });

            return property;
        },

        render: function () {
            if ( !this.get('items') ) {
                this.get('container').setHTML(this.template({
                    location: this.get('location').toJSON(),
                    columns: this._getColumns(),
                }));
            }
            return this;
        },

        /**
         * Returns an array of objects describing the columns to add to the
         * list. Each object contains an `identifier` and a `name`.
         *
         * @method _getColumns
         * @protected
         * @return Array
         */
        _getColumns: function () {
            return this.get('displayedProperties').map(function (identifier) {
                return {
                    name: this.get('propertyNames')[identifier],
                    identifier: identifier,
                    sortable: this.get('availableProperties')[identifier].sortable,
                };
            }, this);
        },
    }, {
        ATTRS: {
            /**
             * The properties to display
             *
             * @attribute displayedProperties
             * @type Array
             */
            displayedProperties: {
                value: ['name', 'lastModificationDate', 'contentType', 'priority', 'translations'],
            },

            /**
             * Lists the available properties to display.
             * Each entry in this object is an object with:
             *
             * * `sortable`: a boolean stating if the property can be sorted.
             * * `sortField`: a string with the sortField corresponding to the property
             *
             * @attribute availableProperties
             * @type Object
             * @readOnly
             */
            availableProperties: {
                readOnly: true,
                value: {
                    'name': {
                        'sortable': true,
                        'sortField': 'NAME',
                    },
                    'lastModificationDate': {
                        'sortable': true,
                        'sortField': 'MODIFIED',
                    },
                    'contentType': {
                        'sortable': false,
                    },
                    'priority': {
                        'sortable': true,
                        'sortField': 'PRIORITY',
                    },
                    'translations': {
                        'sortable': false,
                    },
                },
            },

            /**
             * A key value object to store the human readable names of the
             * columns.
             *
             * @attribute propertyNames
             * @type {Object}
             */
            propertyNames: {
                valueFn: function () {
                    return {
                        'name': Y.eZ.trans('name', {}, 'subitem'),
                        'lastModificationDate': Y.eZ.trans('modified', {}, 'subitem'),
                        'contentType': Y.eZ.trans('content.type', {}, 'subitem'),
                        'priority': Y.eZ.trans('priority', {}, 'subitem'),
                        'translations': Y.eZ.trans('translations', {}, 'subitem'),
                    };
                }
            },

            /**
             * The constructor function to use to instance the item view
             * instances.
             *
             * @attribute itemViewConstructor
             * @type {Function}
             * @default {Y.eZ.SubitemListItemView}
             */
            itemViewConstructor: {
                valueFn: function () {
                    return Y.eZ.SubitemListItemView;
                },
            },
        }
    });
});