diff --git a/ui/base.js b/ui/base.js
index d035de3c..8e7c51a0 100755
--- a/ui/base.js
+++ b/ui/base.js
@@ -128,8 +128,9 @@ function getVisibleImageSize(){
// Return the number of images that can fit to viewer width...
-function getScreenWidthInImages(){
- return $('.viewer').innerWidth() / getVisibleImageSize()
+function getScreenWidthInImages(size){
+ size = size == null ? getVisibleImageSize() : size
+ return $('.viewer').innerWidth() / size
}
@@ -743,6 +744,8 @@ function lastImage(mode){
// NOTE: if moving is 'next' these will chose the image after the current's order.
// NOTE: if an image with the same order is found, moving argument has no effect.
+// XXX make these select the closest image instead of the one based on
+// direction...
// XXX these sometimes behave wrong at the start of the ribbon depending
// on direction...
function prevRibbon(moving, mode){
diff --git a/ui/data.js b/ui/data.js
index 645ec77c..accc5a3e 100755
--- a/ui/data.js
+++ b/ui/data.js
@@ -43,6 +43,8 @@ var DATA = {
var MARKS = []
+var IMAGE_CACHE = []
+
/**********************************************************************
@@ -213,6 +215,32 @@ function getImageGIDs(from, count, ribbon, inclusive){
}
+// Select best preview by size...
+//
+// NOTE: this will use the original if everything else is smaller...
+function getBestPreview(gid, size){
+ size = size == null ? getVisibleImageSize() : size
+ var s
+ var img_data = DATA.images[gid]
+ var url = img_data.path
+ var preview_size = 'Original'
+ var p = Infinity
+
+ for(var k in img_data.preview){
+ s = parseInt(k)
+ if(s < p && s > size){
+ preview_size = k
+ p = s
+ url = img_data.preview[k]
+ }
+ }
+ return {
+ url: url,
+ size: preview_size
+ }
+}
+
+
/**********************************************************************
* Loaders
@@ -244,25 +272,13 @@ function updateImage(image, gid, size){
img_data = STUB_IMAGE_DATA
}
- // select best preview by size...
- // NOTE: this will use the original if everything else is smaller...
- var s
- var url = 'url('+DATA.images[gid].path+')'
- var preview_size = 'Original'
- var p = Infinity
- for(var k in img_data.preview){
- s = parseInt(k)
- if(s < p && s > size){
- preview_size = k
- p = s
- url = 'url('+ img_data.preview[k] +')'
- }
- }
+ // get the url...
+ var preview = getBestPreview(gid, size)
image.css({
- 'background-image': url,
+ 'background-image': 'url('+ preview.url +')',
})
- window.DEBUG && image.html(DATA.order.indexOf(gid) +'
'+ gid +'
'+ preview_size)
+ window.DEBUG && image.html(DATA.order.indexOf(gid) +'
'+ gid +'
'+ preview.size)
return image
}
@@ -332,12 +348,18 @@ function loadImages(ref_gid, count, ribbon){
window.DEBUG && console.log('>>> (ribbon:', ribbon_i, ') FULL RELOAD --', gids.length)
// XXX do we need to think about alining here???
extendRibbon(0, gids.length - old_gids.length, ribbon)
- return ribbon
+
+ var images = ribbon
.find('.image')
.each(function(i, e){
updateImage(e, gids[i], size)
})
+ $('.viewer').trigger('reloadedRibbon', [ribbon])
+
+ return images
+
+
// do nothing...
// ...the requested section is the same as the one already loaded...
} else {
@@ -362,6 +384,8 @@ function loadImages(ref_gid, count, ribbon){
updateImage(e, gids[i + gids.length - tail], size)
})
+ $('.viewer').trigger('updatedRibbon', [ribbon])
+
return ribbon.find('.image')
}
}
@@ -409,11 +433,14 @@ function rollImages(n, ribbon, extend, no_compensate_shift){
updateImage($(e), gids[i], size)
})
+ $('.viewer').trigger('updatedRibbon', [ribbon])
+
return images
}
function loadData(data, images_per_screen){
+ DATA = data
var ribbons_set = $('.ribbon-set')
var current = data.current
// if no width is given, use the current or default...
@@ -490,8 +517,7 @@ function convertDataGen1(data){
function loadLocalStorage(attr){
attr = attr == null ? 'DATA' : attr
- DATA = JSON.parse(localStorage[attr])
- return loadData(DATA)
+ return loadData(JSON.parse(localStorage[attr]))
}
function saveLocalStorage(attr){
@@ -502,6 +528,44 @@ function saveLocalStorage(attr){
+/**********************************************************************
+* Image caching...
+*/
+
+// NOTE: this will always overwrite the previous cache set for a ribbon...
+function preCacheRibbonImages(ribbon){
+ var i = getRibbonIndex(ribbon)
+ var size = getVisibleImageSize()
+ var screen_size = getScreenWidthInImages(size)
+ var cache_frame_size = (screen_size * LOAD_SCREENS) / 2
+ var images = ribbon.find('.image')
+ var first = getImageGID(images.first())
+ var last = getImageGID(images.last())
+
+ var gids = getImageGIDs(first, -cache_frame_size)
+ .concat(getImageGIDs(last, cache_frame_size))
+
+ var cache = []
+ IMAGE_CACHE[i] = cache
+ $.each(gids, function(i, e){
+ var img = new Image()
+ img.src = getBestPreview(e, size).url
+ cache.push(img)
+ })
+
+ return cache
+}
+
+function preCacheAllRibbons(){
+ $('.ribbon').each(function(){
+ preCacheRibbonImages($(this))
+ })
+ return IMAGE_CACHE
+}
+
+
+
+
/**********************************************************************
* Setup
*/
@@ -547,7 +611,6 @@ function setupDataBindings(viewer){
|| ( gr.length > l
&& l < screen_size * LOAD_SCREENS)){
loadImages(gid, Math.round(screen_size * LOAD_SCREENS), ribbon)
- // XXX compensate for the changing number of images...
}
// roll the ribbon while we are advancing...
@@ -616,10 +679,7 @@ function setupDataBindings(viewer){
.on('fittingImages', function(evt, n){
- /*
// load correct amount of images in each ribbon!!!
- // XXX this changes focus...
- // XXX n == 1 breaks this -- going past first image...
var screen_size = getScreenWidthInImages()
var gid = getImageGID()
$('.ribbon').each(function(){
@@ -627,7 +687,7 @@ function setupDataBindings(viewer){
loadImages(gid, Math.round(screen_size * LOAD_SCREENS), r)
})
centerView(null, 'css')
- */
+
// update previews...
// XXX make this update only what needs updating...
updateImages()
@@ -686,6 +746,15 @@ function setupDataBindings(viewer){
}
})
})
+
+
+ // caching...
+ .on('reloadedRibbon updatedRibbon', function(evt, ribbon){
+
+ window.DEBUG && console.log('>>> (ribbon:', getRibbonIndex(ribbon), ') Updating cache...')
+
+ preCacheRibbonImages(ribbon)
+ })
}
diff --git a/ui/index.html b/ui/index.html
index 28daa98d..0d300cc4 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -267,8 +267,7 @@ $(function(){
if('DATA' in localStorage){
loadLocalStorage()
} else {
- DATA = convertDataGen1(image_list)
- loadData(DATA)
+ loadData(convertDataGen1(image_list))
}
// NOTE: this is global so as to not to add any extra complexity to