@convergence/input-element-bindings - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

browser/convergence-input-element-bindings.js

 /**!
 © 2017 Convergence Labs, Inc.
-@version 0.1.1
+@version 0.1.2
 @license MIT
@@ -15,3 +15,3 @@ */
 		root["ConvergenceInputElementBinder"] = factory(root["Convergence"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_4__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_6__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -81,3 +81,3 @@ /******/ 	// The module cache
 
-	var _ConvergenceInputElementBinder = __webpack_require__(3);
+	var _ConvergenceInputElementBinder = __webpack_require__(5);
 
@@ -109,2 +109,8 @@ Object.keys(_ConvergenceInputElementBinder).forEach(function (key) {
 
+	var _stringChangeDetector = __webpack_require__(3);
+
+	var _stringChangeDetector2 = _interopRequireDefault(_stringChangeDetector);
+
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -127,8 +133,9 @@
 	    this._input = element;
-
-	    this._onInsert = options.onInsert;
-	    this._onRemove = options.onRemove;
 	    this._event = options.event || "input";
 
-	    this._oldValue = this._input.value;
+	    this._detector = new _stringChangeDetector2.default({
+	      value: this._input.value,
+	      onInsert: options.onInsert,
+	      onRemove: options.onRemove
+	    });
 	    this._listener = this._onEvent.bind(this);
@@ -152,5 +159,4 @@
 	    value: function insertText(index, value) {
-	      var oldVal = this._input.value;
-	      var newVal = oldVal.substring(0, index) + value + oldVal.substring(index, oldVal.length);
-	      this.setValue(newVal);
+	      this._detector.insertText(index, value);
+	      this._input.value = this._detector.getValue();
 	    }
@@ -160,5 +166,4 @@ }, {
 	    value: function removeText(index, length) {
-	      var oldVal = this._input.value;
-	      var newVal = oldVal.substring(0, index) + oldVal.substring(index + length, oldVal.length);
-	      this.setValue(newVal);
+	      this._detector.removeText(index, length);
+	      this._input.value = this._detector.getValue();
 	    }
@@ -169,3 +174,3 @@ }, {
 	      this._input.value = value;
-	      this._oldValue = value;
+	      this._detector.setValue(value);
 	    }
@@ -175,34 +180,3 @@ }, {
 	    value: function _onEvent() {
-	      var newValue = this._input.value;
-
-	      var commonEnd = 0;
-	      var commonStart = 0;
-
-	      if (this._oldValue === newValue) {
-	        return;
-	      }
-
-	      while (this._oldValue.charAt(commonStart) === newValue.charAt(commonStart)) {
-	        commonStart++;
-	      }
-
-	      while (this._oldValue.charAt(this._oldValue.length - 1 - commonEnd) === newValue.charAt(newValue.length - 1 - commonEnd) && commonEnd + commonStart < this._oldValue.length && commonEnd + commonStart < newValue.length) {
-	        commonEnd++;
-	      }
-
-	      // Characters were removed.
-	      if (this._oldValue.length !== commonStart + commonEnd) {
-	        if (this._onRemove) {
-	          this._onRemove(commonStart, this._oldValue.length - commonStart - commonEnd);
-	        }
-	      }
-
-	      // Characters were added
-	      if (newValue.length !== commonStart + commonEnd) {
-	        if (this._onInsert) {
-	          this._onInsert(commonStart, newValue.slice(commonStart, newValue.length - commonEnd));
-	        }
-	      }
-
-	      this._oldValue = newValue;
+	      this._detector.processNewValue(this._input.value);
 	    }
@@ -249,2 +223,22 @@ }]);
 
+	/**!
+	© 2017 Convergence Labs, Inc.
+	@version 0.1.1
+	@license MIT
+	*/
+	'use strict';
+
+	module.exports = __webpack_require__(4);
+	//# sourceMappingURL=index.js.map
+
+
+/***/ },
+/* 4 */
+/***/ function(module, exports) {
+
+	/**!
+	© 2017 Convergence Labs, Inc.
+	@version 0.1.1
+	@license MIT
+	*/
 	"use strict";
@@ -255,2 +249,153 @@
 	});
