mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-03 12:50:09 +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...
|
// need to create a new ribbon...
|
||||||
if(ribbon.length == 0 || force_create_ribbon == true){
|
if(ribbon.length == 0 || force_create_ribbon == true){
|
||||||
var index = getRibbonIndex(old_ribbon)
|
var index = getRibbonIndex(old_ribbon)
|
||||||
index = direction == 'after' ? index + 1 : index
|
index = direction == 'next' ? index + 1 : index
|
||||||
|
|
||||||
ribbon = createRibbon(index)
|
ribbon = createRibbon(index)
|
||||||
|
|
||||||
@ -888,6 +888,9 @@ function nextImage(n, mode){
|
|||||||
var target = $('.current.image').nextAll('.image' + mode)
|
var target = $('.current.image').nextAll('.image' + mode)
|
||||||
if(target.length < n){
|
if(target.length < n){
|
||||||
target = target.last()
|
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')
|
flashIndicator('end')
|
||||||
} else {
|
} else {
|
||||||
target = target.eq(n-1)
|
target = target.eq(n-1)
|
||||||
@ -900,6 +903,9 @@ function prevImage(n, mode){
|
|||||||
var target = $('.current.image').prevAll('.image' + mode)
|
var target = $('.current.image').prevAll('.image' + mode)
|
||||||
if(target.length < n){
|
if(target.length < n){
|
||||||
target = target.last()
|
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')
|
flashIndicator('start')
|
||||||
} else {
|
} else {
|
||||||
target = target.eq(n-1)
|
target = target.eq(n-1)
|
||||||
@ -980,6 +986,9 @@ function nextRibbon(moving, mode){
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/********************************************************* Zooming ***/
|
||||||
|
|
||||||
function fitNImages(n){
|
function fitNImages(n){
|
||||||
var image = $('.current.image')
|
var image = $('.current.image')
|
||||||
var size = image.outerHeight(true)
|
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(){
|
function zoomIn(){
|
||||||
var w = getScreenWidthInImages()
|
var w = getScreenWidthInImages()
|
||||||
if(w > 1){
|
if(w > 1){
|
||||||
fitNImages(w-1)
|
w = w / ZOOM_SCALE
|
||||||
|
fitNImages(w >= 1 ? w : 1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function zoomOut(){
|
function zoomOut(){
|
||||||
var w = getScreenWidthInImages()
|
var w = getScreenWidthInImages()
|
||||||
if(w <= MAX_SCREEN_IMAGES){
|
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 ***/
|
/************************************************** 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){
|
function shiftImageTo(image, direction, moving, force_create_ribbon, mode){
|
||||||
if(image == null){
|
if(image == null){
|
||||||
image = $('.current.image')
|
image = $('.current.image')
|
||||||
|
|||||||
174
ui/index.html
174
ui/index.html
@ -251,85 +251,109 @@ $(function(){
|
|||||||
|
|
||||||
|
|
||||||
// dynamic loading...
|
// dynamic loading...
|
||||||
// XXX move to a setup function in the lib...
|
if(true){
|
||||||
// XXX update this depending on zoom and navigation speed...
|
// XXX move to a setup function in the lib...
|
||||||
var LOADER_THRESHOLD = 2
|
// XXX update this depending on zoom and navigation speed...
|
||||||
// XXX update this depending on zoom and navigation speed...
|
var LOADER_THRESHOLD = 2
|
||||||
var LOADER_CHUNK = LOADER_THRESHOLD * 2
|
// XXX update this depending on zoom and navigation speed...
|
||||||
$('.viewer')
|
var LOADER_CHUNK = LOADER_THRESHOLD * 2
|
||||||
.on('preCenteringRibbon', function(evt, ribbon, image){
|
$('.viewer')
|
||||||
// NOTE: we do not need to worry about centering the ribbon
|
.on('preCenteringRibbon', function(evt, ribbon, image){
|
||||||
// here, just ball-park-load the correct batch...
|
// NOTE: we do not need to worry about centering the ribbon
|
||||||
// check if we are in the right range...
|
// here, just ball-park-load the correct batch...
|
||||||
var gid = getImageGID(image)
|
// check if we are in the right range...
|
||||||
var r = getRibbonIndex(ribbon)
|
var gid = getImageGID(image)
|
||||||
var img_before = getImageBefore(image, ribbon)
|
var r = getRibbonIndex(ribbon)
|
||||||
var gid_before = getGIDBefore(gid, r)
|
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]
|
var gr = DATA.ribbons[r]
|
||||||
//console.log('>>>', gr.indexOf(gid_before) - gr.indexOf(cur))
|
rollImages(-gr.length, ribbon)
|
||||||
rollImages(gr.indexOf(gid_before) - gr.indexOf(cur), ribbon)
|
})
|
||||||
}
|
.on('requestedLastImage', function(evt, ribbon){
|
||||||
})
|
var r = getRibbonIndex(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){
|
// XXX this result in an infinite loop somewhere...
|
||||||
img_before = ribbon.find('.image').first()
|
//var target = DATA.ribbons[r][DATA.ribbons[r].length-1]
|
||||||
}
|
//
|
||||||
|
//loadImages(target, 30, ribbon)
|
||||||
|
|
||||||
var head = img_before.prevAll('.image')
|
var gr = DATA.ribbons[r]
|
||||||
var tail = img_before.nextAll('.image')
|
rollImages(gr.length, ribbon)
|
||||||
// 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)
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user