diff --git a/ui/ImageGrid.js b/ui/ImageGrid.js index fe7f50c1..6464cf3f 100755 --- a/ui/ImageGrid.js +++ b/ui/ImageGrid.js @@ -34,6 +34,17 @@ var DATA = { // the images object, this is indexed by image GID and contains all // the needed data... images: { + // sub image, for testing load mechanics... + SIZE: { + id: 'SIZE', + ctime: 0, + path: './images/sizes/900px/SIZE.jpg', + preview: { + '150px': './images/sizes/150px/SIZE.jpg', + '350px': './images/sizes/350px/SIZE.jpg', + '900px': './images/sizes/900px/SIZE.jpg', + }, + }, } } @@ -184,6 +195,7 @@ function isBetween(a, i, lst){ // NOTE: this still depends on .indexOf(...), to disable set // disable_direct_indexing to true // XXX BUG this tends to fall into infinite loops... +// XXX this is a mess, needs revision... function binSearch(target, lst, check, return_position, disable_direct_indexing){ // XXX is this the correct default? check = check == null ? isBetween : check @@ -209,7 +221,8 @@ function binSearch(target, lst, check, return_position, disable_direct_indexing) var i = l while(l > 0){ - l = Math.ceil(l/2) + // XXX this is a hack -- should we reach 0 using floor(..) instead? + l = l <= 1 ? 0 : Math.ceil(l/2) res = check(target, i, lst) // right branch... if(res > 0){ @@ -514,12 +527,38 @@ function updateImage(image, gid, size){ // XXX STUB image.text(gid) - // XXX slect best preview by size... - // XXX - // XXX update classes... + + // select best preview by size... + var url + // XXX STUB, use real image GID... + gid = 'SIZE' + for(var k in DATA.images[gid].preview){ + var s = parseInt(k) + if(s > size){ + url = 'url('+ DATA.images[gid].preview[k] +')' + break + } + } + // if no preview found use the original... + if(url == null){ + url = 'url('+DATA.images[gid].path+')' + } + image.css({ + 'background-image': url, + }) + + // update classes and other indicators... // XXX } +// shorthand... +function updateImages(size){ + size = size == null ? getVisibleImageSize() : size + return $('.image').each(function(){ + updateImage($(this), null, size) + }) +} + // Load count images around a given image/gid into the given ribbon. // @@ -1007,6 +1046,8 @@ function fitNImages(n){ // XXX if animating, the next two likes must be animated together... setElementScale($('.ribbon-set'), scale) centerImage(image, 'css') + + $('.viewer').trigger('fittingImages', [n]) } diff --git a/ui/index.html b/ui/index.html index 7a2ad31c..04c5f59d 100755 --- a/ui/index.html +++ b/ui/index.html @@ -66,13 +66,20 @@ font-size: 12pt; overflow: hidden; - background: black; box-sizing: border-box; - border: solid gray 1px; color: white; + + background: no-repeat 50% black; + background-size: contain; + /* XXX do we need this? */ + border: solid black 5px; } .current.image { - background: red; + background: no-repeat 50% black; + background-size: contain; + + /* XXX remove this... */ + border: solid red 5px; } /* dot mark... */ @@ -258,32 +265,39 @@ $(function(){ if(DYNAMIC_LOADING){ // XXX move to a setup function in the lib... // XXX update this depending on zoom and navigation speed... - var LOADER_THRESHOLD = 2 + var LOAD_SCREENS = 2 // XXX update this depending on zoom and navigation speed... - var LOADER_CHUNK = LOADER_THRESHOLD * 2 + var LOAD_THRESHOLD = 0.5 $('.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) + // load the head of the images... + if(img_before.length == 0 && gid_before == null){ + var gr = DATA.ribbons[r] + // NOTE: rolling to any number of positions greater than length + // of the ribbon will set the ribbon to its start/end + // depending on the sign... + rollImages(-gr.length, ribbon) + + // load a new set of images... + } else if(img_before.length == 0 || (getImageGID(img_before) && getImageGID(img_before) != gid_before)){ - // get the distance... var images = ribbon.find('.image') + // middle 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) @@ -302,13 +316,23 @@ $(function(){ var first = head.first() var last = head.first() + // get the frame size to load... + var screen_size = getScreenWidthInImages() + // NOTE: if this is greater than the number of images currently + // loaded, it might lead to odd effects... + // XXX need to load additional images and keep track of the + // loaded chunk size... + var frame_size = screen_size * LOAD_SCREENS + var threshold = screen_size * LOAD_THRESHOLD + + // do the loading... // 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(tail.length < threshold){ + var rolled = rollImages(frame_size, ribbon) } - if(head.length < LOADER_THRESHOLD){ - var rolled = rollImages(-LOADER_CHUNK, ribbon) + if(head.length < threshold){ + var rolled = rollImages(-frame_size, ribbon) } }) .on('shiftedImage', function(evt, image, from, to){ @@ -358,12 +382,17 @@ $(function(){ var gr = DATA.ribbons[r] rollImages(gr.length, ribbon) }) + // XXX do we need to make this less global? + .on('fittingImages', function(evt, n){ + updateImages() + }) } // XXX stub... centerImage(focusImage($('.image').first()), 'css') + updateImages() })