✨ feat: Can now minimize leopard in prod and expand forms to 70% width

jolzee · Oct 19, 2020 · 12147a0 · 12147a0
1 parent c57a71a
commit 12147a0
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 13 deletions.
diff --git a/public/static/embed-leopard.js b/public/static/embed-leopard.js
@@ -45,20 +45,57 @@ var leopardChatUi = (function () {
             -webkit-border-radius: 13px;
             height: calc(var(--leopardvh, 1vh) * 85);
         }
+        .teneo-chat-widget-wide {
+            -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
+            -moz-box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
+            box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
+            opacity: 1;
+            visibility: visible;
+            z-index: 9000;
+            position: fixed;
+            right: 30px;
+            bottom: 50px;
+            width: 70%;
+            height: 85%;
+            max-width: 100%;
+            max-height: 655px;
+            min-height: 260px;
+            min-width: 257px;
+            background-color: transparent !important;
+            border: 0px;
+            transition: none 0s ease 0s;
+            border-radius: 13px;
+            -moz-border-radius: 13px;
+            -webkit-border-radius: 13px;
+            height: calc(var(--leopardvh, 1vh) * 85);
+        }
         .teneo-transparent::-moz-selection { background: transparent !important; background-color: transparent !important;}
         .teneo-transparent::selection { background: transparent !important; background-color: transparent !important; }
         .teneo-chat-button-widget {
-        opacity: 1;
-        visibility: visible;
-        z-index: 9000;
-        position: fixed;
-        bottom: 30px;
-        right: 30px;
-        width: 90px;
-        height: 82px;
-        background-color: transparent !important;
-        border: 0px;
-        transition: none 0s ease 0s !important;
+            opacity: 1;
+            visibility: visible;
+            z-index: 9000;
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 90px;
+            height: 82px;
+            background-color: transparent !important;
+            border: 0px;
+            transition: none 0s ease 0s !important;
+        }
+        .teneo-chat-minimize-widget {
+            opacity: 1;
+            visibility: visible;
+            z-index: 9000;
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 248px;
+            height: 32px;
+            background-color: transparent !important;
+            border: 0px;
+            transition: none 0s ease 0s !important;
         }
         @media only screen and (max-width: 480px) {
         .teneo-chat-widget {
@@ -331,6 +368,35 @@ var leopardChatUi = (function () {
                     leopardContainer.className = "teneo-chat-button-widget";
                     leopardContainer.style.display = "block";
                 }
+            } else if (event.data === "maximizeLeopard") {
+                var node = document.getElementById("teneo-chat-widget-container");
+                node.className = "teneo-chat-widget";
+            } else if (event.data === "wideLeopard") {
+                var node = document.getElementById("teneo-chat-widget-container");
+                node.className = "teneo-chat-widget-wide";
+            } else if (event.data === "normalWidthLeopard") {
+                var node = document.getElementById("teneo-chat-widget-container");
+                node.className = "teneo-chat-widget";
+            } else if (event.data === "hideLeopardMinimize") {
+                    //shouldShowLeopard = false;
+                    var node = document.getElementById("teneo-chat-widget-container");
+                    node.className = "teneo-chat-minimize-widget";
+                    node.style.display = "block";
+                    isLeopardAnimating = false;
+                    // setTimeout(function addFocusToButton() {
+                    //     var leopardFrame;
+                    //     do {
+                    //         leopardFrame = document.getElementById('teneo-chat-widget');
+                    //         if (leopardFrame && leopardFrame.contentDocument) {
+                    //             var leopardFrameInnerButton = leopardFrame.contentDocument.getElementById('leopard-embed-minimize-button'); //leopard-embed-open-close-button
+                    //             if (leopardFrameInnerButton) {
+                    //                 leopardFocusIframe(leopardFrame);
+                    //                 leopardFrameInnerButton.focus();
+                    //             }
+                    //         }
+                    //     }
+                    //     while (!leopardFrame);
+                    // }, 800);
             } else if (event.data.startsWith("runLeopardScript") && allowScripts) {
                 var results = event.data.split("|");
                 eval(results[1]);

diff --git a/src/App.vue b/src/App.vue
@@ -51,7 +51,9 @@
           id="leopardSystemBarMinimized"
           color="primary"
           accesskey="+"
-          :class="`elevation-4 leopard-system-bar ${textColor('primary')}`"
+          :class="`elevation-4 ${
+            embed ? 'leopard-system-bar-embed' : 'leopard-system-bar'
+          } ${textColor('primary')}`"
           style="
             border-right: 4px solid yellowgreen !important;
             border-left: 4px solid yellowgreen !important;
@@ -354,6 +356,23 @@
                   </v-btn>
                 </v-fab-transition>
                 <template v-if="embedAndShowClose">
+                  <!-- showing minimize button for embed -->
+                  <v-fab-transition>
+                    <v-btn
+                      icon
+                      text
+                      tile
+                      small
+                      ripple
+                      accesskey="."
+                      :color="isLightColor('primary') ? 'black' : 'white'"
+                      aria-label="Minimize Chat"
+                      class="embed-button-center mr-1"
+                      @click="minimizeChatEmbedded"
+                    >
+                      <v-icon>mdi-image-size-select-small</v-icon>
+                    </v-btn>
+                  </v-fab-transition>
                   <span @click="closeChatEmbedded">
                     <v-fab-transition>
                       <v-btn
@@ -589,6 +608,11 @@ export default {
     };
   },
   watch: {
+    maximizeChat: function (newVal) {
+      if (newVal) {
+        this.sendMessageToParent("maximizeLeopard");
+      }
+    },
     minimize: function (delay) {
       if (delay) {
         setTimeout(() => {
@@ -1073,6 +1097,24 @@ export default {
       logger.debug("Close Chat Embedded");
       this.$store.commit("HIDE_CHAT_BUTTON");
     },
+    minimizeChatEmbedded() {
+      //localStorage.setItem("isChatOpen", "false");
+      this.maximizeChat = false;
+      setTimeout(() => {
+        sendMessageToParent("hideLeopardMinimize");
+        this.calculateMobileHeight(); // only called on mobile devices
+
+        logger.debug("Minimized Chat Embedded");
+
+        let systemBarElement = document.getElementById("leopardSystemBarMinimized");
+        if (systemBarElement) {
+          systemBarElement.focus();
+        }
+      }, 50);
+
+      // let appElement = document.getElementById("app");
+      // appElement.setAttribute("style", "");
+    },
     openEmbedButton() {
       this.calculateMobileHeight(); // only called on mobile devices
       logger.debug("Open Chat Window from Embed Button");
@@ -1591,6 +1633,15 @@ p {
   cursor: pointer;
 }
 
+.leopard-system-bar-embed {
+  position: fixed;
+  right: 4px;
+  bottom: 0px;
+  width: 240px;
+  border-radius: 0.5em;
+  cursor: pointer;
+}
+
 .v-overlay--active {
   border-radius: 0px !important;
 }

diff --git a/src/components/Form.vue b/src/components/Form.vue
@@ -40,7 +40,7 @@
             <v-spacer style="height: 30px" class="teneo-systembar-spacer"></v-spacer>
 
             <v-icon
-              v-if="!embed && !$vuetify.breakpoint.mdAndDown"
+              v-if="(!embed && !$vuetify.breakpoint.mdAndDown) || embed"
               tabindex="0"
               tag="button"
               :aria-label="fullscreen ? 'Restore dialog size' : 'Maximize dialog'"
@@ -620,6 +620,7 @@ import * as rules from "vee-validate/dist/rules";
 import { messages } from "vee-validate/dist/locale/en.json";
 import { mask } from "vue-the-mask";
 import { mapGetters } from "vuex";
+import { sendMessageToParent } from "@/utils/utils";
 
 const logger = require("@/utils/logging").getLogger("Form.vue");
 
@@ -651,6 +652,15 @@ export default {
       overlay: false
     };
   },
+  watch: {
+    fullscreen: function (newVal) {
+      if (newVal && this.embed) {
+        sendMessageToParent("wideLeopard");
+      } else if (!newVal && this.embed) {
+        sendMessageToParent("normalWidthLeopard");
+      }
+    }
+  },
   computed: {
     ...mapGetters(["uuid", "dark", "embed", "fullscreenEmbed", "textColor"])
   },
@@ -688,7 +698,13 @@ export default {
         }
       });
     },
+    normalWidth() {
+      if (this.embed) {
+        sendMessageToParent("normalWidthLeopard");
+      }
+    },
     close() {
+      this.normalWidth();
       this.$emit("hideForm");
       this.$store.commit("SHOW_508_CONTENT");
     },
@@ -700,6 +716,7 @@ export default {
       });
     },
     async submit() {
+      this.normalWidth();
       const isValid = await this.$refs.observer.validate();
       if (!isValid) {
         this.overlay = true;