x-pages.html

<link rel="import" href="../polymer/polymer.html">

<!--
`x-pages`
A simple content switcher.

@demo demo/index.html 
-->

<dom-module id="x-pages">
  
  <template>
    
    <style>

      :host {
          display: block;
      }

      :host ::content > :not([visible]) {
          display: none !important;
      }

      :host([hidden]) {
          display: none;
      }

    </style>

    <content></content>

  </template>

  <script>

    Polymer({

      /**
        * Fired when an element has been selected. Detail object contains 
        * - `previous` - the previously selected element. Will be `null` if no previous element exists. 
        * - `current` - the currenlty selected element. Will be `null` if no element is found. 
        * @event page-change
        */

      is: 'x-pages',

      properties: {

        /*
         * The currently selected string to match the element's `selected` attribute or the element's `tagName`.
         */
        selected: {
          type: String,
          observer: `_selectedObserver`
        },
        
        /*
         * Scrolls the page to the top if true.
         */
        autoScroll: {
          type: Boolean,
          value: false
        },

        /*
         * Previously selected element.
         */
        previous: {
          type: Object
        },

        /*
         * Currently selected element.
         */
        current: {
          type: Object
        },

      },

      /*
       * Observe the `selected` property to handle visible elements.
       */
      _selectedObserver: function(newValue, oldValue) {
        this._autoScrollToTop();
        let element = this._findElements(newValue, oldValue);
        this.previous = element.previous;
        this.current = element.current;
        this._deactivateChild(this.previous);
        this._activateChild(this.current);
        const event = this.fire(`page-change`, { current: this.current, previous: this.previous });
      },

      /*
       * Finds the previously selected elements and the currently selected elements.
       */
      _findElements(newSelected, oldSelected) {
        const childs = Polymer.dom(this).children;
        let currentElement = null;
        let previousElement = null;
        for (let i = 0; i < childs.length; i++) {
          const child = childs[i];
          const selected = child.getAttribute(`selected`);
          let tagName = child.tagName.toLowerCase();
          if ((selected === tagName) || (selected === newSelected)) {
            currentElement = child;
          } else if ((selected === tagName) || (selected === oldSelected)) {
            previousElement = child;
          }
        }
        return {
          current: currentElement,
          previous: previousElement
        }
      },

      /*
       * Activate a child by adding the `visible` attribute.
       */
      _activateChild: function(child) {
        if (child) {
          child.setAttribute(`visible`, ``);
        }
      },

      /*
       * Deactivate a child by removing the `visible` attribute.
       */
      _deactivateChild: function(child) {
        if (child) {
          child.removeAttribute(`visible`, ``);
        }
      },

      /*
       * If `autoScroll` is true, scroll window to top. 
       */
      _autoScrollToTop: function() {
        if (this.autoScroll) {
          window.scrollTo(0, 0);
        }
      },

    });

  </script>
  
</dom-module>