mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 10:20:08 +00:00
more work on dynamic loading, rewritten gid search (now simple to debug and appears to be correct-ish)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
63193db367
commit
345c9b7286
125
ui/ImageGrid.js
125
ui/ImageGrid.js
@ -146,6 +146,60 @@ function getImageBefore(image, ribbon, mode){
|
||||
return $(prev)
|
||||
}
|
||||
|
||||
// XXX this gets infinite at the start and end of the list...
|
||||
function binSearch(target, lst, check){
|
||||
// special case: target in the list directly...
|
||||
if(check(target, lst.indexOf(target), lst) == 0){
|
||||
return target
|
||||
}
|
||||
// special case: tail...
|
||||
if(check(target, lst.length-1, lst) >= 0){
|
||||
return lst[lst.length-1]
|
||||
}
|
||||
// special case: head...
|
||||
if(check(target, 0, lst) == 0){
|
||||
return lst[0]
|
||||
}
|
||||
|
||||
var l = Math.ceil(lst.length/2)
|
||||
var i = l
|
||||
var res
|
||||
|
||||
while(l > 0){
|
||||
l = Math.ceil(l/2)
|
||||
res = check(target, i, lst)
|
||||
// right branch...
|
||||
if(res > 0){
|
||||
i += l
|
||||
// left branch...
|
||||
} else if(res < 0){
|
||||
i -= l
|
||||
// hit...
|
||||
} else {
|
||||
// XXX return position or object???
|
||||
return lst[i]
|
||||
}
|
||||
}
|
||||
// no hit...
|
||||
return null
|
||||
}
|
||||
|
||||
function isBetween(a, i, lst){
|
||||
var b = lst[i]
|
||||
var c = lst[i+1]
|
||||
// hit...
|
||||
if(a == b || (a > b && a < c)){
|
||||
return 0
|
||||
// before...
|
||||
} else if(a < b){
|
||||
return -1
|
||||
// later...
|
||||
} else {
|
||||
return 1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// same as getImageBefore, but uses gids and searches in DATA...
|
||||
// XXX check for corner cases...
|
||||
// XXX getGIDBefore(1, 1) does not work...
|
||||
@ -153,33 +207,22 @@ function getGIDBefore(gid, ribbon){
|
||||
ribbon = DATA.ribbons[ribbon]
|
||||
var order = DATA.order
|
||||
|
||||
var target = ribbon.indexOf(gid)
|
||||
|
||||
if(target >= 0){
|
||||
return gid
|
||||
}
|
||||
|
||||
target = order.indexOf(gid)
|
||||
|
||||
var i = ribbon.length
|
||||
|
||||
while(i > 0){
|
||||
i = Math.floor(ribbon.length/2)
|
||||
|
||||
console.log('>>>', target, i, order.indexOf(ribbon[i]), order.indexOf(ribbon[i+1]))
|
||||
|
||||
if(target >= order.indexOf(ribbon[i]) && target < order.indexOf(ribbon[i+1])){
|
||||
return ribbon[i]
|
||||
|
||||
// XXX I do not understand why this works correctly, think I need some sleep...
|
||||
} else if(target < order.indexOf(ribbon[i])){
|
||||
ribbon = ribbon.slice(0, i)
|
||||
var target = order.indexOf(gid)
|
||||
|
||||
return binSearch(target, ribbon, function (a, i, lst){
|
||||
var b = order.indexOf(lst[i])
|
||||
var c = order.indexOf(lst[i+1])
|
||||
// hit...
|
||||
if(a == b || (a > b && a < c)){
|
||||
return 0
|
||||
// before...
|
||||
} else if(a < b){
|
||||
return -1
|
||||
// later...
|
||||
} else {
|
||||
ribbon = ribbon.slice(i)
|
||||
return 1
|
||||
}
|
||||
}
|
||||
return null
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -453,8 +496,30 @@ function updateImage(image, gid, size){
|
||||
//
|
||||
// NOTE: this will reload the current image elements...
|
||||
// NOTE: this is similar to extendRibbon(...) but different in interface...
|
||||
function loadImages(image, count, ribbon){
|
||||
// XXX
|
||||
function loadImages(ref_gid, count, ribbon){
|
||||
ribbon = $(ribbon)
|
||||
var images = ribbon.find('.image')
|
||||
var ribbon_i = getRibbonIndex(ribbon)
|
||||
var gid = getGIDBefore(ref_gid, ribbon_i)
|
||||
|
||||
// start/end points...
|
||||
var from_i = DATA.ribbons[ribbon_i].indexOf(gid) - Math.floor(count/2)
|
||||
from_i = from_i < 0 ? 0 : from_i
|
||||
var from_gid = DATA.ribbons[ribbon_i][from_i]
|
||||
|
||||
// XXX make this load only what is needed instead of reloading everything...
|
||||
|
||||
var size = getVisibleImageSize()
|
||||
var gids = getImageGIDs(from_gid, count)
|
||||
// XXX is this the only special case???
|
||||
if(from_gid == from_gid){
|
||||
gids.splice(0, 0, ref_gid)
|
||||
}
|
||||
|
||||
return createImages(gids.length, images.detach())
|
||||
.each(function(i, e){
|
||||
updateImage(e, gids[i], size)
|
||||
}).appendTo(ribbon)
|
||||
}
|
||||
|
||||
|
||||
@ -644,6 +709,10 @@ function centerImage(image, mode){
|
||||
//mode = 'css'
|
||||
mode = 'animate'
|
||||
}
|
||||
|
||||
// XXX is this the correct spot for this?
|
||||
$('.viewer').trigger('preCenteringRibbon', [getRibbon(image), image])
|
||||
|
||||
if(image == null || image.length == 0){
|
||||
image = $('.current.image')
|
||||
}
|
||||
@ -701,6 +770,7 @@ function centerImage(image, mode){
|
||||
// ...or make a generic centering function...
|
||||
//
|
||||
// XXX this does not work in marked-only mode...
|
||||
// XXX this needs the image to exist... should be GID compatible...
|
||||
function centerRibbon(ribbon, image, mode){
|
||||
if(mode == null){
|
||||
//mode = 'css'
|
||||
@ -716,6 +786,9 @@ function centerRibbon(ribbon, image, mode){
|
||||
return ribbon
|
||||
}
|
||||
|
||||
// XXX is this the correct spot for this?
|
||||
$('.viewer').trigger('preCenteringRibbon', [ribbon, image])
|
||||
|
||||
var scale = getElementScale($('.ribbon-set'))
|
||||
var target = getImageBefore(image, ribbon, null)
|
||||
|
||||
|
||||
@ -256,7 +256,20 @@ $(function(){
|
||||
var LOADER_THRESHOLD = 2
|
||||
// XXX update this depending on zoom and navigation speed...
|
||||
var LOADER_CHUNK = LOADER_THRESHOLD * 2
|
||||
var IMAGES_IN_RIBBON = 30
|
||||
$('.viewer')
|
||||
/* XXX this is distructive...
|
||||
.on('preCenteringRibbon', function(evt, ribbon, image){
|
||||
// XXX load ONLY if getGIDBefore(getImageGID(image)) is not currently loaded...
|
||||
if( ribbon
|
||||
.find('[gid="'+getGIDBefore(getImageGID(image),
|
||||
getRibbonIndex(ribbon))+'"]')
|
||||
.length > 0 ){
|
||||
console.log('>>> Loading...')
|
||||
loadImages(getImageGID(image), IMAGES_IN_RIBBON, ribbon)
|
||||
}
|
||||
})
|
||||
*/
|
||||
// XXX it takes several steps for adjacent ribbons to catch up...
|
||||
.on('centeringRibbon', function(evt, ribbon, image){
|
||||
// check if we are in the right range...
|
||||
@ -272,8 +285,12 @@ $(function(){
|
||||
var images = ribbon.find('.image')
|
||||
var cur = getImageGID(images.eq(Math.round(images.length/2)))
|
||||
var gr = DATA.ribbons[r]
|
||||
console.log('>>>', gr.indexOf(gid_before) - gr.indexOf(cur))
|
||||
//console.log('>>>', gr.indexOf(gid_before) - gr.indexOf(cur))
|
||||
rollImages(gr.indexOf(gid_before) - gr.indexOf(cur), ribbon)
|
||||
|
||||
//centerRibbon(ribbon, image)
|
||||
|
||||
//return
|
||||
}
|
||||
|
||||
if(img_before.length == 0){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user