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> <button onclick="document.body.classList.toggle('gallery-dark')">◐</button>
<!-- XXX scrollbar still obeys gallery... --> <!-- XXX scrollbar still obeys gallery... -->
<button onclick="document.body.classList.toggle('lightbox-dark')">◐ (lightbox)</button> <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> <button onclick="gallery.toggleLoading()">toggle loading screen</button>
<hr> <hr>
@ -83,17 +83,29 @@ For more info see: <a href="./README.md">README.md</a>
<div class="gallery otter"> <div class="gallery otter">
<!-- toolbar --> <!-- toolbar -->
<div class="toolbar-anchor"> <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"> <div class="toolbar fixed">
<button class="drag-handle" title="drag">drag_indicator</button> <button class="drag-handle" title="drag">drag_indicator</button>
<div> <div>
<button onclick="gallery" title="upload">cloud_upload</button> <button onclick="gallery" title="upload">cloud_upload</button>
<button onclick="gallery" title="save">save</button> <button onclick="gallery" title="save">save</button>
</div> </div>
<!--div>
<button onclick="gallery" title="save">contrast</button>
</div-->
<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> <button onclick="gallery.details.show()" title="edit">imagesmode<sec>edit</sec></button>
</div> </div>
<div> <div>

23
grid-n-view.js
View File

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