uber_select_rails 0.1.8 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c33585944dd942302f745e6ffdcff2406dd755568ead6ecb195df26fc8abfb2
-  data.tar.gz: f311a4e680d52a839a6fcb2ef3fe4ab28d16ff6f355c15af6383e6eb3d6c81db
+  metadata.gz: 8c03ef32585a000f449ad3851d5a90da08a0ec646c3bae0fddb335c67522062d
+  data.tar.gz: 36c973de206ac86363ceed385a516b2f0cc3ba396e3723501d23e984b666910c
 SHA512:
-  metadata.gz: 462aed1760ab381a3ef0277301b6540c5127fe2c7eca293816288ac8674f44d372346bb05ad3a723ee0bbd7c2e7038d2ef01b286b26795bf7246b5978b505109
-  data.tar.gz: 6beab32309f9d49e26f572eff928002040d053c1ca9d1f49a740597af39c5a1f0da0fc07c5d2b9afcfcd306c1714f328266f99d0b08b03e77f1f858218430f03
+  metadata.gz: 7701b85c337519d3694ddde32fe59bf779ca762bbd874b6cb34363d9ab8194bae46e922c866928eced917179eadfc524485337609e6be19d2d9e40e1af7ff464
+  data.tar.gz: 6edaa218f7e0e43bcf72959fd24bd0577c890704e156b61e6618cca6ed4b4121b5b272490d1ce147e4a12bd540c80b77efce8d6f1e8546950bb965cdd1c5d7f5

data/lib/uber_select_rails/version.rb

@@ -1,3 +1,3 @@
 module UberSelectRails
-  VERSION = "0.1.8"
+  VERSION = "0.4.1"
 end

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

