uber_select_rails 0.6.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0dad48d52dd5e14c133c8d6c01861f5ae3e9069110df7b8b5faa7840703342f7
-  data.tar.gz: 72be4762c753d35290e7f9d63d6b9575f0967d44d9a9b382d417accb6324fd6b
+  metadata.gz: 4e848d17e956bbe5c52f9f7e299e47cc2cb296755ae8ce7cbf94877b5a4857ca
+  data.tar.gz: 87fdd8c564c2960b8d20015245aeb48b28b8c2ee7b7e12e42fd393eb49ebaeec
 SHA512:
-  metadata.gz: a39831aaeb705925e5bf27053e4445232096eb8ba8f4e572ce2809a21b1cd4a9f42af62189614089fa7dba4fa9b5f046988fcfea92ce47ee872e76f24692b797
-  data.tar.gz: 98cdf58391fea57de5ac5ea903a72e2d6fb15b67956ec64d0ffcdf73aa3231349f38b1555a31f2422653b2ed6acb37b63882918cbf16856368cb54af42c1924f
+  metadata.gz: 4500a0a600213b393da36f7676deee006ddd301f4f258d336017e2d0260182615da1a75ccda716f231049e357049a23a25b1b26a88597d844f39423babb202b7
+  data.tar.gz: 38d0c07a95368fcdaaa6d3338f21e572a846cf70142353e2a1ec365e6f4a9222c3ac060cd1cca6a4321b4aa1866b62421c3b1ab887e148a89801497975cda09b

data/lib/uber_select_rails/version.rb

@@ -1,3 +1,3 @@
 module UberSelectRails
-  VERSION = "0.6.0"
+  VERSION = "1.0.0"
 end

data/vendor/assets/javascript/uber_select/README.md

@@ -24,15 +24,15 @@ you can use UberSelect to gussy up forms, without changing any of the underlying
 $('.my_selects').uberSelect(options);
 ```
 
-#### Attributes <a name="UberSearch attributes"></a>
+#### Attributes <a name="uber-search-attributes"></a>
 
-Attribtes on the outermost element can be specified by setting the `data-uber-attributes` attribute on the `<select>` element. Values should be passed
+Attributes on the outermost element can be specified by setting the `data-uber-attributes` attribute on the `<select>` element. Values should be passed
 as a JSON string of key/value pairs where the key is the attribute name and the value is the attribute value.
 
 #### Options
 
 Options can be specified by setting the `data-uber-options` attribute on the `<select>` element. Values should be passed
-as a JSON string. All options on the are passed to the underlying UberSearch, see [UberSearch options](#UberSearchOptions).
+as a JSON string. All options on the are passed to the underlying UberSearch, see [UberSearch options](#uber-search-options).
 
 - ##### prepopulateSearchOnOpen
 
@@ -76,7 +76,7 @@ as a JSON string. All options on the are passed to the underlying UberSearch, se
 
 - ##### optionFromDatum
 
-  A function that is used to customize the options value and text built from a JSON response. `datum` is a single result returned from the JSON response.
+  A function that is used to customize the option's value and text built from a JSON response. `datum` is a single result returned from the JSON response.
 
   The function signature is as follows:
 
@@ -98,6 +98,13 @@ as a JSON string. All options on the are passed to the underlying UberSearch, se
 
   Add an aria-label attribute with this value to the uber_select element.
 
+#### Option Data Attributes
+`<option>` elements can each use data-attributes to control datum properties. See [UberSearch data](#uber-search-data).
+
+  - `data-match-value`
+  - `data-visibility`
+  - `data-selected-text`
+
 #### Events Triggered
 
 - ##### uber-select:ready
@@ -129,7 +136,7 @@ being used in purely in JS, and not being linked to a `<select>` element in a fo
 new UberSearch(data, options);
 ```
 
-#### Data
+#### Data <a name="uber-search-data"></a>
 
 Data is an array of objects. Each object may have the following properties:
 
@@ -180,7 +187,7 @@ Data is an array of objects. Each object may have the following properties:
   Returns the currently selected element from the search results.
 
 
-#### Options <a name="UberSearch options"></a>
+#### Options <a name="uber-search-options"></a>
 
 Options can be specified by setting the `data-uber-options` attribute on the `<select>` element. Values should be passed
 as a JSON string.
@@ -297,7 +304,7 @@ as a JSON string.
 
 - ##### onRender
 
-  A function to run when the results container is rendered. If the result returns false, the default `select` event
+  A function to run when the results container is rendered. If the result returns false, the default `render` event
   handler is not run and the event is cancelled.
 
   The function signature is as follows:
