uber_select_rails 0.1.2 → 0.1.8

data/vendor/assets/javascript/uber_select/javascript/list.js

@@ -0,0 +1,120 @@
+function List(options) {
+  var context = this
+
+  var view = this.view = $('<ul class="results"></ul>')
+
+
+  // BEHAVIOUR
+
+  // Handle up and down arrow key presses
+  $(options.keypressInput).on('keydown', function(event){
+    switch (event.which) {
+      case 38: // Up Arrow
+        stepHighlight(-1, true)
+        return false
+      case 40: // Down Arrow
+        stepHighlight(1)
+        return false
+      case 13: // Enter
+        if (highlightedResult().length) {
+          highlightedResult().click()
+        } else {
+          $(this).trigger('noHighlightSubmit')
+        }
+        return false
+    }
+  })
+
+  // When a list item is hovered
+  $(view).on('mouseenter', '.result', function(){
+    unhighlightResults()
+    highlightResult(this, {scroll: false})
+  })
+
+
+  // HELPER FUNCTIONS
+
+  this.getResults = function(){
+    return $(view).find('.result')
+  }
+
+  this.renderResults = function(data){
+    var results = $.map(data, function(datum){
+      return context.buildResult(datum)
+    })
+
+    view.toggleClass('empty', !data.length)
+
+    view.html(results)
+  }
+
+  // Can be overridden to format how results are built
+  this.buildResult = function(datum){
+    return $('<li></li>').html(datum).addClass('result')
+  }
+
+  this.unhighlightResults = unhighlightResults
+  this.highlightResult = highlightResult
+
+  function stepHighlight(amount, allowUnhighlight){
+    var index = visibleResults().index(highlightedResult())
+    var result = visibleResults()[index + amount]
+
+    if (result || allowUnhighlight){
+      unhighlightResults()
+      highlightResult(result)
+    }
+  }
+
+  function highlightResult(result, options){
+    result = $(result)
+    options = $.extend({scroll: true}, options)
+
+    if (!result.length) { return }
+
+    var visibleResult = visibleResults().filter(result)
+    if (visibleResult.length) {
+      visibleResult.addClass('highlighted')
+
+      if (options.scroll){
+        scrollResultIntoView(visibleResult)
+      }
+    }
+  }
+
+  function unhighlightResults(){
+    highlightedResult().removeClass('highlighted')
+  }
+
+  function highlightedResult(){
+    return results().filter('.highlighted')
+  }
+
+  function visibleResults(){
+    return results().not('.hidden')
+  }
+
+  function results(){
+    return view.find('.result')
+  }
+
+  function scrollResultIntoView(result){
+    result = $(result)
+    var container = result.closest('.results').css('position', 'relative') // Ensure the results container is positioned so offset is calculated correctly
+    var containerHeight = container.outerHeight()
+    var containerTop = container.get(0).scrollTop
+    var containerBottom = containerTop + containerHeight
+    var resultHeight = result.outerHeight()
+    var resultTop = result.get(0).offsetTop
+    var resultBottom = resultTop + resultHeight
+
+    if (containerBottom < resultBottom){
+      container.scrollTop(resultBottom - containerHeight)
+    } else if (containerTop > resultTop){
+      container.scrollTop(resultTop)
+    }
+  }
+
+  // INITIALIZATION
+  $.extend(this, options) // Allow overriding of functions
+}

data/vendor/assets/javascript/uber_select/javascript/output_container.js

@@ -0,0 +1,21 @@
+var OutputContainer = function(options){
+  options = $.extend({}, options)
+  var view         = $('<span class="selected_text_container" tabindex=0 role="button"></span>')
+  var selectedText = $('<span class="selected_text"></span>').appendTo(view)
+  var selectCaret  = $('<span class="select_caret"></span>').appendTo(view).html(options.selectCaret)
+
+  // INITIALIZATION
+
+  setValue()
+
+  // HELPER FUNCTIONS
+
+  function setValue(value){
+    selectedText.html(value || '&nbsp;')
+    view.toggleClass('empty', !value)
+  }
+
+  // PUBLIC INTERFACE
+
+  $.extend(this, {view: view, setValue: setValue})
+}

data/vendor/assets/javascript/uber_select/javascript/pane.js

