diff --git a/ui/data.js b/ui/data.js index f0cae5b2..76060634 100755 --- a/ui/data.js +++ b/ui/data.js @@ -144,6 +144,10 @@ var UPDATE_SORT_ENABLED = false // XXX for some reason the sync version appears to work faster... var UPDATE_SYNC = false +// if this is true image previews will be loaded synchronously by +// default... +var SYNC_IMG_LOADER = false + /********************************************************************** @@ -1097,8 +1101,23 @@ function convertDataGen1(data, cmp){ * Loaders */ +function updateImageIndicators(gid, image){ + gid = gid == null ? getImageGID() : gid + image = image == null ? getImage() : $(image) + + // marks... + if(MARKED.indexOf(gid) != -1){ + image.addClass('marked') + } else { + image.removeClass('marked') + } + + return image +} + + // helper... -function _loadImageURL(image, url){ +function _loadImagePreviewURL(image, url){ // pre-cache and load image... // NOTE: this will make images load without a blackout... var img = new Image() @@ -1112,9 +1131,6 @@ function _loadImageURL(image, url){ } -var SYNC_IMG_LOADER = true - - // Update an image element // // NOTE: care must be taken to reset ALL attributes an image can have, @@ -1158,21 +1174,21 @@ function updateImage(image, gid, size, sync){ var p_url = getBestPreview(gid, size).url // sync load... if(sync){ - _loadImageURL(image, p_url) + _loadImagePreviewURL(image, p_url) // async load... } else { // NOTE: storing the url in .data() makes the image load the - // last preview and in a case when we - // manage to call updateImage(...) on the same element - // multiple times before the previews get loaded... + // last requested preview and in a case when we manage to + // call updateImage(...) on the same element multiple times + // before the previews get loaded... // ...setting the data().loading is sync while loading an - // image is not and if several loads are done in sequence + // image is not, and if several loads are done in sequence // there is no guarantee that they will happen in the same // order as requested... image.data().loading = p_url setTimeout(function(){ - _loadImageURL(image, image.data().loading) + _loadImagePreviewURL(image, image.data().loading) }, 0) } @@ -1192,12 +1208,8 @@ function updateImage(image, gid, size, sync){ // NOTE: this only has effect on non-square image blocks... correctImageProportionsForRotation(image) - // marks... - if(MARKED.indexOf(gid) != -1){ - image.addClass('marked') - } else { - image.removeClass('marked') - } + // marks and other indicators... + updateImageIndicators(gid, image) return image } diff --git a/ui/experiments/seporate-image-and-background.html b/ui/experiments/seporate-image-and-background.html index 5ab77e23..92c2ece8 100755 --- a/ui/experiments/seporate-image-and-background.html +++ b/ui/experiments/seporate-image-and-background.html @@ -138,8 +138,69 @@ } +/*********************************************************************/ + +.mark { + display: inline-block; + position: relative; + width: 300px; + height: 300px; + margin-left: -300px; + left: 0px; + box-sizing: border-box; + vertical-align: middle; +} + +.current + .mark { + border: solid red 5px; +} + +.mark.blue, +.mark.red, +.mark.yellow { + width: 25px; + margin-left: -25px; + border: none; +} +.mark.blue:after, +.mark.red:after, +.mark.yellow:after { + display: block; + position: absolute; + content: ""; + font-size: 0pt; + border: none; + + width: 15px; + height: 15px; + + top: auto; + bottom: 10px; + left: auto; + right: 10px; + + border-radius: 50%; +} +.mark.blue:after { + background: blue; +} +.mark.red { + left: -17px; + width: 25px; +} +.mark.red:after { + background: red; +} +.mark.yellow { + left: -34px; + width: 25px; +} +.mark.yellow:after { + background: yellow; +} + The current structure... @@ -171,5 +232,20 @@ + +
+ + Keep the images on one level and marks outside, after the image...
+
+
+
+ +
+
+
+
+
+
+ diff --git a/ui/setup.js b/ui/setup.js index adbf02b2..4057adc3 100755 --- a/ui/setup.js +++ b/ui/setup.js @@ -83,16 +83,21 @@ function setupDataBindings(viewer){ updateCurrentMarker() }) + // NOTE: we do not need to worry about explicit centering the ribbon + // here, just ball-park-load the correct batch... // XXX need to maintain the correct number of images per ribbon // per zoom setting -- things get really odd when a ribbon // is smaller than it should be... // XXX this does not get called on marking... .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... + var r = getRibbonIndex(ribbon) + + // skip all but the curent ribbon in single image view... + if(toggleSingleImageMode('?') == 'on' && r != getRibbonIndex()){ + return + } var gid = getImageGID(image) - var r = getRibbonIndex(ribbon) var gr = DATA.ribbons[r] var img_before = getImageBefore(image, ribbon) var gid_before = getGIDBefore(gid, r) @@ -100,6 +105,18 @@ function setupDataBindings(viewer){ screen_size = screen_size < 1 ? 1 : screen_size var l = ribbon.find('.image').length + // skip the whole thing if the ribbon is not visible -- outside + // of viewer are... + var viewer = $('.viewer') + var H = viewer.height() + var h = getImage().height() + var t = getRelativeVisualPosition(viewer, ribbon).top + // XXX also check for visibility... + if( t+h <= 0 || t >= H ){ + //console.log('#### skipping align of ribbon:', r) + return + } + // load images if we do a long jump -- start, end or some mark // outside of currently loaded section... if(gid_before == null @@ -181,10 +198,29 @@ function setupDataBindings(viewer){ // load correct amount of images in each ribbon!!! var screen_size = getScreenWidthInImages() var gid = getImageGID() + + /* XXX used to skip ribbons that are not visible... (see bellow) + var viewer = $('.viewer') + var H = viewer.height() + var h = getImage().height() + */ + + // update and align ribbons... $('.ribbon').each(function(){ var r = $(this) + /* XXX skip ribbons that are not visible... + * causes misaligns and misloads on zoom-in... + // NOTE: we factor in the scale difference to predict + // ribbon position in the new view... + var t = getRelativeVisualPosition(viewer, r).top * (n/screen_size) + if( t+h <= 0 || t >= H ){ + console.log('#### skipping align of ribbon:', getRibbonIndex(r)) + return + } + */ loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r) }) + centerView(null, 'css') // update settings...