From 2250e521e4bcfa1b162cd46091da1bead5abcac0 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 19 Oct 2024 18:02:09 +0900
Subject: refactor(frontend): getBgColorを共通化 (#14782)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: getBgColor関数の切り出し + fix types (taiyme#291)

* move thing

* revert unnecesary changes

---------

Co-authored-by: taiy <53635909+taiyme@users.noreply.github.com>
---
 packages/frontend/src/directives/adaptive-bg.ts     | 12 ++----------
 packages/frontend/src/directives/adaptive-border.ts | 12 ++----------
 packages/frontend/src/directives/panel.ts           | 12 ++----------
 3 files changed, 6 insertions(+), 30 deletions(-)

(limited to 'packages/frontend/src/directives')

diff --git a/packages/frontend/src/directives/adaptive-bg.ts b/packages/frontend/src/directives/adaptive-bg.ts
index 45891de889..f88996019f 100644
--- a/packages/frontend/src/directives/adaptive-bg.ts
+++ b/packages/frontend/src/directives/adaptive-bg.ts
@@ -4,19 +4,11 @@
  */
 
 import { Directive } from 'vue';
+import { getBgColor } from '@/scripts/get-bg-color.js';
 
 export default {
 	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
-			const style = window.getComputedStyle(el);
-			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
-				return style.backgroundColor;
-			} else {
-				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
-			}
-		};
-
-		const parentBg = getBgColor(src.parentElement);
+		const parentBg = getBgColor(src.parentElement) ?? 'transparent';
 
 		const myBg = window.getComputedStyle(src).backgroundColor;
 
diff --git a/packages/frontend/src/directives/adaptive-border.ts b/packages/frontend/src/directives/adaptive-border.ts
index 685ca38e96..1305f312bd 100644
--- a/packages/frontend/src/directives/adaptive-border.ts
+++ b/packages/frontend/src/directives/adaptive-border.ts
@@ -4,19 +4,11 @@
  */
 
 import { Directive } from 'vue';
+import { getBgColor } from '@/scripts/get-bg-color.js';
 
 export default {
 	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
-			const style = window.getComputedStyle(el);
-			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
-				return style.backgroundColor;
-			} else {
-				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
-			}
-		};
-
-		const parentBg = getBgColor(src.parentElement);
+		const parentBg = getBgColor(src.parentElement) ?? 'transparent';
 
 		const myBg = window.getComputedStyle(src).backgroundColor;
 
diff --git a/packages/frontend/src/directives/panel.ts b/packages/frontend/src/directives/panel.ts
index 7b5969c679..aa26b94d0b 100644
--- a/packages/frontend/src/directives/panel.ts
+++ b/packages/frontend/src/directives/panel.ts
@@ -4,19 +4,11 @@
  */
 
 import { Directive } from 'vue';
+import { getBgColor } from '@/scripts/get-bg-color.js';
 
 export default {
 	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
-			const style = window.getComputedStyle(el);
-			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
-				return style.backgroundColor;
-			} else {
-				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
-			}
-		};
-
-		const parentBg = getBgColor(src.parentElement);
+		const parentBg = getBgColor(src.parentElement) ?? 'transparent';
 
 		const myBg = getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-panel');
 
-- 
cgit v1.2.3-freya