From 55c2dc83ca938d3350bffdc99aabe7e074dc457b Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 18 Aug 2023 09:11:58 +0300 Subject: [PATCH] split out the toolbar into a separate object... Signed-off-by: Alex A. Naanou --- grid-n-view.html | 6 ++ grid-n-view.js | 223 +++++++++++++++++++++++++++++------------------ 2 files changed, 145 insertions(+), 84 deletions(-) diff --git a/grid-n-view.html b/grid-n-view.html index ebb8214..d116ded 100644 --- a/grid-n-view.html +++ b/grid-n-view.html @@ -86,6 +86,12 @@ For more info see: README.md
+

Settings

+ + + +
+
diff --git a/grid-n-view.js b/grid-n-view.js index 0764c6b..277fc4e 100644 --- a/grid-n-view.js +++ b/grid-n-view.js @@ -117,6 +117,9 @@ function(elem){ parent = elem.parentElement } return parent } + +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + // XXX also need to check if scrolled under something... var isVisible = function(elem) { @@ -128,6 +131,8 @@ function(elem) { && rect.right <= (window.innerWidth || document.documentElement.clientWidth) } +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + // XXX move to types.js... var ruler var px2rem = function(px){ @@ -145,6 +150,8 @@ var rem2px = function(rem){ var px = ruler.offsetWidth return px } +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + var getTouch = function(evt, id){ if(id != null && id !== false && evt.targetTouches){ for(var k in evt.targetTouches){ @@ -152,6 +159,14 @@ var getTouch = function(evt, id){ return evt.targetTouches[k] } } } } +// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +// XXX might be a good idea to allow bounds to be: +// string - css selector +// element - +// XXX might be a good idea to either: +// - scroll into view the dragged element +// - bound it by screen // XXX need to check if element already set as movable... var moveable = function(elem, options={}){ if(elem.dataset.movable){ @@ -421,9 +436,6 @@ var Gallery = { // XXX remove this when/if the selected options feels natural... vertical_navigate_mode: 'intersection', - toolbar_hold: 300, - toolbar_autohide: 2000, - code: `
@@ -438,6 +450,17 @@ var Gallery = { dom: undefined, + // XXX these are the same.... + __toolbar: undefined, + get toolbar(){ + if(this.dom){ + return this.__toolbar + ?? (this.__toolbar = {__proto__: Toolbar } + .setup( + this.dom.querySelector('.toolbar'), + this)) } + delete this.__toolbar + return undefined }, __lightbox: undefined, get lightbox(){ if(this.dom){ @@ -985,91 +1008,11 @@ var Gallery = { this.dom.querySelector('.images').innerHTML = '' return this }, - toggleToolbar: function(action='toggle'){ - var toolbar = this.dom.querySelector('.toolbar')?.classList - toolbar - && (action == 'toggle' ? - toolbar.toggle('shown') - : action == 'show' ? - toolbar.add('shown') - : toolbar.remove('shown')) - return this }, - setup: function(dom){ var that = this this.dom = dom - // toolbar... - var toolbar = this.dom.querySelector('.toolbar') - var toolbar_moving = false - // prevent clicks in toolbar from affecting the gallery... - toolbar - .addEventListener('click', function(evt){ - evt.stopPropagation() }) - - // toolbar: collapse: click, hold to make sticky... - var hold_timeout - var holding_toggle - var handleInteractionStart = function(evt){ - holding_toggle = true - hold_timeout = setTimeout( - function(){ - hold_timeout = undefined - toolbar.classList.toggle('sticky') }, - that.toolbar_hold ?? 300) } - var handleInteractionEnd = function(evt){ - if(holding_toggle){ - holding_toggle = false - evt.preventDefault() - if(hold_timeout){ - clearTimeout(hold_timeout) - hold_timeout = undefined - that.toggleToolbar() } }} - var collapse_button = toolbar.querySelector('.collapse') - collapse_button.addEventListener('touchstart', handleInteractionStart) - collapse_button.addEventListener('mousedown', handleInteractionStart) - collapse_button.addEventListener('touchend', handleInteractionEnd) - collapse_button.addEventListener('mouseup', handleInteractionEnd) - - // toolbar: autohide... - var hide_timeout - var toolbarAutoHideTimerStart = function(evt){ - if(that.toolbar_autohide == 0 - || toolbar.classList.contains('sticky')){ - return } - hide_timeout = setTimeout( - function(){ - hide_timeout = undefined - that.toggleToolbar('hide') }, - that.toolbar_autohide ?? 1000) } - var toolbarAutoHideCancel = function(evt){ - hide_timeout - && clearTimeout(hide_timeout) - hide_timeout = undefined } - toolbar.addEventListener('mouseout', toolbarAutoHideTimerStart) - toolbar.addEventListener('touchend', toolbarAutoHideTimerStart) - toolbar.addEventListener('mouseover', toolbarAutoHideCancel) - toolbar.addEventListener('touchstart', toolbarAutoHideCancel) - - // toolbar: move... - // XXX to drag anywhere on the elem we need to prevent - // clicks while dragging... - moveable(toolbar, { - cls: 'moving', - handle: '.drag-handle', - // set bounds... - start: function(elem, data){ - if(elem.classList.contains('fixed')){ - return false } - data.bounds = { - top: 0, - left: 0, - right: that.dom.offsetWidth - elem.offsetWidth - 20, - bottom: that.dom.offsetHeight - elem.offsetHeight - 20, - } }, - move: function(elem, data){ - elem.style.setProperty('--move-x', data.x + 'px') - elem.style.setProperty('--move-y', data.y + 'px') }, }) + this.toolbar // image clicks... this.dom.querySelector('.images') @@ -1272,6 +1215,118 @@ var Gallery = { } +//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +var Toolbar = { + dom: undefined, + gallery: undefined, + cls: 'toolbar', + + hold: 300, + + toolbar_autohide: 2000, + + // XXX make these generic... + toggle: function(action='toggle'){ + var toolbar = this.dom?.classList + toolbar + && (action == 'toggle' ? + toolbar.toggle('shown') + : action == 'on' ? + toolbar.add('shown') + : toolbar.remove('shown')) + return this }, + movable: function(action='toggle'){ + var toolbar = this.dom?.classList + toolbar + && (action == 'toggle' ? + toolbar.toggle('fixed') + : action == 'off' ? + toolbar.add('fixed') + : toolbar.remove('fixed')) + return this }, + + setup: function(dom, gallery){ + var that = this + this.dom = dom + this.gallery = gallery + + // toolbar... + var toolbar = this.dom + var toolbar_moving = false + // prevent clicks in toolbar from affecting the gallery... + toolbar + .addEventListener('click', function(evt){ + evt.stopPropagation() }) + + // toolbar: collapse: click, hold to make sticky... + var hold_timeout + var holding_toggle + var handleInteractionStart = function(evt){ + holding_toggle = true + hold_timeout = setTimeout( + function(){ + hold_timeout = undefined + toolbar.classList.toggle('sticky') }, + that.hold ?? 300) } + var handleInteractionEnd = function(evt){ + if(holding_toggle){ + holding_toggle = false + evt.preventDefault() + if(hold_timeout){ + clearTimeout(hold_timeout) + hold_timeout = undefined + that.toggle() } }} + var collapse_button = toolbar.querySelector('.collapse') + collapse_button.addEventListener('touchstart', handleInteractionStart) + collapse_button.addEventListener('mousedown', handleInteractionStart) + collapse_button.addEventListener('touchend', handleInteractionEnd) + collapse_button.addEventListener('mouseup', handleInteractionEnd) + + // toolbar: autohide... + var hide_timeout + var toolbarAutoHideTimerStart = function(evt){ + if(that.autohide == 0 + || toolbar.classList.contains('sticky')){ + return } + hide_timeout = setTimeout( + function(){ + hide_timeout = undefined + that.toggle('hide') }, + that.autohide ?? 1000) } + var toolbarAutoHideCancel = function(evt){ + hide_timeout + && clearTimeout(hide_timeout) + hide_timeout = undefined } + toolbar.addEventListener('mouseout', toolbarAutoHideTimerStart) + toolbar.addEventListener('touchend', toolbarAutoHideTimerStart) + toolbar.addEventListener('mouseover', toolbarAutoHideCancel) + toolbar.addEventListener('touchstart', toolbarAutoHideCancel) + + // toolbar: move... + // XXX to drag anywhere on the elem we need to prevent + // clicks while dragging... + moveable(toolbar, { + cls: 'moving', + handle: '.drag-handle', + // set bounds... + start: function(elem, data){ + if(elem.classList.contains('fixed')){ + return false } + data.bounds = { + top: 0, + left: 0, + right: that.gallery.dom.offsetWidth - elem.offsetWidth - 20, + bottom: that.gallery.dom.offsetHeight - elem.offsetHeight - 20, + } }, + move: function(elem, data){ + elem.style.setProperty('--move-x', data.x + 'px') + elem.style.setProperty('--move-y', data.y + 'px') }, }) + + return this }, +} + + //- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - // This is a prototype for all modal views...