RubyGems - middleman-wizard-template - Versions diffs - 1.0.0.pre.1 - Mend

middleman-wizard-template 1.0.0.pre.1

Files changed (1739) hide show

data/lib/middleman-wizard-template/template/closure/library/closure/goog/ui/hsvapalette_test.html ADDED Viewed

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html>
+<!--
+Copyright 2008 The Closure Library Authors. All Rights Reserved.
+Use of this source code is governed by the Apache License, Version 2.0.
+See the COPYING file for details.
+-->
+<!--
+-->
+<head>
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>HsvaPalette Unit Tests</title>
+  <script src="../base.js"></script>
+  <script src="../deps.js"></script>
+  <script>
+    goog.require('goog.color.alpha');
+    goog.require('goog.events');
+    goog.require('goog.math.Rect');
+    goog.require('goog.style');
+    goog.require('goog.testing.PropertyReplacer');
+    goog.require('goog.testing.jsunit');
+    goog.require('goog.ui.HsvaPalette');
+    goog.require('goog.userAgent');
+  </script>
+</head>
+<body>
+  <div id="sandbox"></div>
+  <script>
+    var samplePalette;
+    var eventWasFired = false;
+    var stubs = new goog.testing.PropertyReplacer();
+    function setUp() {
+      samplePalette = new goog.ui.HsvaPalette();
+    }
+    function tearDown() {
+      samplePalette.dispose();
+      stubs.reset();
+    }
+    function testZeroAlpha() {
+      var palette = new goog.ui.HsvaPalette(null, undefined, 0);
+      assertEquals(0, palette.getAlpha());
+    }
+    function testOptionalInitialColor() {
+      var alpha = 0.5;
+      var color = '#0000ff';
+      var palette = new goog.ui.HsvaPalette(null, color, alpha);
+      assertEquals(color, palette.getColor());
+      assertEquals(alpha, palette.getAlpha());
+    }
+    function testCustomClassName() {
+      var customClassName = 'custom-plouf';
+      var customClassPalette =
+          new goog.ui.HsvaPalette(null, null, null, customClassName);
+      customClassPalette.createDom();
+      assertTrue(goog.dom.classes.has(customClassPalette.getElement(),
+                                      customClassName));
+    }
+    function testSetColor() {
+      var color = '#abcdef01';
+      samplePalette.setColorRgbaHex(color);
+      assertEquals(color,
+          goog.color.alpha.parse(samplePalette.getColorRgbaHex()).hex);
+    }
+    function testRender() {
+      samplePalette.render(document.getElementById('sandbox'));
+      assertTrue(samplePalette.isInDocument());
+      var elem = samplePalette.getElement();
+      assertNotNull(elem);
+      assertEquals(goog.dom.TagName.DIV, elem.tagName);
+      if (goog.userAgent.IE && !goog.userAgent.isVersion('7')) {
+        assertSameElements('On IE6, the noalpha class must be present',
+            ['goog-hsva-palette', 'goog-hsva-palette-noalpha'],
+            goog.dom.classes.get(elem));
+      } else {
+        assertEquals('The noalpha class must not be present',
+           'goog-hsva-palette', elem.className);
+      }
+    }
+    function testNoLeftOverListenersAfterDispose() {
+      var initialListenerCount = goog.events.getTotalListenerCount();
+      samplePalette.render(document.getElementById('sandbox'));
+      samplePalette.dispose();
+      assertEquals(initialListenerCount, goog.events.getTotalListenerCount());
+    }
+    function testInputColor() {
+      samplePalette.render(document.getElementById('sandbox'));
+      var color = '#00112233';
+      samplePalette.inputEl_.value = color;
+      samplePalette.handleInput(null);
+      assertEquals(color,
+          goog.color.alpha.parse(samplePalette.getColorRgbaHex()).hex);
+    }
+    function testHandleMouseMoveAlpha() {
+      samplePalette.render(document.getElementById('sandbox'));
+      stubs.set(goog.dom, 'getPageScroll', function() {
+        return new goog.math.Coordinate(0, 0);
+      });
+      // Lowering the opacity of a dark, opaque red should yield a
+      // more transparent red.
+      samplePalette.setColorRgbaHex('#630c0000');
+      goog.style.setPageOffset(samplePalette.aImageEl_, 0, 0);
+      goog.style.setSize(samplePalette.aImageEl_, 10, 100);
+      var boundaries = goog.style.getBounds(samplePalette.aImageEl_);
+      var event = new goog.events.Event();
+      event.clientY = boundaries.top;
+      samplePalette.handleMouseMoveA_(boundaries, event);
+      assertEquals('#630c00ff', samplePalette.getColorRgbaHex());
+    }
+    function testSwatchOpacity() {
+      samplePalette.render(document.getElementById('sandbox'));
+      samplePalette.setAlpha(1);
+      assertEquals(1, goog.style.getOpacity(samplePalette.swatchEl_));
+      samplePalette.setAlpha(0x99 / 0xff);
+      assertEquals(0.6, goog.style.getOpacity(samplePalette.swatchEl_));
+      samplePalette.setAlpha(0);
+      assertEquals(0, goog.style.getOpacity(samplePalette.swatchEl_));
+    }
+    function testNoTransparencyBehavior() {
+      samplePalette.render(document.getElementById('sandbox'));
+      samplePalette.inputEl_.value = '#abcdef22';
+      samplePalette.handleInput(null);
+      samplePalette.inputEl_.value = '#abcdef';
+      samplePalette.handleInput(null);
+      assertEquals(1, goog.style.getOpacity(samplePalette.swatchEl_));
+    }
+  </script>
+</body>
+</html>

