plumes/public/dropdowns/pl-dropdown-title.html

Flying-fast Metro future vision components

<div
  class="
    pl-dropdown-title
    {{ opened ? 'opened' : '' }}
    {{ noAnimation ? 'no-animation' : '' }}
    {{ noCaret ? 'no-caret' : '' }}
  "
  on-click="mainClick"
>
  <div class="pl-dropdown-placeholder"><span>{{placeholder}}</span></div>

  <h2
    class="{{ titles.length > 1 ? 'list' : '' }}"
    on-click="toggle"
    style="
    -webkit-transform: translateY({{ opened ? (selected.index + 1) * 40 : 0 }}px);
       -moz-transform: translateY({{ opened ? (selected.index + 1) * 40 : 0 }}px);
        -ms-transform: translateY({{ opened ? (selected.index + 1) * 40 : 0 }}px);
         -o-transform: translateY({{ opened ? (selected.index + 1) * 40 : 0 }}px);
            transform: translateY({{ opened ? (selected.index + 1) * 40 : 0 }}px);
    "
  >
    <span>{{selected.name}}</span>
    <i class="fa fa-caret-down"></i>
  </h2>

  <ul class="pl-dropdown-title-list">

    {{#titles:i}}
    <li on-click="select(i)">
      <span
        class="{{ this.selected ? 'hidden' : '' }}"
        style="
          -webkit-transition-delay: {{i * 0.05}}s;
             -moz-transition-delay: {{i * 0.05}}s;
              -ms-transition-delay: {{i * 0.05}}s;
               -o-transition-delay: {{i * 0.05}}s;
                  transition-delay: {{i * 0.05}}s;
        "
      >{{name}}</span>
    </li>
    {{/titles}}

  </ul>
</div>