vue-intergrall-plugins 1.1.89 → 1.2.0

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

@@ -1,166 +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>
-.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>
+<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>
+.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>