From 22a04bfcaa1324bf94ad81bbd8c1387eb772a964 Mon Sep 17 00:00:00 2001
From: maxlkatze <git@cubedpixels.net>
Date: Sat, 27 Jul 2024 11:10:24 +0200
Subject: [PATCH] fix(katzencore): Added mobile / desktop view switch

---
 src/runtime/assets/icons/desktop.svg      |  15 +
 src/runtime/assets/icons/phone.svg        |  15 +
 src/runtime/components/views/EditView.vue | 507 +++++++++++++---------
 3 files changed, 321 insertions(+), 216 deletions(-)
 create mode 100644 src/runtime/assets/icons/desktop.svg
 create mode 100644 src/runtime/assets/icons/phone.svg

diff --git a/src/runtime/assets/icons/desktop.svg b/src/runtime/assets/icons/desktop.svg
new file mode 100644
index 0000000..2eb34a2
--- /dev/null
+++ b/src/runtime/assets/icons/desktop.svg
@@ -0,0 +1,15 @@
+<svg width="677" height="677" viewBox="0 0 677 677" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_43_45)">
+<mask id="mask0_43_45" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="677" height="677">
+<rect width="677" height="677" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_43_45)">
+<path d="M28.208 592.375V535.958H648.791V592.375H28.208ZM112.833 507.75C97.3184 507.75 84.037 502.226 72.9887 491.178C61.9405 480.129 56.4163 466.848 56.4163 451.333V141.042C56.4163 125.527 61.9405 112.246 72.9887 101.197C84.037 90.1491 97.3184 84.625 112.833 84.625H564.166C579.681 84.625 592.962 90.1491 604.011 101.197C615.059 112.246 620.583 125.527 620.583 141.042V451.333C620.583 466.848 615.059 480.129 604.011 491.178C592.962 502.226 579.681 507.75 564.166 507.75H112.833ZM112.833 451.333H564.166V141.042H112.833V451.333Z" fill="black"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_43_45">
+<rect width="677" height="677" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/runtime/assets/icons/phone.svg b/src/runtime/assets/icons/phone.svg
new file mode 100644
index 0000000..ac464a2
--- /dev/null
+++ b/src/runtime/assets/icons/phone.svg
@@ -0,0 +1,15 @@
+<svg width="677" height="677" viewBox="0 0 677 677" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_43_49)">
+<mask id="mask0_43_49" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="677" height="677">
+<rect width="677" height="677" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_43_49)">
+<path d="M197.459 648.792C181.944 648.792 168.663 643.267 157.614 632.219C146.566 621.171 141.042 607.89 141.042 592.375V84.625C141.042 69.1104 146.566 55.829 157.614 44.7807C168.663 33.7324 181.944 28.2083 197.459 28.2083H479.542C495.057 28.2083 508.338 33.7324 519.386 44.7807C530.435 55.829 535.959 69.1104 535.959 84.625V592.375C535.959 607.89 530.435 621.171 519.386 632.219C508.338 643.267 495.057 648.792 479.542 648.792H197.459ZM197.459 507.75V592.375H479.542V507.75H197.459ZM338.5 578.271C346.493 578.271 353.192 575.567 358.599 570.161C364.005 564.754 366.709 558.055 366.709 550.062C366.709 542.07 364.005 535.371 358.599 529.964C353.192 524.557 346.493 521.854 338.5 521.854C330.508 521.854 323.808 524.557 318.402 529.964C312.995 535.371 310.292 542.07 310.292 550.062C310.292 558.055 312.995 564.754 318.402 570.161C323.808 575.567 330.508 578.271 338.5 578.271ZM197.459 451.333H479.542V169.25H197.459V451.333ZM197.459 112.833H479.542V84.625H197.459V112.833Z" fill="black"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_43_49">
+<rect width="677" height="677" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/runtime/components/views/EditView.vue b/src/runtime/components/views/EditView.vue
index b05b64d..b2495e5 100644
--- a/src/runtime/components/views/EditView.vue
+++ b/src/runtime/components/views/EditView.vue
@@ -7,7 +7,7 @@ import { Extension } from '@tiptap/core'
 import type { RouteComponent } from 'vue-router'
 import { ComponentType, type KatzenUIComponent, useUiStore } from '../../stores/UiStore'
 import type { ImageContent } from '../../composables/useUiComponents'
