EWF/examples/widgetapp/assets/bootstrap-formhelpers-selectbox.js

/* ==========================================================
 * bootstrap-formhelpers-selectbox.js
 * https://github.com/vlamanna/BootstrapFormHelpers
 * ==========================================================
 * Copyright 2012 Vincent Lamanna
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================== */


!function ($) {

  "use strict"; // jshint ;_;


 /* SELECTBOX CLASS DEFINITION
  * ========================= */

  var toggle = '[data-toggle=bfh-selectbox]'
    , BFHSelectBox = function (element) {
      }

  BFHSelectBox.prototype = {

    constructor: BFHSelectBox

  , toggle: function (e) {
      var $this = $(this)
        , $parent
        , isActive

      if ($this.is('.disabled, :disabled')) return false

      $parent = getParent($this)

      isActive = $parent.hasClass('open')

      clearMenus()

      if (!isActive) {
        $parent.toggleClass('open')
        
        $parent.find('[role=option] > li > [data-option="' + $this.find('.bfh-selectbox-option').data('option') + '"]').focus()
      }

      return false
    }

  , filter: function(e) {
    var $this
      , $parent
      , $items
      
    $this = $(this)
    
    $parent = $this.closest('.bfh-selectbox')
    
    $items = $('[role=option] li a', $parent)
    
    $items.hide()
    
    $items.filter(function() { return ($(this).text().toUpperCase().indexOf($this.val().toUpperCase()) != -1) }).show()
  }
  
  , keydown: function (e) {
      var $this
        , $items
        , $active
        , $parent
        , isActive
        , index

      if (!/(38|40|27)/.test(e.keyCode) && !/[A-z]/.test(String.fromCharCode(e.which))) return

      $this = $(this)

      e.preventDefault()
      e.stopPropagation()

      if ($this.is('.disabled, :disabled')) return false

      $parent = $this.closest('.bfh-selectbox')

      isActive = $parent.hasClass('open')

      if (!isActive || (isActive && e.keyCode == 27)) return $this.click()

      $items = $('[role=option] li a', $parent).filter(':visible')

      if (!$items.length) return

      $('body').off('mouseenter.bfh-selectbox.data-api', '[role=option] > li > a', BFHSelectBox.prototype.mouseenter)
      
      index = $items.index($items.filter(':focus'))

      if (e.keyCode == 38 && index > 0) index--                                        // up
      if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
      if (/[A-z]/.test(String.fromCharCode(e.which))) {
      	var $subItems = $items.filter(function() { return ($(this).text().charAt(0).toUpperCase() == String.fromCharCode(e.which)) })
        var selectedIndex = $subItems.index($subItems.filter(':focus'))
        if (!~selectedIndex) index = $items.index($subItems)
        else if (selectedIndex >= $subItems.length - 1) index = $items.index($subItems)
        else index++
      }
      if (!~index) index = 0
      
      $items
        .eq(index)
        .focus()
        
      $('body').on('mouseenter.bfh-selectbox.data-api', '[role=option] > li > a', BFHSelectBox.prototype.mouseenter)
    }
    
    , mouseenter: function (e) {
	  var $this
	  
	  $this = $(this)
	  
	  if ($this.is('.disabled, :disabled')) return false
	  
	  $this.focus()
    }
    
    , select: function (e) {
      var $this
        , $parent
        , $toggle
        , $input
      
      $this = $(this)
      
      e.preventDefault()
      e.stopPropagation()
      
      if ($this.is('.disabled, :disabled')) return false
      
      $parent = $this.closest('.bfh-selectbox')
      $toggle = $parent.find('.bfh-selectbox-option')
      $input = $parent.find('input[type="hidden"]')
      
      $toggle.data('option', $this.data('option'))
      $toggle.html($this.html())
      
      $input.removeData()
      $input.val($this.data('option'))
      $.each($this.data(), function(i,e) {
        $input.data(i,e);  
      });
      $input.change()
      
      clearMenus()
    }

  }

  function clearMenus() {
    getParent($(toggle))
      .removeClass('open')
  }

  function getParent($this) {
    var selector = $this.attr('data-target')
      , $parent

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    }

    $parent = $(selector)
    $parent.length || ($parent = $this.parent())

    return $parent
  }


  /* SELECTBOX PLUGIN DEFINITION
   * ========================== */

  $.fn.bfhselectbox = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('bfhselectbox')
      this.type = 'bfhselectbox';
      if (!data) $this.data('bfhselectbox', (data = new BFHSelectBox(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  $.fn.bfhselectbox.Constructor = BFHSelectBox

  var origHook
  // There might already be valhooks for the "text" type
  if ($.valHooks.div){
    // Preserve the original valhook function
    origHook = $.valHooks.div
  }
  $.valHooks.div = {
    get: function(el) {
      if($(el).hasClass("bfh-selectbox")){
        return $(el).find('input[type="hidden"]').val()
      }else if (origHook){
        return origHook.get(el)
      }
    },
    set: function(el, val) {
      if($(el).hasClass("bfh-selectbox")){
        var $el = $(el)
          , text = $el.find("li a[data-option='"+val+"']").text()
        $el.find('input[type="hidden"]').val(val)

        $el.find('.bfh-selectbox-option').text(text)
      }else if (origHook){
        return origHook.set(el,val)
      }
    }
  }

  /* APPLY TO STANDARD SELECTBOX ELEMENTS
   * =================================== */

  $(function () {
    $('html')
      .on('click.bfhselectbox.data-api', clearMenus)
    $('body')
      .on('click.bfhselectbox.data-api touchstart.bfhselectbox.data-api'  , toggle, BFHSelectBox.prototype.toggle)
      .on('keydown.bfhselectbox.data-api', toggle + ', [role=option]' , BFHSelectBox.prototype.keydown)
      .on('mouseenter.bfhselectbox.data-api', '[role=option] > li > a', BFHSelectBox.prototype.mouseenter)
      .on('click.bfhselectbox.data-api', '[role=option] > li > a', BFHSelectBox.prototype.select)  
      .on('click.bfhselectbox.data-api', '.bfh-selectbox-filter', function (e) { return false })
      .on('propertychange.bfhselectbox.data-api change.bfhselectbox.data-api input.bfhselectbox.data-api paste.bfhselectbox.data-api', '.bfh-selectbox-filter', BFHSelectBox.prototype.filter)
  })

}(window.jQuery);