romo 0.19.5 → 0.19.6

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA1: 
-  metadata.gz: 4fc3f8ffd4150f3516e977cc2c65e3fd25862848
-  data.tar.gz: 792b1f359b813c11cb40a595e23cd36aadd7f6e6
 SHA512: 
-  metadata.gz: 112164a4224eb8e7ac852de31606510b95ae4a52063ab9ccb40598e458955b72bcba9d991671f1d649adc770162059b74bc7a3cc25a0ea039a3e134cfb1e618d
-  data.tar.gz: e513bd994b174937fb9c6c5d3aa15c6c03a78020447705ec54c145bfad17ea67b6e5cd2093b6b47e5a614ba05bd84a79558064b98b5dfd26816b239ddd0cd565
+  metadata.gz: 643c9c0e9600c876e1ec481fafc0488260c94f0c99d06a53fbc7abe791b23ff363f0922cf2ba92f605e886df4403bb8b368631f83e080a74949583dccf21675c
+  data.tar.gz: 1dd48f7b1d07b69f3b2e135048ba7565a6b53e1758c08e242e7074d5a2e44fcc8f32ad9f731a3a8bfdbe3b64a4f715460814bda4d43bb74400afd3fd966f0abd
+SHA1: 
+  metadata.gz: 86052336ce3a41a0592c123eb52ad0c8f0a61709
+  data.tar.gz: 8d5fda1c6c5172f7e59664624dffc2830bb70410

data/assets/js/romo/datepicker.js

@@ -178,7 +178,11 @@ RomoDatepicker.prototype.doSelectHighlightedItem = function() {
   this.romoDropdown.doPopupClose();
   this.doSetDate(newValue);
   this.elem.focus();
-  this.elem.trigger('datepicker:itemSelected', [newValue, this.prevValue, this]);
+  this.elem.trigger('datepicker:itemSelected', [newValue, this]);
+  if (newValue !== this.prevValue) {
+    this.elem.trigger('datepicker:newItemSelected', [newValue, this]);
+  }
+  // always publish the item selected events before publishing any change events
   this._triggerSetDateChangeEvent();
 }
 

data/assets/js/romo/option_list_dropdown.js

@@ -63,24 +63,24 @@ RomoOptionListDropdown.prototype.doInit = function() {
   // override as needed
 }
 
