uber_select_rails 0.6.0 → 1.0.0

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

@@ -117,6 +117,7 @@ label {
 .uber_select .result.highlighted{
   background-color: #C4E4FF;
   color: inherit;
+  outline: none;
 }
 .uber_select .messages{
   padding: 1px 20px;

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

@@ -68,6 +68,24 @@
   <p>This prepopulated example hides blank options, but still allows the search to be cleared</p>
 </span>
 
+<span class="example">
+  <label for="select">
+  Grouped search with group matching
+  </label>
+  <select data-uber-options='{"matchGroupNames": true}'>
+    <optgroup label="Colours">
+      <option>Red</option>
+      <option>Green</option>
+    </optgroup>
+    <optgroup label="Names">
+      <option>Red</option>
+      <option>Greene</option>
+    </optgroup>
+  </select>
+  <p>This example uses optgroups to separate option types. It allows the search to match against the group names, which
+    causes all results in that group to show.
+  </p>
+</span>
 
 <span class="example">
   <label for="select">
@@ -111,7 +129,6 @@
   </p>
 </span>
 
-
 <span class="example">
   <label for="select">
   Placeholder as blank
@@ -243,17 +260,18 @@
 </span>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-<script src="javascript/string_extensions.js"></script>
-<script src="javascript/search_field.js"></script>
-<script src="javascript/list.js"></script>
-<script src="javascript/output_container.js"></script>
-<script src="javascript/search.js"></script>
-<script src="javascript/pane.js"></script>
 <script src="javascript/uber_search.js"></script>
+<script src="javascript/uber_search/search_field.js"></script>
+<script src="javascript/uber_search/list.js"></script>
+<script src="javascript/uber_search/output_container.js"></script>
+<script src="javascript/uber_search/search_model.js"></script>
+<script src="javascript/uber_search/search.js"></script>
+<script src="javascript/uber_search/pane.js"></script>
 <script src="javascript/jquery.uber-select.js"></script>
 
 <script type="text/javascript">
-$('select').uberSelect({selectCaret: '&#xF078;'})
+jQuery.noConflict()
+jQuery('select').uberSelect({selectCaret: '&#xF078;'})
 </script>
 </body>
 </html>

data/vendor/assets/javascript/uber_select.js

@@ -1 +1 @@
-//= require_tree ./uber_select/javascript
+//= require_directory ./uber_select/javascript

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: uber_select_rails
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Nicholas Jakobsen
-autorequire: 
 bindir: exe
 cert_chain: []
-date: 2022-03-02 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,7 +51,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '10.0'
-description: 
 email:
 - nicholas.jakobsen@gmail.com
 executables: []
@@ -72,19 +70,18 @@ files:
 - vendor/assets/javascript/uber_select/.gitignore
 - vendor/assets/javascript/uber_select/README.md
 - vendor/assets/javascript/uber_select/javascript/jquery.uber-select.js
-- vendor/assets/javascript/uber_select/javascript/list.js
-- vendor/assets/javascript/uber_select/javascript/output_container.js
-- vendor/assets/javascript/uber_select/javascript/pane.js
-- vendor/assets/javascript/uber_select/javascript/search.js
-- vendor/assets/javascript/uber_select/javascript/search_field.js
-- vendor/assets/javascript/uber_select/javascript/string_extensions.js
 - vendor/assets/javascript/uber_select/javascript/uber_search.js
+- vendor/assets/javascript/uber_select/javascript/uber_search/list.js
+- vendor/assets/javascript/uber_select/javascript/uber_search/output_container.js
+- vendor/assets/javascript/uber_select/javascript/uber_search/pane.js
+- vendor/assets/javascript/uber_select/javascript/uber_search/search.js
+- vendor/assets/javascript/uber_select/javascript/uber_search/search_field.js
+- vendor/assets/javascript/uber_select/javascript/uber_search/search_model.js
 - vendor/assets/javascript/uber_select/test.css
 - vendor/assets/javascript/uber_select/test.html
 homepage: https://github.com/culturecode/uber_select_rails
 licenses: []
 metadata: {}
-post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -99,8 +96,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.3
-signing_key: 
+rubygems_version: 3.6.9
 specification_version: 4
 summary: A Rails gem containing a javascript plugin that adds a layer of UI goodness
   overtop of basic HTML select elements

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

@@ -1,122 +0,0 @@
-function List(options) {
-  var context = this
-
-  var view = this.view = $('<ul class="results"></ul>')
-
-
-  // BEHAVIOUR
-
-  // Handle up and down arrow key presses
-  $(options.keypressInput || 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 13: // Enter
-        if (highlightedResult().length) {
-          highlightedResult().click()
-        } else {
-          $(this).trigger('noHighlightSubmit')
-        }
-        return false
-    }
-  })
-
-  // When a list item is hovered
-  $(view).on('mouseenter', '.result:not(.disabled)', 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 role="option" class="result" tabindex="0"></li>').html(datum)
-  }
-
-  this.unhighlightResults = unhighlightResults
-  this.highlightResult = highlightResult
-
-  function stepHighlight(amount, allowUnhighlight){
-    var index = selectableResults().index(highlightedResult())
-    var result = selectableResults()[index + amount]
-
-    if (result || allowUnhighlight){
-      unhighlightResults()
-      highlightResult(result)
-    }
-  }
-
-  function highlightResult(result, options) {
-    result = $(result)
-    options = $.extend({scroll: true}, options)
-
-    if (!result.length) { return }
-
-    result.addClass('highlighted')
-    result.attr("aria-selected", true)
-
-    if (options.scroll){
-      scrollResultIntoView(result)
-    }
-  }
-
-  function unhighlightResults(){
-    highlightedResult().removeClass('highlighted').attr("aria-selected", false)
-  }
-
-  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)
-    }
-  }
-
-  // INITIALIZATION
-  $.extend(this, options) // Allow overriding of functions
-}

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

