uber_select_rails 0.4.4 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f2d36958541100b720bfbe57c1254bcb97cf73c5a0adf9cadac4d6144befabf2
-  data.tar.gz: 198a50727d3c91b584c5abbd33bcb415c06d02acd82c45854526f7b8cde17b47
+  metadata.gz: 1e37c667b8e66ed1dda23bb261ff4afd711edd8ada1158a6eee77a44aae2573e
+  data.tar.gz: f51b530782b7e0ea3cd97934de9fe06f91c8fbe1fdb1cfee49ac75867770eb7f
 SHA512:
-  metadata.gz: c73c8c86106767c26c2fc32afac1d46c57dc78ff1d0014c4ca4d4866be8277c745a003d4c77e678b0b41d3f92964848b7e13533e95e3fe010e0df0cfc0dd5716
-  data.tar.gz: 88e29bddfd24bde521540c0040742982acecd1da4116ba1b3bc5a8a9da9703aecad82424a4af86c28565736bfd2e177e68abb9be1ee191180bcf6833736222e8
+  metadata.gz: ba59b1dee8c43c50a6a1df171cddc362ba5b4297f0cbaa58bd0e9d306ab19ae138f121171067be89187cf29d152115db114bfe870ebda34300f5ef73b9508d65
+  data.tar.gz: 64924a5caf7106dc0005a2d93f7fa105f9b00e10a2629c0bced95e833a72554a553db0eb029c32ad1cba71aa78d82d272c21eb89619a80ccfe762f48aae1b80c

data/lib/uber_select_rails/version.rb

@@ -1,3 +1,3 @@
 module UberSelectRails
-  VERSION = "0.4.4"
+  VERSION = "0.5.1"
 end

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

@@ -3,13 +3,16 @@
 UberSelect is a fancy UI on top of a regular `<select>` element.
 
 ## Requirements
+
 Tested on jQuery 1.11.x to 3.3.x
 
 ## Parts
+
 UberSelect is composed of two main parts, an UberSearch that does all the of searching and UI, and an UberSelect which
 is used to connect an UberSearch to a `<select>` element.
 
 ### UberSelect
+
 This is the object that allows an UberSearch and a `<select>` element to work together. The select element can be used
 to control the state of the UberSearch, and vice-versa. This means you can programmatically change the state of the
 select, and UberSearch will update. Users can interact with the UberSearch, and the select will update. This also means
