diff --git a/src/libraries/navdrawer/navdrawer.js b/src/libraries/navdrawer/navdrawer.js index d9c246b406..750dd510b8 100644 --- a/src/libraries/navdrawer/navdrawer.js +++ b/src/libraries/navdrawer/navdrawer.js @@ -1,5 +1,5 @@ -define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) { - "use strict"; +define(['browser', 'dom', 'css!./navdrawer', 'scrollStyles'], function (browser, dom) { + 'use strict'; return function (options) { function getTouches(e) { @@ -7,7 +7,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, } function onMenuTouchStart(e) { - options.target.classList.remove("transition"); + options.target.classList.remove('transition'); var touches = getTouches(e); var touch = touches[0] || {}; menuTouchStartX = touch.clientX; @@ -36,7 +36,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) { dragMode = 1; - scrollContainer.addEventListener("scroll", disableEvent); + scrollContainer.addEventListener('scroll', disableEvent); self.showMask(); } else if (0 === dragMode && Math.abs(deltaY) >= 5) { dragMode = 2; @@ -49,8 +49,8 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, } function onMenuTouchEnd(e) { - options.target.classList.add("transition"); - scrollContainer.removeEventListener("scroll", disableEvent); + options.target.classList.add('transition'); + scrollContainer.removeEventListener('scroll', disableEvent); dragMode = 0; var touches = getTouches(e); var touch = touches[0] || {}; @@ -69,9 +69,9 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) { isPeeking = true; - if (e.type === "touchstart") { - dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); - dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); + if (e.type === 'touchstart') { + dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {}); + dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {}); } onMenuTouchStart(e); @@ -88,7 +88,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, function onEdgeTouchEnd(e) { if (isPeeking) { isPeeking = false; - dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); + dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {}); onMenuTouchEnd(e); } } @@ -142,8 +142,8 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, function onMaskTransitionEnd() { var classList = mask.classList; - if (!classList.contains("backdrop")) { - classList.add("hide"); + if (!classList.contains('backdrop')) { + classList.add('hide'); } } @@ -155,10 +155,10 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, var startPoint = 0; var countStart = 0; var velocity = 0; - options.target.classList.add("transition"); + options.target.classList.add('transition'); var dragMode = 0; - var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer"); - scrollContainer.classList.add("scrollY"); + var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer'); + scrollContainer.classList.add('scrollY'); var TouchMenuLA = function () { self = this; @@ -173,13 +173,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, }; TouchMenuLA.prototype.initElements = function () { - options.target.classList.add("touch-menu-la"); - options.target.style.width = options.width + "px"; - options.target.style.left = -options.width + "px"; + options.target.classList.add('touch-menu-la'); + options.target.style.width = options.width + 'px'; + options.target.style.left = -options.width + 'px'; if (!options.disableMask) { - mask = document.createElement("div"); - mask.className = "tmla-mask hide"; + mask = document.createElement('div'); + mask.className = 'tmla-mask hide'; document.body.appendChild(mask); dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, { passive: true @@ -190,12 +190,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, var menuTouchStartX; var menuTouchStartY; var menuTouchStartTime; - var edgeContainer = document.querySelector(".mainDrawerHandle"); + var edgeContainer = document.querySelector('.mainDrawerHandle'); var isPeeking = false; TouchMenuLA.prototype.animateToPosition = function (pos) { requestAnimationFrame(function () { - options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none"; + options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none'; }); }; @@ -206,7 +206,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, }; TouchMenuLA.prototype.clickMaskClose = function () { - mask.addEventListener("click", function () { + mask.addEventListener('click', function () { self.close(); }); }; @@ -233,7 +233,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, this.animateToPosition(options.width); currentPos = options.width; this.isVisible = true; - options.target.classList.add("drawer-open"); + options.target.classList.add('drawer-open'); self.showMask(); self.invoke(options.onChange); }; @@ -242,7 +242,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, this.animateToPosition(0); currentPos = 0; self.isVisible = false; - options.target.classList.remove("drawer-open"); + options.target.classList.remove('drawer-open'); self.hideMask(); self.invoke(options.onChange); }; @@ -259,13 +259,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, var backgroundTouchStartTime; TouchMenuLA.prototype.showMask = function () { - mask.classList.remove("hide"); - mask.classList.add("backdrop"); + mask.classList.remove('hide'); + mask.classList.add('backdrop'); }; TouchMenuLA.prototype.hideMask = function () { - mask.classList.add("hide"); - mask.classList.remove("backdrop"); + mask.classList.add('hide'); + mask.classList.remove('backdrop'); }; TouchMenuLA.prototype.invoke = function (fn) { @@ -282,26 +282,26 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, if (enabled) { if (!_edgeSwipeEnabled) { _edgeSwipeEnabled = true; - dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { + dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, { passive: true }); - dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { + dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, { passive: true }); - dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { + dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, { passive: true }); } } else { if (_edgeSwipeEnabled) { _edgeSwipeEnabled = false; - dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { + dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, { passive: true }); - dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { + dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, { passive: true }); - dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { + dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, { passive: true }); } @@ -320,26 +320,26 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, self.initElements(); if (browser.touch) { - dom.addEventListener(options.target, "touchstart", onMenuTouchStart, { + dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, { passive: true }); - dom.addEventListener(options.target, "touchmove", onMenuTouchMove, { + dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, { passive: true }); - dom.addEventListener(options.target, "touchend", onMenuTouchEnd, { + dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, { passive: true }); - dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, { + dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, { passive: true }); - dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, { + dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, { passive: true }); - dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}); - dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, { + dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {}); + dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, { passive: true }); - dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, { + dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, { passive: true }); } diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index 645a8ea85c..464b31059d 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -52,8 +52,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc var dragTouchEvents = ['touchmove', 'touchend']; var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel'); var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA']; - var tmpArray = []; - var time; // Math shorthands var abs = Math.abs; @@ -61,10 +59,8 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc var pow = Math.pow; var round = Math.round; var max = Math.max; - var min = Math.min; var scrollerFactory = function (frame, options) { - // Extend options var o = Object.assign({}, { slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE. @@ -97,11 +93,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc // native smooth scroll options.enableNativeScroll = true; } else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) { - // transform is the only way to guarantee animation options.enableNativeScroll = false; } else if (!layoutManager.tv || !browser.animate) { - options.enableNativeScroll = true; } @@ -162,9 +156,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc var frameSize = 0; var slideeSize = 0; function ensureSizeInfo() { - if (requiresReflow) { - requiresReflow = false; // Reset global variables @@ -186,11 +178,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc * @return {Void} */ function load(isInit) { - requiresReflow = true; if (!isInit) { - ensureSizeInfo(); // Fix possible overflowing @@ -200,7 +190,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc } function initFrameResizeObserver() { - var observerOptions = {}; self.frameResizeObserver = new ResizeObserver(onResize, observerOptions); @@ -225,16 +214,13 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc }; function nativeScrollTo(container, pos, immediate) { - if (container.scroll) { if (o.horizontal) { - container.scroll({ left: pos, behavior: immediate ? 'instant' : 'smooth' }); } else { - container.scroll({ top: pos, behavior: immediate ? 'instant' : 'smooth' @@ -266,14 +252,12 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc * @return {Void} */ self.slideTo = function (newPos, immediate, fullItemPos) { - ensureSizeInfo(); var pos = self._pos; newPos = within(newPos, pos.start, pos.end); if (!transform) { - nativeScrollTo(nativeScrollElement, newPos, immediate); return; } @@ -291,7 +275,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc } if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) { - return; } @@ -303,7 +286,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc }; function setStyleProperty(elem, name, value, speed, resetTransition) { - var style = elem.style; if (resetTransition || browser.edge) { @@ -325,7 +307,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc } function renderAnimateWithTransform(fromPosition, toPosition, immediate) { - var speed = o.speed; if (immediate) { @@ -343,7 +324,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc } function getBoundingClientRect(elem) { - // Support: BlackBerry 5, iOS 3 (original iPhone) // If we don't have gBCR, just use 0,0 rather than error if (elem.getBoundingClientRect) { @@ -361,14 +341,10 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc * @return {Object} */ self.getPos = function (item) { - var scrollElement = transform ? slideeElement : nativeScrollElement; var slideeOffset = getBoundingClientRect(scrollElement); var itemOffset = getBoundingClientRect(item); - var slideeStartPos = o.horizontal ? slideeOffset.left : slideeOffset.top; - var slideeEndPos = o.horizontal ? slideeOffset.right : slideeOffset.bottom; - var offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top; var size = o.horizontal ? itemOffset.width : itemOffset.height; @@ -405,7 +381,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc }; self.getCenterPosition = function (item) { - ensureSizeInfo(); var pos = self.getPos(item); @@ -450,7 +425,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc // Bind dragging events if (transform) { - if (isTouch) { dragTouchEvents.forEach(function (eventName) { dom.addEventListener(document, eventName, dragHandler, { @@ -554,9 +528,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc * @return {Boolean} */ function isInteractive(element) { - while (element) { - if (interactiveElements.indexOf(element.tagName) !== -1) { return true; } @@ -592,7 +564,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc * @return {Void} */ function scrollHandler(event) { - ensureSizeInfo(); var pos = self._pos; // Ignore if there is no scrolling to be done @@ -609,7 +580,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc self.slideBy(o.scrollBy * delta); } else { - if (isSmoothScrollSupported) { delta *= 12; } @@ -628,7 +598,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc * @return {Void} */ self.destroy = function () { - if (self.frameResizeObserver) { self.frameResizeObserver.disconnect(); self.frameResizeObserver = null; @@ -664,11 +633,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc var contentRect = {}; function onResize(entries) { - var entry = entries[0]; if (entry) { - var newRect = entry.contentRect; // handle element being hidden @@ -677,7 +644,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc } if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) { - contentRect = newRect; load(false); @@ -703,7 +669,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc } self.getScrollPosition = function () { - if (transform) { return self._pos.cur; } @@ -716,7 +681,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc }; self.getScrollSize = function () { - if (transform) { return slideeSize; } @@ -792,7 +756,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc initFrameResizeObserver(); if (transform) { - dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, { passive: true }); @@ -809,9 +772,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc passive: true }); } - } else if (o.horizontal) { - // Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively if (o.mouseWheel) {