芝麻web文件管理V1.00
编辑当前文件:/home/digitalh/public_html/node_modules/alpinejs/src/directives/x-transition.js
import { releaseNextTicks, holdNextTicks } from '../nextTick' import { setClasses } from '../utils/classes' import { setStyles } from '../utils/styles' import { directive } from '../directives' import { mutateDom } from '../mutation' import { once } from '../utils/once' directive('transition', (el, { value, modifiers, expression }, { evaluate }) => { if (typeof expression === 'function') expression = evaluate(expression) if (! expression) { registerTransitionsFromHelper(el, modifiers, value) } else { registerTransitionsFromClassString(el, expression, value) } }) function registerTransitionsFromClassString(el, classString, stage) { registerTransitionObject(el, setClasses, '') let directiveStorageMap = { 'enter': (classes) => { el._x_transition.enter.during = classes }, 'enter-start': (classes) => { el._x_transition.enter.start = classes }, 'enter-end': (classes) => { el._x_transition.enter.end = classes }, 'leave': (classes) => { el._x_transition.leave.during = classes }, 'leave-start': (classes) => { el._x_transition.leave.start = classes }, 'leave-end': (classes) => { el._x_transition.leave.end = classes }, } directiveStorageMap[stage](classString) } function registerTransitionsFromHelper(el, modifiers, stage) { registerTransitionObject(el, setStyles) let doesntSpecify = (! modifiers.includes('in') && ! modifiers.includes('out')) && ! stage let transitioningIn = doesntSpecify || modifiers.includes('in') || ['enter'].includes(stage) let transitioningOut = doesntSpecify || modifiers.includes('out') || ['leave'].includes(stage) if (modifiers.includes('in') && ! doesntSpecify) { modifiers = modifiers.filter((i, index) => index < modifiers.indexOf('out')) } if (modifiers.includes('out') && ! doesntSpecify) { modifiers = modifiers.filter((i, index) => index > modifiers.indexOf('out')) } let wantsAll = ! modifiers.includes('opacity') && ! modifiers.includes('scale') let wantsOpacity = wantsAll || modifiers.includes('opacity') let wantsScale = wantsAll || modifiers.includes('scale') let opacityValue = wantsOpacity ? 0 : 1 let scaleValue = wantsScale ? modifierValue(modifiers, 'scale', 95) / 100 : 1 let delay = modifierValue(modifiers, 'delay', 0) let origin = modifierValue(modifiers, 'origin', 'center') let property = 'opacity, transform' let durationIn = modifierValue(modifiers, 'duration', 150) / 1000 let durationOut = modifierValue(modifiers, 'duration', 75) / 1000 let easing = `cubic-bezier(0.4, 0.0, 0.2, 1)` if (transitioningIn) { el._x_transition.enter.during = { transformOrigin: origin, transitionDelay: delay, transitionProperty: property, transitionDuration: `${durationIn}s`, transitionTimingFunction: easing, } el._x_transition.enter.start = { opacity: opacityValue, transform: `scale(${scaleValue})`, } el._x_transition.enter.end = { opacity: 1, transform: `scale(1)`, } } if (transitioningOut) { el._x_transition.leave.during = { transformOrigin: origin, transitionDelay: delay, transitionProperty: property, transitionDuration: `${durationOut}s`, transitionTimingFunction: easing, } el._x_transition.leave.start = { opacity: 1, transform: `scale(1)`, } el._x_transition.leave.end = { opacity: opacityValue, transform: `scale(${scaleValue})`, } } } function registerTransitionObject(el, setFunction, defaultValue = {}) { if (! el._x_transition) el._x_transition = { enter: { during: defaultValue, start: defaultValue, end: defaultValue }, leave: { during: defaultValue, start: defaultValue, end: defaultValue }, in(before = () => {}, after = () => {}) { transition(el, setFunction, { during: this.enter.during, start: this.enter.start, end: this.enter.end, }, before, after) }, out(before = () => {}, after = () => {}) { transition(el, setFunction, { during: this.leave.during, start: this.leave.start, end: this.leave.end, }, before, after) }, } } window.Element.prototype._x_toggleAndCascadeWithTransitions = function (el, value, show, hide) { // We are running this function after one tick to prevent // a race condition from happening where elements that have a // @click.away always view themselves as shown on the page. // If the tab is active, we prioritise requestAnimationFrame which plays // nicely with nested animations otherwise we use setTimeout to make sure // it keeps running in background. setTimeout has a lower priority in the // event loop so it would skip nested transitions but when the tab is // hidden, it's not relevant. const nextTick = document.visibilityState === 'visible' ? requestAnimationFrame : setTimeout; let clickAwayCompatibleShow = () => nextTick(show); if (value) { if (el._x_transition && (el._x_transition.enter || el._x_transition.leave)) { // This fixes a bug where if you are only transitioning OUT and you are also using @click.outside // the element when shown immediately starts transitioning out. There is a test in the manual // transition test file for this: /tests/cypress/manual-transition-test.html (el._x_transition.enter && (Object.entries(el._x_transition.enter.during).length || Object.entries(el._x_transition.enter.start).length || Object.entries(el._x_transition.enter.end).length)) ? el._x_transition.in(show) : clickAwayCompatibleShow() } else { el._x_transition ? el._x_transition.in(show) : clickAwayCompatibleShow() } return } // Livewire depends on el._x_hidePromise. el._x_hidePromise = el._x_transition ? new Promise((resolve, reject) => { el._x_transition.out(() => {}, () => resolve(hide)) el._x_transitioning.beforeCancel(() => reject({ isFromCancelledTransition: true })) }) : Promise.resolve(hide) queueMicrotask(() => { let closest = closestHide(el) if (closest) { if (! closest._x_hideChildren) closest._x_hideChildren = [] closest._x_hideChildren.push(el) } else { nextTick(() => { let hideAfterChildren = el => { let carry = Promise.all([ el._x_hidePromise, ...(el._x_hideChildren || []).map(hideAfterChildren), ]).then(([i]) => i()) delete el._x_hidePromise delete el._x_hideChildren return carry } hideAfterChildren(el).catch((e) => { if (! e.isFromCancelledTransition) throw e }) }) } }) } function closestHide(el) { let parent = el.parentNode if (! parent) return return parent._x_hidePromise ? parent : closestHide(parent) } export function transition(el, setFunction, { during, start, end } = {}, before = () => {}, after = () => {}) { if (el._x_transitioning) el._x_transitioning.cancel() if (Object.keys(during).length === 0 && Object.keys(start).length === 0 && Object.keys(end).length === 0) { // Execute right away if there is no transition. before(); after() return } let undoStart, undoDuring, undoEnd performTransition(el, { start() { undoStart = setFunction(el, start) }, during() { undoDuring = setFunction(el, during) }, before, end() { undoStart() undoEnd = setFunction(el, end) }, after, cleanup() { undoDuring() undoEnd() }, }) } export function performTransition(el, stages) { // All transitions need to be truly "cancellable". Meaning we need to // account for interruptions at ALL stages of the transitions and // immediately run the rest of the transition. let interrupted, reachedBefore, reachedEnd let finish = once(() => { mutateDom(() => { interrupted = true if (! reachedBefore) stages.before() if (! reachedEnd) { stages.end() releaseNextTicks() } stages.after() // Adding an "isConnected" check, in case the callback removed the element from the DOM. if (el.isConnected) stages.cleanup() delete el._x_transitioning }) }) el._x_transitioning = { beforeCancels: [], beforeCancel(callback) { this.beforeCancels.push(callback) }, cancel: once(function () { while (this.beforeCancels.length) { this.beforeCancels.shift()() }; finish(); }), finish, } mutateDom(() => { stages.start() stages.during() }) holdNextTicks() requestAnimationFrame(() => { if (interrupted) return // Note: Safari's transitionDuration property will list out comma separated transition durations // for every single transition property. Let's grab the first one and call it a day. let duration = Number(getComputedStyle(el).transitionDuration.replace(/,.*/, '').replace('s', '')) * 1000 let delay = Number(getComputedStyle(el).transitionDelay.replace(/,.*/, '').replace('s', '')) * 1000 if (duration === 0) duration = Number(getComputedStyle(el).animationDuration.replace('s', '')) * 1000 mutateDom(() => { stages.before() }) reachedBefore = true requestAnimationFrame(() => { if (interrupted) return mutateDom(() => { stages.end() }) releaseNextTicks() setTimeout(el._x_transitioning.finish, duration + delay) reachedEnd = true }) }) } export function modifierValue(modifiers, key, fallback) { // If the modifier isn't present, use the default. if (modifiers.indexOf(key) === -1) return fallback // If it IS present, grab the value after it: x-show.transition.duration.500ms const rawValue = modifiers[modifiers.indexOf(key) + 1] if (! rawValue) return fallback if (key === 'scale') { // Check if the very next value is NOT a number and return the fallback. // If x-show.transition.scale, we'll use the default scale value. // That is how a user opts out of the opacity transition. if (isNaN(rawValue)) return fallback } if (key === 'duration') { // Support x-transition.duration.500ms && duration.500 let match = rawValue.match(/([0-9]+)ms/) if (match) return match[1] } if (key === 'origin') { // Support chaining origin directions: x-show.transition.top.right if (['top', 'right', 'left', 'center', 'bottom'].includes(modifiers[modifiers.indexOf(key) + 2])) { return [rawValue, modifiers[modifiers.indexOf(key) + 2]].join(' ') } } return rawValue }