@@ -328,6 +335,20 @@ as a JSON string.
   function(value) { }
   ```
 
+- ##### matchGroupNames
+
+  Toggles whether or not to match results using their `datum.group` in addition to their `datum.matchValue`. When `true`
+  the searches that match the group name will cause options within that group to appear.
+
+  Default: `false`
+
+- ##### alwaysOpen
+
+  Toggles whether options page is always shown open. When `true` the pane will start open and will not close when a option is selected
+  nor via any clicks on the select itself.
+
+  Default: `false`
+
 - ##### outputContainer (Deprecated)
 
   An object that receives the output once a result is selected. Must respond to `setValue(value)` and `view()`. This object serves to

data/vendor/assets/javascript/uber_select/javascript/jquery.uber-select.js

@@ -66,10 +66,10 @@
           $(select).append(optionsFromData(data))
           updateSelectValue(options.value)
           uberSearch.setData(dataFromSelect(select))
-          $(select).trigger(eventsTriggered.ready)
+          triggerEvent(eventsTriggered.ready)
         })
       } else {
-        $(select).trigger(eventsTriggered.ready)
+        triggerEvent(eventsTriggered.ready)
       }
 
 
@@ -158,7 +158,7 @@
         var before = $(select).val()
         $(select).val(value)
         var after = $(select).val() // Read value the same way instead of comparing to `value` so the same coercion is applied
-        if (before != after) { $(select).trigger('change') } // Only trigger a change if the value has actually changed
+        if (before != after) { triggerEvent('change') } // Only trigger a change if the value has actually changed
       }
 
       // Selects the option with an emptystring value, or the first option if there is no blank option
@@ -169,7 +169,8 @@
         if (!selectValue) { return }
 
         // Clear the value
-        $(select).val('').trigger('change')
+        $(select).val('')
+        triggerEvent('change')
 
         // If that cleared it then we're done, otherwise, select the first option
         if ($(select).find('option:selected').length){ return }
@@ -180,13 +181,18 @@
         if (firstOptionValue == selectValue) { return }
 
         // Select the first option
-        $(select).val(firstOptionValue).trigger('change')
+        $(select).val(firstOptionValue)
+        triggerEvent('change')
       }
 
       // Hide the select, but keep its width to allow it to set the min width of the uber select
       // NOTE: IE doesn't like 0 height, so give it 1px height and then offset
       function hideSelect(){
-        $(select).wrap($('<div>').css({visibility: 'hidden', height: '1px', marginTop: '-1px', pointerEvents: 'none'}).addClass('select_width_spacer'))
+        $(select).wrap($('<div>').css({visibility: 'hidden', height: '1px', marginTop: '-1px', pointerEvents: 'none'}).addClass('select_width_spacer').attr('aria-hidden', true))
+      }
+
+      function triggerEvent(eventType) {
+        return select.dispatchEvent(new CustomEvent(eventType, { bubbles: true }));
       }
     })
 

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

@@ -0,0 +1,160 @@
+(function($) {
+  UberSearch.List = function(options) {
+    var context = this
+
+    var view = this.view = $('<ul class="results"></ul>')
+
+
+    // BEHAVIOUR
+
+    // Handle up and down arrow key presses
+    $(view).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 32: // Space
+          if (highlightedResult().length) {
+            highlightedResult().click()
+          }
+          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 focus', '.result:not(.disabled)', function(){
+      if ($(this).hasClass('highlighted')) { return }
+      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)
+    }
+
+    this.unhighlightResults = unhighlightResults
+    this.highlightResult = highlightResult
+    this.stepHighlight = stepHighlight
+    this.setHighlight = setHighlight
+
+    function stepHighlight(amount, allowUnhighlight){
+      var index = selectableResults().index(highlightedResult())
+      setHighlight(index + amount, { allowUnhighlight: allowUnhighlight })
+    }
+
+    function setHighlight(index, options) {
+      options = $.extend({}, options)
+
+      var result = selectableResults()[index]
+
+      if (result){
+        unhighlightResults({ blur: !options.focus })
+        highlightResult(result, { focus: options.focus })
+      } else if (options.allowUnhighlight) {
+        unhighlightResults({ blur: !options.focus })
+      }
+      triggerEvent('setHighlight', [result, index])
+    }
+
+    function highlightResult(result, options) {
+      result = $(result)
+      options = $.extend({
+        scroll: true,
+        focus: true
+      }, options)
+
+      if (!result.length) {
+        return
+      }
+
+      result.addClass('highlighted')
+
+      if (options.focus) {
+        result.focus()
+      }
+
+      if (options.scroll){
+        scrollResultIntoView(result)
+      }
+    }
+
+    function unhighlightResults(options){
+      options = $.extend({
+        blur: true
+      }, options)
+
+      var result = highlightedResult()
+      result.removeClass('highlighted')
+
+      if (options.blur) {
+        result.blur()
+      }
+    }
+
+    function highlightedResult(){
+      return results().filter('.highlighted')
+    }
+
+    function selectableResults(){
+      return visibleResults().not('.disabled')
+    }
+
+    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)
+      }
+    }
+
+
+    // Allow observer to be attached to the UberSearch itself
+    function triggerEvent(eventType, callbackArgs){
+      view.trigger(eventType, callbackArgs)
+      $(context).triggerHandler(eventType, callbackArgs)
+    }
+
+    // INITIALIZATION
+    $.extend(this, options) // Allow overriding of functions
+  }
+})(jQuery)

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

@@ -0,0 +1,29 @@
+(function($) {
+  UberSearch.OutputContainer = function(options){
+    options = $.extend({}, options)
+    var view         = $('<span class="selected_text_container" aria-expanded="false" aria-activedescendant aria-haspopup="listbox" role="combobox" tabindex="0"></span>')
+    var selectedText = $('<span class="selected_text"></span>').appendTo(view)
+    var selectCaret  = $('<span class="select_caret"></span>').appendTo(view).html(options.selectCaret)
+
+    // INITIALIZATION
+
+    if (options.ariaLabel) { view.attr("aria-label", options.ariaLabel) }
+    setValue()
+
+    // HELPER FUNCTIONS
+
+    function setValue(value){
+      selectedText.text(value || String.fromCharCode(160)); // Insert value or &nbsp;
+
+      view.toggleClass('empty', !value)
+    }
+
+    function setDisabled(boolean) {
+      view.toggleClass('disabled', boolean)
+    }
+
+    // PUBLIC INTERFACE
+
+    $.extend(this, {view: view, setValue: setValue, setDisabled: setDisabled})
+  }
+})(jQuery)

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

@@ -0,0 +1,93 @@
+(function($) {
+  UberSearch.Pane = function() {
+    var eventsTriggered = {
+      shown: 'shown',
+      hidden: 'hidden'
+    }
+
+    var context   = this
+    var model     = {}
+    var isOpen    = false
+    var view      = $('<div class="pane" role="listbox"></div>').toggle(isOpen)
+    var innerPane = $('<div class="pane_inner"></div>').appendTo(view)
+
+
+    // PUBLIC INTERFACE
+
+    $.extend(this, {
+      model:         model,
+      view:          view,
+      addContent:    addContent,
+      removeContent: removeContent,
+      show:          show,
+      hide:          hide,
+      toggle:        toggle,
+      isOpen:        paneIsOpen,
+      isClosed:      paneIsClosed
+    })
+
+
+    // BEHAVIOUR
+
+    // 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()
+        return false
+      }
+    })
+
+
+    // HELPER FUNCTIONS
+
+    function paneIsOpen(){
+      return isOpen
+    }
+
+    function paneIsClosed(){
+      return !isOpen
+    }
+
+    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()
+      view.addClass('showing')
+      triggerEvent(eventsTriggered.shown)
+    }
+    function hide(){
+      if (!isOpen) { return }
+      isOpen = false
+      view.hide()
+      view.removeClass('showing')
+      triggerEvent(eventsTriggered.hidden)
+    }
+    function toggle(){
+      if (isOpen) {
+        context.hide()
+      } else {
+        context.show()
+      }
+    }
+
+    function triggerEvent(eventType, callbackArgs){
+      view.trigger(eventType, callbackArgs)
+      $(context).triggerHandler(eventType, callbackArgs)
+    }
+  }
+})(jQuery)

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

@@ -0,0 +1,77 @@
+(function($) {
+  UberSearch.Search = function(queryInput, resultsContainer, options){
+    var context = this
+    var model = new UberSearch.SearchModel(options.model)
+    var list = new UberSearch.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, options) {
+      list.unhighlightResults()
+      list.highlightResult(element, options)
+    }
+
+    this.stepHighlight = list.stepHighlight
+    this.setHighlight = list.setHighlight
+
+
+    // BEHAVIOUR
+
+    $(queryInput).on('searchInput', function(){
+      model.setQuery(this.value)
+    })
+
+    // Forward navigating away from queryInput
+    $(queryInput).on('inputDownArrow', function() {
+      $(context).trigger('inputDownArrow')
+    })
+
+    $(model).on('resultsUpdated', function(){
+      context.renderResults()
+    })
+
+    // Forward query change
+    $(model).on('queryChanged', function(){
+      $(context).trigger('queryChanged')
+    })
+
+
+    // INITIALIZATION
+
+    resultsContainer.html(list.view)
+
+
+    // PROTOTYPES
+  }
+})(jQuery)

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

@@ -0,0 +1,96 @@
+(function($) {
+  UberSearch.SearchField = function(options){
+    options = $.extend({
+      placeholder: 'Type to Search',
+      searchInputAttributes: { 'aria-label': "Type to Search" },
+      clearButton:'✕' // Text content of clear search button
+    }, options)
+
+    var inputAttrs = {}
+    $.extend(inputAttrs, { placeholder: options.placeholder }, options.searchInputAttributes)
+
+    var context     = this
+    var input       = this.input       = $('<input type="search" class="search_input">').attr(inputAttrs)
+    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')
+      }
+
+      if (event.which == 38) { // Up Arrow
+        triggerEvent('inputUpArrow')
+        return false
+      }
+
+      if (event.which == 40){ // Down Arrow
+        triggerEvent('inputDownArrow')
+        return false
+      }
+    })
+
+
+    // 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).triggerHandler(eventType, callbackArgs)
+    }
+
+
+    // INITIALIZATION
+
+    refresh()
+  }
+})(jQuery)