-RomoOptionListDropdown.prototype.doSetNewValue = function(newValue) {
+RomoOptionListDropdown.prototype.doSetSelectedItem = function(itemValue) {
   this.selectedItemElem().removeClass('selected');
   this.romoDropdown.bodyElem.find(
-    'LI[data-romo-option-list-dropdown-option-value="'+newValue+'"]'
+    'LI[data-romo-option-list-dropdown-option-value="'+itemValue+'"]'
   ).addClass('selected');
   this.doSetSelectedValueAndText(
-    newValue,
+    this.selectedItemElem().data('romo-option-list-dropdown-option-value'),
     this.selectedItemElem().data('romo-option-list-dropdown-option-display-text')
   );
 }
 
-RomoOptionListDropdown.prototype.doSetSelectedValueAndText = function(newValue, newText) {
+RomoOptionListDropdown.prototype.doSetSelectedValueAndText = function(value, text) {
   // need to use `attr` to persist selected values to the DOM for back button logic
   // to work.  using `data` won't persist changes to DOM and breaks back button logic.
-  this.elem.attr('data-romo-option-list-dropdown-selected-value', newValue);
-  this.elem.attr('data-romo-option-list-dropdown-selected-text',  newText);
+  this.elem.attr('data-romo-option-list-dropdown-selected-value', value);
+  this.elem.attr('data-romo-option-list-dropdown-selected-text',  text);
 
-  this.prevValue = newValue;
+  this.prevValue = value;
 }
 
 /*
@@ -354,12 +354,15 @@ RomoOptionListDropdown.prototype._selectHighlightedItem = function() {
   if (curr.length !== 0) {
     var prevValue = this.prevValue;
     var newValue  = curr.data('romo-option-list-dropdown-option-value');
+    var newText   = curr.data('romo-option-list-dropdown-option-display-text');
 
     this.romoDropdown.doPopupClose();
-    this.elem.trigger('romoOptionListDropdown:itemSelected', [newValue, prevValue, this]);
 
+    this.elem.trigger('romoOptionListDropdown:itemSelected', [newValue, newText, this]);
     if (newValue !== prevValue) {
-      this.doSetNewValue(newValue);
+      this.doSetSelectedItem(newValue);
+      // always publish the item selected events before publishing any change events
+      this.elem.trigger('romoOptionListDropdown:newItemSelected', [newValue, newText, this]);
       this.elem.trigger('romoOptionListDropdown:change', [newValue, prevValue, this]);
     }
   }

data/assets/js/romo/picker.js

@@ -16,7 +16,15 @@ var RomoPicker = function(element) {
 
   this.doInit();
   this._bindElem();
-  this.doRefreshUI();
+
+  var presetVal = this.elem[0].value;
+  if (presetVal !== '') {
+    this.doSetValue(presetVal);
+  } else if (this.elem.data('romo-picker-empty-option') === true) {
+    this.doSetValueAndText('', this.elem.data('romo-picker-empty-option-display-text') || '');
+  } else {
+    this.doSetValueAndText('', '');
+  }
 
   if (this.elem.attr('id') !== undefined) {
     $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
@@ -25,11 +33,7 @@ var RomoPicker = function(element) {
   }
 
   $(window).on("pageshow", $.proxy(function(e) {
-    var selectedVal = this.romoOptionListDropdown.selectedItemValue();
-    if (selectedVal !== this.elem[0].value) {
-      var selectedText = this.romoOptionListDropdown.selectedItemText();
-      this.doSetSelectedValueAndText(selectedVal, selectedText);
-    }
+    this._refreshUI();
   }, this));
 
   this.elem.on('romoPicker:triggerSetValue', $.proxy(function(e, value) {
@@ -43,14 +47,6 @@ RomoPicker.prototype.doInit = function() {
   // override as needed
 }
 
-RomoPicker.prototype.doRefreshUI = function() {
-  var text = this.romoOptionListDropdown.selectedItemText();
-  if (text === '') {
-    text = ' '
-  }
-  this.romoOptionListDropdown.elem.find('.romo-picker-text').html(text);
-}
-
 RomoPicker.prototype.doSetValue = function(value) {
   $.ajax({
     type:    'GET',
@@ -58,17 +54,20 @@ RomoPicker.prototype.doSetValue = function(value) {
     data:    { 'values': value },
     success: $.proxy(function(data, status, xhr) {
       if (data[0] !== undefined) {
-        this.doSetSelectedValueAndText(data[0].value, data[0].displayText);
+        this.doSetValueAndText(data[0].value, data[0].displayText);
+      } else  if (this.elem.data('romo-picker-empty-option') === true) {
+        this.doSetValueAndText('', this.elem.data('romo-picker-empty-option-display-text') || '');
       } else {
-        this.doSetSelectedValueAndText('', '');
+        this.doSetValueAndText('', '');
       }
     }, this),
   });
 }
 
-RomoPicker.prototype.doSetSelectedValueAndText = function(value, text) {
+RomoPicker.prototype.doSetValueAndText = function(value, text) {
   this.romoOptionListDropdown.doSetSelectedValueAndText(value, text);
-  this._setNewValue(value);
+  this._setValueAndText(value, text);
+  this._refreshUI();
 }
 
 /* private */
@@ -88,11 +87,6 @@ RomoPicker.prototype._bindElem = function() {
   }, this));
 
   this.romoOptionListDropdown.doSetListItems(this.defaultOptionItems);
-
-  var presetVal = this.elem[0].value;
-  if (presetVal !== '') {
-    this.doSetValue(presetVal);
-  }
 }
 
 RomoPicker.prototype._bindOptionListDropdown = function() {
@@ -119,12 +113,16 @@ RomoPicker.prototype._bindOptionListDropdown = function() {
       this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
     }
   }, this));