data/lib/middleman-wizard-template/template/closure/library/closure/goog/ui/hsvpalette.js ADDED Viewed

@@ -0,0 +1,485 @@
+// Copyright 2008 The Closure Library Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS-IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+/**
+ * @fileoverview An HSV (hue/saturation/value) color palette/picker
+ * implementation. Inspired by examples like
+ * http://johndyer.name/lab/colorpicker/ and the author's initial work. This
+ * control allows for more control in picking colors than a simple swatch-based
+ * palette. Without the styles from the demo css file, only a hex color label
+ * and input field show up.
+ *
+ * @author arv@google.com (Erik Arvidsson)
+ * @author smcbride@google.com (Sean McBride)
+ * @author manucornet@google.com (Manu Cornet)
+ * @see ../demos/hsvpalette.html
+ */
+goog.provide('goog.ui.HsvPalette');
+goog.require('goog.color');
+goog.require('goog.dom');
+goog.require('goog.dom.DomHelper');
+goog.require('goog.events');
+goog.require('goog.events.Event');
+goog.require('goog.events.EventType');
+goog.require('goog.events.InputHandler');
+goog.require('goog.style');
+goog.require('goog.style.bidi');
+goog.require('goog.ui.Component');
+goog.require('goog.ui.Component.EventType');
+goog.require('goog.userAgent');
+/**
+ * Creates an HSV palette. Allows a user to select the hue, saturation and
+ * value/brightness.
+ * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
+ * @param {string=} opt_color Optional initial color (default is red).
+ * @param {string=} opt_class Optional base for creating classnames (default is
+ *     goog.getCssName('goog-hsv-palette')).
+ * @extends {goog.ui.Component}
+ * @constructor
+ */
+goog.ui.HsvPalette = function(opt_domHelper, opt_color, opt_class) {
+  goog.ui.Component.call(this, opt_domHelper);
+  this.setColor_(opt_color || '#f00');
+  /**
+   * The base class name for the component.
+   * @type {string}
+   * @private
+   */
+  this.class_ = opt_class || goog.getCssName('goog-hsv-palette');
+  /**
+   * The document which is being listened to.
+   * type {HTMLDocument}
+   * @private
+   */
+  this.document_ = this.getDomHelper().getDocument();
+};
+goog.inherits(goog.ui.HsvPalette, goog.ui.Component);
+// TODO(user): Make this inherit from goog.ui.Control and split this into
+// a control and a renderer.
+/**
+ * DOM element representing the hue/saturation background image.
+ * @type {Element}
+ * @private
+ */
+goog.ui.HsvPalette.prototype.hsImageEl_;
+/**
+ * DOM element representing the hue/saturation handle.
+ * @type {Element}
+ * @private
+ */
+goog.ui.HsvPalette.prototype.hsHandleEl_;
+/**
+ * DOM element representing the value background image.
+ * @type {Element}
+ * @private
+ */
+goog.ui.HsvPalette.prototype.vImageEl_;
+/**
+ * DOM element representing the value handle.
+ * @type {Element}
+ * @private
+ */
+goog.ui.HsvPalette.prototype.vHandleEl_;
+/**
+ * DOM element representing the current color swatch.
+ * @type {Element}
+ * @private
+ */
+goog.ui.HsvPalette.prototype.swatchEl_;
+/**
+ * DOM element representing the hex color input text field.
+ * @type {Element}
+ * @private
+ */
+goog.ui.HsvPalette.prototype.inputEl_;
+/**
+ * Input handler object for the hex value input field.
+ * @type {goog.events.InputHandler}
+ * @private
+ */
+goog.ui.HsvPalette.prototype.inputHandler_;
+/**
+ * Listener key for the mousemove event (during a drag operation).
+ * @type {?number}
+ * @private
+ */
+goog.ui.HsvPalette.prototype.mouseMoveListener_;
+/**
+ * Listener key for the mouseup event (during a drag operation).
+ * @type {?number}
+ * @private
+ */
+goog.ui.HsvPalette.prototype.mouseUpListener_;
+/**
+ * Gets the color that is currently selected in this color picker.
+ * @return {string} The string of the selected color.
+ */
+goog.ui.HsvPalette.prototype.getColor = function() {
+  return this.color_;
+};
+/**
+ * Alpha transparency of the currently selected color, in [0, 1].
+ * For the HSV palette this always returns 1. The HSVA palette overrides
+ * this method.
+ * @return {number} The current alpha value.
+ */
+goog.ui.HsvPalette.prototype.getAlpha = function() {
+  return 1;
+};
+/**
+ * Updates the text entry field.
+ * @protected
+ */
+goog.ui.HsvPalette.prototype.updateInput = function() {
+  var parsed;
+  try {
+    parsed = goog.color.parse(this.inputEl_.value).hex;
+  } catch (e) {
+    // ignore
+  }
+  if (this.color_ != parsed) {
+    this.inputEl_.value = this.color_;
+  }
+};
+/**
+ * Sets which color is selected and update the UI.
+ * @param {string} color The selected color.
+ */
+goog.ui.HsvPalette.prototype.setColor = function(color) {
+  if (color != this.color_) {
+    this.setColor_(color);
+    this.updateUi();
+    this.dispatchEvent(goog.ui.Component.EventType.ACTION);
+  }
+};
+/**
+ * Sets which color is selected.
+ * @param {string} color The selected color.
+ * @private
+ */
+goog.ui.HsvPalette.prototype.setColor_ = function(color) {
+  var rgbHex = goog.color.parse(color).hex;
+  var rgbArray = goog.color.hexToRgb(rgbHex);
+  this.hsv_ = goog.color.rgbArrayToHsv(rgbArray);
+  // Hue is divided by 360 because the documentation for goog.color is currently
+  // incorrect.
+  // TODO(user): Fix this, see http://1324469 .
+  this.hsv_[0] = this.hsv_[0] / 360;
+  this.color_ = rgbHex;
+};
+/**
+ * Alters the hue, saturation, and/or value of the currently selected color and
+ * updates the UI.
+ * @param {?number=} opt_hue (optional) hue in [0, 1].
+ * @param {?number=} opt_saturation (optional) saturation in [0, 1].
+ * @param {?number=} opt_value (optional) value in [0, 255].
+ */
+goog.ui.HsvPalette.prototype.setHsv = function(opt_hue,
+                                               opt_saturation,
+                                               opt_value) {
+  if (opt_hue != null || opt_saturation != null || opt_value != null) {
+    this.setHsv_(opt_hue, opt_saturation, opt_value);
+    this.updateUi();
+    this.dispatchEvent(goog.ui.Component.EventType.ACTION);
+  }
+};
+/**
+ * Alters the hue, saturation, and/or value of the currently selected color.
+ * @param {?number=} opt_hue (optional) hue in [0, 1].
+ * @param {?number=} opt_saturation (optional) saturation in [0, 1].
+ * @param {?number=} opt_value (optional) value in [0, 255].
+ * @private
+ */
+goog.ui.HsvPalette.prototype.setHsv_ = function(opt_hue,
+                                                opt_saturation,
+                                                opt_value) {
+  this.hsv_[0] = (opt_hue != null) ? opt_hue : this.hsv_[0];
+  this.hsv_[1] = (opt_saturation != null) ? opt_saturation : this.hsv_[1];
+  this.hsv_[2] = (opt_value != null) ? opt_value : this.hsv_[2];
+  // Hue is multiplied by 360 because the documentation for goog.color is
+  // currently incorrect.
+  // TODO(user): Fix this, see http://1324469 .
+  this.color_ = goog.color.hsvArrayToHex([
+    this.hsv_[0] * 360,
+    this.hsv_[1],
+    this.hsv_[2]
+  ]);
+};
+/**
+ * HsvPalettes cannot be used to decorate pre-existing html, since the
+ * structure they build is fairly complicated.
+ * @param {Element} element Element to decorate.
+ * @return {boolean} Returns always false.
+ * @override
+ */
+goog.ui.HsvPalette.prototype.canDecorate = function(element) {
+  return false;
+};
+/** @override */
+goog.ui.HsvPalette.prototype.createDom = function() {
+  var dom = this.getDomHelper();
+  var noalpha = (goog.userAgent.IE && !goog.userAgent.isVersion('7')) ?
+      ' ' + goog.getCssName(this.class_, 'noalpha') : '';
+  var element = dom.createDom(goog.dom.TagName.DIV,
+      this.class_ + noalpha,
+      dom.createDom(goog.dom.TagName.DIV,
+          goog.getCssName(this.class_, 'hs-backdrop')),
+      this.hsImageEl_ = dom.createDom(goog.dom.TagName.DIV,
+          goog.getCssName(this.class_, 'hs-image'),
+          this.hsHandleEl_ = dom.createDom(goog.dom.TagName.DIV,
+              goog.getCssName(this.class_, 'hs-handle'))),
+      this.vImageEl_ = dom.createDom(goog.dom.TagName.DIV,
+          goog.getCssName(this.class_, 'v-image')),
+      this.vHandleEl_ = dom.createDom(goog.dom.TagName.DIV,
+          goog.getCssName(this.class_, 'v-handle')),
+      this.swatchEl_ = dom.createDom(goog.dom.TagName.DIV,
+          goog.getCssName(this.class_, 'swatch')),
+      dom.createDom('label', null,
+          //dom.createDom('span', null, 'Hex color '),
+          this.inputEl_ = dom.createDom('input',
+              {'class': goog.getCssName(this.class_, 'input'),
+               'type': 'text', 'dir': 'ltr'})));
+  this.setElementInternal(element);
+  // TODO(arv): Set tabIndex
+};
+/**
+ * Renders the color picker inside the provided element. This will override the
+ * current content of the element.
+ * @override
+ */
+goog.ui.HsvPalette.prototype.enterDocument = function() {
+  goog.ui.HsvPalette.superClass_.enterDocument.call(this);
+  // TODO(user): Accessibility.
+  this.updateUi();
+  var handler = this.getHandler();
+  handler.listen(this.getElement(), goog.events.EventType.MOUSEDOWN,
+      this.handleMouseDown, false, this);
+  // Cannot create InputHandler in createDom because IE throws an exception
+  // on document.activeElement
+  if (!this.inputHandler_) {
+    this.inputHandler_ = new goog.events.InputHandler(this.inputEl_);
+  }
+  handler.listen(this.inputHandler_,
+      goog.events.InputHandler.EventType.INPUT, this.handleInput, false, this);
+};
+/** @override */
+goog.ui.HsvPalette.prototype.disposeInternal = function() {
+  goog.ui.HsvPalette.superClass_.disposeInternal.call(this);
+  delete this.hsImageEl_;
+  delete this.hsHandleEl_;
+  delete this.vImageEl_;
+  delete this.vHandleEl_;
+  delete this.swatchEl_;
+  delete this.inputEl_;
+  if (this.inputHandler_) {
+    this.inputHandler_.dispose();
+    delete this.inputHandler_;
+  }
+  goog.events.unlistenByKey(this.mouseMoveListener_);
+  goog.events.unlistenByKey(this.mouseUpListener_);
+};
+/**
+ * Updates the position, opacity, and styles for the UI representation of the
+ * palette.
+ * @protected
+ */
+goog.ui.HsvPalette.prototype.updateUi = function() {
+  if (this.isInDocument()) {
+    var h = this.hsv_[0];
+    var s = this.hsv_[1];
+    var v = this.hsv_[2];
+    var left = this.hsImageEl_.offsetWidth * h;
+    // We don't use a flipped gradient image in RTL, so we need to flip the
+    // offset in RTL so that it still hovers over the correct color on the
+    // gradiant.
+    if (this.isRightToLeft()) {
+      left = this.hsImageEl_.offsetWidth - left;
+    }
+    // We also need to account for the handle size.
+    var handleOffset = Math.ceil(this.hsHandleEl_.offsetWidth / 2);
+    left -= handleOffset;
+    var top = this.hsImageEl_.offsetHeight * (1 - s);
+    // Account for the handle size.
+    top -= Math.ceil(this.hsHandleEl_.offsetHeight / 2);
+    goog.style.bidi.setPosition(this.hsHandleEl_, left, top,
+        this.isRightToLeft());
+    top = this.vImageEl_.offsetTop -
+        Math.floor(this.vHandleEl_.offsetHeight / 2) +
+        this.vImageEl_.offsetHeight * ((255 - v) / 255);
+    this.vHandleEl_.style.top = top + 'px';
+    goog.style.setOpacity(this.hsImageEl_, (v / 255));
+    goog.style.setStyle(this.vImageEl_, 'background-color',
+        goog.color.hsvToHex(this.hsv_[0] * 360, this.hsv_[1], 255));
+    goog.style.setStyle(this.swatchEl_, 'background-color', this.color_);
+    goog.style.setStyle(this.swatchEl_, 'color',
+                        (this.hsv_[2] > 255 / 2) ? '#000' : '#fff');
+    this.updateInput();
+  }
+};
+/**
+ * Handles mousedown events on palette UI elements.
+ * @param {goog.events.BrowserEvent} e Event object.
+ * @protected
+ */
+goog.ui.HsvPalette.prototype.handleMouseDown = function(e) {
+  if (e.target == this.vImageEl_ || e.target == this.vHandleEl_) {
+    // Setup value change listeners
+    var b = goog.style.getBounds(this.vImageEl_);
+    this.handleMouseMoveV_(b, e);
+    this.mouseMoveListener_ = goog.events.listen(this.document_,
+        goog.events.EventType.MOUSEMOVE,
+        goog.bind(this.handleMouseMoveV_, this, b));
+    this.mouseUpListener_ = goog.events.listen(this.document_,
+        goog.events.EventType.MOUSEUP, this.handleMouseUp_, false, this);
+  } else if (e.target == this.hsImageEl_ || e.target == this.hsHandleEl_) {
+    // Setup hue/saturation change listeners
+    var b = goog.style.getBounds(this.hsImageEl_);
+    this.handleMouseMoveHs_(b, e);
+    this.mouseMoveListener_ = goog.events.listen(this.document_,
+        goog.events.EventType.MOUSEMOVE,
+        goog.bind(this.handleMouseMoveHs_, this, b));
+    this.mouseUpListener_ = goog.events.listen(this.document_,
+        goog.events.EventType.MOUSEUP, this.handleMouseUp_, false, this);
+  }
+};
+/**
+ * Handles mousemove events on the document once a drag operation on the value
+ * slider has started.
+ * @param {goog.math.Rect} b Boundaries of the value slider object at the start
+ *     of the drag operation.
+ * @param {goog.events.BrowserEvent} e Event object.
+ * @private
+ */
+goog.ui.HsvPalette.prototype.handleMouseMoveV_ = function(b, e) {
+  e.preventDefault();
+  var vportPos = this.getDomHelper().getDocumentScroll();
+  var newV = Math.round(
+      255 * (b.top + b.height - Math.min(
+          Math.max(vportPos.y + e.clientY, b.top),
+          b.top + b.height)
+      ) / b.height
+  );
+  this.setHsv(null, null, newV);
+};
+/**
+ * Handles mousemove events on the document once a drag operation on the
+ * hue/saturation slider has started.
+ * @param {goog.math.Rect} b Boundaries of the value slider object at the start
+ *     of the drag operation.
+ * @param {goog.events.BrowserEvent} e Event object.
+ * @private
+ */
+goog.ui.HsvPalette.prototype.handleMouseMoveHs_ = function(b, e) {
+  e.preventDefault();
+  var vportPos = this.getDomHelper().getDocumentScroll();
+  var newH = (Math.min(Math.max(vportPos.x + e.clientX, b.left),
+      b.left + b.width) - b.left) / b.width;
+  var newS = (-Math.min(Math.max(vportPos.y + e.clientY, b.top),
+      b.top + b.height) + b.top + b.height) / b.height;
+  this.setHsv(newH, newS, null);
+};
+/**
+ * Handles mouseup events on the document, which ends a drag operation.
+ * @param {goog.events.Event} e Event object.
+ * @private
+ */
+goog.ui.HsvPalette.prototype.handleMouseUp_ = function(e) {
+  goog.events.unlistenByKey(this.mouseMoveListener_);
+  goog.events.unlistenByKey(this.mouseUpListener_);
+};
+/**
+ * Handles input events on the hex value input field.
+ * @param {goog.events.Event} e Event object.
+ * @protected
+ */
+goog.ui.HsvPalette.prototype.handleInput = function(e) {
+  if (/^#[0-9a-f]{6}$/i.test(this.inputEl_.value)) {
+    this.setColor(this.inputEl_.value);
+  }
+};