plastik-app-menubar.html

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

<!--
`plastik-app-menubar`
Desktop-style menubar for applications

@demo demo/index.html 
-->

<dom-module id="plastik-app-menubar">
  <template>
    <style>
      :host, .menu-bar-container, .menu-item, .menu {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }

      .menu-bar-container {
        display: flex;
        cursor: default;
        font-size: 13px;
        height: 29px;
        outline: none;
        position: relative;
        white-space: nowrap;
      }

      .menu-item {
        color: #212121;
        text-decoration: none;
        padding: 3px 7px 5px 7px;
        margin-top: 2px;
        border: 1px solid transparent;
        outline: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        position: relative;
      }

      .menu-item:hover {
        background: #eee;
        border-color: #eee;
      }

      .menu-item.expanded {
        background: #eee;
        border-color: #eee;
      }

      .menu-bar-container > .menu-item.expanded {
        background: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, .2);
        border-bottom: none;
        -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        color: black;
      }

      .menu-item .menu {
        display: none;
        flex-direction: column;
      }

      .menu-item.expanded > .menu {
        display: flex;
        position: absolute;
        background: #fff;
        -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
        -moz-transition: opacity 0.218s;
        -webkit-transition: opacity 0.218s;
        -o-transition: opacity 0.218s;
        transition: opacity 0.218s;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, .2);
        cursor: default;
        margin: 0;
        outline: none;
        padding: 6px 0;
        z-index: 1003;
      }

      .arrow {
        font-size: 70%;
        text-align: right;
        padding-top: 3px;
        padding-right: 0;
        padding-left: 35px;
        position: relative;
        left: auto;
        right: 0;
        color: #333;
        opacity: .5;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }

      .menu-item.expanded > .arrow {
        opacity: 1;
      }
    </style>
    <div class="menu-bar-container"></div>
    <!--<div class="menu-item">
      File
      <div class="menu">
        <div class="menu-item">New</div>
        <div class="menu-item">Open...</div>
        <div class="menu-item">Delete</div>
      </div>
    </div>
    <div class="menu-item">
      Edit
    </div>
    <div class="menu-item">
      View
    </div>-->
  </template>

  <script>
    Polymer({

      is: 'plastik-app-menubar',

      properties: {
        menuOpened: {
          type: Boolean,
          value: false,
          readOnly: true
        },
        menu: {
          type: Object,
          observer: '_menuChanged'
        }
      },
      ready: function () {
        if (Array.isArray(this.menu)) {
          this._menuChanged(this.menu)
        }
      },
      _menuChanged: function (menu) {
        var container = this.querySelector('.menu-bar-container')
        if (!container) {
          return
        }
        while (container.firstChild) {
            container.removeChild(container.firstChild)
        }

        if (!Array.isArray(menu)) {
          return
        }

        function addMenuItems(items, parent, isRoot) {
          items.forEach(function (item) {
            var itemElement
            if (item.href) {
              itemElement = document.createElement('a')
              itemElement.href = item.href
              if (item.target) {
                itemElement.target = item.target
              }
            } else {
              itemElement = document.createElement('div')
            }
            itemElement.classList.add('menu-item')
            itemElement.classList.add('plastik-app-menubar')
            var itemText = document.createElement('span')
            itemText.classList.add('menu-item-text')
            itemText.classList.add('plastik-app-menubar')
            itemText.appendChild(document.createTextNode(item.text))
            itemElement.appendChild(itemText)
            if (Array.isArray(item.children) && item.children.length > 0) {
              if (!isRoot) {
                var arrow = document.createElement('span')
                arrow.classList.add('arrow')
                arrow.classList.add('plastik-app-menubar')
                arrow.appendChild(document.createTextNode('►'))
                itemElement.appendChild(arrow)
              }
              itemElement.classList.add('has-children')
              var subMenuElement = document.createElement('div')
              subMenuElement.classList.add('menu')
              subMenuElement.classList.add('plastik-app-menubar')
              addMenuItems(item.children, subMenuElement)
              itemElement.appendChild(subMenuElement)
            }
            parent.appendChild(itemElement)
          })
        }

        addMenuItems(menu, container, true)

        var menuItems = []
        var menuBar = this
        window.addEventListener('click', function () {
          menuBar._setMenuOpened(false)
          menuItems.forEach(function (menuItem) {
            menuItem.classList.remove('expanded')
          })
        })

        Array.from(this.querySelectorAll('.menu-item')).forEach(function (item) {
          menuItems.push(item)
          item.addEventListener('click', function (e) {
            e.stopPropagation()
            var self = this
            menuItems.forEach(function (menuItem) {
              if (menuItem !== self && !menuItem.contains(self)) {
                menuItem.classList.remove('expanded')
              }
            })
            if (this.querySelector('.menu')) {
              var rect = this.getBoundingClientRect()

              if (this.parentNode == container) {
                this.classList.toggle('expanded')
                menuBar._setMenuOpened(this.classList.contains('expanded'))

                this.querySelector('.menu').style.top = (rect.bottom - rect.top - 1) + 'px'
                this.querySelector('.menu').style.left = '-1px'
                this.querySelector('.menu').style.minWidth = rect.width + 'px'
              } else {
                this.querySelector('.menu').style.top = '0'
                this.querySelector('.menu').style.left = rect.width + 'px'
              }
            } else {
              menuBar._setMenuOpened(false)
              menuItems.forEach(function (menuItem) {
                menuItem.classList.remove('expanded')
              })
            }
          })
          item.addEventListener('mouseover', function (e) {
            e.stopPropagation()
            var self = this
            if (this.classList.contains('expanded') || !menuBar.menuOpened) {
              return
            }
            menuItems.forEach(function (menuItem) {
              if (menuItem !== self && !menuItem.contains(self)) {
                menuItem.classList.remove('expanded')
              }
            })

            if (this.querySelector('.menu')) {
              this.classList.add('expanded')
              var rect = this.getBoundingClientRect()

              if (this.parentNode == container) {
                this.querySelector('.menu').style.top = (rect.bottom - rect.top - 1) + 'px'
                this.querySelector('.menu').style.left = '-1px'
                this.querySelector('.menu').style.minWidth = rect.width + 'px'
              } else {
                this.querySelector('.menu').style.top = '0'
                this.querySelector('.menu').style.left = rect.width + 'px'
              }
            }
          })
        })
      }

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