Merge branch 'development' of https://github.com/KucingOyenBarbar/sma…

…rtnation.id into development
FarhannDev · Nov 2, 2023 · 9f58874 · 9f58874
2 parents 2b70a72 + da2aa61
commit 9f58874
Show file tree

Hide file tree

Showing 2 changed files with 150 additions and 34 deletions.
diff --git a/components/translate/GoogleTranslateButtonFixed.vue b/components/translate/GoogleTranslateButtonFixed.vue
@@ -1,21 +1,20 @@
 <template>
-  <div>
-    <div :class="colorSchemeClass">
-      <div id="google_translate_element"></div>
-    </div>
+  <div :class="colorSchemeClass">
+    <div id="google_translate_element"></div>
   </div>
 </template>
 
 <script>
 export default {
   computed: {
     colorSchemeClass() {
-      if (process.client) {
+      if (this.isScrolled && process.client) {
         return window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark-mode"
-          : "light-mode";
+          ? "light-mode"
+          : "dark-mode";
+      } else {
+        return this.initialMode;
       }
-      return ""; // Return an empty class on the server-side
     },
   },
   mounted() {
@@ -31,7 +30,7 @@ export default {
       window.googleTranslateElementInit = () => {
         new window.google.translate.TranslateElement(
           {
-            pageLanguage: "id, en", // Set bahasa default menjadi ID
+            pageLanguage: "id, en",
             layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
             includedLanguages: "en,id",
           },
@@ -58,7 +57,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 /* CSS untuk mode terang */
 
 .light-mode .goog-te-gadget-icon {
@@ -112,7 +111,6 @@ export default {
 .light-mode .VIpgJd-ZVi9od-xl07Ob-lTBxed {
   margin: 0 !important;
   margin-left: 3px !important;
-  top: -40px !important;
 }
 
 .light-mode .VIpgJd-ZVi9od-xl07Ob-lTBxed::before {
@@ -136,11 +134,9 @@ export default {
     margin-right: 4px !important;
     margin-left: 0 !important;
   }
-
   /* CSS untuk mengganti teks "Pilih Bahasa" menjadi "ID/EN" */
   .google_translate_element select.goog-te-combo {
-    font-size: 0;
-    /* Mengatur ukuran font ke 0 untuk menyembunyikan teks asli */
+    font-size: 0; /* Mengatur ukuran font ke 0 untuk menyembunyikan teks asli */
   }
 
   .google_translate_element select.goog-te-combo option[value="id"]::before {
@@ -158,11 +154,11 @@ export default {
   .google_translate_element {
     background: transparent !important;
     position: static;
-    /* top: 0; */
+    top: 0;
     right: 0;
     left: 0;
     transform: scale(0.9);
-    /* z-index: 1000; */
+    z-index: 1000;
   }
 
   .goog-te-gadget-simple {
@@ -173,30 +169,13 @@ export default {
 
   .VIpgJd-ZVi9od-xl07Ob-lTBxed span {
     display: none;
-    top: -40px !important;
   }
 
   .VIpgJd-ZVi9od-xl07Ob-lTBxed {
     margin: 0 !important;
     margin-left: 3px !important;
-    top: -40px !important;
-  }
-  .VIpgJd-ZVi9od-ORHb-OEVmcd{
-    top: -40px !important;
-  }
-
-  .VIpgJd-ZVi9od-ORHb {
-    top: -40px !important;
   }
 
-  .goog-te-banner-frame.skiptranslate {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.goog-te-banner-frame {
-  display: none !important;
-}
   .VIpgJd-ZVi9od-xl07Ob-lTBxed::before {
     color: #e7e7e7 !important;
     font-size: 14px;
@@ -205,7 +184,6 @@ export default {
     line-height: 120%;
     margin-left: 3px;
     content: "ID";
-    top: -40px !important;
   }
 }
 .translated-ltr{

diff --git a/components/translate/GoogleTranslateButtonMobile.vue b/components/translate/GoogleTranslateButtonMobile.vue
@@ -0,0 +1,138 @@
+<!-- <template>
+  <div :class="colorSchemeClass">
+    <div id="google_translate_element"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    colorSchemeClass() {
+      if (this.isScrolled && process.client) {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "light-mode"
+          : "dark-mode";
+      } else {
+        return this.initialMode;
+      }
+    },
+  },
+  mounted() {
+    if (process.client) {
+      // Load the Google Translate script
+      const script = document.createElement("script");
+      script.src =
+        "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
+      script.type = "text/javascript";
+      document.body.appendChild(script);
+
+      // Initialize the Google Translate button
+      window.googleTranslateElementInit = () => {
+        new window.google.translate.TranslateElement(
+          {
+            pageLanguage: "id, en",
+            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+            includedLanguages: "en,id",
+          },
+          "google_translate_element"
+        );
+
+        // Menghapus teks "Pilih Bahasa"
+        const dropdownContainer = document.querySelector(".goog-te-combo");
+        if (dropdownContainer) {
+          dropdownContainer.addEventListener("DOMNodeInserted", () => {
+            const options = dropdownContainer.querySelectorAll("option");
+            options.forEach((option) => {
+              if (option.value === "id") {
+                option.textContent = "ID";
+              } else if (option.value === "en") {
+                option.textContent = "EN";
+              }
+            });
+          });
+        }
+      };
+    }
+  },
+};
+</script>
+
+<style>
+@media (min-width: 1200px) {
+  .goog-te-gadget-icon { 
+    display: none;
+  }
+  .VIpgJd-ZVi9od-xl07Ob-lTBxed::before{
+    display: none;
+  }
+  .VIpgJd-ZVi9od-xl07Ob-lTBxed{
+    display: none;
+  }
+}
+@media (max-width: 1200px) {
+  /* CSS untuk mode terang */
+  .light-mode .goog-te-gadget-icon {
+    width: 22px !important;
+    height: 22px !important;
+    background-size: 25px 25px !important;
+    margin-right: 4px !important;
+    margin-left: 0 !important;
+  }
+
+  .light-mode .goog-te-gadget-simple {
+    padding: 0 !important;
+    border: 0 !important;
+    background: transparent !important;
+  }
+
+  .light-mode .VIpgJd-ZVi9od-xl07Ob-lTBxed span {
+    display: none;
+  }
+
+  .light-mode .VIpgJd-ZVi9od-xl07Ob-lTBxed {
+    margin: 0 !important;
+  }
+
+  .light-mode .VIpgJd-ZVi9od-xl07Ob-lTBxed::before {
+    color: #5d5d5d !important;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%;
+    margin-left: 3px;
+    content: "Translate";
+  }
+  /* CSS untuk mode gelap */
+  .dark-mode .goog-te-gadget-icon {
+    width: 22px !important;
+    height: 22px !important;
+    background-size: 25px 25px !important;
+    margin-right: 4px !important;
+    margin-left: 0 !important;
+  }
+
+  .dark-mode .goog-te-gadget-simple {
+    padding: 0 !important;
+    border: 0 !important;
+    background: transparent !important;
+  }
+
+  .dark-mode .VIpgJd-ZVi9od-xl07Ob-lTBxed span {
+    display: none;
+  }
+
+  .dark-mode .VIpgJd-ZVi9od-xl07Ob-lTBxed {
+    margin: 0 !important;
+  }
+
+  .dark-mode .VIpgJd-ZVi9od-xl07Ob-lTBxed::before {
+    color: #e7e7e7 !important;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 120%;
+    margin-left: 3px;
+    content: "Translate";
+  }
+}
+</style> -->