Skip to content

Commit

Permalink
Header main menu is now scrollable on bigger tablet devices. Scrollba…
Browse files Browse the repository at this point in the history 
…r now implements touch for x and y
  • Loading branch information
@lenadax
lenadax committed Aug 12, 2024
1 parent 0eded45 commit e0f16c9
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 50 deletions.
24 changes: 2 additions & 22 deletions js/src/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ export class Header extends ts.Events {
new ts.Property(this, 'is_super_compact', null);

this.render_mobile_scrollbar = this.render_mobile_scrollbar.bind(this);
this.fade_mobile_scrollbar = this.fade_mobile_scrollbar.bind(this);

this.set_mode();
}
Expand All @@ -48,23 +47,6 @@ export class Header extends ts.Events {
}
}

fade_mobile_scrollbar() {
if (this.mobile_scrollbar) {
if (!this.mobile_scrollbar.scrollbar.is(':visible')) {
this.mobile_scrollbar.scrollbar.fadeIn('fast');
}
if (this.fade_out_timeout) {
clearTimeout(this.fade_out_timeout);
}
this.fade_out_timeout = setTimeout(() => {
// Scrollbar may already be destroyed when resize happens
if (this.mobile_scrollbar) {
this.mobile_scrollbar.scrollbar.fadeOut('slow');
}
}, 700);
}
}

