API Docs for: 1.0.0
Show:

File: Resources/public/js/views/ez-languageswitcherview.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-languageswitcherview', function (Y) {
    "use strict";
    /**
     * Provides the Language Switcher View class
     *
     * @module ez-languageswitcherview
     */
    Y.namespace('eZ');

    var NAVIGATE_MODE = 'navigate';

    /**
     * The Language Switcher View
     *
     * @namespace eZ
     * @class LanguageSwitcherView
     * @constructor
     * @extends eZ.TemplateBasedView
     */
    Y.eZ.LanguageSwitcherView = Y.Base.create('languageSwitcherView', Y.eZ.TemplateBasedView, [Y.eZ.Expandable], {
        events: {
            '.ez-dropdown-list-indicator': {
                'tap': '_toggleExpanded'
            }
        },

        initializer: function () {
            this.after('expandedChange', this._setClickOutsideEventHandler);
            if ( this.get('switchMode') !== NAVIGATE_MODE ) {
                this._addDOMEventHandlers({
                    '.ez-language-switch-link': {
                        'tap': '_switchLanguage',
                    },
                });
                this.after('languageCodeChange', this.render);
            }
        },

        /**
         * `tap` event handler on the language switch links.
         *
         * @method _switchLanguage
         * @protected
         * @param {EventFacade} e
         */
        _switchLanguage: function (e) {
            var newLanguageCode = e.target.getData('language-code'),
                oldLanguageCode = this.get('languageCode');

            e.preventDefault();

            this._hideLanguageList();
            this.set('languageCode', newLanguageCode);
            /**
             * Fired to indicate that the user wants to switch to a new
             * language. It is fired only when `switchMode` attribute is set to
             * 'event'.
             *
             * @event switchLanguage
             * @param {String} languageCode
             * @param {String} oldLanguageCode
             */
            this.fire('switchLanguage', {
                languageCode: newLanguageCode,
                oldLanguageCode: oldLanguageCode,
            });
        },

        /**
         * Renders the language switcher view
         *
         * @method render
         * @return {eZ.LanguageSwitcherView} the view itself
         */
        render: function () {
            var container = this.get('container');

            container.setHTML(this.template({
                location: this.get('location').toJSON(),
                currentTranslation: this.get('languageCode'),
                otherTranslations: this._getOtherTranslationsList()
            }));

            return this;
        },

        /**
         * Returns array with translations of content other than already being viewed.
         * If conten doesn't have got other translations than the one already being viewed,
         * then empty array is returned.
         *
         * @method _getOtherTranslationsList
         * @private
         * @return {Array} other translations
         */
        _getOtherTranslationsList: function () {
            var languageCode = this.get('languageCode'),
                translations = this.get('content').get('currentVersion').getTranslationsList();

            return Y.Array.reject(translations, function (value) {
                return value === languageCode;
            });
        },

        /**
         * expandedChange event handler to define or detach the click outside
         * event handler so that the view gets hidden when the user click
         * somewhere else
         *
         * @method _setClickOutsideEventHandler
         * @param {Object} e event facade of the expandedChange event
         * @protected
         */
        _setClickOutsideEventHandler: function (e) {
            if ( e.newVal ) {
                this._clickOutsideSubscription = this.get('container').on(
                    'clickoutside', Y.bind(this._hideLanguageList, this)
                );
            } else {
                this._clickOutsideSubscription.detach();
            }
        },

        /**
         * Hides the expanded view
         *
         * @method _hideView
         * @protected
         * @deprecated
         */
        _hideView: function () {
            console.log('[DEPRECATED] _hideView is deprecated, use _hideLanguageList instead');
            console.log('[DEPRECATED] it will be removed from PlatformUI 2.0');
            this._hideLanguageList();
        },

        /**
         * Hides the language list (if any)
         *
         * @method _hideLanguageList
         * @protected
         */
        _hideLanguageList: function () {
            this.set('expanded', false);
        },

        /**
         * Toggles the expanded state
         *
         * @method _toggleExpanded
         * @protected
         */
        _toggleExpanded: function (e) {
            e.preventDefault();
            this.set('expanded', !this.get('expanded'));
        }
    }, {
        ATTRS: {
            /**
             * The content associated the current location
             *
             * @attribute content
             * @type Y.eZ.Content
             */
            content: {},

            /**
             * The current location
             *
             * @attribute location
             * @type Y.eZ.Location
             */
            location: {},

            /**
             * Language code of language currently active for the current location
             *
             * @attribute languageCode
             * @type String
             */
            languageCode: {},

            /**
             * The way the language switch will be done. When set to 'event',
             * the view will fire a 'switchLanguage' event while if it is set to
             * 'navigate', the browser will just follow the link generated by
             * the template.
             *
             * @attribute switchMode
             * @default 'navigate'
             * @writeOnce
             */
            switchMode: {
                writeOnce: 'initOnly',
                value: NAVIGATE_MODE,
            },
        }
    });
});