Exemple #1
0
 /**
  * Register events
  * @param [delegate]
  */
 registerEvents(delegate) {
     delegate = delegate || global.document;
     delegate.addEventListener(Settings.getTabEvent(), function (e) {
         if(OffCanvas.currentOpen && OffCanvas.currentOpen !== this) {
             return;
         }
         let id = this.navigationContainerId, validTarget = e.target.getAttribute(ATTR_TARGET) === id;
         if (!Util.isPartOfNode(e.target, this.navigationContainer)) {
             if (validTarget || (OffCanvas.currentOpen === this && e.target === this.darkener)) {
                 this._toggle(e);
             }
         } else {
             if (e.target.hasAttribute(ATTR_CLOSE_SIDEBAR)) {
                 this._toggle(e);
             }
         }
     }.bind(this));
 }
Exemple #2
0
 /**
  * Registers events for delegate container
  */
 registerEvents(onOpen) {
     this._delegateContainer.addEventListener(Settings.getTabEvent(), function (e) {
         var target = e.target, parent = target.parentNode,
             validTarget = target.hasAttribute(this._attributeSelector),
             parentIsValid = parent && parent.hasAttribute(this._attributeSelector);
         if (!validTarget && parentIsValid) {
             validTarget = true;
             target = parent;
         }
         if (validTarget) {
             e.preventDefault();
             this.open(target).then(function (r) {
                 if (onOpen) {
                     onOpen.apply(this, [r, target]);
                 }
             }.bind(this));
         }
     }.bind(this));
 }
Exemple #3
0
 /**
  * Destroys this instance, unbinds events
  * @returns {Dropdown}
  */
 destroy() {
     this.container.removeEventListener(Settings.getTabEvent(), this._delegateFunction.bind(this), true);
     return this;
 }
Exemple #4
0
 /**
  * Register Events for this dropdown container
  * @returns {Dropdown}
  */
 registerEvents() {
     this.container.addEventListener(Settings.getTabEvent(), this._delegateFunction.bind(this), true);
     return this;
 }
Exemple #5
0
                imageObj.addEventListener('load', function () {
                    this._imageContainer.className = 'image-container';
                    var img = document.createElement('img');
                    // current image
                    this.img = img;

                    img.src = imgSrc;
                    LightBox._setupMaxWidthHeight(target, img, imageObj);
                    this._imageContainer.appendChild(img);
                    this._imageContainer.style.backgroundImage = 'url(' + imgSrc + ')';

                    resolve(self._modalContainerDiv);
                    this._isLoading = false;

                    if (Settings.isIE()) {
                        self._resizeEvent = global.addEventListener('resize', function () {
                            setTimeout(function () {
                                self._imageContainer.style.height = img.offsetHeight + 'px';
                            }, 0);
                        });
                    }

                    if (self.options.registerPrevNextEvents) {
                        self._setupPrevNextStates();
                        // prev or next on touch/click
                        self._imageContainer.addEventListener(Settings.getTabEvent(), function (e) {
                            if (self.isLoading()) {
                                return;
                            }
                            e.preventDefault();

                            var ev = e;
                            var pageX = global.TouchEvent && ev instanceof TouchEvent ?
                                ev.changedTouches[0].pageX : ev.pageX;
                            var rect = self._imageContainer.getBoundingClientRect(), imgX = rect.left,
                                wrapperWidth = rect.width,
                                posX = pageX - imgX;

                            self.switchImageByDirection(wrapperWidth / 2 > posX).catch(function () {
                                self._runOptionalClose();
                            });
                        });

                        // register keyboard events
                        self._keyboardNextEvent = function (e) {
                            if (e.keyCode === KEY_NEXT || e.keyCode === KEY_PREV) {
                                if (self.isLoading()) {
                                    return;
                                }
                                self.switchImageByDirection(e.keyCode === KEY_PREV).catch(function () {
                                    self._runOptionalClose();
                                });
                            }
                        };
                        global.addEventListener('keydown', self._keyboardNextEvent);
                    } else {
                        self._imageContainer.addEventListener(Settings.getTabEvent(), function () {
                            self._runOptionalClose();
                        });
                    }

                    self.highRes(thumbnail, imgHighResolution);
                }.bind(this));
Exemple #6
0
 /**
  * Registers Events for this instance
  * @returns {Toggleable}
  */
 registerEvents() {
     this.container.addEventListener(Settings.getTabEvent(), this._listener.bind(this));
     return this;
 }
