chore: remove css-animation (#7613)
* chore: remove css-animate * chore(site): remove localStorage support checkpull/7632/head
extclp
GitHub
parent
33a0708eb4
commit
f42d8ad1ce
|
|
@ -1,130 +0,0 @@
|
||||||
const START_EVENT_NAME_MAP = {
|
|
||||||
transitionstart: {
|
|
||||||
transition: 'transitionstart',
|
|
||||||
WebkitTransition: 'webkitTransitionStart',
|
|
||||||
MozTransition: 'mozTransitionStart',
|
|
||||||
OTransition: 'oTransitionStart',
|
|
||||||
msTransition: 'MSTransitionStart',
|
|
||||||
},
|
|
||||||
|
|
||||||
animationstart: {
|
|
||||||
animation: 'animationstart',
|
|
||||||
WebkitAnimation: 'webkitAnimationStart',
|
|
||||||
MozAnimation: 'mozAnimationStart',
|
|
||||||
OAnimation: 'oAnimationStart',
|
|
||||||
msAnimation: 'MSAnimationStart',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const END_EVENT_NAME_MAP = {
|
|
||||||
transitionend: {
|
|
||||||
transition: 'transitionend',
|
|
||||||
WebkitTransition: 'webkitTransitionEnd',
|
|
||||||
MozTransition: 'mozTransitionEnd',
|
|
||||||
OTransition: 'oTransitionEnd',
|
|
||||||
msTransition: 'MSTransitionEnd',
|
|
||||||
},
|
|
||||||
|
|
||||||
animationend: {
|
|
||||||
animation: 'animationend',
|
|
||||||
WebkitAnimation: 'webkitAnimationEnd',
|
|
||||||
MozAnimation: 'mozAnimationEnd',
|
|
||||||
OAnimation: 'oAnimationEnd',
|
|
||||||
msAnimation: 'MSAnimationEnd',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const startEvents = [];
|
|
||||||
const endEvents = [];
|
|
||||||
|
|
||||||
function detectEvents() {
|
|
||||||
const testEl = document.createElement('div');
|
|
||||||
const style = testEl.style;
|
|
||||||
|
|
||||||
if (!('AnimationEvent' in window)) {
|
|
||||||
delete START_EVENT_NAME_MAP.animationstart.animation;
|
|
||||||
delete END_EVENT_NAME_MAP.animationend.animation;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!('TransitionEvent' in window)) {
|
|
||||||
delete START_EVENT_NAME_MAP.transitionstart.transition;
|
|
||||||
delete END_EVENT_NAME_MAP.transitionend.transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
function process(EVENT_NAME_MAP, events) {
|
|
||||||
for (const baseEventName in EVENT_NAME_MAP) {
|
|
||||||
if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
|
|
||||||
const baseEvents = EVENT_NAME_MAP[baseEventName];
|
|
||||||
for (const styleName in baseEvents) {
|
|
||||||
if (styleName in style) {
|
|
||||||
events.push(baseEvents[styleName]);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
process(START_EVENT_NAME_MAP, startEvents);
|
|
||||||
process(END_EVENT_NAME_MAP, endEvents);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
|
|
||||||
detectEvents();
|
|
||||||
}
|
|
||||||
|
|
||||||
function addEventListener(node, eventName, eventListener) {
|
|
||||||
node.addEventListener(eventName, eventListener, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeEventListener(node, eventName, eventListener) {
|
|
||||||
node.removeEventListener(eventName, eventListener, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
const TransitionEvents = {
|
|
||||||
// Start events
|
|
||||||
startEvents,
|
|
||||||
|
|
||||||
addStartEventListener(node, eventListener) {
|
|
||||||
if (startEvents.length === 0) {
|
|
||||||
setTimeout(eventListener, 0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
startEvents.forEach(startEvent => {
|
|
||||||
addEventListener(node, startEvent, eventListener);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
removeStartEventListener(node, eventListener) {
|
|
||||||
if (startEvents.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
startEvents.forEach(startEvent => {
|
|
||||||
removeEventListener(node, startEvent, eventListener);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// End events
|
|
||||||
endEvents,
|
|
||||||
|
|
||||||
addEndEventListener(node, eventListener) {
|
|
||||||
if (endEvents.length === 0) {
|
|
||||||
setTimeout(eventListener, 0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
endEvents.forEach(endEvent => {
|
|
||||||
addEventListener(node, endEvent, eventListener);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
removeEndEventListener(node, eventListener) {
|
|
||||||
if (endEvents.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
endEvents.forEach(endEvent => {
|
|
||||||
removeEventListener(node, endEvent, eventListener);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TransitionEvents;
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
// https://github.com/yiminghe/css-animation 1.5.0
|
|
||||||
|
|
||||||
import Event from './Event';
|
|
||||||
import classes from '../component-classes';
|
|
||||||
import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout';
|
|
||||||
import { inBrowser } from '../env';
|
|
||||||
|
|
||||||
const isCssAnimationSupported = Event.endEvents.length !== 0;
|
|
||||||
const capitalPrefixes = [
|
|
||||||
'Webkit',
|
|
||||||
'Moz',
|
|
||||||
'O',
|
|
||||||
// ms is special .... !
|
|
||||||
'ms',
|
|
||||||
];
|
|
||||||
const prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
|
|
||||||
|
|
||||||
function getStyleProperty(node, name) {
|
|
||||||
if (inBrowser) return '';
|
|
||||||
// old ff need null, https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
|
|
||||||
const style = window.getComputedStyle(node, null);
|
|
||||||
let ret = '';
|
|
||||||
for (let i = 0; i < prefixes.length; i++) {
|
|
||||||
ret = style.getPropertyValue(prefixes[i] + name);
|
|
||||||
if (ret) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
function fixBrowserByTimeout(node) {
|
|
||||||
if (isCssAnimationSupported) {
|
|
||||||
const transitionDelay = parseFloat(getStyleProperty(node, 'transition-delay')) || 0;
|
|
||||||
const transitionDuration = parseFloat(getStyleProperty(node, 'transition-duration')) || 0;
|
|
||||||
const animationDelay = parseFloat(getStyleProperty(node, 'animation-delay')) || 0;
|
|
||||||
const animationDuration = parseFloat(getStyleProperty(node, 'animation-duration')) || 0;
|
|
||||||
const time = Math.max(transitionDuration + transitionDelay, animationDuration + animationDelay);
|
|
||||||
// sometimes, browser bug
|
|
||||||
node.rcEndAnimTimeout = setTimeout(() => {
|
|
||||||
node.rcEndAnimTimeout = null;
|
|
||||||
if (node.rcEndListener) {
|
|
||||||
node.rcEndListener();
|
|
||||||
}
|
|
||||||
}, time * 1000 + 200);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearBrowserBugTimeout(node) {
|
|
||||||
if (node.rcEndAnimTimeout) {
|
|
||||||
clearTimeout(node.rcEndAnimTimeout);
|
|
||||||
node.rcEndAnimTimeout = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const cssAnimation = (node, transitionName, endCallback) => {
|
|
||||||
const nameIsObj = typeof transitionName === 'object';
|
|
||||||
const className = nameIsObj ? transitionName.name : transitionName;
|
|
||||||
const activeClassName = nameIsObj ? transitionName.active : `${transitionName}-active`;
|
|
||||||
let end = endCallback;
|
|
||||||
let start;
|
|
||||||
let active;
|
|
||||||
const nodeClasses = classes(node);
|
|
||||||
|
|
||||||
if (endCallback && Object.prototype.toString.call(endCallback) === '[object Object]') {
|
|
||||||
end = endCallback.end;
|
|
||||||
start = endCallback.start;
|
|
||||||
active = endCallback.active;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.rcEndListener) {
|
|
||||||
node.rcEndListener();
|
|
||||||
}
|
|
||||||
|
|
||||||
node.rcEndListener = e => {
|
|
||||||
if (e && e.target !== node) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.rcAnimTimeout) {
|
|
||||||
cancelAnimationTimeout(node.rcAnimTimeout);
|
|
||||||
node.rcAnimTimeout = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
clearBrowserBugTimeout(node);
|
|
||||||
|
|
||||||
nodeClasses.remove(className);
|
|
||||||
nodeClasses.remove(activeClassName);
|
|
||||||
|
|
||||||
Event.removeEndEventListener(node, node.rcEndListener);
|
|
||||||
node.rcEndListener = null;
|
|
||||||
|
|
||||||
// Usually this optional end is used for informing an owner of
|
|
||||||
// a leave animation and telling it to remove the child.
|
|
||||||
if (end) {
|
|
||||||
end();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Event.addEndEventListener(node, node.rcEndListener);
|
|
||||||
|
|
||||||
if (start) {
|
|
||||||
start();
|
|
||||||
}
|
|
||||||
nodeClasses.add(className);
|
|
||||||
|
|
||||||
node.rcAnimTimeout = requestAnimationTimeout(() => {
|
|
||||||
node.rcAnimTimeout = null;
|
|
||||||
|
|
||||||
nodeClasses.add(className);
|
|
||||||
nodeClasses.add(activeClassName);
|
|
||||||
|
|
||||||
if (active) {
|
|
||||||
requestAnimationTimeout(active, 0);
|
|
||||||
}
|
|
||||||
fixBrowserByTimeout(node);
|
|
||||||
// 30ms for firefox
|
|
||||||
}, 30);
|
|
||||||
|
|
||||||
return {
|
|
||||||
stop() {
|
|
||||||
if (node.rcEndListener) {
|
|
||||||
node.rcEndListener();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
cssAnimation.style = (node, style, callback) => {
|
|
||||||
if (node.rcEndListener) {
|
|
||||||
node.rcEndListener();
|
|
||||||
}
|
|
||||||
|
|
||||||
node.rcEndListener = e => {
|
|
||||||
if (e && e.target !== node) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.rcAnimTimeout) {
|
|
||||||
cancelAnimationTimeout(node.rcAnimTimeout);
|
|
||||||
node.rcAnimTimeout = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
clearBrowserBugTimeout(node);
|
|
||||||
|
|
||||||
Event.removeEndEventListener(node, node.rcEndListener);
|
|
||||||
node.rcEndListener = null;
|
|
||||||
|
|
||||||
// Usually this optional callback is used for informing an owner of
|
|
||||||
// a leave animation and telling it to remove the child.
|
|
||||||
if (callback) {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Event.addEndEventListener(node, node.rcEndListener);
|
|
||||||
|
|
||||||
node.rcAnimTimeout = requestAnimationTimeout(() => {
|
|
||||||
for (const s in style) {
|
|
||||||
if (style.hasOwnProperty(s)) {
|
|
||||||
node.style[s] = style[s];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
node.rcAnimTimeout = null;
|
|
||||||
fixBrowserByTimeout(node);
|
|
||||||
}, 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
cssAnimation.setTransition = (node, p, value) => {
|
|
||||||
let property = p;
|
|
||||||
let v = value;
|
|
||||||
if (value === undefined) {
|
|
||||||
v = property;
|
|
||||||
property = '';
|
|
||||||
}
|
|
||||||
property = property || '';
|
|
||||||
capitalPrefixes.forEach(prefix => {
|
|
||||||
node.style[`${prefix}Transition${property}`] = v;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
cssAnimation.isCssAnimationSupported = isCssAnimationSupported;
|
|
||||||
|
|
||||||
export { isCssAnimationSupported };
|
|
||||||
|
|
||||||
export default cssAnimation;
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
let animation;
|
|
||||||
|
|
||||||
function isCssAnimationSupported() {
|
|
||||||
if (animation !== undefined) {
|
|
||||||
return animation;
|
|
||||||
}
|
|
||||||
const domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');
|
|
||||||
const elm = document.createElement('div');
|
|
||||||
if (elm.style.animationName !== undefined) {
|
|
||||||
animation = true;
|
|
||||||
}
|
|
||||||
if (animation !== undefined) {
|
|
||||||
for (let i = 0; i < domPrefixes.length; i++) {
|
|
||||||
if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) {
|
|
||||||
animation = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
animation = animation || false;
|
|
||||||
return animation;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default isCssAnimationSupported;
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import type { App, Plugin, WatchStopHandle } from 'vue';
|
import type { App, MaybeRef, Plugin, WatchStopHandle } from 'vue';
|
||||||
import { watch, computed, reactive, defineComponent, watchEffect } from 'vue';
|
import { watch, computed, reactive, defineComponent, watchEffect } from 'vue';
|
||||||
import defaultRenderEmpty from './renderEmpty';
|
import defaultRenderEmpty from './renderEmpty';
|
||||||
import type { RenderEmptyHandler } from './renderEmpty';
|
import type { RenderEmptyHandler } from './renderEmpty';
|
||||||
|
|
@ -7,7 +7,6 @@ import LocaleProvider, { ANT_MARK } from '../locale-provider';
|
||||||
|
|
||||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||||
|
|
||||||
import type { MaybeRef } from '../_util/type';
|
|
||||||
import message from '../message';
|
import message from '../message';
|
||||||
import notification from '../notification';
|
import notification from '../notification';
|
||||||
import { registerTheme } from './cssVariables';
|
import { registerTheme } from './cssVariables';
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@ import More from './More.vue';
|
||||||
import Navigation from './Navigation.vue';
|
import Navigation from './Navigation.vue';
|
||||||
import Ecosystem from './Ecosystem.vue';
|
import Ecosystem from './Ecosystem.vue';
|
||||||
import { version } from 'ant-design-vue';
|
import { version } from 'ant-design-vue';
|
||||||
import { isZhCN, isLocalStorageNameSupported, getLocalizedPathname } from '../../utils/util';
|
import { isZhCN, getLocalizedPathname } from '../../utils/util';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'HeaderMenu',
|
name: 'HeaderMenu',
|
||||||
|
|
@ -58,9 +58,7 @@ export default defineComponent({
|
||||||
const currentProtocol = `${window.location.protocol}//`;
|
const currentProtocol = `${window.location.protocol}//`;
|
||||||
const currentHref = window.location.href.substring(currentProtocol.length);
|
const currentHref = window.location.href.substring(currentProtocol.length);
|
||||||
|
|
||||||
if (isLocalStorageNameSupported()) {
|
localStorage.setItem('locale', isZhCN(pathname) ? 'en-US' : 'zh-CN');
|
||||||
localStorage.setItem('locale', isZhCN(pathname) ? 'en-US' : 'zh-CN');
|
|
||||||
}
|
|
||||||
|
|
||||||
window.location.href =
|
window.location.href =
|
||||||
currentProtocol +
|
currentProtocol +
|
||||||
|
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
export function isZhCN(name) {
|
|
||||||
return /-cn\/?$/.test(name);
|
|
||||||
}
|
|
||||||
export function isLocalStorageNameSupported() {
|
|
||||||
const testKey = 'test';
|
|
||||||
const storage = window.localStorage;
|
|
||||||
try {
|
|
||||||
storage.setItem(testKey, '1');
|
|
||||||
storage.removeItem(testKey);
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export function getLocalizedPathname(path, zhCN, query = {}, hash) {
|
|
||||||
const pathname = path.startsWith('/') ? path : `/${path}`;
|
|
||||||
let fullPath;
|
|
||||||
if (!zhCN) {
|
|
||||||
// to enUS
|
|
||||||
fullPath = /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
|
||||||
} else if (pathname === '/') {
|
|
||||||
fullPath = '/index-cn';
|
|
||||||
} else if (pathname.endsWith('/')) {
|
|
||||||
fullPath = pathname.replace(/\/$/, '-cn/');
|
|
||||||
} else {
|
|
||||||
fullPath = `${pathname}-cn`;
|
|
||||||
}
|
|
||||||
if (hash) {
|
|
||||||
const localHash = hash[zhCN ? 'zhCN' : 'enUS'];
|
|
||||||
fullPath += `#${localHash}`;
|
|
||||||
}
|
|
||||||
return { path: fullPath, query };
|
|
||||||
}
|
|
||||||
|
|
@ -2,18 +2,6 @@ export function isZhCN(name: string): boolean {
|
||||||
return /-cn\/?$/.test(name);
|
return /-cn\/?$/.test(name);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isLocalStorageNameSupported() {
|
|
||||||
const testKey = 'test';
|
|
||||||
const storage = window.localStorage;
|
|
||||||
try {
|
|
||||||
storage.setItem(testKey, '1');
|
|
||||||
storage.removeItem(testKey);
|
|
||||||
return true;
|
|
||||||
} catch (error) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getLocalizedPathname(
|
export function getLocalizedPathname(
|
||||||
path: string,
|
path: string,
|
||||||
zhCN?: boolean,
|
zhCN?: boolean,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue