vue-intergrall-plugins 0.0.1085 → 1.0.1

package/src/lib-components/Messages/LinkPreview.vue

@@ -0,0 +1,189 @@
+<template>
+  <div
+    v-if="linkPreview.isValid"
+    class="link-preview"
+    @click="openUrl()"
+    :title="`Abrir ${returnURL()} em uma nova guia`"
+  >
+    <div
+      v-if="linkPreview.imageSource"
+      :style="linkPreview.colorTheme ? `background-color: ${linkPreview.colorTheme}` : ''"
+      class="link-preview-image"
+    >
+      <img :src="linkPreview.imageSource" alt="Imagem referente ao link" />
+    </div>
+    <div
+      class="link-preview-author"
+      :class="{ 'mb-0': linkPreview.description }"
+      v-if="linkPreview.author"
+    >
+      <h1 v-text="linkPreview.author"></h1>
+    </div>
+    <div v-if="linkPreview.description" class="link-preview-infos">
+      <p v-if="linkPreview.description" v-text="linkPreview.description"></p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { dev, baseURL } from "@/services/smartChannelAxios";
+
+export default {
+  props: {
+    message: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      linkPreview: {
+        author: "",
+        description: "",
+        imageSource: "",
+        colorTheme: "",
+        isValid: false,
+      },
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.gerarPreview();
+    });
+  },
+  methods: {
+    returnURL() {
+      if (!this.message) return "";
+      const isSticker = this.message.indexOf("KSTICKERK") < 0 ? false : true;
+      if (isSticker) return "";
+      const regex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g;
+      const url = regex.exec(this.message);
+      if (!url || !url[0]) {
+        console.warn("URL invalida para gerar preview");
+        return "";
+      }
+      const finalUrl = url[0].replace(/["'*]/g, "");
+      if (
+        /((https?|ftp):\/\/.)?(www\.)?(?:([-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6})|(linux07|linux03))\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi.test(
+          finalUrl
+        )
+      )
+        return finalUrl;
+      return false;
+    },
+    async gerarPreview() {
+      try {
+        const url = this.returnURL();
+        if (!url) return;
+        const encodedURL = Buffer(url).toString("base64");
+        const response = await this.$httpRequest({
+          method: "get",
+          url: `${baseURL}/preview?url=${encodedURL}${dev}`,
+          // headers: {
+          //   Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1VGWnBQeEV1UHc5UXdvN21HU2tWNEl4VHN0blM3MHNyZUJTTWt3d3hiNDRhd3dDcWwxd09jIiwibWFuYWdlciI6Ik1LVXRhd3dpbTRsNXd3WW1LMWFJYXd3aW00bDV3d3d3eGI0NGF3d0s0a2pveHBPMnl6TFZ3dXBud3d4YjQ0YXd3cmxNNHRqZ3FKTExsTjMiLCJoYXNfaW5mb3MiOnRydWUsIm5yb3MiOlsiMjczIl0sImF1dGgiOiJNS1VncmxDdkdRbElGbXZVTERCSGplV0wyOXFVUHdyOVlSMVMyeXdJanlLOUNteCIsImlhdCI6MTY0ODQ3MzYxNSwiZXhwIjoxNjQ4NTYwMDE1fQ.KSG_6_9NfQhk5br7hnXzeLyVZuT69XLaEYF9XkdgmmQ"
+          // }
+        });
+        if (typeof response != "object" || typeof response.data != "object")
+          throw "Retorno incorreto";
+        const { data } = response;
+        const { st_ret, msg_ret, raspagem } = data;
+        if (st_ret != "OK") throw `${st_ret} - ${msg_ret}`;
+        if (!raspagem)
+          throw `${st_ret} - ${msg_ret} | (Raspagem nao encontrada no retorno)`;
+        const { description, og, theme_color } = raspagem;
+        if (description) this.linkPreview.description = description;
+        if (raspagem.author) this.linkPreview.author = raspagem.author;
+        if (og) {
+          const { image, site_name, title, author } = og;
+          if (image)
+            this.linkPreview.imageSource = image.url
+              ? image.url
+              : image.url == ""
+              ? ""
+              : image;
+          if (author || site_name || title)
+            this.linkPreview.author = title
+              ? title
+              : author
+              ? author
+              : site_name
+              ? site_name
+              : "";
+          if (og.description) this.linkPreview.description = og.description;
+        }
+        if (theme_color) this.linkPreview.colorTheme = theme_color;
+
+        if (this.linkPreview.description || this.linkPreview.imageSource)
+          this.linkPreview.isValid = true;
+      } catch (e) {
+        console.error("Erro ao gerar o preview do link: ", e);
+      }
+    },
+    openUrl() {
+      const url = this.returnURL();
+      if (!url) return;
+      window.open(url, "_blank");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.link-preview {
+  display: flex;
+  flex-direction: column;
+  background-color: #eee;
+  color: #333;
+  cursor: pointer;
+  margin: 5px 0;
+  border-radius: 5px;
+  opacity: 0.95;
+  transition: opacity 300ms ease-in-out;
+  font-size: 13.6px;
+}
+
+.link-preview-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.link-preview-author {
+  margin: 5px;
+  font-size: 0.615em;
+  font-weight: bold;
+}
+.link-preview-author.mb-0 {
+  margin-bottom: 0;
+}
+.link-preview-author h1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link-preview-image img {
+  min-width: 100px;
+  max-width: 200px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.link-preview-infos {
+  background-color: #2626261a;
+  padding: 5px;
+  margin: 5px;
+  font-size: 0.83em;
+  border-radius: 5px;
+}
+
+.link-preview:hover {
+  opacity: 1;
+}
+.link-preview:hover .link-preview-infos p {
+  text-decoration: underline;
+}
+</style>

package/src/lib-components/Scroll/ScrollContent.vue

@@ -0,0 +1,166 @@
+<template>
+  <transition name="fade">
+    <div
+      class="btn-rolagem"
+      :class="{ higher: classeCustomizada }"
+      v-show="visibilidade"
+      @click="rolar()"
+    >
+      <div class="sinalizar-msg-nova" :title="tituloSinalizador" v-show="sinalizar"></div>
+      <fa-icon :icon="['fas', 'arrow-circle-down']" />
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    identificador: {
+      type: String,
+      required: true,
+    },
+    containerSelector: {
+      type: String,
+      required: true,
+    },
+    classeCustomizada: {
+      type: Boolean,
+      required: false,
+    },
+    sinalizar: {
+      type: Boolean,
+      required: false,
+    },
+    tituloSinalizador: {
+      type: String,
+      required: false,
+    },
+    rolarParaMsg: {
+      type: Boolean,
+      required: false,
+    },
+    callbackFn: {
+      type: Function,
+      required: false,
+    },
+  },
+  created() {
+    this.$root.$refs[`rc-${this.identificador}`] = this;
+  },
+  data() {
+    return {
+      visibilidade: false,
+      container: "",
+    };
+  },
+  methods: {
+    getContainer() {
+      this.container = document.querySelector(this.containerSelector);
+    },
+    rolar(paraCima) {
+      try {
+        this.getContainer();
+        if (this.sinalizar && this.callbackFn) this.callbackFn();
+        let alturaFinal = this.container.scrollHeight;
+        if (this.rolarParaMsg) {
+          let ultimaMsgContainer = this.container.children[
+            this.container.children.length - 2
+          ];
+          !ultimaMsgContainer.children.length
+            ? (ultimaMsgContainer = this.container.children[
+                this.container.children.length - 3
+              ])
+            : "";
+          const ultimaMsg = ultimaMsgContainer.lastElementChild.offsetHeight + 10;
+          alturaFinal -= ultimaMsg;
+        }
+
+        this.container.scroll(0, paraCima ? 0 : alturaFinal);
+      } catch (e) {
+        console.error("Nao foi possivel rolar o container");
+        console.error(e);
+      }
+    },
+    verifyScrollbar() {
+      try {
+        this.getContainer();
+
+        this.visibilidade = true;
+
+        const posicaoDaBarra = this.container.scrollTop,
+          tamanhoContainer = this.container.offsetHeight,
+          tamanhoBarra = this.container.scrollHeight;
+
+        if (posicaoDaBarra == tamanhoBarra - tamanhoContainer) {
+          if (this.sinalizar) this.$emit("updateKey");
+          this.visibilidade = false;
+        } else if (
+          parseInt(posicaoDaBarra) + tamanhoContainer == tamanhoBarra ||
+          parseInt(posicaoDaBarra) + tamanhoContainer == tamanhoBarra + 1 ||
+          parseInt(posicaoDaBarra) + tamanhoContainer == tamanhoBarra - 1
+        ) {
+          this.visibilidade = false;
+        }
+      } catch (e) {
+        console.error("Ignorando botao de rolagem devido a erro");
+        console.error(e);
+        this.visibilidade = false;
+      }
+    },
+  },
+};
+</script>
+<style>
+.btn-rolagem {
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}
+.btn-rolagem.higher {
+  bottom: 36px;
+}
+.btn-rolagem svg {
+  font-size: 38.4px;
+  color: #757575;
+  transition-duration: 300ms;
+  transition-property: opacity;
+  opacity: 0.8;
+  cursor: pointer;
+}
+.btn-rolagem svg:hover {
+  opacity: 1;
+}
+.sinalizar-msg-nova {
+  position: absolute;
+  top: -10px;
+  left: -10px;
+  background-color: #4f772d;
+  width: 12.5px;
+  height: 12.5px;
+  border-radius: 50%;
+  animation-name: blink;
+  animation-duration: 1000ms;
+  animation-direction: alternate;
+  animation-iteration-count: infinite;
+}
+
+@keyframes blink {
+  from {
+    opacity: 0.8 - 0.1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>