-import { computed, defineAsyncComponent, onMounted, ref, shallowRef, useCookie, watch } from '#imports'
+import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, shallowRef, useCookie, watch } from '#imports'
 import { useAsyncData, useRouter } from '#app'
 
 const DisableEnter = Extension.create({
@@ -137,9 +137,20 @@ onMounted(
       childList: true,
       subtree: true,
     })
+
+    window.addEventListener('resize', resizeListener)
   },
 )
 
+const resizeListener = () => {
+  viewPortHeight.value = window.innerHeight
+  viewPortWidth.value = window.innerWidth
+}
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeListener)
+})
+
 watch(hoveredElement, () => {
   const updatePosition = () => {
     if (hoverPosition.value && hoveredElement.value) {
@@ -385,6 +396,41 @@ watch(selectedImage, () => {
     })
   }
 })
+
+const mobileView = ref(false)
+const viewPortHeight = ref(0)
+const viewPortWidth = ref(0)
+
+watch(mobileView, () => {
+  if (mobileView.value) {
+    // set meta viewport width to 768px
+    // find if meta[name=viewport] exists if not create it
+    const metaViewport = document.querySelector('meta[name=viewport]')
+    if (metaViewport) {
+      metaViewport.setAttribute('content', 'width=768, initial-scale=1')
+    }
+    else {
+      const meta = document.createElement('meta')
+      meta.name = 'viewport'
+      meta.content = 'width=768'
+      document.head.appendChild(meta)
+    }
+  }
+  else {
+    // set meta viewport width to device-width
+    // find if meta[name=viewport] exists if not create it
+    const metaViewport = document.querySelector('meta[name=viewport]')
+    if (metaViewport) {
+      metaViewport.setAttribute('content', 'width=device-width, initial-scale=1')
+    }
+    else {
+      const meta = document.createElement('meta')
+      meta.name = 'viewport'
+      meta.content = 'width=device-width'
+      document.head.appendChild(meta)
+    }
+  }
+})
 </script>
 
 <template>
@@ -437,247 +483,276 @@ watch(selectedImage, () => {
     </div>
     <div
       ref="routeWrapper"
-      class="flex-1 bg-slate-50 overflow-y-scroll relative w-0"
+      class="flex-1 bg-slate-50 relative w-0 flex justify-center items-center"
       :class="{ '!w-full': Route }"
     >
-      <component
-        :is="Route"
-        v-if="Route"
-      />
-    </div>
-  </div>
-
-  <!-- hover overlay -->
-  <div class="absolute inset-0 opacity-50 select-none touch-none pointer-events-none ontop">
-    <div
-      ref="hoverPosition"
-      class="absolute z-20 -top-full -left-full bg-red-400/20 border-2 rounded border-red-500"
-    />
-  </div>
-
-  <!-- selected overlay -->
-  <div
-    v-if="selectedElement"
-    class="absolute inset-0 select-none touch-none pointer-events-none flex justify-center items-center ontop"
-  >
-    <div class="relative z-40  flex flex-col pointer-events-auto bg-white p-5 border-black border-2 rounded max-w-96 w-full">
-      <div class="flex flex-row items-center mb-6">
-        <p class="font-mono font-bold uppercase">
-          Change Element Value
-        </p>
-        <img
-          src="../../assets/icons/close.svg"
-          class="size-6 ml-auto cursor-pointer"
-          alt="close"
-          @click="selectedElement=null; currentSelectedKey=undefined"
-        >
-      </div>
-
+      <!-- mobile size: width: 768px height: 1024px -->
       <div
-        v-if="editor && currentSelectedComponent?.type === ComponentType.RichText"
-        class="bg-white mb-2 border-b-2 border-black/10 pb-2"
+        class="size-full bg-gray-300"
+        :class="mobileView?['max-w-[390px]', 'max-h-[844px]']:[]"
       >
-        <div class="flex flex-row flex-wrap gap-2">
-          <button
-            v-for="(entry, index) in menuEntries"
-            :key="index"
-            :class="entry.active()?'bg-amber-50':''"
-            class="border border-b-2 p-0.5 border-black rounded "
-            @click="entry.click"
-          >
-            {{ entry.name }}
-          </button>
+        <div class="size-full bg-white overflow-y-scroll ">
+          <Route
+            v-if="Route"
+            :component="Route"
+          />
         </div>
       </div>
-      <!-- IMAGE CHOOSER / UPLOAD -->
 
-      <template v-if="currentSelectedComponent?.type === ComponentType.Image">
-        <div class="flex flex-col items-center">
-          <div class="h-72 w-72 grid grid-cols-3 grid-flow-row overflow-y-auto justify-center items-center">
-            <div
-              v-for="(image, index) in imageResponse.body.images"
-              :key="index"
-              class="w-full aspect-square"
+      <!-- hover overlay -->
+      <div class="absolute inset-0 opacity-50 select-none touch-none pointer-events-none ontop">
+        <div
+          ref="hoverPosition"
+          class="absolute z-20 -top-full -left-full bg-red-400/20 border-2 rounded border-red-500"
+        />
+      </div>
+
+      <!-- selected overlay -->
+      <div
+        v-if="selectedElement"
+        class="absolute inset-0 select-none touch-none pointer-events-none flex justify-center items-center ontop"
+      >
+        <div class="relative z-40  flex flex-col pointer-events-auto bg-white p-5 border-black border-2 rounded max-w-96 w-full">
+          <div class="flex flex-row items-center mb-6">
+            <p class="font-mono font-bold uppercase">
+              Change Element Value
+            </p>
+            <img
+              src="../../assets/icons/close.svg"
+              class="size-6 ml-auto cursor-pointer"
+              alt="close"
+              @click="selectedElement=null; currentSelectedKey=undefined"
             >
-              <img
-                :src="image"
-                class="object-cover size-full hover:drop-shadow cursor-pointer border-2 border-transparent
-                contain-inline-size hover:border-purple-400 transition-colors duration-300 rounded"
-                alt="image"
-                :class="{ 'border-yellow-500': selectedImage === image, 'animate-pulse': selectedImage === image }"
-                @click="selectedImage = image"
+          </div>
+
+          <div
+            v-if="editor && currentSelectedComponent?.type === ComponentType.RichText"
+            class="bg-white mb-2 border-b-2 border-black/10 pb-2"
+          >
+            <div class="flex flex-row flex-wrap gap-2">
+              <button
+                v-for="(entry, index) in menuEntries"
+                :key="index"
+                :class="entry.active()?'bg-amber-50':''"
+                class="border border-b-2 p-0.5 border-black rounded "
+                @click="entry.click"
               >
-            </div>
-            <div
-              v-for="(k, i) in fillEmptySpace"
-              :key="k+i"
-              class="w-full contain-inline-size cursor-not-allowed rounded border-2 border-transparent aspect-square"
-            >
-              <div class="bg-gray-100 size-full" />
+                {{ entry.name }}
+              </button>
             </div>
           </div>
+          <!-- IMAGE CHOOSER / UPLOAD -->
+
+          <template v-if="currentSelectedComponent?.type === ComponentType.Image">
+            <div class="flex flex-col items-center">
+              <div class="h-72 w-72 grid grid-cols-3 grid-flow-row overflow-y-auto justify-center items-center">
+                <div
+                  v-for="(image, index) in imageResponse.body.images"
+                  :key="index"
+                  class="w-full aspect-square"
+                >
+                  <img
+                    :src="image"
+                    class="object-cover size-full hover:drop-shadow cursor-pointer border-2 border-transparent
+                contain-inline-size hover:border-purple-400 transition-colors duration-300 rounded"
+                    alt="image"
+                    :class="{ 'border-yellow-500': selectedImage === image, 'animate-pulse': selectedImage === image }"
+                    @click="selectedImage = image"
+                  >
+                </div>
+                <div
+                  v-for="(k, i) in fillEmptySpace"
+                  :key="k+i"
+                  class="w-full contain-inline-size cursor-not-allowed rounded border-2 border-transparent aspect-square"
+                >
+                  <div class="bg-gray-100 size-full" />
+                </div>
+              </div>
+            </div>
+            <p class="font-mono font-bold">
+              ALT:
+            </p>
+          </template>
+
+          <!-- TEXT INPUT -->
+          <EditorContent
+            class="size-full max-h-72 overflow-y-auto border-b-2 border-black"
+            :editor="editor"
+          />
         </div>
-        <p class="font-mono font-bold">
-          ALT:
-        </p>
-      </template>
-
-      <!-- TEXT INPUT -->
-      <EditorContent
-        class="size-full max-h-72 overflow-y-auto border-b-2 border-black"
-        :editor="editor"
-      />
-    </div>
-  </div>
+      </div>
 
-  <!-- Save Button -->
-  <div class="fixed flex gap-2 bottom-0 right-0 m-4 ontop">
-    <button
-      class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
-      title="Save Changes"
-      :class="{ '!text-black': hasSaveState,
-                'bg-white': hasSaveState }"
-      @click="saveUiContent"
-    >
-      <img
-        src="../../assets/icons/disk.svg"
-        class="size-4 transition-all duration-300"
-        :class="{ invert: !hasSaveState }"
-        alt="loading"
-      >
-      <span
-        class="transition-all duration-300 w-0 ml-0"
-        :class="{ '!w-4': hasSaveState,
-                  '!ml-2': hasSaveState }"
-      >
-        <template v-if="saveState.loading">
+      <!-- Save Button -->
+      <div class="fixed flex gap-2 bottom-0 right-0 m-4 ontop">
+        <button
+          class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
+          title="Save Changes"
+          :class="{ '!text-black': hasSaveState,
+                    'bg-white': hasSaveState }"
+          @click="saveUiContent"
+        >
           <img
