From bd828bb072a57ee60352c8836f7bbab3bf1dbe96 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 10 Feb 2020 03:13:22 +0900
Subject: [PATCH] Better resize observe
---
package.json | 1 +
src/client/directives/size.ts | 13 +++++++++----
yarn.lock | 5 +++++
3 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/package.json b/package.json
index 0a864c8de6..998c160eb5 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"@fortawesome/free-regular-svg-icons": "5.12.0",
"@fortawesome/free-solid-svg-icons": "5.12.0",
"@fortawesome/vue-fontawesome": "0.1.9",
+ "@juggle/resize-observer": "3.0.2",
"@koa/cors": "3.0.0",
"@koa/multer": "2.0.2",
"@koa/router": "8.0.6",
diff --git a/src/client/directives/size.ts b/src/client/directives/size.ts
index 7c4254566c..140cb0bd70 100644
--- a/src/client/directives/size.ts
+++ b/src/client/directives/size.ts
@@ -1,3 +1,5 @@
+import { ResizeObserver } from '@juggle/resize-observer';
+
export default {
inserted(el, binding, vn) {
const query = binding.value;
@@ -52,13 +54,16 @@ export default {
calc();
- el._sizeResizeCb_ = calc;
+ const ro = new ResizeObserver((entries, observer) => {
+ calc();
+ });
+
+ ro.observe(el);
- window.addEventListener('resize', calc);
- vn.context.$on('hook:activated', calc);
+ el._ro_ = ro;
},
unbind(el, binding, vn) {
- window.removeEventListener('resize', el._sizeResizeCb_);
+ el._ro_.unobserve(el);
}
};
diff --git a/yarn.lock b/yarn.lock
index de870e0f69..232e092cdb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -102,6 +102,11 @@
normalize-path "^2.0.1"
through2 "^2.0.3"
+"@juggle/resize-observer@3.0.2":
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.0.2.tgz#f4f326806826c0da5221411374e4c54902c327bb"
+ integrity sha512-9fEfZIxZ1qTahMSX50pigfSJ/1N6X2oABhmgd4Dt2SsPkZi0lTlvoHu5V2yrGZ6m+oALfS4tJrpx9nbVIxwOYQ==
+
"@koa/cors@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@koa/cors/-/cors-3.0.0.tgz#df021b4df2dadf1e2b04d7c8ddf93ba2d42519cb"