Refactor print preview web ui

chrome/browser/resources/print_preview/previewarea/margin_control.js

+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('print_preview', function() {
+  'use strict';
+
+  /**
+   * Draggable control for setting a page margin.
+   *
+   * @param {print_preview.MarginControl.Orientation} orientation Orientation
+   *     of the margin control that determines where the margin textbox will be
+   *     placed.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function MarginControl(orientation) {
+    print_preview.Component.call(this);
+
+    /**
+     * Determines where the margin textbox will be placed.
+     * @type {print_preview.MarginControl.Orientation}
+     * @private
+     */
+    this.orientation_ = orientation;
+
+    this.positionInPts_ = 0;
+    this.pageSize_ = new print_preview.Size(0, 0);
+    this.scaleTransform_ = 1;
+    this.translateTransform_ = new print_preview.Coordinate2d(0, 0);
+
+    /**
+     * Measurement system used in the print preview.
+     * @type {!print_preview.MeasurementSystem}
+     * @private
+     */
+    this.measurementSystem_ = new print_preview.MeasurementSystem(
+        ',', '.', print_preview.MeasurementSystem.UnitType.IMPERIAL);
+
+    /**
+     * Position of the margin control when dragging starts.
+     * @type {print_preview.Coordinate2d}
+     * @private
+     */
+    this.marginStartPositionInPixels_ = null;
+
+    /**
+     * Position of the mouse when the dragging starts.
+     * @type {print_preview.Coordinate2d}
+     * @private
+     */
+    this.mouseStartPositionInPixels_ = null;
+
+    /**
+     * Processing timeout for the textbox.
+     * @type {Object}
+     * @private
+     */
+    this.textTimeout_ = null;
+  };
+
+  /**
+   * Enumeration of margin control orientations.
+   * @enum {string}
+   */
+  MarginControl.Orientation = {
+    TOP: 'top',
+    RIGHT: 'right',
+    BOTTOM: 'bottom',
+    LEFT: 'left'
+  };
+
+  /**
+   * Events dispatched by the margin control.
+   * @enum {string}
+   */
+  MarginControl.Event = {
+    // Dispatched when the margin control starts dragging.
+    DRAG_START: 'print_preview.MarginControl.DRAG_START',
+
+    // Dispatched when the text in the margin control's textbox changes.
+    TEXT_CHANGE: 'print_preview.MarginControl.TEXT_CHANGE'
+  };
+
+  /**
+   * CSS classes used by this component.
+   * @enum {string}
+   * @private
+   */
+  MarginControl.Classes_ = {
+    TOP: 'margin-control-top',
+    RIGHT: 'margin-control-right',
+    BOTTOM: 'margin-control-bottom',
+    LEFT: 'margin-control-left',
+    TEXTBOX: 'margin-control-textbox',
+    INVALID: 'invalid',
+    INVISIBLE: 'invisible'
+  };
+
+  /**
+   * Map from orientation to CSS class name.
+   * @type {object.<MarginControl.Orientation, MarginControl.Classes_>}
+   * @private
+   */
+  MarginControl.OrientationToClass_ = {};
+  MarginControl.OrientationToClass_[MarginControl.Orientation.TOP] =
+      MarginControl.Classes_.TOP;
+  MarginControl.OrientationToClass_[MarginControl.Orientation.RIGHT] =
+      MarginControl.Classes_.RIGHT;
+  MarginControl.OrientationToClass_[MarginControl.Orientation.BOTTOM] =
+      MarginControl.Classes_.BOTTOM;
+  MarginControl.OrientationToClass_[MarginControl.Orientation.LEFT] =
+      MarginControl.Classes_.LEFT;
+
+  /**
+   * Timeout in milliseconds before processing the value of the textbox.
+   * @type {number}
+   * @const
+   * @private
+   */
+  MarginControl.TEXTBOX_DELAY_ = 250;
+
+  /**
+   * Default precision used in the margin control.
+   * @type {number}
+   * @const
+   * @private
+   */
+  MarginControl.PRECISION_ = 3;
+
+  MarginControl.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    get isInFocus() {
+      return this.textbox_.focused;
+    },
+
+    set measurementSystem(measurementSystem) {
+      this.measurementSystem_ = measurementSystem;
+    },
+
+    set scaleTransform(scaleTransform) {
+      this.scaleTransform_ = scaleTransform;
+      // Reset position
+      this.positionInPts = this.positionInPts_;
+    },
+
+    set translateTransform(translateTransform) {
+      this.translateTransform_ = translateTransform;
+      // Reset position
+      this.positionInPts = this.positionInPts_;
+    },
+
+    set pageSize(pageSize) {
+      this.pageSize_ = pageSize;
+      this.positionInPts = this.positionInPts_;
+    },
+
+    get orientation() {
+      return this.orientation_;
+    },
+
+    /** @param {boolean} isVisible Whether the margin control is visible. */
+    set isVisible(isVisible) {
+      if (isVisible) {
+        this.getElement().classList.remove(MarginControl.Classes_.INVISIBLE);
+      } else {
+        this.getElement().classList.add(MarginControl.Classes_.INVISIBLE);
+      }
+    },
+
+    set isInError(isInError) {
+      if (isInError) {
+        this.textbox_.classList.add(MarginControl.Classes_.INVALID);
+      } else {
+        this.textbox_.classList.remove(MarginControl.Classes_.INVALID);
+      }
+    },
+
+    get positionInPts() {
+      return this.positionInPts_;
+    },
+
+    set positionInPts(posInPts) {
+      this.positionInPts_ = posInPts;
+      this.textbox_.value =
+          this.measurementSystem_.convertFromPoints(posInPts).
+              toPrecision(MarginControl.PRECISION_) +
+          this.measurementSystem_.unitSymbol;
+      var posInPixels;
+      if (this.orientation_ == MarginControl.Orientation.TOP) {
+        posInPixels = posInPts * this.scaleTransform_;
+        posInPixels += this.translateTransform_.y;
+        this.getElement().style.top = posInPixels + 'px';
+      } else if (this.orientation_ == MarginControl.Orientation.RIGHT) {
+        posInPixels = this.pageSize_.width - posInPts;
+        posInPixels *= this.scaleTransform_;
+        posInPixels += this.translateTransform_.x;
+        this.getElement().style.left = posInPixels + 'px';
+      } else if (this.orientation_ == MarginControl.Orientation.BOTTOM) {
+        posInPixels = this.pageSize_.height - posInPts;
+        posInPixels *= this.scaleTransform_;
+        posInPixels += this.translateTransform_.y;
+        this.getElement().style.top = posInPixels + 'px';
+      } else {
+        posInPixels = posInPts * this.scaleTransform_;
+        posInPixels += this.translateTransform_.x;
+        this.getElement().style.left = posInPixels + 'px';
+      }
+    },
+
+    convertPixelsToPts: function(pixels) {
+      var pts;
+      if (this.orientation_ == MarginControl.Orientation.TOP) {
+        pts = pixels - this.translateTransform_.y;
+        pts /= this.scaleTransform_;
+      } else if (this.orientation_ == MarginControl.Orientation.RIGHT) {
+        pts = pixels - this.translateTransform_.x;
+        pts /= this.scaleTransform_;
+        pts = this.pageSize_.width - pts;
+      } else if (this.orientation_ == MarginControl.Orientation.BOTTOM) {
+        pts = pixels - this.translateTransform_.y;
+        pts /= this.scaleTransform_;
+        pts = this.pageSize_.height - pts;
+      } else {
+        pts = pixels - this.translateTransform_.x;
+        pts /= this.scaleTransform_;
+      }
+      return pts;
+    },
+
+    /**
+     * Translates the position of the margin control relative to the mouse
+     * position in pixels.
+     * @param {!print_preview.Coordinate2d} mousePosition New position of
+     *     the mouse.
+     * @return {!print_preview.Coordinate2d} New position of the margin control.
+     */
+    translateMouseToPositionInPixels: function(mousePosition) {
+      return new print_preview.Coordinate2d(
+          mousePosition.x - this.mouseStartPositionInPixels_.x +
+              this.marginStartPositionInPixels_.x,
+          mousePosition.y - this.mouseStartPositionInPixels_.y +
+              this.marginStartPositionInPixels_.y);
+    },
+
+    /** @override */
+    createDom: function() {
+      this.setElementInternal(this.cloneTemplateInternal(
+          'margin-control-template'));
+      this.getElement().classList.add(MarginControl.OrientationToClass_[
+          this.orientation_]);
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      this.tracker.add(
+          this.getElement(), 'mousedown', this.onMouseDown_.bind(this));
+      this.tracker.add(this.textbox_, 'keyup', this.onTextboxKeyUp_.bind(this));
+    },
+
+    get textbox_() {
+      return this.getElement().getElementsByClassName(
+          MarginControl.Classes_.TEXTBOX)[0];
+    },
+
+    /**
+     * Called whenever a mousedown event occurs on the component.
+     * @param {MouseEvent} e The event that occured.
+     * @private
+     */
+    onMouseDown_: function(e) {
+      if (e.button != 0 || e.target != this.getElement()) {
+        return;
+      }
+      this.mouseStartPositionInPixels_ = new print_preview.Coordinate2d(
+          e.x, e.y);
+      this.marginStartPositionInPixels_ = new print_preview.Coordinate2d(
+          this.getElement().offsetLeft, this.getElement().offsetTop);
+      this.isInError = false;
+      cr.dispatchSimpleEvent(this, MarginControl.Event.DRAG_START);
+    },
+
+    /**
+     * Called when a key up event occurs on the textbox. Starts a timeout.
+     * @private
+     */
+    onTextboxKeyUp_: function() {
+      if (this.textTimeout_) {
+        clearTimeout(this.textTimeout_);
+      }
+      this.textTimeout_ = setTimeout(
+          this.onTextboxTimeout_.bind(this), MarginControl.TEXTBOX_DELAY_);
+    },
+
+    /**
+     * Called when the textbox timeout fires. Dispatches a TEXT_CHANGE event.
+     * @private
+     */
+    onTextboxTimeout_: function() {
+      this.textTimeout_ = null;
+      var value = print_preview.extractMarginValue(
+          this.textbox_.value, this.measurementSystem_);
+      if (value < 0) {
+        this.isInError = true;
+      } else {
+        this.isInError = false;
+        var newPositionInPts = this.measurementSystem_.convertToPoints(value);
+        if (newPositionInPts != this.positionInPts_) {
+          this.positionInPts = newPositionInPts;
+          cr.dispatchSimpleEvent(this, MarginControl.Event.TEXT_CHANGE);
+        }
+      }
+    }
+  };
+
+  // Export
+  return {
+    MarginControl: MarginControl
+  };
+});