on_is_compact(val) {
if (val) {
this.elem.removeClass('full').removeClass('navbar-expand');
Expand All @@ -73,7 +55,6 @@ export class Header extends ts.Events {
// create mobile scrollbar
this.navbar_content.addClass('scrollable-content');
this.mobile_scrollbar = new ScrollbarY(this.navbar_content_wrapper);
this.mobile_scrollbar.on('on_position', this.fade_mobile_scrollbar);

this.navbar_content_wrapper.on('shown.bs.collapse', () => {
// disable scroll to refresh page on mobile devices
Expand All @@ -95,7 +76,6 @@ export class Header extends ts.Events {
// remove mobile scrollbar
this.navbar_content.removeClass('scrollable-content');
if (this.mobile_scrollbar) {
this.mobile_scrollbar.off('on_position', this.fade_mobile_scrollbar);
this.mobile_scrollbar.destroy();
this.mobile_scrollbar = null;
}
Expand Down Expand Up @@ -129,7 +109,7 @@ export class Header extends ts.Events {
this.logo_placeholder.show();
}

this.is_compact = this.elem.outerWidth() < 768;
this.is_super_compact = this.elem.outerWidth() < 576;
this.is_compact = this.elem.outerWidth() < 992; // tablet
this.is_super_compact = this.elem.outerWidth() < 576; // mobile
}
}
21 changes: 17 additions & 4 deletions js/src/scrollbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,18 @@ export class Scrollbar extends ts.Motion {
this.elem.css('pointer-events', value ? 'all' : 'none');
}

fade_timer() {
if (!this.scrollbar.is(':visible')) {
this.scrollbar.fadeIn('fast');
}
if (this.fade_out_timeout) {
clearTimeout(this.fade_out_timeout);
}
this.fade_out_timeout = setTimeout(() => {
this.scrollbar.fadeOut('slow');
}, 700);
}

on_is_mobile(val) {
if (val && this.contentsize > this.scrollsize) {
this.scrollbar.stop(true, true).show();
Expand Down Expand Up @@ -187,7 +199,7 @@ export class Scrollbar extends ts.Motion {

touchstart(evt) {
const touch = evt.originalEvent.touches[0];
this._touch_start_y = touch.pageY;
this._touch_pos = this.pos_from_evt(touch);
this._start_position = this.position;
}

Expand All @@ -196,12 +208,13 @@ export class Scrollbar extends ts.Motion {
return;
}
const touch = evt.originalEvent.touches[0];
const deltaY = touch.pageY - this._touch_start_y;
this.position = this._start_position - deltaY;
const delta = this.pos_from_evt(touch) - this._touch_pos;
this.position = this._start_position - delta;
this.fade_timer();
}

touchend(evt) {
delete this._touch_start_y;
delete this._touch_pos;
delete this._start_position;
}

Expand Down
40 changes: 17 additions & 23 deletions src/cone/app/browser/static/cone/cone.app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -645,6 +645,17 @@ var cone = (function (exports, $, ts) {
set pointer_events(value) {
this.elem.css('pointer-events', value ? 'all' : 'none');
}
fade_timer() {
if (!this.scrollbar.is(':visible')) {
this.scrollbar.fadeIn('fast');
}
if (this.fade_out_timeout) {
clearTimeout(this.fade_out_timeout);
}
this.fade_out_timeout = setTimeout(() => {
this.scrollbar.fadeOut('slow');
}, 700);
}
on_is_mobile(val) {
if (val && this.contentsize > this.scrollsize) {
this.scrollbar.stop(true, true).show();
Expand Down Expand Up @@ -760,19 +771,20 @@ var cone = (function (exports, $, ts) {
}
touchstart(evt) {
const touch = evt.originalEvent.touches[0];
this._touch_start_y = touch.pageY;
this._touch_pos = this.pos_from_evt(touch);
this._start_position = this.position;
}
touchmove(evt) {
if (this.contentsize <= this.scrollsize) {
return;
}
const touch = evt.originalEvent.touches[0];
const deltaY = touch.pageY - this._touch_start_y;
this.position = this._start_position - deltaY;
const delta = this.pos_from_evt(touch) - this._touch_pos;
this.position = this._start_position - delta;
this.fade_timer();
}
touchend(evt) {
delete this._touch_start_y;
delete this._touch_pos;
delete this._start_position;
}
down(evt) {
Expand Down Expand Up @@ -1111,7 +1123,6 @@ var cone = (function (exports, $, ts) {
new ts.Property(this, 'is_compact', null);
new ts.Property(this, 'is_super_compact', null);
this.render_mobile_scrollbar = this.render_mobile_scrollbar.bind(this);
this.fade_mobile_scrollbar = this.fade_mobile_scrollbar.bind(this);
this.set_mode();
}
destroy() {
Expand All @@ -1123,28 +1134,12 @@ var cone = (function (exports, $, ts) {
this.mobile_scrollbar.render();
}
}
fade_mobile_scrollbar() {
if (this.mobile_scrollbar) {
if (!this.mobile_scrollbar.scrollbar.is(':visible')) {
this.mobile_scrollbar.scrollbar.fadeIn('fast');
}
if (this.fade_out_timeout) {
clearTimeout(this.fade_out_timeout);
}
this.fade_out_timeout = setTimeout(() => {
if (this.mobile_scrollbar) {
this.mobile_scrollbar.scrollbar.fadeOut('slow');
}
}, 700);
}
}
on_is_compact(val) {
if (val) {
this.elem.removeClass('full').removeClass('navbar-expand');
this.elem.addClass('compact');
this.navbar_content.addClass('scrollable-content');
this.mobile_scrollbar = new ScrollbarY(this.navbar_content_wrapper);
this.mobile_scrollbar.on('on_position', this.fade_mobile_scrollbar);
this.navbar_content_wrapper.on('shown.bs.collapse', () => {
$('html, body').css('overscroll-behavior', 'none');
this.mobile_scrollbar.render();
Expand All @@ -1159,7 +1154,6 @@ var cone = (function (exports, $, ts) {
this.elem.addClass('full').addClass('navbar-expand');
this.navbar_content.removeClass('scrollable-content');
if (this.mobile_scrollbar) {
this.mobile_scrollbar.off('on_position', this.fade_mobile_scrollbar);
this.mobile_scrollbar.destroy();
this.mobile_scrollbar = null;
}
Expand Down Expand Up @@ -1188,7 +1182,7 @@ var cone = (function (exports, $, ts) {
} else {
this.logo_placeholder.show();
}
this.is_compact = this.elem.outerWidth() < 768;
this.is_compact = this.elem.outerWidth() < 992;
this.is_super_compact = this.elem.outerWidth() < 576;
}
}
Expand Down
Loading

0 comments on commit e0f16c9

Please sign in to comment.