Issue #446: Add export tabs, move zoom controls

src/js/widgets/SizeInput.js

@@ -1,16 +1,29 @@
 (function () {
   var ns = $.namespace('pskl.widgets');
-  ns.SizeInput = function (widthInput, heightInput, initWidth, initHeight) {
-    this.widthInput = widthInput;
-    this.heightInput = heightInput;
-    this.initWidth = initWidth;
-    this.initHeight = initHeight;
+
+  /**
+   * Synchronize two "number" inputs to stick to their initial ratio.
+   * The synchronization can be disabled/enabled on the fly.
+   *
+   * @param {Object} options
+   *        - {Element} widthInput
+   *        - {Element} heightInput
+   *        - {Number} initWidth
+   *        - {Number} initHeight
+   *        - {Function} onChange
+   */
+  ns.SizeInput = function (options) {
+    this.widthInput = options.widthInput;
+    this.heightInput = options.heightInput;
+    this.initWidth = options.initWidth;
+    this.initHeight = options.initHeight;
+    this.onChange = options.onChange;
 
     this.syncEnabled = true;
     this.lastInput = this.widthInput;
 
-    this.widthInput.value = initWidth;
-    this.heightInput.value = initHeight;
+    this.widthInput.value = this.initWidth;
+    this.heightInput.value = this.initHeight;
 
     pskl.utils.Event.addEventListener(this.widthInput, 'keyup', this.onSizeInputKeyUp_, this);
     pskl.utils.Event.addEventListener(this.heightInput, 'keyup', this.onSizeInputKeyUp_, this);
@@ -33,6 +46,16 @@
     this.syncEnabled = false;
   };
 
+  ns.SizeInput.prototype.setWidth = function (width) {
+    this.widthInput.value = width;
+    this.synchronize_(this.widthInput);
+  };
+
+  ns.SizeInput.prototype.setHeight = function (height) {
+    this.heightInput.value = height;
+    this.synchronize_(this.heightInput);
+  };
+
   ns.SizeInput.prototype.onSizeInputKeyUp_ = function (evt) {
     var target = evt.target;
     if (this.syncEnabled) {
@@ -57,5 +80,9 @@
     } else if (sizeInput === this.heightInput) {
       this.widthInput.value = Math.round(value * this.initWidth / this.initHeight);
     }
+
+    if (this.onChange) {
+      this.onChange();
+    }
   };
 })();