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

added selection...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-07-20 21:42:17 +03:00
parent 802fe8193b
commit 03a79d3f22
3 changed files with 128 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
css/grid-n-view.css
View File

@ -62,32 +62,54 @@ body {
/* XXX need to account for scrollbar popping in and out */ /* XXX need to account for scrollbar popping in and out */
.gallery { .gallery {
position: relative;
display: flex;
justify-content: flex-start;
align-content: flex-start;
flex-flow: row wrap;
margin-left: var(--gallery-scrollbar-width); margin-left: var(--gallery-scrollbar-width);
margin-right: 0; margin-right: 0;
color: var(--gallery-text-color); color: var(--gallery-text-color);
background: var(--gallery-background-color); background: var(--gallery-background-color);
} }
.gallery img { .gallery .images {
position: relative;
display: flex;
justify-content: flex-start;
align-content: flex-start;
flex-flow: row wrap;
}
.gallery .images img {
height: 300px; height: 300px;
width: auto; width: auto;
image-rendering: crisp-edges; image-rendering: crisp-edges;
box-sizing: border-box; box-sizing: border-box;
} }
.gallery>img { .gallery .images img {
cursor: hand; cursor: hand;
} }
.gallery img.current { .gallery .images img.current {
border: solid 2px red; border: solid 2px red;
} }
/*************************************************** Image markers ***/
.gallery .images img+.mark {
position: relative;
}
/* marker: selected */
.gallery .images img+.mark.selected:after {
content: "";
position: absolute;
display: block;
width: 1em;
height: 1em;
right: 0.5em;
bottom: 0.5em;
border-radius: 50%;
background: blue;
}
/******************************************************* Lightbox ****/ /******************************************************* Lightbox ****/
.gallery .lightbox { .gallery .lightbox {

28
grid-n-view.html
View File

@ -19,25 +19,25 @@
<body onload="setup()"> <body onload="setup()">
<div class="gallery"> <div class="gallery">
<!-- gallery: content -->
<div class="images">
<img src="images/500px/1.JPG" caption="Caption text">
<img src="images/500px/2.JPG">
<img src="images/500px/3.JPG">
<img src="images/500px/DSC08102.jpg">
<img src="images/500px/4.JPG">
<img src="images/500px/5.JPG">
<img src="images/500px/DSC08102.jpg">
<img src="images/500px/6.JPG">
<img src="images/500px/DSC08102.jpg">
<img src="images/500px/2.JPG">
<img src="images/500px/5.JPG">
</div>
<!-- lightbox --> <!-- lightbox -->
<div class="lightbox"> <div class="lightbox">
<img> <img>
<div class="button close"></div> <div class="button close"></div>
</div> </div>
<!-- gallery: content -->
<img src="images/500px/1.JPG" caption="Caption text">
<img src="images/500px/2.JPG">
<img src="images/500px/3.JPG">
<img src="images/500px/DSC08102.jpg">
<img src="images/500px/4.JPG">
<img src="images/500px/5.JPG">
<img src="images/500px/DSC08102.jpg">
<img src="images/500px/6.JPG">
<img src="images/500px/DSC08102.jpg">
<img src="images/500px/2.JPG">
<img src="images/500px/5.JPG">
</div> </div>
</body> </body>

104
grid-n-view.js
View File

@ -110,6 +110,24 @@ var keyboard = {
Escape: function(){ Escape: function(){
gallery.lightbox.shown gallery.lightbox.shown
&& gallery.lightbox.hide() }, && gallery.lightbox.hide() },
// selection...
' ': function(evt){
gallery.current
&& evt.preventDefault()
gallery.toggleSelect() },
// XXX use key codes...
'a': function(evt){
evt.preventDefault()
if(evt.ctrlKey){
gallery.selectAll() } },
'd': function(evt){
evt.preventDefault()
if(evt.ctrlKey){
gallery.deselectAll() } },
'i': function(evt){
evt.preventDefault()
if(evt.ctrlKey){
gallery.selectInverse() } },
} }
@ -131,9 +149,9 @@ var Gallery = {
return undefined }, return undefined },
get current(){ get current(){
return this.dom.querySelector('img.current') }, return this.dom.querySelector('.images img.current') },
set current(img){ set current(img){
for(var i of this.dom.querySelectorAll('img.current')){ for(var i of this.dom.querySelectorAll('.images img.current')){
i.classList.remove('current') } i.classList.remove('current') }
img.classList.add('current') img.classList.add('current')
img.scrollIntoView({ img.scrollIntoView({
@ -141,34 +159,41 @@ var Gallery = {
block: 'nearest', block: 'nearest',
}) }, }) },
// XXX should this be writable???
get images(){
return [...this.dom.querySelectorAll('.images img')] },
getRow: function(img, direction='current'){ getRow: function(img, direction='current'){
if(['above', 'current', 'below'].includes(img)){ if(['above', 'current', 'below'].includes(img)){
direction = img direction = img
img = null } img = this.current }
// get above/below row... // get above/below row...
// XXX these are wastefull... // XXX these are wastefull...
if(direction == 'above'){ if(direction == 'above'){
var row = this.getRow(img) var row = this.getRow(img)
var e = row[0].previousSibling var e = row[0].previousElementSibling
while(e && e.tagName != 'IMG'){ while(e && e.tagName != 'IMG'){
e = e.previousSibling } e = e.previousElementSibling }
return e ? return e ?
this.getRow(e) this.getRow(e)
: this.getRow([...this.dom.querySelectorAll('img')].at(-1)) : this.getRow(this.images.at(-1))
} else if(direction == 'below'){ } else if(direction == 'below'){
// special case: nothing selected...
if(img == null){
return this.getRow() }
var row = this.getRow(img) var row = this.getRow(img)
var e = row.at(-1).nextSibling var e = row.at(-1).nextElementSibling
while(e && e.tagName != 'IMG'){ while(e && e.tagName != 'IMG'){
e = e.nextSibling } e = e.nextElementSibling }
return e ? return e ?
this.getRow(e) this.getRow(e)
: this.getRow([...this.dom.querySelectorAll('img')][1]) } : this.getRow(this.images[0]) }
// get current row... // get current row...
var cur = img var cur = img
?? this.current ?? this.current
if(cur == null){ if(cur == null){
var scroll = getScrollParent(this.dom).scrollTop var scroll = getScrollParent(this.dom).scrollTop
var images = [...this.dom.querySelectorAll('img')].slice(1) var images = this.images
for(cur of images){ for(cur of images){
if(cur.offsetTop >= scroll){ if(cur.offsetTop >= scroll){
break } } } break } } }
@ -177,16 +202,16 @@ var Gallery = {
var e = cur var e = cur
while(e && e.offsetTop == top){ while(e && e.offsetTop == top){
row.push(e) row.push(e)
e = e.nextSibling e = e.nextElementSibling
while(e && e.tagName != 'IMG'){ while(e && e.tagName != 'IMG'){
e = e.nextSibling } } e = e.nextElementSibling } }
e = cur e = cur
while(e && e.offsetTop == top){ while(e && e.offsetTop == top){
e === cur e === cur
|| row.unshift(e) || row.unshift(e)
e = e.previousSibling e = e.previousElementSibling
while(e && e.tagName != 'IMG'){ while(e && e.tagName != 'IMG'){
e = e.previousSibling } } e = e.previousElementSibling } }
return row }, return row },
getImage: function(img, direction='current'){ getImage: function(img, direction='current'){
if(['left', 'above', 'current', 'below', 'right'].includes(img)){ if(['left', 'above', 'current', 'below', 'right'].includes(img)){
@ -196,7 +221,7 @@ var Gallery = {
if(direction == 'current'){ if(direction == 'current'){
return img return img
?? this.current ?? this.current
?? this.getRow(img) ?? this.getRow(img)[0]
// above/below... // above/below...
} else if(direction == 'above' || direction == 'below'){ } else if(direction == 'above' || direction == 'below'){
var row = this.getRow(direction) var row = this.getRow(direction)
@ -232,7 +257,7 @@ var Gallery = {
// XXX cache image list??? // XXX cache image list???
prev: function(){ prev: function(){
var images = [...this.dom.querySelectorAll('img')].slice(1) var images = this.images
var i = this.current == null ? var i = this.current == null ?
images.length-1 images.length-1
: images.indexOf(this.current)-1 : images.indexOf(this.current)-1
@ -242,7 +267,7 @@ var Gallery = {
this.current = images[i] this.current = images[i]
return this }, return this },
next: function(){ next: function(){
var images = [...this.dom.querySelectorAll('img')].slice(1) var images = this.images
var i = this.current == null ? var i = this.current == null ?
0 0
: images.indexOf(this.current)+1 : images.indexOf(this.current)+1
@ -276,9 +301,46 @@ var Gallery = {
this.current = this.getImage('below') this.current = this.getImage('below')
return this }, return this },
// XXX // selection...
get selected(){
return this.dom.querySelectorAll('.images img.selected') },
updateMarkers: function(){
// select...
for(var img of this.dom.querySelectorAll('.images img.selected')){
var mark = img.nextElementSibling
while(mark && mark.tagName != 'IMG' && !mark.classList.contains('mark')){
mark = img.nextElementSibling }
if(!mark || !mark.classList.contains('mark')){
mark = document.createElement('div')
mark.classList.add('selected', 'mark')
img.after(mark) } }
// clear deselected...
for(var mark of this.dom.querySelectorAll('.images img:not(.selected)+.mark')){
mark.remove() }
return this },
select: function(){ select: function(){
}, this.current?.classList.add('selected')
return this.updateMarkers() },
deselect: function(){
this.current?.classList.remove('selected')
return this.updateMarkers() },
toggleSelect: function(){
this.current?.classList.toggle('selected')
this.updateMarkers()
return this },
selectAll: function(){
for(var img of this.images){
img.classList.add('selected') }
return this.updateMarkers() },
deselectAll: function(){
for(var img of this.images){
img.classList.remove('selected') }
return this.updateMarkers() },
selectInverse: function(){
for(var img of this.images){
img.classList.toggle('selected') }
return this.updateMarkers() },
show: function(){ show: function(){
this.lightbox.show() this.lightbox.show()
@ -435,7 +497,7 @@ var setupGallery = function(gallery){
.setup(gallery) } .setup(gallery) }
var setup = function(){ var setup = function(){
patchFlexRows([...document.querySelectorAll('.gallery>img')]) patchFlexRows([...document.querySelectorAll('.gallery .images img')])
var galleries = document.body.querySelectorAll('.gallery') var galleries = document.body.querySelectorAll('.gallery')
for(var gallery of galleries){ for(var gallery of galleries){
@ -447,7 +509,7 @@ var setup = function(){
if(key in keyboard){ if(key in keyboard){
keyboard[key](evt) } }) keyboard[key](evt) } })
window.addEventListener('resize', function(){ window.addEventListener('resize', function(){
patchFlexRows([...document.querySelectorAll('.gallery>img')]) }) patchFlexRows([...document.querySelectorAll('.gallery .images img')]) })
} }