app-store-behavior.html

<!--
@license
Copyright (c) 2017 The expand.js authors. All rights reserved.
This code may only be used under the BSD style license found at https://expandjs.github.io/LICENSE.txt
The complete set of authors may be found at https://expandjs.github.io/AUTHORS.txt
The complete set of contributors may be found at https://expandjs.github.io/CONTRIBUTORS.txt
-->

<!--
A behavior used to add store capabilities on a web component.

@behavior app-store-behavior
@since 1.0.0
@category behaviors
@description A behavior used to add store capabilities on a web component
@keywords expandjs, web app, web components

@homepage https://expandjs.com/components/app-store-behavior
@repository https://github.com/expandjs/app-behaviors
@source https://github.com/expandjs/app-behaviors/blob/master/app-store-behavior.html

@behavior xp-master-slave-behavior /bower_components/xp-elements/xp-master-slave-behavior.html
@behavior app-locale-behavior /bower_components/app-behaviors/app-locale-behavior.html
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../expandjs/expandjs.html">
<link rel="import" href="../xp-elements/xp-master-slave-behavior.html">
<link rel="import" href="app-locale-behavior.html">

<script>

    /**
     * @polymerBehavior Polymer.APPStoreBehaviorImp
     */
    Polymer.APPStoreBehaviorImp = {

        // CLASSES
        classes: ['store'],

        /*********************************************************************/

        /**
         * Initializes the application's state.
         *
         * @method initialize
         * @abstract
         */
        initialize() {

        },

        /**
         * Set the application's `memento`.
         *
         * @method memoize
         */
        memoize() {

            // Ensuring
            this.ensure('memento', XP.cloneDeep(this.app));
        },

        /**
         * Resets the application's `state`.
         *
         * @method reset
         */
        reset() {

            // Ensuring
            this.ensure('app', XP.cloneDeep(this.memento));
        },

        /**
         * Registers the application's service worker.
         *
         * @method serviceWorker
         * @param {string} path
         */
        serviceWorker(path) {

            // Asserting
            XP.assertArgument(XP.isString(path, true), 1, 'string');

            // Preventing
            if (location.protocol !== 'https:' || !navigator.serviceWorker) { return; }

            // Registering
            navigator.serviceWorker.register(path);
        },

        /*********************************************************************/

        // LISTENERS
        listeners: {
            'app-route': '__handleRoute'
        },

        // PROPERTIES
        properties: {

            /**
             * The application's state.
             *
             * @attribute app
             * @type Object
             * @notifies
             * @readonly
             */
            app: {
                notify: true,
                readOnly: true,
                type: Object,
                value() { return {}; }
            },

            /**
             * The authentication's state.
             *
             * @attribute auth
             * @type Object
             * @notifies
             * @readonly
             */
            auth: {
                notify: true,
                readOnly: true,
                type: Object,
                value() { return {}; }
            },

            /**
             * The application's commands.
             *
             * @attribute commands
             * @type Array
             * @readonly
             */
            commands: {
                readOnly: true,
                slaves: '.command',
                value() { return []; }
            },

            /**
             * The application's state's memento.
             *
             * @attribute memento
             * @type Object
             * @readonly
             */
            memento: {
                readOnly: true,
                type: Object
            },

            /**
             * The application's router.
             *
             * @attribute router
             * @type Element
             * @readonly
             */
            router: {
                readOnly: true,
                slave: '.router'
            },

            /**
             * The application's shell.
             *
             * @attribute shell
             * @type Element
             * @readonly
             */
            shell: {
                master: '.shell',
                observer: '__shellChanged',
                readOnly: true
            },

            /**
             * The application's sources.
             *
             * @attribute sources
             * @type Object
             * @readonly
             */
            sources: {
                readOnly: true,
                type: Object
            }
        },

        /*********************************************************************/

        // OBSERVER
        __shellChanged(post) {

            // Listening
            this[post ? 'listen' : 'unlisten'](window, 'offline', '__handleOffline');
            this[post ? 'listen' : 'unlisten'](window, 'online', '__handleOffline');

            // Let
            let locale = XP.toLocale(navigator.language),
                app    = XP.get(window, `app.${post.namespace}`),
                auth   = XP.get(window, `auth`);

            // Overriding
            app  = XP.merge({i18n: {}, locale: locale, meta: {}}, app, this.app, {offline: !navigator.onLine});
            auth = XP.merge({}, auth, this.auth);

            // Exposing
            XP.set(window, `app.${post.namespace}`, app);
            XP.set(window, `auth`, auth);

            // Ensuring
            this.ensure('app', app);
            this.ensure('auth', auth);

            // Initializing
            this.initialize();

            // Memoize
            this.memoize();
        },

        /*********************************************************************/

        // LISTENER
        ready() {

            // Let
            let sources = XP.getElements(Polymer.dom(this.root), '.source[name]:not([name=""])');

            // Ensuring
            this.ensure('sources', sources.reduce((result, source) => { result[source.name] = source; return result; }, {}));
        },

        /*********************************************************************/

        // HANDLER
        __handleOffline(event) {

            // Ensuring
            this.ensure('app.offline', event.type === 'offline');
        },

        // HANDLER
        __handleRoute(event) {

            // Preventing
            if (event.defaultPrevented) { return; }

            // Ensuring
            this.ensure('app.route', event.detail.route);
            this.ensure('app.query', event.detail.query);
        }
    };

    /**
     * @polymerBehavior Polymer.APPStoreBehavior
     */
    Polymer.APPStoreBehavior = [
        Polymer.XPMasterSlaveBehavior,
        Polymer.APPLocaleBehavior,
        Polymer.APPStoreBehaviorImp
    ];
</script>