basic-page-dots.html

<!--
Aspect which adds a set of small dots to a collective tracking a list of items.
There will be one dot for each item, and the dot for the currently selected item
will be shown selected.

Clicking a dot will select the corresponding list item.

@element basic-page-dots
-->

<link rel="import" href="../basic-aspect/basic-aspect.html">

<dom-module id="basic-page-dots">
  <template>

    <style>
    :host {
      display: -webkit-inline-flex;
      display: inline-flex;
      position: relative;
    }

    #dots {
      bottom: 0;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: center;
      justify-content: center;
      position: absolute;
      width: 100%;
      z-index: 1;
    }

    .dot {
      background: rgba(255, 255, 255, 0.4);
      border-radius: 7px;
      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5);
      box-sizing: border-box;
      height: 8px;
      margin: 7px 5px;
      padding: 0;
      transition: background 0.2s box-shadow 0.2s;
      width: 8px;
    }

    .dot:hover {
      background: rgba(0, 0, 0, 0.75);
      box-shadow: 0 0 1px 3px rgba(255, 255, 255, 0.5);
    }

    .dot.selected {
      background: rgba(255, 255, 255, 0.95);
    }

    @media (min-width: 768px) {
      .dot {
        height: 12px;
        width: 12px;
      }
    }
    </style>

    <!--
    REVIEW: These dots aren't buttons, because they're never meant to be used
    on their own. There should always be some other, more accessible, way to
    navigate the content.
    -->
    <!--
    <template id="dotTemplate">
      <div class="dot" on-click="dotClick"></div>
    </template>
    -->
    <!-- TODO: Replace with something that's basically a list box -->
    <div id="dots"></div>
    <content></content>

  </template>
</dom-module>

<script>
Polymer({

  behaviors: [Basic.Aspect],

  contribute: {

    applySelection: function(item, selected) {
      var index = this.collective.indexOfItem(item);
      // See if the corresponding dot has already been created.
      // If not, the correct dot will be selected when it gets created.
      var dots = this.dots;
      if (dots && dots.length > index) {
        var dot = this.dots[index];
        if (dot) {
          dot.classList.toggle('selected', selected);
        }
      }
    },

    collectiveChanged: function() {
      // Apply any selection made before assimilation.
      if (this._prematureSelectedIndex
          && 'selectedIndex' in this.collective
          && this.collective.selectedIndex === -1) {
        this.collective.selectedIndex = this._prematureSelectedIndex;
        this._prematureSelectedIndex = null;
      }
      // TODO: Move the requirement for a selction to basic-item-selection. This
      // should ideally pick the nearest item to the previously-selected item.
      //   if (this.collective.selectedItem === null && this.collective.items != null && this.collective.selectFirst) {
      //     this.collective.selectFirst();
      //   }
    },

    // TODO: Seems like this ultimately belongs in Collective.
    itemsChanged: function() {
      // Raise a property change notification so binding can update.
      // if (Object.getNotifier) {
      //   Object.getNotifier(this).notify({
      //     type: "update",
      //     name: "items"
      //   });
      // }

      // TODO: This reports an incorrect number of items if an item is removed.
      this._createDots(this.collective.items.length);
    }

  },

  dotClick: function(event) {
    var dot = event.target;
    var dotIndex = this.dots.indexOf(dot);
    if (dotIndex >= 0) {
      this.collective.selectedIndex = dotIndex;
    }
  },

  get dots() {
    return [].slice.call(this.$.dots.querySelectorAll('.dot'));
  },

  is: 'basic-page-dots',

  properties: {

    selectedIndex: {
      type: Number
    },

    selectedItem: {
      type: Object
    }

  },

  ready: function() {
    this.$.dots.addEventListener('click', function(event) {
      this.dotClick(event);
    }.bind(this));
  },

  /**
   * The index of the item which is currently selected, or -1 if there is no
   * selection.
   *
   * @property selectedIndex
   * @type Number
   */
  get selectedIndex() {
    // See note at basic-item-selection's selectedIndex getter.
    if (this._readied) {
      return this.collective.selectedIndex;
    }
  },
  set selectedIndex(index) {
    if ('selectedIndex' in this.collective) {
      this.collective.selectedIndex = index;
    } else {
      // Selection is being made before the collective supports it.
      this._prematureSelectedIndex = index;
    }
  },

  /**
   * The currently selected item, or null if there is no selection.
   *
   * @property selectedItem
   * @type Object
   */
  get selectedItem() {
    return this.collective.selectedItem;
  },
  set selectedItem(item) {
    this.collective.selectedItem = item;
  },

  _createDots: function(count) {
    var selectedIndex = this.selectedIndex;
    var dotContainer = this.$.dots;
    var existingDotCount = dotContainer.children.length;
    if (count === existingDotCount) {
      return;
    } else if (existingDotCount > count) {
      // Remove extra dots.
      while (dotContainer.children.length > count) {
        Polymer.dom(dotContainer).removeChild(dotContainer.children[0]);
      }
    } else {
      // Create needed dots.
      for (var i = existingDotCount; i < count; i++) {
        var newDot = document.createElement('div');
        newDot.classList.add('dot');
        newDot.classList.add('style-scope');
        newDot.classList.add('basic-page-dots');
        newDot.classList.toggle('selected', i === selectedIndex);
        dotContainer.appendChild(newDot);
      }
    }
  },

  // Tracks selection before the collective supports it.
  _prematureSelectedIndex: null

});
</script>