Exemple #7
0
    /**
     * Creates an off-canvas navigation
     * @param {HTMLElement|String} NavigationId
     * @param {HTMLElement|String} ToggleNavigationId
     * @param {HTMLElement|String} Darkener
     * @param {int} factor positive will expect right sidebar, positive left
     * @param {bool} [disableTouch] if true all touch events are disabled
     * @constructor
     */
    constructor(NavigationId, ToggleNavigationId, Darkener, factor, disableTouch) {

        var doc = global.document, touched = 0, body = doc.body,
            navigationContainer = NavigationId instanceof HTMLElement ?
                NavigationId : doc.getElementById(NavigationId),
            toggler = ToggleNavigationId instanceof HTMLElement ?
                ToggleNavigationId : doc.getElementById(ToggleNavigationId),
            darkener = Darkener instanceof HTMLElement ? Darkener : doc.getElementById(Darkener),
            DARKENER_CLASS_TOGGLE = 'toggle-' + darkener.id || 'darkener',
            DARKENER_CLASS_INSTANT_TOGGLE = `${DARKENER_CLASS_TOGGLE}-open`,
            resetStyles = function (s) {
                s.transform = '';
                s.transition = '';
                s.webkitTransform = '';
                s.webkitTransition = '';
            },
            shouldNotTouch = function () {
                return window.innerWidth >= Settings.get().smallBreakpoint;
            };

        if (!disableTouch) {
            navigationContainer.addEventListener('touchstart', function (e) {
                requestAnimationFrame(function () {
                    if (shouldNotTouch()) {
                        return;
                    }
                    touched = e.touches[0].clientX;
                    var target = navigationContainer, style = target.style;
                    target.mustHide = false;
                    style.transition = 'transform 0s ease';
                    style.webkitTransition = '-webkit-transform 0s ease';

                });
            });
            navigationContainer.addEventListener('touchmove', function (e) {

                if (shouldNotTouch()) {
                    return;
                }
                var x = e.touches[0].clientX, target = navigationContainer, style = target.style, calc = touched - x,
                    bounds = target.getBoundingClientRect(),
                    compare = factor > 0 ? calc <= 0 : calc >= 0;
                if (compare) {
                    target.mustHide = factor > 0 ? calc * -1 >
                    bounds.width / HIDE_FACTOR : calc > bounds.width / HIDE_FACTOR;
                    style.transform = 'translate3d(' + (calc * -1) + 'px,0,0)';
                    style.webkitTransform = 'translate3d(' + (calc * -1) + 'px,0,0)';
                }
            });
            navigationContainer.addEventListener('touchend', function () {

                requestAnimationFrame(function () {
                    if (shouldNotTouch()) {
                        return;
                    }
                    var target = navigationContainer, style = target.style;

                    if (target.mustHide) {
                        var width = target.getBoundingClientRect().width * factor;
                        style.transition = 'transform .2s ease';
                        style.webkitTransition = '-webkit-transform .2s ease';

                        style.transform = 'translate3d(' + width + 'px,0,0)';
                        style.webkitTransform = 'translate3d(' + width + 'px,0,0)';

                        Util.addEventOnce(Settings.getTransitionEvent(), target, function () {
                            // add timeout because transition event fires a little to early
                            setTimeout(function () {
                                resetStyles(style);
                                body.classList.remove(TOGGLE_CLASS);
                                body.classList.remove(DARKENER_CLASS_TOGGLE);
                            }, Settings.get().darkenerFadeDelay);
                        });

                        target.classList.remove(OPEN_CLASS);
                        darkener.classList.remove(INIT_CLASS);


                    } else {
                        resetStyles(style);
                    }
                });
            });
        }
        var togglerF = function (e) {
            e.preventDefault();
            var bodyClass = body.classList, darkenerClass = darkener.classList;
            if (navigationContainer.classList.contains(OPEN_CLASS)) {
                Util.addEventOnce(Settings.getTransitionEvent(), navigationContainer, function () {
                    // add timeout because transition event fires a little to early
                    setTimeout(function () {
                        requestAnimationFrame(function(){
                            bodyClass.remove(TOGGLE_CLASS);
                            bodyClass.remove(DARKENER_CLASS_TOGGLE);
                        });
                    }, Settings.get().darkenerFadeDelay);
                });
                navigationContainer.classList.remove(OPEN_CLASS);
                darkener.classList.remove(INIT_CLASS);
                bodyClass.remove(DARKENER_CLASS_INSTANT_TOGGLE);
            } else {
                bodyClass.add(DARKENER_CLASS_INSTANT_TOGGLE);
                bodyClass.add(TOGGLE_CLASS);
                bodyClass.add(DARKENER_CLASS_TOGGLE);
                darkenerClass.add(INIT_CLASS);
                navigationContainer.classList.add(OPEN_CLASS);
            }
        };
        toggler.addEventListener('touchstart', function (e) {
            e.target.oldClassNames = e.target.className;
            e.target.className = 'active ' + e.target.oldClassNames;
        });

        toggler.addEventListener('touchend', function (e) {
            e.target.className = e.target.oldClassNames;
        });

        toggler.addEventListener(Settings.getTabEvent(), togglerF);

        darkener.addEventListener(Settings.getTabEvent(), (e) => {
            if (navigationContainer.classList.contains(OPEN_CLASS)) {
                e.preventDefault();
                togglerF(e);
            }
        });

        navigationContainer.addEventListener(Settings.getTabEvent(), (e) => {
            if(e.target.hasAttribute(ATTR_CLOSE_SIDEBAR)) {
                e.preventDefault();
                togglerF(e);
            }
        });

    }