assets/js/romo/indicator_text_input.js in romo-0.19.3 vs assets/js/romo/indicator_text_input.js in romo-0.19.4

@@ -10,20 +10,45 @@
   this.defaultIndicatorClass     = undefined;
   this.defaultIndicatorPaddingPx = 5;
   this.defaultIndicatorPosition  = 'right';
 
   this.doInit();
-  this.doBindElem();
+  this._bindElem();
 
   this.elem.trigger('indicatorTextInput:ready', [this]);
 }
 
 RomoIndicatorTextInput.prototype.doInit = function() {
   // override as needed
 }
 
-RomoIndicatorTextInput.prototype.doBindElem = function() {
+RomoIndicatorTextInput.prototype.doEnable = function() {
+  this.elem.prop('disabled', false);
+  this.elem.removeClass('disabled');
+  this.indicatorElem.removeClass('disabled');
+}
+
+RomoIndicatorTextInput.prototype.doDisable = function() {
+  this.elem.prop('disabled', true);
+  this.elem.addClass('disabled');
+  this.indicatorElem.addClass('disabled');
+}
+
+RomoIndicatorTextInput.prototype.doShow = function() {
+  this._show(this.elem);
+  this._show(this.indicatorElem);
+  this._placeIndicatorElem();
+}
+
+RomoIndicatorTextInput.prototype.doHide = function() {
+  this._hide(this.elem);
+  this._hide(this.indicatorElem);
+}
+
+/* private */
+
+RomoIndicatorTextInput.prototype._bindElem = function() {
   var elemWrapper = $('<div class="romo-indicator-text-input-wrapper"></div>');
   elemWrapper.css({'display': (this.elem.data('romo-indicator-text-input-elem-display') || 'inline-block')});
   if (this.elem.data('romo-indicator-text-input-btn-group') === true) {
     elemWrapper.addClass('romo-btn-group');
   }
@@ -41,18 +66,33 @@
   }, this), 1);
 
   this.indicatorElem = $();
   var indicatorClass = this.elem.data('romo-indicator-text-input-indicator') || this.defaultIndicatorClass;
   if (indicatorClass !== undefined && indicatorClass !== 'none') {
-    this.indicatorElem = $('<i class="romo-indicator-text-input-indicator '+indicatorClass+'"></i>');
+    this.indicatorElem = $('<div class="romo-indicator-text-input-indicator"><div><i class="'+indicatorClass+'"></i></div></div>');
     this.elem.after(this.indicatorElem);
-    this.indicatorElem.on('click', $.proxy(this.onIndicatorClick, this));
-    this.doPlaceIndicatorElem();
+    this.indicatorElem.on('click', $.proxy(this._onIndicatorClick, this));
+    this._placeIndicatorElem();
 
+    this.indicatorIconContainerElem = this.indicatorElem.find('div');
+    if (this.elem.data('romo-indicator-text-input-indicator-basis-size') !== undefined) {
+      this.indicatorIconContainerElem.attr(
+        'data-romo-indicator-basis-size',
+        this.elem.data('romo-indicator-text-input-indicator-basis-size')
+      )
+    }
+    this.indicatorIconContainerElem.romoIndicator();
+
     this.elem.on('indicatorTextInput:triggerPlaceIndicator', $.proxy(function(e) {
-      this.doPlaceIndicatorElem();
+      this._placeIndicatorElem();
     }, this));
+    this.elem.on('indicatorTextInput:triggerIndicatorStart', $.proxy(function(e, basisSize) {
+      this.indicatorIconContainerElem.trigger('indicator:triggerStart', [basisSize]);
+    }, this));
+    this.elem.on('indicatorTextInput:triggerIndicatorStop', $.proxy(function(e) {
+      this.indicatorIconContainerElem.trigger('indicator:triggerStop');
+    }, this));
   }
 
   this.elem.on('indicatorTextInput:triggerEnable', $.proxy(function(e) {
     this.doEnable();
   }, this));
@@ -65,11 +105,11 @@
   this.elem.on('indicatorTextInput:triggerHide', $.proxy(function(e) {
     this.doHide();
   }, this));
 }
 
-RomoIndicatorTextInput.prototype.doPlaceIndicatorElem = function() {
+RomoIndicatorTextInput.prototype._placeIndicatorElem = function() {
   if (this.indicatorElem !== undefined) {
     this.indicatorElem.css({'line-height': this.elem.css('height')});
     if (this.elem.prop('disabled') === true) {
       this.indicatorElem.addClass('disabled');
     }
@@ -90,33 +130,10 @@
     var inputPaddingPx = indicatorPaddingPx + indicatorWidthPx + indicatorPaddingPx;
     this.elem.css('padding-'+indicatorPosition, inputPaddingPx+'px');
   }
 }
 
-RomoIndicatorTextInput.prototype.doEnable = function() {
-  this.elem.prop('disabled', false);
-  this.elem.removeClass('disabled');
-  this.indicatorElem.removeClass('disabled');
-}
-
-RomoIndicatorTextInput.prototype.doDisable = function() {
-  this.elem.prop('disabled', true);
-  this.elem.addClass('disabled');
-  this.indicatorElem.addClass('disabled');
-}
-
-RomoIndicatorTextInput.prototype.doShow = function() {
-  this._show(this.elem);
-  this._show(this.indicatorElem);
-  this.doPlaceIndicatorElem();
-}
-
-RomoIndicatorTextInput.prototype.doHide = function() {
-  this._hide(this.elem);
-  this._hide(this.indicatorElem);
-}
-
-RomoIndicatorTextInput.prototype.onIndicatorClick = function(e) {
+RomoIndicatorTextInput.prototype._onIndicatorClick = function(e) {
   if (e !== undefined) {
     e.preventDefault();
     e.stopPropagation();
   }
   if (this.elem.prop('disabled') === false) {