Skip to content

Commit

Permalink
colormode and scrollbar JS cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@rnixx
rnixx committed May 25, 2024
1 parent 64f44a0 commit 1110582
Show file tree
Hide file tree
Showing 5 changed files with 196 additions and 221 deletions.
4 changes: 2 additions & 2 deletions js/src/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
BatchedItemsSize,
BatchedItemsSearch
} from './batcheditems.js';
import {Colormode} from './colormode.js';
import {ColorMode} from './colormode.js';
import {ColorToggler} from './colormode.js';
import {CopySupport} from './copysupport.js';
import {KeyBinder} from './keybinder.js';
Expand Down Expand Up @@ -39,7 +39,7 @@ export * from './utils.js';

$(function() {
new KeyBinder();
new Colormode();
new ColorMode();

ts.ajax.register(BatchedItemsSize.initialize, true);
ts.ajax.register(BatchedItemsSearch.initialize, true);
Expand Down
43 changes: 22 additions & 21 deletions js/src/colormode.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import ts from 'treibstoff';

export class Colormode extends ts.ChangeListener {
export class ColorMode {

static set_theme(theme, elem) {
if (theme === 'auto' && this.match_media.matches) {
elem.get(0).setAttribute('data-bs-theme', 'dark');
static set_theme(theme) {
const elem = document.documentElement;
if (theme === 'auto' && this.query.matches) {
elem.setAttribute('data-bs-theme', 'dark');
} else {
elem.get(0).setAttribute('data-bs-theme', theme);
elem.setAttribute('data-bs-theme', theme);
}
}

static get match_media() {
static get query() {
return window.matchMedia('(prefers-color-scheme: dark)');
}

Expand All @@ -26,20 +27,19 @@ export class Colormode extends ts.ChangeListener {
if (this.stored_theme) {
return this.stored_theme;
}
return this.match_media.matches ? 'dark' : 'light';
return this.query.matches ? 'dark' : 'light';
}

constructor() {
super({elem: $(document.documentElement)});
this.bind();
this.constructor.set_theme(this.constructor.preferred_theme, this.elem);
this.constructor.set_theme(this.constructor.preferred_theme);
}

bind() {
const stored_theme = this.stored_theme;
this.constructor.match_media.addEventListener('change', () => {
this.constructor.query.addEventListener('change', () => {
if (stored_theme !== 'light' || stored_theme !== 'dark') {
this.constructor.set_theme(this.constructor.preferred_theme, this.elem);
this.constructor.set_theme(this.constructor.preferred_theme);
}
});
}
Expand All @@ -58,24 +58,25 @@ export class ColorToggler extends ts.ChangeListener {
constructor(elem) {
super({elem: elem});
this.update();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
ColorMode.query.addEventListener('change', () => {
this.update();
});
}

update() {
const preferred_theme = Colormode.preferred_theme;
if (preferred_theme === 'dark' && !this.elem.is(':checked')) {
this.elem.get(0).checked = true;
} else if (preferred_theme == 'light' && this.elem.is(':checked')) {
this.elem.get(0).checked = false;
const preferred_theme = ColorMode.preferred_theme;
const elem = this.elem;
const checked = elem.is(':checked');
if (preferred_theme === 'dark' && !checked) {
elem.prop('checked', true);
} else if (preferred_theme === 'light' && checked) {
elem.prop('checked', false);
}
}

on_change() {
const document_elem = $(document.documentElement);
const theme = this.elem.is(':checked') ? 'dark' : 'light';
Colormode.set_theme(theme, document_elem);
Colormode.stored_theme = theme;
ColorMode.set_theme(theme);
ColorMode.stored_theme = theme;
}
}
}
90 changes: 37 additions & 53 deletions js/src/scrollbar.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import $ from 'jquery';
import ts from 'treibstoff';

export class Scrollbar extends ts.Events {
export class Scrollbar extends ts.Motion {

static initialize(context) {
$('.scrollable-x', context).each(function() {
Expand All @@ -21,7 +21,6 @@ export class Scrollbar extends ts.Events {

this.on_scroll = this.on_scroll.bind(this);
this.on_click = this.on_click.bind(this);
this.on_drag = this.on_drag.bind(this);
this.on_hover = this.on_hover.bind(this);
this.on_resize = this.on_resize.bind(this);

Expand Down Expand Up @@ -54,19 +53,18 @@ export class Scrollbar extends ts.Events {

bind() {
this.pointer_events = true;
this.elem.css('pointer-events', 'all');
this.elem.on('mousewheel wheel', this.on_scroll);
this.scrollbar.on('click', this.on_click);
this.thumb.on('mousedown', this.on_drag);
this.elem.on('mouseenter mouseleave', this.on_hover);
this.scrollbar.on('click', this.on_click);
this.set_scope(this.thumb, $(document));
$(window).on('resize', this.on_resize);
}

unbind() {
this.elem.off('mousewheel wheel', this.on_scroll);
this.scrollbar.off('click', this.on_click);
this.thumb.off('mousedown', this.on_drag);
this.elem.off('mouseenter mouseleave', this.on_hover);
this.scrollbar.off('click', this.on_click);
$(this.thumb).off('mousedown', this._down_handle);
$(window).off('resize', this.on_resize);
}

Expand Down Expand Up @@ -116,80 +114,66 @@ export class Scrollbar extends ts.Events {
this.render();
}

on_hover(e) {
e.preventDefault();
e.stopPropagation();
on_hover(evt) {
evt.preventDefault();
evt.stopPropagation();
const elem = this.elem;
if (
(elem.has(e.target).length > 0 || elem.is(e.target)) &&
(elem.has(evt.target).length > 0 || elem.is(evt.target)) &&
this.contentsize > this.scrollsize
) {
if (e.type === 'mouseenter') {
if (evt.type === 'mouseenter') {
this.scrollbar.stop(true, true).fadeIn();
} else if (e.type === 'mouseleave' && e.relatedTarget !== elem.get(0)) {
} else if (
evt.type === 'mouseleave' &&
evt.relatedTarget !== elem.get(0)
) {
this.scrollbar.stop(true, true).fadeOut();
}
}
}

on_scroll(e) {
on_scroll(evt) {
if (this.contentsize <= this.scrollsize) {
return;
}
let evt = e.originalEvent;
if (typeof evt.deltaY === 'number') {
// down
if(evt.deltaY > 0) {
let evt_ = evt.originalEvent;
if (typeof evt_.deltaY === 'number') {
if (evt_.deltaY > 0) { // down
this.position += this.scroll_step;
}
// up
else if(evt.deltaY < 0) {
} else if (evt_.deltaY < 0) { // up
this.position -= this.scroll_step;
}
}
}

on_click(e) {
e.preventDefault(); // prevent text selection
on_click(evt) {
evt.preventDefault(); // prevent text selection
this.thumb.addClass('active');
let position = this.pos_from_evt(e),
let position = this.pos_from_evt(evt),
thumb_pos = position - this.offset - this.thumbsize / 2;
this.position = this.contentsize * thumb_pos / this.scrollsize;
this.thumb.removeClass('active');
}

on_drag(e) {
e.preventDefault();
var evt = $.Event('dragstart');
$(window).trigger(evt);

function on_move(e) {
let mouse_pos_on_move = this.pos_from_evt(e) - this.offset,
new_thumb_pos = thumb_position + mouse_pos_on_move - mouse_pos;
this.position = this.contentsize * new_thumb_pos / this.scrollsize;
}

function on_up() {
var evt = $.Event('dragend');
$(window).trigger(evt);
$(document)
.off('mousemove', _on_move)
.off('mouseup', _on_up);
this.thumb.removeClass('active');
this.elem.on('mouseenter mouseleave', this.on_hover);
}

let _on_move = on_move.bind(this),
_on_up = on_up.bind(this),
mouse_pos = this.pos_from_evt(e) - this.offset,
thumb_position = this.position / (this.contentsize / this.scrollsize);
down(evt) {
this._mouse_pos = this.pos_from_evt(evt) - this.offset;
this._thumb_pos = this.position / (this.contentsize / this.scrollsize);
this.elem.off('mouseenter mouseleave', this.on_hover);
this.thumb.addClass('active');
}

this.elem.off('mouseenter mouseleave', this.on_hover);
move(evt) {
let mouse_pos = this.pos_from_evt(evt) - this.offset,
thumb_pos = this._thumb_pos + mouse_pos - this._mouse_pos;
this.position = this.contentsize * thumb_pos / this.scrollsize;
}

$(document)
.on('mousemove', _on_move)
.on('mouseup', _on_up);
up(evt) {
delete this._mouse_pos;
delete this._thumb_pos;
this.elem.on('mouseenter mouseleave', this.on_hover);
this.thumb.removeClass('active');
}
}

Expand Down
Loading

0 comments on commit 1110582

Please sign in to comment.