Source: widgets/login/keyboard.js

define('application/widgets/login/keyboard', [
    'antie/widgets/horizontallist',
    'antie/widgets/verticallist',
    'rofl/widgets/keyboard',
    'rofl/lib/utils',
    'application/widgets/pointerfocusablebutton',
    'rofl/widgets/label',
    'rofl/lib/l10n',
    'rofl/events/keyevent'
], function (
    HorizontalList,
    VerticalList,
    Keyboard,
    Utils,
    PointerFocusableButton,
    Label,
    L10N,
    KeyEvent
) {
    'use strict';

    var l10n = L10N.getInstance(),
        numericKeyset = [
            '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'
        ],
        optionsKeyset = {
            RESET: { name: 'reset', icon: false },
            DELETE: { name: 'delete', icon: true }
        };

    return VerticalList.extend({

        /**
         * Initialises the keyboard widget.
         *
         * @param {Object} config - The inputfield options.
         * @param {Object} [config.opts] - The options. Optional.
         */
        init: function init (config) {
            init.base.call(this);

            config = config || {};

            this.addClass('input-keys');
            this._build(config);

            this._onSelectBound = Utils.bind(this._onSelect, this);
            this._optionsKeys.addEventListener('select', this._onSelectBound);

            this._numericKeys.setContinuousListener(true);
        },

        /**
         * Builds the keyboard widget.
         *
         * @param {Object} config - The inputfield options.
         * @param {Object} [config.opts] - The options. Optional.
         * @private
         */
        _build: function (config) {
            this._buildNumericKeys(config);
            this._buildOptionKeys();
        },

        /**
         * Builds the numeric keys.
         *
         * @param {Object} config - The inputfield options.
         * @param {Object} [config.opts] - The options. Optional.
         * @private
         */
        _buildNumericKeys: function (config) {
            var numericKeys = this._numericKeys = new Keyboard('numeric', numericKeyset.length, 1, numericKeyset);

            config.opts = config.opts || {};

            numericKeys.setMaximumLength(config.opts.maxLength);

            this.appendChildWidget(numericKeys);
            numericKeys.setActiveChildKey('1');
        },

        /**
         * Builds the option keys.
         *
         * @private
         */
        _buildOptionKeys: function () {
            var optionsKeys = this._optionsKeys = new HorizontalList();

            optionsKeys.addClass('options');

            Utils.each(optionsKeyset, function (option) {
                optionsKeys.appendChildWidget(this._createOptionKey(option));
            }, this);

            this.appendChildWidget(optionsKeys);
        },

        /**
         * Create the option key.
         *
         * @param {Object} option - The option data.
         * @returns {Object} - The formatted option.
         * @private
         */
        _createOptionKey: function (option) {
            var button = new PointerFocusableButton(option.name),
                label = new Label({ text: l10n.get('login.buttons.' + option.name), enableHTML: true });

            button.addClass(['option', option.name]);

            if (option.icon) {
                label.addClass('icon');
            }

            button.appendChildWidget(label);

            return button;
        },

        /**
         * OnSelect event.
         *
         * @param {Object} e - The event data.
         * @private
         */
        _onSelect: function (e) {
            var keyboard = this.getKeyboard();

            switch (e.target.id) {
                case 'reset':
                    keyboard.setText('');
                    break;
                case 'delete':
                    keyboard.setText(keyboard.getText().slice(0, keyboard.getText().length - 1));
                    break;
            }
        },

        /**
         * KeyDown event.
         *
         * @param {Object} e - The event data.
         * @private
         */
        _onKeyDown: function onKeyDown (e) {
            var numericKeys = this._numericKeys;

            if (numericKeys.isFocussed()) {

                switch (e.keyCode) {
                    case KeyEvent.VK_LEFT:
                        if (numericKeys.getActiveChildWidgetIndex() === 0) {
                            numericKeys.setActiveChildKey('0');
                        }
                        e.preventDefault();
                        break;

                    case KeyEvent.VK_RIGHT:
                        if (numericKeys.getActiveChildWidgetIndex() === 9) {
                            numericKeys.setActiveChildKey('1');
                        }
                        e.preventDefault();
                        break;
                }
            }

            onKeyDown.base.call(this, e);
        },

        /**
         * Returns the keyboard.
         *
         * @returns {Object} - The numeric keyboard.
         */
        getKeyboard: function () {
            return this._numericKeys;
        }
    });
});