+
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+	var StringChangeDetector = function () {
+	  function StringChangeDetector(options) {
+	    _classCallCheck(this, StringChangeDetector);
+
+	    if (!options) {
+	      throw new Error("options must be defined");
+	    }
+
+	    if (typeof options.onInsert !== "function") {
+	      throw new Error("options.onInsert must be a function");
+	    }
+
+	    if (typeof options.onRemove !== "function") {
+	      throw new Error("options.onRemove must be a function");
+	    }
+
+	    if (typeof options.value !== "string") {
+	      throw new Error("options.value must be a string");
+	    }
+
+	    this._onInsert = options.onInsert;
+	    this._onRemove = options.onRemove;
+	    this._value = options.value;
+	  }
+
+	  /**
+	   * Inserts a string into the current value at the specified index.
+	   *
+	   * @param index {number}
+	   *    The index in the string to insert into.
+	   * @param value {string}
+	   *   The value to insert into the string.
+	   */
+
+
+	  _createClass(StringChangeDetector, [{
+	    key: "insertText",
+	    value: function insertText(index, value) {
+	      var oldVal = this._value;
+	      var newVal = oldVal.substring(0, index) + value + oldVal.substring(index, oldVal.length);
+	      this.setValue(newVal);
+	    }
+
+	    /**
+	     * Removes a specified number of characters from the current string at
+	     * a specific location.
+	     *
+	     * @param index {number}
+	     *    The index in the string to remove characters.
+	     * @param length {number}
+	     *   The number of characters to remove.
+	     */
+
+	  }, {
+	    key: "removeText",
+	    value: function removeText(index, length) {
+	      var oldVal = this._value;
+	      var newVal = oldVal.substring(0, index) + oldVal.substring(index + length, oldVal.length);
+	      this.setValue(newVal);
+	    }
+
+	    /**
+	     * Sets the current value of the string.
+	     *
+	     * @param value {string}
+	     *   The new value of the string.
+	     */
+
+	  }, {
+	    key: "setValue",
+	    value: function setValue(value) {
+	      this._value = value;
+	    }
+
+	    /**
+	     * Gets the current value of the string.
+	     *
+	     * @returns {string}
+	     */
+
+	  }, {
+	    key: "getValue",
+	    value: function getValue() {
+	      return this._value;
+	    }
+
+	    /**
+	     * Process the new value of the string after a single edit.
+	     *
+	     * @param newValue {string}
+	     *   The new value to process.
+	     */
+
+	  }, {
+	    key: "processNewValue",
+	    value: function processNewValue(newValue) {
+	      var commonEnd = 0;
+	      var commonStart = 0;
+
+	      if (this._value === newValue) {
+	        return;
+	      }
+
+	      while (this._value.charAt(commonStart) === newValue.charAt(commonStart)) {
+	        commonStart++;
+	      }
+
+	      while (this._value.charAt(this._value.length - 1 - commonEnd) === newValue.charAt(newValue.length - 1 - commonEnd) && commonEnd + commonStart < this._value.length && commonEnd + commonStart < newValue.length) {
+	        commonEnd++;
+	      }
+
+	      // Characters were removed.
+	      if (this._value.length !== commonStart + commonEnd) {
+	        if (this._onRemove) {
+	          this._onRemove(commonStart, this._value.length - commonStart - commonEnd);
+	        }
+	      }
+
+	      // Characters were added
+	      if (newValue.length !== commonStart + commonEnd) {
+	        if (this._onInsert) {
+	          this._onInsert(commonStart, newValue.slice(commonStart, newValue.length - commonEnd));
+	        }
+	      }
+
+	      this._value = newValue;
+	    }
+	  }]);
+
+	  return StringChangeDetector;
+	}();
+
+	exports.default = StringChangeDetector;
+	module.exports = exports["default"];
+	//# sourceMappingURL=StringChangeDetector.js.map
+
+
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
 	exports.bindTextInput = bindTextInput;