@@ -0,0 +1,90 @@
+function Pane(options){
+  options = $.extend({
+    trigger: null
+  }, options)
+
+  var context = this
+  var model = this.model = {}
+  var isOpen = false
+  var view = this.view = $('<div class="pane"></div>').toggle(isOpen)
+  var innerPane = $('<div class="pane_inner"></div>').appendTo(view)
+
+
+  // PUBLIC INTERFACE
+
+  $.extend(this, {view: view, addContent: addContent, removeContent: removeContent, show: show, hide: hide})
+
+
+  // BEHAVIOUR
+
+  if (options.trigger){
+    // Show the pane when the select element is clicked
+    $(options.trigger).on('click', function(event){
+      context.show()
+    })
+
+    // Show the pane if the user was tabbed onto the trigger and pressed enter or space
+    $(options.trigger).on('keyup', function(event){
+      if (event.which == 13 || event.which == 32){
+        context.show()
+        return false
+      }
+    })
+  }
+
+    // Hide the pane when clicked out
+  $(document).on('mousedown', function(event){
+    if (isEventOutsidePane(event) && isEventOutsideTrigger(event)){
+      context.hide()
+    }
+  })
+
+  // Make it possible to have elements in the pane that close it
+  view.on('click', '[data-behaviour~=close-pane]', function(event){
+    context.hide()
+  })
+
+  // Close the pane when the user presses escape
+  $(document).on('keyup', function(event){
+    if (event.which == 27 && isOpen){
+      context.hide()
+      options.trigger.focus()
+    }
+  })
+
+
+  // HELPER FUNCTIONS
+
+  function addContent(name, content){
+    model[name] = content
+    innerPane.append(content)
+  }
+
+  function removeContent(name){
+    $(model[name]).remove()
+    delete model['name']
+  }
+
+  function show(){
+    if (isOpen) { return }
+    isOpen = true
+    view.show()
+    $(context).trigger('shown')
+  }
+  function hide(){
+    if (!isOpen) { return }
+    isOpen = false
+    view.hide()
+    $(context).trigger('hidden')
+  }
+
+  // returns true if the event originated outside the pane
+  function isEventOutsidePane(event){
+    return !$(event.target).closest(view).length
+  }
+
+  function isEventOutsideTrigger(event){
+    return !$(event.target).closest(options.trigger).length
+  }
+
+}

data/vendor/assets/javascript/uber_select/javascript/search.js

@@ -0,0 +1,151 @@
+function Search(queryInput, resultsContainer, options){
+  var context = this
+  var model = new SearchModel(options.model)
+  var list = new List(options.view)
+  var resultsRendered = false
+
+  // HELPER FUNCTIONS
+
+  this.setData = function(data){
+    model.setData(data)
+  }
+
+  this.renderResults = function(){
+    list.renderResults(model.getResults())
+    $(this).trigger('renderedResults')
+    resultsRendered = true
+  }
+
+  this.getQuery = function(){
+    return model.getQuery()
+  }
+
+  this.getResults = function(){
+    return list.getResults()
+  }
+
+  this.clear = function(){
+    if (!resultsRendered){
+      this.renderResults()
+    }
+
+    if (queryInput.val() === '') {
+      list.unhighlightResults()
+    } else {
+      queryInput.val('').change()
+    }
+  }
+
+  this.highlightResult = function(element) {
+    list.unhighlightResults()
+    list.highlightResult(element)
+  }
+
+  // BEHAVIOUR
+
+  $(queryInput).on('searchInput', function(){
+    model.setQuery(this.value)
+  })
+
+  $(model).on('resultsUpdated', function(){
+    context.renderResults()
+  })
+
+  // Forward query change
+  $(model).on('queryChanged', function(){
+    $(context).trigger('queryChanged')
+  })
+
+
+  // INITIALIZATION
+
+  resultsContainer.html(list.view)
+
+
+  // PROTOTYPES
+
+  function SearchModel(options){
+    var data, results
+    var processedQuery = ''
+    var context = this
+    options = $.extend({minQueryLength: 0}, options)
+
+    this.setQuery = function(value){
+      value = context.queryPreprocessor(value)
+
+      if (processedQuery == value) { return }
+      processedQuery = value || ''
+      this.updateResults()
+      $(this).trigger('queryChanged')
+    }
+
+    this.getQuery = function(){
+      return processedQuery || ''
+    }
+
+    this.setData = function(value){
+      data = value || []
+      this.updateResults()
+    }
+
+    this.getResults = function(){
+      return results
+    }
+
+    this.updateResults = function(){
+      if (options.minQueryLength > processedQuery.length) {
+        results = []
+      } else if (this.isBlankQuery()){
+        results = $.each(this.dataForMatching(processedQuery, data), function(){ return this })
+      } else {
+        results = []
+        var pattern = this.patternForMatching(processedQuery)
+        $.each(this.dataForMatching(processedQuery, data), function(index, datum){
+          if (context.match(pattern, context.datumPreprocessor(datum), processedQuery)){
+            results.push(datum)
+          }
+        })
+      }
+      $(this).trigger('resultsUpdated')
+    }
+
+    this.isBlankQuery = function(){
+      return processedQuery === ''
+    }
+
+    // Can be overridden to select a subset of data for matching
+    // Defaults to the identity function
+    this.dataForMatching = function(processedQuery, data){
+      return data
+    }
+
+    // Provides a regexp for matching the processedDatum from the processedQuery
+    // Can be overridden to provide more sophisticated matching behaviour
+    this.patternForMatching = function(processedQuery){
+      return new RegExp(processedQuery.escapeForRegExp(), 'i')
+    }
+
+    // Can be overridden to provide more sophisticated matching behaviour
+    this.match = function(pattern, processedDatum, processedQuery){
+      return pattern.test(processedDatum)
+    }
+
+    // Can be overridden to mutate the query being used to match before matching
+    // Defaults to whitespace trim
+    this.queryPreprocessor = function(query){
+      return $.trim(query)
+    }
+
+    // Can be overridden to mutate the data the moment before it is matched
+    // Useful extract string from JSON datum
+    // Defaults to the identity function
+    this.datumPreprocessor = function(datum){
+      return datum
+    }
+
+    // INITIALIZATION
+    $.extend(this, options) // Allow overriding of functions
+    delete this.data // Data isn't an attribute we want to expose
+    this.setData(options.data)
+  }
+}

