From 5ea103c20e6a78fea14254d5dd8662e19fdb44f5 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 3 May 2013 17:08:59 +0400 Subject: [PATCH] cleanup, refactoring and first steps/experiments in dynamic loading... Signed-off-by: Alex A. Naanou --- ui/ImageGrid.js | 63 ++++++++++++++++++++++--------------------------- ui/index.html | 34 +++++++++++++++++++++++++- 2 files changed, 61 insertions(+), 36 deletions(-) diff --git a/ui/ImageGrid.js b/ui/ImageGrid.js index 2e1eb856..82b20a44 100755 --- a/ui/ImageGrid.js +++ b/ui/ImageGrid.js @@ -60,17 +60,13 @@ function getScreenWidthInImages(){ } -// NOTE: in strict mode this will return null if no image is before the -// target... -// NOTE: if this can't find an image if an order less, it will return -// the first image in ribbon... +// NOTE: this will return an empty jquery object if no image is before +// the target... // NOTE: this might return an empty target if the ribbon is empty... // XXX need tp make this loadable ribbon compatible -- the target may // not be loaded... -function getImageBefore(image, ribbon, mode, strict){ - if(mode == null){ - mode = NAV_DEFAULT - } +function getImageBefore(image, ribbon, mode){ + mode = mode == null ? NAV_DEFAULT : mode image = image == null ? $('.current.image') : $(image) if(ribbon == null){ ribbon = image.closest('.ribbon') @@ -78,7 +74,7 @@ function getImageBefore(image, ribbon, mode, strict){ var images = $(ribbon).find('.image').filter(mode) // XXX need to process/format this correctly... var order = JSON.parse(image.attr('order')) - var prev = strict ? [] : images.first() + var prev = [] images.each(function(){ if(order < $(this).attr('order')){ @@ -372,6 +368,8 @@ function centerImage(image, mode){ ribbons.css(res) } + $('.viewer').trigger('centeringRibbon', [image.closest('.ribbon'), image]) + return image } @@ -409,7 +407,7 @@ function centerRibbon(ribbon, image, mode){ } var scale = getElementScale($('.ribbon-set')) - var target = getImageBefore(null, ribbon, null, true) + var target = getImageBefore(null, ribbon, null) if(target.length > 0){ var dl = getRelativeVisualPosition(target, image).left/scale @@ -418,9 +416,8 @@ function centerRibbon(ribbon, image, mode){ l = {left: l + dl - ($('.image').outerWidth()/2)} } else { - var dl = getRelativeVisualPosition( - ribbon.find('.image').filter(NAV_DEFAULT).first(), - image).left/scale + target = ribbon.find('.image').filter(NAV_DEFAULT).first() + var dl = getRelativeVisualPosition(target, image).left/scale var l = parseFloat(ribbon.css('left')) l = !isNaN(l) ? l : 0 l = {left: l + dl + ($('.image').outerWidth()/2)} @@ -432,6 +429,8 @@ function centerRibbon(ribbon, image, mode){ ribbons.css(res) } + $('.viewer').trigger('centeringRibbon', [ribbon, target]) + // XXX should this return a ribbon or the target image??? return ribbon } @@ -530,18 +529,14 @@ var NAV_DEFAULT = NAV_VISIBLE // basic navigation actions... function nextImage(n, mode){ - if(mode == null){ - mode = NAV_DEFAULT - } + mode = mode == null ? NAV_DEFAULT : mode n = n == null ? 1 : n var target = $('.current.image').nextAll('.image' + mode) target = target.length < n ? target.last() : target.eq(n-1) return centerImage(focusImage(target)) } function prevImage(n, mode){ - if(mode == null){ - mode = NAV_DEFAULT - } + mode = mode == null ? NAV_DEFAULT : mode n = n == null ? 1 : n var target = $('.current.image').prevAll('.image' + mode) target = target.length < n ? target.last() : target.eq(n-1) @@ -554,17 +549,13 @@ function prevScreenImages(mode){ return prevImage(Math.round(getScreenWidthInImages()), mode) } function firstImage(mode){ - if(mode == null){ - mode = NAV_DEFAULT - } + mode = mode == null ? NAV_DEFAULT : mode return centerImage( focusImage( $('.current.image').closest('.ribbon').find('.image').filter(mode).first())) } function lastImage(mode){ - if(mode == null){ - mode = NAV_DEFAULT - } + mode = mode == null ? NAV_DEFAULT : mode return centerImage( focusImage( $('.current.image').closest('.ribbon').find('.image').filter(mode).last())) @@ -576,11 +567,13 @@ function lastImage(mode){ // NOTE: if an image with the same order is found, moving argument has no effect. // XXX get move direction... function prevRibbon(moving, mode){ - if(mode == null){ - mode = NAV_DEFAULT - } + mode = mode == null ? NAV_DEFAULT : mode var cur = $('.current.image') var target = getImageBefore(cur, cur.closest('.ribbon').prevAll('.ribbon:visible').first()) + if(target.length == 0){ + // XXX too complex??? + target = cur.closest('.ribbon').prevAll('.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 @@ -589,11 +582,13 @@ function prevRibbon(moving, mode){ } // XXX get move direction... function nextRibbon(moving, mode){ - if(mode == null){ - mode = NAV_DEFAULT - } + mode = mode == null ? NAV_DEFAULT : mode var cur = $('.current.image') var target = getImageBefore(cur, cur.closest('.ribbon').nextAll('.ribbon:visible').first()) + if(target.length == 0){ + // XXX too complex??? + target = cur.closest('.ribbon').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 @@ -608,9 +603,7 @@ function _shiftImageTo(image, direction, moving, force_create_ribbon, mode){ if(image == null){ image = $('.current.image') } - if(mode == null){ - mode = NAV_DEFAULT - } + mode = mode == null ? NAV_DEFAULT : mode // account move for direction... // XXX get the value from some place more logical than the argument... @@ -737,7 +730,7 @@ function toggleImageMarkBlock(image){ function clickHandler(evt){ var img = $(evt.target).closest('.image') - centerImage( focusImage(img) ) + centerImage(focusImage(img)) } diff --git a/ui/index.html b/ui/index.html index 9537e613..385a1ef1 100755 --- a/ui/index.html +++ b/ui/index.html @@ -224,14 +224,46 @@ $(function(){ // NOTE: this is global so as to not to add any extra complexity to // the internal workings... - $('.viewer').click(clickHandler) + $('.viewer') + .click(clickHandler) $(document) .keydown(makeKeyboardHandler( KEYBOARD_CONFIG, function(k){console.log(k)})) + + + + if(false){ + // XXX dynamic loading test... + // XXX this will be a stupid demo, until we get real image loading... + // 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('centeringRibbon', function(evt, ribbon, image){ + var head = image.prevAll('.image') + var tail = image.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 = rollRibbon(LOADER_CHUNK, ribbon) + } + if(head.length < LOADER_THRESHOLD){ + var rolled = rollRibbon(-LOADER_CHUNK, ribbon) + } + }) + } + // XXX stub... centerImage(focusImage($('.image').first()), 'css')