-  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:itemSelected', $.proxy(function(e, newValue, prevValue, optionListDropdown) {
+  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:itemSelected', $.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
     this.romoOptionListDropdown.elem.focus();
-    this.elem.trigger('romoPicker:itemSelected', [newValue, prevValue, this]);
+    this.elem.trigger('romoPicker:itemSelected', [itemValue, itemDisplayText, this]);
+  }, this));
+  this.romoOptionListDropdown.elem.on('romoOptionListDropdown:newItemSelected', $.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
+    this._setValueAndText(itemValue, itemDisplayText);
+    this._refreshUI();
+    this.elem.trigger('romoPicker:newItemSelected', [itemValue, itemDisplayText, this]);
   }, this));
   this.romoOptionListDropdown.elem.on('romoOptionListDropdown:change', $.proxy(function(e, newValue, prevValue, optionListDropdown) {
-    this._setNewValue(newValue);
     this.elem.trigger('change');
     this.elem.trigger('romoPicker:change', [newValue, prevValue, this]);
   }, this));
@@ -250,7 +248,7 @@ RomoPicker.prototype._buildDefaultOptionItems = function() {
     items.push({
       'type':        'option',
       'value':       '',
-      'displayText': '',
+      'displayText': (this.elem.data('romo-picker-empty-option-display-text') || ''),
       'displayHtml': ' '
     });
   }
@@ -287,6 +285,27 @@ RomoPicker.prototype._buildCustomOptionItem = function(value) {
   };
 }
 
