✨ feat: Link Buttons simple syntax added

jolzee · Nov 30, 2020 · 0182f3d · 0182f3d
1 parent 842cbbd
commit 0182f3d
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/src/components/ChatTeneoResponse.vue b/src/components/ChatTeneoResponse.vue
@@ -239,7 +239,32 @@
         <h2 class="subtitle-1 font-weight-bold" v-text="getOptions.title"></h2>
         <div v-if="getOptions.html" class="elevation-2 mt-2" v-html="getOptions.items"></div>
         <span v-for="(option, optionIndex) in getOptions.items" v-else :key="optionIndex + uuid">
+          <div v-if="'url' in option" class="text-center">
+            <span class="ma-1">
+              <v-btn
+                min-height="25"
+                class="option-btn mr-2 mt-2"
+                x-small
+                :disabled="hasPermanentOptions && !isLastItem && shouldDisable ? true : false"
+                :color="option.color || `success ${textColor('success')}`"
+                :aria-label="option.name"
+                @click="linkButtonClicked(option)"
+              >
+                <v-icon left style="padding-top: 2px; opacity: 0.7 !important">{{
+                  `mdi-${
+                    option.icon
+                      ? option.icon
+                      : option.target && option.target === "_blank"
+                      ? "open-in-new"
+                      : "link-box-variant"
+                  }`
+                }}</v-icon>
+                {{ option.name }}
+              </v-btn>
+            </span>
+          </div>
           <v-btn
+            v-else
             min-height="25"
             class="option-btn mr-2 mt-2"
             x-small
@@ -885,6 +910,14 @@ export default {
     }
   },
   methods: {
+    linkButtonClicked(linkButton) {
+      if (linkButton.target && linkButton.target === "_blank") {
+        let win = window.open(linkButton.url, "_blank");
+        win.focus();
+      } else {
+        window.location.href = linkButton.url;
+      }
+    },
     getModalTitle() {
       const tResp = TIE.wrap(this.item.teneoResponse);
       const modalConfig = tResp.getParameter("displaySimpleModal");

diff --git a/src/utils/simpleSyntax.js b/src/utils/simpleSyntax.js
@@ -21,6 +21,9 @@ export default class SimpleSyntax {
         case "table":
           this.table();
           break;
+        case "linkbuttons":
+          this.linkButtons();
+          break;
         case "image":
           this.image();
           break;
@@ -163,6 +166,37 @@ export default class SimpleSyntax {
     this.tResp.addParameter("extensions", output);
   }
 
+  linkButtons() {
+    let output = {
+      name: "displayCollection",
+      hasLongOptions: false,
+      permanent: false,
+      parameters: {
+        content: {
+          items: []
+        }
+      }
+    };
+
+    if (this.tResp.hasParameter("linkbuttons_title")) {
+      output.parameters.content.title = this.tResp.getParameter("linkbuttons_title");
+    }
+
+    this.tResp
+      .getParameter("linkbuttons")
+      .split("|")
+      .forEach(linkRaw => {
+        const linkElements = linkRaw.split(",");
+        output.parameters.content.items.push({
+          name: linkElements[0].trim(),
+          url: linkElements[1].trim(),
+          target: linkElements[2] ? linkElements[2].trim() : ""
+        });
+      });
+
+    this.tResp.addParameter("extensions", output);
+  }
+
   buttons() {
     let output = {
       name: "displayCollection",