@@ -21,6 +21,10 @@ you can use UberSelect to gussy up forms, without changing any of the underlying
 $('.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).
@@ -94,6 +98,12 @@ 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.
 
@@ -103,9 +113,17 @@ Data is an array of objects. Each object may have the following properties:
 - ##### 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>
+
 
 #### 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

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

@@ -14,12 +14,13 @@
       var options = $.extend({
         prepopulateSearchOnOpen: false,                                                   // Should the search input start with the selected value in it when the pane is opened?
         clearSearchClearsSelect: false,                                                   // Should the select value be cleared When the search is cleared?
+        disabled: $(select).is(':disabled'),                                              // Whether the select is currently disabled
         placeholder: $(select).attr('placeholder') || $(select).attr('data-placeholder'), // Placeholder to show in the selected text area
         dataUrl: null,                                                                    // A url to pre-fetch select options from, see optionsFromData for data format
         optionFromDatum: optionFromDatum,                                                 // A function to create select options
         value: $(select).val()                                                            // Initialize the UberSearch with this selected value
       }, opts, $(select).data('uber-options'))
-
+      var uberAttributes = $(select).data('uber-attributes');                             // Attributes defined as data-uber-attributes on the original select element. These will be added as attributes on the uberSelect element.
       var uberSearch = this.uberSearch = new UberSearch(dataFromSelect(select), options)
 
 
@@ -52,6 +53,10 @@
 
       // INITIALIZATION
 
+      if (uberAttributes) {
+        uberSearch.view.attr(uberAttributes)
+      }
+
       uberSearch.view.insertBefore(select).append(select)
       hideSelect()
       if (options.dataUrl) {
@@ -78,7 +83,10 @@
           // This is optimized for performance and does not use jQuery convenience methods. Seems to be about 30% faster loading during non-scientific tests.
           datum = {
             text: option.textContent,
+            selectedText: getAttribute(option, 'data-selected-text'),
             value: getAttribute(option, 'value'),
+            title: getAttribute(option, 'title'),
+            disabled: getAttribute(option, 'disabled'),
             matchValue: getAttribute(option, 'data-match-value'),
             visibility: getAttribute(option, 'data-visibility'),
             element: option
@@ -130,6 +138,7 @@
       }
 
       function refreshOptionsList(){
+        uberSearch.setDisabled($(select).is(':disabled'))
         uberSearch.setData(dataFromSelect(select))
         updateSelectedValue()
       }

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

@@ -26,7 +26,7 @@ function List(options) {
   })
 
   // When a list item is hovered
-  $(view).on('mouseenter', '.result', function(){
+  $(view).on('mouseenter', '.result:not(.disabled)', function(){
     unhighlightResults()
     highlightResult(this, {scroll: false})
   })
@@ -57,8 +57,8 @@ function List(options) {
   this.highlightResult = highlightResult
 
   function stepHighlight(amount, allowUnhighlight){
-    var index = visibleResults().index(highlightedResult())
-    var result = visibleResults()[index + amount]
+    var index = selectableResults().index(highlightedResult())
+    var result = selectableResults()[index + amount]
 
     if (result || allowUnhighlight){
       unhighlightResults()
@@ -66,19 +66,16 @@ function List(options) {
     }
   }
 
-  function highlightResult(result, options){
+  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')
+    result.addClass('highlighted')
 
-      if (options.scroll){
-        scrollResultIntoView(visibleResult)
-      }
+    if (options.scroll){
+      scrollResultIntoView(result)
     }
   }
 
@@ -90,6 +87,10 @@ function List(options) {
     return results().filter('.highlighted')
   }
 
+  function selectableResults(){
+    return visibleResults().not('.disabled')
+  }
+
   function visibleResults(){
     return results().not('.hidden')
   }

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

@@ -15,7 +15,11 @@ var OutputContainer = function(options){
     view.toggleClass('empty', !value)
   }
 
+  function setDisabled(boolean) {
+    view.toggleClass('disabled', boolean)
+  }
+
   // PUBLIC INTERFACE
 
-  $.extend(this, {view: view, setValue: setValue})
+  $.extend(this, {view: view, setValue: setValue, setDisabled: setDisabled})
 }

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

@@ -20,11 +20,15 @@ function Pane(options){
   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

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

@@ -8,7 +8,8 @@ var UberSearch = function(data, options){
 
   options = $.extend({
     value: null,                                      // Initialize with this selectedValue
-    search:true,                                      // Show the search input
+    disabled: false,                                  // Initialize with this disabled value
+    search: true,                                     // Show the search input
     clearSearchButton:'✕',                     // Text content of clear search button
     selectCaret: '⌄',                          // Text content of select caret
     hideBlankOption: false,                           // Should blank options be hidden automatically?
@@ -87,7 +88,7 @@ var UberSearch = function(data, options){
   })
 
   // When a search result is chosen
-  resultsContainer.on('click', '.result', function(event){
+  resultsContainer.on('click', '.result:not(.disabled)', function(event){
     var datum = $(this).data()
 
     if (options.onSelect(datum, this, event) === false) {
@@ -113,6 +114,7 @@ var UberSearch = function(data, options){
 
   // INITIALIZATION
 
+  setDisabled(options.disabled)
   setData(data)
 
   if (options.search){
@@ -150,6 +152,11 @@ var UberSearch = function(data, options){
     markSelected()
   }
 
+  // Enables or disables UberSearch
+  function setDisabled(boolean){
+    outputContainer.setDisabled(boolean)
+  }
+
   // Updates the enhanced select with the text of the selected result
   function setSelectedText(text){
     if (text) {
@@ -236,6 +243,9 @@ var UberSearch = function(data, options){
       .html((options.treatBlankOptionAsPlaceholder ? datum.text || options.placeholder : datum.text) || " ")
       .data(datum) // Store the datum so we can get know what the value of the selected item is
 
+    if (datum.title) { result.attr('title', datum.title) }
+    if (datum.disabled) { result.addClass('disabled') }
+
     options.resultPostprocessor(result, datum)
 
     return result
@@ -253,7 +263,7 @@ var UberSearch = function(data, options){
     if (selected) {
       search.highlightResult(selected)
     } else if (options.highlightByDefault) {
-      search.highlightResult(results.not('.hidden').first())
+      search.highlightResult(results.not('.hidden').not('.disabled').first())
     }
   }
 
@@ -279,7 +289,11 @@ var UberSearch = function(data, options){
   }
 
   function textFromValue(value){
-    return $.map(data, function(datum){ if (datum.value == value) return datum.text })[0]
+    return $.map(data, function(datum) {
+      if (datum.value == value)  {
+        return datum.selectedText || datum.text
+      }
+    })[0]
   }
 
   function updateMessages(){
@@ -311,5 +325,5 @@ var UberSearch = function(data, options){
 
   // PUBLIC INTERFACE
 
-  $.extend(this, {view:view,  searchField:searchField, setValue:setValue, setData:setData, options:options})
+  $.extend(this, {view:view,  searchField:searchField, setValue:setValue, setData:setData, setDisabled:setDisabled, options:options})
 }

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

@@ -39,6 +39,10 @@ label {
   text-overflow: ellipsis;
   position: relative; /* Contain caret */
 }
+.uber_select .selected_text_container.disabled{
+  cursor: default;
+  opacity: 0.5;
+}
 .uber_select .selected_text.empty{
   color: #aaa;
 }
@@ -103,6 +107,10 @@ label {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.uber_select .result.disabled{
+  cursor: default;
+  opacity: 0.5;
+}
 .uber_select .result.selected{
   font-weight: bold;
 }

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

@@ -167,6 +167,70 @@
   </p>
 </span>
 
+<span class="example">
+  <label for="select">
+  Disabled Options
+  </label>
+  <select>
+    <option></option>
+    <option>Jimmy Johnson</option>
+    <option>Amanda Hugginkiss</option>
+    <option disabled="disabled">Cosmo Kramer</option>
+    <option>Bob Zickowski</option>
+    <option>Nicholas Cage</option>
+    <option>Queen Latifah</option>
+  </select>
+  <p>This example has a disabled option that should not highlight or be selectable.</p>
+</span>
+
+<span class="example">
+  <label for="select">
+  Disabled Select
+  </label>
+  <select disabled="disabled">
+    <option></option>
+    <option>Jimmy Johnson</option>
+    <option>Amanda Hugginkiss</option>
+    <option>Cosmo Kramer</option>
+    <option>Bob Zickowski</option>
+    <option>Nicholas Cage</option>
+    <option>Queen Latifah</option>
+  </select>
+  <p>This example has a disabled select that should disable the entire UI.</p>
+</span>
+
+<span class="example">
+  <label for="select">
+  Selected Text
+  </label>
+  <select>
+    <option></option>
+    <option>Jimmy Johnson</option>
+    <option data-selected-text="Good Choice!">Custom Selected Text</option>
+    <option>Cosmo Kramer</option>
+    <option>Bob Zickowski</option>
+    <option>Nicholas Cage</option>
+    <option>Queen Latifah</option>
+  </select>
+  <p>This example has an option with <code>data-selected-text</code> that should show custom text in the output container when selected.</p>
+</span>
+
+<span class="example">
+  <label for="select">
+  Title Attribute
+  </label>
+  <select>
+    <option></option>
+    <option>Jimmy Johnson</option>
+    <option title="Cooltip!">Option with Title</option>
+    <option>Cosmo Kramer</option>
+    <option>Bob Zickowski</option>
+    <option>Nicholas Cage</option>
+    <option>Queen Latifah</option>
+  </select>
+  <p>This example has an option with a <code>title</code> attribute that should show as a tooltip.</p>
+</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>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: uber_select_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.8
+  version: 0.4.1
 platform: ruby
 authors:
 - Nicholas Jakobsen
-autorequire: 
+autorequire:
 bindir: exe
 cert_chain: []
-date: 2019-10-28 00:00:00.000000000 Z
+date: 2020-09-23 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,9 +99,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.9
-signing_key: 
+rubygems_version: 3.0.8
+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