pac-slider/pac-slider.js


import { Component, ComponentFactoryResolver, Directive, ElementRef, HostListener, Input, NgModule, Renderer2, ViewChild, ViewContainerRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

class SlideZoneDirective {
    /**
     * @param {?} viewContainerRef
     */
    constructor(viewContainerRef) {
        this.viewContainerRef = viewContainerRef;
    }
}
SlideZoneDirective.decorators = [
    { type: Directive, args: [{
                selector: '[slideZone]'
            },] },
];
/**
 * @nocollapse
 */
SlideZoneDirective.ctorParameters = () => [
    { type: ViewContainerRef, },
];

class CarouselSlideComponent {
    /**
     * @param {?} el
     * @param {?} renderer
     */
    constructor(el, renderer) {
        this.el = el;
        this.renderer = renderer;
    }
    /**
     * @param {?} offset
     * @param {?=} deleyPercent
     * @return {?}
     */
    slide(offset, 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 {?}
     */
    stabilizes(offset) {
        this.renderer.removeClass(this.el.nativeElement, 'delay');
        this.renderer.setStyle(this.el.nativeElement, 'transform', 'translate3d(' + offset + 'px, 0, 0)');
    }
}
CarouselSlideComponent.decorators = [
    { type: Component, args: [{
                selector: 'pac-carousel-slide',
                template: `
      <ng-container *ngIf="!route ">
          <a [href]="link?link:'#'">
              <img [src]="src" draggable="false">
          </a>
      </ng-container>

      <ng-container *ngIf="route">
          <a [routerLink]="route">
              <img [src]="src" draggable="false">
          </a>
      </ng-container>
      <div class="image-overlay"></div>
    `,
                styles: [`
      :host {
        min-width: 100%;
        width: 100%;
        height: 100%;
        display: inline-table;
        overflow: hidden;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        text-transform: uppercase;
        position: relative;
        cursor: pointer;
        -ms-flex-align: end;
        -webkit-box-align: end;
                align-items: flex-end;
        -ms-flex-line-pack: end;
        align-content: flex-end; }
        :host.delay {
          -webkit-transition: transform .7s ease-in-out;
          -webkit-transition: -webkit-transform .7s ease-in-out;
          transition: -webkit-transform .7s ease-in-out;
          transition: transform .7s ease-in-out;
          transition: transform .7s ease-in-out, -webkit-transform .7s ease-in-out; }
        :host img {
          width: 100%; }
        :host .image-overlay {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0; }
    `]
            },] },
];
/**
 * @nocollapse
 */
CarouselSlideComponent.ctorParameters = () => [
    { type: ElementRef, },
    { type: Renderer2, },
];
CarouselSlideComponent.propDecorators = {
    'src': [{ type: Input },],
    'link': [{ type: Input },],
    'route': [{ type: Input },],
};

const STATE_AVAILABLE = 'available';
const STATE_IDLE = 'idle';
class CarouselComponent {
    /**
     * @param {?} componentFactoryResolver
     */
    constructor(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 {?}
     */
    ngAfterContentInit() {
        this.initialWindowWidth = window.innerWidth;
        this.viewContainerRef = this.slideZone.viewContainerRef;
        this.lastOffset -= this.sliderContainer.nativeElement.getBoundingClientRect().width;
        let /** @type {?} */ component = this.createComponent(this.slides[this.slides.length - 1]);
        this.carouselSlides.push(component);
        this.slides.forEach((slide, index) => {
            if (index != this.slides.length - 1) {
                let /** @type {?} */ component = this.createComponent(slide);
                this.carouselSlides.push(component);
            }
        });
        if (this.autoPlay) {
            this.interval = setInterval(() => {
                if (!this.pause) {
                    this.slideForward();
                }
            }, this.time * 1000);
        }
    }
    /**
     * @param {?} slide
     * @return {?}
     */
    createComponent(slide) {
        let /** @type {?} */ componentFactory = this.componentFactoryResolver.resolveComponentFactory(CarouselSlideComponent);
        let /** @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 {?}
     */
    ngOnDestroy() {
        if (this.interval) {
            clearInterval(this.interval);
        }
    }
    /**
     * @param {?} slide
     * @return {?}
     */
    addSlideData(slide) {
        this.slides.push(slide);
    }
    /**
     * @param {?} slide
     * @return {?}
     */
    removeSlide(slide) {
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onResize(event) {
        this.lastOffset = 0 - this.sliderContainer.nativeElement.getBoundingClientRect().width;
        this.carouselSlides.forEach((slide) => {
            slide.stabilizes(this.lastOffset);
        });
    }
    /**
     * @return {?}
     */
    pauseAutoPlay() {
        this.pause = true;
    }
    /**
     * @return {?}
     */
    startAutoPlay() {
        this.pause = false;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onPanStart(event) {
        event.preventDefault();
        this.startX = this.x;
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onPan(event) {
        event.preventDefault();
        this.x = this.startX + event.deltaX;
        if (this.state === STATE_AVAILABLE) {
            this.carouselSlides.forEach((slide) => {
                slide.stabilizes(this.lastOffset + this.x);
            });
        }
    }
    /**
     * @return {?}
     */
    onPanEnd() {
        let /** @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 {?}
     */
    slideBack(deleyPercent = null) {
        if (this.state === STATE_AVAILABLE) {
            this.state = STATE_IDLE;
            this.lastOffset += this.sliderContainer.nativeElement.getBoundingClientRect().width;
            this.carouselSlides.forEach((slide) => {
                slide.slide(this.lastOffset, deleyPercent);
            });
            setTimeout(() => {
                let /** @type {?} */ ref = this.viewContainerRef.get(this.carouselSlides.length - 1);
                this.viewContainerRef.move(ref, 0);
                this.lastOffset -= this.sliderContainer.nativeElement.getBoundingClientRect().width;
                this.carouselSlides.forEach((slide) => {
                    slide.stabilizes(this.lastOffset);
                });
                this.state = STATE_AVAILABLE;
                this.index--;
                if (this.index < 0) {
                    this.index = this.slides.length - 1;
                }
            }, 720);
            setTimeout(() => {
                this.pause = false;
            }, this.time * 1000);
        }
    }
    /**
     * @param {?=} deleyPercent
     * @return {?}
     */
    slideForward(deleyPercent = null) {
        if (this.state === STATE_AVAILABLE) {
            this.state = STATE_IDLE;
            this.lastOffset -= this.sliderContainer.nativeElement.getBoundingClientRect().width;
            this.carouselSlides.forEach((slide) => {
                slide.slide(this.lastOffset, deleyPercent);
            });
            setTimeout(() => {
                let /** @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((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 {?}
     */
    slideToIndex(index) {
        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((slide) => {
                    slide.slide(this.lastOffset);
                });
                setTimeout(() => {
                    let /** @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((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((slide) => {
                    slide.slide(this.lastOffset);
                });
                setTimeout(() => {
                    let /** @type {?} */ ref = this.viewContainerRef.get(this.carouselSlides.length - 1);
                    this.viewContainerRef.move(ref, 0);
                    this.lastOffset -= this.sliderContainer.nativeElement.getBoundingClientRect().width;
                    this.carouselSlides.forEach((slide) => {
                        slide.stabilizes(this.lastOffset);
                    });
                    this.state = STATE_AVAILABLE;
                    this.index--;
                    if (this.index < 0) {
                        this.index = this.slides.length - 1;
                    }
                }, 720);
                setTimeout(() => {
                    this.pause = false;
                }, this.time * 1000);
            }
        }
        // if (index > this.index) {
        //     this.slideForward();
        // } else if (index < this.index) {
        //     this.slideBack();
        // }
    }
}
CarouselComponent.decorators = [
    { type: Component, args: [{
                selector: 'pac-slider',
                template: `
      <div class="carousel-container" #sliderContainer>

          <!-- Left Arrow Container -->
          <div class="arrow left-arrow"
               (click)="slideBack()"
               (mouseenter)="pauseAutoPlay()">
              <div class="arrow-wrapper">
                  <div id="left-arrow"></div>
              </div>
          </div>

          <!-- Slider Zone -->
          <div class="slides-zone" #slidesZone>
              <ng-content></ng-content>
              <div class="images-container"
                   (mouseenter)="pauseAutoPlay()"
                   (mouseleave)="startAutoPlay()"
                   (panstart)="onPanStart($event)"
                   (panmove)="onPan($event)"
                   (panend)="onPanEnd()"
                   #slideImg>
                  <ng-template slideZone>

                  </ng-template>
              </div>
          </div>

          <!-- Dots Container -->
          <div class="dots-container">
              <ul (mouseenter)="pauseAutoPlay()"
                  (mouseleave)="startAutoPlay()">
                  <li *ngFor="let dot of slides;let i = index;"
                      (click)="slideToIndex(i)"
                      [ngClass]="{selected: i == index}">
                  </li>
              </ul>
          </div>

          <!-- Right Arrow Container -->
          <div class="arrow right-arrow"
               (click)="slideForward()"
               (mouseenter)="pauseAutoPlay()">
              <div class="arrow-wrapper">
                  <div id="right-arrow"></div>
              </div>
          </div>

      </div>
    `,
                styles: [`
      .carousel-container {
        width: 100%;
        max-height: 100vh;
        overflow: hidden;
        position: relative; }
        .carousel-container .images-container {
          width: 100%;
          display: -ms-flexbox;
          display: -webkit-box;
          display: flex;
          -ms-flex: 1;
          -webkit-box-flex: 1;
                  flex: 1;
          -ms-flex-align: center;
          -webkit-box-align: center;
                  align-items: center;
          -ms-flex-pack: start;
          -webkit-box-pack: start;
                  justify-content: flex-start;
          -webkit-transition: all 300ms cubic-bezier(0.35, 0, 0.25, 1);
          transition: all 300ms cubic-bezier(0.35, 0, 0.25, 1); }
        .carousel-container .arrow {
          z-index: 2;
          position: absolute;
          top: 0;
          height: 100%;
          width: 6%;
          min-width: 60px;
          display: -ms-flexbox;
          display: -webkit-box;
          display: flex;
          -ms-flex-direction: row;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
                  flex-direction: row;
          -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
          -ms-flex-pack: center;
          -webkit-box-pack: center;
                  justify-content: center;
          -ms-flex-line-pack: stretch;
          align-content: stretch;
          -ms-flex-align: center;
          -webkit-box-align: center;
                  align-items: center; }
          .carousel-container .arrow .arrow-wrapper {
            position: relative;
            width: 20px;
            height: 20px;
            -ms-flex-order: 0;
            -webkit-box-ordinal-group: 1;
                    order: 0;
            -ms-flex: 0 1 auto;
            -webkit-box-flex: 0;
                    flex: 0 1 auto;
            -webkit-align-self: auto;
            -ms-flex-item-align: auto;
            align-self: auto; }
            .carousel-container .arrow .arrow-wrapper #right-arrow {
              position: absolute;
              height: 20px;
              width: 20px;
              /* IE 9 */
              -webkit-transform: rotate(45deg);
              /* Chrome, Safari, Opera */
              transform: rotate(45deg);
              border-right: 2px solid #ffffff;
              border-top: 2px solid #ffffff; }
            .carousel-container .arrow .arrow-wrapper #left-arrow {
              position: absolute;
              height: 20px;
              width: 20px;
              /* IE 9 */
              -webkit-transform: rotate(45deg);
              /* Chrome, Safari, Opera */
              transform: rotate(45deg);
              border-left: 2px solid #ffffff;
              border-bottom: 2px solid #ffffff; }
          .carousel-container .arrow.left-arrow {
            left: 0;
            cursor: pointer; }
          .carousel-container .arrow.right-arrow {
            right: 0;
            cursor: pointer; }
        .carousel-container .dots-container {
          z-index: 2;
          position: absolute;
          bottom: 0;
          height: 10%;
          width: 100%;
          display: -ms-flexbox;
          display: -webkit-box;
          display: flex;
          -ms-flex-direction: row;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
                  flex-direction: row;
          -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
          -ms-flex-pack: center;
          -webkit-box-pack: center;
                  justify-content: center;
          -ms-flex-line-pack: stretch;
          align-content: stretch;
          -ms-flex-align: center;
          -webkit-box-align: center;
                  align-items: center; }
          .carousel-container .dots-container ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden; }
            .carousel-container .dots-container ul li {
              cursor: pointer;
              height: 10px;
              width: 10px;
              background: #fff;
              border-radius: 100%;
              margin: 5px;
              display: inline-table;
              opacity: .5; }
              .carousel-container .dots-container ul li.selected {
                opacity: 1; }
    `]
            },] },
];
/**
 * @nocollapse
 */
CarouselComponent.ctorParameters = () => [
    { 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'],] },],
};

class CarouselItemComponent {
    /**
     * @param {?} parent
     */
    constructor(parent) {
        this.parent = parent;
        parent.addSlideData(this);
    }
    /**
     * @return {?}
     */
    ngOnInit() {
    }
    /**
     * @return {?}
     */
    ngOnDestroy() {
        this.parent.removeSlide(this);
    }
}
CarouselItemComponent.decorators = [
    { type: Component, args: [{
                selector: 'pac-item',
                template: `

    `,
                styles: [`

    `]
            },] },
];
/**
 * @nocollapse
 */
CarouselItemComponent.ctorParameters = () => [
    { 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_MOVE && ev.which !== 1) {
            eventType = INPUT_END;
        }

        // mouse must be down
        if (!this.pressed) {
            return;
        }

        if (eventType & INPUT_END) {
            this.pressed = false;
        }

        this.callback(this.manager, eventType, {
            pointers: [ev],
            changedPointers: [ev],
            pointerType: INPUT_TYPE_MOUSE,
            srcEvent: ev
        });
    }
});

var POINTER_INPUT_MAP = {
    pointerdown: INPUT_START,
    pointermove: INPUT_MOVE,
    pointerup: INPUT_END,
    pointercancel: INPUT_CANCEL,
    pointerout: INPUT_CANCEL
};

// in IE10 the pointer types is defined as an enum
var IE10_POINTER_TYPE_ENUM = {
    2: INPUT_TYPE_TOUCH,
    3: INPUT_TYPE_PEN,
    4: INPUT_TYPE_MOUSE,
    5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816
};

var POINTER_ELEMENT_EVENTS = 'pointerdown';
var POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel';

// IE10 has prefixed support, and case-sensitive
if (window.MSPointerEvent && !window.PointerEvent) {
    POINTER_ELEMENT_EVENTS = 'MSPointerDown';
    POINTER_WINDOW_EVENTS = 'MSPointerMove MSPointerUp MSPointerCancel';
}

/**
 * Pointer events input
 * @constructor
 * @extends Input
 */
function PointerEventInput() {
    this.evEl = POINTER_ELEMENT_EVENTS;
    this.evWin = POINTER_WINDOW_EVENTS;

    Input$$1.apply(this, arguments);

    this.store = (this.manager.session.pointerEvents = []);
}

inherit(PointerEventInput, Input$$1, {
    /**
     * handle mouse events
     * @param {Object} ev
     */
    handler: function PEhandler(ev) {
        var store = this.store;
        var removePointer = false;

        var eventTypeNormalized = ev.type.toLowerCase().replace('ms', '');
        var eventType = POINTER_INPUT_MAP[eventTypeNormalized];
        var pointerType = IE10_POINTER_TYPE_ENUM[ev.pointerType] || ev.pointerType;

        var isTouch = (pointerType == INPUT_TYPE_TOUCH);

        // get index of the event in the store
        var storeIndex = inArray(store, ev.pointerId, 'pointerId');

        // start and mouse must be down
        if (eventType & INPUT_START && (ev.button === 0 || isTouch)) {
            if (storeIndex < 0) {
                store.push(ev);
                storeIndex = store.length - 1;
            }
        } else if (eventType & (INPUT_END | INPUT_CANCEL)) {
            removePointer = true;
        }

        // it not found, so the pointer hasn't been down (so it's probably a hover)
        if (storeIndex < 0) {
            return;
        }

        // update the event in the store
        store[storeIndex] = ev;

        this.callback(this.manager, eventType, {
            pointers: store,
            changedPointers: [ev],
            pointerType: pointerType,
            srcEvent: ev
        });

        if (removePointer) {
            // remove from the store
            store.splice(storeIndex, 1);
        }
    }
});

var SINGLE_TOUCH_INPUT_MAP = {
    touchstart: INPUT_START,
    touchmove: INPUT_MOVE,
    touchend: INPUT_END,
    touchcancel: INPUT_CANCEL
};

var SINGLE_TOUCH_TARGET_EVENTS = 'touchstart';
var SINGLE_TOUCH_WINDOW_EVENTS = 'touchstart touchmove touchend touchcancel';

/**
 * Touch events input
 * @constructor
 * @extends Input
 */
function SingleTouchInput() {
    this.evTarget = SINGLE_TOUCH_TARGET_EVENTS;
    this.evWin = SINGLE_TOUCH_WINDOW_EVENTS;
    this.started = false;

    Input$$1.apply(this, arguments);
}

inherit(SingleTouchInput, Input$$1, {
    handler: function TEhandler(ev) {
        var type = SINGLE_TOUCH_INPUT_MAP[ev.type];

        // should we handle the touch events?
        if (type === INPUT_START) {
            this.started = true;
        }

        if (!this.started) {
            return;
        }

        var touches = normalizeSingleTouches.call(this, ev, type);

        // when done, reset the started state
        if (type & (INPUT_END | INPUT_CANCEL) && touches[0].length - touches[1].length === 0) {
            this.started = false;
        }

        this.callback(this.manager, type, {
            pointers: touches[0],
            changedPointers: touches[1],
            pointerType: INPUT_TYPE_TOUCH,
            srcEvent: ev
        });
    }
});

/**
 * @this {TouchInput}
 * @param {Object} ev
 * @param {Number} type flag
 * @returns {undefined|Array} [all, changed]
 */
function normalizeSingleTouches(ev, type) {
    var all = toArray(ev.touches);
    var changed = toArray(ev.changedTouches);

    if (type & (INPUT_END | INPUT_CANCEL)) {
        all = uniqueArray(all.concat(changed), 'identifier', true);
    }

    return [all, changed];
}

var TOUCH_INPUT_MAP = {
    touchstart: INPUT_START,
    touchmove: INPUT_MOVE,
    touchend: INPUT_END,
    touchcancel: INPUT_CANCEL
};

var TOUCH_TARGET_EVENTS = 'touchstart touchmove touchend touchcancel';

/**
 * Multi-user touch events input
 * @constructor
 * @extends Input
 */
function TouchInput() {
    this.evTarget = TOUCH_TARGET_EVENTS;
    this.targetIds = {};

    Input$$1.apply(this, arguments);
}

inherit(TouchInput, Input$$1, {
    handler: function MTEhandler(ev) {
        var type = TOUCH_INPUT_MAP[ev.type];
        var touches = getTouches.call(this, ev, type);
        if (!touches) {
            return;
        }

        this.callback(this.manager, type, {
            pointers: touches[0],
            changedPointers: touches[1],
            pointerType: INPUT_TYPE_TOUCH,
            srcEvent: ev
        });
    }
});

/**
 * @this {TouchInput}
 * @param {Object} ev
 * @param {Number} type flag
 * @returns {undefined|Array} [all, changed]
 */
function getTouches(ev, type) {
    var allTouches = toArray(ev.touches);
    var targetIds = this.targetIds;

    // when there is only one touch, the process can be simplified
    if (type & (INPUT_START | INPUT_MOVE) && allTouches.length === 1) {
        targetIds[allTouches[0].identifier] = true;
        return [allTouches, allTouches];
    }

    var i,
        targetTouches,
        changedTouches = toArray(ev.changedTouches),
        changedTargetTouches = [],
        target = this.target;

    // get target touches from touches
    targetTouches = allTouches.filter(function(touch) {
        return hasParent(touch.target, target);
    });

    // collect touches
    if (type === INPUT_START) {
        i = 0;
        while (i < targetTouches.length) {
            targetIds[targetTouches[i].identifier] = true;
            i++;
        }
    }

    // filter changed touches to only contain touches that exist in the collected target ids
    i = 0;
    while (i < changedTouches.length) {
        if (targetIds[changedTouches[i].identifier]) {
            changedTargetTouches.push(changedTouches[i]);
        }

        // cleanup removed touches
        if (type & (INPUT_END | INPUT_CANCEL)) {
            delete targetIds[changedTouches[i].identifier];
        }
        i++;
    }

    if (!changedTargetTouches.length) {
        return;
    }

    return [
        // merge targetTouches with changedTargetTouches so it contains ALL touches, including 'end' and 'cancel'
        uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true),
        changedTargetTouches
    ];
}

/**
 * Combined touch and mouse input
 *
 * Touch has a higher priority then mouse, and while touching no mouse events are allowed.
 * This because touch devices also emit mouse events while doing a touch.
 *
 * @constructor
 * @extends Input
 */

var DEDUP_TIMEOUT = 2500;
var DEDUP_DISTANCE = 25;

function TouchMouseInput() {
    Input$$1.apply(this, arguments);

    var handler = bindFn(this.handler, this);
    this.touch = new TouchInput(this.manager, handler);
    this.mouse = new MouseInput(this.manager, handler);

    this.primaryTouch = null;
    this.lastTouches = [];
}

inherit(TouchMouseInput, Input$$1, {
    /**
     * handle mouse and touch events
     * @param {Hammer} manager
     * @param {String} inputEvent
     * @param {Object} inputData
     */
    handler: function TMEhandler(manager, inputEvent, inputData) {
        var isTouch = (inputData.pointerType == INPUT_TYPE_TOUCH),
            isMouse = (inputData.pointerType == INPUT_TYPE_MOUSE);

        if (