From 9d0ef4508c1846be2eb78358efffdddf14106241 Mon Sep 17 00:00:00 2001 From: minimit Date: Tue, 23 Jun 2020 19:14:51 +0200 Subject: [PATCH] fix(toggle): fix timing delay fnc with queueStop other queue like in comment + comments --- src/core/toggle/toggle.js | 55 +++++++++---------------------- src/extensions/ajax/ajax.js | 2 +- src/extensions/scroll/scroll.js | 2 +- src/extensions/slider/slider.js | 4 +-- src/gatsby/assets/scripts/demo.js | 4 +-- 5 files changed, 22 insertions(+), 45 deletions(-) diff --git a/src/core/toggle/toggle.js b/src/core/toggle/toggle.js index e06b4d99610..cef9d740464 100644 --- a/src/core/toggle/toggle.js +++ b/src/core/toggle/toggle.js @@ -227,7 +227,7 @@ class Toggle { currents++ // reactivate requestAnimationFrame(() => { - // activate + // activation self.eventOn(element, true) }) } @@ -243,7 +243,7 @@ class Toggle { } // initial currents += todo - // activate + // activation requestAnimationFrame(() => { for (let i = start; i < todo; i++) { self.eventOn(self.elements[i], true) @@ -1143,7 +1143,7 @@ class Toggle { */ activate(el) { const self = this - // activate + // activation el.classList.add(...self.classes) el.classList.remove(...self.classesIn) el.classList.remove(...self.classesInDone) @@ -1168,7 +1168,7 @@ class Toggle { */ activateDone(el) { const self = this - // activate + // activation el.classList.add(...self.classesInDone) } @@ -1178,7 +1178,7 @@ class Toggle { */ deactivate(el) { const self = this - // activate + // activation el.classList.remove(...self.classes) el.classList.remove(...self.classesIn) el.classList.remove(...self.classesInDone) @@ -1199,7 +1199,7 @@ class Toggle { */ deactivateDone(el) { const self = this - // activate + // activation el.classList.remove(...self.classesOut) } @@ -1253,12 +1253,12 @@ class Toggle { for (const type in self.detail['queue' + actionCurrent][0]) { self.queueStart(actionCurrent, actionOther, type, 0, true) } - // activated + // activationd return true } else if (!e || !e.type || e.type !== 'on.trigger.xt') { self.eventOff(element, false, e) } - // activated + // activationd return false } @@ -1310,7 +1310,7 @@ class Toggle { const actionCurrent = 'Off' const actionOther = 'On' self.eventQueue(actionCurrent, groupElements, targets, elementsInner, targetsInner, e) - // if queue too big + // remove queue not started if queue too big if (self.detail['queue' + actionCurrent].length > options.max) { // remove queue and stop const removedOn = self.detail['queue' + actionOther].shift() @@ -1608,36 +1608,13 @@ class Toggle { clearTimeout(Xt.dataStorage.get(el, self.componentNamespace + 'DelayTimeout')) clearTimeout(Xt.dataStorage.get(el, self.componentNamespace + 'AnimTimeout')) // done other queue - self.queueDelayDone(actionCurrent, actionOther, obj, el, type, true) - self.queueAnimDone(actionCurrent, actionOther, obj, el, type, true) + self.queueDelayDone(actionOther, actionCurrent, obj, el, type, true) + self.queueAnimDone(actionOther, actionCurrent, obj, el, type, true) } } } } - /** - * queue stop all - */ - queueStopAll() { - const self = this - // stop all obj in queues - if (self.detail) { - // @FIX not already initialized - const actions = [ - { current: 'On', other: 'Off' }, - { current: 'Off', other: 'On' }, - ] - for (const action of actions) { - // @FIX slider resize multiple queues - // @FIX autoclose with appendTo outside ajax - // remove queue and stop - const removed = self.detail['queue' + action.current].shift() - self.queueStop(action.current, action.other, removed) - self.detail['queue' + action.current] = [] - } - } - } - /** * queue delay * @param {String} actionCurrent Current action @@ -1709,7 +1686,7 @@ class Toggle { const self = this const options = self.options if (actionCurrent === 'On') { - // activate + // activation self.activate(el) // special const before = getComputedStyle(el, ':before') @@ -1728,8 +1705,8 @@ class Toggle { const el = obj.targets ? obj.targets.queueEls[0] : obj.elements.queueEls[0] Xt.focusLimit.on(el) } + // @FIX when standalone !self.targets.length && type === 'elements' if (type === 'targets' || (!self.targets.length && type === 'elements')) { - // @FIX when standalone // appendTo if (options.appendTo) { const appendToTarget = document.querySelector(options.appendTo) @@ -1772,7 +1749,7 @@ class Toggle { // listener dispatch el.dispatchEvent(new CustomEvent('on.xt')) } else if (actionCurrent === 'Off') { - // activate + // activation self.deactivate(el) // special const before = getComputedStyle(el, ':before') @@ -1855,7 +1832,7 @@ class Toggle { const self = this const options = self.options if (actionCurrent === 'On') { - // activate + // activation self.activateDone(el) // special const before = getComputedStyle(el, ':before') @@ -1868,7 +1845,7 @@ class Toggle { // listener dispatch el.dispatchEvent(new CustomEvent('ondone.xt')) } else if (actionCurrent === 'Off') { - // activate + // activation self.deactivateDone(el) // special if (type === 'targets' || (!self.targets.length && type === 'elements')) { diff --git a/src/extensions/ajax/ajax.js b/src/extensions/ajax/ajax.js index d29721bb4fe..e7e625e5293 100644 --- a/src/extensions/ajax/ajax.js +++ b/src/extensions/ajax/ajax.js @@ -95,7 +95,7 @@ class Ajax extends Xt.Toggle { if (url !== '') { if (loc === url) { found = true - // activate + // activation self.eventOn(element, true) } else { // deactivate diff --git a/src/extensions/scroll/scroll.js b/src/extensions/scroll/scroll.js index 2ee583ff7c3..9e17b5f103b 100644 --- a/src/extensions/scroll/scroll.js +++ b/src/extensions/scroll/scroll.js @@ -209,7 +209,7 @@ class Scroll extends Xt.Toggle { } // direction self.inverse = current > self.detail.trigger - // activate + // activation Xt.dataStorage.set(el, self.componentNamespace + 'OnCount', currentOn) Xt.dataStorage.set(el, self.componentNamespace + 'OnTot', currentsOn.length) currentOn++ diff --git a/src/extensions/slider/slider.js b/src/extensions/slider/slider.js index d0114ee67f5..4f3b8476967 100644 --- a/src/extensions/slider/slider.js +++ b/src/extensions/slider/slider.js @@ -963,7 +963,7 @@ class Slider extends Xt.Toggle { self.detail.dragRatio = Math.abs(self.detail.dragStart - self.detail.dragCurrent) / self.detail.draggerWidth self.detail.dragRatioInverse = 1 - self.detail.dragRatio self.direction = self.detail.dragStart - self.detail.dragCurrent < 0 ? -1 : 1 - self.inverse = self.direction === -1 + self.inverse = self.direction < 0 // drag position if (self.initial) { self.dragger.classList.add('transition-none') @@ -991,7 +991,7 @@ class Slider extends Xt.Toggle { const dragPosCurrent = self.detail.dragPosCurrent || 0 // prevent dragging animation dragger.classList.remove('duration-none') - // activate or reset + // activation or reset const dragDist = self.detail.dragPosReal - dragPosCurrent const direction = Math.sign(dragDist) const dragDistAbs = Math.abs(dragDist) diff --git a/src/gatsby/assets/scripts/demo.js b/src/gatsby/assets/scripts/demo.js index 1626603c8b4..8d88dcf8d58 100644 --- a/src/gatsby/assets/scripts/demo.js +++ b/src/gatsby/assets/scripts/demo.js @@ -384,7 +384,7 @@ const populateDemo = (container, i) => { currentOffset = element.closest('.gatsby_demo').offsetTop } document.scrollingElement.scrollTo(0, document.scrollingElement.scrollTop - currentOffset + prevOffset) - // activate demo last + // activation demo last const s = Xt.get('xt-toggle', demos[prev]) s.goToNum(-1) } @@ -424,7 +424,7 @@ const populateDemo = (container, i) => { currentOffset = element.closest('.gatsby_demo').offsetTop } document.scrollingElement.scrollTo(0, document.scrollingElement.scrollTop - currentOffset + nextOffset) - // activate demo first + // activation demo first const s = Xt.get('xt-toggle', demos[next]) s.goToNum(0) }