romo 0.18.0 → 0.18.1

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA1: 
-  metadata.gz: ea1f09e9f40345733333214f4eb518f1683931a0
-  data.tar.gz: c809d3cc92caa7e10c23bc3f8a58f514e6451887
 SHA512: 
-  metadata.gz: 034849bad78983b728dcc61face29377213df2e2fd7736a91e4b4a98ea5f3044b98663406745fb6813759c5d178f6aadcfa95012bf8823ff74edeb7a255f6f52
-  data.tar.gz: 0fc89f9fb1967b8fb08dd1a0e652009bdfe9cfe9ba91727887aa98455fd8531b47b7e9426a8fde3a4fd1372fc6c27aaf976eda3c47fd80091a04450b43938118
+  data.tar.gz: 50cbf6926495cdfb0d4f37c8de78223765e090f8a8776ce411f6d82d98a7194bbd0ebd2f75a6c50632018e36f31590794844fa24b327056c4a94215f3a9dcd90
+  metadata.gz: 98362f39c7531bce3483f67ee32f6b5cbd5d2891ddff83af346a313b1f2b45a7fda4c097bd22d61fc2b8433f67891f11799f53d403a86130a691b982f0b0f212
+SHA1: 
+  data.tar.gz: cad251f2088b1bee923e9f1309edc208ef893721
+  metadata.gz: 77d4306dc8c5de5e50c12e15c7089f0b78d5380a

data/assets/css/romo/base.scss