@@ -269,3 +414,3 @@ exports.bindNumberInput = bindNumberInput;
 
-	var _convergence = __webpack_require__(4);
+	var _convergence = __webpack_require__(6);
 
@@ -549,6 +694,6 @@ /**
 /***/ },
-/* 4 */
+/* 6 */
 /***/ function(module, exports) {
 
-	module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
+	module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
 
@@ -555,0 +700,0 @@ /***/ }

browser/convergence-input-element-bindings.min.js

 /**!
 © 2017 Convergence Labs, Inc.
-@version 0.1.1
+@version 0.1.2
 @license MIT
 */
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("Convergence")):"function"==typeof define&&define.amd?define("ConvergenceInputElementBinder",["Convergence"],n):"object"==typeof exports?exports.ConvergenceInputElementBinder=n(require("Convergence")):e.ConvergenceInputElementBinder=n(e.Convergence)}(this,function(e){return function(e){function n(r){if(t[r])return t[r].exports;var u=t[r]={exports:{},id:r,loaded:!1};return e[r].call(u.exports,u,u.exports,n),u.loaded=!0,u.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=t(1);Object.keys(r).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(n,e,{enumerable:!0,get:function(){return r[e]}})});var u=t(3);Object.keys(u).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(n,e,{enumerable:!0,get:function(){return u[e]}})})},function(e,n,t){"use strict";function r(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0}),n.TextInputProcessor=void 0;var u=function(){function e(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(n,t,r){return t&&e(n.prototype,t),r&&e(n,r),n}}(),i=t(2);n.TextInputProcessor=function(){function e(n){r(this,e);var t=(0,i.resolveElement)(n.element);if(t instanceof HTMLInputElement){if("text"!==t.type&&"url"!==t.type&&"tel"!==t.type&&"search"!==t.type&&"password"!==t.type)throw new Error("HTMLInputElement must of of type 'text', 'url', 'tel', or 'search': "+t.type)}else if(!(t instanceof HTMLTextAreaElement))throw new Error("Input element must either an HTMLTextInput or a HTMLTextArea.");this._input=t,this._onInsert=n.onInsert,this._onRemove=n.onRemove,this._event=n.event||"input",this._oldValue=this._input.value,this._listener=this._onEvent.bind(this),this.bind()}return u(e,[{key:"bind",value:function(){this._input.addEventListener(this._event,this._listener)}},{key:"unbind",value:function(){this._input.removeEventListener(this._event,this._listener)}},{key:"insertText",value:function(e,n){var t=this._input.value,r=t.substring(0,e)+n+t.substring(e,t.length);this.setValue(r)}},{key:"removeText",value:function(e,n){var t=this._input.value,r=t.substring(0,e)+t.substring(e+n,t.length);this.setValue(r)}},{key:"setValue",value:function(e){this._input.value=e,this._oldValue=e}},{key:"_onEvent",value:function(){var e=this._input.value,n=0,t=0;if(this._oldValue!==e){for(;this._oldValue.charAt(t)===e.charAt(t);)t++;for(;this._oldValue.charAt(this._oldValue.length-1-n)===e.charAt(e.length-1-n)&&n+t<this._oldValue.length&&n+t<e.length;)n++;this._oldValue.length!==t+n&&this._onRemove&&this._onRemove(t,this._oldValue.length-t-n),e.length!==t+n&&this._onInsert&&this._onInsert(t,e.slice(t,e.length-n)),this._oldValue=e}}}]),e}()},function(e,n){"use strict";function t(e){if(e instanceof HTMLElement)return e;if("string"==typeof e){var n=document.getElementById(e);if(void 0===n)throw new ReferenceError("An element with id '"+e+"' could not be found.");return n}throw new Error("The supplied argument must be an HTMLElement or a string representing an element id.")}Object.defineProperty(n,"__esModule",{value:!0}),n.resolveElement=t},function(e,n,t){"use strict";function r(e,n){var t=(0,c.resolveElement)(e);t.value=n.value();var r=new f.TextInputProcessor({element:t,event:"input",onInsert:function(e,t){return n.insert(e,t)},onRemove:function(e,t){return n.remove(e,t)}}),u=function(e){e.local||r.insertText(e.index,e.value)};n.on(E.RealTimeString.Events.INSERT,u);var i=function(e){e.local||r.removeText(e.index,e.value.length)};n.on(E.RealTimeString.Events.REMOVE,i);var o=function(e){e.local||r.setValue(e.value)};n.on(E.RealTimeString.Events.VALUE,o);var l=function(){r.unbind(),n.off(E.RealTimeString.Events.INSERT,u),n.off(E.RealTimeString.Events.REMOVE,i),n.off(E.RealTimeString.Events.VALUE,o)};return n.on(E.RealTimeString.Events.DETACHED,l),{unbind:l}}function u(e,n){var t=(0,c.resolveElement)(e);t.value=n.value();var r=function(t){return n.value(Number(e.value))};t.addEventListener("input",r,!1);var u=function(n){n.local||(e.value=n.element.value())};n.on(E.RealTimeNumber.Events.VALUE,u);var i=function(n){n.local||(e.value=Number(e.value)+n.value)};n.on(E.RealTimeNumber.Events.DELTA,i);var o=function(){t.removeEventListener("input",r),n.off(E.RealTimeNumber.Events.VALUE,u),n.off(E.RealTimeNumber.Events.DELTA,i)};return n.on(E.RealTimeNumber.Events.DETACHED,o),{unbind:o}}function i(e,n){var t=(0,c.resolveElement)(e);t.checked=n.value();var r=function(e){return n.value(t.checked)};e.addEventListener("change",r,!1);var u=function(n){n.local||(e.checked=n.element.value())};n.on(E.RealTimeBoolean.Events.VALUE,u);var i=function(){e.removeEventListener("change",r),n.off(E.RealTimeBoolean.Events.VALUE,u)};return n.on(E.RealTimeNumber.Events.DETACHED,i),{unbind:i}}function o(e,n){return u(e,n)}function l(e,n){var t=(0,c.resolveElement)(e);t.value=n.value();var r=function(t){return n.value(e.value)};t.addEventListener("input",r,!1);var u=function(n){n.local||(e.value=n.element.value())};n.on(E.RealTimeNumber.Events.VALUE,u);var i=function(){t.removeEventListener("input",r),n.off(E.RealTimeNumber.Events.VALUE,u)};return n.on(E.RealTimeNumber.Events.DETACHED,i),{unbind:i}}function a(e,n){var t=(0,c.resolveElement)(e);t.value=n.value();var r=function(t){return n.value(e.value)};t.addEventListener("input",r,!1);var u=function(n){n.local||(e.value=n.element.value())};n.on(E.RealTimeNumber.Events.VALUE,u);var i=function(){t.removeEventListener("input",r),n.off(E.RealTimeNumber.Events.VALUE,u)};return n.on(E.RealTimeNumber.Events.DETACHED,i),{unbind:i}}function v(e,n){var t=(0,c.resolveElement)(e),r=function(){for(var t=n.value(),r=0;r<e.options.length;r++){var u=e.options[r];u.selected=t.indexOf(u.value)>=0}};r();var u=function(t){for(var r=[],u=0;u<e.options.length;u++){var i=e.options[u];i.selected&&r.push(i.value)}n.value(r)};t.addEventListener("input",u,!1);var i=function(e){e.local||r()};n.on(E.RealTimeNumber.Events.VALUE,i);var o=function(){t.removeEventListener("input",u),n.off(E.RealTimeNumber.Events.VALUE,i)};return n.on(E.RealTimeNumber.Events.DETACHED,o),{unbind:o}}function s(e,n){var t=e.map(function(e){return(0,c.resolveElement)(e)}),r=function(){var t=n.value();e.forEach(function(e){return e.checked=e.value===t})};r();var u=function(t){var r=!1;e.forEach(function(e){e.checked&&(n.value(e.value),r=!0)}),r||n.value("")};t.forEach(function(e){return e.addEventListener("change",u,!1)});var i=function(e){e.local||r()};n.on(E.RealTimeNumber.Events.VALUE,i);var o=function(){t.forEach(function(e){return e.removeEventListener("change",u,!1)}),n.off(E.RealTimeNumber.Events.VALUE,i)};return n.on(E.RealTimeNumber.Events.DETACHED,o),{unbind:o}}Object.defineProperty(n,"__esModule",{value:!0}),n.bindTextInput=r,n.bindNumberInput=u,n.bindCheckboxInput=i,n.bindRangeInput=o,n.bindColorInput=l,n.bindSingleSelect=a,n.bindMultiSelect=v,n.bindRadioInputs=s;var c=t(2),f=t(1),E=t(4)},function(n,t){n.exports=e}])});
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("Convergence")):"function"==typeof define&&define.amd?define("ConvergenceInputElementBinder",["Convergence"],n):"object"==typeof exports?exports.ConvergenceInputElementBinder=n(require("Convergence")):e.ConvergenceInputElementBinder=n(e.Convergence)}(this,function(e){return function(e){function n(r){if(t[r])return t[r].exports;var u=t[r]={exports:{},id:r,loaded:!1};return e[r].call(u.exports,u,u.exports,n),u.loaded=!0,u.exports}var t={};return n.m=e,n.c=t,n.p="",n(0)}([function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=t(1);Object.keys(r).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(n,e,{enumerable:!0,get:function(){return r[e]}})});var u=t(5);Object.keys(u).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(n,e,{enumerable:!0,get:function(){return u[e]}})})},function(e,n,t){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function u(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0}),n.TextInputProcessor=void 0;var o=function(){function e(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(n,t,r){return t&&e(n.prototype,t),r&&e(n,r),n}}(),i=t(2),a=t(3),l=r(a);n.TextInputProcessor=function(){function e(n){u(this,e);var t=(0,i.resolveElement)(n.element);if(t instanceof HTMLInputElement){if("text"!==t.type&&"url"!==t.type&&"tel"!==t.type&&"search"!==t.type&&"password"!==t.type)throw new Error("HTMLInputElement must of of type 'text', 'url', 'tel', or 'search': "+t.type)}else if(!(t instanceof HTMLTextAreaElement))throw new Error("Input element must either an HTMLTextInput or a HTMLTextArea.");this._input=t,this._event=n.event||"input",this._detector=new l.default({value:this._input.value,onInsert:n.onInsert,onRemove:n.onRemove}),this._listener=this._onEvent.bind(this),this.bind()}return o(e,[{key:"bind",value:function(){this._input.addEventListener(this._event,this._listener)}},{key:"unbind",value:function(){this._input.removeEventListener(this._event,this._listener)}},{key:"insertText",value:function(e,n){this._detector.insertText(e,n),this._input.value=this._detector.getValue()}},{key:"removeText",value:function(e,n){this._detector.removeText(e,n),this._input.value=this._detector.getValue()}},{key:"setValue",value:function(e){this._input.value=e,this._detector.setValue(e)}},{key:"_onEvent",value:function(){this._detector.processNewValue(this._input.value)}}]),e}()},function(e,n){"use strict";function t(e){if(e instanceof HTMLElement)return e;if("string"==typeof e){var n=document.getElementById(e);if(void 0===n)throw new ReferenceError("An element with id '"+e+"' could not be found.");return n}throw new Error("The supplied argument must be an HTMLElement or a string representing an element id.")}Object.defineProperty(n,"__esModule",{value:!0}),n.resolveElement=t},function(e,n,t){/**!
+	© 2017 Convergence Labs, Inc.
+	@version 0.1.1
+	@license MIT
+	*/
+"use strict";e.exports=t(4)},function(e,n){/**!
+	© 2017 Convergence Labs, Inc.
+	@version 0.1.1
+	@license MIT
+	*/
+"use strict";function t(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(n,"__esModule",{value:!0});var r=function(){function e(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(n,t,r){return t&&e(n.prototype,t),r&&e(n,r),n}}(),u=function(){function e(n){if(t(this,e),!n)throw new Error("options must be defined");if("function"!=typeof n.onInsert)throw new Error("options.onInsert must be a function");if("function"!=typeof n.onRemove)throw new Error("options.onRemove must be a function");if("string"!=typeof n.value)throw new Error("options.value must be a string");this._onInsert=n.onInsert,this._onRemove=n.onRemove,this._value=n.value}return r(e,[{key:"insertText",value:function(e,n){var t=this._value,r=t.substring(0,e)+n+t.substring(e,t.length);this.setValue(r)}},{key:"removeText",value:function(e,n){var t=this._value,r=t.substring(0,e)+t.substring(e+n,t.length);this.setValue(r)}},{key:"setValue",value:function(e){this._value=e}},{key:"getValue",value:function(){return this._value}},{key:"processNewValue",value:function(e){var n=0,t=0;if(this._value!==e){for(;this._value.charAt(t)===e.charAt(t);)t++;for(;this._value.charAt(this._value.length-1-n)===e.charAt(e.length-1-n)&&n+t<this._value.length&&n+t<e.length;)n++;this._value.length!==t+n&&this._onRemove&&this._onRemove(t,this._value.length-t-n),e.length!==t+n&&this._onInsert&&this._onInsert(t,e.slice(t,e.length-n)),this._value=e}}}]),e}();n.default=u,e.exports=n.default},function(e,n,t){"use strict";function r(e,n){var t=(0,c.resolveElement)(e);t.value=n.value();var r=new f.TextInputProcessor({element:t,event:"input",onInsert:function(e,t){return n.insert(e,t)},onRemove:function(e,t){return n.remove(e,t)}}),u=function(e){e.local||r.insertText(e.index,e.value)};n.on(m.RealTimeString.Events.INSERT,u);var o=function(e){e.local||r.removeText(e.index,e.value.length)};n.on(m.RealTimeString.Events.REMOVE,o);var i=function(e){e.local||r.setValue(e.value)};n.on(m.RealTimeString.Events.VALUE,i);var a=function(){r.unbind(),n.off(m.RealTimeString.Events.INSERT,u),n.off(m.RealTimeString.Events.REMOVE,o),n.off(m.RealTimeString.Events.VALUE,i)};return n.on(m.RealTimeString.Events.DETACHED,a),{unbind:a}}function u(e,n){var t=(0,c.resolveElement)(e);t.value=n.value();var r=function(t){return n.value(Number(e.value))};t.addEventListener("input",r,!1);var u=function(n){n.local||(e.value=n.element.value())};n.on(m.RealTimeNumber.Events.VALUE,u);var o=function(n){n.local||(e.value=Number(e.value)+n.value)};n.on(m.RealTimeNumber.Events.DELTA,o);var i=function(){t.removeEventListener("input",r),n.off(m.RealTimeNumber.Events.VALUE,u),n.off(m.RealTimeNumber.Events.DELTA,o)};return n.on(m.RealTimeNumber.Events.DETACHED,i),{unbind:i}}function o(e,n){var t=(0,c.resolveElement)(e);t.checked=n.value();var r=function(e){return n.value(t.checked)};e.addEventListener("change",r,!1);var u=function(n){n.local||(e.checked=n.element.value())};n.on(m.RealTimeBoolean.Events.VALUE,u);var o=function(){e.removeEventListener("change",r),n.off(m.RealTimeBoolean.Events.VALUE,u)};return n.on(m.RealTimeNumber.Events.DETACHED,o),{unbind:o}}function i(e,n){return u(e,n)}function a(e,n){var t=(0,c.resolveElement)(e);t.value=n.value();var r=function(t){return n.value(e.value)};t.addEventListener("input",r,!1);var u=function(n){n.local||(e.value=n.element.value())};n.on(m.RealTimeNumber.Events.VALUE,u);var o=function(){t.removeEventListener("input",r),n.off(m.RealTimeNumber.Events.VALUE,u)};return n.on(m.RealTimeNumber.Events.DETACHED,o),{unbind:o}}function l(e,n){var t=(0,c.resolveElement)(e);t.value=n.value();var r=function(t){return n.value(e.value)};t.addEventListener("input",r,!1);var u=function(n){n.local||(e.value=n.element.value())};n.on(m.RealTimeNumber.Events.VALUE,u);var o=function(){t.removeEventListener("input",r),n.off(m.RealTimeNumber.Events.VALUE,u)};return n.on(m.RealTimeNumber.Events.DETACHED,o),{unbind:o}}function v(e,n){var t=(0,c.resolveElement)(e),r=function(){for(var t=n.value(),r=0;r<e.options.length;r++){var u=e.options[r];u.selected=t.indexOf(u.value)>=0}};r();var u=function(t){for(var r=[],u=0;u<e.options.length;u++){var o=e.options[u];o.selected&&r.push(o.value)}n.value(r)};t.addEventListener("input",u,!1);var o=function(e){e.local||r()};n.on(m.RealTimeNumber.Events.VALUE,o);var i=function(){t.removeEventListener("input",u),n.off(m.RealTimeNumber.Events.VALUE,o)};return n.on(m.RealTimeNumber.Events.DETACHED,i),{unbind:i}}function s(e,n){var t=e.map(function(e){return(0,c.resolveElement)(e)}),r=function(){var t=n.value();e.forEach(function(e){return e.checked=e.value===t})};r();var u=function(t){var r=!1;e.forEach(function(e){e.checked&&(n.value(e.value),r=!0)}),r||n.value("")};t.forEach(function(e){return e.addEventListener("change",u,!1)});var o=function(e){e.local||r()};n.on(m.RealTimeNumber.Events.VALUE,o);var i=function(){t.forEach(function(e){return e.removeEventListener("change",u,!1)}),n.off(m.RealTimeNumber.Events.VALUE,o)};return n.on(m.RealTimeNumber.Events.DETACHED,i),{unbind:i}}Object.defineProperty(n,"__esModule",{value:!0}),n.bindTextInput=r,n.bindNumberInput=u,n.bindCheckboxInput=o,n.bindRangeInput=i,n.bindColorInput=a,n.bindSingleSelect=l,n.bindMultiSelect=v,n.bindRadioInputs=s;var c=t(2),f=t(1),m=t(6)},function(n,t){n.exports=e}])});
 //# sourceMappingURL=convergence-input-element-bindings.min.js.map

