API Docs for: 1.0.0
Show:

File: Resources/public/js/extensions/ez-selection-table.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-selection-table', function (Y) {
    "use strict";
    /**
     * The selection table extension
     *
     * @module ez-selection-table
     */
    Y.namespace('eZ');

    var SELECTED_ROW_CLASS = 'is-row-selected',
        _events = {
            '.ez-selection-table-checkbox': {
                'change': '_handleRowSelection'
            }
        },
        /**
         * Extension for the views providing a table that is meant to select
         * some items and to enable one or several buttons depending on the
         * selection.
         *
         * This extensions expects the following markup to work correctly:
         *
         *      <table class="ez-selection-table" data-selection-buttons=".mybutton">
         *      <tr class="ez-selection-table-row">
         *          <td>
         *              <input type="checkbox" class="ez-selection-table-checkbox">
         *          </td>
         *      </tr>
         *      <!-- ... -->
         *      </table>
         *      <button class="mybutton" disabled="disabled">Do!</button>
         *
         * When a ez-selection-table-checkbox checkbox is checked, its
         * ez-selection-table-row ancestor gets the is-row-selected class and if
         * there's at least one checked checkbox, the buttons that match the
         * selector in the data-selection-buttons attribute are enabled.
         *
         * @namespace eZ
         * @class SelectionTable
         * @extensionfor Y.View
         */
        SelectionTable = function () {};

    SelectionTable.prototype.initializer = function () {
        this.events = Y.merge(_events, this.events);
    };

    /**
     * Change event handler for the ez-selection-table-checkbox checkboxes
     *
     * @method _handleRowSelection
     * @protected
     * @param {Object} e event facade
     */
    SelectionTable.prototype._handleRowSelection = function (e) {
        var selectionTable = e.target.ancestor('.ez-selection-table'),
            buttons = selectionTable.get('parentNode').all(
                selectionTable.getAttribute('data-selection-buttons')
            );

        this._uiSelectRow(e.target);
        this._uiEnableButtons(buttons);
    };

    /**
     * Adds or removes the selected class on the row in which the checkbox is
     *
     * @method _uiSelectRow
     * @protected
     * @param {Node} checkbox
     */
    SelectionTable.prototype._uiSelectRow = function (checkbox) {
        var row = checkbox.ancestor('.ez-selection-table-row');

        if ( checkbox.get('checked') ) {
            row.addClass(SELECTED_ROW_CLASS);
        } else {
            row.removeClass(SELECTED_ROW_CLASS);
        }
    };

    /**
     * Enables or disableds the buttons depending on the number of selected
     * checkboxes
     *
     * @method _uiEnableButtons
     * @protected
     * @param {NodeList} buttons
     */
    SelectionTable.prototype._uiEnableButtons = function (buttons) {
        if ( this.get('container').all('.' + SELECTED_ROW_CLASS).size() !== 0 ) {
            buttons.set('disabled', false);
        } else {
            buttons.set('disabled', true);
        }
    };

    Y.eZ.SelectionTable = SelectionTable;
});