-            src="../../assets/icons/loading.svg"
-            class="size-4 animate-spin"
+            src="../../assets/icons/disk.svg"
+            class="size-4 transition-all duration-300"
+            :class="{ invert: !hasSaveState }"
             alt="loading"
           >
-        </template>
-        <template v-if="saveState.success">
-          <img
-            src="../../assets/icons/check.svg"
-            class="size-4"
-            alt="check"
-          >
-        </template>
-        <template v-if="saveState.failed">
-          <img
-            src="../../assets/icons/fail.svg"
-            class="size-4"
-            alt="fail"
+          <span
+            class="transition-all duration-300 w-0 ml-0"
+            :class="{ '!w-4': hasSaveState,
+                      '!ml-2': hasSaveState }"
           >
-        </template>
-      </span>
-    </button>
-
-    <!-- publish button -->
-    <button
-      class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
-      title="Deploy Content"
-      :class="{ '!text-black': hasPublishState,
-                'bg-white': hasPublishState }"
-      @click="publishPopup = true"
-    >
-      <img
-        src="../../assets/icons/publish.svg"
-        class="size-4 transition-all duration-300"
-        :class="{ invert: !hasPublishState }"
-        alt="loading"
-      >
-      <span
-        class="transition-all duration-300 w-0 ml-0"
-        :class="{ '!w-4': hasPublishState,
-                  '!ml-2': hasPublishState }"
-      >
-        <template v-if="publishState.loading">
+            <template v-if="saveState.loading">
+              <img
+                src="../../assets/icons/loading.svg"
+                class="size-4 animate-spin"
+                alt="loading"
+              >
+            </template>
+            <template v-if="saveState.success">
+              <img
+                src="../../assets/icons/check.svg"
+                class="size-4"
+                alt="check"
+              >
+            </template>
+            <template v-if="saveState.failed">
+              <img
+                src="../../assets/icons/fail.svg"
+                class="size-4"
+                alt="fail"
+              >
+            </template>
+          </span>
+        </button>
+
+        <!-- publish button -->
+        <button
+          class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
+          title="Deploy Content"
+          :class="{ '!text-black': hasPublishState,
+                    'bg-white': hasPublishState }"
+          @click="publishPopup = true"
+        >
           <img
