bs-dropdown.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

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

<!--
An element providing the interface for any site of exchanges
Example:

```
<bs-dropdown></bs-dropdown>
```

Custom property | Description | Default
----------------|-------------|----------
`--bs-dropdown-btn-toggle` | Mixin applied to bs-dropdown button  | `{}`
`--bs-dropdown-btn-toggle-focused` | Mixin applied to bs-dropdown button when is focused  | `{}`
`--bs-dropdown-box` | Mixin aplied to menu box that contains menu options | `{}`
`--bs-dropdown-menuItem-hover` | Mixin aplied to menu item when it is hovered | `{}`
`--bs-dropdown-divider` | Mixin aplied to divider | `{}`

@demo demo/index.html
-->

<dom-module id="bs-dropdown">
  <template>
  <style is="custom-style">
  :host {
    display: inline-block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .dropdown {
    position: relative;
  }
  .btn-toggle{
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    @apply(--bs-dropdown-btn-toggle);
  }
  .dropdown[reverse] .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
  }
  .btn-toggle:hover,
  .btn-toggle:active,
  .btn-toggle:focus {
    color: #fff;
    background-color: #204d74;
    border-color: #122b40;
    @apply(--bs-dropdown-btn-toggle-focused);
  }
  .caret {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 100%;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    padding:5px 0;
    @apply(--bs-dropdown-box);
  }
  .dropdown[reverse] .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
  }
  .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
    @apply(--bs-dropdown-divider);
  }
  .dropdown-menu>div>a{
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
  }
  .dropdown-menu > div > a[data-icon]{
    padding: 3px 12px;
  }
  .dropdown-menu>div:hover{
    background-color: #eee;
    @apply(--bs-dropdown-menuItem-hover);
  }
  bootstrap-glyphicon[icon] {
    margin-right: 8px;
  }
  </style>
  <div class="dropdown" id="dropdown" reverse$="{{dropup}}">
    <button id="btn_toggle" class="btn-toggle" type="button" aria-haspopup="true" aria-expanded="true">
      {{btn_title}}
      <span class="caret"></span>
    </button>
    <template is="dom-if" if="{{opened}}">
      <div class="dropdown-menu">
        <content select=".menu-content"></content>
        <template is="dom-repeat" items="{{menu_items}}" index-as="item_no">
          <div>
            <a href="{{item.link}}" data-icon$="{{item.icon}}" data-index$="{{item_no}}" on-click="_clickItem">
              <bootstrap-glyphicon icon="{{item.icon}}" style$="{{item.icon_style}}"> </bootstrap-glyphicon>
              {{_getName(item)}}
            </a>
          </div>
        </template>
      </div>
    </template>
  </div>

</template>

<script>
Polymer({
  is: 'bs-dropdown',
  hostAttributes:{
    tabindex:0
  },
  properties: {
    btn_title: {
      type: 'String',
      reflectToAttribute:true,
      value:'Dropdown'
    },
    dropup: {
      type:'boolean',
      value:false,
      reflectToAttribute:true
    },
    opened: {
      type:'boolean',
      value: false,
      reflectToAttribute:true
    },
    menu_items: {
      type: Array,
      value: function(){
        return [];
      }
    }
  },
  listeners: {
    'click':'toggle'
  },
  ready: function(){
    this.listen(document,'click','_blurClose');
  },
  detached: function(){
    this.unlisten(document,'click','_blurClose');
  },
  _isSeparator: function(value,condition){
    value = value.name || value;
    condition = condition === 'true' ? true : false;

    return condition ? value === ':separator' : value !== ':separator';
  },
  _getName: function(item){
    return item.name || item;
  },
  _clickItem: function(e){
    var target = e.currentTarget;
    var index =target.getAttribute('data-index');
    if (this.menu_items[index].onclick){
      this.menu_items[index].onclick(e);
    }
  },
  _blurClose: function(e){
    if (e){
      var target = e.target;
      var found = false;
      while(target.tagName!=='HTML' && !found) {
        if (target === this){
          found = true;
        }
        target = target.parentElement;
      }
    }
    if (!found){
      this.opened = false;
    }
  },
  close: function(){
    this.opened = false;
  },
  open: function(){
    this.opened = true;
  },
  toggle: function(e){
    this.opened = !this.opened;
  }

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

<dom-module id="bs-dropdown-item">
  <template>
  <style>
  .item {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
    @apply(--bs-dropdown-item)
  }
  .item:hover{
    background-color:#eee;
    cursor:pointer;
    @apply(--bs-dropdown-item-hovered)
  }
  </style>
  <div class="item">
    <content></content>
  </div>
</template>
<script>
Polymer({
  is:'bs-dropdown-item',
  properties:{}
})
</script>
</dom-module>