xenon-router.html

<link rel="import" href="../polymer/polymer.html" />
<!--
`<xenon-router>` provides simple page routing with the url hashbang and standard browser navigation.

Example:

    <xenon-router>
        <div id="pageone">
            <h1>the first page</h1>
            <a href="#pagetwo">next</a>
        </div>
        <div id="pagetwo">
            <h1>the second page</h1>
            <a href="#pageone">prev</a>
        </div>
    </xenon-router>

@group Xenon Elements
@element xenon-router
@demo demo/index.html
-->
<dom-module id="xenon-router">
    <template>
        <style>
            /*::content .backg { animation: fadeinx 1.0s ease 0.2s both; }*/

            @keyframes fadeinx {
                from { opacity: 0.0; }
                to { opacity: 1.0; }
            }
        </style>
        <content></content>
    </template>
    <script>
        Polymer({
            is: "xenon-router",
            properties: {
                /* Collection of all available ids */
                _hashes: { type: Array, value: [] },

                /* The current value of the hashbang in the url. This value will include the hash. ex. "#pagetwo" */
                hash: { type: String, observer: "_showChild", notify: true },

                /* Determines that we should wait for an object to become defined before init */
                wait: { type: Boolean, value: false },

                /* Specifies an object to become defined before views start to show */
                waitFor: { type: Object },

                /* the hash we were on before this one */
                lastHash: { type: String },

                /* Enable to show all routes always. All children of xenon-router will be visible. */
                debug: { type: Boolean, value: false },

                index: { type: Number, notify: true }
            },
            observers: [
                "_waitObjectIsReady(waitFor)"
            ],
            ready: function () {
                var all = this.getEffectiveChildren();
                for (var i = 0; i < all.length; i++) {
                    this.toggleClass("backg", true, all[i]);
                    this._hashes.push("#" + all[i].id);
                    all[i].hidden = true;
                }
                // check to see if we're supposed to wait for an object
                if (!this.wait) {
                    this._init();
                }
            },
            // add a hash listener and set the current hash which will show the first view
            _init: function () {
                var that = this;
                window.addEventListener("hashchange", function (e) {
                    that.navigate(that._getWindowHash());
                });

                this.hash = this._getWindowHash();
            },
            _getWindowHash: function () {
                return window.location.hash ? window.location.hash : this._hashes[0];
            },
            // When the wait object becomes defined, go ahead and show a view
            _waitObjectIsReady: function (o) {
                this._init();
            },
            /* Call this method to display the required child. For example:
            *  `this.$.myrouter.navigate("#pagetwo");`
            */
            navigate: function (hash) {
                this.hash = hash;
            },

            selectNext: function (hash = null) {
                if (hash == null) hash = this.hash;

                hash = hash == null ? null : hash[0] === "#" ? hash : "#" + hash;

                var index = this._hashes.indexOf(hash) + 1;
                if (index == this._hashes.length) return false;
                var newHash = this._hashes[index];

                var ele = this.queryEffectiveChildren(newHash);
                if (ele == null) return false;
                if (this.testElementsOnShouldShow(ele)) {
                    window.location = newHash;
                    window.scrollTo(0, 0);
                    this.fire("xenon-scroll-top");
                    return true;
                } else {
                    return this.selectNext(newHash);
                }
            },
            selectPrevious: function (hash = null) {
                if (hash == null) hash = this.hash;
                hash = hash == null ? null : hash[0] === "#" ? hash : "#" + hash;

                var index = this._hashes.indexOf(hash) - 1;
                if (index < 0) return false;
                var newHash = this._hashes[index];

                let ele = this.queryEffectiveChildren(newHash);
                if (ele == null) return false;
                if (this.testElementsOnShouldShow(ele)) {
                    window.location = newHash;
                    window.scrollTo(0, 0);
                    this.fire("xenon-scroll-top");
                    return true;
                } else {
                    return this.selectPrevious(newHash);
                }
            },
            /* Show the correct child based on the value of this.hash */
            _showChild: function (hash, oldHash) {
                if (hash == null) {
                    this.set("hash", this._hashes[0]);
                    this.set("index", 0);
                    return;
                }
                var all = this.getEffectiveChildren();
                if (!this.debug) {
                    for (var i = 0; i < all.length; i++) {
                        all[i].hidden = true;
                    }
                }
                // find the element to unhide
                var ele;
                if (this.hash == "") {
                    ele = all[0];
                } else {
                    ele = this.queryEffectiveChildren(this.hash);
                }

                let diff = this._hashes.indexOf(hash) - this._hashes.indexOf(oldHash);
                // unhide the element
                if (ele != undefined) {
                    var shouldShow = this.testElementsOnShouldShow(ele);

                    if (diff > 0 && !shouldShow) {
                        this.selectNext();
                    } else {
                        if (oldHash) {
                            var currentElement = this.queryEffectiveChildren(oldHash);
                            if (currentElement && typeof (currentElement.onRouterLeave) === "function") {
                                currentElement.onRouterLeave();
                            }
                        }
                        ele.hidden = false;
                        if (typeof (ele.onRouterShow) === "function") {
                            ele.onRouterShow();
                        }
                        this.fire("route", hash);
                    }
                }
                window.scrollTo(0, 0);
                this.fire("xenon-scroll-top");
                this.set("index", this._hashes.indexOf(hash));
            },


            testElementsOnShouldShow: function (element) {
                if (element == null) return false;
                if (typeof (element.onShouldShow) === "function") {
                    return element.onShouldShow();
                } else {
                    return true;
                }
            }

        });
    </script>
</dom-module>