@@ -22,38 +25,46 @@ $('.my_selects').uberSelect(options);
 ```
 
 #### Attributes <a name="UberSearch 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
 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).
 
 - ##### prepopulateSearchOnOpen
+
   Determines whether the search input starts with the selected value in it when the pane is opened.
 
   Default: `false`
 
 - ##### clearSearchClearsSelect
+
   Determines whether the select value should be cleared when the search is cleared.
 
   Default: `false`
 
 - ##### placeholder
+
   Placeholder to show in the selected text area.
 
   Default: `<select>` element attributes `<select placeholder="my placeholder" data-placeholder="my placeholder">`
 
 - ##### dataUrl
+
   A url to pre-fetch select options from. JSON response should be of the form
   `[{text:'option with explicit value', value: 'some value'}, {text:'option with implicit value'}]`. For a custom JSON response, use in conjunction with optionFromDatum.
 
   Default: `null`
 
 - ##### 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.
 
   The function signature is as follows:
+
   ```js
     function(datum) {
       return // a <option> element to represent the select
@@ -63,25 +74,36 @@ as a JSON string. All options on the are passed to the underlying UberSearch, se
    Default: `datum.value` populates the `<option>` value, `datum.text` populates the `<option>` text.
 
 - ##### value
+
   Initialize the UberSearch with this selected value
 
   Default: `<select>` element `value` property
 
+- ##### ariaLabel
+
+  Add an aria-label attribute with this value to the uber_select element.
+
 #### Events Triggered
+
 - ##### uber-select:ready
+
   This fires when the UberSelect has initialized and is ready for user interaction
 
 #### Events Observed
+
 The `<select>` element observes the following events:
 
 - ##### uber-select:refreshOptions
+
   The UberSearch options list will be updated to match the `<select>` element's `<option>` list.
 
 - ##### uber-select:refresh
+
   The UberSearch will update its selected value to match the `<select>` element's. This handler also runs when the
   `<select>` element triggers a `change` event.
 
 ### UberSearch
+
 The UberSearch performs all of the heavy lifting. It creates the UI views, maintains state, and performs the searching.
 It can be instantiated without the use of an UberSelect, which can be useful for situations where the selected value is
 being used in purely in JS, and not being linked to a `<select>` element in a form.
@@ -93,114 +115,143 @@ new UberSearch(data, options);
 ```
 
 #### Data
+
 Data is an array of objects. Each object may have the following properties:
 
 - ##### text
+
   String shown to the user in the list of results. This value is required if *value* is not provided.
 
 - ##### selectedText
+
   String shown to the user in the output container when this option is selected. *optional*
 
 - ##### title
+
   Title text shown to the user when hovering over the result. *optional*
 
 - ##### value
+
   This is matched against the *value* option passed UberSearch and will appear selected if it matches. It is also used to match against search input text when the user searches. This value is required if *text* is not provided.
 
 - ##### matchValue
+
   This overrides the value used to match against search input text when the user searches. *optional*
 
 - ##### visibility
+
   This is used to determine whether the option appears only when searching or only when not searching. Values accepted: `query`, `no-query`. *optional*
 
 - ##### disabled
+
   This is used to determine whether the option appears disabled. *optional*
 
 - ##### group
+
   This is used to visually group options. All options with the same group will appear together. *optional*
 
 #### Methods
 
 - ##### setData(data)
-  Sets the data. `data` should be an Array conforming to the specifications described in <a href="#data">Data</a>
 
+  Sets the data. `data` should be an Array conforming to the specifications described in <a href="#data">Data</a>
 
 #### Options <a name="UberSearch 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.
 
 - ##### value
+
   Sets the initially selected value of the UberSearch. This value should match the `value` property of the desired
   option data.
 
   Default: `null`
 
 - ##### search
+
   Determines whether the search input be shown.
 
   Default: `true`
 
 - ##### clearSearchButton
+
   Sets the text content of clear search button.
 
   Default: `✕`
 
 - ##### selectCaret
+
   Sets the text content of clear select caret.
 
   Default: `⌄`
 
 - ##### hideBlankOption
+
   Sets whether blank options should be hidden automatically.
 
   Default: `false`
 
 - ##### treatBlankOptionAsPlaceholder
+
   Determines whether the `text` property of an option with a blank `value` property should be used as the placeholder
   text if no placeholder is specified.
 
   Default: `false`
 
 - ##### highlightByDefault
+
   Determines whether the first search result be auto-highlighted.
 
   Default: `true`
 
 - ##### minQueryLength
+
   Sets minimum number of characters the user must type before a search will be performed.
 
   Default: `0`
 
 - ##### minQueryMessage
+
   Sets the message shown to the user when the query doesn't exceed the minimum length. `true` for a default message,
   `false` for none, or provide a string to set a custom message.
 
   Default: `true`
 
 - ##### placeholder
+
   Sets the placeholder shown in the selected text area.
 
   Default: `null`
 
 - ##### searchPlaceholder
+
   Sets the placeholder shown in the search input.
 
   Default: `'Type to search'`
 
 - ##### noResultsText
+
   Sets the message shown when there are no results.
 
   Default: `'No Matches Found'`
 
 - ##### noDataText
+
   Sets the text to show when the results list is empty and no search is in progress
 
   Default: `'No options'`
+  
+- ##### searchInputAttributes
+
+  An Object containing attributes to add to the search input element.
 
 - ##### buildResult
+
   A function that is used to build result elements.
 
   The function signature is as follows:
+
   ```js
     function(listOptionData) {
       return // HTML/element to insert into the the results list
@@ -208,10 +259,12 @@ as a JSON string.
   ```
 
 - ##### resultPostprocessor
+
   A function that is run after a result is built and can be used to decorate it. This can be useful when extending the
   functionality of an existing UberSearch implementation.
 
   The function signature is as follows:
+
   ```js
     function(resultsListElement, listOptionData) { }
   ```
@@ -219,50 +272,63 @@ as a JSON string.
   Default: No-op
 
 - ##### onRender
+
   A function to run when the results container is rendered. If the result returns false, the default `select` event
   handler is not run and the event is cancelled.
 
   The function signature is as follows:
+
   ```js
   function(resultsContainer, searchResultsHTML) { }
   ```
 
 - ##### onSelect
+
   A function to run when a result is selected. If the result returns false, the default `select` event handler is not
   run and the event is cancelled.
 
   The function signature is as follows:
+
   ```js
   function(listOptionData, resultsListElement, clickEvent) { }
   ```
 
 - ##### onNoHighlightSubmit
+
   A function to run when a user presses enter without selecting a result.
   Should be used in combination with `highlightByDefault: false`.
 
   The function signature is as follows:
+
   ```js
   function(value) { }
   ```
 
 - ##### outputContainer (Deprecated)
+
   An object that receives the output once a result is selected. Must respond to `setValue(value)` and `view()`. This object serves to
   attach the result list to the DOM at the desired location.
 
 #### Events Triggered
+
 - ##### shown
+
   This fires when the UberSearch pane is opened.
 
 - ##### renderedResults
+
   This fires each time the list of results is updated.
 
 - ##### clear
+
   This fires when the user clicks the clear search button.
 
 - ##### select
+
   This fires when the user selects a result.
 
   The handler function signature is as follows:
+
   ```js
   function(event, [listOptionData, resultsContainer, originalEvent]) { }
   ```

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

@@ -44,7 +44,7 @@
       $(select).on(eventsObserved.refreshOptions, refreshOptionsList)
 
       // When the select value changes
-      $(select).on(eventsObserved.refresh, updateSelectedValue)
+      $(select).on(eventsObserved.refresh, refresh)
 
       // When a result is selected
       $(uberSearch).on('select', function(_, datum){
@@ -139,20 +139,20 @@
       }
 
       function refreshOptionsList(){
-        uberSearch.setDisabled($(select).is(':disabled'))
         uberSearch.setData(dataFromSelect(select))
         updateSelectValue($(select).find('option[selected]').attr('value')) // Read the value of the option that is selected because the <select> element's value is defunct now that we've updated the <option> elements
       }
 
-      // Updates the UberSearch's selected value from the select element's value
-      function updateSelectedValue(){
+      function refresh(){
+        uberSearch.setDisabled($(select).is(':disabled'))
         uberSearch.setValue($(select).val())
       }
 
       function updateSelectValue(value){
         var before = $(select).val()
         $(select).val(value)
-        if (before != value) { $(select).trigger('change') } // Only trigger a change if the value has actually changed
+        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
       }
 
       // Selects the option with an emptystring value, or the first option if there is no blank option

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

@@ -7,7 +7,7 @@ function List(options) {
   // BEHAVIOUR
 
   // Handle up and down arrow key presses
-  $(options.keypressInput).on('keydown', function(event){
+  $(options.keypressInput || view).on('keydown', function(event){
     switch (event.which) {
       case 38: // Up Arrow
         stepHighlight(-1, true)
@@ -50,7 +50,7 @@ function List(options) {
 
   // Can be overridden to format how results are built
   this.buildResult = function(datum){
-    return $('<li></li>').html(datum).addClass('result')
+    return $('<li role="option" class="result" tabindex="0"></li>').html(datum)
   }
 
   this.unhighlightResults = unhighlightResults
@@ -73,6 +73,7 @@ function List(options) {
     if (!result.length) { return }
 
     result.addClass('highlighted')
+    result.attr("aria-selected", true)
 
     if (options.scroll){
       scrollResultIntoView(result)
@@ -80,7 +81,7 @@ function List(options) {
   }
 
   function unhighlightResults(){
-    highlightedResult().removeClass('highlighted')
+    highlightedResult().removeClass('highlighted').attr("aria-selected", false)
   }
 
   function highlightedResult(){

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

@@ -1,6 +1,6 @@
 var OutputContainer = function(options){
   options = $.extend({}, options)
-  var view         = $('<span class="selected_text_container" tabindex=0 role="button"></span>')
+  var view         = $('<span class="selected_text_container" tabindex="0"></span>')
   var selectedText = $('<span class="selected_text"></span>').appendTo(view)
   var selectCaret  = $('<span class="select_caret"></span>').appendTo(view).html(options.selectCaret)
 

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

@@ -3,40 +3,31 @@ function Pane(options){
     trigger: null
   }, options)
 
-  var context = this
-  var model = this.model = {}
-  var isOpen = false
-  var view = this.view = $('<div class="pane"></div>').toggle(isOpen)
+  var context   = this
+  var model     = {}
+  var isOpen    = false
+  var 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})
+  $.extend(this, {
+    model:         model,
+    view:          view,
+    addContent:    addContent,
+    removeContent: removeContent,
+    show:          show,
+    hide:          hide,
+    toggle:        toggle,
+    isOpen:        paneIsOpen,
+    isClosed:      paneIsClosed
+  })
 
 
   // BEHAVIOUR
 
-  if (options.trigger){
-    // Show the pane when the select element is clicked
-    $(options.trigger).on('click', function(event){
-      if ($(options.trigger).hasClass('disabled')) { return }
-
-      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 ($(options.trigger).hasClass('disabled')) { return }
-
-      if (event.which == 13 || event.which == 32){
-        context.show()
-        return false
-      }
-    })
-  }
-
-    // Hide the pane when clicked out
+  // Hide the pane when clicked out
   $(document).on('mousedown', function(event){
     if (isEventOutsidePane(event) && isEventOutsideTrigger(event)){
       context.hide()
@@ -52,13 +43,21 @@ function Pane(options){
   $(document).on('keyup', function(event){
     if (event.which == 27 && isOpen){
       context.hide()
-      options.trigger.focus()
+      return false
     }
   })
 
 
   // HELPER FUNCTIONS
 
+  function paneIsOpen(){
+    return isOpen
+  }
+
+  function paneIsClosed(){
+    return !isOpen
+  }
+
   function addContent(name, content){
     model[name] = content
     innerPane.append(content)
@@ -81,6 +80,13 @@ function Pane(options){
     view.hide()
     $(context).trigger('hidden')
   }
+  function toggle(){
+    if (isOpen) {
+      context.hide()
+    } else {
+      context.show()
+    }
+  }
 
   // returns true if the event originated outside the pane
   function isEventOutsidePane(event){

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

@@ -1,11 +1,15 @@
 function SearchField(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('placeholder', options.placeholder)
+  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)

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

@@ -7,6 +7,7 @@ var UberSearch = function(data, options){
   }
 
   options = $.extend({
+    ariaLabel: null,
     value: null,                                      // Initialize with this selectedValue
     disabled: false,                                  // Initialize with this disabled value
     search: true,                                     // Show the search input
@@ -30,14 +31,22 @@ var UberSearch = function(data, options){
   }, options)
 
   var context          = this
-  var view             = $('<span class="uber_select"></span>')
+  var view             = $('<span class="uber_select" role="listbox"></span>')
   var selectedValue    = options.value // Internally selected value
   var outputContainer  = options.outputContainer || new OutputContainer({selectCaret: options.selectCaret})
-  var searchField      = new SearchField({placeholder: options.searchPlaceholder, clearButton: options.clearSearchButton})
   var resultsContainer = $('<div class="results_container"></div>')
   var messages         = $('<div class="messages"></div>')
-  var pane             = new Pane({trigger: outputContainer.view})
-  var search           = new Search(searchField.input, resultsContainer, {
+  var pane             = new Pane()
+
+  if (options.ariaLabel) { view.attr("aria-label", options.ariaLabel) }
+  
+  var searchField = new SearchField({
+      placeholder: options.searchPlaceholder,
+      clearButton: options.clearSearchButton,
+      searchInputAttributes: options.searchInputAttributes
+  })
+
+  var search = new Search(searchField.input, resultsContainer, {
     model: {
       dataForMatching: dataForMatching,
       minQueryLength: options.minQueryLength,
@@ -48,23 +57,56 @@ var UberSearch = function(data, options){
     view: {
       renderResults: renderResults,
       buildResult: options.buildResult || buildResult,
-      keypressInput: searchField.input
+      keypressInput: options.search ? searchField.input : null
     }
   })
 
 
   // BEHAVIOUR
 
+  // Show the pane when the select element is clicked
+  $(outputContainer.view).on('click', function(event){
+    if (outputContainer.view.hasClass('disabled')) { return }
+
+    pane.show()
+  })
+
+  // Show the pane if the user was tabbed onto the trigger and pressed enter, space, or down arrow
+  $(outputContainer.view).on('keyup', function(event){
+    if (outputContainer.view.hasClass('disabled')) { return }
+
+    if (event.which === 32 || event.which === 40 && pane.isClosed()){
+      pane.show()
+      return false
+    }
+    else if (event.which === 13){ // toggle pane when enter is pressed
+      pane.toggle()
+      return false
+    }
+  })
+
   // When the pane is opened
   $(pane).on('shown', function(){
     search.clear()
-    markSelected()
-    $(searchField.input).focus()
+    markSelected() 
     view.addClass('open')
+   
+    if (options.search) {
+      $(searchField.input).focus()
+    } else {
+      pane.view.find("ul.results li:first").focus()
+    }
 
     triggerEvent(eventsTriggered.shown)
   })
 
+
+  // When the pane is hidden
+  $(pane).on('hidden', function(){
+    view.removeClass('open')
+    view.focus()
+  })
+
   // When the query is changed
   $(search).on('queryChanged', function(){
     updateMessages()
@@ -96,6 +138,8 @@ var UberSearch = function(data, options){
       return
     }
 
+    event.stopPropagation();
+
     setValue(valueFromResult(this))
     pane.hide()
     triggerEvent(eventsTriggered.select, [datum, this, event])
@@ -106,20 +150,13 @@ var UberSearch = function(data, options){
     options.onNoHighlightSubmit($(this).val())
   })
 
-   // When the pane is hidden
-  $(pane).on('hidden', function(){
-    view.removeClass('open')
-  })
-
 
   // INITIALIZATION
 
   setDisabled(options.disabled)
   setData(data)
 
-  if (options.search){
-    pane.addContent('search', searchField.view)
-  }
+  if (options.search) { pane.addContent('search', searchField.view) }
   pane.addContent('messages', messages)
   pane.addContent('results', resultsContainer)
 
@@ -239,7 +276,7 @@ var UberSearch = function(data, options){
   }
 
   function buildResult(datum){
-    var result = $('<li class="result"></li>')
+    var result = $('<li class="result" tabindex="0"></li>')
       .html((options.treatBlankOptionAsPlaceholder ? datum.text || options.placeholder : datum.text) || "&nbsp;")
       .data(datum) // Store the datum so we can get know what the value of the selected item is
 

data/vendor/assets/javascript/uber_select/test.html

@@ -18,7 +18,7 @@
 
 <span class="example">
   <label for="select">
-  search and placeholder
+  Search and placeholder
   </label>
   <select placeholder="Choose a gender">
     <option></option>
@@ -31,6 +31,17 @@
   </p>
 </span>
 
+<span class="example">
+  <label for="select">
+  Search input attributes
+  </label>
+  <select data-uber-options='{"searchInputAttributes": {"aria-label": "This is a test"}}'>
+    <option></option>
+    <option>male</option>
+    <option>female</option>
+  </select>
+  <p>This example includes an aria label attribute for the search input element.</p>
+</span>
 
 <span class="example">
   <label for="select">

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: uber_select_rails
 version: !ruby/object:Gem::Version
-  version: 0.4.4
+  version: 0.5.1
 platform: ruby
 authors:
 - Nicholas Jakobsen
-autorequire:
+autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-04-23 00:00:00.000000000 Z
+date: 2022-02-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,7 +52,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '10.0'
-description:
+description: 
 email:
 - nicholas.jakobsen@gmail.com
 executables: []
@@ -84,7 +84,7 @@ files:
 homepage: https://github.com/culturecode/uber_select_rails
 licenses: []
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -99,8 +99,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.8
-signing_key:
+rubygems_version: 3.2.3
+signing_key: 
 specification_version: 4
 summary: A Rails gem containing a javascript plugin that adds a layer of UI goodness
   overtop of basic HTML select elements