adminview.js 6.87 KB
/*
 *
 * ADOBE CONFIDENTIAL
 * __________________
 *
 *  Copyright 2014 Adobe Systems Incorporated
 *  All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Adobe Systems Incorporated and its suppliers,
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to Adobe Systems Incorporated and its
 * suppliers and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe Systems Incorporated.
 */

define('screens/player/ui/adminview', [
    'underscore',
    'jquery',
    './baseview',
    './adminview-system',
    './adminview-registration',
    './adminview-channels',
    './adminview-configuration',
    './adminview-cache',
    'screens/player/runtime/admin',
    'screens/player/shared/serviceadmin',
    'screens/player/store/store',
    'screens/player/firmware/preferences/preferences'
], function(_, $, BaseView, SystemView, RegistrationView, ChannelsView, ConfigView, CacheView, Admin, ServiceAdmin, Store, Preferences) {
    'use strict';

    var DEFAULT_OPTIONS = {
        longPressDuration: 1000,
        enableHiddenTrigger: false
    };

    var AdminView = BaseView.extend(/** @lends AdminView.prototype */{

        template: function() {
            return '<div class="aem-ScreensPlayer-admin-inner">' +
                    '<div class="aem-ScreensPlayer-admin-header">Adobe Experience Manager Screens</div>' +
                    '<hr>' +
                    '<ul class="aem-ScreensPlayer-admin-menu"></ul>' +
                    '<div class="aem-ScreensPlayer-admin-content"></div>' +
                    '<div class="aem-ScreensPlayer-admin-close"></div>' +
                '</div>';
        },

        className: 'aem-ScreensPlayer-admin',

        events: {
            'click .aem-ScreensPlayer-admin-close': '_close',
            'click li': '_select'
        },

        /**
         * @classdesc View that renders the admin menu
         * @class AdminView
         * @extends BaseView
         *
         * @param {Object} [options] An object of configurable options.
         */
        constructor: function(options) {
            var self = this;

            this._initOptions(options, DEFAULT_OPTIONS);
            AdminView.__super__.constructor.apply(this, arguments);

            this._views = {
                'system': {
                    view: new SystemView(),
                    title: 'System Information'
                },
                'registration': {
                    view: new RegistrationView(),
                    title: 'Device Registration'
                },
                'channels': {
                    view: new ChannelsView({
                    }),
                    title: 'Channels'
                },
                'cache': {
                    view: new CacheView(),
                    title: 'Content Cache'
                },
                'config': {
                    view: new ConfigView(),
                    title: 'Configuration'
                }
            };

            $('body').append(this.render().$el);

            ServiceAdmin.onServiceHighestRankedStart(Store.serviceName, function(store) {
                store.subscribe(self._handlePreferenceChange.bind(self), Preferences.NAMESPACE);
                store.subscribe(self._handleAdminStateChange.bind(self), Admin.NAMESPACE);

                // make sure handlers are called
                store.requestState();
            });
        },

        _handlePreferenceChange: function(preferences) {
            if (preferences) {
                this.options.enableHiddenTrigger = preferences.enableAdminUI !== false;
            }
        },

        _handleAdminStateChange: function(adminui) {
            if (adminui) {
                if (adminui.visible === 'show') {
                    this.show();
                    this.selectView(adminui.tabName);
                } else if (adminui.visible === 'hide') {
                    this.hide();
                }
            }
        },

        _buildTrigger: function() {
            var $trigger = $(document.createElement('button')).addClass('aem-ScreensPlayer-admin-trigger');
            $('body').append($trigger);

            // Long-press on the button should toggle the OSD
            $trigger.on('mousedown touchstart pointerdown', function(ev) {
                if (this.options.enableHiddenTrigger && !this.longPressTimer) { // Don't react if disabled and avoid duplicate calls
                    this.longPressTimer = setTimeout(function() {
                        clearTimeout(this.longPressTimer);
                        this.longPressTimer = null;
                        var adminSvc = ServiceAdmin.getService(Admin.serviceName);
                        adminSvc.show();
                    }.bind(this), this.options.longPressDuration);
                }
            }.bind(this));
            $trigger.on('mouseup touchend pointerup', function(ev) {
                if (this.longPressTimer) {
                    clearTimeout(this.longPressTimer);
                    this.longPressTimer = null;
                }
            }.bind(this));

            return $trigger;
        },

        render: function() {
            // prevent re-render
            if (this.setRendered(true)) {
                return this;
            }

            this.$el.append(this.template());

            this._buildTrigger();

            var $menu = this._$menu = this.$el.find('.aem-ScreensPlayer-admin-menu');
            var $content = this._$content = this.$el.find('.aem-ScreensPlayer-admin-content');
            _.each(this._views, function(v, name) {
                var $view = v.$el = v.view.render().$el;
                $content.append($view);
                $view.hide();
                v.$menu = $('<li data-name="' + name + '"/>').html(v.title);
                $menu.append(v.$menu);
            });

            this.selectView('system');

            return this;
        },

        selectView: function(name) {
            var view = this._views[name];
            if (!view) {
                return;
            }
            this._$menu.find('li').removeClass('active');
            view.$menu.addClass('active');

            this._$content.children().trigger('hide');
            this._$content.children().hide();
            view.$el.trigger('show');
            view.$el.show();
        },

        _select: function(e) {
            var $li = $(e.currentTarget);
            var name = $li.data('name');

            var adminService = ServiceAdmin.getService(Admin.serviceName);
            adminService.show(name);

        },

        _close: function(e) {
            var adminSvc = ServiceAdmin.getService(Admin.serviceName);
            adminSvc.hide();
        }

    });

    // return module exports
    return AdminView;
});