-            src="../../assets/icons/loading.svg"
-            class="size-4 animate-spin"
+            src="../../assets/icons/publish.svg"
+            class="size-4 transition-all duration-300"
+            :class="{ invert: !hasPublishState }"
             alt="loading"
           >
-        </template>
-        <template v-if="publishState.success">
-          <img
-            src="../../assets/icons/check.svg"
-            class="size-4"
-            alt="check"
+          <span
+            class="transition-all duration-300 w-0 ml-0"
+            :class="{ '!w-4': hasPublishState,
+                      '!ml-2': hasPublishState }"
           >
-        </template>
-        <template v-if="publishState.failed">
-          <img
-            src="../../assets/icons/fail.svg"
-            class="size-4"
-            alt="fail"
-          >
-        </template>
-      </span>
-    </button>
-  </div>
-
-  <!-- publish popup -->
-  <div
-    v-if="publishPopup"
-    class="fixed inset-0 bg-black/50 flex justify-center items-center ontop"
-  >
-    <div class="bg-white p-5 rounded border-black border-2 flex flex-col gap-5">
-      <p class="font-mono font-bold uppercase">
-        Deploy Content
-      </p>
-      <p class="font-mono">
-        Are you sure you want to publish the changes?
-      </p>
-      <p class="font-mono">
-        This will trigger a rebuild of the website.
-      </p>
-      <div class="flex flex-row gap-5 font-mono">
-        <button
-          class="bg-black text-white px-5 py-3 rounded-2xl"
-          @click="deployContent"
-        >
-          Deploy
+            <template v-if="publishState.loading">
+              <img
+                src="../../assets/icons/loading.svg"
+                class="size-4 animate-spin"
+                alt="loading"
+              >
+            </template>
+            <template v-if="publishState.success">
+              <img
+                src="../../assets/icons/check.svg"
+                class="size-4"
+                alt="check"
+              >
+            </template>
+            <template v-if="publishState.failed">
+              <img
+                src="../../assets/icons/fail.svg"
+                class="size-4"
+                alt="fail"
+              >
+            </template>
+          </span>
         </button>
