+
+
+
+
+
diff --git a/examples/autosizeissue/index.js b/examples/autosizeissue/index.js
new file mode 100644
index 000000000..f2a28d56c
--- /dev/null
+++ b/examples/autosizeissue/index.js
@@ -0,0 +1,21471 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o CAVEAT: Not to be confused with Underscore-style .extend() which is something else entirely. I've used the name "extend" here because other packages (like Backbone.js) use it this way. You are free to call it whatever you want when you "require" it, such as `var inherits = require('extend')`.
+ *
+ * Provide a constructor as the context and any prototype additions you require in the first argument.
+ *
+ * For example, if you wish to be able to extend `BaseConstructor` to a new constructor with prototype overrides and/or additions, basic usage is:
+ *
+ * ```javascript
+ * var Base = require('extend-me').Base;
+ * var BaseConstructor = Base.extend(basePrototype); // mixes in .extend
+ * var ChildConstructor = BaseConstructor.extend(childPrototypeOverridesAndAdditions);
+ * var GrandchildConstructor = ChildConstructor.extend(grandchildPrototypeOverridesAndAdditions);
+ * ```
+ *
+ * This function (`extend()`) is added to the new extended object constructor as a property `.extend`, essentially making the object constructor itself easily "extendable." (Note: This is a property of each constructor and not a method of its prototype!)
+ *
+ * @param {string} [extendedClassName] - This is simply added to the prototype as $$CLASS_NAME. Useful for debugging because all derived constructors appear to have the same name ("Constructor") in the debugger. This property is ignored unless `extend.debug` is explicitly set to a truthy value.
+ *
+ * @param {extendedPrototypeAdditionsObject} [prototypeAdditions] - Object with members to copy to new constructor's prototype. Most members will be copied to the prototype. Some members, however, have special meanings as explained in the {@link extendedPrototypeAdditionsObject|type definition} (and may or may not be copied to the prototype).
+ *
+ * @property {boolean} [debug] - See parameter `extendedClassName` _(above)_.
+ *
+ * @property {object} Base - A convenient base class from which all other classes can be extended.
+ *
+ * @memberOf extend-me
+ */
+function extend(extendedClassName, prototypeAdditions) {
+ switch (arguments.length) {
+ case 0:
+ prototypeAdditions = {};
+ break;
+ case 1:
+ prototypeAdditions = extendedClassName;
+ if (typeof prototypeAdditions !== 'object') {
+ throw 'Single parameter overload must be object.';
+ }
+ extendedClassName = undefined;
+ break;
+ case 2:
+ if (typeof extendedClassName !== 'string' || typeof prototypeAdditions !== 'object') {
+ throw 'Two parameter overload must be string, object.';
+ }
+ break;
+ default:
+ throw 'Too many parameters';
+ }
+
+ function Constructor() {
+ if (prototypeAdditions.preInitialize) {
+ prototypeAdditions.preInitialize.apply(this, arguments);
+ }
+
+ initializePrototypeChain.apply(this, arguments);
+
+ if (prototypeAdditions.postInitialize) {
+ prototypeAdditions.postInitialize.apply(this, arguments);
+ }
+ }
+
+ Constructor.extend = extend;
+
+ var prototype = Constructor.prototype = Object.create(this.prototype);
+ prototype.constructor = Constructor;
+
+ if (extendedClassName && extend.debug) {
+ prototype.$$CLASS_NAME = extendedClassName;
+ }
+
+ for (var key in prototypeAdditions) {
+ if (prototypeAdditions.hasOwnProperty(key)) {
+ var value = prototypeAdditions[key];
+ switch (key) {
+ case 'initializeOwn':
+ // already called above; not needed in prototype
+ break;
+ case 'aliases':
+ for (var alias in value) {
+ if (value.hasOwnProperty(alias)) {
+ makeAlias(value[alias], alias);
+ }
+ }
+ break;
+ default:
+ if (typeof value === 'string' && value[0] === '#') {
+ makeAlias(value, key.substr(1));
+ } else {
+ prototype[key] = value;
+ }
+ }
+ }
+ }
+
+ return Constructor;
+
+ function makeAlias(value, key) { // eslint-disable-line no-shadow
+ prototype[key] = prototypeAdditions[value];
+ }
+}
+
+extend.Base = function () {};
+extend.Base.extend = extend;
+
+/** @typedef {function} extendedConstructor
+ * @property prototype.super - A reference to the prototype this constructor was extended from.
+ * @property [extend] - If `prototypeAdditions.extendable` was truthy, this will be a reference to {@link extend.extend|extend}.
+ */
+
+/** @typedef {object} extendedPrototypeAdditionsObject
+ * @property {function} [initialize] - Additional constructor code for new object. This method is added to the new constructor's prototype. Gets passed new object as context + same args as constructor itself. Called on instantiation after similar function in all ancestors called with same signature.
+ * @property {function} [initializeOwn] - Additional constructor code for new object. This method is added to the new constructor's prototype. Gets passed new object as context + same args as constructor itself. Called on instantiation after (all) the `initialize` function(s).
+ * @property {object} [aliases] - Hash of aliases for prototype members in form `{ key: 'member', ... }` where `key` is the name of an alieas and `'member'` is the name of an existing member in the prototype. Each such key is added to the prototype as a reference to the named member. (The `aliases` object itself is *not* added to prototype.) Alternatively:
+ * @property {string} [keys] - Arbitrary property names defined here with string values starting with a `#` character will alias the actual properties named in the strings (following the `#`). This is an alternative to providing an `aliases` hash, perhaps simpler (though subtler). (Use arbitrary identifiers here; don't use the name `keys`!)
+ * @property {*} [arbitraryProperties] - Any additional arbitrary properties defined here will be added to the new constructor's prototype. (Use arbitrary identifiers here; don't use the name `aribitraryProperties`!)
+ */
+
+/** @summary Call all `initialize` methods found in prototype chain.
+ * @desc This recursive routine is called by the constructor.
+ * 1. Walks back the prototype chain to `Object`'s prototype
+ * 2. Walks forward to new object, calling any `initialize` methods it finds along the way with the same context and arguments with which the constructor was called.
+ * @private
+ * @memberOf extend-me
+ */
+function initializePrototypeChain() {
+ var term = this,
+ args = arguments;
+ recur(term);
+
+ function recur(obj) {
+ var proto = Object.getPrototypeOf(obj);
+ if (proto.constructor !== Object) {
+ recur(proto);
+ if (proto.initialize) {
+ proto.initialize.apply(term, args);
+ }
+ }
+ }
+}
+
+module.exports = extend;
+
+},{}],4:[function(require,module,exports){
+'use strict';
+
+/* eslint-env node, browser */
+
+var cssInjector = require('css-injector');
+
+/**
+ * @constructor FinBar
+ * @summary Create a scrollbar object.
+ * @desc Creating a scrollbar is a three-step process:
+ *
+ * 1. Instantiate the scrollbar object by calling this constructor function. Upon instantiation, the DOM element for the scrollbar (with a single child element for the scrollbar "thumb") is created but is not insert it into the DOM.
+ * 2. After instantiation, it is the caller's responsibility to insert the scrollbar, {@link FinBar#bar|this.bar}, into the DOM.
+ * 3. After insertion, the caller must call {@link FinBar#resize|resize()} at least once to size and position the scrollbar and its thumb. After that, `resize()` should also be called repeatedly on resize events (as the content element is being resized).
+ *
+ * Suggested configurations:
+ * * _**Unbound**_
+ * The scrollbar serves merely as a simple range (slider) control. Omit both `options.onchange` and `options.content`.
+ * * _**Bound to virtual content element**_
+ * Virtual content is projected into the element using a custom event handler supplied by the programmer in `options.onchange`. A typical use case would be to handle scrolling of the virtual content. Other use cases include data transformations, graphics transformations, _etc._
+ * * _**Bound to real content**_
+ * Set `options.content` to the "real" content element but omit `options.onchange`. This will cause the scrollbar to use the built-in event handler (`this.scrollRealContent`) which implements smooth scrolling of the content element within the container.
+ *
+ * @param {finbarOptions} [options={}] - Options object. See the type definition for member details.
+ */
+function FinBar(options) {
+
+ // make bound versions of all the mouse event handler
+ var bound = this._bound = {};
+ for (key in handlersToBeBound) {
+ bound[key] = handlersToBeBound[key].bind(this);
+ }
+
+ /**
+ * @name thumb
+ * @summary The generated scrollbar thumb element.
+ * @desc The thumb element's parent element is always the {@link FinBar#bar|bar} element.
+ *
+ * This property is typically referenced internally only. The size and position of the thumb element is maintained by `_calcThumb()`.
+ * @type {Element}
+ * @memberOf FinBar.prototype
+ */
+ var thumb = document.createElement('div');
+ thumb.classList.add('thumb');
+ thumb.onclick = bound.shortStop;
+ thumb.onmouseover = bound.onmouseover;
+ this.thumb = thumb;
+
+ /**
+ * @name bar
+ * @summary The generated scrollbar element.
+ * @desc The caller inserts this element into the DOM (typically into the content container) and then calls its {@link FinBar#resize|resize()} method.
+ *
+ * Thus the node tree is typically:
+ * * A **content container** element, which contains:
+ * * The content element(s)
+ * * This **scrollbar element**, which in turn contains:
+ * * The **thumb element**
+ *
+ * @type {Element}
+ * @memberOf FinBar.prototype
+ */
+ var bar = document.createElement('div');
+
+ bar.classList.add('finbar-vertical');
+
+ bar.appendChild(thumb);
+ if (this.paging) {
+ bar.onclick = bound.onclick;
+ }
+ this.bar = bar;
+
+ options = options || {};
+
+ // presets
+ this.orientation = 'vertical';
+ this._min = this._index = 0;
+ this._max = 100;
+
+ // options
+ for (var key in options) {
+ if (options.hasOwnProperty(key)) {
+ var option = options[key];
+ switch (key) {
+
+ case 'index':
+ this._index = option;
+ break;
+
+ case 'range':
+ validRange(option);
+ this._min = option.min;
+ this._max = option.max;
+ this.contentSize = option.max - option.min + 1;
+ break;
+
+ default:
+ if (
+ key.charAt(0) !== '_' &&
+ typeof FinBar.prototype[key] !== 'function'
+ ) {
+ // override prototype defaults for standard ;
+ // extend with additional properties (for use in onchange event handlers)
+ this[key] = option;
+ }
+ break;
+
+ }
+ }
+ }
+
+ cssInjector(cssFinBars, 'finbar-base', options.cssStylesheetReferenceElement);
+}
+
+FinBar.prototype = {
+
+ /**
+ * @summary The scrollbar orientation.
+ * @desc Set by the constructor to either `'vertical'` or `'horizontal'`. See the similarly named property in the {@link finbarOptions} object.
+ *
+ * Useful values are `'vertical'` (the default) or `'horizontal'`.
+ *
+ * Setting this property resets `this.oh` and `this.deltaProp` and changes the class names so as to reposition the scrollbar as per the CSS rules for the new orientation.
+ * @default 'vertical'
+ * @type {string}
+ * @memberOf FinBar.prototype
+ */
+ set orientation(orientation) {
+ if (orientation === this._orientation) {
+ return;
+ }
+
+ this._orientation = orientation;
+
+ /**
+ * @readonly
+ * @name oh
+ * @summary Orientation hash for this scrollbar.
+ * @desc Set by the `orientation` setter to either the vertical or the horizontal orientation hash. The property should always be synchronized with `orientation`; do not update directly!
+ *
+ * This object is used internally to access scrollbars' DOM element properties in a generalized way without needing to constantly query the scrollbar orientation. For example, instead of explicitly coding `this.bar.top` for a vertical scrollbar and `this.bar.left` for a horizontal scrollbar, simply code `this.bar[this.oh.leading]` instead. See the {@link orientationHashType} definition for details.
+ *
+ * This object is useful externally for coding generalized {@link finbarOnChange} event handler functions that serve both horizontal and vertical scrollbars.
+ * @type {orientationHashType}
+ * @memberOf FinBar.prototype
+ */
+ this.oh = orientationHashes[this._orientation];
+
+ if (!this.oh) {
+ error('Invalid value for `options._orientation.');
+ }
+
+ /**
+ * @name deltaProp
+ * @summary The name of the `WheelEvent` property this scrollbar should listen to.
+ * @desc Set by the constructor. See the similarly named property in the {@link finbarOptions} object.
+ *
+ * Useful values are `'deltaX'`, `'deltaY'`, or `'deltaZ'`. A value of `null` means to ignore mouse wheel events entirely.
+ *
+ * The mouse wheel is one-dimensional and only emits events with `deltaY` data. This property is provided so that you can override the default of `'deltaX'` with a value of `'deltaY'` on your horizontal scrollbar primarily to accommodate certain "panoramic" interface designs where the mouse wheel should control horizontal rather than vertical scrolling. Just give `{ deltaProp: 'deltaY' }` in your horizontal scrollbar instantiation.
+ *
+ * Caveat: Note that a 2-finger drag on an Apple trackpad emits events with _both_ `deltaX ` and `deltaY` data so you might want to delay making the above adjustment until you can determine that you are getting Y data only with no X data at all (which is a sure bet you on a mouse wheel rather than a trackpad).
+
+ * @type {object|null}
+ * @memberOf FinBar.prototype
+ */
+ this.deltaProp = this.oh.delta;
+
+ this.bar.className = this.bar.className.replace(/(vertical|horizontal)/g, orientation);
+
+ if (this.bar.style.cssText || this.thumb.style.cssText) {
+ this.bar.removeAttribute('style');
+ this.thumb.removeAttribute('style');
+ this.resize();
+ }
+ },
+ get orientation() {
+ return this._orientation;
+ },
+
+ /**
+ * @summary Callback for scroll events.
+ * @desc Set by the constructor via the similarly named property in the {@link finbarOptions} object. After instantiation, `this.onchange` may be updated directly.
+ *
+ * This event handler is called whenever the value of the scrollbar is changed through user interaction. The typical use case is when the content is scrolled. It is called with the `FinBar` object as its context and the current value of the scrollbar (its index, rounded) as the only parameter.
+ *
+ * Set this property to `null` to stop emitting such events.
+ * @type {function(number)|null}
+ * @memberOf FinBar.prototype
+ */
+ onchange: null,
+
+ /**
+ * @summary Add a CSS class name to the bar element's class list.
+ * @desc Set by the constructor. See the similarly named property in the {@link finbarOptions} object.
+ *
+ * The bar element's class list will always include `finbar-vertical` (or `finbar-horizontal` based on the current orientation). Whenever this property is set to some value, first the old prefix+orientation is removed from the bar element's class list; then the new prefix+orientation is added to the bar element's class list. This property causes _an additional_ class name to be added to the bar element's class list. Therefore, this property will only add at most one additional class name to the list.
+ *
+ * To remove _classname-orientation_ from the bar element's class list, set this property to a falsy value, such as `null`.
+ *
+ * > NOTE: You only need to specify an additional class name when you need to have mulltiple different styles of scrollbars on the same page. If this is not a requirement, then you don't need to make a new class; you would just create some additional rules using the same selectors in the built-in stylesheet (../css/finbars.css):
+ * *`div.finbar-vertical` (or `div.finbar-horizontal`) for the scrollbar
+ * *`div.finbar-vertical > div` (or `div.finbar-horizontal > div`) for the "thumb."
+ *
+ * Of course, your rules should come after the built-ins.
+ * @type {string}
+ * @memberOf FinBar.prototype
+ */
+ set classPrefix(prefix) {
+ if (this._classPrefix) {
+ this.bar.classList.remove(this._classPrefix + this.orientation);
+ }
+
+ this._classPrefix = prefix;
+
+ if (prefix) {
+ this.bar.classList.add(prefix + '-' + this.orientation);
+ }
+ },
+ get classPrefix() {
+ return this._classPrefix;
+ },
+
+ /**
+ * @name increment
+ * @summary Number of scrollbar index units representing a pageful. Used exclusively for paging up and down and for setting thumb size relative to content size.
+ * @desc Set by the constructor. See the similarly named property in the {@link finbarOptions} object.
+ *
+ * Can also be given as a parameter to the {@link FinBar#resize|resize} method, which is pertinent because content area size changes affect the definition of a "pageful." However, you only need to do this if this value is being used. It not used when:
+ * * you define `paging.up` and `paging.down`
+ * * your scrollbar is using `scrollRealContent`
+ * @type {number}
+ * @memberOf FinBar.prototype
+ */
+ increment: 1,
+
+ /**
+ * @name barStyles
+ * @summary Scrollbar styles to be applied by {@link FinBar#resize|resize()}.
+ * @desc Set by the constructor. See the similarly named property in the {@link finbarOptions} object.
+ *
+ * This is a value to be assigned to {@link FinBar#styles|styles} on each call to {@link FinBar#resize|resize()}. That is, a hash of values to be copied to the scrollbar element's style object on resize; or `null` for none.
+ *
+ * @see {@link FinBar#style|style}
+ * @type {finbarStyles|null}
+ * @memberOf FinBar.prototype
+ */
+ barStyles: null,
+
+ /**
+ * @name style
+ * @summary Additional scrollbar styles.
+ * @desc See type definition for more details. These styles are applied directly to the scrollbar's `bar` element.
+ *
+ * Values are adjusted as follows before being applied to the element:
+ * 1. Included "pseudo-property" names from the scrollbar's orientation hash, {@link FinBar#oh|oh}, are translated to actual property names before being applied.
+ * 2. When there are margins, percentages are translated to absolute pixel values because CSS ignores margins in its percentage calculations.
+ * 3. If you give a value without a unit (a raw number), "px" unit is appended.
+ *
+ * General notes:
+ * 1. It is always preferable to specify styles via a stylesheet. Only set this property when you need to specifically override (a) stylesheet value(s).
+ * 2. Can be set directly or via calls to the {@link FinBar#resize|resize} method.
+ * 3. Should only be set after the scrollbar has been inserted into the DOM.
+ * 4. Before applying these new values to the element, _all_ in-line style values are reset (by removing the element's `style` attribute), exposing inherited values (from stylesheets).
+ * 5. Empty object has no effect.
+ * 6. Falsey value in place of object has no effect.
+ *
+ * > CAVEAT: Do not attempt to treat the object you assign to this property as if it were `this.bar.style`. Specifically, changing this object after assigning it will have no effect on the scrollbar. You must assign it again if you want it to have an effect.
+ *
+ * @see {@link FinBar#barStyles|barStyles}
+ * @type {finbarStyles}
+ * @memberOf FinBar.prototype
+ */
+ set style(styles) {
+ var keys = Object.keys(styles = extend({}, styles, this._auxStyles));
+
+ if (keys.length) {
+ var bar = this.bar,
+ barRect = bar.getBoundingClientRect(),
+ container = this.container || bar.parentElement,
+ containerRect = container.getBoundingClientRect(),
+ oh = this.oh;
+
+ // Before applying new styles, revert all styles to values inherited from stylesheets
+ bar.removeAttribute('style');
+
+ keys.forEach(function (key) {
+ var val = styles[key];
+
+ if (key in oh) {
+ key = oh[key];
+ }
+
+ if (!isNaN(Number(val))) {
+ val = (val || 0) + 'px';
+ } else if (/%$/.test(val)) {
+ // When bar size given as percentage of container, if bar has margins, restate size in pixels less margins.
+ // (If left as percentage, CSS's calculation will not exclude margins.)
+ var oriented = axis[key],
+ margins = barRect[oriented.marginLeading] + barRect[oriented.marginTrailing];
+ if (margins) {
+ val = parseInt(val, 10) / 100 * containerRect[oriented.size] - margins + 'px';
+ }
+ }
+
+ bar.style[key] = val;
+ });
+ }
+ },
+
+ /**
+ * @readonly
+ * @name paging
+ * @summary Enable page up/dn clicks.
+ * @desc Set by the constructor. See the similarly named property in the {@link finbarOptions} object.
+ *
+ * If truthy, listen for clicks in page-up and page-down regions of scrollbar.
+ *
+ * If an object, call `.paging.up()` on page-up clicks and `.paging.down()` will be called on page-down clicks.
+ *
+ * Changing the truthiness of this value after instantiation currently has no effect.
+ * @type {boolean|object}
+ * @memberOf FinBar.prototype
+ */
+ paging: true,
+
+ /**
+ * @name range
+ * @summary Setter for the minimum and maximum scroll values.
+ * @desc Set by the constructor. These values are the limits for {@link FooBar#index|index}.
+ *
+ * The setter accepts an object with exactly two numeric properties: `.min` which must be less than `.max`. The values are extracted and the object is discarded.
+ *
+ * The getter returns a new object with `.min` and '.max`.
+ *
+ * @type {rangeType}
+ * @memberOf FinBar.prototype
+ */
+ set range(range) {
+ validRange(range);
+ this._min = range.min;
+ this._max = range.max;
+ this.contentSize = range.max - range.min + 1;
+ this.index = this.index; // re-clamp
+ },
+ get range() {
+ return {
+ min: this._min,
+ max: this._max
+ };
+ },
+
+ /**
+ * @summary Index value of the scrollbar.
+ * @desc This is the position of the scroll thumb.
+ *
+ * Setting this value clamps it to {@link FinBar#min|min}..{@link FinBar#max|max}, scroll the content, and moves thumb.
+ *
+ * Getting this value returns the current index. The returned value will be in the range `min`..`max`. It is intentionally not rounded.
+ *
+ * Use this value as an alternative to (or in addition to) using the {@link FinBar#onchange|onchange} callback function.
+ *
+ * @see {@link FinBar#_setScroll|_setScroll}
+ * @type {number}
+ * @memberOf FinBar.prototype
+ */
+ set index(idx) {
+ idx = Math.min(this._max, Math.max(this._min, idx)); // clamp it
+ this._setScroll(idx);
+ // this._setThumbSize();
+ },
+ get index() {
+ return this._index;
+ },
+
+ /**
+ * @private
+ * @summary Move the thumb.
+ * @desc Also displays the index value in the test panel and invokes the callback.
+ * @param idx - The new scroll index, a value in the range `min`..`max`.
+ * @param [scaled=f(idx)] - The new thumb position in pixels and scaled relative to the containing {@link FinBar#bar|bar} element, i.e., a proportional number in the range `0`..`thumbMax`. When omitted, a function of `idx` is used.
+ * @memberOf FinBar.prototype
+ */
+ _setScroll: function (idx, scaled) {
+ this._index = idx;
+
+ // Display the index value in the test panel
+ if (this.testPanelItem && this.testPanelItem.index instanceof Element) {
+ this.testPanelItem.index.innerHTML = Math.round(idx);
+ }
+
+ // Call the callback
+ if (this.onchange) {
+ this.onchange.call(this, Math.round(idx));
+ }
+
+ // Move the thumb
+ if (scaled === undefined) {
+ scaled = (idx - this._min) / (this._max - this._min) * this._thumbMax;
+ }
+ this.thumb.style[this.oh.leading] = scaled + 'px';
+ },
+
+ scrollRealContent: function (idx) {
+ var containerRect = this.content.parentElement.getBoundingClientRect(),
+ sizeProp = this.oh.size,
+ maxScroll = Math.max(0, this.content[sizeProp] - containerRect[sizeProp]),
+ //scroll = Math.min(idx, maxScroll);
+ scroll = (idx - this._min) / (this._max - this._min) * maxScroll;
+ //console.log('scroll: ' + scroll);
+ this.content.style[this.oh.leading] = -scroll + 'px';
+ },
+
+ /**
+ * @summary Recalculate thumb position.
+ *
+ * @desc This method recalculates the thumb size and position. Call it once after inserting your scrollbar into the DOM, and repeatedly while resizing the scrollbar (which typically happens when the scrollbar's parent is resized by user.
+ *
+ * > This function shifts args if first arg omitted.
+ *
+ * @param {number} [increment=this.increment] - Resets {@link FooBar#increment|increment} (see).
+ *
+ * @param {finbarStyles} [barStyles=this.barStyles] - (See type definition for details.) Scrollbar styles to be applied to the bar element.
+ *
+ * Only specify a `barStyles` object when you need to override stylesheet values. If provided, becomes the new default (`this.barStyles`), for use as a default on subsequent calls.
+ *
+ * It is generally the case that the scrollbar's new position is sufficiently described by the current styles. Therefore, it is unusual to need to provide a `barStyles` object on every call to `resize`.
+ *
+ * @returns {FinBar} Self for chaining.
+ * @memberOf FinBar.prototype
+ */
+ resize: function (increment, barStyles) {
+ var bar = this.bar;
+
+ if (!bar.parentNode) {
+ return; // not in DOM yet so nothing to do
+ }
+
+ var container = this.container || bar.parentElement,
+ containerRect = container.getBoundingClientRect();
+
+ // shift args if if 1st arg omitted
+ if (typeof increment === 'object') {
+ barStyles = increment;
+ increment = undefined;
+ }
+
+ this.style = this.barStyles = barStyles || this.barStyles;
+
+ // Bound to real content: Content was given but no onchange handler.
+ // Set up .onchange, .containerSize, and .increment.
+ // Note this only makes sense if your index unit is pixels.
+ if (this.content) {
+ if (!this.onchange) {
+ this.onchange = this.scrollRealContent;
+ this.contentSize = this.content[this.oh.size];
+ this._min = 0;
+ this._max = this.contentSize - 1;
+ }
+ }
+ if (this.onchange === this.scrollRealContent) {
+ this.containerSize = containerRect[this.oh.size];
+ this.increment = this.containerSize / (this.contentSize - this.containerSize) * (this._max - this._min);
+ } else {
+ this.containerSize = 1;
+ this.increment = increment || this.increment;
+ }
+
+ var index = this.index;
+ this.testPanelItem = this.testPanelItem || this._addTestPanelItem();
+ this._setThumbSize();
+ this.index = index;
+
+ if (this.deltaProp !== null) {
+ container.addEventListener('wheel', this._bound.onwheel);
+ }
+
+ return this;
+ },
+
+ /**
+ * @summary Shorten trailing end of scrollbar by thickness of some other scrollbar.
+ * @desc In the "classical" scenario where vertical scroll bar is on the right and horizontal scrollbar is on the bottom, you want to shorten the "trailing end" (bottom and right ends, respectively) of at least one of them so they don't overlay.
+ *
+ * This convenience function is an programmatic alternative to hardcoding the correct style with the correct value in your stylesheet; or setting the correct style with the correct value in the {@link FinBar#barStyles|barStyles} object.
+ *
+ * @see {@link FinBar#foreshortenBy|foreshortenBy}.
+ *
+ * @param {FinBar|null} otherFinBar - Other scrollbar to avoid by shortening this one; `null` removes the trailing space
+ * @returns {FinBar} For chaining
+ */
+ shortenBy: function (otherFinBar) { return this.shortenEndBy('trailing', otherFinBar); },
+
+ /**
+ * @summary Shorten leading end of scrollbar by thickness of some other scrollbar.
+ * @desc Supports non-classical scrollbar scenarios where vertical scroll bar may be on left and horizontal scrollbar may be on top, in which case you want to shorten the "leading end" rather than the trailing end.
+ * @see {@link FinBar#shortenBy|shortenBy}.
+ * @param {FinBar|null} otherFinBar - Other scrollbar to avoid by shortening this one; `null` removes the trailing space
+ * @returns {FinBar} For chaining
+ */
+ foreshortenBy: function (otherFinBar) { return this.shortenEndBy('leading', otherFinBar); },
+
+ /**
+ * @summary Generalized shortening function.
+ * @see {@link FinBar#shortenBy|shortenBy}.
+ * @see {@link FinBar#foreshortenBy|foreshortenBy}.
+ * @param {string} whichEnd - a CSS style property name or an orientation hash name that translates to a CSS style property name.
+ * @param {FinBar|null} otherFinBar - Other scrollbar to avoid by shortening this one; `null` removes the trailing space
+ * @returns {FinBar} For chaining
+ */
+ shortenEndBy: function (whichEnd, otherFinBar) {
+ if (!otherFinBar) {
+ delete this._auxStyles;
+ } else if (otherFinBar instanceof FinBar && otherFinBar.orientation !== this.orientation) {
+ var otherStyle = window.getComputedStyle(otherFinBar.bar),
+ ooh = orientationHashes[otherFinBar.orientation];
+ this._auxStyles = {};
+ this._auxStyles[whichEnd] = otherStyle[ooh.thickness];
+ }
+ return this; // for chaining
+ },
+
+ /**
+ * @private
+ * @summary Sets the proportional thumb size and hides thumb when 100%.
+ * @desc The thumb size has an absolute minimum of 20 (pixels).
+ * @memberOf FinBar.prototype
+ */
+ _setThumbSize: function () {
+ var oh = this.oh,
+ thumbComp = window.getComputedStyle(this.thumb),
+ thumbMarginLeading = parseInt(thumbComp[oh.marginLeading]),
+ thumbMarginTrailing = parseInt(thumbComp[oh.marginTrailing]),
+ thumbMargins = thumbMarginLeading + thumbMarginTrailing,
+ barSize = this.bar.getBoundingClientRect()[oh.size],
+ thumbSize = Math.max(20, barSize * this.containerSize / this.contentSize);
+
+ if (this.containerSize < this.contentSize) {
+ this.bar.style.visibility = 'visible';
+ this.thumb.style[oh.size] = thumbSize + 'px';
+ } else {
+ this.bar.style.visibility = 'hidden';
+ }
+
+ /**
+ * @private
+ * @name _thumbMax
+ * @summary Maximum offset of thumb's leading edge.
+ * @desc This is the pixel offset within the scrollbar of the thumb when it is at its maximum position at the extreme end of its range.
+ *
+ * This value takes into account the newly calculated size of the thumb element (including its margins) and the inner size of the scrollbar (the thumb's containing element, including _its_ margins).
+ *
+ * NOTE: Scrollbar padding is not taken into account and assumed to be 0 in the current implementation and is assumed to be `0`; use thumb margins in place of scrollbar padding.
+ * @type {number}
+ * @memberOf FinBar.prototype
+ */
+ this._thumbMax = barSize - thumbSize - thumbMargins;
+
+ this._thumbMarginLeading = thumbMarginLeading; // used in mousedown
+ },
+
+ /**
+ * @summary Remove the scrollbar.
+ * @desc Unhooks all the event handlers and then removes the element from the DOM. Always call this method prior to disposing of the scrollbar object.
+ * @memberOf FinBar.prototype
+ */
+ remove: function () {
+ this._removeEvt('mousedown');
+ this._removeEvt('mousemove');
+ this._removeEvt('mouseup');
+
+ (this.container || this.bar.parentElement)._removeEvt('wheel', this._bound.onwheel);
+
+ this.bar.onclick =
+ this.thumb.onclick =
+ this.thumb.onmouseover =
+ this.thumb.transitionend =
+ this.thumb.onmouseout = null;
+
+ this.bar.remove();
+ },
+
+ /**
+ * @private
+ * @function _addTestPanelItem
+ * @summary Append a test panel element.
+ * @desc If there is a test panel in the DOM (typically an `...` element) with class names of both `this.classPrefix` and `'test-panel'` (or, barring that, any element with class name `'test-panel'`), an `
...
` element will be created and appended to it. This new element will contain a span for each class name given.
+ *
+ * You should define a CSS selector `.listening` for these spans. This class will be added to the spans to alter their appearance when a listener is added with that class name (prefixed with 'on').
+ *
+ * (This is an internal function that is called once by the constructor on every instantiation.)
+ * @returns {Element|undefined} The appended `
...
` element or `undefined` if there is no test panel.
+ * @memberOf FinBar.prototype
+ */
+ _addTestPanelItem: function () {
+ var testPanelItem,
+ testPanelElement = document.querySelector('.' + this._classPrefix + '.test-panel') || document.querySelector('.test-panel');
+
+ if (testPanelElement) {
+ var testPanelItemPartNames = [ 'mousedown', 'mousemove', 'mouseup', 'index' ],
+ item = document.createElement('li');
+
+ testPanelItemPartNames.forEach(function (partName) {
+ item.innerHTML += '' + partName.replace('mouse', '') + '';
+ });
+
+ testPanelElement.appendChild(item);
+
+ testPanelItem = {};
+ testPanelItemPartNames.forEach(function (partName) {
+ testPanelItem[partName] = item.getElementsByClassName(partName)[0];
+ });
+ }
+
+ return testPanelItem;
+ },
+
+ _addEvt: function (evtName) {
+ var spy = this.testPanelItem && this.testPanelItem[evtName];
+ if (spy) { spy.classList.add('listening'); }
+ window.addEventListener(evtName, this._bound['on' + evtName]);
+ },
+
+ _removeEvt: function (evtName) {
+ var spy = this.testPanelItem && this.testPanelItem[evtName];
+ if (spy) { spy.classList.remove('listening'); }
+ window.removeEventListener(evtName, this._bound['on' + evtName]);
+ }
+};
+
+function extend(obj) {
+ for (var i = 1; i < arguments.length; ++i) {
+ var objn = arguments[i];
+ if (objn) {
+ for (var key in objn) {
+ obj[key] = objn[key];
+ }
+ }
+ }
+ return obj;
+}
+
+function validRange(range) {
+ var keys = Object.keys(range),
+ valid = keys.length === 2 &&
+ typeof range.min === 'number' &&
+ typeof range.max === 'number' &&
+ range.min <= range.max;
+
+ if (!valid) {
+ error('Invalid .range object.');
+ }
+}
+
+/**
+ * @private
+ * @name handlersToBeBound
+ * @type {object}
+ * @desc The functions defined in this object are all DOM event handlers that are bound by the FinBar constructor to each new instance. In other words, the `this` value of these handlers, once bound, refer to the FinBar object and not to the event emitter. "Do not consume raw."
+ */
+var handlersToBeBound = {
+ shortStop: function (evt) {
+ evt.stopPropagation();
+ },
+
+ onwheel: function (evt) {
+ this.index += evt[this.deltaProp];
+ evt.stopPropagation();
+ evt.preventDefault();
+ },
+
+ onclick: function (evt) {
+ var thumbBox = this.thumb.getBoundingClientRect(),
+ goingUp = evt[this.oh.coordinate] < thumbBox[this.oh.leading];
+
+ if (typeof this.paging === 'object') {
+ this.index = this.paging[goingUp ? 'up' : 'down'](Math.round(this.index));
+ } else {
+ this.index += goingUp ? -this.increment : this.increment;
+ }
+
+ // make the thumb glow momentarily
+ this.thumb.classList.add('hover');
+ var self = this;
+ this.thumb.addEventListener('transitionend', function waitForIt() {
+ this.removeEventListener('transitionend', waitForIt);
+ self._bound.onmouseup(evt);
+ });
+
+ evt.stopPropagation();
+ },
+
+ onmouseover: function () {
+ this.thumb.classList.add('hover');
+ this.thumb.onmouseout = this._bound.onmouseout;
+ this._addEvt('mousedown');
+ },
+
+ onmouseout: function () {
+ this._removeEvt('mousedown');
+ this.thumb.onmouseover = this._bound.onmouseover;
+ this.thumb.classList.remove('hover');
+ },
+
+ onmousedown: function (evt) {
+ this._removeEvt('mousedown');
+ this.thumb.onmouseover = this.thumb.onmouseout = null;
+
+ var thumbBox = this.thumb.getBoundingClientRect();
+ this.pinOffset = evt[this.oh.axis] - thumbBox[this.oh.leading] + this.bar.getBoundingClientRect()[this.oh.leading] + this._thumbMarginLeading;
+ document.documentElement.style.cursor = 'default';
+
+ this._addEvt('mousemove');
+ this._addEvt('mouseup');
+
+ evt.stopPropagation();
+ evt.preventDefault();
+ },
+
+ onmousemove: function (evt) {
+ var scaled = Math.min(this._thumbMax, Math.max(0, evt[this.oh.axis] - this.pinOffset));
+ var idx = scaled / this._thumbMax * (this._max - this._min) + this._min;
+
+ this._setScroll(idx, scaled);
+
+ evt.stopPropagation();
+ evt.preventDefault();
+ },
+
+ onmouseup: function (evt) {
+ this._removeEvt('mousemove');
+ this._removeEvt('mouseup');
+
+ document.documentElement.style.cursor = 'auto';
+
+ var thumbBox = this.thumb.getBoundingClientRect();
+ if (
+ thumbBox.left <= evt.clientX && evt.clientX <= thumbBox.right &&
+ thumbBox.top <= evt.clientY && evt.clientY <= thumbBox.bottom
+ ) {
+ this._bound.onmouseover(evt);
+ } else {
+ this._bound.onmouseout(evt);
+ }
+
+ evt.stopPropagation();
+ evt.preventDefault();
+ }
+};
+
+var orientationHashes = {
+ vertical: {
+ coordinate: 'clientY',
+ axis: 'pageY',
+ size: 'height',
+ outside: 'right',
+ inside: 'left',
+ leading: 'top',
+ trailing: 'bottom',
+ marginLeading: 'marginTop',
+ marginTrailing: 'marginBottom',
+ thickness: 'width',
+ delta: 'deltaY'
+ },
+ horizontal: {
+ coordinate: 'clientX',
+ axis: 'pageX',
+ size: 'width',
+ outside: 'bottom',
+ inside: 'top',
+ leading: 'left',
+ trailing: 'right',
+ marginLeading: 'marginLeft',
+ marginTrailing: 'marginRight',
+ thickness: 'height',
+ delta: 'deltaX'
+ }
+};
+
+var axis = {
+ top: 'vertical',
+ bottom: 'vertical',
+ height: 'vertical',
+ left: 'horizontal',
+ right: 'horizontal',
+ width: 'horizontal'
+};
+
+var cssFinBars; // definition inserted by gulpfile between following comments
+/* inject:css */
+cssFinBars = 'div.finbar-horizontal,div.finbar-vertical{position:absolute;margin:3px}div.finbar-horizontal>.thumb,div.finbar-vertical>.thumb{position:absolute;background-color:#d3d3d3;-webkit-box-shadow:0 0 1px #000;-moz-box-shadow:0 0 1px #000;box-shadow:0 0 1px #000;border-radius:4px;margin:2px;opacity:.4;transition:opacity .5s}div.finbar-horizontal>.thumb.hover,div.finbar-vertical>.thumb.hover{opacity:1;transition:opacity .5s}div.finbar-vertical{top:0;bottom:0;right:0;width:11px}div.finbar-vertical>.thumb{top:0;right:0;width:7px}div.finbar-horizontal{left:0;right:0;bottom:0;height:11px}div.finbar-horizontal>.thumb{left:0;bottom:0;height:7px}';
+/* endinject */
+
+function error(msg) {
+ throw 'finbars: ' + msg;
+}
+
+// Interface
+module.exports = FinBar;
+
+},{"css-injector":2}],5:[function(require,module,exports){
+/* eslint-env browser */
+
+'use strict';
+
+var rectangular = require('rectangular');
+
+var gestures = require('./js/polymergestures.dev.js');
+var GraphicsContext = require('./js/GraphicsContext.js');
+
+var RESIZE_POLLING_INTERVAL = 200,
+ paintables = [],
+ resizables = [],
+ paintLoopRunning = true,
+ resizeLoopRunning = true,
+ charMap = makeCharMap();
+
+function Canvas(div, component) {
+ var self = this;
+
+ this.div = div;
+ this._component = component;
+
+ this.dragEndtime = Date.now();
+
+ this.canvas = document.createElement('canvas');
+ this.div.appendChild(this.canvas);
+
+ this.canvas.style.outline = 'none';
+
+ // this.focuser = document.createElement('button');
+ // this.focuser.style.position = 'absolute';
+ // this.focuser.style.top = '0px';
+ // this.focuser.style.left = '0px';
+ // this.focuser.style.zIndex = '-1';
+ // this.focuser.style.outline = 'none';
+ // this.div.appendChild(this.focuser);
+
+ this.canvasCTX = this.canvas.getContext('2d');
+ this.gc = new GraphicsContext(this.canvasCTX);
+
+ this.buffer = document.createElement('canvas');
+ this.bufferCTX = this.buffer.getContext('2d');
+ this.bufferGC = new GraphicsContext(this.bufferCTX);
+
+ this.mouseLocation = new rectangular.Point(-1, -1);
+ this.dragstart = new rectangular.Point(-1, -1);
+ //this.origin = new rectangular.Point(0, 0);
+ this.bounds = new rectangular.Rectangle(0, 0, 0, 0);
+ this.hasMouse = false;
+
+ document.addEventListener('mousemove', function(e) {
+ if (self.hasMouse || self.isDragging()) {
+ self.finmousemove(e);
+ }
+ });
+ document.addEventListener('mouseup', function(e) {
+ self.finmouseup(e);
+ });
+ document.addEventListener('wheel', function(e) {
+ self.finwheelmoved(e);
+ });
+ document.addEventListener('keydown', function(e) {
+ self.finkeydown(e);
+ });
+ document.addEventListener('keyup', function(e) {
+ self.finkeyup(e);
+ });
+
+ this.canvas.onmouseover = function() {
+ self.hasMouse = true;
+ };
+ this.canvas.addEventListener('focus', function(e) {
+ self.finfocusgained(e);
+ });
+ this.canvas.addEventListener('blur', function(e) {
+ self.finfocuslost(e);
+ });
+ this.canvas.addEventListener('mousedown', function(e) {
+ self.finmousedown(e);
+ });
+ this.canvas.addEventListener('mouseout', function(e) {
+ self.hasMouse = false;
+ self.finmouseout(e);
+ });
+ this.canvas.addEventListener('click', function(e) {
+ self.finclick(e);
+ });
+ this.canvas.addEventListener('contextmenu', function(e) {
+ self.fincontextmenu(e);
+ e.preventDefault();
+ return false;
+ });
+
+ gestures.addEventListener(this.canvas, 'tap', function(e) {
+ self.fintap(e);
+ });
+ gestures.addEventListener(this.canvas, 'holdpulse', function(e) {
+ self.finholdpulse(e);
+ });
+ gestures.addEventListener(this.canvas, 'flick', function(e) {
+ self.finflick(e);
+ });
+ gestures.addEventListener(this.canvas, 'release', function(e) {
+ self.finrelease(e);
+ });
+ gestures.addEventListener(this.canvas, 'trackstart', function(e) {
+ self.fintrackstart(e);
+ });
+ gestures.addEventListener(this.canvas, 'track', function(e) {
+ self.fintrack(e);
+ });
+ gestures.addEventListener(this.canvas, 'trackend', function(e) {
+ self.fintrackend(e);
+ });
+
+ this.canvas.setAttribute('tabindex', 0);
+ this.canvas.contentEditable = true;
+
+ this.resize();
+
+ this.beginResizing();
+ this.beginPainting();
+}
+
+Canvas.prototype = {
+ constructor: Canvas.prototype.constructor,
+ div: null,
+ _component: null,
+ gestures: gestures, // TODO: why do we need this? (was previously at bottom of file)
+ canvas: null,
+ canvasCTX: null,
+ focuser: null,
+ buffer: null,
+ ctx: null,
+ mouseLocation: null,
+ holdPulseCount: -1,
+ dragstart: null,
+ origin: null,
+ bounds: null,
+ dirty: false,
+ size: null,
+ mousedown: false,
+ dragging: false,
+ repeatKeyCount: 0,
+ repeatKey: null,
+ repeatKeyStartTime: 0,
+ currentKeys: [],
+ hasMouse: false,
+ lastDoubleClickTime: 0,
+ dragEndTime: 0,
+ lastRepaintTime: 0,
+
+ addEventListener: function(name, callback) {
+ this.canvas.addEventListener(name, callback);
+ },
+
+ stopPaintLoop: function() {
+ paintLoopRunning = false;
+ },
+
+ restartPaintLoop: function() {
+ if (paintLoopRunning) {
+ return; // already running
+ }
+ paintLoopRunning = true;
+ requestAnimationFrame(paintLoopFunction);
+ },
+
+ stopResizeLoop: function() {
+ resizeLoopRunning = false;
+ },
+
+ restartResizeLoop: function() {
+ if (resizeLoopRunning) {
+ return; // already running
+ }
+ resizeLoopRunning = true;
+ setInterval(resizablesLoopFunction, 200);
+ },
+
+ detached: function() {
+ this.stopPainting();
+ this.stopResizing();
+ },
+
+ useHiDPI: function() {
+ return this._component.resolveProperty('useHiDPI');
+ },
+
+ useBitBlit: function() {
+ return this._component.resolveProperty('useBitBlit');
+ },
+
+ getFPS: function() {
+ var fps = this._component.resolveProperty('repaintIntervalRate');
+ return fps ? parseInt(fps) : 0;
+ },
+
+ tickPaint: function(now) {
+ var fps = this.getFPS();
+ if (fps === 0) {
+ return;
+ }
+ var interval = 1000 / fps;
+
+ var elapsed = now - this.lastRepaintTime;
+ if (elapsed > interval && this.dirty) {
+ this.lastRepaintTime = now - (elapsed % interval);
+ this.paintNow();
+ }
+ },
+
+ beginPainting: function() {
+ var self = this;
+ this.dirty = true;
+ this.tickPainter = function(now) {
+ self.tickPaint(now);
+ };
+ paintables.push(this);
+ },
+
+ stopPainting: function() {
+ paintables.splice(paintables.indexOf(this), 1);
+ },
+
+ beginResizing: function() {
+ var self = this;
+ this.tickResizer = function() {
+ self.checksize();
+ };
+ resizables.push(this);
+ },
+
+ stopResizing: function() {
+ resizables.splice(resizables.indexOf(this), 1);
+ },
+
+ start: function() {
+ this.beginPainting();
+ this.beginResizing();
+ },
+
+ stop: function() {
+ this.stopPainting();
+ this.stopResizing();
+ },
+
+ checksize: function() {
+ //this is expensive lets do it at some modulo
+ var sizeNow = this.div.getBoundingClientRect();
+ if (sizeNow.width !== this.size.width || sizeNow.height !== this.size.height) {
+ this.sizeChangedNotification();
+ }
+ },
+
+ sizeChangedNotification: function() {
+ this.resize();
+ },
+
+ resize: function() {
+ var box = this.size = this.div.getBoundingClientRect();
+
+ this.canvas.width = this.buffer.width = box.width;
+ this.canvas.height = this.buffer.height = box.height;
+
+ //fix ala sir spinka, see
+ //http://www.html5rocks.com/en/tutorials/canvas/hidpi/
+ //just add 'hdpi' as an attribute to the fin-canvas tag
+ var ratio = 1;
+ var useBitBlit = this.useBitBlit();
+ var isHIDPI = window.devicePixelRatio && this.useHiDPI();
+ if (isHIDPI) {
+ var devicePixelRatio = window.devicePixelRatio || 1;
+ var backingStoreRatio = this.canvasCTX.webkitBackingStorePixelRatio ||
+ this.canvasCTX.mozBackingStorePixelRatio ||
+ this.canvasCTX.msBackingStorePixelRatio ||
+ this.canvasCTX.oBackingStorePixelRatio ||
+ this.canvasCTX.backingStorePixelRatio || 1;
+
+ ratio = devicePixelRatio / backingStoreRatio;
+ //this.canvasCTX.scale(ratio, ratio);
+ }
+ var width = this.canvas.getAttribute('width');
+ var height = this.canvas.getAttribute('height');
+ this.canvas.width = width * ratio;
+ this.canvas.height = height * ratio;
+ this.buffer.width = width * ratio;
+ this.buffer.height = height * ratio;
+
+ this.canvas.style.width = width + 'px';
+ this.canvas.style.height = height + 'px';
+ this.buffer.style.width = width + 'px';
+ this.buffer.style.height = height + 'px';
+
+ this.bufferCTX.scale(ratio, ratio);
+ if (isHIDPI && !useBitBlit) {
+ this.canvasCTX.scale(ratio, ratio);
+ }
+
+ //this.origin = new rectangular.Point(Math.round(this.size.left), Math.round(this.size.top));
+ this.bounds = new rectangular.Rectangle(0, 0, box.width, box.height);
+ //setTimeout(function() {
+ var comp = this._component;
+ if (comp) {
+ comp.setBounds(this.bounds);
+ }
+ this.resizeNotification();
+ this.paintNow();
+ //});
+ },
+
+ resizeNotification: function() {
+ //to be overridden
+ },
+
+ getBounds: function() {
+ return this.bounds;
+ },
+
+ paintNow: function() {
+ var self = this;
+ this.safePaintImmediately(function(gc) {
+ gc.clearRect(0, 0, self.canvas.width, self.canvas.height);
+
+ var comp = self._component;
+ if (comp) {
+ comp._paint(gc);
+ }
+
+ self.dirty = false;
+ });
+ },
+
+ safePaintImmediately: function(paintFunction) {
+ var useBitBlit = this.useBitBlit(),
+ gc = useBitBlit ? this.bufferGC : this.gc;
+ try {
+ gc.save();
+ paintFunction(gc);
+ } catch (e) {
+ console.error(e);
+ } finally {
+ gc.restore();
+ }
+ if (useBitBlit) {
+ this.flushBuffer();
+ }
+ },
+
+ flushBuffer: function() {
+ if (this.buffer.width > 0 && this.buffer.height > 0) {
+ this.canvasCTX.drawImage(this.buffer, 0, 0);
+ }
+ },
+
+ dispatchNewEvent: function(event, name, detail) {
+ detail = {
+ detail: detail || {}
+ };
+ detail.detail.primitiveEvent = event;
+ return this.canvas.dispatchEvent(new CustomEvent(name, detail));
+ },
+
+ dispatchNewMouseKeysEvent: function(event, name, detail) {
+ detail = detail || {};
+ detail.mouse = this.mouseLocation;
+ detail.keys = this.currentKeys;
+ return this.dispatchNewEvent(event, name, detail);
+ },
+
+ finmousemove: function(e) {
+ if (!this.isDragging() && this.mousedown) {
+ this.beDragging();
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-dragstart', {
+ isRightClick: this.isRightClick(e)
+ });
+ this.dragstart = new rectangular.Point(this.mouseLocation.x, this.mouseLocation.y);
+ }
+ this.mouseLocation = this.getLocal(e);
+ //console.log(this.mouseLocation);
+ if (this.isDragging()) {
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-drag', {
+ dragstart: this.dragstart,
+ isRightClick: this.isRightClick(e)
+ });
+ }
+ if (this.bounds.contains(this.mouseLocation)) {
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-mousemove');
+ }
+ },
+
+ finmousedown: function(e) {
+ this.mouseLocation = this.getLocal(e);
+ this.mousedown = true;
+
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-mousedown', {
+ isRightClick: this.isRightClick(e)
+ });
+ this.takeFocus();
+ },
+
+ finmouseup: function(e) {
+ if (this.isDragging()) {
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-dragend', {
+ dragstart: this.dragstart,
+ isRightClick: this.isRightClick(e)
+ });
+ this.beNotDragging();
+ this.dragEndtime = Date.now();
+ }
+ this.mousedown = false;
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-mouseup', {
+ isRightClick: this.isRightClick(e)
+ });
+ //this.mouseLocation = new rectangular.Point(-1, -1);
+ },
+
+ finmouseout: function(e) {
+ if (!this.mousedown) {
+ this.mouseLocation = new rectangular.Point(-1, -1);
+ }
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-mouseout');
+ },
+
+ finwheelmoved: function(e) {
+ if (this.isDragging() || !this.hasFocus()) {
+ return;
+ }
+ e.preventDefault();
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-wheelmoved', {
+ isRightClick: this.isRightClick(e)
+ });
+ },
+
+ finclick: function(e) {
+ if (Date.now() - this.lastClickTime < 250) {
+ //this is a double click...
+ this.findblclick(e);
+ return;
+ }
+ this.mouseLocation = this.getLocal(e);
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-click', {
+ isRightClick: this.isRightClick(e)
+ });
+ this.lastClickTime = Date.now();
+ },
+
+ finrelease: function(e) {
+ this.holdPulseCount = 0;
+ this.mouseLocation = this.getLocal(e);
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-release');
+ },
+
+ finflick: function(e) {
+ if (!this.hasFocus()) {
+ return;
+ }
+ this.mouseLocation = this.getLocal(e);
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-flick', {
+ isRightClick: this.isRightClick(e)
+ });
+ },
+
+ fintrackstart: function(e) {
+ if (!this.hasFocus()) {
+ return;
+ }
+ this.mouseLocation = this.getLocal(e);
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-trackstart');
+ },
+
+ fintrack: function(e) {
+ if (!this.hasFocus()) {
+ return;
+ }
+ this.mouseLocation = this.getLocal(e);
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-track');
+ },
+
+ fintrackend: function(e) {
+ this.mouseLocation = this.getLocal(e);
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-trackend');
+ },
+
+ finhold: function(e) {
+ this.mouseLocation = this.getLocal(e);
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-hold', {
+ isRightClick: this.isRightClick(e)
+ });
+ },
+
+ finholdpulse: function(e) {
+ this.mouseLocation = this.getLocal(e);
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-holdpulse', {
+ count: this.holdPulseCount++
+ });
+ },
+
+ fintap: function(e) {
+ //this nonsense is to hold a tap if it's really a double click
+ var self = this;
+ var now = Date.now();
+ var dif = now - this.lastDoubleClickTime;
+ if (dif < 300) {
+ return;
+ }
+ //dragend is also causing a tap
+ //lets fix this here
+ if (now - this.dragEndtime < 100) {
+ return;
+ }
+ setTimeout(function() {
+ self._fintap(e);
+ }, 180);
+ },
+
+ _fintap: function(e) {
+ //this nonsense is to hold a tap if it's really a double click
+ var now = Date.now();
+ var dif = now - this.lastDoubleClickTime;
+ if (dif < 300) {
+ return;
+ }
+ //this.mouseLocation = this.getLocal(e);
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-tap', {
+ isRightClick: this.isRightClick(e)
+ });
+ },
+
+ findblclick: function(e) {
+ this.mouseLocation = this.getLocal(e);
+ this.lastDoubleClickTime = Date.now();
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-dblclick', {
+ isRightClick: this.isRightClick(e)
+ });
+ //console.log('dblclick', this.currentKeys);
+ },
+
+ getCharMap: function() { //TODO: This is static. Make it a property of the constructor.
+ return charMap;
+ },
+
+ finkeydown: function(e) {
+ if (!this.hasFocus()) {
+ return;
+ }
+
+ //e.preventDefault();
+ var keyChar = e.shiftKey ? charMap[e.keyCode][1] : charMap[e.keyCode][0];
+ if (e.repeat) {
+ if (this.repeatKey === keyChar) {
+ this.repeatKeyCount++;
+ } else {
+ this.repeatKey = keyChar;
+ this.repeatKeyStartTime = Date.now();
+ }
+ } else {
+ this.repeatKey = null;
+ this.repeatKeyCount = 0;
+ this.repeatKeyStartTime = 0;
+ }
+ if (this.currentKeys.indexOf(keyChar) === -1) {
+ this.currentKeys.push(keyChar);
+ }
+ //console.log(keyChar, e.keyCode);
+ this.dispatchNewEvent(e, 'fin-canvas-keydown', {
+ alt: e.altKey,
+ ctrl: e.ctrlKey,
+ char: keyChar,
+ code: e.charCode,
+ key: e.keyCode,
+ meta: e.metaKey,
+ repeatCount: this.repeatKeyCount,
+ repeatStartTime: this.repeatKeyStartTime,
+ shift: e.shiftKey,
+ identifier: e.keyIdentifier,
+ currentKeys: this.currentKeys.slice(0)
+ });
+ },
+
+ finkeyup: function(e) {
+ var keyChar = e.shiftKey ? charMap[e.keyCode][1] : charMap[e.keyCode][0];
+ this.currentKeys.splice(this.currentKeys.indexOf(keyChar), 1);
+ if (!this.hasFocus()) {
+ return;
+ }
+ this.repeatKeyCount = 0;
+ this.repeatKey = null;
+ this.repeatKeyStartTime = 0;
+ this.dispatchNewEvent(e, 'fin-canvas-keyup', {
+ alt: e.altKey,
+ ctrl: e.ctrlKey,
+ char: keyChar,
+ code: e.charCode,
+ key: e.keyCode,
+ meta: e.metaKey,
+ repeat: e.repeat,
+ shift: e.shiftKey,
+ identifier: e.keyIdentifier,
+ currentKeys: this.currentKeys.slice(0)
+ });
+ },
+
+ finfocusgained: function(e) {
+ this.dispatchNewEvent(e, 'fin-canvas-focus-gained');
+ },
+
+ finfocuslost: function(e) {
+ this.dispatchNewEvent(e, 'fin-canvas-focus-lost');
+ },
+
+ fincontextmenu: function(e) {
+ if (e.ctrlKey && this.currentKeys.indexOf('CTRL') === -1) {
+ this.currentKeys.push('CTRL');
+ }
+ if (Date.now() - this.lastClickTime < 250) {
+ //this is a double click...
+ this.findblclick(e);
+ return;
+ }
+ this.dispatchNewMouseKeysEvent(e, 'fin-canvas-context-menu', {
+ isRightClick: this.isRightClick(e)
+ });
+ this.lastClickTime = Date.now();
+ },
+
+ repaint: function() {
+ var fps = this.getFPS();
+ this.dirty = true;
+ if (!paintLoopRunning || fps === 0) {
+ this.paintNow();
+ }
+ },
+
+ getMouseLocation: function() {
+ return this.mouseLocation;
+ },
+
+ getOrigin: function() {
+ var rect = this.canvas.getBoundingClientRect();
+ var p = new rectangular.Point(rect.left, rect.top);
+ return p;
+ },
+
+ getLocal: function(e) {
+ var rect = this.canvas.getBoundingClientRect();
+ var p = new rectangular.Point(e.clientX - rect.left, e.clientY - rect.top);
+ return p;
+ },
+
+ hasFocus: function() {
+ return document.activeElement === this.canvas;
+ },
+
+ takeFocus: function() {
+ var self = this;
+ if (!this.hasFocus()) {
+ setTimeout(function() {
+ self.canvas.focus();
+ }, 10);
+ }
+ },
+
+ beDragging: function() {
+ this.dragging = true;
+ this.disableDocumentElementSelection();
+ },
+
+ beNotDragging: function() {
+ this.dragging = false;
+ this.enableDocumentElementSelection();
+ },
+
+ isDragging: function() {
+ return this.dragging;
+ },
+
+ disableDocumentElementSelection: function() {
+ var style = document.body.style;
+ style.cssText = style.cssText + '-webkit-user-select: none';
+ },
+
+ enableDocumentElementSelection: function() {
+ var style = document.body.style;
+ style.cssText = style.cssText.replace('-webkit-user-select: none', '');
+ },
+
+ setFocusable: function(truthy) {
+ this.focuser.style.display = truthy ? '' : 'none';
+ },
+
+ isRightClick: function(e) {
+ var isRightMB;
+ e = e || window.event;
+
+ if ('which' in e) { // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
+ isRightMB = e.which === 3;
+ } else if ('button' in e) { // IE, Opera
+ isRightMB = e.button === 2;
+ }
+ return isRightMB;
+ },
+
+ dispatchEvent: function(e) {
+ return this.canvas.dispatchEvent(e);
+ }
+};
+
+function paintLoopFunction(now) {
+ if (!paintLoopRunning) {
+ return;
+ }
+ for (var i = 0; i < paintables.length; i++) {
+ try {
+ paintables[i].tickPainter(now);
+ } catch (e) {
+ console.error(e);
+ }
+ }
+ requestAnimationFrame(paintLoopFunction);
+}
+requestAnimationFrame(paintLoopFunction);
+
+function resizablesLoopFunction(now) {
+ if (!resizeLoopRunning) {
+ return;
+ }
+ for (var i = 0; i < resizables.length; i++) {
+ try {
+ resizables[i].tickResizer(now);
+ } catch (e) {
+ console.error(e);
+ }
+ }
+}
+setInterval(resizablesLoopFunction, RESIZE_POLLING_INTERVAL);
+
+function makeCharMap() {
+ var map = [];
+
+ var empty = ['', ''];
+
+ for (var i = 0; i < 256; i++) {
+ map[i] = empty;
+ }
+
+ map[27] = ['ESC', 'ESCSHIFT'];
+ map[192] = ['`', '~'];
+ map[49] = ['1', '!'];
+ map[50] = ['2', '@'];
+ map[51] = ['3', '#'];
+ map[52] = ['4', '$'];
+ map[53] = ['5', '%'];
+ map[54] = ['6', '^'];
+ map[55] = ['7', '&'];
+ map[56] = ['8', '*'];
+ map[57] = ['9', '('];
+ map[48] = ['0', ')'];
+ map[189] = ['-', '_'];
+ map[187] = ['=', '+'];
+ map[8] = ['DELETE', 'DELETESHIFT'];
+ map[9] = ['TAB', 'TABSHIFT'];
+ map[81] = ['q', 'Q'];
+ map[87] = ['w', 'W'];
+ map[69] = ['e', 'E'];
+ map[82] = ['r', 'R'];
+ map[84] = ['t', 'T'];
+ map[89] = ['y', 'Y'];
+ map[85] = ['u', 'U'];
+ map[73] = ['i', 'I'];
+ map[79] = ['o', 'O'];
+ map[80] = ['p', 'P'];
+ map[219] = ['[', '{'];
+ map[221] = [']', '}'];
+ map[220] = ['\\', '|'];
+ map[220] = ['CAPSLOCK', 'CAPSLOCKSHIFT'];
+ map[65] = ['a', 'A'];
+ map[83] = ['s', 'S'];
+ map[68] = ['d', 'D'];
+ map[70] = ['f', 'F'];
+ map[71] = ['g', 'G'];
+ map[72] = ['h', 'H'];
+ map[74] = ['j', 'J'];
+ map[75] = ['k', 'K'];
+ map[76] = ['l', 'L'];
+ map[186] = [';', ':'];
+ map[222] = ['\'', '|'];
+ map[13] = ['RETURN', 'RETURNSHIFT'];
+ map[16] = ['SHIFT', 'SHIFT'];
+ map[90] = ['z', 'Z'];
+ map[88] = ['x', 'X'];
+ map[67] = ['c', 'C'];
+ map[86] = ['v', 'V'];
+ map[66] = ['b', 'B'];
+ map[78] = ['n', 'N'];
+ map[77] = ['m', 'M'];
+ map[188] = [',', '<'];
+ map[190] = ['.', '>'];
+ map[191] = ['/', '?'];
+ map[16] = ['SHIFT', 'SHIFT'];
+ map[17] = ['CTRL', 'CTRLSHIFT'];
+ map[18] = ['ALT', 'ALTSHIFT'];
+ map[91] = ['COMMANDLEFT', 'COMMANDLEFTSHIFT'];
+ map[32] = ['SPACE', 'SPACESHIFT'];
+ map[93] = ['COMMANDRIGHT', 'COMMANDRIGHTSHIFT'];
+ map[18] = ['ALT', 'ALTSHIFT'];
+ map[38] = ['UP', 'UPSHIFT'];
+ map[37] = ['LEFT', 'LEFTSHIFT'];
+ map[40] = ['DOWN', 'DOWNSHIFT'];
+ map[39] = ['RIGHT', 'RIGHTSHIFT'];
+
+ map[33] = ['PAGEUP', 'PAGEUPSHIFT'];
+ map[34] = ['PAGEDOWN', 'PAGEDOWNSHIFT'];
+ map[35] = ['PAGERIGHT', 'PAGERIGHTSHIFT'];
+ map[36] = ['PAGELEFT', 'PAGELEFTSHIFT'];
+
+ return map;
+}
+
+module.exports = Canvas;
+
+},{"./js/GraphicsContext.js":6,"./js/polymergestures.dev.js":8,"rectangular":29}],6:[function(require,module,exports){
+'use strict';
+
+var consoleLogger = require('./gc-console-logger');
+
+/**
+ * @constructor
+ * @param gc - The 2-D graphics context from your canvas
+ * @param {boolean|apiLogger} [logger=true]
+ * * `true` uses `gc-console-logger` function bound to 'gc.' as prefix
+ * * string uses `gc-console-logger` function bound to string
+ * * function used as is
+ */
+function GraphicsContext(gc, logger) {
+ this.gc = gc;
+
+ var self = this;
+ var reWEBKIT = /^webkit/;
+
+ switch (typeof logger) {
+
+ case 'string':
+ logger = consoleLogger.bind(undefined, logger + '.');
+ break;
+
+ case 'boolean':
+ if (logger === true) {
+ logger = consoleLogger.bind(undefined, 'gc.');
+ }
+ break;
+
+ case 'function':
+ if (logger.length !== 3) {
+ throw 'GraphicsContext: User-supplied API logger function does not accept three parameters.';
+ }
+ break;
+
+ default:
+ logger = false;
+ }
+
+ // Stub out all the prototype members of the canvas 2D graphics context:
+ Object.keys(Object.getPrototypeOf(gc)).forEach(MakeStub);
+
+ // Some older browsers (e.g., Chrome 40) did not have all members of canvas
+ // 2D graphics context in the prototype so we make this additional call:
+ Object.keys(gc).forEach(MakeStub);
+
+ function MakeStub(key) {
+ if (key in GraphicsContext.prototype || reWEBKIT.test(key)) {
+ return;
+ }
+ if (typeof gc[key] === 'function') {
+ self[key] = !logger ? gc[key].bind(gc) : function() {
+ return logger(key, arguments, gc[key].apply(gc, arguments));
+ };
+ } else {
+ Object.defineProperty(self, key, {
+ get: function() {
+ var result = gc[key];
+ return logger ? logger(key, 'getter', result) : result;
+ },
+ set: function(value) {
+ gc[key] = logger ? logger(key, 'setter', value) : value;
+ }
+ });
+ }
+ }
+}
+
+module.exports = GraphicsContext;
+
+},{"./gc-console-logger":7}],7:[function(require,module,exports){
+'use strict';
+
+var YIELDS = '\u27F9'; // LONG RIGHTWARDS DOUBLE ARROW
+
+function consoleLogger(prefix, name, args, value) {
+ var result = value;
+
+ if (typeof value === 'string') {
+ result = '"' + result + '"';
+ }
+
+ name = prefix + name;
+
+ switch (args) {
+ case 'getter':
+ console.log(name, '=', result);
+ break;
+
+ case 'setter':
+ console.log(name, YIELDS, result);
+ break;
+
+ default: // method call
+ name += '(' + Array.prototype.slice.call(args).join(', ') + ')';
+ if (result === undefined) {
+ console.log(name);
+ } else {
+ console.log(name, YIELDS, result);
+ }
+ }
+
+ return value;
+}
+
+module.exports = consoleLogger;
+
+},{}],8:[function(require,module,exports){
+/* eslint-disable */
+
+/**
+ * @license
+ * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+//module.exports = {};
+
+(function(scope) {
+ var hasFullPath = false;
+
+ // test for full event path support
+ var pathTest = document.createElement('meta');
+ if (pathTest.createShadowRoot) {
+ var sr = pathTest.createShadowRoot();
+ var s = document.createElement('span');
+ sr.appendChild(s);
+ pathTest.addEventListener('testpath', function(ev) {
+ if (ev.path) {
+ // if the span is in the event path, then path[0] is the real source for all events
+ hasFullPath = ev.path[0] === s;
+ }
+ ev.stopPropagation();
+ });
+ var ev = new CustomEvent('testpath', {
+ bubbles: true
+ });
+ // must add node to DOM to trigger event listener
+ document.head.appendChild(pathTest);
+ s.dispatchEvent(ev);
+ pathTest.parentNode.removeChild(pathTest);
+ sr = s = null;
+ }
+ pathTest = null;
+
+ var target = {
+ shadow: function(inEl) {
+ if (inEl) {
+ return inEl.shadowRoot || inEl.webkitShadowRoot;
+ }
+ },
+ canTarget: function(shadow) {
+ return shadow && Boolean(shadow.elementFromPoint);
+ },
+ targetingShadow: function(inEl) {
+ var s = this.shadow(inEl);
+ if (this.canTarget(s)) {
+ return s;
+ }
+ },
+ olderShadow: function(shadow) {
+ var os = shadow.olderShadowRoot;
+ if (!os) {
+ var se = shadow.querySelector('shadow');
+ if (se) {
+ os = se.olderShadowRoot;
+ }
+ }
+ return os;
+ },
+ allShadows: function(element) {
+ var shadows = [],
+ s = this.shadow(element);
+ while (s) {
+ shadows.push(s);
+ s = this.olderShadow(s);
+ }
+ return shadows;
+ },
+ searchRoot: function(inRoot, x, y) {
+ var t, st, sr, os;
+ if (inRoot) {
+ t = inRoot.elementFromPoint(x, y);
+ if (t) {
+ // found element, check if it has a ShadowRoot
+ sr = this.targetingShadow(t);
+ } else if (inRoot !== document) {
+ // check for sibling roots
+ sr = this.olderShadow(inRoot);
+ }
+ // search other roots, fall back to light dom element
+ return this.searchRoot(sr, x, y) || t;
+ }
+ },
+ owner: function(element) {
+ if (!element) {
+ return document;
+ }
+ var s = element;
+ // walk up until you hit the shadow root or document
+ while (s.parentNode) {
+ s = s.parentNode;
+ }
+ // the owner element is expected to be a Document or ShadowRoot
+ if (s.nodeType != Node.DOCUMENT_NODE && s.nodeType != Node.DOCUMENT_FRAGMENT_NODE) {
+ s = document;
+ }
+ return s;
+ },
+ findTarget: function(inEvent) {
+ if (hasFullPath && inEvent.path && inEvent.path.length) {
+ return inEvent.path[0];
+ }
+ var x = inEvent.clientX,
+ y = inEvent.clientY;
+ // if the listener is in the shadow root, it is much faster to start there
+ var s = this.owner(inEvent.target);
+ // if x, y is not in this root, fall back to document search
+ if (!s.elementFromPoint(x, y)) {
+ s = document;
+ }
+ return this.searchRoot(s, x, y);
+ },
+ findTouchAction: function(inEvent) {
+ var n;
+ if (hasFullPath && inEvent.path && inEvent.path.length) {
+ var path = inEvent.path;
+ for (var i = 0; i < path.length; i++) {
+ n = path[i];
+ if (n.nodeType === Node.ELEMENT_NODE && n.hasAttribute('touch-action')) {
+ return n.getAttribute('touch-action');
+ }
+ }
+ } else {
+ n = inEvent.target;
+ while (n) {
+ if (n.nodeType === Node.ELEMENT_NODE && n.hasAttribute('touch-action')) {
+ return n.getAttribute('touch-action');
+ }
+ n = n.parentNode || n.host;
+ }
+ }
+ // auto is default
+ return "auto";
+ },
+ LCA: function(a, b) {
+ if (a === b) {
+ return a;
+ }
+ if (a && !b) {
+ return a;
+ }
+ if (b && !a) {
+ return b;
+ }
+ if (!b && !a) {
+ return document;
+ }
+ // fast case, a is a direct descendant of b or vice versa
+ if (a.contains && a.contains(b)) {
+ return a;
+ }
+ if (b.contains && b.contains(a)) {
+ return b;
+ }
+ var adepth = this.depth(a);
+ var bdepth = this.depth(b);
+ var d = adepth - bdepth;
+ if (d >= 0) {
+ a = this.walk(a, d);
+ } else {
+ b = this.walk(b, -d);
+ }
+ while (a && b && a !== b) {
+ a = a.parentNode || a.host;
+ b = b.parentNode || b.host;
+ }
+ return a;
+ },
+ walk: function(n, u) {
+ for (var i = 0; n && (i < u); i++) {
+ n = n.parentNode || n.host;
+ }
+ return n;
+ },
+ depth: function(n) {
+ var d = 0;
+ while (n) {
+ d++;
+ n = n.parentNode || n.host;
+ }
+ return d;
+ },
+ deepContains: function(a, b) {
+ var common = this.LCA(a, b);
+ // if a is the common ancestor, it must "deeply" contain b
+ return common === a;
+ },
+ insideNode: function(node, x, y) {
+ var rect = node.getBoundingClientRect();
+ return (rect.left <= x) && (x <= rect.right) && (rect.top <= y) && (y <= rect.bottom);
+ },
+ path: function(event) {
+ var p;
+ if (hasFullPath && event.path && event.path.length) {
+ p = event.path;
+ } else {
+ p = [];
+ var n = this.findTarget(event);
+ while (n) {
+ p.push(n);
+ n = n.parentNode || n.host;
+ }
+ }
+ return p;
+ }
+ };
+ scope.targetFinding = target;
+ /**
+ * Given an event, finds the "deepest" node that could have been the original target before ShadowDOM retargetting
+ *
+ * @param {Event} Event An event object with clientX and clientY properties
+ * @return {Element} The probable event origninator
+ */
+ scope.findTarget = target.findTarget.bind(target);
+ /**
+ * Determines if the "container" node deeply contains the "containee" node, including situations where the "containee" is contained by one or more ShadowDOM
+ * roots.
+ *
+ * @param {Node} container
+ * @param {Node} containee
+ * @return {Boolean}
+ */
+ scope.deepContains = target.deepContains.bind(target);
+
+ /**
+ * Determines if the x/y position is inside the given node.
+ *
+ * Example:
+ *
+ * function upHandler(event) {
+ * var innode = PolymerGestures.insideNode(event.target, event.clientX, event.clientY);
+ * if (innode) {
+ * // wait for tap?
+ * } else {
+ * // tap will never happen
+ * }
+ * }
+ *
+ * @param {Node} node
+ * @param {Number} x Screen X position
+ * @param {Number} y screen Y position
+ * @return {Boolean}
+ */
+ scope.insideNode = target.insideNode;
+
+})(exports);
+
+(function() {
+ function shadowSelector(v) {
+ return 'html /deep/ ' + selector(v);
+ }
+
+ function selector(v) {
+ return '[touch-action="' + v + '"]';
+ }
+
+ function rule(v) {
+ return '{ -ms-touch-action: ' + v + '; touch-action: ' + v + ';}';
+ }
+ var attrib2css = [
+ 'none',
+ 'auto',
+ 'pan-x',
+ 'pan-y', {
+ rule: 'pan-x pan-y',
+ selectors: [
+ 'pan-x pan-y',
+ 'pan-y pan-x'
+ ]
+ },
+ 'manipulation'
+ ];
+ var styles = '';
+ // only install stylesheet if the browser has touch action support
+ var hasTouchAction = typeof document.head.style.touchAction === 'string';
+ // only add shadow selectors if shadowdom is supported
+ var hasShadowRoot = !window.ShadowDOMPolyfill && document.head.createShadowRoot;
+
+ if (hasTouchAction) {
+ attrib2css.forEach(function(r) {
+ if (String(r) === r) {
+ styles += selector(r) + rule(r) + '\n';
+ if (hasShadowRoot) {
+ styles += shadowSelector(r) + rule(r) + '\n';
+ }
+ } else {
+ styles += r.selectors.map(selector) + rule(r.rule) + '\n';
+ if (hasShadowRoot) {
+ styles += r.selectors.map(shadowSelector) + rule(r.rule) + '\n';
+ }
+ }
+ });
+
+ var el = document.createElement('style');
+ el.textContent = styles;
+ document.head.appendChild(el);
+ }
+})();
+
+/**
+ * This is the constructor for new PointerEvents.
+ *
+ * New Pointer Events must be given a type, and an optional dictionary of
+ * initialization properties.
+ *
+ * Due to certain platform requirements, events returned from the constructor
+ * identify as MouseEvents.
+ *
+ * @constructor
+ * @param {String} inType The type of the event to create.
+ * @param {Object} [inDict] An optional dictionary of initial event properties.
+ * @return {Event} A new PointerEvent of type `inType` and initialized with properties from `inDict`.
+ */
+(function(scope) {
+
+ var MOUSE_PROPS = [
+ 'bubbles',
+ 'cancelable',
+ 'view',
+ 'detail',
+ 'screenX',
+ 'screenY',
+ 'clientX',
+ 'clientY',
+ 'ctrlKey',
+ 'altKey',
+ 'shiftKey',
+ 'metaKey',
+ 'button',
+ 'relatedTarget',
+ 'pageX',
+ 'pageY'
+ ];
+
+ var MOUSE_DEFAULTS = [
+ false,
+ false,
+ null,
+ null,
+ 0,
+ 0,
+ 0,
+ 0,
+ false,
+ false,
+ false,
+ false,
+ 0,
+ null,
+ 0,
+ 0
+ ];
+
+ var NOP_FACTORY = function() {
+ return function() {};
+ };
+
+ var eventFactory = {
+ // TODO(dfreedm): this is overridden by tap recognizer, needs review
+ preventTap: NOP_FACTORY,
+ makeBaseEvent: function(inType, inDict) {
+ var e = document.createEvent('Event');
+ e.initEvent(inType, inDict.bubbles || false, inDict.cancelable || false);
+ e.preventTap = eventFactory.preventTap(e);
+ return e;
+ },
+ makeGestureEvent: function(inType, inDict) {
+ inDict = inDict || Object.create(null);
+
+ var e = this.makeBaseEvent(inType, inDict);
+ for (var i = 0, keys = Object.keys(inDict), k; i < keys.length; i++) {
+ k = keys[i];
+ if (k !== 'bubbles' && k !== 'cancelable') {
+ e[k] = inDict[k];
+ }
+ }
+ return e;
+ },
+ makePointerEvent: function(inType, inDict) {
+ inDict = inDict || Object.create(null);
+
+ var e = this.makeBaseEvent(inType, inDict);
+ // define inherited MouseEvent properties
+ for (var i = 2, p; i < MOUSE_PROPS.length; i++) {
+ p = MOUSE_PROPS[i];
+ e[p] = inDict[p] || MOUSE_DEFAULTS[i];
+ }
+ e.buttons = inDict.buttons || 0;
+
+ // Spec requires that pointers without pressure specified use 0.5 for down
+ // state and 0 for up state.
+ var pressure = 0;
+ if (inDict.pressure) {
+ pressure = inDict.pressure;
+ } else {
+ pressure = e.buttons ? 0.5 : 0;
+ }
+
+ // add x/y properties aliased to clientX/Y
+ e.x = e.clientX;
+ e.y = e.clientY;
+
+ // define the properties of the PointerEvent interface
+ e.pointerId = inDict.pointerId || 0;
+ e.width = inDict.width || 0;
+ e.height = inDict.height || 0;
+ e.pressure = pressure;
+ e.tiltX = inDict.tiltX || 0;
+ e.tiltY = inDict.tiltY || 0;
+ e.pointerType = inDict.pointerType || '';
+ e.hwTimestamp = inDict.hwTimestamp || 0;
+ e.isPrimary = inDict.isPrimary || false;
+ e._source = inDict._source || '';
+ return e;
+ }
+ };
+
+ scope.eventFactory = eventFactory;
+})(exports);
+
+/**
+ * This module implements an map of pointer states
+ */
+(function(scope) {
+ var USE_MAP = window.Map && window.Map.prototype.forEach;
+ var POINTERS_FN = function() {
+ return this.size;
+ };
+
+ function PointerMap() {
+ if (USE_MAP) {
+ var m = new Map();
+ m.pointers = POINTERS_FN;
+ return m;
+ } else {
+ this.keys = [];
+ this.values = [];
+ }
+ }
+
+ PointerMap.prototype = {
+ set: function(inId, inEvent) {
+ var i = this.keys.indexOf(inId);
+ if (i > -1) {
+ this.values[i] = inEvent;
+ } else {
+ this.keys.push(inId);
+ this.values.push(inEvent);
+ }
+ },
+ has: function(inId) {
+ return this.keys.indexOf(inId) > -1;
+ },
+ 'delete': function(inId) {
+ var i = this.keys.indexOf(inId);
+ if (i > -1) {
+ this.keys.splice(i, 1);
+ this.values.splice(i, 1);
+ }
+ },
+ get: function(inId) {
+ var i = this.keys.indexOf(inId);
+ return this.values[i];
+ },
+ clear: function() {
+ this.keys.length = 0;
+ this.values.length = 0;
+ },
+ // return value, key, map
+ forEach: function(callback, thisArg) {
+ this.values.forEach(function(v, i) {
+ callback.call(thisArg, v, this.keys[i], this);
+ }, this);
+ },
+ pointers: function() {
+ return this.keys.length;
+ }
+ };
+
+ scope.PointerMap = PointerMap;
+})(exports);
+
+(function(scope) {
+ var CLONE_PROPS = [
+ // MouseEvent
+ 'bubbles',
+ 'cancelable',
+ 'view',
+ 'detail',
+ 'screenX',
+ 'screenY',
+ 'clientX',
+ 'clientY',
+ 'ctrlKey',
+ 'altKey',
+ 'shiftKey',
+ 'metaKey',
+ 'button',
+ 'relatedTarget',
+ // DOM Level 3
+ 'buttons',
+ // PointerEvent
+ 'pointerId',
+ 'width',
+ 'height',
+ 'pressure',
+ 'tiltX',
+ 'tiltY',
+ 'pointerType',
+ 'hwTimestamp',
+ 'isPrimary',
+ // event instance
+ 'type',
+ 'target',
+ 'currentTarget',
+ 'which',
+ 'pageX',
+ 'pageY',
+ 'timeStamp',
+ // gesture addons
+ 'preventTap',
+ 'tapPrevented',
+ '_source'
+ ];
+
+ var CLONE_DEFAULTS = [
+ // MouseEvent
+ false,
+ false,
+ null,
+ null,
+ 0,
+ 0,
+ 0,
+ 0,
+ false,
+ false,
+ false,
+ false,
+ 0,
+ null,
+ // DOM Level 3
+ 0,
+ // PointerEvent
+ 0,
+ 0,
+ 0,
+ 0,
+ 0,
+ 0,
+ '',
+ 0,
+ false,
+ // event instance
+ '',
+ null,
+ null,
+ 0,
+ 0,
+ 0,
+ 0,
+ function() {},
+ false
+ ];
+
+ var HAS_SVG_INSTANCE = (typeof SVGElementInstance !== 'undefined');
+
+ var eventFactory = scope.eventFactory;
+
+ // set of recognizers to run for the currently handled event
+ var currentGestures;
+
+ /**
+ * This module is for normalizing events. Mouse and Touch events will be
+ * collected here, and fire PointerEvents that have the same semantics, no
+ * matter the source.
+ * Events fired:
+ * - pointerdown: a pointing is added
+ * - pointerup: a pointer is removed
+ * - pointermove: a pointer is moved
+ * - pointerover: a pointer crosses into an element
+ * - pointerout: a pointer leaves an element
+ * - pointercancel: a pointer will no longer generate events
+ */
+ var dispatcher = {
+ IS_IOS: false,
+ pointermap: new scope.PointerMap(),
+ requiredGestures: new scope.PointerMap(),
+ eventMap: Object.create(null),
+ // Scope objects for native events.
+ // This exists for ease of testing.
+ eventSources: Object.create(null),
+ eventSourceList: [],
+ gestures: [],
+ // map gesture event -> {listeners: int, index: gestures[int]}
+ dependencyMap: {
+ // make sure down and up are in the map to trigger "register"
+ down: {
+ listeners: 0,
+ index: -1
+ },
+ up: {
+ listeners: 0,
+ index: -1
+ }
+ },
+ gestureQueue: [],
+ /**
+ * Add a new event source that will generate pointer events.
+ *
+ * `inSource` must contain an array of event names named `events`, and
+ * functions with the names specified in the `events` array.
+ * @param {string} name A name for the event source
+ * @param {Object} source A new source of platform events.
+ */
+ registerSource: function(name, source) {
+ var s = source;
+ var newEvents = s.events;
+ if (newEvents) {
+ newEvents.forEach(function(e) {
+ if (s[e]) {
+ this.eventMap[e] = s[e].bind(s);
+ }
+ }, this);
+ this.eventSources[name] = s;
+ this.eventSourceList.push(s);
+ }
+ },
+ registerGesture: function(name, source) {
+ var obj = Object.create(null);
+ obj.listeners = 0;
+ obj.index = this.gestures.length;
+ for (var i = 0, g; i < source.exposes.length; i++) {
+ g = source.exposes[i].toLowerCase();
+ this.dependencyMap[g] = obj;
+ }
+ this.gestures.push(source);
+ },
+ register: function(element, initial) {
+ var l = this.eventSourceList.length;
+ for (var i = 0, es;
+ (i < l) && (es = this.eventSourceList[i]); i++) {
+ // call eventsource register
+ es.register.call(es, element, initial);
+ }
+ },
+ unregister: function(element) {
+ var l = this.eventSourceList.length;
+ for (var i = 0, es;
+ (i < l) && (es = this.eventSourceList[i]); i++) {
+ // call eventsource register
+ es.unregister.call(es, element);
+ }
+ },
+ // EVENTS
+ down: function(inEvent) {
+ this.requiredGestures.set(inEvent.pointerId, currentGestures);
+ this.fireEvent('down', inEvent);
+ },
+ move: function(inEvent) {
+ // pipe move events into gesture queue directly
+ inEvent.type = 'move';
+ this.fillGestureQueue(inEvent);
+ },
+ up: function(inEvent) {
+ this.fireEvent('up', inEvent);
+ this.requiredGestures.delete(inEvent.pointerId);
+ },
+ cancel: function(inEvent) {
+ inEvent.tapPrevented = true;
+ this.fireEvent('up', inEvent);
+ this.requiredGestures.delete(inEvent.pointerId);
+ },
+ addGestureDependency: function(node, currentGestures) {
+ var gesturesWanted = node._pgEvents;
+ if (gesturesWanted && currentGestures) {
+ var gk = Object.keys(gesturesWanted);
+ for (var i = 0, r, ri, g; i < gk.length; i++) {
+ // gesture
+ g = gk[i];
+ if (gesturesWanted[g] > 0) {
+ // lookup gesture recognizer
+ r = this.dependencyMap[g];
+ // recognizer index
+ ri = r ? r.index : -1;
+ currentGestures[ri] = true;
+ }
+ }
+ }
+ },
+ // LISTENER LOGIC
+ eventHandler: function(inEvent) {
+ // This is used to prevent multiple dispatch of events from
+ // platform events. This can happen when two elements in different scopes
+ // are set up to create pointer events, which is relevant to Shadow DOM.
+
+ var type = inEvent.type;
+
+ // only generate the list of desired events on "down"
+ if (type === 'touchstart' || type === 'mousedown' || type === 'pointerdown' || type === 'MSPointerDown') {
+ if (!inEvent._handledByPG) {
+ currentGestures = {};
+ }
+
+ // in IOS mode, there is only a listener on the document, so this is not re-entrant
+ if (this.IS_IOS) {
+ var ev = inEvent;
+ if (type === 'touchstart') {
+ var ct = inEvent.changedTouches[0];
+ // set up a fake event to give to the path builder
+ ev = {
+ target: inEvent.target,
+ clientX: ct.clientX,
+ clientY: ct.clientY,
+ path: inEvent.path
+ };
+ }
+ // use event path if available, otherwise build a path from target finding
+ var nodes = inEvent.path || scope.targetFinding.path(ev);
+ for (var i = 0, n; i < nodes.length; i++) {
+ n = nodes[i];
+ this.addGestureDependency(n, currentGestures);
+ }
+ } else {
+ this.addGestureDependency(inEvent.currentTarget, currentGestures);
+ }
+ }
+
+ if (inEvent._handledByPG) {
+ return;
+ }
+ var fn = this.eventMap && this.eventMap[type];
+ if (fn) {
+ fn(inEvent);
+ }
+ inEvent._handledByPG = true;
+ },
+ // set up event listeners
+ listen: function(target, events) {
+ for (var i = 0, l = events.length, e;
+ (i < l) && (e = events[i]); i++) {
+ this.addEvent(target, e);
+ }
+ },
+ // remove event listeners
+ unlisten: function(target, events) {
+ for (var i = 0, l = events.length, e;
+ (i < l) && (e = events[i]); i++) {
+ this.removeEvent(target, e);
+ }
+ },
+ addEvent: function(target, eventName) {
+ target.addEventListener(eventName, this.boundHandler);
+ },
+ removeEvent: function(target, eventName) {
+ target.removeEventListener(eventName, this.boundHandler);
+ },
+ // EVENT CREATION AND TRACKING
+ /**
+ * Creates a new Event of type `inType`, based on the information in
+ * `inEvent`.
+ *
+ * @param {string} inType A string representing the type of event to create
+ * @param {Event} inEvent A platform event with a target
+ * @return {Event} A PointerEvent of type `inType`
+ */
+ makeEvent: function(inType, inEvent) {
+ var e = eventFactory.makePointerEvent(inType, inEvent);
+ e.preventDefault = inEvent.preventDefault;
+ e.tapPrevented = inEvent.tapPrevented;
+ e._target = e._target || inEvent.target;
+ return e;
+ },
+ // make and dispatch an event in one call
+ fireEvent: function(inType, inEvent) {
+ var e = this.makeEvent(inType, inEvent);
+ return this.dispatchEvent(e);
+ },
+ /**
+ * Returns a snapshot of inEvent, with writable properties.
+ *
+ * @param {Event} inEvent An event that contains properties to copy.
+ * @return {Object} An object containing shallow copies of `inEvent`'s
+ * properties.
+ */
+ cloneEvent: function(inEvent) {
+ var eventCopy = Object.create(null),
+ p;
+ for (var i = 0; i < CLONE_PROPS.length; i++) {
+ p = CLONE_PROPS[i];
+ eventCopy[p] = inEvent[p] || CLONE_DEFAULTS[i];
+ // Work around SVGInstanceElement shadow tree
+ // Return the