From 127447eeaf9eca4794227cb77d0c5952270a2a67 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Tue, 24 Sep 2024 13:36:54 +0300
Subject: [PATCH] color contrast

---
 components/calcValues.vue | 24 ++++++++++++++++++------
 nuxt.config.ts            |  2 +-
 pages/calc.vue            |  2 +-
 utils/contrast_color.ts   | 18 ++++++++++++++++++
 4 files changed, 38 insertions(+), 8 deletions(-)
 create mode 100644 utils/contrast_color.ts

diff --git a/components/calcValues.vue b/components/calcValues.vue
index c0c6787..e4b39cb 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { getColorNameFromRal } from '@/components/ral'
+import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
+import { Color } from 'three';
 
 import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';
 
@@ -56,6 +57,9 @@ const form_refs = {
     total_length: ref(),
 }
 
+const lamelle_text = ref(contrastColor(lamelle_color.value))
+const pillar_text = ref(contrastColor(pillar_color.value))
+
 const changeParametres = () => {
     // console.log('form', form_state.total_length * 1000, 'copy', copy_form_state.total_length * 1000)
 
@@ -130,11 +134,14 @@ const changeParametres = () => {
     goal('calc_fence', form_state)
 }
 
+
 const setLamelleColor = (color: ralTypes) => {
-    lamelle_color.value = color
+    lamelle_color.value = color;
+    lamelle_text.value = contrastColor(color) ?? '#000'
 }
 const setPillarColor = (color: ralTypes) => {
     pillar_color.value = color
+    pillar_text.value = contrastColor(color) ?? '#000'
 }
 watch(() => form_state, changeParametres, { deep: true })
 
@@ -202,7 +209,7 @@ const calc_table = computed(() => {
                     <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
                     <label for="auto_length">Автоматический подбор секции</label>
                 </div>
-                <p v-if="form_state.extra_section" class="text-ioprim text-sm">
+                <p v-if="!form_state.auto_length" class="text-ioprim text-sm">
                     Рекомендуем вам включить автоподбор длины секции
                 </p>
 
@@ -217,13 +224,18 @@ const calc_table = computed(() => {
                 <div class="form-item form-item_color">
                     <label for="lamelle_color">Цвет ламелей</label>
                     <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" class="w-60"
-                        disabled />
+                        :style="{
+                            backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
+                            color: lamelle_text
+                        }" disabled />
                     <ColorPicker :cb="setLamelleColor" />
                 </div>
                 <div class="form-item form-item_color">
                     <label for="pillar_color">Цвет столба</label>
-                    <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
-                        disabled />
+                    <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
+                        backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
+                        color: pillar_text
+                    }" class="w-60" disabled />
                     <ColorPicker :cb="setPillarColor" />
                 </div>
             </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 42374cd..eb555f3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     '/index.php': { redirect: '/' },
   },
   nitro: {
-    minify: false,
+    // minify: false,
     prerender: {
       crawlLinks: false
     },
diff --git a/pages/calc.vue b/pages/calc.vue
index 9e21708..d7fa318 100644
--- a/pages/calc.vue
+++ b/pages/calc.vue
@@ -2,7 +2,7 @@
     <div class="siteblock siteblock_calc bg-white">
         <CalcValues />
         <Suspense>
-            <CalcModels />
+            <LazyCalcModels />
         </Suspense>
     </div>
 </template>
\ No newline at end of file
diff --git a/utils/contrast_color.ts b/utils/contrast_color.ts
new file mode 100644
index 0000000..2f3e908
--- /dev/null
+++ b/utils/contrast_color.ts
@@ -0,0 +1,18 @@
+import { Color } from 'three';
+import { type ralTypes } from './../components/ral';
+import { getColorHexFromRal } from "~/components/ral"
+
+export const contrastColor = (color: ralTypes) => {
+    const hex = getColorHexFromRal(color)
+    if (hex) {
+        const hsl = { h: 0, s: 0, l: 0 }
+        new Color(hex).getHSL(hsl)
+        if (hsl.l < 0.5) {
+            return '#fff'
+        } else {
+            return '#000'
+        }
+    } else {
+        return '#000'
+    }
+}
\ No newline at end of file