add is_mobile property to scrollbar to always display when mobile vie…

…wport
conestack · Aug 8, 2024 · 7c369ae · 7c369ae
1 parent 544dc69
commit 7c369ae
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 3 deletions.
diff --git a/js/src/mainmenu.js b/js/src/mainmenu.js
@@ -54,6 +54,7 @@ export class MainMenu extends ts.Events {
         this.handle = this.handle.bind(this);
         global_events.on('on_sidebar_resize', this.handle);
         $(window).on('resize', this.handle);
+        this.handle();
     }
 
     hide_dropdowns() {

diff --git a/js/src/scrollbar.js b/js/src/scrollbar.js
@@ -31,6 +31,9 @@ export class Scrollbar extends ts.Motion {
 
         ts.ajax.attach(this, this.elem);
         ts.clock.schedule_frame(() => this.render());
+
+        const is_mobile = $(window).width() <= 768; // bs5 small/medium breakpoint
+        new ts.Property(this, 'is_mobile', is_mobile);
     }
 
     get position() {
@@ -51,10 +54,19 @@ export class Scrollbar extends ts.Motion {
         this.elem.css('pointer-events', value ? 'all' : 'none');
     }
 
+    on_is_mobile(val) {
+        if (val && this.contentsize > this.scrollsize) {
+            this.scrollbar.stop(true, true).show();
+            this.elem.off('mouseenter mouseleave', this.on_hover);
+        } else {
+            this.scrollbar.stop(true, true).hide();
+            this.elem.on('mouseenter mouseleave', this.on_hover);
+        }
+    }
+
     bind() {
         this.pointer_events = true;
         this.elem.on('mousewheel wheel', this.on_scroll);
-        this.elem.on('mouseenter mouseleave', this.on_hover);
         this.scrollbar.on('click', this.on_click);
         this.set_scope(this.thumb, $(document), this.elem);
         $(window).on('resize', this.on_resize);
@@ -111,6 +123,7 @@ export class Scrollbar extends ts.Motion {
     }
 
     on_resize() {
+        this.is_mobile = $(window).width() <= 768; // bs5 small/medium breakpoint
         this.render();
     }
 

diff --git a/src/cone/app/browser/static/cone/cone.app.js b/src/cone/app/browser/static/cone/cone.app.js
@@ -699,6 +699,8 @@ var cone = (function (exports, $, ts) {
             new ts.Property(this, 'disabled', false);
             ts.ajax.attach(this, this.elem);
             ts.clock.schedule_frame(() => this.render());
+            const is_mobile = $(window).width() <= 768;
+            new ts.Property(this, 'is_mobile', is_mobile);
         }
         get position() {
             return this._position || 0;
@@ -714,10 +716,19 @@ var cone = (function (exports, $, ts) {
         set pointer_events(value) {
             this.elem.css('pointer-events', value ? 'all' : 'none');
         }
+        on_is_mobile(val) {
+            console.log(val);
+            if (val && this.contentsize > this.scrollsize) {
+                this.scrollbar.stop(true, true).show();
+                this.elem.off('mouseenter mouseleave', this.on_hover);
+            } else {
+                this.scrollbar.stop(true, true).hide();
+                this.elem.on('mouseenter mouseleave', this.on_hover);
+            }
+        }
         bind() {
             this.pointer_events = true;
             this.elem.on('mousewheel wheel', this.on_scroll);
-            this.elem.on('mouseenter mouseleave', this.on_hover);
             this.scrollbar.on('click', this.on_click);
             this.set_scope(this.thumb, $(document), this.elem);
             $(window).on('resize', this.on_resize);
@@ -767,6 +778,7 @@ var cone = (function (exports, $, ts) {
             }
         }
         on_resize() {
+            this.is_mobile = $(window).width() <= 768;
             this.render();
         }
         on_hover(evt) {
@@ -1086,6 +1098,7 @@ var cone = (function (exports, $, ts) {
             this.handle = this.handle.bind(this);
             global_events.on('on_sidebar_resize', this.handle);
             $(window).on('resize', this.handle);
+            this.handle();
         }
         hide_dropdowns() {
             this.elems.each((i, el) => {