collapsible-selector.html

<!-- external scripts -->
<script src"../lodash/lodash.min.js"></script>

<!-- external imports -->

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

<!-- local imports -->

<link rel="import" href="styles/collapsible-selector-style.html">

<!--
`collapsible-selector`
Polymer JS 1.x custom selector element that collapses based on available width.

Works in a similar fashion to the tab bar in chrome/firefox dev tools.

@demo demo/index.html
-->

<dom-module id="collapsible-selector">
  <template>
    <style include="collapsible-selector-style"></style>

    <nav class="nav-bar invisible">
      <template is="dom-repeat" items="[[items]]">
        <button
          class="nav-item"
          data-item-name="[[item.value]]"
          on-tap="_setSelectedItemFromNav"
        >
          [[item.display]]
        </button>
      </template>

      <div class="dropdown-container">
        <button
          class="dropdown-title"
          on-focusout="_closeDropdown"
          on-tap="_openDropdown"
        >
          [[dropdownButtonText]]
        </button>

        <div class="dropdown-items">
          <template is="dom-repeat" items="[[_dropdownItems]]">
            <button
              class="dropdown-item"
              data-item-name="[[item.value]]"
              on-mousedown="_setSelectedItem"
            >
              [[item.display]]
            </button>
          </template>
        </div>
      </div>
    </nav>

    <div class="nav-bar-line">
      <div class="nav-indicator"></div>
    </div>
  </template>

  <script src="collapsible-selector.js"></script>
</dom-module>