From 824cd182bb420aae4c4cffb40d932598324bc325 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Fri, 26 Feb 2021 21:53:16 +0900
Subject: [PATCH] Add color plugin

---
 frontend/components/label/LabelList.vue |  7 +------
 frontend/nuxt.config.js                 |  3 ++-
 frontend/plugins/color.ts               | 16 ++++++++++++++++
 3 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 frontend/plugins/color.ts

diff --git a/frontend/components/label/LabelList.vue b/frontend/components/label/LabelList.vue
index 9acc30f7..8d43b475 100644
--- a/frontend/components/label/LabelList.vue
+++ b/frontend/components/label/LabelList.vue
@@ -64,7 +64,7 @@
     <template v-slot:[`item.background_color`]="props">
       <v-chip
         :color="props.item.background_color"
-        :text-color="textColor(props.item.background_color)"
+        :text-color="$contrastColor(props.item.background_color)"
       >
         {{ props.item.background_color }}
       </v-chip>
@@ -87,7 +87,6 @@ import ActionMenu from './ActionMenu.vue'
 import FormCreate from './FormCreate.vue'
 import FormDelete from './FormDelete.vue'
 import FormUpload from './FormUpload.vue'
-import { idealColor } from '~/plugins/utils'
 
 export default Vue.extend({
   components: {
@@ -200,10 +199,6 @@ export default Vue.extend({
         this.create(this.editedItem)
       }
       this.close()
-    },
-
-    textColor(backgroundColor: string) {
-      return idealColor(backgroundColor)
     }
   }  
 })
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 6e6799b0..a8ff29c4 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -51,7 +51,8 @@ export default {
     '~/plugins/filters.js',
     '~/plugins/vue-youtube.js',
     '~/plugins/vue-shortkey.js',
-    '~/plugins/services.ts'
+    '~/plugins/services.ts',
+    '~/plugins/color.ts'
   ],
   /*
   ** Nuxt.js modules
diff --git a/frontend/plugins/color.ts b/frontend/plugins/color.ts
new file mode 100644
index 00000000..05b91a1f
--- /dev/null
+++ b/frontend/plugins/color.ts
@@ -0,0 +1,16 @@
+import Vue from 'vue'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $contrastColor(hexString: string): string
+  }
+}
+
+Vue.prototype.$contrastColor = (hexString: string) => {
+    // W3c offers a formula for calculating ideal color:
+  // https://www.w3.org/TR/AERT/#color-contrast
+  const r = parseInt(hexString.substr(1, 2), 16)
+  const g = parseInt(hexString.substr(3, 2), 16)
+  const b = parseInt(hexString.substr(5, 2), 16)
+  return ((((r * 299) + (g * 587) + (b * 114)) / 1000) < 128) ? '#ffffff' : '#000000'
+}