summaryrefslogtreecommitdiff
path: root/packages/frontend/src/directives
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2022-12-28 09:32:22 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2022-12-28 09:32:22 +0900
commit13677ff2b0b14d715a65f2922d06f88efb4ba253 (patch)
treedf0de1d4aa8b0667e71afa46dbeb1496fa8be4af /packages/frontend/src/directives
parentupdate es version (diff)
downloadmisskey-13677ff2b0b14d715a65f2922d06f88efb4ba253.tar.gz
misskey-13677ff2b0b14d715a65f2922d06f88efb4ba253.tar.bz2
misskey-13677ff2b0b14d715a65f2922d06f88efb4ba253.zip
remove v-size directive
Diffstat (limited to 'packages/frontend/src/directives')
-rw-r--r--packages/frontend/src/directives/index.ts2
-rw-r--r--packages/frontend/src/directives/size.ts123
2 files changed, 0 insertions, 125 deletions
diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts
index 401a917cba..93d1b4f43d 100644
--- a/packages/frontend/src/directives/index.ts
+++ b/packages/frontend/src/directives/index.ts
@@ -1,7 +1,6 @@
import { App } from 'vue';
import userPreview from './user-preview';
-import size from './size';
import getSize from './get-size';
import ripple from './ripple';
import tooltip from './tooltip';
@@ -15,7 +14,6 @@ import adaptiveBorder from './adaptive-border';
export default function(app: App) {
app.directive('userPreview', userPreview);
app.directive('user-preview', userPreview);
- app.directive('size', size);
app.directive('get-size', getSize);
app.directive('ripple', ripple);
app.directive('tooltip', tooltip);
diff --git a/packages/frontend/src/directives/size.ts b/packages/frontend/src/directives/size.ts
deleted file mode 100644
index da8bd78ea1..0000000000
--- a/packages/frontend/src/directives/size.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Directive } from 'vue';
-
-type Value = { max?: number[]; min?: number[]; };
-
-//const observers = new Map<Element, ResizeObserver>();
-const mountings = new Map<Element, {
- value: Value;
- resize: ResizeObserver;
- intersection?: IntersectionObserver;
- previousWidth: number;
- twoPreviousWidth: number;
-}>();
-
-type ClassOrder = {
- add: string[];
- remove: string[];
-};
-
-const isContainerQueriesSupported = ('container' in document.documentElement.style);
-
-const cache = new Map<string, ClassOrder>();
-
-function getClassOrder(width: number, queue: Value): ClassOrder {
- const getMaxClass = (v: number) => `max-width_${v}px`;
- const getMinClass = (v: number) => `min-width_${v}px`;
-
- return {
- add: [
- ...(queue.max ? queue.max.filter(v => width <= v).map(getMaxClass) : []),
- ...(queue.min ? queue.min.filter(v => width >= v).map(getMinClass) : []),
- ],
- remove: [
- ...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
- ...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
- ],
- };
-}
-
-function applyClassOrder(el: Element, order: ClassOrder) {
- el.classList.add(...order.add);
- el.classList.remove(...order.remove);
-}
-
-function getOrderName(width: number, queue: Value): string {
- return `${width}|${queue.max ? queue.max.join(',') : ''}|${queue.min ? queue.min.join(',') : ''}`;
-}
-
-function calc(el: Element) {
- const info = mountings.get(el);
- const width = el.clientWidth;
-
- if (!info || info.previousWidth === width) return;
-
- // アクティベート前などでsrcが描画されていない場合
- if (!width) {
- // IntersectionObserverで表示検出する
- if (!info.intersection) {
- info.intersection = new IntersectionObserver(entries => {
- if (entries.some(entry => entry.isIntersecting)) calc(el);
- });
- }
- info.intersection.observe(el);
- return;
- }
- if (info.intersection) {
- info.intersection.disconnect();
- delete info.intersection;
- }
-
- mountings.set(el, { ...info, ...{ previousWidth: width, twoPreviousWidth: info.previousWidth }});
-
- // Prevent infinite resizing
- // https://github.com/misskey-dev/misskey/issues/9076
- if (info.twoPreviousWidth === width) {
- return;
- }
-
- const cached = cache.get(getOrderName(width, info.value));
- if (cached) {
- applyClassOrder(el, cached);
- } else {
- const order = getClassOrder(width, info.value);
- cache.set(getOrderName(width, info.value), order);
- applyClassOrder(el, order);
- }
-}
-
-export default {
- mounted(src, binding, vn) {
- if (isContainerQueriesSupported) return;
-
- const resize = new ResizeObserver((entries, observer) => {
- calc(src);
- });
-
- mountings.set(src, {
- value: binding.value,
- resize,
- previousWidth: 0,
- twoPreviousWidth: 0,
- });
-
- calc(src);
- resize.observe(src);
- },
-
- updated(src, binding, vn) {
- if (isContainerQueriesSupported) return;
-
- mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
- calc(src);
- },
-
- unmounted(src, binding, vn) {
- if (isContainerQueriesSupported) return;
-
- const info = mountings.get(src);
- if (!info) return;
- info.resize.disconnect();
- if (info.intersection) info.intersection.disconnect();
- mountings.delete(src);
- },
-} as Directive<Element, Value>;