+RomoPicker.prototype._setValueAndText = function(value, text) {
+  this.elem[0].value = value;
+
+  // store the display text on the DOM to compliment the value being stored on the
+  // DOM via the elem above.  need to use `attr` to persist selected values to the
+  // DOM for back button logic to work.  using `data` won't persist changes to DOM
+  // and breaks how the component deals with back-button behavior.
+  this.elem.attr('data-romo-picker-display-text', text);
+}
+
+RomoPicker.prototype._refreshUI = function() {
+  // need to use `attr` so it will always read from the DOM
+  // using `data` works the first time but does some elem caching or something
+  // so it won't work subsequent times.
+  var text = this.elem.attr('data-romo-picker-display-text');
+  if (text === '') {
+    text = ' '
+  }
+  this.romoOptionListDropdown.elem.find('.romo-picker-text').html(text);
+}
+
 RomoPicker.prototype._onCaretClick = function(e) {
   if (this.elem.prop('disabled') === false) {
     this.romoOptionListDropdown.elem.focus();
@@ -294,11 +313,6 @@ RomoPicker.prototype._onCaretClick = function(e) {
   }
 }
 
-RomoPicker.prototype._setNewValue = function(newValue) {
-  this.elem[0].value = newValue;
-  this.doRefreshUI();
-}
-
 RomoPicker.prototype._getCaretPaddingPx = function() {
   return (
     this.elem.data('romo-picker-caret-padding-px') ||

data/assets/js/romo/select.js

@@ -13,7 +13,8 @@ var RomoSelect = function(element) {
 
   this.doInit();
   this._bindElem();
-  this.doRefreshUI();
+
+  this.doSetValue(this.elem[0].value);
 
   if (this.elem.attr('id') !== undefined) {
     $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
@@ -22,10 +23,7 @@ var RomoSelect = function(element) {
   }
 
   $(window).on("pageshow", $.proxy(function(e) {
-    var selectedVal = this.romoSelectDropdown.selectedItemValue();
-    if (selectedVal !== this.elem[0].value) {
-      this.doSetValue(selectedVal);
-    }
+    this._refreshUI();
   }, this));
 
   this.elem.on('select:triggerSetValue', $.proxy(function(e, value) {
@@ -39,17 +37,10 @@ RomoSelect.prototype.doInit = function() {
   // override as needed
 }
 
-RomoSelect.prototype.doRefreshUI = function() {
-  var text = this.romoSelectDropdown.selectedItemText();
-  if (text === '') {
-    text = ' '
-  }
-  this.romoSelectDropdown.elem.find('.romo-select-text').html(text);
-}
-
 RomoSelect.prototype.doSetValue = function(value) {
-  this.romoSelectDropdown.doSetNewValue(value);
-  this._setNewValue(value);
+  this.romoSelectDropdown.doSetSelectedItem(value);
+  this._setValue(value);
+  this._refreshUI();
 }
 
 /* private */
@@ -66,12 +57,6 @@ RomoSelect.prototype._bindElem = function() {
   this.elem.on('select:triggerPopupClose', $.proxy(function(e) {
     this.romoSelectDropdown.elem.trigger('selectDropdown:triggerPopupClose', []);
   }, this));
-
-
-  var presetVal = this.elem[0].value;
-  if (presetVal !== '') {
-    this.doSetValue(presetVal);
-  }
 }
 
 RomoSelect.prototype._bindSelectDropdown = function() {
@@ -87,12 +72,16 @@ RomoSelect.prototype._bindSelectDropdown = function() {
     this.elem.trigger('select:dropdown:popupClose', [dropdown, this]);
   }, this));
 
-  this.romoSelectDropdown.elem.on('selectDropdown:itemSelected', $.proxy(function(e, newValue, prevValue, selectDropdown) {
+  this.romoSelectDropdown.elem.on('selectDropdown:itemSelected', $.proxy(function(e, itemValue, itemDisplayText, selectDropdown) {
     this.romoSelectDropdown.elem.focus();
-    this.elem.trigger('select:itemSelected', [newValue, prevValue, this]);
+    this.elem.trigger('select:itemSelected', [itemValue, itemDisplayText, this]);
+  }, this));
+  this.romoSelectDropdown.elem.on('selectDropdown:newItemSelected', $.proxy(function(e, itemValue, itemDisplayText, selectDropdown) {
+    this._setValue(itemValue);
+    this._refreshUI();
+    this.elem.trigger('select:newItemSelected', [itemValue, itemDisplayText, this]);
   }, this));
   this.romoSelectDropdown.elem.on('selectDropdown:change', $.proxy(function(e, newValue, prevValue, selectDropdown) {
-    this._setNewValue(newValue);
     this.elem.trigger('change');
     this.elem.trigger('select:change', [newValue, prevValue, this]);
   }, this));
@@ -189,6 +178,24 @@ RomoSelect.prototype._buildSelectDropdownElem = function() {
   return romoSelectDropdownElem;
 }
 
+RomoSelect.prototype._setValue = function(value) {
+  var prevOptElem = this.elem.find('OPTION[value="'+this.elem[0].value+'"]');
+  var newOptElem  = this.elem.find('OPTION[value="'+value+'"]');
+
+  prevOptElem.removeAttr('selected');
+  prevOptElem.prop('selected', false);
+  newOptElem.attr('selected', 'selected');
+  newOptElem.prop('selected', true);
+}
+
+RomoSelect.prototype._refreshUI = function() {
+  var text = this.elem.find('OPTION[selected="selected"]').text().trim();
+  if (text === '') {
+    text = ' '
+  }
+  this.romoSelectDropdown.elem.find('.romo-select-text').html(text);
+}
+
 RomoSelect.prototype._onCaretClick = function(e) {
   if (this.elem.prop('disabled') === false) {
     this.romoSelectDropdown.elem.focus();
@@ -196,11 +203,6 @@ RomoSelect.prototype._onCaretClick = function(e) {
   }
 }
 
-RomoSelect.prototype._setNewValue = function(newValue) {
-  this.elem[0].value = newValue;
-  this.doRefreshUI();
-}
-
 RomoSelect.prototype._getCaretPaddingPx = function() {
   return (
     this.elem.data('romo-select-caret-padding-px') ||

data/assets/js/romo/select_dropdown.js

@@ -59,8 +59,8 @@ RomoSelectDropdown.prototype.doInit = function() {
   // override as needed
 }
 
-RomoSelectDropdown.prototype.doSetNewValue = function(newValue) {
-  this.romoOptionListDropdown.doSetNewValue(newValue);
+RomoSelectDropdown.prototype.doSetSelectedItem = function(newValue) {
+  this.romoOptionListDropdown.doSetSelectedItem(newValue);
 }
 
 /* private */
@@ -93,8 +93,24 @@ RomoSelectDropdown.prototype._bindElem = function() {
   this.elem.on('romoOptionListDropdown:dropdown:popupClose', $.proxy(function(e, dropdown) {
     this.elem.trigger('selectDropdown:dropdown:popupClose', [dropdown, this]);
   }, this));
-  this.elem.on('romoOptionListDropdown:itemSelected', $.proxy(function(e, newValue, prevValue, romoOptionListDropdown) {
-    this.elem.trigger('selectDropdown:itemSelected', [newValue, prevValue, this]);
+  this.elem.on('romoOptionListDropdown:itemSelected', $.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
+    this.elem.trigger('selectDropdown:itemSelected', [itemValue, itemDisplayText, this]);
+  }, this));
+  this.elem.on('romoOptionListDropdown:newItemSelected', $.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
+    var custOptElem = this.optionElemsParent.find('OPTION[data-romo-select-dropdown-custom-option="true"]');
+    if (this.optionElemsParent.find('OPTION[value="'+itemValue+'"]').length === 0){
+      // a custom value is being selected. add a custom option elem and update its value/text
+      if (custOptElem.length === 0) {
+        this.optionElemsParent.append('<option data-romo-select-dropdown-custom-option="true"></option>');
+        custOptElem = this.optionElemsParent.find('OPTION[data-romo-select-dropdown-custom-option="true"]');
+      }
+      custOptElem.attr('value', itemValue);
+      custOptElem.text(itemDisplayText);
+    } else if (custOptElem.length !== 0) {
+      // a non custom value is being selected. remove any existing custom option
+      custOptElem.remove();
+    }
+    this.elem.trigger('selectDropdown:newItemSelected', [itemValue, itemDisplayText, this]);
   }, this));
   this.elem.on('romoOptionListDropdown:change', $.proxy(function(e, newValue, prevValue, romoOptionListDropdown) {
     this.elem.trigger('selectDropdown:change', [newValue, prevValue, this]);
@@ -114,7 +130,7 @@ RomoSelectDropdown.prototype._bindElem = function() {
   this.romoOptionListDropdown = this.elem.romoOptionListDropdown()[0];
 
   this.elem.on('romoOptionListDropdown:filterChange', $.proxy(function(e, filterValue, romoOptionListDropdown) {
-    var elems    = this.optionElemsParent.find('option');
+    var elems    = this.optionElemsParent.find('OPTION');
     var wbFilter = new RomoWordBoundaryFilter(filterValue, elems, function(elem) {
       // The romo word boundary filter by default considers a space, "-" and "_"
       // as word boundaries.  We want to also consider other non-word characters
@@ -133,10 +149,23 @@ RomoSelectDropdown.prototype._bindElem = function() {
     }
   }, this));
 
+  this._sanitizeOptions();
   this._setListItems();
   this.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
 }
 
+RomoSelectDropdown.prototype._sanitizeOptions = function() {
+  // set any options without a value to value=""
+  // all options are required to have a value for things to work
+  // this and the select component assume value attrs for all options
+  $.each(this.optionElemsParent.find('OPTION'), $.proxy(function(idx, optionNode) {
+    var optElem = $(optionNode);
+    if (optElem.attr('value') === undefined) {
+      optElem.attr('value', '');
+    }
+  }, this));
+}
+
 RomoSelectDropdown.prototype._setListItems = function() {
   var optElems = this.optionElemsParent.children(this.optionElemSelector);
   var items    = this._buildOptionListItems(optElems).concat(this._buildCustomOptionItems());

data/lib/romo/version.rb

@@ -1,3 +1,3 @@
 module Romo
-  VERSION = "0.19.5"
+  VERSION = "0.19.6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: romo
 version: !ruby/object:Gem::Version 
-  version: 0.19.5
+  version: 0.19.6
 platform: ruby
 authors: 
 - Kelly Redding
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2017-08-23 00:00:00 Z
+date: 2017-08-25 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: assert