lint fixes
This commit is contained in:
parent
c02f0b3b33
commit
6015254e59
|
@ -131,7 +131,7 @@ export function imageDataUrl(options?: {
|
||||||
alpha?: number,
|
alpha?: number,
|
||||||
}
|
}
|
||||||
}, seed?: string): string {
|
}, seed?: string): string {
|
||||||
const canvas = document.createElement('canvas');
|
const canvas = window.document.createElement('canvas');
|
||||||
canvas.width = options?.size?.width ?? 100;
|
canvas.width = options?.size?.width ?? 100;
|
||||||
canvas.height = options?.size?.height ?? 100;
|
canvas.height = options?.size?.height ?? 100;
|
||||||
|
|
||||||
|
|
|
@ -23,9 +23,9 @@ let misskeyOS = null;
|
||||||
|
|
||||||
function loadTheme(applyTheme: typeof import('../src/theme')['applyTheme']) {
|
function loadTheme(applyTheme: typeof import('../src/theme')['applyTheme']) {
|
||||||
unobserve();
|
unobserve();
|
||||||
const theme = themes[document.documentElement.dataset.misskeyTheme];
|
const theme = themes[window.document.documentElement.dataset.misskeyTheme];
|
||||||
if (theme) {
|
if (theme) {
|
||||||
applyTheme(themes[document.documentElement.dataset.misskeyTheme]);
|
applyTheme(themes[window.document.documentElement.dataset.misskeyTheme]);
|
||||||
} else {
|
} else {
|
||||||
applyTheme(themes['l-light']);
|
applyTheme(themes['l-light']);
|
||||||
}
|
}
|
||||||
|
@ -42,7 +42,7 @@ function loadTheme(applyTheme: typeof import('../src/theme')['applyTheme']) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
observer.observe(document.documentElement, {
|
observer.observe(window.document.documentElement, {
|
||||||
attributes: true,
|
attributes: true,
|
||||||
attributeFilter: ['data-misskey-theme'],
|
attributeFilter: ['data-misskey-theme'],
|
||||||
});
|
});
|
||||||
|
|
|
@ -95,7 +95,7 @@ export async function common(createVue: () => App<Element>) {
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
// タッチデバイスでCSSの:hoverを機能させる
|
// タッチデバイスでCSSの:hoverを機能させる
|
||||||
document.addEventListener('touchend', () => {}, { passive: true });
|
window.document.addEventListener('touchend', () => {}, { passive: true });
|
||||||
|
|
||||||
// URLに#pswpを含む場合は取り除く
|
// URLに#pswpを含む場合は取り除く
|
||||||
if (window.location.hash === '#pswp') {
|
if (window.location.hash === '#pswp') {
|
||||||
|
@ -110,13 +110,13 @@ export async function common(createVue: () => App<Element>) {
|
||||||
|
|
||||||
// If mobile, insert the viewport meta tag
|
// If mobile, insert the viewport meta tag
|
||||||
if (['smartphone', 'tablet'].includes(deviceKind)) {
|
if (['smartphone', 'tablet'].includes(deviceKind)) {
|
||||||
const viewport = document.getElementsByName('viewport').item(0);
|
const viewport = window.document.getElementsByName('viewport').item(0);
|
||||||
viewport.setAttribute('content',
|
viewport.setAttribute('content',
|
||||||
`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
|
`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
|
||||||
}
|
}
|
||||||
|
|
||||||
//#region Set lang attr
|
//#region Set lang attr
|
||||||
const html = document.documentElement;
|
const html = window.document.documentElement;
|
||||||
html.setAttribute('lang', lang);
|
html.setAttribute('lang', lang);
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
@ -155,7 +155,7 @@ export async function common(createVue: () => App<Element>) {
|
||||||
);
|
);
|
||||||
}, { immediate: miLocalStorage.getItem('theme') == null });
|
}, { immediate: miLocalStorage.getItem('theme') == null });
|
||||||
|
|
||||||
document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light';
|
window.document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light';
|
||||||
|
|
||||||
const darkTheme = prefer.model('darkTheme');
|
const darkTheme = prefer.model('darkTheme');
|
||||||
const lightTheme = prefer.model('lightTheme');
|
const lightTheme = prefer.model('lightTheme');
|
||||||
|
@ -201,20 +201,20 @@ export async function common(createVue: () => App<Element>) {
|
||||||
}, { immediate: true });
|
}, { immediate: true });
|
||||||
|
|
||||||
watch(prefer.r.useBlurEffectForModal, v => {
|
watch(prefer.r.useBlurEffectForModal, v => {
|
||||||
document.documentElement.style.setProperty('--MI-modalBgFilter', v ? 'blur(4px)' : 'none');
|
window.document.documentElement.style.setProperty('--MI-modalBgFilter', v ? 'blur(4px)' : 'none');
|
||||||
}, { immediate: true });
|
}, { immediate: true });
|
||||||
|
|
||||||
watch(prefer.r.useBlurEffect, v => {
|
watch(prefer.r.useBlurEffect, v => {
|
||||||
if (v) {
|
if (v) {
|
||||||
document.documentElement.style.removeProperty('--MI-blur');
|
window.document.documentElement.style.removeProperty('--MI-blur');
|
||||||
} else {
|
} else {
|
||||||
document.documentElement.style.setProperty('--MI-blur', 'none');
|
window.document.documentElement.style.setProperty('--MI-blur', 'none');
|
||||||
}
|
}
|
||||||
}, { immediate: true });
|
}, { immediate: true });
|
||||||
|
|
||||||
// Keep screen on
|
// Keep screen on
|
||||||
const onVisibilityChange = () => document.addEventListener('visibilitychange', () => {
|
const onVisibilityChange = () => window.document.addEventListener('visibilitychange', () => {
|
||||||
if (document.visibilityState === 'visible') {
|
if (window.document.visibilityState === 'visible') {
|
||||||
navigator.wakeLock.request('screen');
|
navigator.wakeLock.request('screen');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -224,7 +224,7 @@ export async function common(createVue: () => App<Element>) {
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
// On WebKit-based browsers, user activation is required to send wake lock request
|
// On WebKit-based browsers, user activation is required to send wake lock request
|
||||||
// https://webkit.org/blog/13862/the-user-activation-api/
|
// https://webkit.org/blog/13862/the-user-activation-api/
|
||||||
document.addEventListener(
|
window.document.addEventListener(
|
||||||
'click',
|
'click',
|
||||||
() => navigator.wakeLock.request('screen').then(onVisibilityChange),
|
() => navigator.wakeLock.request('screen').then(onVisibilityChange),
|
||||||
{ once: true },
|
{ once: true },
|
||||||
|
@ -233,7 +233,7 @@ export async function common(createVue: () => App<Element>) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (prefer.s.makeEveryTextElementsSelectable) {
|
if (prefer.s.makeEveryTextElementsSelectable) {
|
||||||
document.documentElement.classList.add('forceSelectableAll');
|
window.document.documentElement.classList.add('forceSelectableAll');
|
||||||
}
|
}
|
||||||
|
|
||||||
//#region Fetch user
|
//#region Fetch user
|
||||||
|
@ -278,16 +278,16 @@ export async function common(createVue: () => App<Element>) {
|
||||||
const rootEl = ((): HTMLElement => {
|
const rootEl = ((): HTMLElement => {
|
||||||
const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
|
const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
|
||||||
|
|
||||||
const currentRoot = document.getElementById(MISSKEY_MOUNT_DIV_ID);
|
const currentRoot = window.document.getElementById(MISSKEY_MOUNT_DIV_ID);
|
||||||
|
|
||||||
if (currentRoot) {
|
if (currentRoot) {
|
||||||
console.warn('multiple import detected');
|
console.warn('multiple import detected');
|
||||||
return currentRoot;
|
return currentRoot;
|
||||||
}
|
}
|
||||||
|
|
||||||
const root = document.createElement('div');
|
const root = window.document.createElement('div');
|
||||||
root.id = MISSKEY_MOUNT_DIV_ID;
|
root.id = MISSKEY_MOUNT_DIV_ID;
|
||||||
document.body.appendChild(root);
|
window.document.body.appendChild(root);
|
||||||
return root;
|
return root;
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
@ -330,7 +330,7 @@ export async function common(createVue: () => App<Element>) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeSplash() {
|
function removeSplash() {
|
||||||
const splash = document.getElementById('splash');
|
const splash = window.document.getElementById('splash');
|
||||||
if (splash) {
|
if (splash) {
|
||||||
splash.style.opacity = '0';
|
splash.style.opacity = '0';
|
||||||
splash.style.pointerEvents = 'none';
|
splash.style.pointerEvents = 'none';
|
||||||
|
|
|
@ -398,7 +398,7 @@ export async function mainBoot() {
|
||||||
let lastVisibilityChangedAt = Date.now();
|
let lastVisibilityChangedAt = Date.now();
|
||||||
|
|
||||||
function claimPlainLucky() {
|
function claimPlainLucky() {
|
||||||
if (document.visibilityState !== 'visible') {
|
if (window.document.visibilityState !== 'visible') {
|
||||||
if (justPlainLuckyTimer != null) window.clearTimeout(justPlainLuckyTimer);
|
if (justPlainLuckyTimer != null) window.clearTimeout(justPlainLuckyTimer);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -413,7 +413,7 @@ export async function mainBoot() {
|
||||||
window.addEventListener('visibilitychange', () => {
|
window.addEventListener('visibilitychange', () => {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
|
|
||||||
if (document.visibilityState === 'visible') {
|
if (window.document.visibilityState === 'visible') {
|
||||||
// タブを高速で切り替えたら取得処理が何度も走るのを防ぐ
|
// タブを高速で切り替えたら取得処理が何度も走るのを防ぐ
|
||||||
if ((now - lastVisibilityChangedAt) < 1000 * 10) {
|
if ((now - lastVisibilityChangedAt) < 1000 * 10) {
|
||||||
justPlainLuckyTimer = window.setTimeout(claimPlainLucky, 1000 * 10);
|
justPlainLuckyTimer = window.setTimeout(claimPlainLucky, 1000 * 10);
|
||||||
|
@ -554,7 +554,7 @@ export async function mainBoot() {
|
||||||
mainRouter.push('/search');
|
mainRouter.push('/search');
|
||||||
},
|
},
|
||||||
} as const satisfies Keymap;
|
} as const satisfies Keymap;
|
||||||
document.addEventListener('keydown', makeHotkey(keymap), { passive: false });
|
window.document.addEventListener('keydown', makeHotkey(keymap), { passive: false });
|
||||||
|
|
||||||
initializeSw();
|
initializeSw();
|
||||||
}
|
}
|
||||||
|
|
|
@ -192,7 +192,7 @@ function tick() {
|
||||||
tick();
|
tick();
|
||||||
|
|
||||||
function calcColors() {
|
function calcColors() {
|
||||||
const computedStyle = getComputedStyle(document.documentElement);
|
const computedStyle = getComputedStyle(window.document.documentElement);
|
||||||
const dark = tinycolor(computedStyle.getPropertyValue('--MI_THEME-bg')).isDark();
|
const dark = tinycolor(computedStyle.getPropertyValue('--MI_THEME-bg')).isDark();
|
||||||
const accent = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
|
const accent = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
|
||||||
majorGraduationColor.value = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
|
majorGraduationColor.value = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
|
||||||
|
|
|
@ -359,7 +359,7 @@ onMounted(() => {
|
||||||
|
|
||||||
props.textarea.addEventListener('keydown', onKeydown);
|
props.textarea.addEventListener('keydown', onKeydown);
|
||||||
|
|
||||||
document.body.addEventListener('mousedown', onMousedown);
|
window.document.body.addEventListener('mousedown', onMousedown);
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
exec();
|
exec();
|
||||||
|
@ -375,7 +375,7 @@ onMounted(() => {
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
props.textarea.removeEventListener('keydown', onKeydown);
|
props.textarea.removeEventListener('keydown', onKeydown);
|
||||||
|
|
||||||
document.body.removeEventListener('mousedown', onMousedown);
|
window.document.body.removeEventListener('mousedown', onMousedown);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -92,7 +92,7 @@ function onMousedown(evt: MouseEvent): void {
|
||||||
const target = evt.target! as HTMLElement;
|
const target = evt.target! as HTMLElement;
|
||||||
const rect = target.getBoundingClientRect();
|
const rect = target.getBoundingClientRect();
|
||||||
|
|
||||||
const ripple = document.createElement('div');
|
const ripple = window.document.createElement('div');
|
||||||
ripple.classList.add(ripples.value!.dataset.childrenClass!);
|
ripple.classList.add(ripples.value!.dataset.childrenClass!);
|
||||||
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
|
ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
|
||||||
ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
|
ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
|
||||||
|
|
|
@ -112,7 +112,7 @@ watch(() => [props.instanceUrl, props.sitekey, props.secretKey], async () => {
|
||||||
if (loaded || props.provider === 'mcaptcha' || props.provider === 'testcaptcha') {
|
if (loaded || props.provider === 'mcaptcha' || props.provider === 'testcaptcha') {
|
||||||
available.value = true;
|
available.value = true;
|
||||||
} else if (src.value !== null) {
|
} else if (src.value !== null) {
|
||||||
(document.getElementById(scriptId.value) ?? document.head.appendChild(Object.assign(document.createElement('script'), {
|
(window.document.getElementById(scriptId.value) ?? window.document.head.appendChild(Object.assign(window.document.createElement('script'), {
|
||||||
async: true,
|
async: true,
|
||||||
id: scriptId.value,
|
id: scriptId.value,
|
||||||
src: src.value,
|
src: src.value,
|
||||||
|
@ -149,7 +149,7 @@ async function requestRender() {
|
||||||
if (captcha.value.render && captchaEl.value instanceof Element && props.sitekey) {
|
if (captcha.value.render && captchaEl.value instanceof Element && props.sitekey) {
|
||||||
// reCAPTCHAのレンダリング重複判定を回避するため、captchaEl配下に仮のdivを用意する.
|
// reCAPTCHAのレンダリング重複判定を回避するため、captchaEl配下に仮のdivを用意する.
|
||||||
// (同じdivに対して複数回renderを呼び出すとreCAPTCHAはエラーを返すので)
|
// (同じdivに対して複数回renderを呼び出すとreCAPTCHAはエラーを返すので)
|
||||||
const elem = document.createElement('div');
|
const elem = window.document.createElement('div');
|
||||||
captchaEl.value.appendChild(elem);
|
captchaEl.value.appendChild(elem);
|
||||||
|
|
||||||
captchaWidgetId.value = captcha.value.render(elem, {
|
captchaWidgetId.value = captcha.value.render(elem, {
|
||||||
|
@ -174,7 +174,7 @@ async function requestRender() {
|
||||||
|
|
||||||
function clearWidget() {
|
function clearWidget() {
|
||||||
if (props.provider === 'mcaptcha') {
|
if (props.provider === 'mcaptcha') {
|
||||||
const container = document.getElementById('mcaptcha__widget-container');
|
const container = window.document.getElementById('mcaptcha__widget-container');
|
||||||
if (container) {
|
if (container) {
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
}
|
}
|
||||||
|
|
|
@ -68,11 +68,11 @@ onMounted(() => {
|
||||||
rootEl.value.style.left = `${left}px`;
|
rootEl.value.style.left = `${left}px`;
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.addEventListener('mousedown', onMousedown);
|
window.document.body.addEventListener('mousedown', onMousedown);
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
document.body.removeEventListener('mousedown', onMousedown);
|
window.document.body.removeEventListener('mousedown', onMousedown);
|
||||||
});
|
});
|
||||||
|
|
||||||
function onMousedown(evt: Event) {
|
function onMousedown(evt: Event) {
|
||||||
|
|
|
@ -122,7 +122,7 @@ onMounted(() => {
|
||||||
cropper = new Cropper(imgEl.value!, {
|
cropper = new Cropper(imgEl.value!, {
|
||||||
});
|
});
|
||||||
|
|
||||||
const computedStyle = getComputedStyle(document.documentElement);
|
const computedStyle = getComputedStyle(window.document.documentElement);
|
||||||
|
|
||||||
const selection = cropper.getCropperSelection()!;
|
const selection = cropper.getCropperSelection()!;
|
||||||
selection.themeColor = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
|
selection.themeColor = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
|
||||||
|
|
|
@ -116,7 +116,7 @@ function toggle() {
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const computedStyle = getComputedStyle(document.documentElement);
|
const computedStyle = getComputedStyle(window.document.documentElement);
|
||||||
const parentBg = getBgColor(rootEl.value?.parentElement) ?? 'transparent';
|
const parentBg = getBgColor(rootEl.value?.parentElement) ?? 'transparent';
|
||||||
const myBg = computedStyle.getPropertyValue('--MI_THEME-panel');
|
const myBg = computedStyle.getPropertyValue('--MI_THEME-panel');
|
||||||
bgSame.value = parentBg === myBg;
|
bgSame.value = parentBg === myBg;
|
||||||
|
|
|
@ -55,7 +55,7 @@ import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurha
|
||||||
const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resolve => {
|
const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resolve => {
|
||||||
// テスト環境で Web Worker インスタンスは作成できない
|
// テスト環境で Web Worker インスタンスは作成できない
|
||||||
if (import.meta.env.MODE === 'test') {
|
if (import.meta.env.MODE === 'test') {
|
||||||
const canvas = document.createElement('canvas');
|
const canvas = window.document.createElement('canvas');
|
||||||
canvas.width = 64;
|
canvas.width = 64;
|
||||||
canvas.height = 64;
|
canvas.height = 64;
|
||||||
resolve(canvas);
|
resolve(canvas);
|
||||||
|
@ -70,7 +70,7 @@ const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resol
|
||||||
);
|
);
|
||||||
resolve(workers);
|
resolve(workers);
|
||||||
} else {
|
} else {
|
||||||
const canvas = document.createElement('canvas');
|
const canvas = window.document.createElement('canvas');
|
||||||
canvas.width = 64;
|
canvas.width = 64;
|
||||||
canvas.height = 64;
|
canvas.height = 64;
|
||||||
resolve(canvas);
|
resolve(canvas);
|
||||||
|
|
|
@ -126,7 +126,7 @@ function createDoughnut(chartEl, tooltip, data) {
|
||||||
labels: data.map(x => x.name),
|
labels: data.map(x => x.name),
|
||||||
datasets: [{
|
datasets: [{
|
||||||
backgroundColor: data.map(x => x.color),
|
backgroundColor: data.map(x => x.color),
|
||||||
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-panel'),
|
borderColor: getComputedStyle(window.document.documentElement).getPropertyValue('--MI_THEME-panel'),
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
hoverOffset: 0,
|
hoverOffset: 0,
|
||||||
data: data.map(x => x.value),
|
data: data.map(x => x.value),
|
||||||
|
|
|
@ -148,7 +148,7 @@ const keymap = {
|
||||||
// PlayerElもしくはその子要素にフォーカスがあるかどうか
|
// PlayerElもしくはその子要素にフォーカスがあるかどうか
|
||||||
function hasFocus() {
|
function hasFocus() {
|
||||||
if (!playerEl.value) return false;
|
if (!playerEl.value) return false;
|
||||||
return playerEl.value === document.activeElement || playerEl.value.contains(document.activeElement);
|
return playerEl.value === window.document.activeElement || playerEl.value.contains(window.document.activeElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
const playerEl = useTemplateRef('playerEl');
|
const playerEl = useTemplateRef('playerEl');
|
||||||
|
|
|
@ -48,7 +48,7 @@ const props = defineProps<{
|
||||||
|
|
||||||
const gallery = useTemplateRef('gallery');
|
const gallery = useTemplateRef('gallery');
|
||||||
const pswpZIndex = os.claimZIndex('middle');
|
const pswpZIndex = os.claimZIndex('middle');
|
||||||
document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
|
window.document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
|
||||||
const count = computed(() => props.mediaList.filter(media => previewable(media)).length);
|
const count = computed(() => props.mediaList.filter(media => previewable(media)).length);
|
||||||
let lightbox: PhotoSwipeLightbox | null = null;
|
let lightbox: PhotoSwipeLightbox | null = null;
|
||||||
|
|
||||||
|
@ -166,7 +166,7 @@ onMounted(() => {
|
||||||
className: 'pswp__alt-text-container',
|
className: 'pswp__alt-text-container',
|
||||||
appendTo: 'wrapper',
|
appendTo: 'wrapper',
|
||||||
onInit: (el, pswp) => {
|
onInit: (el, pswp) => {
|
||||||
const textBox = document.createElement('p');
|
const textBox = window.document.createElement('p');
|
||||||
textBox.className = 'pswp__alt-text _acrylic';
|
textBox.className = 'pswp__alt-text _acrylic';
|
||||||
el.appendChild(textBox);
|
el.appendChild(textBox);
|
||||||
|
|
||||||
|
@ -178,7 +178,7 @@ onMounted(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
lightbox.on('afterInit', () => {
|
lightbox.on('afterInit', () => {
|
||||||
activeEl = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
activeEl = window.document.activeElement instanceof HTMLElement ? window.document.activeElement : null;
|
||||||
focusParent(activeEl, true, true);
|
focusParent(activeEl, true, true);
|
||||||
lightbox?.pswp?.element?.focus({
|
lightbox?.pswp?.element?.focus({
|
||||||
preventScroll: true,
|
preventScroll: true,
|
||||||
|
|
|
@ -171,7 +171,7 @@ const keymap = {
|
||||||
// PlayerElもしくはその子要素にフォーカスがあるかどうか
|
// PlayerElもしくはその子要素にフォーカスがあるかどうか
|
||||||
function hasFocus() {
|
function hasFocus() {
|
||||||
if (!playerEl.value) return false;
|
if (!playerEl.value) return false;
|
||||||
return playerEl.value === document.activeElement || playerEl.value.contains(document.activeElement);
|
return playerEl.value === window.document.activeElement || playerEl.value.contains(window.document.activeElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
|
// eslint-disable-next-line vue/no-setup-props-reactivity-loss
|
||||||
|
@ -216,7 +216,7 @@ function showMenu(ev: MouseEvent) {
|
||||||
'2.0x': 2,
|
'2.0x': 2,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
...(document.pictureInPictureEnabled ? [{
|
...(window.document.pictureInPictureEnabled ? [{
|
||||||
text: i18n.ts._mediaControls.pip,
|
text: i18n.ts._mediaControls.pip,
|
||||||
icon: 'ti ti-picture-in-picture',
|
icon: 'ti ti-picture-in-picture',
|
||||||
action: togglePictureInPicture,
|
action: togglePictureInPicture,
|
||||||
|
@ -384,8 +384,8 @@ function toggleFullscreen() {
|
||||||
|
|
||||||
function togglePictureInPicture() {
|
function togglePictureInPicture() {
|
||||||
if (videoEl.value) {
|
if (videoEl.value) {
|
||||||
if (document.pictureInPictureElement) {
|
if (window.document.pictureInPictureElement) {
|
||||||
document.exitPictureInPicture();
|
window.document.exitPictureInPicture();
|
||||||
} else {
|
} else {
|
||||||
videoEl.value.requestPictureInPicture();
|
videoEl.value.requestPictureInPicture();
|
||||||
}
|
}
|
||||||
|
|
|
@ -358,10 +358,10 @@ function switchItem(item: MenuSwitch & { ref: any }) {
|
||||||
|
|
||||||
function focusUp() {
|
function focusUp() {
|
||||||
if (disposed) return;
|
if (disposed) return;
|
||||||
if (!itemsEl.value?.contains(document.activeElement)) return;
|
if (!itemsEl.value?.contains(window.document.activeElement)) return;
|
||||||
|
|
||||||
const focusableElements = Array.from(itemsEl.value.children).filter(isFocusable);
|
const focusableElements = Array.from(itemsEl.value.children).filter(isFocusable);
|
||||||
const activeIndex = focusableElements.findIndex(el => el === document.activeElement);
|
const activeIndex = focusableElements.findIndex(el => el === window.document.activeElement);
|
||||||
const targetIndex = (activeIndex !== -1 && activeIndex !== 0) ? (activeIndex - 1) : (focusableElements.length - 1);
|
const targetIndex = (activeIndex !== -1 && activeIndex !== 0) ? (activeIndex - 1) : (focusableElements.length - 1);
|
||||||
const targetElement = focusableElements.at(targetIndex) ?? itemsEl.value;
|
const targetElement = focusableElements.at(targetIndex) ?? itemsEl.value;
|
||||||
|
|
||||||
|
@ -370,10 +370,10 @@ function focusUp() {
|
||||||
|
|
||||||
function focusDown() {
|
function focusDown() {
|
||||||
if (disposed) return;
|
if (disposed) return;
|
||||||
if (!itemsEl.value?.contains(document.activeElement)) return;
|
if (!itemsEl.value?.contains(window.document.activeElement)) return;
|
||||||
|
|
||||||
const focusableElements = Array.from(itemsEl.value.children).filter(isFocusable);
|
const focusableElements = Array.from(itemsEl.value.children).filter(isFocusable);
|
||||||
const activeIndex = focusableElements.findIndex(el => el === document.activeElement);
|
const activeIndex = focusableElements.findIndex(el => el === window.document.activeElement);
|
||||||
const targetIndex = (activeIndex !== -1 && activeIndex !== (focusableElements.length - 1)) ? (activeIndex + 1) : 0;
|
const targetIndex = (activeIndex !== -1 && activeIndex !== (focusableElements.length - 1)) ? (activeIndex + 1) : 0;
|
||||||
const targetElement = focusableElements.at(targetIndex) ?? itemsEl.value;
|
const targetElement = focusableElements.at(targetIndex) ?? itemsEl.value;
|
||||||
|
|
||||||
|
@ -400,9 +400,9 @@ const onGlobalMousedown = (ev: MouseEvent) => {
|
||||||
|
|
||||||
const setupHandlers = () => {
|
const setupHandlers = () => {
|
||||||
if (!isNestingMenu) {
|
if (!isNestingMenu) {
|
||||||
document.addEventListener('focusin', onGlobalFocusin, { passive: true });
|
window.document.addEventListener('focusin', onGlobalFocusin, { passive: true });
|
||||||
}
|
}
|
||||||
document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
|
window.document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
let disposed = false;
|
let disposed = false;
|
||||||
|
@ -410,9 +410,9 @@ let disposed = false;
|
||||||
const disposeHandlers = () => {
|
const disposeHandlers = () => {
|
||||||
disposed = true;
|
disposed = true;
|
||||||
if (!isNestingMenu) {
|
if (!isNestingMenu) {
|
||||||
document.removeEventListener('focusin', onGlobalFocusin);
|
window.document.removeEventListener('focusin', onGlobalFocusin);
|
||||||
}
|
}
|
||||||
document.removeEventListener('mousedown', onGlobalMousedown);
|
window.document.removeEventListener('mousedown', onGlobalMousedown);
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
|
@ -48,7 +48,7 @@ const polygonPoints = ref('');
|
||||||
const headX = ref<number | null>(null);
|
const headX = ref<number | null>(null);
|
||||||
const headY = ref<number | null>(null);
|
const headY = ref<number | null>(null);
|
||||||
const clock = ref<number | null>(null);
|
const clock = ref<number | null>(null);
|
||||||
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-accent'));
|
const accent = tinycolor(getComputedStyle(window.document.documentElement).getPropertyValue('--MI_THEME-accent'));
|
||||||
const color = accent.toRgbString();
|
const color = accent.toRgbString();
|
||||||
|
|
||||||
function draw(): void {
|
function draw(): void {
|
||||||
|
|
|
@ -59,7 +59,7 @@ const pagination = computed(() => prefer.r.useGroupedNotifications.value ? {
|
||||||
|
|
||||||
function onNotification(notification) {
|
function onNotification(notification) {
|
||||||
const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
|
const isMuted = props.excludeTypes ? props.excludeTypes.includes(notification.type) : false;
|
||||||
if (isMuted || document.visibilityState === 'visible') {
|
if (isMuted || window.document.visibilityState === 'visible') {
|
||||||
useStream().send('readNotification');
|
useStream().send('readNotification');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -142,7 +142,7 @@ const {
|
||||||
} = prefer.r;
|
} = prefer.r;
|
||||||
|
|
||||||
const contentEl = computed(() => props.pagination.pageEl ?? rootEl.value);
|
const contentEl = computed(() => props.pagination.pageEl ?? rootEl.value);
|
||||||
const scrollableElement = computed(() => contentEl.value ? getScrollContainer(contentEl.value) : document.body);
|
const scrollableElement = computed(() => contentEl.value ? getScrollContainer(contentEl.value) : window.document.body);
|
||||||
|
|
||||||
const visibility = useDocumentVisibility();
|
const visibility = useDocumentVisibility();
|
||||||
|
|
||||||
|
|
|
@ -151,9 +151,9 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
|
||||||
closed: () => dispose(),
|
closed: () => dispose(),
|
||||||
});
|
});
|
||||||
|
|
||||||
const style = document.createElement('style');
|
const style = window.document.createElement('style');
|
||||||
style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
|
style.appendChild(window.document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
|
||||||
document.head.appendChild(style);
|
window.document.head.appendChild(style);
|
||||||
|
|
||||||
const thumbWidth = getThumbWidth();
|
const thumbWidth = getThumbWidth();
|
||||||
|
|
||||||
|
@ -172,7 +172,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
|
||||||
let beforeValue = finalValue.value;
|
let beforeValue = finalValue.value;
|
||||||
|
|
||||||
const onMouseup = () => {
|
const onMouseup = () => {
|
||||||
document.head.removeChild(style);
|
window.document.head.removeChild(style);
|
||||||
tooltipForDragShowing.value = false;
|
tooltipForDragShowing.value = false;
|
||||||
window.removeEventListener('mousemove', onDrag);
|
window.removeEventListener('mousemove', onDrag);
|
||||||
window.removeEventListener('touchmove', onDrag);
|
window.removeEventListener('touchmove', onDrag);
|
||||||
|
|
|
@ -136,7 +136,7 @@ async function menu(ev) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function anime() {
|
function anime() {
|
||||||
if (document.hidden || !prefer.s.animation || buttonEl.value == null) return;
|
if (window.document.hidden || !prefer.s.animation || buttonEl.value == null) return;
|
||||||
|
|
||||||
const rect = buttonEl.value.getBoundingClientRect();
|
const rect = buttonEl.value.getBoundingClientRect();
|
||||||
const x = rect.left + 16;
|
const x = rect.left + 16;
|
||||||
|
|
|
@ -44,7 +44,7 @@ onMounted(async () => {
|
||||||
|
|
||||||
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
||||||
|
|
||||||
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-accent'));
|
const accent = tinycolor(getComputedStyle(window.document.documentElement).getPropertyValue('--MI_THEME-accent'));
|
||||||
const color = accent.toHex();
|
const color = accent.toHex();
|
||||||
|
|
||||||
if (chartEl.value == null) return;
|
if (chartEl.value == null) return;
|
||||||
|
|
|
@ -20,7 +20,7 @@ import tinycolor from 'tinycolor2';
|
||||||
|
|
||||||
const loaded = !!window.TagCanvas;
|
const loaded = !!window.TagCanvas;
|
||||||
const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
|
const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
|
||||||
const computedStyle = getComputedStyle(document.documentElement);
|
const computedStyle = getComputedStyle(window.document.documentElement);
|
||||||
const idForCanvas = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
|
const idForCanvas = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
|
||||||
const idForTags = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
|
const idForTags = Array.from({ length: 16 }, () => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
|
||||||
const available = ref(false);
|
const available = ref(false);
|
||||||
|
@ -57,7 +57,7 @@ onMounted(() => {
|
||||||
if (loaded) {
|
if (loaded) {
|
||||||
available.value = true;
|
available.value = true;
|
||||||
} else {
|
} else {
|
||||||
document.head.appendChild(Object.assign(document.createElement('script'), {
|
window.document.head.appendChild(Object.assign(window.document.createElement('script'), {
|
||||||
async: true,
|
async: true,
|
||||||
src: '/client-assets/tagcanvas.min.js',
|
src: '/client-assets/tagcanvas.min.js',
|
||||||
})).addEventListener('load', () => available.value = true);
|
})).addEventListener('load', () => available.value = true);
|
||||||
|
|
|
@ -61,7 +61,7 @@ async function renderChart() {
|
||||||
|
|
||||||
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
const vLineColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
||||||
|
|
||||||
const computedStyle = getComputedStyle(document.documentElement);
|
const computedStyle = getComputedStyle(window.document.documentElement);
|
||||||
const accent = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
|
const accent = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
|
||||||
|
|
||||||
const colorRead = accent;
|
const colorRead = accent;
|
||||||
|
|
|
@ -240,7 +240,7 @@ function onHeaderMousedown(evt: MouseEvent | TouchEvent) {
|
||||||
const main = rootEl.value;
|
const main = rootEl.value;
|
||||||
if (main == null) return;
|
if (main == null) return;
|
||||||
|
|
||||||
if (!contains(main, document.activeElement)) main.focus();
|
if (!contains(main, window.document.activeElement)) main.focus();
|
||||||
|
|
||||||
const position = main.getBoundingClientRect();
|
const position = main.getBoundingClientRect();
|
||||||
|
|
||||||
|
|
|
@ -170,7 +170,7 @@ onMounted(() => {
|
||||||
|
|
||||||
if (props.rootEl) {
|
if (props.rootEl) {
|
||||||
ro2 = new ResizeObserver((entries, observer) => {
|
ro2 = new ResizeObserver((entries, observer) => {
|
||||||
if (document.body.contains(el.value as HTMLElement)) {
|
if (window.document.body.contains(el.value as HTMLElement)) {
|
||||||
nextTick(() => renderTab());
|
nextTick(() => renderTab());
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -108,7 +108,7 @@ function onTabClick(): void {
|
||||||
|
|
||||||
const calcBg = () => {
|
const calcBg = () => {
|
||||||
const rawBg = 'var(--MI_THEME-bg)';
|
const rawBg = 'var(--MI_THEME-bg)';
|
||||||
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(window.document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
||||||
tinyBg.setAlpha(0.85);
|
tinyBg.setAlpha(0.85);
|
||||||
bg.value = tinyBg.toRgbString();
|
bg.value = tinyBg.toRgbString();
|
||||||
};
|
};
|
||||||
|
@ -122,7 +122,7 @@ onMounted(() => {
|
||||||
if (el.value && el.value.parentElement) {
|
if (el.value && el.value.parentElement) {
|
||||||
narrow.value = el.value.parentElement.offsetWidth < 500;
|
narrow.value = el.value.parentElement.offsetWidth < 500;
|
||||||
ro = new ResizeObserver((entries, observer) => {
|
ro = new ResizeObserver((entries, observer) => {
|
||||||
if (el.value && el.value.parentElement && document.body.contains(el.value as HTMLElement)) {
|
if (el.value && el.value.parentElement && window.document.body.contains(el.value as HTMLElement)) {
|
||||||
narrow.value = el.value.parentElement.offsetWidth < 500;
|
narrow.value = el.value.parentElement.offsetWidth < 500;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -48,7 +48,7 @@ onMounted(() => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// view-transition-newなどの<pt-name-selector>にはcss varが使えず、v-bindできないため直接スタイルを生成
|
// view-transition-newなどの<pt-name-selector>にはcss varが使えず、v-bindできないため直接スタイルを生成
|
||||||
const viewTransitionStylesTag = document.createElement('style');
|
const viewTransitionStylesTag = window.document.createElement('style');
|
||||||
viewTransitionStylesTag.textContent = `
|
viewTransitionStylesTag.textContent = `
|
||||||
@keyframes ${viewId}-old {
|
@keyframes ${viewId}-old {
|
||||||
to { transform: scale(0.95); opacity: 0; }
|
to { transform: scale(0.95); opacity: 0; }
|
||||||
|
@ -89,8 +89,8 @@ router.useListener('change', ({ resolved }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
if (prefer.s.animation && document.startViewTransition) {
|
if (prefer.s.animation && window.document.startViewTransition) {
|
||||||
document.startViewTransition(() => new Promise((res) => {
|
window.document.startViewTransition(() => new Promise((res) => {
|
||||||
_();
|
_();
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
res();
|
res();
|
||||||
|
|
|
@ -42,7 +42,7 @@ const highlighted = ref(props.markerId === searchMarkerId.value);
|
||||||
|
|
||||||
function checkChildren() {
|
function checkChildren() {
|
||||||
if (props.children?.includes(searchMarkerId.value)) {
|
if (props.children?.includes(searchMarkerId.value)) {
|
||||||
const el = document.querySelector(`[data-in-app-search-marker-id="${searchMarkerId.value}"]`);
|
const el = window.document.querySelector(`[data-in-app-search-marker-id="${searchMarkerId.value}"]`);
|
||||||
highlighted.value = el == null;
|
highlighted.value = el == null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,7 @@ export default {
|
||||||
el._keyHandler = makeHotkey(binding.value);
|
el._keyHandler = makeHotkey(binding.value);
|
||||||
|
|
||||||
if (el._hotkey_global) {
|
if (el._hotkey_global) {
|
||||||
document.addEventListener('keydown', el._keyHandler, { passive: false });
|
window.document.addEventListener('keydown', el._keyHandler, { passive: false });
|
||||||
} else {
|
} else {
|
||||||
el.addEventListener('keydown', el._keyHandler, { passive: false });
|
el.addEventListener('keydown', el._keyHandler, { passive: false });
|
||||||
}
|
}
|
||||||
|
@ -21,7 +21,7 @@ export default {
|
||||||
|
|
||||||
unmounted(el) {
|
unmounted(el) {
|
||||||
if (el._hotkey_global) {
|
if (el._hotkey_global) {
|
||||||
document.removeEventListener('keydown', el._keyHandler);
|
window.document.removeEventListener('keydown', el._keyHandler);
|
||||||
} else {
|
} else {
|
||||||
el.removeEventListener('keydown', el._keyHandler);
|
el.removeEventListener('keydown', el._keyHandler);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@ export default {
|
||||||
mounted(src, binding, vn) {
|
mounted(src, binding, vn) {
|
||||||
const parentBg = getBgColor(src.parentElement) ?? 'transparent';
|
const parentBg = getBgColor(src.parentElement) ?? 'transparent';
|
||||||
|
|
||||||
const myBg = getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-panel');
|
const myBg = getComputedStyle(window.document.documentElement).getPropertyValue('--MI_THEME-panel');
|
||||||
|
|
||||||
if (parentBg === myBg) {
|
if (parentBg === myBg) {
|
||||||
src.style.backgroundColor = 'var(--MI_THEME-bg)';
|
src.style.backgroundColor = 'var(--MI_THEME-bg)';
|
||||||
|
|
|
@ -47,7 +47,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
self.show = () => {
|
self.show = () => {
|
||||||
if (!document.body.contains(el)) return;
|
if (!window.document.body.contains(el)) return;
|
||||||
if (self._close) return;
|
if (self._close) return;
|
||||||
if (self.text == null) return;
|
if (self.text == null) return;
|
||||||
|
|
||||||
|
|
|
@ -31,7 +31,7 @@ export class UserPreview {
|
||||||
}
|
}
|
||||||
|
|
||||||
private show() {
|
private show() {
|
||||||
if (!document.body.contains(this.el)) return;
|
if (!window.document.body.contains(this.el)) return;
|
||||||
if (this.promise) return;
|
if (this.promise) return;
|
||||||
|
|
||||||
const showing = ref(true);
|
const showing = ref(true);
|
||||||
|
@ -58,7 +58,7 @@ export class UserPreview {
|
||||||
};
|
};
|
||||||
|
|
||||||
this.checkTimer = window.setInterval(() => {
|
this.checkTimer = window.setInterval(() => {
|
||||||
if (!document.body.contains(this.el)) {
|
if (!window.document.body.contains(this.el)) {
|
||||||
window.clearTimeout(this.showTimer);
|
window.clearTimeout(this.showTimer);
|
||||||
window.clearTimeout(this.hideTimer);
|
window.clearTimeout(this.hideTimer);
|
||||||
this.close();
|
this.close();
|
||||||
|
|
|
@ -12,7 +12,7 @@ import { DEFAULT_INFO_IMAGE_URL, DEFAULT_NOT_FOUND_IMAGE_URL, DEFAULT_SERVER_ERR
|
||||||
// TODO: 他のタブと永続化されたstateを同期
|
// TODO: 他のタブと永続化されたstateを同期
|
||||||
|
|
||||||
//#region loader
|
//#region loader
|
||||||
const providedMetaEl = document.getElementById('misskey_meta');
|
const providedMetaEl = window.document.getElementById('misskey_meta');
|
||||||
|
|
||||||
let cachedMeta = miLocalStorage.getItem('instance') ? JSON.parse(miLocalStorage.getItem('instance')!) : null;
|
let cachedMeta = miLocalStorage.getItem('instance') ? JSON.parse(miLocalStorage.getItem('instance')!) : null;
|
||||||
let cachedAt = miLocalStorage.getItem('instanceCachedAt') ? parseInt(miLocalStorage.getItem('instanceCachedAt')!) : 0;
|
let cachedAt = miLocalStorage.getItem('instanceCachedAt') ? parseInt(miLocalStorage.getItem('instanceCachedAt')!) : 0;
|
||||||
|
|
|
@ -675,7 +675,7 @@ export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | n
|
||||||
src = null;
|
src = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
let returnFocusTo = getHTMLElementOrNull(src) ?? getHTMLElementOrNull(document.activeElement);
|
let returnFocusTo = getHTMLElementOrNull(src) ?? getHTMLElementOrNull(window.document.activeElement);
|
||||||
return new Promise(resolve => nextTick(() => {
|
return new Promise(resolve => nextTick(() => {
|
||||||
const { dispose } = popup(MkPopupMenu, {
|
const { dispose } = popup(MkPopupMenu, {
|
||||||
items,
|
items,
|
||||||
|
@ -704,7 +704,7 @@ export function contextMenu(items: MenuItem[], ev: MouseEvent): Promise<void> {
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
|
|
||||||
let returnFocusTo = getHTMLElementOrNull(ev.currentTarget ?? ev.target) ?? getHTMLElementOrNull(document.activeElement);
|
let returnFocusTo = getHTMLElementOrNull(ev.currentTarget ?? ev.target) ?? getHTMLElementOrNull(window.document.activeElement);
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
return new Promise(resolve => nextTick(() => {
|
return new Promise(resolve => nextTick(() => {
|
||||||
const { dispose } = popup(MkContextMenu, {
|
const { dispose } = popup(MkContextMenu, {
|
||||||
|
|
|
@ -120,7 +120,7 @@ function onTabClick(tab: Tab, ev: MouseEvent): void {
|
||||||
|
|
||||||
const calcBg = () => {
|
const calcBg = () => {
|
||||||
const rawBg = pageMetadata.value.bg ?? 'var(--MI_THEME-bg)';
|
const rawBg = pageMetadata.value.bg ?? 'var(--MI_THEME-bg)';
|
||||||
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(window.document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
|
||||||
tinyBg.setAlpha(0.85);
|
tinyBg.setAlpha(0.85);
|
||||||
bg.value = tinyBg.toRgbString();
|
bg.value = tinyBg.toRgbString();
|
||||||
};
|
};
|
||||||
|
|
|
@ -41,7 +41,7 @@ onMounted(() => {
|
||||||
labels: props.data.map(x => x.name),
|
labels: props.data.map(x => x.name),
|
||||||
datasets: [{
|
datasets: [{
|
||||||
backgroundColor: props.data.map(x => x.color),
|
backgroundColor: props.data.map(x => x.color),
|
||||||
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-panel'),
|
borderColor: getComputedStyle(window.document.documentElement).getPropertyValue('--MI_THEME-panel'),
|
||||||
borderWidth: 2,
|
borderWidth: 2,
|
||||||
hoverOffset: 0,
|
hoverOffset: 0,
|
||||||
data: props.data.map(x => x.value),
|
data: props.data.map(x => x.value),
|
||||||
|
|
|
@ -38,7 +38,7 @@ const emit = defineEmits<{
|
||||||
const app = computed(() => props.session.app);
|
const app = computed(() => props.session.app);
|
||||||
|
|
||||||
const name = computed(() => {
|
const name = computed(() => {
|
||||||
const el = document.createElement('div');
|
const el = window.document.createElement('div');
|
||||||
el.textContent = app.value.name;
|
el.textContent = app.value.name;
|
||||||
return el.innerHTML;
|
return el.innerHTML;
|
||||||
});
|
});
|
||||||
|
|
|
@ -875,7 +875,7 @@ function loadImage(url: string) {
|
||||||
|
|
||||||
function getGameImageDriveFile() {
|
function getGameImageDriveFile() {
|
||||||
return new Promise<Misskey.entities.DriveFile | null>(res => {
|
return new Promise<Misskey.entities.DriveFile | null>(res => {
|
||||||
const dcanvas = document.createElement('canvas');
|
const dcanvas = window.document.createElement('canvas');
|
||||||
dcanvas.width = game.GAME_WIDTH;
|
dcanvas.width = game.GAME_WIDTH;
|
||||||
dcanvas.height = game.GAME_HEIGHT;
|
dcanvas.height = game.GAME_HEIGHT;
|
||||||
const ctx = dcanvas.getContext('2d');
|
const ctx = dcanvas.getContext('2d');
|
||||||
|
|
|
@ -27,42 +27,42 @@ import MkPageWithAnimBg from '@/components/MkPageWithAnimBg.vue';
|
||||||
import { definePage } from '@/page.js';
|
import { definePage } from '@/page.js';
|
||||||
import MkAuthConfirm from '@/components/MkAuthConfirm.vue';
|
import MkAuthConfirm from '@/components/MkAuthConfirm.vue';
|
||||||
|
|
||||||
const transactionIdMeta = document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:transaction-id"]');
|
const transactionIdMeta = window.document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:transaction-id"]');
|
||||||
if (transactionIdMeta) {
|
if (transactionIdMeta) {
|
||||||
transactionIdMeta.remove();
|
transactionIdMeta.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
const name = document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:client-name"]')?.content;
|
const name = window.document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:client-name"]')?.content;
|
||||||
const logo = document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:client-logo"]')?.content;
|
const logo = window.document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:client-logo"]')?.content;
|
||||||
const permissions = document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:scope"]')?.content.split(' ').filter((p): p is typeof Misskey.permissions[number] => (Misskey.permissions as readonly string[]).includes(p)) ?? [];
|
const permissions = window.document.querySelector<HTMLMetaElement>('meta[name="misskey:oauth:scope"]')?.content.split(' ').filter((p): p is typeof Misskey.permissions[number] => (Misskey.permissions as readonly string[]).includes(p)) ?? [];
|
||||||
|
|
||||||
function doPost(token: string, decision: 'accept' | 'deny') {
|
function doPost(token: string, decision: 'accept' | 'deny') {
|
||||||
const form = document.createElement('form');
|
const form = window.document.createElement('form');
|
||||||
form.action = '/oauth/decision';
|
form.action = '/oauth/decision';
|
||||||
form.method = 'post';
|
form.method = 'post';
|
||||||
form.acceptCharset = 'utf-8';
|
form.acceptCharset = 'utf-8';
|
||||||
|
|
||||||
const loginToken = document.createElement('input');
|
const loginToken = window.document.createElement('input');
|
||||||
loginToken.type = 'hidden';
|
loginToken.type = 'hidden';
|
||||||
loginToken.name = 'login_token';
|
loginToken.name = 'login_token';
|
||||||
loginToken.value = token;
|
loginToken.value = token;
|
||||||
form.appendChild(loginToken);
|
form.appendChild(loginToken);
|
||||||
|
|
||||||
const transactionId = document.createElement('input');
|
const transactionId = window.document.createElement('input');
|
||||||
transactionId.type = 'hidden';
|
transactionId.type = 'hidden';
|
||||||
transactionId.name = 'transaction_id';
|
transactionId.name = 'transaction_id';
|
||||||
transactionId.value = transactionIdMeta?.content ?? '';
|
transactionId.value = transactionIdMeta?.content ?? '';
|
||||||
form.appendChild(transactionId);
|
form.appendChild(transactionId);
|
||||||
|
|
||||||
if (decision === 'deny') {
|
if (decision === 'deny') {
|
||||||
const cancel = document.createElement('input');
|
const cancel = window.document.createElement('input');
|
||||||
cancel.type = 'hidden';
|
cancel.type = 'hidden';
|
||||||
cancel.name = 'cancel';
|
cancel.name = 'cancel';
|
||||||
cancel.value = 'cancel';
|
cancel.value = 'cancel';
|
||||||
form.appendChild(cancel);
|
form.appendChild(cancel);
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.appendChild(form);
|
window.document.body.appendChild(form);
|
||||||
form.submit();
|
form.submit();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -160,7 +160,7 @@ async function tokenDone() {
|
||||||
function downloadBackupCodes() {
|
function downloadBackupCodes() {
|
||||||
if (backupCodes.value !== undefined) {
|
if (backupCodes.value !== undefined) {
|
||||||
const txtBlob = new Blob([backupCodes.value.join('\n')], { type: 'text/plain' });
|
const txtBlob = new Blob([backupCodes.value.join('\n')], { type: 'text/plain' });
|
||||||
const dummya = document.createElement('a');
|
const dummya = window.document.createElement('a');
|
||||||
dummya.href = URL.createObjectURL(txtBlob);
|
dummya.href = URL.createObjectURL(txtBlob);
|
||||||
dummya.download = `${$i.username}@${hostname}` + (port !== '' ? `_${port}` : '') + '-2fa-backup-codes.txt';
|
dummya.download = `${$i.username}@${hostname}` + (port !== '' ? `_${port}` : '') + '-2fa-backup-codes.txt';
|
||||||
dummya.click();
|
dummya.click();
|
||||||
|
|
|
@ -125,8 +125,8 @@ function syncBetweenTabs() {
|
||||||
|
|
||||||
window.setInterval(syncBetweenTabs, 5000);
|
window.setInterval(syncBetweenTabs, 5000);
|
||||||
|
|
||||||
document.addEventListener('visibilitychange', () => {
|
window.document.addEventListener('visibilitychange', () => {
|
||||||
if (document.visibilityState === 'visible') {
|
if (window.document.visibilityState === 'visible') {
|
||||||
syncBetweenTabs();
|
syncBetweenTabs();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -136,7 +136,7 @@ let latestBackupAt = 0;
|
||||||
window.setInterval(() => {
|
window.setInterval(() => {
|
||||||
if ($i == null) return;
|
if ($i == null) return;
|
||||||
if (!store.s.enablePreferencesAutoCloudBackup) return;
|
if (!store.s.enablePreferencesAutoCloudBackup) return;
|
||||||
if (document.visibilityState !== 'visible') return; // 同期されていない古い値がバックアップされるのを防ぐ
|
if (window.document.visibilityState !== 'visible') return; // 同期されていない古い値がバックアップされるのを防ぐ
|
||||||
if (prefer.profile.modifiedAt <= latestBackupAt) return;
|
if (prefer.profile.modifiedAt <= latestBackupAt) return;
|
||||||
|
|
||||||
cloudBackup().then(() => {
|
cloudBackup().then(() => {
|
||||||
|
|
|
@ -106,14 +106,14 @@ async function renameProfile() {
|
||||||
function exportCurrentProfile() {
|
function exportCurrentProfile() {
|
||||||
const p = prefer.profile;
|
const p = prefer.profile;
|
||||||
const txtBlob = new Blob([JSON.stringify(p)], { type: 'text/plain' });
|
const txtBlob = new Blob([JSON.stringify(p)], { type: 'text/plain' });
|
||||||
const dummya = document.createElement('a');
|
const dummya = window.document.createElement('a');
|
||||||
dummya.href = URL.createObjectURL(txtBlob);
|
dummya.href = URL.createObjectURL(txtBlob);
|
||||||
dummya.download = `${p.name || p.id}.misskeypreferences`;
|
dummya.download = `${p.name || p.id}.misskeypreferences`;
|
||||||
dummya.click();
|
dummya.click();
|
||||||
}
|
}
|
||||||
|
|
||||||
function importProfile() {
|
function importProfile() {
|
||||||
const input = document.createElement('input');
|
const input = window.document.createElement('input');
|
||||||
input.type = 'file';
|
input.type = 'file';
|
||||||
input.accept = '.misskeypreferences';
|
input.accept = '.misskeypreferences';
|
||||||
input.onchange = async () => {
|
input.onchange = async () => {
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
|
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
|
|
||||||
const providedContextEl = document.getElementById('misskey_clientCtx');
|
const providedContextEl = window.document.getElementById('misskey_clientCtx');
|
||||||
|
|
||||||
export type ServerContext = {
|
export type ServerContext = {
|
||||||
clip?: Misskey.entities.Clip;
|
clip?: Misskey.entities.Clip;
|
||||||
|
|
|
@ -29,10 +29,10 @@ export function useStream(): Misskey.IStream {
|
||||||
timeoutHeartBeat = window.setTimeout(heartbeat, HEART_BEAT_INTERVAL);
|
timeoutHeartBeat = window.setTimeout(heartbeat, HEART_BEAT_INTERVAL);
|
||||||
|
|
||||||
// send heartbeat right now when last send time is over HEART_BEAT_INTERVAL
|
// send heartbeat right now when last send time is over HEART_BEAT_INTERVAL
|
||||||
document.addEventListener('visibilitychange', () => {
|
window.document.addEventListener('visibilitychange', () => {
|
||||||
if (
|
if (
|
||||||
!stream
|
!stream
|
||||||
|| document.visibilityState !== 'visible'
|
|| window.document.visibilityState !== 'visible'
|
||||||
|| Date.now() - lastHeartbeatCall < HEART_BEAT_INTERVAL
|
|| Date.now() - lastHeartbeatCall < HEART_BEAT_INTERVAL
|
||||||
) return;
|
) return;
|
||||||
heartbeat();
|
heartbeat();
|
||||||
|
@ -42,7 +42,7 @@ export function useStream(): Misskey.IStream {
|
||||||
}
|
}
|
||||||
|
|
||||||
function heartbeat(): void {
|
function heartbeat(): void {
|
||||||
if (stream != null && document.visibilityState === 'visible') {
|
if (stream != null && window.document.visibilityState === 'visible') {
|
||||||
stream.heartbeat();
|
stream.heartbeat();
|
||||||
}
|
}
|
||||||
lastHeartbeatCall = Date.now();
|
lastHeartbeatCall = Date.now();
|
||||||
|
|
|
@ -68,10 +68,10 @@ let timeout: number | null = null;
|
||||||
export function applyTheme(theme: Theme, persist = true) {
|
export function applyTheme(theme: Theme, persist = true) {
|
||||||
if (timeout) window.clearTimeout(timeout);
|
if (timeout) window.clearTimeout(timeout);
|
||||||
|
|
||||||
document.documentElement.classList.add('_themeChanging_');
|
window.document.documentElement.classList.add('_themeChanging_');
|
||||||
|
|
||||||
timeout = window.setTimeout(() => {
|
timeout = window.setTimeout(() => {
|
||||||
document.documentElement.classList.remove('_themeChanging_');
|
window.document.documentElement.classList.remove('_themeChanging_');
|
||||||
|
|
||||||
// 色計算など再度行えるようにクライアント全体に通知
|
// 色計算など再度行えるようにクライアント全体に通知
|
||||||
globalEvents.emit('themeChanged');
|
globalEvents.emit('themeChanged');
|
||||||
|
@ -79,7 +79,7 @@ export function applyTheme(theme: Theme, persist = true) {
|
||||||
|
|
||||||
const colorScheme = theme.base === 'dark' ? 'dark' : 'light';
|
const colorScheme = theme.base === 'dark' ? 'dark' : 'light';
|
||||||
|
|
||||||
document.documentElement.dataset.colorScheme = colorScheme;
|
window.document.documentElement.dataset.colorScheme = colorScheme;
|
||||||
|
|
||||||
// Deep copy
|
// Deep copy
|
||||||
const _theme = deepClone(theme);
|
const _theme = deepClone(theme);
|
||||||
|
@ -91,7 +91,7 @@ export function applyTheme(theme: Theme, persist = true) {
|
||||||
|
|
||||||
const props = compile(_theme);
|
const props = compile(_theme);
|
||||||
|
|
||||||
for (const tag of document.head.children) {
|
for (const tag of window.document.head.children) {
|
||||||
if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
|
if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
|
||||||
tag.setAttribute('content', props['htmlThemeColor']);
|
tag.setAttribute('content', props['htmlThemeColor']);
|
||||||
break;
|
break;
|
||||||
|
@ -99,10 +99,10 @@ export function applyTheme(theme: Theme, persist = true) {
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const [k, v] of Object.entries(props)) {
|
for (const [k, v] of Object.entries(props)) {
|
||||||
document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
|
window.document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
document.documentElement.style.setProperty('color-scheme', colorScheme);
|
window.document.documentElement.style.setProperty('color-scheme', colorScheme);
|
||||||
|
|
||||||
if (persist) {
|
if (persist) {
|
||||||
miLocalStorage.setItem('theme', JSON.stringify(props));
|
miLocalStorage.setItem('theme', JSON.stringify(props));
|
||||||
|
|
|
@ -67,7 +67,7 @@ const dev = _DEV_;
|
||||||
const notifications = ref<Misskey.entities.Notification[]>([]);
|
const notifications = ref<Misskey.entities.Notification[]>([]);
|
||||||
|
|
||||||
function onNotification(notification: Misskey.entities.Notification, isClient = false) {
|
function onNotification(notification: Misskey.entities.Notification, isClient = false) {
|
||||||
if (document.visibilityState === 'visible') {
|
if (window.document.visibilityState === 'visible') {
|
||||||
if (!isClient && notification.type !== 'test') {
|
if (!isClient && notification.type !== 'test') {
|
||||||
// サーバーサイドのテスト通知の際は自動で既読をつけない(テストできないので)
|
// サーバーサイドのテスト通知の際は自動で既読をつけない(テストできないので)
|
||||||
useStream().send('readNotification');
|
useStream().send('readNotification');
|
||||||
|
|
|
@ -129,8 +129,8 @@ watch(store.r.menuDisplay, () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
function toggleIconOnly() {
|
function toggleIconOnly() {
|
||||||
if (document.startViewTransition && prefer.s.animation) {
|
if (window.document.startViewTransition && prefer.s.animation) {
|
||||||
document.startViewTransition(() => {
|
window.document.startViewTransition(() => {
|
||||||
store.set('menuDisplay', iconOnly.value ? 'sideFull' : 'sideIcon');
|
store.set('menuDisplay', iconOnly.value ? 'sideFull' : 'sideIcon');
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -87,9 +87,9 @@ provideMetadataReceiver((metadataGetter) => {
|
||||||
pageMetadata.value = info;
|
pageMetadata.value = info;
|
||||||
if (pageMetadata.value) {
|
if (pageMetadata.value) {
|
||||||
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
||||||
document.title = pageMetadata.value.title;
|
window.document.title = pageMetadata.value.title;
|
||||||
} else {
|
} else {
|
||||||
document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
window.document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -142,7 +142,7 @@ if (window.innerWidth < 1024) {
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
document.documentElement.style.overflowY = 'scroll';
|
window.document.documentElement.style.overflowY = 'scroll';
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
|
|
|
@ -202,8 +202,8 @@ function onWheel(ev: WheelEvent) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.documentElement.style.overflowY = 'hidden';
|
window.document.documentElement.style.overflowY = 'hidden';
|
||||||
document.documentElement.style.scrollBehavior = 'auto';
|
window.document.documentElement.style.scrollBehavior = 'auto';
|
||||||
|
|
||||||
async function deleteProfile() {
|
async function deleteProfile() {
|
||||||
if (prefer.s['deck.profile'] == null) return;
|
if (prefer.s['deck.profile'] == null) return;
|
||||||
|
|
|
@ -30,9 +30,9 @@ provideMetadataReceiver((metadataGetter) => {
|
||||||
pageMetadata.value = info;
|
pageMetadata.value = info;
|
||||||
if (pageMetadata.value) {
|
if (pageMetadata.value) {
|
||||||
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
||||||
document.title = pageMetadata.value.title;
|
window.document.title = pageMetadata.value.title;
|
||||||
} else {
|
} else {
|
||||||
document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
window.document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -143,9 +143,9 @@ provideMetadataReceiver((metadataGetter) => {
|
||||||
pageMetadata.value = info;
|
pageMetadata.value = info;
|
||||||
if (pageMetadata.value) {
|
if (pageMetadata.value) {
|
||||||
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
||||||
document.title = pageMetadata.value.title;
|
window.document.title = pageMetadata.value.title;
|
||||||
} else {
|
} else {
|
||||||
document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
window.document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -205,12 +205,12 @@ provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
|
||||||
watch(navFooter, () => {
|
watch(navFooter, () => {
|
||||||
if (navFooter.value) {
|
if (navFooter.value) {
|
||||||
navFooterHeight.value = navFooter.value.offsetHeight;
|
navFooterHeight.value = navFooter.value.offsetHeight;
|
||||||
document.body.style.setProperty('--MI-stickyBottom', `${navFooterHeight.value}px`);
|
window.document.body.style.setProperty('--MI-stickyBottom', `${navFooterHeight.value}px`);
|
||||||
document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
|
window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
|
||||||
} else {
|
} else {
|
||||||
navFooterHeight.value = 0;
|
navFooterHeight.value = 0;
|
||||||
document.body.style.setProperty('--MI-stickyBottom', '0px');
|
window.document.body.style.setProperty('--MI-stickyBottom', '0px');
|
||||||
document.body.style.setProperty('--MI-minBottomSpacing', '0px');
|
window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
|
|
|
@ -51,9 +51,9 @@ provideMetadataReceiver((metadataGetter) => {
|
||||||
pageMetadata.value = info;
|
pageMetadata.value = info;
|
||||||
if (pageMetadata.value) {
|
if (pageMetadata.value) {
|
||||||
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
||||||
document.title = pageMetadata.value.title;
|
window.document.title = pageMetadata.value.title;
|
||||||
} else {
|
} else {
|
||||||
document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
window.document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -45,9 +45,9 @@ provideMetadataReceiver((metadataGetter) => {
|
||||||
pageMetadata.value = info;
|
pageMetadata.value = info;
|
||||||
if (pageMetadata.value) {
|
if (pageMetadata.value) {
|
||||||
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
if (isRoot.value && pageMetadata.value.title === instanceName) {
|
||||||
document.title = pageMetadata.value.title;
|
window.document.title = pageMetadata.value.title;
|
||||||
} else {
|
} else {
|
||||||
document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
window.document.title = `${pageMetadata.value.title} | ${instanceName}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -86,7 +86,7 @@ export function useNoteCapture(props: {
|
||||||
function capture(withHandler = false): void {
|
function capture(withHandler = false): void {
|
||||||
if (connection) {
|
if (connection) {
|
||||||
// TODO: このノートがストリーミング経由で流れてきた場合のみ sr する
|
// TODO: このノートがストリーミング経由で流れてきた場合のみ sr する
|
||||||
connection.send(document.body.contains(props.rootEl.value ?? null as Node | null) ? 'sr' : 's', { id: note.value.id });
|
connection.send(window.document.body.contains(props.rootEl.value ?? null as Node | null) ? 'sr' : 's', { id: note.value.id });
|
||||||
if (pureNote.value.id !== note.value.id) connection.send('s', { id: pureNote.value.id });
|
if (pureNote.value.id !== note.value.id) connection.send('s', { id: pureNote.value.id });
|
||||||
if (withHandler) connection.on('noteUpdated', onStreamNoteUpdated);
|
if (withHandler) connection.on('noteUpdated', onStreamNoteUpdated);
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,7 +29,7 @@ export function useTooltip(
|
||||||
if (!isHovering) return;
|
if (!isHovering) return;
|
||||||
if (elRef.value == null) return;
|
if (elRef.value == null) return;
|
||||||
const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
|
const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
|
||||||
if (!document.body.contains(el)) return; // openしようとしたときに既に元要素がDOMから消えている場合があるため
|
if (!window.document.body.contains(el)) return; // openしようとしたときに既に元要素がDOMから消えている場合があるため
|
||||||
|
|
||||||
const showing = ref(true);
|
const showing = ref(true);
|
||||||
onShow(showing);
|
onShow(showing);
|
||||||
|
@ -38,7 +38,7 @@ export function useTooltip(
|
||||||
};
|
};
|
||||||
|
|
||||||
autoHidingTimer = window.setInterval(() => {
|
autoHidingTimer = window.setInterval(() => {
|
||||||
if (elRef.value == null || !document.body.contains(elRef.value instanceof Element ? elRef.value : elRef.value.$el)) {
|
if (elRef.value == null || !window.document.body.contains(elRef.value instanceof Element ? elRef.value : elRef.value.$el)) {
|
||||||
if (!isHovering) return;
|
if (!isHovering) return;
|
||||||
isHovering = false;
|
isHovering = false;
|
||||||
window.clearTimeout(timeoutId);
|
window.clearTimeout(timeoutId);
|
||||||
|
|
|
@ -50,7 +50,7 @@ function releaseFocusTrap(el: HTMLElement): void {
|
||||||
|
|
||||||
const highestZIndexElement = getHighestZIndexElement();
|
const highestZIndexElement = getHighestZIndexElement();
|
||||||
|
|
||||||
if (el.parentElement != null && el !== document.body) {
|
if (el.parentElement != null && el !== window.document.body) {
|
||||||
el.parentElement.childNodes.forEach((siblingNode) => {
|
el.parentElement.childNodes.forEach((siblingNode) => {
|
||||||
const siblingEl = getHTMLElementOrNull(siblingNode);
|
const siblingEl = getHTMLElementOrNull(siblingNode);
|
||||||
if (!siblingEl) return;
|
if (!siblingEl) return;
|
||||||
|
@ -104,7 +104,7 @@ export function focusTrap(el: HTMLElement, hasInteractionWithOtherFocusTrappedEl
|
||||||
el.inert = false;
|
el.inert = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (el.parentElement != null && el !== document.body) {
|
if (el.parentElement != null && el !== window.document.body) {
|
||||||
el.parentElement.childNodes.forEach((siblingNode) => {
|
el.parentElement.childNodes.forEach((siblingNode) => {
|
||||||
const siblingEl = getHTMLElementOrNull(siblingNode);
|
const siblingEl = getHTMLElementOrNull(siblingNode);
|
||||||
if (!siblingEl) return;
|
if (!siblingEl) return;
|
||||||
|
|
|
@ -58,7 +58,7 @@ export const focusParent = (input: MaybeHTMLElement | null | undefined, self = f
|
||||||
|
|
||||||
const focusOrScroll = (element: HTMLElement, scroll: boolean) => {
|
const focusOrScroll = (element: HTMLElement, scroll: boolean) => {
|
||||||
if (scroll) {
|
if (scroll) {
|
||||||
const scrollContainer = getScrollContainer(element) ?? document.documentElement;
|
const scrollContainer = getScrollContainer(element) ?? window.document.documentElement;
|
||||||
const scrollContainerTop = getScrollPosition(scrollContainer);
|
const scrollContainerTop = getScrollPosition(scrollContainer);
|
||||||
const stickyTop = getStickyTop(element, scrollContainer);
|
const stickyTop = getStickyTop(element, scrollContainer);
|
||||||
const stickyBottom = getStickyBottom(element, scrollContainer);
|
const stickyBottom = getStickyBottom(element, scrollContainer);
|
||||||
|
@ -74,7 +74,7 @@ const focusOrScroll = (element: HTMLElement, scroll: boolean) => {
|
||||||
scrollContainer.scrollTo({ top: scrollTo, behavior: 'instant' });
|
scrollContainer.scrollTo({ top: scrollTo, behavior: 'instant' });
|
||||||
}
|
}
|
||||||
|
|
||||||
if (document.activeElement !== element) {
|
if (window.document.activeElement !== element) {
|
||||||
element.focus({ preventScroll: true });
|
element.focus({ preventScroll: true });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -35,8 +35,8 @@ export const requestFullscreen = ({ videoEl, playerEl, options }: RequestFullscr
|
||||||
|
|
||||||
export const exitFullscreen = ({ videoEl }: ExitFullscreenProps) => {
|
export const exitFullscreen = ({ videoEl }: ExitFullscreenProps) => {
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||||
if (document.exitFullscreen != null) {
|
if (window.document.exitFullscreen != null) {
|
||||||
document.exitFullscreen();
|
window.document.exitFullscreen();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (videoEl.webkitExitFullscreen != null) {
|
if (videoEl.webkitExitFullscreen != null) {
|
||||||
|
|
|
@ -54,9 +54,9 @@ export const makeHotkey = (keymap: Keymap) => {
|
||||||
const actions = parseKeymap(keymap);
|
const actions = parseKeymap(keymap);
|
||||||
return (ev: KeyboardEvent) => {
|
return (ev: KeyboardEvent) => {
|
||||||
if ('pswp' in window && window.pswp != null) return;
|
if ('pswp' in window && window.pswp != null) return;
|
||||||
if (document.activeElement != null) {
|
if (window.document.activeElement != null) {
|
||||||
if (IGNORE_ELEMENTS.includes(document.activeElement.tagName.toLowerCase())) return;
|
if (IGNORE_ELEMENTS.includes(window.document.activeElement.tagName.toLowerCase())) return;
|
||||||
if (getHTMLElementOrNull(document.activeElement)?.isContentEditable) return;
|
if (getHTMLElementOrNull(window.document.activeElement)?.isContentEditable) return;
|
||||||
}
|
}
|
||||||
for (const action of actions) {
|
for (const action of actions) {
|
||||||
if (matchPatterns(ev, action)) {
|
if (matchPatterns(ev, action)) {
|
||||||
|
|
|
@ -50,7 +50,7 @@ export function initChart() {
|
||||||
);
|
);
|
||||||
|
|
||||||
// フォントカラー
|
// フォントカラー
|
||||||
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-fg');
|
Chart.defaults.color = getComputedStyle(window.document.documentElement).getPropertyValue('--MI_THEME-fg');
|
||||||
|
|
||||||
Chart.defaults.borderColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
Chart.defaults.borderColor = store.s.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,7 @@ export function physics(container: HTMLElement) {
|
||||||
// create renderer
|
// create renderer
|
||||||
const render = Matter.Render.create({
|
const render = Matter.Render.create({
|
||||||
engine: engine,
|
engine: engine,
|
||||||
//element: document.getElementById('debug'),
|
//element: window.document.getElementById('debug'),
|
||||||
options: {
|
options: {
|
||||||
width: containerWidth,
|
width: containerWidth,
|
||||||
height: containerHeight,
|
height: containerHeight,
|
||||||
|
|
|
@ -25,7 +25,7 @@ export function chooseFileFromPc(
|
||||||
const nameConverter = options?.nameConverter ?? (() => undefined);
|
const nameConverter = options?.nameConverter ?? (() => undefined);
|
||||||
|
|
||||||
return new Promise((res, rej) => {
|
return new Promise((res, rej) => {
|
||||||
const input = document.createElement('input');
|
const input = window.document.createElement('input');
|
||||||
input.type = 'file';
|
input.type = 'file';
|
||||||
input.multiple = multiple;
|
input.multiple = multiple;
|
||||||
input.onchange = () => {
|
input.onchange = () => {
|
||||||
|
|
|
@ -156,7 +156,7 @@ export class SnowfallEffect {
|
||||||
easing: 0.0005,
|
easing: 0.0005,
|
||||||
};
|
};
|
||||||
/**
|
/**
|
||||||
* @throws {Error} - Thrown when it fails to get WebGL context for the canvas
|
* @throws {Error} - Thrown when it fails to get WebGL context for the canvas
|
||||||
*/
|
*/
|
||||||
constructor(options: {
|
constructor(options: {
|
||||||
sakura?: boolean;
|
sakura?: boolean;
|
||||||
|
@ -172,7 +172,7 @@ export class SnowfallEffect {
|
||||||
const gl = canvas.getContext('webgl2', { antialias: true });
|
const gl = canvas.getContext('webgl2', { antialias: true });
|
||||||
if (gl == null) throw new Error('Failed to get WebGL context');
|
if (gl == null) throw new Error('Failed to get WebGL context');
|
||||||
|
|
||||||
document.body.append(canvas);
|
window.document.body.append(canvas);
|
||||||
|
|
||||||
this.canvas = canvas;
|
this.canvas = canvas;
|
||||||
this.gl = gl;
|
this.gl = gl;
|
||||||
|
@ -190,7 +190,7 @@ export class SnowfallEffect {
|
||||||
}
|
}
|
||||||
|
|
||||||
private initCanvas(): HTMLCanvasElement {
|
private initCanvas(): HTMLCanvasElement {
|
||||||
const canvas = document.createElement('canvas');
|
const canvas = window.document.createElement('canvas');
|
||||||
|
|
||||||
Object.assign(canvas.style, {
|
Object.assign(canvas.style, {
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
|
|
|
@ -226,7 +226,7 @@ export function createSourceNode(buffer: AudioBuffer, opts: {
|
||||||
* @param file ファイルのURL(ドライブIDではない)
|
* @param file ファイルのURL(ドライブIDではない)
|
||||||
*/
|
*/
|
||||||
export async function getSoundDuration(file: string): Promise<number> {
|
export async function getSoundDuration(file: string): Promise<number> {
|
||||||
const audioEl = document.createElement('audio');
|
const audioEl = window.document.createElement('audio');
|
||||||
audioEl.src = file;
|
audioEl.src = file;
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
const si = setInterval(() => {
|
const si = setInterval(() => {
|
||||||
|
@ -249,7 +249,7 @@ export function isMute(): boolean {
|
||||||
}
|
}
|
||||||
|
|
||||||
// noinspection RedundantIfStatementJS
|
// noinspection RedundantIfStatementJS
|
||||||
if (prefer.s['sound.useSoundOnlyWhenActive'] && document.visibilityState === 'hidden') {
|
if (prefer.s['sound.useSoundOnlyWhenActive'] && window.document.visibilityState === 'hidden') {
|
||||||
// ブラウザがアクティブな時のみサウンドを出力する
|
// ブラウザがアクティブな時のみサウンドを出力する
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ export class StickySidebar {
|
||||||
this.container = container;
|
this.container = container;
|
||||||
this.el = this.container.children[0] as HTMLElement;
|
this.el = this.container.children[0] as HTMLElement;
|
||||||
this.el.style.position = 'sticky';
|
this.el.style.position = 'sticky';
|
||||||
this.spacer = document.createElement('div');
|
this.spacer = window.document.createElement('div');
|
||||||
this.container.prepend(this.spacer);
|
this.container.prepend(this.spacer);
|
||||||
this.marginTop = marginTop;
|
this.marginTop = marginTop;
|
||||||
this.offsetTop = this.container.getBoundingClientRect().top;
|
this.offsetTop = this.container.getBoundingClientRect().top;
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
let isWebpSupportedCache: boolean | undefined;
|
let isWebpSupportedCache: boolean | undefined;
|
||||||
export function isWebpSupported() {
|
export function isWebpSupported() {
|
||||||
if (isWebpSupportedCache === undefined) {
|
if (isWebpSupportedCache === undefined) {
|
||||||
const canvas = document.createElement('canvas');
|
const canvas = window.document.createElement('canvas');
|
||||||
canvas.width = 1;
|
canvas.width = 1;
|
||||||
canvas.height = 1;
|
canvas.height = 1;
|
||||||
isWebpSupportedCache = canvas.toDataURL('image/webp').startsWith('data:image/webp');
|
isWebpSupportedCache = canvas.toDataURL('image/webp').startsWith('data:image/webp');
|
||||||
|
|
|
@ -77,7 +77,7 @@ const fetchEndpoint = computed(() => {
|
||||||
const intervalClear = ref<(() => void) | undefined>();
|
const intervalClear = ref<(() => void) | undefined>();
|
||||||
|
|
||||||
const tick = () => {
|
const tick = () => {
|
||||||
if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
|
if (window.document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
|
||||||
|
|
||||||
window.fetch(fetchEndpoint.value, {})
|
window.fetch(fetchEndpoint.value, {})
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
|
|
|
@ -108,7 +108,7 @@ const intervalClear = ref<(() => void) | undefined>();
|
||||||
const key = ref(0);
|
const key = ref(0);
|
||||||
|
|
||||||
const tick = () => {
|
const tick = () => {
|
||||||
if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
|
if (window.document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
|
||||||
|
|
||||||
window.fetch(fetchEndpoint.value, {})
|
window.fetch(fetchEndpoint.value, {})
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
|
|
|
@ -12,10 +12,10 @@ describe('Scroll', () => {
|
||||||
/* 動作しない(happy-domのバグ?)
|
/* 動作しない(happy-domのバグ?)
|
||||||
test('Initial onScrollTop callback for connected elements', () => {
|
test('Initial onScrollTop callback for connected elements', () => {
|
||||||
const { document } = new Window();
|
const { document } = new Window();
|
||||||
const div = document.createElement('div');
|
const div = window.document.createElement('div');
|
||||||
assert.strictEqual(div.scrollTop, 0);
|
assert.strictEqual(div.scrollTop, 0);
|
||||||
|
|
||||||
document.body.append(div);
|
window.document.body.append(div);
|
||||||
|
|
||||||
let called = false;
|
let called = false;
|
||||||
onScrollTop(div as any as HTMLElement, () => called = true);
|
onScrollTop(div as any as HTMLElement, () => called = true);
|
||||||
|
@ -26,7 +26,7 @@ describe('Scroll', () => {
|
||||||
|
|
||||||
test('No onScrollTop callback for disconnected elements', () => {
|
test('No onScrollTop callback for disconnected elements', () => {
|
||||||
const { document } = new Window();
|
const { document } = new Window();
|
||||||
const div = document.createElement('div');
|
const div = window.document.createElement('div');
|
||||||
assert.strictEqual(div.scrollTop, 0);
|
assert.strictEqual(div.scrollTop, 0);
|
||||||
|
|
||||||
let called = false;
|
let called = false;
|
||||||
|
@ -40,10 +40,10 @@ describe('Scroll', () => {
|
||||||
/* 動作しない(happy-domのバグ?)
|
/* 動作しない(happy-domのバグ?)
|
||||||
test('Initial onScrollBottom callback for connected elements', () => {
|
test('Initial onScrollBottom callback for connected elements', () => {
|
||||||
const { document } = new Window();
|
const { document } = new Window();
|
||||||
const div = document.createElement('div');
|
const div = window.document.createElement('div');
|
||||||
assert.strictEqual(div.scrollTop, 0);
|
assert.strictEqual(div.scrollTop, 0);
|
||||||
|
|
||||||
document.body.append(div);
|
window.document.body.append(div);
|
||||||
|
|
||||||
let called = false;
|
let called = false;
|
||||||
onScrollBottom(div as any as HTMLElement, () => called = true);
|
onScrollBottom(div as any as HTMLElement, () => called = true);
|
||||||
|
@ -54,7 +54,7 @@ describe('Scroll', () => {
|
||||||
|
|
||||||
test('No onScrollBottom callback for disconnected elements', () => {
|
test('No onScrollBottom callback for disconnected elements', () => {
|
||||||
const { document } = new Window();
|
const { document } = new Window();
|
||||||
const div = document.createElement('div');
|
const div = window.document.createElement('div');
|
||||||
assert.strictEqual(div.scrollTop, 0);
|
assert.strictEqual(div.scrollTop, 0);
|
||||||
|
|
||||||
let called = false;
|
let called = false;
|
||||||
|
|
Loading…
Reference in New Issue