better navigation (testing) + image number indicator in lightbox...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
582f4380cc
commit
04d8f9ea8d
@ -20,19 +20,22 @@
|
||||
|
||||
<h3>ToDo</h3>
|
||||
<pre>
|
||||
- Lightbox: indicators:
|
||||
- start/end (a-la ImageGrid.Viewer)
|
||||
- next/prev
|
||||
- <s>count</s>
|
||||
- <s>selection</s>
|
||||
- <s>Gallery: Adaptable image justification in grid</s>
|
||||
- Can we make this passive??? (i.e. CSS only)
|
||||
- <s>Make more accurate -- align right side to pixel...</s>
|
||||
- <s>Gallery: Spacial navigation (up/down/left/right)</s>
|
||||
- <b>do auto focus current image iff the gallery is visible</b>
|
||||
- handle focus (???)
|
||||
- <s>option: .loop_images (in porgress)</s>
|
||||
- non-looping: indicate start/end (a-la ImageGrid.Viewer)
|
||||
- Up/Down: might be a good idea to err slightly to the left
|
||||
- <b>might be a good idea to select an image based on longest border
|
||||
instead of closest center (current)...</b>
|
||||
- <b>auto focus current image iff the gallery is visible</b>
|
||||
- handle focus / tabindex (???)
|
||||
- <s>option: .loop_images</s>
|
||||
- <s>Up/Down: might be a good idea to select an image based on
|
||||
longest border instead of closest center (current)...</s>
|
||||
- Gallery: PageUp/PageDown, home/end + allow page navigation
|
||||
- <b>Gallery: focus visible (if no current)...</b>
|
||||
- <b>Gallery: focus visible (if no current and partially scrolled)...</b>
|
||||
- <s>Gallery/Lightbox: Selection of images (space / ctrl-a / ctrl-d / ctrl-i)</s>
|
||||
- <s>Lightbox: show selection marker</s>
|
||||
- <b>Gallery: constructor (list of urls)</b>
|
||||
|
||||
@ -166,6 +166,34 @@ var Gallery = {
|
||||
|
||||
click_to_select: true,
|
||||
|
||||
// Mode to select the above/below image...
|
||||
//
|
||||
//
|
||||
// - -----+-------------+
|
||||
// | . |
|
||||
// | current |
|
||||
// | . |
|
||||
// - --+-------+---.---+--.--+
|
||||
// | . | . |
|
||||
// | B | A |
|
||||
// | . | . |
|
||||
// - --+---------------+-----+
|
||||
// ^ ^ ^
|
||||
// c i c
|
||||
//
|
||||
// Here, A has the closest center (c) to current but B has the closest
|
||||
// center of intersection (i), thus the two approaches will yield
|
||||
// different results, moving down from current:
|
||||
// current ----(center)----> A
|
||||
// current -(intersection)-> B
|
||||
//
|
||||
// can be:
|
||||
// 'intersection' - closest center of intersecting part to center
|
||||
// of current image.
|
||||
// 'center' - closest center of image to current image center
|
||||
// XXX remove this when/if the selected options feels natural...
|
||||
vertical_navigate_mode: 'intersection',
|
||||
|
||||
|
||||
code: `
|
||||
<div class="gallery">
|
||||
@ -230,6 +258,11 @@ var Gallery = {
|
||||
.replace(/\/[0-9]+px\//, '/') }) },
|
||||
//*/
|
||||
|
||||
get length(){
|
||||
return this.images.length },
|
||||
get index(){
|
||||
return this.images.indexOf(this.current) },
|
||||
|
||||
getRow: function(img, direction='current'){
|
||||
if(['above', 'current', 'below'].includes(img)){
|
||||
direction = img
|
||||
@ -295,17 +328,31 @@ var Gallery = {
|
||||
?? this.current
|
||||
?? this.getRow(img)[0]
|
||||
// above/below...
|
||||
// get image with closest center to target image center...
|
||||
} else if(direction == 'above' || direction == 'below'){
|
||||
var row = this.getRow(direction)
|
||||
if(row == null){
|
||||
return undefined }
|
||||
var cur = this.current
|
||||
?? row[0]
|
||||
// image center point...
|
||||
var c = cur.offsetLeft + cur.offsetWidth/2
|
||||
var target
|
||||
var min
|
||||
for(var img of row){
|
||||
var n = img.offsetLeft + img.offsetWidth/2
|
||||
// length of intersection...
|
||||
if(this.vertical_navigate_mode == 'intersection'){
|
||||
var l = Math.max(
|
||||
img.offsetLeft,
|
||||
cur.offsetLeft)
|
||||
var r = Math.min(
|
||||
img.offsetLeft + img.offsetWidth,
|
||||
cur.offsetLeft + cur.offsetWidth)
|
||||
var w = r - l
|
||||
var n = l + w/2
|
||||
// closest center...
|
||||
} else {
|
||||
var n = img.offsetLeft + img.offsetWidth/2 }
|
||||
var d = Math.abs(n - c)
|
||||
min = min ?? d
|
||||
if(d <= min){
|
||||
@ -504,6 +551,8 @@ var Lightbox = {
|
||||
dom: undefined,
|
||||
gallery: undefined,
|
||||
|
||||
caption_format: '${INDEX} ${CAPTION}',
|
||||
|
||||
navigation_deadzone: 100,
|
||||
caption_hysteresis: 10,
|
||||
cache_count: 1,
|
||||
@ -537,13 +586,19 @@ var Lightbox = {
|
||||
: this.show() },
|
||||
|
||||
update: function(){
|
||||
// set caption...
|
||||
this.dom.setAttribute('caption',
|
||||
var caption =
|
||||
(this.gallery.current
|
||||
?? this.gallery.next().current
|
||||
?? {})
|
||||
.getAttribute('caption')
|
||||
?? '')
|
||||
?? ''
|
||||
var index = (this.gallery.index+1) +'/'+ this.gallery.length
|
||||
// set caption...
|
||||
// XXX should these be separate elements???
|
||||
this.dom.setAttribute('caption',
|
||||
this.caption_format
|
||||
.replace(/\${CAPTION}/, caption)
|
||||
.replace(/\${INDEX}/, index))
|
||||
// set selection...
|
||||
this.gallery.current.classList.contains('selected') ?
|
||||
this.dom.classList.add('selected')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user