diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-28 09:32:22 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-28 09:32:22 +0900 |
| commit | 13677ff2b0b14d715a65f2922d06f88efb4ba253 (patch) | |
| tree | df0de1d4aa8b0667e71afa46dbeb1496fa8be4af /packages/frontend/src/directives | |
| parent | update es version (diff) | |
| download | misskey-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.ts | 2 | ||||
| -rw-r--r-- | packages/frontend/src/directives/size.ts | 123 |
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>; |