From f619e6265869e47768e2c2c2bfb771aef72a6941 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 7 May 2013 00:26:35 +0400 Subject: [PATCH] minor bugfix + made the zoom relative to current scale rather than to the fixed image size... Signed-off-by: Alex A. Naanou --- ui/ImageGrid.js | 23 +++++-- ui/index.html | 174 +++++++++++++++++++++++++++--------------------- 2 files changed, 117 insertions(+), 80 deletions(-) diff --git a/ui/ImageGrid.js b/ui/ImageGrid.js index 61e32ba4..42e2a1f4 100755 --- a/ui/ImageGrid.js +++ b/ui/ImageGrid.js @@ -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') diff --git a/ui/index.html b/ui/index.html index 3fa4dd86..7d64fdab 100755 --- a/ui/index.html +++ b/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) + }) + }