data/vendor/assets/javascript/uber_select/javascript/search_field.js

@@ -0,0 +1,80 @@
+function SearchField(options){
+  options = $.extend({
+    placeholder: 'Type to Search',
+    clearButton:'✕' // Text content of clear search button
+  }, options)
+
+  var context     = this
+  var input       = this.input       = $('<input type="search" class="search_input">').attr('placeholder', options.placeholder)
+  var value       = input.val()
+  var clearButton = this.clearButton = $('<span class="clear_search_button"></span>').html(options.clearButton)
+  var view        = this.view        = $('<span class="search_field_container"></span>').append(input).append(clearButton)
+  var eventNames  = isOnInputSupported() ? 'input change' : 'keyup change'
+
+
+  // PUBLIC INTERFACE
+
+  $.extend(this, {refresh: refresh})
+
+
+  // BEHAVIOUR
+
+  // When a change is detected
+  input.on(eventNames, function() {
+    refresh() // Always refresh on input in case something has altered the state without informing us
+
+    if (input.val() == value) { return }
+
+    triggerEvent('searchInput')
+    value = input.val()
+  })
+
+  // When the clear button is pressed
+  clearButton.on('click', function(){
+    input.val('')
+    refresh()
+    input.focus()
+    triggerEvent('searchInput')
+    triggerEvent('clear')
+  })
+
+  // When the enter button is pressed
+  input.on('keydown', function(event){
+    if (event.which == 13){
+      triggerEvent('querySubmit')
+    }
+  })
+
+
+  // HELPER FUNCTIONS
+
+  function refresh(){
+    updateClearButtonVisiblity()
+    updateSearchInputClass()
+  }
+
+  function updateSearchInputClass(){
+    input.toggleClass('empty', !input.val())
+  }
+
+  function isOnInputSupported(){
+    // IE 8 and 9 are the only common browsers that don't completely support oninput
+    // IE 10 and 11 fire the input event when the element is focussed, treat them as unsupported as well
+    return !(navigator.userAgent.indexOf('MSIE')!==-1 || navigator.appVersion.indexOf('Trident/') > 0) // SOURCE: http://stackoverflow.com/questions/21825157/internet-explorer-11-detection
+  }
+
+  function updateClearButtonVisiblity(){
+    clearButton.toggle(!!input.val().length)
+  }
+
+  // Allow observer to be attached to the SearchField itself
+  function triggerEvent(eventType, callbackArgs){
+    input.trigger(eventType, callbackArgs)
+    $(context).trigger(eventType, callbackArgs)
+  }
+
+
+  // INITIALIZATION
+
+  refresh()
+}