olyakonstantin/gallery
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started work on state toolbar...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-09-03 20:33:41 +03:00
parent c63494d736
commit 769b20600f
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
grid-n-view.html
View File

@ -75,7 +75,7 @@ For more info see: <a href="./README.md">README.md</a>
<button onclick="document.body.classList.toggle('gallery-dark')">◐</button>
<!-- XXX scrollbar still obeys gallery... -->
<button onclick="document.body.classList.toggle('lightbox-dark')">◐ (lightbox)</button>
<button onclick="gallery.toolbar.movable()">toggle toolbar drag</button>
<button onclick="gallery.toolbars.map(function(t){ t.movable() })">toggle toolbar drag</button>
<button onclick="gallery.toggleLoading()">toggle loading screen</button>
<hr>
@ -83,17 +83,29 @@ For more info see: <a href="./README.md">README.md</a>
<div class="gallery otter">
<!-- toolbar -->
<div class="toolbar-anchor">
<!-- toolbar: states... -->
<!--div class="toolbar fixed">
<button class="drag-handle" title="drag">drag_indicator</button>
<div>
<button onclick="gallery.crop('marked')" title="crop marked">select<sec>crossword</sec></button>
<button onclick="gallery.uncrop()" title="uncrop">select<sec>grid_on</sec></button>
<button onclick="gallery" title="save crop">crossword<sec>add</sec></button>
</div>
<div class="states">
<button title="1">1</button>
<button title="2">2</button>
<button title="3">3</button>
</div>
<button class="collapse" title="toggle toolbar (hold to make sticky)">keyboard_double_arrow_left</button>
</div-->
<!-- toolbar: general... -->
<div class="toolbar fixed">
<button class="drag-handle" title="drag">drag_indicator</button>
<div>
<button onclick="gallery" title="upload">cloud_upload</button>
<button onclick="gallery" title="save">save</button>
</div>
<!--div>
<button onclick="gallery" title="save">contrast</button>
</div-->
<div>
<!--button onclick="gallery.details.show()" title="info">imagesmode<sec>label</sec></button-->
<button onclick="gallery.details.show()" title="edit">imagesmode<sec>edit</sec></button>
</div>
<div>

21
grid-n-view.js
View File

@ -531,15 +531,20 @@ var Gallery = {
dom: undefined,
// XXX these are the same....
__toolbar: undefined,
get toolbar(){
// XXX add support for multiple toolbars...
__toolbars: undefined,
get toolbars(){
if(this.dom){
return this.__toolbar
?? (this.__toolbar = {__proto__: Toolbar }
var that = this
return this.__toolbars
?? (this.__toolbars =
[...this.dom.querySelectorAll('.toolbar')]
.map(function(toolbar){
return {__proto__: Toolbar}
.setup(
this.dom.querySelector('.toolbar'),
this)) }
delete this.__toolbar
toolbar,
that) })) }
delete this.__toolbars
return undefined },
__lightbox: undefined,
get lightbox(){
@ -1150,7 +1155,7 @@ var Gallery = {
var that = this
this.dom = dom
this.toolbar
this.toolbars
// image clicks...
this.dom.querySelector('.images')