@@ -101,7 +101,7 @@ a.romo-text {
 /* images */
 
 .romo-img-rounded { @include border-radius(6px); }
-.romo-img-circle  { @include border-radius(500px); }
+.romo-img-circle  { @include border-radius(50%); }
 .romo-img-card {
   padding: 3px;
   background-color: $baseBgColor;
@@ -435,8 +435,10 @@ h3 { @include text1; }
 .romo-border2-bottom-left-radius-hover:hover   { @include border2-bottom-left-radius(!important); }
 .romo-rm-border-bottom-left-radius-hover:hover { @include rm-border-bottom-left-radius(!important); }
 
-.romo-border-radius-circle { @include border-radius(500px); }
-.romo-border-radius-circle-hover:hover { @include border-radius(500px); }
+.romo-border-radius-circle             { @include border-radius(50%); }
+.romo-border-radius-circle-hover:hover { @include border-radius(50%); }
+.romo-border-radius-pill               { @include border-radius(500px); }
+.romo-border-radius-pill-hover:hover   { @include border-radius(500px); }
 
 /* spacing */
 

data/assets/css/romo/indicator_text_input.scss

@@ -9,7 +9,6 @@
   display: inline-block;
   position: absolute;
   top: 0px;
-  right: 6px;
   vertical-align: middle;
   cursor: pointer;
 }

data/assets/js/romo/base.js

@@ -275,7 +275,7 @@ var RomoParentChildElems = function() {
   this.elemId   = 0;
   this.elems    = {};
 
-  var childRemovedObserver = new MutationObserver($.proxy(function(mutationRecords) {
+  var parentRemovedObserver = new MutationObserver($.proxy(function(mutationRecords) {
     mutationRecords.forEach($.proxy(function(mutationRecord) {
       if (mutationRecord.type === 'childList' && mutationRecord.removedNodes.length > 0) {
         $.each($(mutationRecord.removedNodes), $.proxy(function(idx, node) {
@@ -285,7 +285,7 @@ var RomoParentChildElems = function() {
     }, this));
   }, this));
 
-  childRemovedObserver.observe($('body')[0], {
+  parentRemovedObserver.observe($('body')[0], {
     childList: true,
     subtree:   true
   });
@@ -296,12 +296,14 @@ RomoParentChildElems.prototype.add = function(parentElem, childElems) {
 }
 
 RomoParentChildElems.prototype.remove = function(nodeElem) {
-  if(nodeElem.data(this.attrName) !== undefined) {
-    this._removeChildElems(nodeElem);  // node is a parent elem itself
+  if (nodeElem.data('romo-parent-removed-observer-disabled') !== true) {
+    if (nodeElem.data(this.attrName) !== undefined) {
+      this._removeChildElems(nodeElem);  // node is a parent elem itself
+    }
+    $.each(nodeElem.find('[data-'+this.attrName+']'), $.proxy(function(idx, parent) {
+      this._removeChildElems($(parent));
+    }, this));
   }
-  $.each(nodeElem.find('[data-'+this.attrName+']'), $.proxy(function(idx, parent) {
-    this._removeChildElems($(parent));
-  }, this));
 }
 
 // private

data/assets/js/romo/currency.js

@@ -0,0 +1,45 @@
+var RomoCurrency = {
+
+  format: function(numberString, opts) {
+    var unFormattedString = RomoCurrency.unFormat(numberString);
+    if (unFormattedString === '') {
+      return '';
+    }
+
+    opts = opts || {};
+    var symbol           = opts.symbol           || '';
+    var thousandsDelim   = opts.thousandsDelm    || ',';
+    var decimalDelim     = opts.decimalDelim     || '.';
+    var numDecimalPlaces = opts.numDecimalPlaces || 2;
+
+    var number   = Number(unFormattedString);
+    var negative = number < 0 ? '-' : '';
+    var u_d      = Math.abs(number).toFixed(numDecimalPlaces).split('.');
+    var units    = (u_d[0] || '').replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1"+thousandsDelim);
+    var decimals = u_d[1] || '';
+
+    return symbol+negative+units+decimalDelim+decimals;
+  },
+
+  unFormat: function(currencyString, opts) {
+    if (currencyString === undefined || currencyString === '') {
+      return '';
+    }
+
+    var numString = currencyString.replace(/[^0-9\.\-]+/g,"");
+    if (numString === '') {
+      return '';
+    }
+
+    var num = Number(numString);
+    if (isNaN(num)) {
+      return '';
+    } else {
+      opts = opts || {};
+      var numDecimalPlaces = opts.numDecimalPlaces || 2;
+
+      return num.toFixed(numDecimalPlaces);
+    }
+  }
+
+}

data/assets/js/romo/currency_text_input.js

@@ -0,0 +1,168 @@
+$.fn.romoCurrencyTextInput = function() {
+  return $.map(this, function(element) {
+    return new RomoCurrencyTextInput(element);
+  });
+}
+
+var RomoCurrencyTextInput = function(element) {
+  this.elem            = $(element);
+  this.hiddenInputElem = undefined;
+
+  this.defaultIndicatorPosition       = 'left';
+  this.defaultInputNameSuffix         = "romo-currency-display"
+  this.defaultFormatThousandsDelim    = ',';
+  this.defaultFormatDecimalDelim      = '.';
+  this.defaultFormatNumDecimalPlaces  = 2;
+
+  this.doInit();
+  this.doBindElem();
+
+  this.elem.trigger('romoCurrencyTextInput:ready', [this]);
+}
+
+RomoCurrencyTextInput.prototype.doInit = function() {
+  // override as needed
+}
+
+RomoCurrencyTextInput.prototype.doBindElem = function() {
+  this.doBindIndicatorTextInput();
+
+  this.hiddenInputElem = this._getHiddenInputElem();
+  this.elem.before(this.hiddenInputElem);
+  this.elem.attr('name', this._getNewInputName());
+
+  this.elem.on('change', $.proxy(function(e) {
+    this.doUpdateInputValue();
+  }, this));
+  this.elem.on('romoCurrencyTextInput:triggerUpdateInputValue', $.proxy(function(e) {
+    this.doUpdateInputValue();
+  }, this));
+
+  this.doUpdateInputValue();
+}
+
+RomoCurrencyTextInput.prototype.doUpdateInputValue = function() {
+  var unFormattedValue = this._unFormatCurrencyValue(this.elem.val());
+  this.hiddenInputElem.val(unFormattedValue);
+  if (this.elem.data('romo-currency-text-input-format-for-currency') !== false) {
+    this.elem.val(this._formatCurrencyValue(unFormattedValue));
+  } else {
+    this.elem.val(unFormattedValue);
+  }
+}
+
+RomoCurrencyTextInput.prototype.doSetValue = function(value) {
+  this.elem.val(value);
+  this.doUpdateInputValue();
+}
+
+RomoCurrencyTextInput.prototype.doBindIndicatorTextInput = function() {
+  this.elem.attr(
+    'data-romo-indicator-text-input-indicator-position',
+    this.elem.data('romo-currency-text-input-indicator-position') || this.defaultIndicatorPosition
+  );
+
+  if (this.elem.data('romo-currency-text-input-indicator') !== undefined) {
+    this.elem.attr(
+      'data-romo-indicator-text-input-indicator',
+      this.elem.data('romo-currency-text-input-indicator')
+    );
+  }
+  if (this.elem.data('romo-currency-text-input-indicator-width-px') !== undefined) {
+    this.elem.attr(
+      'data-romo-indicator-text-input-indicator-width-px',
+      this.elem.data('romo-currency-text-input-indicator-width-px')
+    );
+  }
+  if (this.elem.data('romo-currency-text-input-indicator-padding-px') !== undefined) {
+    this.elem.attr(
+      'data-romo-indicator-text-input-indicator-padding-px',
+      this.elem.data('romo-currency-text-input-indicator-padding-px')
+    );
+  }
+  if (this.elem.data('romo-currency-text-input-elem-display') !== undefined) {
+    this.elem.attr(
+      'data-romo-indicator-text-input-elem-display',
+      this.elem.data('romo-currency-text-input-elem-display')
+    );
+  }
+  if (this.elem.data('romo-currency-text-input-btn-group') !== undefined) {
+    this.elem.attr(
+      'data-romo-indicator-text-input-btn-group',
+      this.elem.data('romo-currency-text-input-btn-group')
+    );
+  }
+
+  this.elem.on('indicatorTextInput:indicatorClick', $.proxy(function(e) {
+    this.elem.trigger('romoCurrencyTextInput:indicatorClick', []);
+  }, this));
+
+  this.elem.on('romoCurrencyTextInput:triggerPlaceIndicator', $.proxy(function(e) {
+    this.elem.trigger('indicatorTextInput:triggerPlaceIndicator', []);
+  }, this));
+  this.elem.on('romoCurrencyTextInput:triggerEnable', $.proxy(function(e) {
+    this.elem.trigger('indicatorTextInput:triggerEnable', []);
+  }, this));
+  this.elem.on('romoCurrencyTextInput:triggerDisable', $.proxy(function(e) {
+    this.elem.trigger('indicatorTextInput:triggerDisable', []);
+  }, this));
+  this.elem.on('romoCurrencyTextInput:triggerShow', $.proxy(function(e) {
+    this.elem.trigger('indicatorTextInput:triggerShow', []);
+  }, this));
+  this.elem.on('romoCurrencyTextInput:triggerHide', $.proxy(function(e) {
+    this.elem.trigger('indicatorTextInput:triggerHide', []);
+  }, this));
+
+  this.elem.romoIndicatorTextInput();
+}
+
+// private
+
+RomoCurrencyTextInput.prototype._formatCurrencyValue = function(sanitizedValue) {
+  return RomoCurrency.format(sanitizedValue, {
+    'thousandsDelim':   this._getFormatThousandsDelim(),
+    'decimalDelim':     this._getFormatDecimalDelim(),
+    'numDecimalPlaces': this._getFormatNumDecimalPlaces()
+  });
+}
+
+RomoCurrencyTextInput.prototype._unFormatCurrencyValue = function(inputValue) {
+  return RomoCurrency.unFormat(inputValue, {
+    'numDecimalPlaces': this._getFormatNumDecimalPlaces()
+  });
+}
+
+RomoCurrencyTextInput.prototype._getFormatThousandsDelim = function() {
+  return (
+    this.elem.data('romo-currency-text-input-format-thousands-delim') ||
+    this.defaultFormatThousandsDelim
+  );
+}
+
+RomoCurrencyTextInput.prototype._getFormatDecimalDelim = function() {
+  return (
+    this.elem.data('romo-currency-text-input-format-decimal-delim') ||
+    this.defaultFormatDecimalDelim
+  );
+}
+
+RomoCurrencyTextInput.prototype._getFormatNumDecimalPlaces = function() {
+  var places = this.elem.data('romo-currency-text-input-format-num-decimal-places');
+  return !isNaN(places = Math.abs(places)) ? places : this.defaultFormatNumDecimalPlaces;
+}
+
+RomoCurrencyTextInput.prototype._getHiddenInputElem = function() {
+  return $('<input type="hidden" name="'+this.elem.attr('name')+'" value="'+this.elem.val()+'">');;
+}
+
+RomoCurrencyTextInput.prototype._getNewInputName = function() {
+  return (
+    this.elem.attr('name')+
+    '-'+
+    (this.elem.data('romo-currency-text-input-name-suffix') || this.defaultInputNameSuffix)
+  );
+}
+
+Romo.onInitUI(function(e) {
+  Romo.initUIElems(e, '[data-romo-currency-text-input-auto="true"]').romoCurrencyTextInput();
+});

data/assets/js/romo/datepicker.js

@@ -32,6 +32,7 @@ RomoDatepicker.prototype.doInit = function() {
 
 RomoDatepicker.prototype.doBindElem = function() {
   this.elem.attr('autocomplete', 'off');
+  this.elem.attr('data-romo-indicator-text-input-indicator-position', "right");
 
   if (this.elem.data('romo-datepicker-indicator') !== undefined) {
     this.elem.attr('data-romo-indicator-text-input-indicator', this.elem.data('romo-datepicker-indicator'));

data/assets/js/romo/indicator_text_input.js

@@ -6,8 +6,10 @@ $.fn.romoIndicatorTextInput = function() {
 
 var RomoIndicatorTextInput = function(element) {
   this.elem = $(element);
-  this.defaultIndicatorClass   = undefined;
-  this.defaultIndicatorWidthPx = 0;
+
+  this.defaultIndicatorClass     = undefined;
+  this.defaultIndicatorPaddingPx = 5;
+  this.defaultIndicatorPosition  = 'right';
 
   this.doInit();
   this.doBindElem();
@@ -75,12 +77,18 @@ RomoIndicatorTextInput.prototype.doPlaceIndicatorElem = function() {
       this._hide(this.indicatorElem);
     }
 
-    var indicatorWidthPx = this.elem.data('romo-indicator-text-input-indicator-width-px') || this.defaultIndicatorWidthPx;
-    // left-side spacing
+    var indicatorPaddingPx = this._getIndicatorPaddingPx();
+    var indicatorWidthPx   = this._getIndicatorWidthPx();
+    var indicatorPosition  = this._getIndicatorPosition();
+
+    // add a pixel to account for the default input border
+    this.indicatorElem.css(indicatorPosition, indicatorPaddingPx+1);
+
+    // left-side padding
     // + indicator width
-    // + right-side spacing
-    var indicatorPaddingPx = 4 + indicatorWidthPx + 4;
-    this.elem.css({'padding-right': indicatorPaddingPx + 'px'});
+    // + right-side padding
+    var inputPaddingPx = indicatorPaddingPx + indicatorWidthPx + indicatorPaddingPx;
+    this.elem.css('padding-'+indicatorPosition, inputPaddingPx+'px');
   }
 }
 
@@ -128,6 +136,27 @@ RomoIndicatorTextInput.prototype._hide = function(elem) {
   elem.css('display', 'none');
 }
 
+RomoIndicatorTextInput.prototype._getIndicatorPaddingPx = function() {
+  return (
+    this.elem.data('romo-indicator-text-input-indicator-padding-px') ||
+    this.defaultIndicatorPaddingPx
+  );
+}
+
+RomoIndicatorTextInput.prototype._getIndicatorWidthPx = function() {
+  return (
+    this.elem.data('romo-indicator-text-input-indicator-width-px') ||
+    parseInt(Romo.getComputedStyle(this.indicatorElem[0], "width"), 10)
+  );
+}
+
+RomoIndicatorTextInput.prototype._getIndicatorPosition = function() {
+  return (
+    this.elem.data('romo-indicator-text-input-indicator-position') ||
+    this.defaultIndicatorPosition
+  );
+}
+
 Romo.onInitUI(function(e) {
   Romo.initUIElems(e, '[data-romo-indicator-text-input-auto="true"]').romoIndicatorTextInput();
 });

data/assets/js/romo/select_dropdown.js

@@ -385,6 +385,7 @@ RomoSelectDropdown.prototype._buildOptionFilter = function() {
     filter.attr('placeholder', this.elem.data('romo-select-dropdown-filter-placeholder'));
   }
   filter.attr('data-romo-indicator-text-input-elem-display', "block");
+  filter.attr('data-romo-indicator-text-input-indicator-position', "right");
   if (this.elem.data('romo-select-dropdown-filter-indicator') !== undefined) {
     filter.attr('data-romo-indicator-text-input-indicator', this.elem.data('romo-select-dropdown-filter-indicator'));
   }

data/assets/js/romo/sortable.js

@@ -14,7 +14,7 @@ var RomoSortable = function(element) {
   this.draggedOverElem = this.dragDirection = this.lastY = null;
 
   this.doInit();
-  this.doBindDraggables();
+  this.doBindDrag();
   this.doInitPlaceholder();
   this._resetGrabClasses();
 
@@ -25,30 +25,43 @@ RomoSortable.prototype.doInit = function() {
   // override as needed
 }
 
-RomoSortable.prototype.doBindDraggables = function() {
+RomoSortable.prototype.doBindDrag = function() {
   this.draggingClass    = this.elem.data('romo-sortable-dragging-class') || '';
   this.dragOverClass    = this.elem.data('romo-sortable-dragover-class') || '';
   this.placeholderClass = this.elem.data('romo-sortable-placeholder-class') || '';
 
-  this.draggableElems = this.elem.find(this.draggableSelector);
-  this.draggableElems.prop('draggable', 'true');
+  this.draggableElems = $();
+  this.doBindDraggableElems(this.elem.find(this.draggableSelector));
+
+  this.elem.on('sortable:bindDraggableElems', $.proxy(this.onBindDraggableElems, this));
 
   this.elem.on('dragenter', $.proxy(this.onDragEnter, this));
   this.elem.on('dragover',  $.proxy(this.onDragOver,  this));
   this.elem.on('dragend',   $.proxy(this.onDragEnd,   this));
   this.elem.on('drop',      $.proxy(this.onDragDrop,  this));
 
-  this.draggableElems.on('dragstart',  $.proxy(this.onDragStart,          this));
-  this.draggableElems.on('dragenter',  $.proxy(this.onDragEnter,          this));
-  this.draggableElems.on('dragover',   $.proxy(this.onDragOver,           this));
-  this.draggableElems.on('dragend',    $.proxy(this.onDragEnd,            this));
-  this.draggableElems.on('drop',       $.proxy(this.onDragDrop,           this));
-  this.draggableElems.on('mousedown',  $.proxy(this.onDraggableMouseDown, this));
+  $('body').on('mouseup', $.proxy(this.onWindowBodyMouseUp, this));
+}
+
+RomoSortable.prototype.onBindDraggableElems = function(e, draggableElems) {
+  this.doBindDraggableElems(draggableElems);
+}
+
+RomoSortable.prototype.doBindDraggableElems = function(draggableElems) {
+  draggableElems.prop('draggable', 'true');
+
+  draggableElems.on('dragstart',  $.proxy(this.onDragStart,          this));
+  draggableElems.on('dragenter',  $.proxy(this.onDragEnter,          this));
+  draggableElems.on('dragover',   $.proxy(this.onDragOver,           this));
+  draggableElems.on('dragend',    $.proxy(this.onDragEnd,            this));
+  draggableElems.on('drop',       $.proxy(this.onDragDrop,           this));
+  draggableElems.on('mousedown',  $.proxy(this.onDraggableMouseDown, this));
 
-  var handleElems = this.draggableElems.find(this.handleSelector);
+  var handleElems = draggableElems.find(this.handleSelector);
   handleElems.on('mousedown', $.proxy(this.onHandleMouseDown, this));
 
-  $('body').on('mouseup', $.proxy(this.onWindowBodyMouseUp, this));
+  this.draggableElems = this.draggableElems.add(draggableElems);
+  this._resetGrabClasses();
 }
 
 RomoSortable.prototype.doInitPlaceholder = function() {
@@ -79,6 +92,18 @@ RomoSortable.prototype.onDragStart = function(e) {
 
   this.draggedElem = $(e.target);
   this.draggedElem.addClass(this.draggingClass);
+
+  // we need to disable Romo's parentRemovedObserver mutation
+  // observer which would remove any child elems (ie modal,
+  // dropdown, tooltip popups).
+  // we don't want any child elems of the draggedElem removed
+  // just b/c it is temporarily removed from the DOM due to
+  // it being dragged.  It will be returned to the DOM once
+  // the drag is finished.
+  // we manually enable the mutation observer for the dragged
+  // elem below after we do the `insertBefore` call.
+  this.draggedElem.data('romo-parent-removed-observer-disabled', true);
+
   this.draggedIndex = this.draggedElem.index();
 
   this.placeholderElem.css({ 'height': this.draggedElem.height() });
@@ -160,6 +185,15 @@ RomoSortable.prototype.onDragDrop = function(e) {
   this.draggedElem.insertBefore(this.placeholderElem);
   this.draggedElem.show();
 
+  // manually enable Romo's parentRemovedObserver mutation
+  // observer which resumes removing any child elems (ie modal,
+  // dropdown, tooltip popups) like normal.
+  // we have to put this in a timeout so the reactor loop has a
+  // chance to run the mutation observer before we re-enable
+  setTimeout($.proxy(function() {
+    this.draggedElem.data('romo-parent-removed-observer-disabled', false);
+  }, this), 1);
+
   var newIndex = this.draggedElem.index();
   if (newIndex !== this.draggedIndex) {
     this.elem.trigger('sortable:change', [this.draggedElem, this]);
@@ -191,13 +225,11 @@ RomoSortable.prototype.onWindowBodyMouseUp = function(e) {
 
 RomoSortable.prototype._resetGrabClasses = function() {
   this.draggableElems.each($.proxy(function(index, item) {
-
     draggableElem = $(item);
     handleElem = draggableElem.find(this.handleSelector);
     if(handleElem.size() === 0){ handleElem = draggableElem; }
     handleElem.addClass('romo-sortable-grab');
     handleElem.removeClass('romo-sortable-grabbing');
-
   }, this));
 }
 

data/lib/romo/dassets.rb

@@ -45,6 +45,7 @@ module Romo::Dassets
       c.combination "js/romo.js", [
         'js/romo/base.js',
         'js/romo/date.js',
+        'js/romo/currency.js',
         'js/romo/word_boundary_filter.js',
         'js/romo/ajax.js',
         'js/romo/onkey.js',
@@ -52,6 +53,7 @@ module Romo::Dassets
         'js/romo/dropdown.js',
         'js/romo/dropdown_form.js',
         'js/romo/indicator_text_input.js',
+        'js/romo/currency_text_input.js',
         'js/romo/select_dropdown.js',
         'js/romo/select.js',
         'js/romo/datepicker.js',

data/lib/romo/version.rb

@@ -1,3 +1,3 @@
 module Romo
-  VERSION = "0.18.0"
+  VERSION = "0.18.1"
 end

data/test/unit/dassets_tests.rb

@@ -47,6 +47,7 @@ module Romo::Dassets
       exp_js_sources = [
         'js/romo/base.js',
         'js/romo/date.js',
+        'js/romo/currency.js',
         'js/romo/word_boundary_filter.js',
         'js/romo/ajax.js',
         'js/romo/onkey.js',
@@ -54,6 +55,7 @@ module Romo::Dassets
         'js/romo/dropdown.js',
         'js/romo/dropdown_form.js',
         'js/romo/indicator_text_input.js',
+        'js/romo/currency_text_input.js',
         'js/romo/select_dropdown.js',
         'js/romo/select.js',
         'js/romo/datepicker.js',

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: romo
 version: !ruby/object:Gem::Version 
-  version: 0.18.0
+  version: 0.18.1
 platform: ruby
 authors: 
 - Kelly Redding
@@ -10,7 +10,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2017-01-10 00:00:00 Z
+date: 2017-01-23 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: assert
@@ -80,6 +80,8 @@ files:
 - assets/css/romo/z_index.scss
 - assets/js/romo/ajax.js
 - assets/js/romo/base.js
+- assets/js/romo/currency.js
+- assets/js/romo/currency_text_input.js
 - assets/js/romo/date.js
 - assets/js/romo/datepicker.js
 - assets/js/romo/dropdown.js