mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
several bugs squashed, more work on dynamic loading...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
3f007054da
commit
78e8350ae5
@ -29,9 +29,7 @@ var DATA = {
|
||||
],
|
||||
// flat ordered list of images in current context...
|
||||
// in the simplest form this is a list of GIDs.
|
||||
order: [
|
||||
$(new Array(100)).map(function(i){return i}).toArray()
|
||||
],
|
||||
order: $(new Array(100)).map(function(i){return i}).toArray(),
|
||||
// the images object, this is indexed by image GID and contains all
|
||||
// the needed data...
|
||||
images: {
|
||||
@ -84,6 +82,21 @@ function getRibbonIndex(elem){
|
||||
return $('.ribbon').index(ribbon)
|
||||
}
|
||||
|
||||
function getImageOrder(image){
|
||||
image = image == null ? $('.current.image') : $(image)
|
||||
if(image.length == 0){
|
||||
return
|
||||
}
|
||||
return JSON.parse(image.attr('order'))
|
||||
}
|
||||
function getImageGID(image){
|
||||
image = image == null ? $('.current.image') : $(image)
|
||||
if(image.length == 0){
|
||||
return
|
||||
}
|
||||
return JSON.parse(image.attr('gid'))
|
||||
}
|
||||
|
||||
// ...tried to make this as brain-dead-stupidly-simple as possible...
|
||||
function getRelativeVisualPosition(outer, inner){
|
||||
outer = $(outer).offset()
|
||||
@ -133,6 +146,41 @@ function getImageBefore(image, ribbon, mode){
|
||||
return $(prev)
|
||||
}
|
||||
|
||||
// same as getImageBefore, but uses gids and searches in DATA...
|
||||
// XXX check for corner cases...
|
||||
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 > 1){
|
||||
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)
|
||||
|
||||
} else {
|
||||
ribbon = ribbon.slice(i)
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
function shiftTo(image, ribbon){
|
||||
var target = getImageBefore(image, ribbon, NAV_ALL)
|
||||
@ -267,7 +315,7 @@ function removeRibbon(ribbon){
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* Constructors
|
||||
* Loaders
|
||||
*/
|
||||
|
||||
// NOTE: count can be either hegative or positive, this will idicate
|
||||
@ -282,6 +330,7 @@ function getImageGIDs(from, count, ribbon){
|
||||
if(count == 0){
|
||||
return []
|
||||
}
|
||||
// ribbon default value...
|
||||
if(ribbon == null){
|
||||
$(DATA.ribbons).each(function(i, e){
|
||||
if(e.indexOf(from) >= 0){
|
||||
@ -298,7 +347,7 @@ function getImageGIDs(from, count, ribbon){
|
||||
return ribbon.slice(start, start + count)
|
||||
} else {
|
||||
var end = ribbon.indexOf(from)
|
||||
return ribbon.slice(+count >= end ? 0 : end + count, end)
|
||||
return ribbon.slice((Math.abs(count) >= end ? 0 : end + count), end)
|
||||
}
|
||||
}
|
||||
|
||||
@ -333,15 +382,27 @@ function rollImages(n, ribbon){
|
||||
return $([])
|
||||
}
|
||||
ribbon = ribbon == null ? getRibbon() : $(ribbon)
|
||||
var images = ribbon.find('.image')
|
||||
|
||||
var from = n > 0 ? JSON.parse(ribbon.find('.image').last().attr('gid'))
|
||||
: JSON.parse(ribbon.find('.image').first().attr('gid'))
|
||||
var gids = getImageGIDs(from, n)
|
||||
if(gids.length == 0){
|
||||
return $([])
|
||||
}
|
||||
var images = rollRibbon(gids.length * (n > 0 ? 1 : -1), ribbon)
|
||||
var size = getVisibleImageSize()
|
||||
// truncate the results to the length of images...
|
||||
if(n > images.length){
|
||||
gids.reverse().splice(images.length)
|
||||
gids.reverse()
|
||||
} else if(Math.abs(n) > images.length){
|
||||
gids.splice(images.length)
|
||||
}
|
||||
|
||||
if(n < images.length){
|
||||
images = rollRibbon(gids.length * (n > 0 ? 1 : -1), ribbon)
|
||||
}
|
||||
|
||||
var size = getVisibleImageSize()
|
||||
images.each(function(i, e){
|
||||
updateImage($(e), gids[i], size)
|
||||
})
|
||||
@ -593,7 +654,7 @@ function centerRibbon(ribbon, image, mode){
|
||||
ribbons.css(res)
|
||||
}
|
||||
|
||||
$('.viewer').trigger('centeringRibbon', [ribbon, target])
|
||||
$('.viewer').trigger('centeringRibbon', [ribbon, image])
|
||||
|
||||
// XXX should this return a ribbon or the target image???
|
||||
return ribbon
|
||||
@ -778,8 +839,7 @@ function prevRibbon(moving, mode){
|
||||
target = getRibbon(cur)
|
||||
.prevAll('.ribbon:visible').first()
|
||||
.find('.image' + mode).first()
|
||||
}
|
||||
if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
||||
} else if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
||||
var next = target.nextAll('.image' + mode).first()
|
||||
target = next.length > 0 ? next : target
|
||||
}
|
||||
@ -796,10 +856,9 @@ function nextRibbon(moving, mode){
|
||||
target = getRibbon(cur)
|
||||
.nextAll('.ribbon:visible').first()
|
||||
.find('.image' + mode).first()
|
||||
}
|
||||
if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
||||
var next = target.nextAll('.image' + mode).first()
|
||||
target = next.length > 0 ? next : target
|
||||
} else if(moving == 'next' && cur.attr('order') != target.attr('order')){
|
||||
var next = target.nextAll('.image' + mode).first()
|
||||
target = next.length > 0 ? next : target
|
||||
}
|
||||
return centerImage(focusImage(target))
|
||||
}
|
||||
|
||||
@ -250,8 +250,8 @@ $(function(){
|
||||
function(k){console.log(k)}))
|
||||
|
||||
|
||||
// XXX dynamic loading test...
|
||||
// XXX this will be a stupid demo, until we get real image loading...
|
||||
// dynamic loading...
|
||||
// XXX move to a setup function in the lib...
|
||||
// XXX update this depending on zoom and navigation speed...
|
||||
var LOADER_THRESHOLD = 2
|
||||
// XXX update this depending on zoom and navigation speed...
|
||||
@ -259,15 +259,29 @@ $(function(){
|
||||
$('.viewer')
|
||||
// XXX it takes several steps for adjacent ribbons to catch up...
|
||||
.on('centeringRibbon', function(evt, ribbon, image){
|
||||
var head = image.prevAll('.image')
|
||||
var tail = image.nextAll('.image')
|
||||
// check if we are in the right range...
|
||||
var gid = getImageGID(image)
|
||||
var r = getRibbonIndex(ribbon)
|
||||
var img_before = getImageBefore(image, ribbon)
|
||||
var gid_before = getGIDBefore(gid, r)
|
||||
|
||||
// need to load a new set of images...
|
||||
if((img_before.length == 0 && gid_before != null)
|
||||
|| (getImageGID(img_before) && getImageGID(img_before) != gid_before)){
|
||||
}
|
||||
|
||||
if(img_before.length == 0){
|
||||
img_before = ribbon.find('.image').first()
|
||||
}
|
||||
|
||||
var head = img_before.prevAll('.image')
|
||||
var tail = img_before.nextAll('.image')
|
||||
// NOTE: these are to be used as reference for loading/populating
|
||||
// rolled images...
|
||||
var first = head.first()
|
||||
var last = head.first()
|
||||
|
||||
// XXX need to expand/contract the ribbon depending on zoom and speed...
|
||||
|
||||
// XXX use extendRibbon, to both roll and expand/contract...
|
||||
if(tail.length < LOADER_THRESHOLD){
|
||||
var rolled = rollImages(LOADER_CHUNK, ribbon)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user