Added content-perms API examples and docs tweaks

[bookstack] / resources / js / components / back-to-top.js

diff --git a/resources/js/components/back-to-top.js b/resources/js/components/back-to-top.js
index a1d87f22eb3c3732213a2be6e06e8adfdb7180ae..4f0a46f009b19822332bd680f766bc205acc43b9 100644 (file)
--- a/resources/js/components/back-to-top.js
+++ b/resources/js/components/back-to-top.js
@@ -1,34 +1,35 @@
+import {Component} from "./component";

 
 

-class BackToTop {
+export class BackToTop extends Component {

 
 

-    constructor(elem) {
-        this.elem = elem;
+    setup() {
+        this.button = this.$el;

         this.targetElem = document.getElementById('header');
         this.showing = false;
         this.breakPoint = 1200;
 
         if (document.body.classList.contains('flexbox')) {
         this.targetElem = document.getElementById('header');
         this.showing = false;
         this.breakPoint = 1200;
 
         if (document.body.classList.contains('flexbox')) {

-            this.elem.style.display = 'none';
+            this.button.style.display = 'none';

             return;
         }
 
             return;
         }
 

-        this.elem.addEventListener('click', this.scrollToTop.bind(this));
+        this.button.addEventListener('click', this.scrollToTop.bind(this));

         window.addEventListener('scroll', this.onPageScroll.bind(this));
     }
 
     onPageScroll() {
         let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
         if (!this.showing && scrollTopPos > this.breakPoint) {
         window.addEventListener('scroll', this.onPageScroll.bind(this));
     }
 
     onPageScroll() {
         let scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop || 0;
         if (!this.showing && scrollTopPos > this.breakPoint) {

-            this.elem.style.display = 'block';
+            this.button.style.display = 'block';

             this.showing = true;
             setTimeout(() => {
             this.showing = true;
             setTimeout(() => {

-                this.elem.style.opacity = 0.4;
+                this.button.style.opacity = 0.4;

             }, 1);
         } else if (this.showing && scrollTopPos < this.breakPoint) {
             }, 1);
         } else if (this.showing && scrollTopPos < this.breakPoint) {

-            this.elem.style.opacity = 0;
+            this.button.style.opacity = 0;

             this.showing = false;
             setTimeout(() => {
             this.showing = false;
             setTimeout(() => {

-                this.elem.style.display = 'none';
+                this.button.style.display = 'none';

             }, 500);
         }
     }
             }, 500);
         }
     }


@@ -54,6 +55,4 @@ class BackToTop {
         requestAnimationFrame(setPos.bind(this));
     }
 
         requestAnimationFrame(setPos.bind(this));
     }
 

-}
-
-export default BackToTop;
\ No newline at end of file
+}
\ No newline at end of file