+
         <button
-          class="bg-red-500 text-white px-5 py-3 rounded-2xl"
-          @click="publishPopup = false"
+          class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
+          :title="mobileView?'Switch to Desktop View':'Switch to Mobile View'"
+          @click="mobileView = !mobileView"
         >
-          Cancel
+          <img
+            v-if="mobileView"
+            src="../../assets/icons/phone.svg"
+            class="size-4 transition-all duration-300 invert"
+            :class="{ invert: mobileView }"
+            alt="phone"
+          >
+          <img
+            v-else
+            src="../../assets/icons/desktop.svg"
+            class="size-4 transition-all duration-300 invert"
+            :class="{ invert: mobileView }"
+            alt="desktop"
+          >
         </button>
       </div>
-    </div>
-  </div>
-  <!-- error popup -->
-  <div
-    v-if="errorPopup"
-    class="fixed inset-0 bg-black/50 flex justify-center items-center ontop"
-  >
-    <div class="bg-white p-5 rounded border-black border-2 flex flex-col gap-5">
-      <p class="font-mono font-bold uppercase flex flex-row">
-        Something went wrong
-        <img
-          src="../../assets/icons/fail.svg"
-          class="size-6 ml-auto cursor-pointer"
-          alt="close"
-          @click="closeErrorPopup"
-        >
-      </p>
-      <div class="flex flex-col items-center gap-2 max-w-96">
-        <p
-          v-for="(message, index) in errorMessages"
-          :key="index"
-          class="font-mono"
-        >
-          {{ message }}
-        </p>
-        <button
-          class="bg-black text-white px-5 py-3 rounded-2xl max-w-56 w-full"
-          @click="closeErrorPopup"
-        >
-          Close
-        </button>
+
+      <!-- publish popup -->
+      <div
+        v-if="publishPopup"
+        class="fixed inset-0 bg-black/50 flex justify-center items-center ontop"
+      >
+        <div class="bg-white p-5 rounded border-black border-2 flex flex-col gap-5">
+          <p class="font-mono font-bold uppercase">
+            Deploy Content
+          </p>
+          <p class="font-mono">
+            Are you sure you want to publish the changes?
+          </p>
+          <p class="font-mono">
+            This will trigger a rebuild of the website.
+          </p>
+          <div class="flex flex-row gap-5 font-mono">
+            <button
+              class="bg-black text-white px-5 py-3 rounded-2xl"
+              @click="deployContent"
+            >
+              Deploy
+            </button>
+            <button
+              class="bg-red-500 text-white px-5 py-3 rounded-2xl"
+              @click="publishPopup = false"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- error popup -->
+      <div
+        v-if="errorPopup"
+        class="fixed inset-0 bg-black/50 flex justify-center items-center ontop"
+      >
+        <div class="bg-white p-5 rounded border-black border-2 flex flex-col gap-5">
+          <p class="font-mono font-bold uppercase flex flex-row">
+            Something went wrong
+            <img
+              src="../../assets/icons/fail.svg"
+              class="size-6 ml-auto cursor-pointer"
+              alt="close"
+              @click="closeErrorPopup"
+            >
+          </p>
+          <div class="flex flex-col items-center gap-2 max-w-96">
+            <p
+              v-for="(message, index) in errorMessages"
+              :key="index"
+              class="font-mono"
+            >
+              {{ message }}
+            </p>
+            <button
+              class="bg-black text-white px-5 py-3 rounded-2xl max-w-56 w-full"
+              @click="closeErrorPopup"
+            >
+              Close
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>