| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 | (function (global, factory) {    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :    typeof define === 'function' && define.amd ? define(factory) :    (global.SidebarJS = factory());}(this, (function () { 'use strict';function unwrapExports (x) {    return x && x.__esModule ? x['default'] : x;}function createCommonjsModule(fn, module) {    return module = { exports: {} }, fn(module, module.exports), module.exports;}var sidebarjs_1 = createCommonjsModule(function (module, exports) {"use strict";Object.defineProperty(exports, "__esModule", { value: true });var sidebarjs = 'sidebarjs';var isTouch = ('ontouchstart' in window);var isVisible = sidebarjs + "--is-visible";var isMoving = sidebarjs + "--is-moving";var LEFT_POSITION = 'left';var RIGHT_POSITION = 'right';var TRANSITION_DURATION = 400;var POSITIONS = [LEFT_POSITION, RIGHT_POSITION];var SidebarJS = (function () {    function SidebarJS(_d, _a) {        document.querySelector("[" + _d + "]").setAttribute(sidebarjs, _d);        document.querySelector("[" + _d + "-toggle]").setAttribute(sidebarjs + "-toggle", _d);        var _b = _a === void 0 ? {} : _a, component = _b.component, container = _b.container, background = _b.background, documentMinSwipeX = _b.documentMinSwipeX, documentSwipeRange = _b.documentSwipeRange, nativeSwipe = _b.nativeSwipe, nativeSwipeOpen = _b.nativeSwipeOpen, position = _b.position;        this.component = component || document.querySelector("[" + _d + "]");        this.container = container || SidebarJS.create(sidebarjs + "-container");        this.background = background || SidebarJS.create(sidebarjs + "-background");        this.documentMinSwipeX = documentMinSwipeX || 10;        this.documentSwipeRange = documentSwipeRange || 40;        this.nativeSwipe = nativeSwipe !== false;        this.nativeSwipeOpen = nativeSwipeOpen !== false;        var hasAllConfigDOMElements = component && container && background;        if (!hasAllConfigDOMElements) {            try {                this.transcludeContent();            }            catch (e) {                throw new Error('You must define an element with [sidebarjs] attribute');            }        }        if (this.nativeSwipe) {            this.addNativeGestures();            if (this.nativeSwipeOpen) {                this.addNativeOpenGestures();            }        }        this.setPosition(position);        this.addAttrsEventsListeners(this.component.getAttribute(sidebarjs));        this.background.addEventListener('click', this.close.bind(this));    }    SidebarJS.prototype.toggle = function () {        this.component.classList.contains(isVisible) ? this.close() : this.open();    };    SidebarJS.prototype.open = function () {        this.component.classList.add(isVisible);    };    SidebarJS.prototype.close = function () {        this.component.classList.remove(isVisible);    };    SidebarJS.prototype.isVisible = function () {        return this.component.classList.contains(isVisible);    };    SidebarJS.prototype.setPosition = function (position) {        var _this = this;        this.component.classList.add(isMoving);        this.position = POSITIONS.indexOf(position) >= 0 ? position : LEFT_POSITION;        POSITIONS.forEach(function (POS) { return _this.component.classList.remove(sidebarjs + "--" + POS); });        this.component.classList.add(sidebarjs + "--" + (this.hasRightPosition() ? RIGHT_POSITION : LEFT_POSITION));        setTimeout(function () { return _this.component.classList.remove(isMoving); }, TRANSITION_DURATION);    };    SidebarJS.prototype.addAttrsEventsListeners = function (sidebarName) {        var actions = ['toggle', 'open', 'close'];        for (var i = 0; i < actions.length; i++) {            var elements = document.querySelectorAll("[" + sidebarjs + "-" + actions[i] + "=\"" + sidebarName + "\"]");            for (var j = 0; j < elements.length; j++) {                if (!SidebarJS.elemHasListener(elements[j])) {                    elements[j].addEventListener('click', this[actions[i]].bind(this));                    SidebarJS.elemHasListener(elements[j], true);                }            }        }    };    SidebarJS.prototype.hasLeftPosition = function () {        return this.position === LEFT_POSITION;    };    SidebarJS.prototype.hasRightPosition = function () {        return this.position === RIGHT_POSITION;    };    SidebarJS.prototype.transcludeContent = function () {        this.container.innerHTML = this.component.innerHTML;        this.component.innerHTML = '';        this.component.appendChild(this.container);        this.component.appendChild(this.background);    };    SidebarJS.prototype.addNativeGestures = function () {        this.component.addEventListener('touchstart', this.onTouchStart.bind(this));        this.component.addEventListener('touchmove', this.onTouchMove.bind(this));        this.component.addEventListener('touchend', this.onTouchEnd.bind(this));        this.component.addEventListener('mousedown', this.onTouchStart.bind(this));        this.component.addEventListener('mousemove', this.onTouchMove.bind(this));        this.component.addEventListener('mouseup', this.onTouchEnd.bind(this));    };    SidebarJS.prototype.addNativeOpenGestures = function () {        document.addEventListener('touchstart', this.onSwipeOpenStart.bind(this));        document.addEventListener('touchmove', this.onSwipeOpenMove.bind(this));        document.addEventListener('touchend', this.onSwipeOpenEnd.bind(this));    };    SidebarJS.prototype.onTouchStart = function (e) {        // this.initialTouch = (isTouch ? e.touches[0].pageX : e.pageX);    };    SidebarJS.prototype.onTouchMove = function (e) {        // var documentSwiped = this.initialTouch - (isTouch ? e.touches[0].clientX : e.clientX);        // var sidebarMovement = this.getSidebarPosition(documentSwiped);        // this.touchMoveSidebar = -documentSwiped;        // if (sidebarMovement <= this.container.clientWidth) {        //     this.moveSidebar(this.touchMoveSidebar);        // }    };    SidebarJS.prototype.onTouchEnd = function () {        this.component.classList.remove(isMoving);        Math.abs(this.touchMoveSidebar) > (this.container.clientWidth / 3.5) ? this.close() : this.open();        this.container.removeAttribute('style');        this.background.removeAttribute('style');        delete this.initialTouch;        delete this.touchMoveSidebar;    };    SidebarJS.prototype.moveSidebar = function (movement) {        this.component.classList.add(isMoving);        SidebarJS.vendorify(this.container, 'transform', "translate(" + movement + "px, 0)");        this.changeBackgroundOpacity(movement);    };    SidebarJS.prototype.changeBackgroundOpacity = function (movement) {        var opacity = 0.3 - (Math.abs(movement) / (this.container.clientWidth * 3.5));        this.background.style.opacity = (opacity).toString();    };    SidebarJS.prototype.onSwipeOpenStart = function (e) {        if (this.targetElementIsBackground(e)) {            return;        }        var clientWidth = document.body.clientWidth;        var touchPositionX = (isTouch ? e.touches[0].clientX : e.clientX);        var documentTouch = this.hasLeftPosition() ? touchPositionX : clientWidth - touchPositionX;        if (documentTouch < this.documentSwipeRange) {            this.onTouchStart(e);        }    };    SidebarJS.prototype.onSwipeOpenMove = function (e) {        if (!this.targetElementIsBackground(e) && this.initialTouch && !this.isVisible()) {            var documentSwiped = (isTouch ? e.touches[0].clientX : e.clientX) - this.initialTouch;            var sidebarMovement = this.getSidebarPosition(documentSwiped);            if (sidebarMovement > 0) {                SidebarJS.vendorify(this.component, 'transform', 'translate(0, 0)');                SidebarJS.vendorify(this.component, 'transition', 'none');                this.openMovement = sidebarMovement * (this.hasLeftPosition() ? -1 : 1);                this.moveSidebar(this.openMovement);            }        }    };    SidebarJS.prototype.onSwipeOpenEnd = function () {        if (this.openMovement) {            delete this.openMovement;            this.component.removeAttribute('style');            this.onTouchEnd();        }    };    SidebarJS.prototype.getSidebarPosition = function (swiped) {        return (this.container.clientWidth - (this.hasLeftPosition() ? swiped : -swiped));    };    SidebarJS.prototype.targetElementIsBackground = function (e) {        var touchedElement = e.target;        return touchedElement.hasAttribute(sidebarjs + "-background");    };    SidebarJS.create = function (element) {        var el = document.createElement('div');        el.setAttribute(element, '');        return el;    };    SidebarJS.vendorify = function (el, prop, val) {        var Prop = prop.charAt(0).toUpperCase() + prop.slice(1);        var prefs = ['Moz', 'Webkit', 'O', 'ms'];        el.style[prop] = val;        for (var i = 0; i < prefs.length; i++) {            el.style[prefs[i] + Prop] = val;        }        return el;    };    SidebarJS.elemHasListener = function (elem, value) {        return elem && (value === true || value === false) ? elem.sidebarjsListener = value : !!elem.sidebarjsListener;    };    Object.defineProperty(SidebarJS, "version", {        get: function () {            return '2.2.0';        },        enumerable: true,        configurable: true    });    return SidebarJS;}());exports.default = SidebarJS;});var sidebarjs = unwrapExports(sidebarjs_1);return sidebarjs;})));
 |