mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-04 13:20:10 +00:00
minor bugfix + made the zoom relative to current scale rather than to the fixed image size...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
29513fb909
commit
f619e62658
@ -286,7 +286,7 @@ function shiftImage(direction, image, force_create_ribbon){
|
||||
// need to create a new ribbon...
|
||||
if(ribbon.length == 0 || force_create_ribbon == true){
|
||||
var index = getRibbonIndex(old_ribbon)
|
||||
index = direction == 'after' ? index + 1 : index
|
||||
index = direction == 'next' ? index + 1 : index
|
||||
|
||||
ribbon = createRibbon(index)
|
||||
|
||||
@ -888,6 +888,9 @@ function nextImage(n, mode){
|
||||
var target = $('.current.image').nextAll('.image' + mode)
|
||||
if(target.length < n){
|
||||
target = target.last()
|
||||
// XXX BUG this fires we hit the end of the currently loaded
|
||||
// images while scrolling very fast rather than when we are
|
||||
// out of images in the current ribbon...
|
||||
flashIndicator('end')
|
||||
} else {
|
||||
target = target.eq(n-1)
|
||||
@ -900,6 +903,9 @@ function prevImage(n, mode){
|
||||
var target = $('.current.image').prevAll('.image' + mode)
|
||||
if(target.length < n){
|
||||
target = target.last()
|
||||
// XXX BUG this fires we hit the end of the currently loaded
|
||||
// images while scrolling very fast rather than when we are
|
||||
// out of images in the current ribbon...
|
||||
flashIndicator('start')
|
||||
} else {
|
||||
target = target.eq(n-1)
|
||||
@ -980,6 +986,9 @@ function nextRibbon(moving, mode){
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************************************************* Zooming ***/
|
||||
|
||||
function fitNImages(n){
|
||||
var image = $('.current.image')
|
||||
var size = image.outerHeight(true)
|
||||
@ -996,19 +1005,21 @@ function fitNImages(n){
|
||||
}
|
||||
|
||||
|
||||
var MAX_SCREEN_IMAGES = 10
|
||||
var MAX_SCREEN_IMAGES = 12
|
||||
var ZOOM_SCALE = 1.2
|
||||
|
||||
// XXX use the actual scale...
|
||||
function zoomIn(){
|
||||
var w = getScreenWidthInImages()
|
||||
if(w > 1){
|
||||
fitNImages(w-1)
|
||||
w = w / ZOOM_SCALE
|
||||
fitNImages(w >= 1 ? w : 1)
|
||||
}
|
||||
}
|
||||
function zoomOut(){
|
||||
var w = getScreenWidthInImages()
|
||||
if(w <= MAX_SCREEN_IMAGES){
|
||||
fitNImages(w+1)
|
||||
w = w * ZOOM_SCALE
|
||||
fitNImages(w <= MAX_SCREEN_IMAGES ? w : MAX_SCREEN_IMAGES)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1016,6 +1027,8 @@ function zoomOut(){
|
||||
|
||||
/************************************************** Editor Actions ***/
|
||||
|
||||
// XXX shifting down from the main ribbon kills the app (infinite loop?)
|
||||
// ...appears to be a problem with creating a new ribbon below...
|
||||
function shiftImageTo(image, direction, moving, force_create_ribbon, mode){
|
||||
if(image == null){
|
||||
image = $('.current.image')
|
||||
|
||||
174
ui/index.html
174
ui/index.html
@ -251,85 +251,109 @@ $(function(){
|
||||
|
||||
|
||||
// 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...
|
||||
var LOADER_CHUNK = LOADER_THRESHOLD * 2
|
||||
$('.viewer')
|
||||
.on('preCenteringRibbon', function(evt, ribbon, image){
|
||||
// NOTE: we do not need to worry about centering the ribbon
|
||||
// here, just ball-park-load the correct batch...
|
||||
// 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)
|
||||
if(true){
|
||||
// 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...
|
||||
var LOADER_CHUNK = LOADER_THRESHOLD * 2
|
||||
$('.viewer')
|
||||
.on('preCenteringRibbon', function(evt, ribbon, image){
|
||||
// NOTE: we do not need to worry about centering the ribbon
|
||||
// here, just ball-park-load the correct batch...
|
||||
// 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)){
|
||||
// get the distance...
|
||||
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))
|
||||
rollImages(gr.indexOf(gid_before) - gr.indexOf(cur), 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...
|
||||
var gid = getImageGID(image)
|
||||
var r = getRibbonIndex(ribbon)
|
||||
var img_before = getImageBefore(image, ribbon)
|
||||
var gid_before = getGIDBefore(gid, r)
|
||||
|
||||
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)
|
||||
}
|
||||
if(head.length < LOADER_THRESHOLD){
|
||||
var rolled = rollImages(-LOADER_CHUNK, ribbon)
|
||||
}
|
||||
})
|
||||
.on('shiftedImage', function(evt, image, from, to){
|
||||
from = getRibbonIndex(from)
|
||||
var ribbon = to
|
||||
to = getRibbonIndex(to)
|
||||
|
||||
var gid = getImageGID(image)
|
||||
|
||||
var index = DATA.ribbons[from].indexOf(gid)
|
||||
var img = DATA.ribbons[from].splice(index, 1)
|
||||
|
||||
// XXX a bit ugly, revise...
|
||||
index = ribbon.find('.image')
|
||||
.index(ribbon.find('[gid='+JSON.stringify(gid)+']'))
|
||||
DATA.ribbons[to].splice(index, 0, gid)
|
||||
})
|
||||
.on('createdRibbon', function(evt, index){
|
||||
index = getRibbonIndex(index)
|
||||
|
||||
console.log('creating ribbon...')
|
||||
DATA.ribbons.splice(index, 0, [])
|
||||
})
|
||||
.on('removedRibbon', function(evt, index){
|
||||
console.log('removing ribbon...')
|
||||
DATA.ribbons.splice(index, 1)
|
||||
})
|
||||
.on('requestedFirstImage', function(evt, ribbon){
|
||||
var r = getRibbonIndex(ribbon)
|
||||
|
||||
// XXX this result in an infinite loop somewhere...
|
||||
//var target = DATA.ribbons[r][0]
|
||||
//
|
||||
//loadImages(target, 30, ribbon)
|
||||
|
||||
// need to load a new set of images...
|
||||
if((img_before.length == 0 && gid_before != null)
|
||||
|| (getImageGID(img_before) && getImageGID(img_before) != gid_before)){
|
||||
// get the distance...
|
||||
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))
|
||||
rollImages(gr.indexOf(gid_before) - gr.indexOf(cur), 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...
|
||||
var gid = getImageGID(image)
|
||||
var r = getRibbonIndex(ribbon)
|
||||
var img_before = getImageBefore(image, ribbon)
|
||||
var gid_before = getGIDBefore(gid, r)
|
||||
rollImages(-gr.length, ribbon)
|
||||
})
|
||||
.on('requestedLastImage', function(evt, ribbon){
|
||||
var r = getRibbonIndex(ribbon)
|
||||
|
||||
if(img_before.length == 0){
|
||||
img_before = ribbon.find('.image').first()
|
||||
}
|
||||
// XXX this result in an infinite loop somewhere...
|
||||
//var target = DATA.ribbons[r][DATA.ribbons[r].length-1]
|
||||
//
|
||||
//loadImages(target, 30, ribbon)
|
||||
|
||||
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)
|
||||
}
|
||||
if(head.length < LOADER_THRESHOLD){
|
||||
var rolled = rollImages(-LOADER_CHUNK, ribbon)
|
||||
}
|
||||
})
|
||||
.on('shiftedImage', function(evt, image, from, to){
|
||||
from = getRibbonIndex(from)
|
||||
var ribbon = to
|
||||
to = getRibbonIndex(to)
|
||||
|
||||
var gid = JSON.parse(image.attr('gid'))
|
||||
|
||||
var index = DATA.ribbons[from].indexOf(gid)
|
||||
var img = DATA.ribbons[from].splice(index, 1)
|
||||
|
||||
// XXX a bit ugly, revise...
|
||||
index = ribbon.find('.image')
|
||||
.index(ribbon.find('[gid='+JSON.stringify(gid)+']'))
|
||||
DATA.ribbons[to].splice(index, 0, gid)
|
||||
})
|
||||
.on('createdRibbon', function(evt, index){
|
||||
index = getRibbonIndex(index)
|
||||
|
||||
console.log('creating ribbon...')
|
||||
DATA.ribbons.splice(index, 0, [])
|
||||
})
|
||||
.on('removedRibbon', function(evt, index){
|
||||
console.log('removing ribbon...')
|
||||
DATA.ribbons.splice(index, 1)
|
||||
})
|
||||
var gr = DATA.ribbons[r]
|
||||
rollImages(gr.length, ribbon)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user