pac-slider
Version:
1,118 lines • 124 kB
JavaScript
import { Component, ComponentFactoryResolver, Directive, ElementRef, HostListener, Input, NgModule, Renderer2, ViewChild, ViewContainerRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
var SlideZoneDirective = /** @class */ (function () {
/**
* @param {?} viewContainerRef
*/
function SlideZoneDirective(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
return SlideZoneDirective;
}());
SlideZoneDirective.decorators = [
{ type: Directive, args: [{
selector: '[slideZone]'
},] },
];
/**
* @nocollapse
*/
SlideZoneDirective.ctorParameters = function () { return [
{ type: ViewContainerRef, },
]; };
var CarouselSlideComponent = /** @class */ (function () {
/**
* @param {?} el
* @param {?} renderer
*/
function CarouselSlideComponent(el, renderer) {
this.el = el;
this.renderer = renderer;
}
/**
* @param {?} offset
* @param {?=} deleyPercent
* @return {?}
*/
CarouselSlideComponent.prototype.slide = function (offset, deleyPercent) {
if (deleyPercent === void 0) { deleyPercent = null; }
// if (deleyPercent != null) {
// this.renderer.setStyle(this.el.nativeElement,
// 'transition', 'transform 0.' + Math.floor(deleyPercent / 100 * 7) + 's ease-in-out');
// } else {
this.renderer.addClass(this.el.nativeElement, 'delay');
// }
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translate3d(' + offset + 'px, 0, 0)');
};
/**
* @param {?} offset
* @return {?}
*/
CarouselSlideComponent.prototype.stabilizes = function (offset) {
this.renderer.removeClass(this.el.nativeElement, 'delay');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translate3d(' + offset + 'px, 0, 0)');
};
return CarouselSlideComponent;
}());
CarouselSlideComponent.decorators = [
{ type: Component, args: [{
selector: 'pac-carousel-slide',
template: "\n <ng-container *ngIf=\"!route \">\n <a [href]=\"link?link:'#'\">\n <img [src]=\"src\" draggable=\"false\">\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"route\">\n <a [routerLink]=\"route\">\n <img [src]=\"src\" draggable=\"false\">\n </a>\n </ng-container>\n <div class=\"image-overlay\"></div>\n ",
styles: ["\n :host {\n min-width: 100%;\n width: 100%;\n height: 100%;\n display: inline-table;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n text-transform: uppercase;\n position: relative;\n cursor: pointer;\n -ms-flex-align: end;\n -webkit-box-align: end;\n align-items: flex-end;\n -ms-flex-line-pack: end;\n align-content: flex-end; }\n :host.delay {\n -webkit-transition: transform .7s ease-in-out;\n -webkit-transition: -webkit-transform .7s ease-in-out;\n transition: -webkit-transform .7s ease-in-out;\n transition: transform .7s ease-in-out;\n transition: transform .7s ease-in-out, -webkit-transform .7s ease-in-out; }\n :host img {\n width: 100%; }\n :host .image-overlay {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0; }\n "]
},] },
];
/**
* @nocollapse
*/
CarouselSlideComponent.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer2, },
]; };
CarouselSlideComponent.propDecorators = {
'src': [{ type: Input },],
'link': [{ type: Input },],
'route': [{ type: Input },],
};
var STATE_AVAILABLE = 'available';
var STATE_IDLE = 'idle';
var CarouselComponent = /** @class */ (function () {
/**
* @param {?} componentFactoryResolver
*/
function CarouselComponent(componentFactoryResolver) {
this.componentFactoryResolver = componentFactoryResolver;
this.autoPlay = true;
this.time = 4;
this.slides = [];
this.carouselSlides = [];
this.x = 0;
this.startX = 0;
this.state = STATE_AVAILABLE;
this.lastOffset = 0;
this.index = 0;
}
/**
* @return {?}
*/
CarouselComponent.prototype.ngAfterContentInit = function () {
var _this = this;
this.initialWindowWidth = window.innerWidth;
this.viewContainerRef = this.slideZone.viewContainerRef;
this.lastOffset -= this.sliderContainer.nativeElement.getBoundingClientRect().width;
var /** @type {?} */ component = this.createComponent(this.slides[this.slides.length - 1]);
this.carouselSlides.push(component);
this.slides.forEach(function (slide, index) {
if (index != _this.slides.length - 1) {
var /** @type {?} */ component_1 = _this.createComponent(slide);
_this.carouselSlides.push(component_1);
}
});
if (this.autoPlay) {
this.interval = setInterval(function () {
if (!_this.pause) {
_this.slideForward();
}
}, this.time * 1000);
}
};
/**
* @param {?} slide
* @return {?}
*/
CarouselComponent.prototype.createComponent = function (slide) {
var /** @type {?} */ componentFactory = this.componentFactoryResolver.resolveComponentFactory(CarouselSlideComponent);
var /** @type {?} */ componentRef = this.viewContainerRef.createComponent(componentFactory);
componentRef.instance.src = slide.src;
componentRef.instance.route = slide.route;
componentRef.instance.link = slide.link;
componentRef.instance.stabilizes(this.lastOffset);
return componentRef.instance;
};
/**
* @return {?}
*/
CarouselComponent.prototype.ngOnDestroy = function () {
if (this.interval) {
clearInterval(this.interval);
}
};
/**
* @param {?} slide
* @return {?}
*/
CarouselComponent.prototype.addSlideData = function (slide) {
this.slides.push(slide);
};
/**
* @param {?} slide
* @return {?}
*/
CarouselComponent.prototype.removeSlide = function (slide) {
};
/**
* @param {?} event
* @return {?}
*/
CarouselComponent.prototype.onResize = function (event) {
var _this = this;
this.lastOffset = 0 - this.sliderContainer.nativeElement.getBoundingClientRect().width;
this.carouselSlides.forEach(function (slide) {
slide.stabilizes(_this.lastOffset);
});
};
/**
* @return {?}
*/
CarouselComponent.prototype.pauseAutoPlay = function () {
this.pause = true;
};
/**
* @return {?}
*/
CarouselComponent.prototype.startAutoPlay = function () {
this.pause = false;
};
/**
* @param {?} event
* @return {?}
*/
CarouselComponent.prototype.onPanStart = function (event) {
event.preventDefault();
this.startX = this.x;
};
/**
* @param {?} event
* @return {?}
*/
CarouselComponent.prototype.onPan = function (event) {
var _this = this;
event.preventDefault();
this.x = this.startX + event.deltaX;
if (this.state === STATE_AVAILABLE) {
this.carouselSlides.forEach(function (slide) {
slide.stabilizes(_this.lastOffset + _this.x);
});
}
};
/**
* @return {?}
*/
CarouselComponent.prototype.onPanEnd = function () {
var /** @type {?} */ swipePercent = Math.abs(this.x) * 100 / this.sliderContainer.nativeElement.getBoundingClientRect().width;
swipePercent = Math.abs(100 - swipePercent);
if (this.x < 0) {
this.slideForward(swipePercent);
}
else {
this.slideBack(swipePercent);
}
this.x = 0;
};
/**
* @param {?=} deleyPercent
* @return {?}
*/
CarouselComponent.prototype.slideBack = function (deleyPercent) {
var _this = this;
if (deleyPercent === void 0) { deleyPercent = null; }
if (this.state === STATE_AVAILABLE) {
this.state = STATE_IDLE;
this.lastOffset += this.sliderContainer.nativeElement.getBoundingClientRect().width;
this.carouselSlides.forEach(function (slide) {
slide.slide(_this.lastOffset, deleyPercent);
});
setTimeout(function () {
var /** @type {?} */ ref = _this.viewContainerRef.get(_this.carouselSlides.length - 1);
_this.viewContainerRef.move(ref, 0);
_this.lastOffset -= _this.sliderContainer.nativeElement.getBoundingClientRect().width;
_this.carouselSlides.forEach(function (slide) {
slide.stabilizes(_this.lastOffset);
});
_this.state = STATE_AVAILABLE;
_this.index--;
if (_this.index < 0) {
_this.index = _this.slides.length - 1;
}
}, 720);
setTimeout(function () {
_this.pause = false;
}, this.time * 1000);
}
};
/**
* @param {?=} deleyPercent
* @return {?}
*/
CarouselComponent.prototype.slideForward = function (deleyPercent) {
var _this = this;
if (deleyPercent === void 0) { deleyPercent = null; }
if (this.state === STATE_AVAILABLE) {
this.state = STATE_IDLE;
this.lastOffset -= this.sliderContainer.nativeElement.getBoundingClientRect().width;
this.carouselSlides.forEach(function (slide) {
slide.slide(_this.lastOffset, deleyPercent);
});
setTimeout(function () {
var /** @type {?} */ ref = _this.viewContainerRef.get(0);
_this.viewContainerRef.move(ref, _this.carouselSlides.length - 1);
_this.lastOffset = 0 - _this.sliderContainer.nativeElement.getBoundingClientRect().width;
_this.carouselSlides.forEach(function (slide) {
slide.stabilizes(_this.lastOffset);
});
_this.state = STATE_AVAILABLE;
_this.index++;
if (_this.index > _this.slides.length - 1) {
_this.index = 0;
}
}, 720);
}
};
/**
* @param {?} index
* @return {?}
*/
CarouselComponent.prototype.slideToIndex = function (index) {
var _this = this;
if (index > this.index) {
console.log("Index:");
console.log(index);
console.log("This index:");
console.log(this.index);
if (this.state === STATE_AVAILABLE) {
this.state = STATE_IDLE;
this.lastOffset -= this.sliderContainer.nativeElement.getBoundingClientRect().width;
this.carouselSlides.forEach(function (slide) {
slide.slide(_this.lastOffset);
});
setTimeout(function () {
var /** @type {?} */ ref = _this.viewContainerRef.get(_this.index);
_this.viewContainerRef.move(ref, _this.carouselSlides.length - 1);
_this.lastOffset = 0 - _this.sliderContainer.nativeElement.getBoundingClientRect().width;
_this.carouselSlides.forEach(function (slide) {
slide.stabilizes(_this.lastOffset);
});
_this.state = STATE_AVAILABLE;
_this.index++;
if (_this.index > _this.slides.length - 1) {
_this.index = 0;
}
}, 720);
}
}
else if (index < this.index) {
console.log("Index:");
console.log(index);
console.log("This index:");
console.log(this.index);
if (this.state === STATE_AVAILABLE) {
this.state = STATE_IDLE;
this.lastOffset += this.sliderContainer.nativeElement.getBoundingClientRect().width;
this.carouselSlides.forEach(function (slide) {
slide.slide(_this.lastOffset);
});
setTimeout(function () {
var /** @type {?} */ ref = _this.viewContainerRef.get(_this.carouselSlides.length - 1);
_this.viewContainerRef.move(ref, 0);
_this.lastOffset -= _this.sliderContainer.nativeElement.getBoundingClientRect().width;
_this.carouselSlides.forEach(function (slide) {
slide.stabilizes(_this.lastOffset);
});
_this.state = STATE_AVAILABLE;
_this.index--;
if (_this.index < 0) {
_this.index = _this.slides.length - 1;
}
}, 720);
setTimeout(function () {
_this.pause = false;
}, this.time * 1000);
}
}
// if (index > this.index) {
// this.slideForward();
// } else if (index < this.index) {
// this.slideBack();
// }
};
return CarouselComponent;
}());
CarouselComponent.decorators = [
{ type: Component, args: [{
selector: 'pac-slider',
template: "\n <div class=\"carousel-container\" #sliderContainer>\n\n <!-- Left Arrow Container -->\n <div class=\"arrow left-arrow\"\n (click)=\"slideBack()\"\n (mouseenter)=\"pauseAutoPlay()\">\n <div class=\"arrow-wrapper\">\n <div id=\"left-arrow\"></div>\n </div>\n </div>\n\n <!-- Slider Zone -->\n <div class=\"slides-zone\" #slidesZone>\n <ng-content></ng-content>\n <div class=\"images-container\"\n (mouseenter)=\"pauseAutoPlay()\"\n (mouseleave)=\"startAutoPlay()\"\n (panstart)=\"onPanStart($event)\"\n (panmove)=\"onPan($event)\"\n (panend)=\"onPanEnd()\"\n #slideImg>\n <ng-template slideZone>\n\n </ng-template>\n </div>\n </div>\n\n <!-- Dots Container -->\n <div class=\"dots-container\">\n <ul (mouseenter)=\"pauseAutoPlay()\"\n (mouseleave)=\"startAutoPlay()\">\n <li *ngFor=\"let dot of slides;let i = index;\"\n (click)=\"slideToIndex(i)\"\n [ngClass]=\"{selected: i == index}\">\n </li>\n </ul>\n </div>\n\n <!-- Right Arrow Container -->\n <div class=\"arrow right-arrow\"\n (click)=\"slideForward()\"\n (mouseenter)=\"pauseAutoPlay()\">\n <div class=\"arrow-wrapper\">\n <div id=\"right-arrow\"></div>\n </div>\n </div>\n\n </div>\n ",
styles: ["\n .carousel-container {\n width: 100%;\n max-height: 100vh;\n overflow: hidden;\n position: relative; }\n .carousel-container .images-container {\n width: 100%;\n display: -ms-flexbox;\n display: -webkit-box;\n display: flex;\n -ms-flex: 1;\n -webkit-box-flex: 1;\n flex: 1;\n -ms-flex-align: center;\n -webkit-box-align: center;\n align-items: center;\n -ms-flex-pack: start;\n -webkit-box-pack: start;\n justify-content: flex-start;\n -webkit-transition: all 300ms cubic-bezier(0.35, 0, 0.25, 1);\n transition: all 300ms cubic-bezier(0.35, 0, 0.25, 1); }\n .carousel-container .arrow {\n z-index: 2;\n position: absolute;\n top: 0;\n height: 100%;\n width: 6%;\n min-width: 60px;\n display: -ms-flexbox;\n display: -webkit-box;\n display: flex;\n -ms-flex-direction: row;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n flex-direction: row;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n -ms-flex-pack: center;\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-line-pack: stretch;\n align-content: stretch;\n -ms-flex-align: center;\n -webkit-box-align: center;\n align-items: center; }\n .carousel-container .arrow .arrow-wrapper {\n position: relative;\n width: 20px;\n height: 20px;\n -ms-flex-order: 0;\n -webkit-box-ordinal-group: 1;\n order: 0;\n -ms-flex: 0 1 auto;\n -webkit-box-flex: 0;\n flex: 0 1 auto;\n -webkit-align-self: auto;\n -ms-flex-item-align: auto;\n align-self: auto; }\n .carousel-container .arrow .arrow-wrapper #right-arrow {\n position: absolute;\n height: 20px;\n width: 20px;\n /* IE 9 */\n -webkit-transform: rotate(45deg);\n /* Chrome, Safari, Opera */\n transform: rotate(45deg);\n border-right: 2px solid #ffffff;\n border-top: 2px solid #ffffff; }\n .carousel-container .arrow .arrow-wrapper #left-arrow {\n position: absolute;\n height: 20px;\n width: 20px;\n /* IE 9 */\n -webkit-transform: rotate(45deg);\n /* Chrome, Safari, Opera */\n transform: rotate(45deg);\n border-left: 2px solid #ffffff;\n border-bottom: 2px solid #ffffff; }\n .carousel-container .arrow.left-arrow {\n left: 0;\n cursor: pointer; }\n .carousel-container .arrow.right-arrow {\n right: 0;\n cursor: pointer; }\n .carousel-container .dots-container {\n z-index: 2;\n position: absolute;\n bottom: 0;\n height: 10%;\n width: 100%;\n display: -ms-flexbox;\n display: -webkit-box;\n display: flex;\n -ms-flex-direction: row;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n flex-direction: row;\n -ms-flex-wrap: nowrap;\n flex-wrap: nowrap;\n -ms-flex-pack: center;\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-line-pack: stretch;\n align-content: stretch;\n -ms-flex-align: center;\n -webkit-box-align: center;\n align-items: center; }\n .carousel-container .dots-container ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n overflow: hidden; }\n .carousel-container .dots-container ul li {\n cursor: pointer;\n height: 10px;\n width: 10px;\n background: #fff;\n border-radius: 100%;\n margin: 5px;\n display: inline-table;\n opacity: .5; }\n .carousel-container .dots-container ul li.selected {\n opacity: 1; }\n "]
},] },
];
/**
* @nocollapse
*/
CarouselComponent.ctorParameters = function () { return [
{ type: ComponentFactoryResolver, },
]; };
CarouselComponent.propDecorators = {
'autoPlay': [{ type: Input },],
'time': [{ type: Input },],
'slidesZone': [{ type: ViewChild, args: ['slidesZone',] },],
'sliderContainer': [{ type: ViewChild, args: ['sliderContainer',] },],
'slideZone': [{ type: ViewChild, args: [SlideZoneDirective,] },],
'onResize': [{ type: HostListener, args: ['window:resize', ['$event'],] },],
};
var CarouselItemComponent = /** @class */ (function () {
/**
* @param {?} parent
*/
function CarouselItemComponent(parent) {
this.parent = parent;
parent.addSlideData(this);
}
/**
* @return {?}
*/
CarouselItemComponent.prototype.ngOnInit = function () {
};
/**
* @return {?}
*/
CarouselItemComponent.prototype.ngOnDestroy = function () {
this.parent.removeSlide(this);
};
return CarouselItemComponent;
}());
CarouselItemComponent.decorators = [
{ type: Component, args: [{
selector: 'pac-item',
template: "\n\n ",
styles: ["\n\n "]
},] },
];
/**
* @nocollapse
*/
CarouselItemComponent.ctorParameters = function () { return [
{ type: CarouselComponent, },
]; };
CarouselItemComponent.propDecorators = {
'src': [{ type: Input },],
'link': [{ type: Input },],
'route': [{ type: Input },],
};
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
var hammer = createCommonjsModule(function (module) {
/*! Hammer.JS - v2.0.7 - 2016-04-22
* http://hammerjs.github.io/
*
* Copyright (c) 2016 Jorik Tangelder;
* Licensed under the MIT license */
(function (window, document, exportName, undefined) {
'use strict';
var VENDOR_PREFIXES = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];
var TEST_ELEMENT = document.createElement('div');
var TYPE_FUNCTION = 'function';
var round = Math.round;
var abs = Math.abs;
var now = Date.now;
/**
* set a timeout with a given scope
* @param {Function} fn
* @param {Number} timeout
* @param {Object} context
* @returns {number}
*/
function setTimeoutContext(fn, timeout, context) {
return setTimeout(bindFn(fn, context), timeout);
}
/**
* if the argument is an array, we want to execute the fn on each entry
* if it aint an array we don't want to do a thing.
* this is used by all the methods that accept a single and array argument.
* @param {*|Array} arg
* @param {String} fn
* @param {Object} [context]
* @returns {Boolean}
*/
function invokeArrayArg(arg, fn, context) {
if (Array.isArray(arg)) {
each(arg, context[fn], context);
return true;
}
return false;
}
/**
* walk objects and arrays
* @param {Object} obj
* @param {Function} iterator
* @param {Object} context
*/
function each(obj, iterator, context) {
var i;
if (!obj) {
return;
}
if (obj.forEach) {
obj.forEach(iterator, context);
}
else if (obj.length !== undefined) {
i = 0;
while (i < obj.length) {
iterator.call(context, obj[i], i, obj);
i++;
}
}
else {
for (i in obj) {
obj.hasOwnProperty(i) && iterator.call(context, obj[i], i, obj);
}
}
}
/**
* wrap a method with a deprecation warning and stack trace
* @param {Function} method
* @param {String} name
* @param {String} message
* @returns {Function} A new function wrapping the supplied method.
*/
function deprecate(method, name, message) {
var deprecationMessage = 'DEPRECATED METHOD: ' + name + '\n' + message + ' AT \n';
return function () {
var e = new Error('get-stack-trace');
var stack = e && e.stack ? e.stack.replace(/^[^\(]+?[\n$]/gm, '')
.replace(/^\s+at\s+/gm, '')
.replace(/^Object.<anonymous>\s*\(/gm, '{anonymous}()@') : 'Unknown Stack Trace';
var log = window.console && (window.console.warn || window.console.log);
if (log) {
log.call(window.console, deprecationMessage, stack);
}
return method.apply(this, arguments);
};
}
/**
* extend object.
* means that properties in dest will be overwritten by the ones in src.
* @param {Object} target
* @param {...Object} objects_to_assign
* @returns {Object} target
*/
var assign;
if (typeof Object.assign !== 'function') {
assign = function assign(target) {
if (target === undefined || target === null) {
throw new TypeError('Cannot convert undefined or null to object');
}
var output = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source !== undefined && source !== null) {
for (var nextKey in source) {
if (source.hasOwnProperty(nextKey)) {
output[nextKey] = source[nextKey];
}
}
}
}
return output;
};
}
else {
assign = Object.assign;
}
/**
* extend object.
* means that properties in dest will be overwritten by the ones in src.
* @param {Object} dest
* @param {Object} src
* @param {Boolean} [merge=false]
* @returns {Object} dest
*/
var extend = deprecate(function extend(dest, src, merge) {
var keys = Object.keys(src);
var i = 0;
while (i < keys.length) {
if (!merge || (merge && dest[keys[i]] === undefined)) {
dest[keys[i]] = src[keys[i]];
}
i++;
}
return dest;
}, 'extend', 'Use `assign`.');
/**
* merge the values from src in the dest.
* means that properties that exist in dest will not be overwritten by src
* @param {Object} dest
* @param {Object} src
* @returns {Object} dest
*/
var merge = deprecate(function merge(dest, src) {
return extend(dest, src, true);
}, 'merge', 'Use `assign`.');
/**
* simple class inheritance
* @param {Function} child
* @param {Function} base
* @param {Object} [properties]
*/
function inherit(child, base, properties) {
var baseP = base.prototype, childP;
childP = child.prototype = Object.create(baseP);
childP.constructor = child;
childP._super = baseP;
if (properties) {
assign(childP, properties);
}
}
/**
* simple function bind
* @param {Function} fn
* @param {Object} context
* @returns {Function}
*/
function bindFn(fn, context) {
return function boundFn() {
return fn.apply(context, arguments);
};
}
/**
* let a boolean value also be a function that must return a boolean
* this first item in args will be used as the context
* @param {Boolean|Function} val
* @param {Array} [args]
* @returns {Boolean}
*/
function boolOrFn(val, args) {
if (typeof val == TYPE_FUNCTION) {
return val.apply(args ? args[0] || undefined : undefined, args);
}
return val;
}
/**
* use the val2 when val1 is undefined
* @param {*} val1
* @param {*} val2
* @returns {*}
*/
function ifUndefined(val1, val2) {
return (val1 === undefined) ? val2 : val1;
}
/**
* addEventListener with multiple events at once
* @param {EventTarget} target
* @param {String} types
* @param {Function} handler
*/
function addEventListeners(target, types, handler) {
each(splitStr(types), function (type) {
target.addEventListener(type, handler, false);
});
}
/**
* removeEventListener with multiple events at once
* @param {EventTarget} target
* @param {String} types
* @param {Function} handler
*/
function removeEventListeners(target, types, handler) {
each(splitStr(types), function (type) {
target.removeEventListener(type, handler, false);
});
}
/**
* find if a node is in the given parent
* @method hasParent
* @param {HTMLElement} node
* @param {HTMLElement} parent
* @return {Boolean} found
*/
function hasParent(node, parent) {
while (node) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
}
/**
* small indexOf wrapper
* @param {String} str
* @param {String} find
* @returns {Boolean} found
*/
function inStr(str, find) {
return str.indexOf(find) > -1;
}
/**
* split string on whitespace
* @param {String} str
* @returns {Array} words
*/
function splitStr(str) {
return str.trim().split(/\s+/g);
}
/**
* find if a array contains the object using indexOf or a simple polyFill
* @param {Array} src
* @param {String} find
* @param {String} [findByKey]
* @return {Boolean|Number} false when not found, or the index
*/
function inArray(src, find, findByKey) {
if (src.indexOf && !findByKey) {
return src.indexOf(find);
}
else {
var i = 0;
while (i < src.length) {
if ((findByKey && src[i][findByKey] == find) || (!findByKey && src[i] === find)) {
return i;
}
i++;
}
return -1;
}
}
/**
* convert array-like objects to real arrays
* @param {Object} obj
* @returns {Array}
*/
function toArray(obj) {
return Array.prototype.slice.call(obj, 0);
}
/**
* unique array with objects based on a key (like 'id') or just by the array's value
* @param {Array} src [{id:1},{id:2},{id:1}]
* @param {String} [key]
* @param {Boolean} [sort=False]
* @returns {Array} [{id:1},{id:2}]
*/
function uniqueArray(src, key, sort) {
var results = [];
var values = [];
var i = 0;
while (i < src.length) {
var val = key ? src[i][key] : src[i];
if (inArray(values, val) < 0) {
results.push(src[i]);
}
values[i] = val;
i++;
}
if (sort) {
if (!key) {
results = results.sort();
}
else {
results = results.sort(function sortUniqueArray(a, b) {
return a[key] > b[key];
});
}
}
return results;
}
/**
* get the prefixed property
* @param {Object} obj
* @param {String} property
* @returns {String|Undefined} prefixed
*/
function prefixed(obj, property) {
var prefix, prop;
var camelProp = property[0].toUpperCase() + property.slice(1);
var i = 0;
while (i < VENDOR_PREFIXES.length) {
prefix = VENDOR_PREFIXES[i];
prop = (prefix) ? prefix + camelProp : property;
if (prop in obj) {
return prop;
}
i++;
}
return undefined;
}
/**
* get a unique id
* @returns {number} uniqueId
*/
var _uniqueId = 1;
function uniqueId() {
return _uniqueId++;
}
/**
* get the window object of an element
* @param {HTMLElement} element
* @returns {DocumentView|Window}
*/
function getWindowForElement(element) {
var doc = element.ownerDocument || element;
return (doc.defaultView || doc.parentWindow || window);
}
var MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
var SUPPORT_TOUCH = ('ontouchstart' in window);
var SUPPORT_POINTER_EVENTS = prefixed(window, 'PointerEvent') !== undefined;
var SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);
var INPUT_TYPE_TOUCH = 'touch';
var INPUT_TYPE_PEN = 'pen';
var INPUT_TYPE_MOUSE = 'mouse';
var INPUT_TYPE_KINECT = 'kinect';
var COMPUTE_INTERVAL = 25;
var INPUT_START = 1;
var INPUT_MOVE = 2;
var INPUT_END = 4;
var INPUT_CANCEL = 8;
var DIRECTION_NONE = 1;
var DIRECTION_LEFT = 2;
var DIRECTION_RIGHT = 4;
var DIRECTION_UP = 8;
var DIRECTION_DOWN = 16;
var DIRECTION_HORIZONTAL = DIRECTION_LEFT | DIRECTION_RIGHT;
var DIRECTION_VERTICAL = DIRECTION_UP | DIRECTION_DOWN;
var DIRECTION_ALL = DIRECTION_HORIZONTAL | DIRECTION_VERTICAL;
var PROPS_XY = ['x', 'y'];
var PROPS_CLIENT_XY = ['clientX', 'clientY'];
/**
* create new input type manager
* @param {Manager} manager
* @param {Function} callback
* @returns {Input}
* @constructor
*/
function Input$$1(manager, callback) {
var self = this;
this.manager = manager;
this.callback = callback;
this.element = manager.element;
this.target = manager.options.inputTarget;
// smaller wrapper around the handler, for the scope and the enabled state of the manager,
// so when disabled the input events are completely bypassed.
this.domHandler = function (ev) {
if (boolOrFn(manager.options.enable, [manager])) {
self.handler(ev);
}
};
this.init();
}
Input$$1.prototype = {
/**
* should handle the inputEvent data and trigger the callback
* @virtual
*/
handler: function () { },
/**
* bind the events
*/
init: function () {
this.evEl && addEventListeners(this.element, this.evEl, this.domHandler);
this.evTarget && addEventListeners(this.target, this.evTarget, this.domHandler);
this.evWin && addEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
},
/**
* unbind the events
*/
destroy: function () {
this.evEl && removeEventListeners(this.element, this.evEl, this.domHandler);
this.evTarget && removeEventListeners(this.target, this.evTarget, this.domHandler);
this.evWin && removeEventListeners(getWindowForElement(this.element), this.evWin, this.domHandler);
}
};
/**
* create new input type manager
* called by the Manager constructor
* @param {Hammer} manager
* @returns {Input}
*/
function createInputInstance(manager) {
var Type;
var inputClass = manager.options.inputClass;
if (inputClass) {
Type = inputClass;
}
else if (SUPPORT_POINTER_EVENTS) {
Type = PointerEventInput;
}
else if (SUPPORT_ONLY_TOUCH) {
Type = TouchInput;
}
else if (!SUPPORT_TOUCH) {
Type = MouseInput;
}
else {
Type = TouchMouseInput;
}
return new (Type)(manager, inputHandler);
}
/**
* handle input events
* @param {Manager} manager
* @param {String} eventType
* @param {Object} input
*/
function inputHandler(manager, eventType, input) {
var pointersLen = input.pointers.length;
var changedPointersLen = input.changedPointers.length;
var isFirst = (eventType & INPUT_START && (pointersLen - changedPointersLen === 0));
var isFinal = (eventType & (INPUT_END | INPUT_CANCEL) && (pointersLen - changedPointersLen === 0));
input.isFirst = !!isFirst;
input.isFinal = !!isFinal;
if (isFirst) {
manager.session = {};
}
// source event is the normalized value of the domEvents
// like 'touchstart, mouseup, pointerdown'
input.eventType = eventType;
// compute scale, rotation etc
computeInputData(manager, input);
// emit secret event
manager.emit('hammer.input', input);
manager.recognize(input);
manager.session.prevInput = input;
}
/**
* extend the data with some usable properties like scale, rotate, velocity etc
* @param {Object} manager
* @param {Object} input
*/
function computeInputData(manager, input) {
var session = manager.session;
var pointers = input.pointers;
var pointersLength = pointers.length;
// store the first input to calculate the distance and direction
if (!session.firstInput) {
session.firstInput = simpleCloneInputData(input);
}
// to compute scale and rotation we need to store the multiple touches
if (pointersLength > 1 && !session.firstMultiple) {
session.firstMultiple = simpleCloneInputData(input);
}
else if (pointersLength === 1) {
session.firstMultiple = false;
}
var firstInput = session.firstInput;
var firstMultiple = session.firstMultiple;
var offsetCenter = firstMultiple ? firstMultiple.center : firstInput.center;
var center = input.center = getCenter(pointers);
input.timeStamp = now();
input.deltaTime = input.timeStamp - firstInput.timeStamp;
input.angle = getAngle(offsetCenter, center);
input.distance = getDistance(offsetCenter, center);
computeDeltaXY(session, input);
input.offsetDirection = getDirection(input.deltaX, input.deltaY);
var overallVelocity = getVelocity(input.deltaTime, input.deltaX, input.deltaY);
input.overallVelocityX = overallVelocity.x;
input.overallVelocityY = overallVelocity.y;
input.overallVelocity = (abs(overallVelocity.x) > abs(overallVelocity.y)) ? overallVelocity.x : overallVelocity.y;
input.scale = firstMultiple ? getScale(firstMultiple.pointers, pointers) : 1;
input.rotation = firstMultiple ? getRotation(firstMultiple.pointers, pointers) : 0;
input.maxPointers = !session.prevInput ? input.pointers.length : ((input.pointers.length >
session.prevInput.maxPointers) ? input.pointers.length : session.prevInput.maxPointers);
computeIntervalInputData(session, input);
// find the correct target
var target = manager.element;
if (hasParent(input.srcEvent.target, target)) {
target = input.srcEvent.target;
}
input.target = target;
}
function computeDeltaXY(session, input) {
var center = input.center;
var offset = session.offsetDelta || {};
var prevDelta = session.prevDelta || {};
var prevInput = session.prevInput || {};
if (input.eventType === INPUT_START || prevInput.eventType === INPUT_END) {
prevDelta = session.prevDelta = {
x: prevInput.deltaX || 0,
y: prevInput.deltaY || 0
};
offset = session.offsetDelta = {
x: center.x,
y: center.y
};
}
input.deltaX = prevDelta.x + (center.x - offset.x);
input.deltaY = prevDelta.y + (center.y - offset.y);
}
/**
* velocity is calculated every x ms
* @param {Object} session
* @param {Object} input
*/
function computeIntervalInputData(session, input) {
var last = session.lastInterval || input, deltaTime = input.timeStamp - last.timeStamp, velocity, velocityX, velocityY, direction;
if (input.eventType != INPUT_CANCEL && (deltaTime > COMPUTE_INTERVAL || last.velocity === undefined)) {
var deltaX = input.deltaX - last.deltaX;
var deltaY = input.deltaY - last.deltaY;
var v = getVelocity(deltaTime, deltaX, deltaY);
velocityX = v.x;
velocityY = v.y;
velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
direction = getDirection(deltaX, deltaY);
session.lastInterval = input;
}
else {
// use latest velocity info if it doesn't overtake a minimum period
velocity = last.velocity;
velocityX = last.velocityX;
velocityY = last.velocityY;
direction = last.direction;
}
input.velocity = velocity;
input.velocityX = velocityX;
input.velocityY = velocityY;
input.direction = direction;
}
/**
* create a simple clone from the input used for storage of firstInput and firstMultiple
* @param {Object} input
* @returns {Object} clonedInputData
*/
function simpleCloneInputData(input) {
// make a simple copy of the pointers because we will get a reference if we don't
// we only need clientXY for the calculations
var pointers = [];
var i = 0;
while (i < input.pointers.length) {
pointers[i] = {
clientX: round(input.pointers[i].clientX),
clientY: round(input.pointers[i].clientY)
};
i++;
}
return {
timeStamp: now(),
pointers: pointers,
center: getCenter(pointers),
deltaX: input.deltaX,
deltaY: input.deltaY
};
}
/**
* get the center of all the pointers
* @param {Array} pointers
* @return {Object} center contains `x` and `y` properties
*/
function getCenter(pointers) {
var pointersLength = pointers.length;
// no need to loop when only one touch
if (pointersLength === 1) {
return {
x: round(pointers[0].clientX),
y: round(pointers[0].clientY)
};
}
var x = 0, y = 0, i = 0;
while (i < pointersLength) {
x += pointers[i].clientX;
y += pointers[i].clientY;
i++;
}
return {
x: round(x / pointersLength),
y: round(y / pointersLength)
};
}
/**
* calculate the velocity between two points. unit is in px per ms.
* @param {Number} deltaTime
* @param {Number} x
* @param {Number} y
* @return {Object} velocity `x` and `y`
*/
function getVelocity(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
}
/**
* get the direction between two points
* @param {Number} x
* @param {Number} y
* @return {Number} direction
*/
function getDirection(x, y) {
if (x === y) {
return DIRECTION_NONE;
}
if (abs(x) >= abs(y)) {
return x < 0 ? DIRECTION_LEFT : DIRECTION_RIGHT;
}
return y < 0 ? DIRECTION_UP : DIRECTION_DOWN;
}
/**
* calculate the absolute distance between two points
* @param {Object} p1 {x, y}
* @param {Object} p2 {x, y}
* @param {Array} [props] containing x and y keys
* @return {Number} distance
*/
function getDistance(p1, p2, props) {
if (!props) {
props = PROPS_XY;
}
var x = p2[props[0]] - p1[props[0]], y = p2[props[1]] - p1[props[1]];
return Math.sqrt((x * x) + (y * y));
}
/**
* calculate the angle between two coordinates
* @param {Object} p1
* @param {Object} p2
* @param {Array} [props] containing x and y keys
* @return {Number} angle
*/
function getAngle(p1, p2, props) {
if (!props) {
props = PROPS_XY;
}
var x = p2[props[0]] - p1[props[0]], y = p2[props[1]] - p1[props[1]];
return Math.atan2(y, x) * 180 / Math.PI;
}
/**
* calculate the rotation degrees between two pointersets
* @param {Array} start array of pointers
* @param {Array} end array of pointers
* @return {Number} rotation
*/
function getRotation(start, end) {
return getAngle(end[1], end[0], PROPS_CLIENT_XY) + getAngle(start[1], start[0], PROPS_CLIENT_XY);
}
/**
* calculate the scale factor between two pointersets
* no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
* @param {Array} start array of pointers
* @param {Array} end array of pointers
* @return {Number} scale
*/
function getScale(start, end) {
return getDistance(end[0], end[1], PROPS_CLIENT_XY) / getDistance(start[0], start[1], PROPS_CLIENT_XY);
}
var MOUSE_INPUT_MAP = {
mousedown: INPUT_START,
mousemove: INPUT_MOVE,
mouseup: INPUT_END
};
var MOUSE_ELEMENT_EVENTS = 'mousedown';
var MOUSE_WINDOW_EVENTS = 'mousemove mouseup';
/**
* Mouse events input
* @constructor
* @extends Input
*/
function MouseInput() {
this.evEl = MOUSE_ELEMENT_EVENTS;
this.evWin = MOUSE_WINDOW_EVENTS;
this.pressed = false; // mousedown state
Input$$1.apply(this, arguments);
}
inherit(MouseInput, Input$$1, {
/**
* handle mouse events
* @param {Object} ev
*/
handler: function MEhandler(ev) {
var eventType = MOUSE_INPUT_MAP[ev.type];
// on start we want to have the left mouse button down
if (eventType & INPUT_START && ev.button === 0) {
this.pressed = true;
}
if (eventType & INPUT_M