lib/ConvergenceInputElementBinder.js

 /**!
 © 2017 Convergence Labs, Inc.
-@version 0.1.1
+@version 0.1.2
 @license MIT
@@ -5,0 +5,0 @@ */

lib/ElementUtils.js

 /**!
 © 2017 Convergence Labs, Inc.
-@version 0.1.1
+@version 0.1.2
 @license MIT
@@ -5,0 +5,0 @@ */

lib/index.js

 /**!
 © 2017 Convergence Labs, Inc.
-@version 0.1.1
+@version 0.1.2
 @license MIT
@@ -5,0 +5,0 @@ */

lib/TextInputProcessor.js

 /**!
 © 2017 Convergence Labs, Inc.
-@version 0.1.1
+@version 0.1.2
 @license MIT
@@ -17,2 +17,8 @@ */
 
+var _stringChangeDetector = require("@convergence/string-change-detector");
+
+var _stringChangeDetector2 = _interopRequireDefault(_stringChangeDetector);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -35,8 +41,9 @@
     this._input = element;
-
-    this._onInsert = options.onInsert;
-    this._onRemove = options.onRemove;
     this._event = options.event || "input";
 
-    this._oldValue = this._input.value;
+    this._detector = new _stringChangeDetector2.default({
+      value: this._input.value,
+      onInsert: options.onInsert,
+      onRemove: options.onRemove
+    });
     this._listener = this._onEvent.bind(this);