@@ -1,25 +0,0 @@
-var OutputContainer = function(options){
-  options = $.extend({}, options)
-  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)
-
-  // INITIALIZATION
-
-  setValue()
-
-  // HELPER FUNCTIONS
-
-  function setValue(value){
-    selectedText.html(value || '&nbsp;')
-    view.toggleClass('empty', !value)
-  }
-
-  function setDisabled(boolean) {
-    view.toggleClass('disabled', boolean)
-  }
-
-  // PUBLIC INTERFACE
-
-  $.extend(this, {view: view, setValue: setValue, setDisabled: setDisabled})
-}

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

@@ -1,100 +0,0 @@
-function Pane(options){
-  options = $.extend({
-    trigger: null
-  }, options)
-
-  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, {
-    model:         model,
-    view:          view,
-    addContent:    addContent,
-    removeContent: removeContent,
-    show:          show,
-    hide:          hide,
-    toggle:        toggle,
-    isOpen:        paneIsOpen,
-    isClosed:      paneIsClosed
-  })
-
-
-  // BEHAVIOUR
-
-  // 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()
-      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()
-    $(context).trigger('shown')
-  }
-  function hide(){
-    if (!isOpen) { return }
-    isOpen = false
-    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){
-    return !$(event.target).closest(view).length
-  }
-
-  function isEventOutsideTrigger(event){
-    return !$(event.target).closest(options.trigger).length
-  }
-
-}

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

@@ -1,84 +0,0 @@
-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(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')
-    }
-  })
-
-
-  // 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()
-}

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

@@ -1,8 +0,0 @@
-(function(){
-  // Add a function that makes it easy to escape a string before it is used in a RegExp
-  if (!String.prototype.escapeForRegExp){
-    String.prototype.escapeForRegExp = function(){
-      return this.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    }
-  }
-})()