@@ -60,5 +67,4 @@
     value: function insertText(index, value) {
-      var oldVal = this._input.value;
-      var newVal = oldVal.substring(0, index) + value + oldVal.substring(index, oldVal.length);
-      this.setValue(newVal);
+      this._detector.insertText(index, value);
+      this._input.value = this._detector.getValue();
     }
@@ -68,5 +74,4 @@ }, {
     value: function removeText(index, length) {
-      var oldVal = this._input.value;
-      var newVal = oldVal.substring(0, index) + oldVal.substring(index + length, oldVal.length);
-      this.setValue(newVal);
+      this._detector.removeText(index, length);
+      this._input.value = this._detector.getValue();
     }
@@ -77,3 +82,3 @@ }, {
       this._input.value = value;
-      this._oldValue = value;
+      this._detector.setValue(value);
     }
@@ -83,34 +88,3 @@ }, {
     value: function _onEvent() {
-      var newValue = this._input.value;
-
-      var commonEnd = 0;
-      var commonStart = 0;
-
-      if (this._oldValue === newValue) {
-        return;
-      }
-
-      while (this._oldValue.charAt(commonStart) === newValue.charAt(commonStart)) {
-        commonStart++;
-      }
-
-      while (this._oldValue.charAt(this._oldValue.length - 1 - commonEnd) === newValue.charAt(newValue.length - 1 - commonEnd) && commonEnd + commonStart < this._oldValue.length && commonEnd + commonStart < newValue.length) {
-        commonEnd++;
-      }
-
-      // Characters were removed.
-      if (this._oldValue.length !== commonStart + commonEnd) {
-        if (this._onRemove) {
-          this._onRemove(commonStart, this._oldValue.length - commonStart - commonEnd);
-        }
-      }
-
-      // Characters were added
-      if (newValue.length !== commonStart + commonEnd) {
-        if (this._onInsert) {
-          this._onInsert(commonStart, newValue.slice(commonStart, newValue.length - commonEnd));
-        }
-      }
-
-      this._oldValue = newValue;
+      this._detector.processNewValue(this._input.value);
     }
@@ -117,0 +91,0 @@ }]);

package.json

@@ -11,3 +11,3 @@ {
   ],
-  "version": "0.1.1",
+  "version": "0.1.2",
   "homepage": "http://convergencelabs.com",
@@ -38,6 +38,7 @@ "author": {
   "main": "lib/index.js",
-  "browser": "browser/color-assigner.js",
+  "browser": "browser/convergence-input-element-bindings.js",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@convergence/convergence": "1.0.0-alpha.1"
+    "@convergence/convergence": "1.0.0-alpha.1",
+    "@convergence/string-change-detector": "0.1.1"
   },
@@ -57,3 +58,3 @@ "devDependencies": {
     "gulp-clean-css": "2.0.12",
-    "gulp-concat": "^2.6.1",
+    "gulp-concat": "2.6.1",
     "gulp-header": "1.8.8",
@@ -60,0 +61,0 @@ "gulp-mocha": "3.0.1",

No alert changes

Improved metrics

Total package byte prevSize

103298

increased by10.12%

Number of package files

17

increased by21.43%

Lines of code

992

increased by14.95%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@convergence/string-change-detector@0.1.1

• + Added@convergence/string-change-detector@0.1.1(transitive)