mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
some tweeking and cleaning...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
23c9736376
commit
439001f654
116
ui/ImageGrid.js
116
ui/ImageGrid.js
@ -45,6 +45,7 @@ var DATA = {
|
||||
'350px': './images/sizes/350px/SIZE.jpg',
|
||||
'900px': './images/sizes/900px/SIZE.jpg',
|
||||
},
|
||||
classes: '',
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -474,11 +475,17 @@ function extendRibbon(left, right, ribbon){
|
||||
// compensate for the truncation...
|
||||
// XXX do we need to split this into a separate function?
|
||||
// ...the rest of the function is pretty generic...
|
||||
// XXX for some reason this works correctly ONLY if left = -right
|
||||
// ...appears to be connected with scale, but in a really odd
|
||||
// way...
|
||||
//var scale = getElementScale($('.ribbon-set'))
|
||||
if(left != 0){
|
||||
var l = parseFloat(ribbon.css('left'))
|
||||
l = isNaN(l) ? 0 : l
|
||||
l = l + (-left * images.outerWidth())
|
||||
console.log('>>> compensating to:', l)
|
||||
ribbon.css({
|
||||
left: l + (-left * parseFloat(images.outerWidth()))
|
||||
left: l
|
||||
})
|
||||
}
|
||||
|
||||
@ -550,23 +557,28 @@ function updateImage(image, gid, size){
|
||||
}
|
||||
size = size == null ? getVisibleImageSize() : size
|
||||
|
||||
image.attr({
|
||||
// update classes and other indicators...
|
||||
image
|
||||
.attr({
|
||||
//order: JSON.stringify(DATA.order.indexOf(gid)),
|
||||
order: JSON.stringify(gid)
|
||||
// XXX update attrs
|
||||
// XXX update other attrs...
|
||||
})
|
||||
|
||||
// XXX STUB
|
||||
image.text(gid)
|
||||
|
||||
// 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)
|
||||
|
||||
var img_data = DATA.images[gid]
|
||||
|
||||
// select best preview by size...
|
||||
var url, s
|
||||
for(var k in img_data.preview){
|
||||
s = parseInt(k)
|
||||
if(s > size){
|
||||
url = 'url('+ DATA.images[gid].preview[k] +')'
|
||||
url = 'url('+ img_data.preview[k] +')'
|
||||
break
|
||||
}
|
||||
}
|
||||
@ -578,8 +590,11 @@ function updateImage(image, gid, size){
|
||||
'background-image': url,
|
||||
})
|
||||
|
||||
// update classes and other indicators...
|
||||
// XXX
|
||||
|
||||
|
||||
// XXX STUB
|
||||
//image.text(image.text() + ' ('+ s +'px)')
|
||||
|
||||
}
|
||||
|
||||
// shorthand...
|
||||
@ -604,7 +619,11 @@ function loadImages(ref_gid, count, ribbon){
|
||||
|
||||
// start/end points...
|
||||
var l = DATA.ribbons[ribbon_i].length
|
||||
if(l <= count){
|
||||
var from_i = 0
|
||||
} else {
|
||||
var from_i = DATA.ribbons[ribbon_i].indexOf(gid) - Math.floor(count/2)
|
||||
}
|
||||
// special case: head...
|
||||
from_i = from_i < 0 ? 0 : from_i
|
||||
// special case: tail...
|
||||
@ -617,11 +636,23 @@ function loadImages(ref_gid, count, ribbon){
|
||||
var size = getVisibleImageSize()
|
||||
var gids = getImageGIDs(from_gid, count, ribbon_i, true)
|
||||
|
||||
if(count != images.length){
|
||||
//console.log('>>>', ribbon_i, gids)
|
||||
|
||||
// do nothing...
|
||||
// XXX this is still wrong, need to check what's loaded...
|
||||
if(count > gids.length){
|
||||
return images
|
||||
|
||||
} else if(count != images.length){
|
||||
var l = images.length
|
||||
var ext = count - l
|
||||
var ext_l = Math.floor(ext/2)
|
||||
var ext_r = ext - ext_l
|
||||
// NOTE: this avoids reattaching images that are already there...
|
||||
extendRibbon(0, count - images.length, ribbon)
|
||||
extendRibbon(ext_l, ext_r, ribbon)
|
||||
images = ribbon.find('.image')
|
||||
}
|
||||
|
||||
return images.each(function(i, e){
|
||||
updateImage(e, gids[i], size)
|
||||
})
|
||||
@ -715,13 +746,13 @@ var toggleMarkedOnlyView = createCSSClassToggler('.viewer', 'marked-only',
|
||||
var cur = $('.current.image')
|
||||
// current is marked...
|
||||
if(cur.hasClass('marked')){
|
||||
centerImage(null, 'css')
|
||||
centerView(null, 'css')
|
||||
return
|
||||
}
|
||||
// there is a marked image in this ribbon...
|
||||
var target = getImageBefore(cur, null)
|
||||
if(target.length > 0){
|
||||
centerImage(focusImage(target), 'css')
|
||||
centerView(focusImage(target), 'css')
|
||||
return
|
||||
}
|
||||
// get marked image from other ribbons...
|
||||
@ -753,7 +784,7 @@ function toggleImageProportions(mode){
|
||||
width: size,
|
||||
height: size
|
||||
})
|
||||
centerImage(null, 'css')
|
||||
centerView(null, 'css')
|
||||
return 'square'
|
||||
|
||||
// viewer size...
|
||||
@ -767,7 +798,7 @@ function toggleImageProportions(mode){
|
||||
} else {
|
||||
image.css('height', H * w/W)
|
||||
}
|
||||
centerImage(null, 'css')
|
||||
centerView(null, 'css')
|
||||
return 'viewer'
|
||||
}
|
||||
}
|
||||
@ -850,13 +881,13 @@ function alignVia(container, elem, via, valign, halign, mode){
|
||||
|
||||
|
||||
// XXX make this more configurable (centering, ...)...
|
||||
function centerImage(image, mode){
|
||||
function centerView(image, mode){
|
||||
if(mode == null){
|
||||
//mode = 'css'
|
||||
mode = 'animate'
|
||||
}
|
||||
|
||||
$('.viewer').trigger('preCenteringRibbon', [getRibbon(image), image])
|
||||
$('.viewer').trigger('preCenteringView', [getRibbon(image), image])
|
||||
|
||||
if(image == null || image.length == 0){
|
||||
image = $('.current.image')
|
||||
@ -892,7 +923,7 @@ function centerImage(image, mode){
|
||||
ribbons.css(res)
|
||||
}
|
||||
|
||||
$('.viewer').trigger('centeringRibbon', [getRibbon(image), image])
|
||||
$('.viewer').trigger('centeringView', [getRibbon(image), image])
|
||||
|
||||
return image
|
||||
}
|
||||
@ -901,10 +932,8 @@ function centerImage(image, mode){
|
||||
// Center a ribbon...
|
||||
//
|
||||
// This behaves differently for different ribbons:
|
||||
// - ribbon containing the target (given) image
|
||||
// center relative to the .viewer via .ribbon-set
|
||||
// calls centerImage(...) directly
|
||||
// both top and left are used...
|
||||
// - ribbon containing the current image
|
||||
// center
|
||||
// - any other ribbon
|
||||
// center relative to target (given) via the ribbon left
|
||||
// only left coordinate is changed...
|
||||
@ -924,31 +953,42 @@ function centerRibbon(ribbon, image, mode){
|
||||
ribbon = $(ribbon)
|
||||
image = image == null ? $('.current.image') : $(image)
|
||||
|
||||
/*
|
||||
// if centering current ribbon, just center the image...
|
||||
if(ribbon.find('.image').index(image) >= 0){
|
||||
centerImage(image, mode)
|
||||
// XXX should this return a ribbon or the target image???
|
||||
return ribbon
|
||||
}
|
||||
*/
|
||||
|
||||
// XXX is this the correct spot for this?
|
||||
$('.viewer').trigger('preCenteringRibbon', [ribbon, image])
|
||||
|
||||
var scale = getElementScale($('.ribbon-set'))
|
||||
var target = getImageBefore(image, ribbon, null)
|
||||
var offset = 0
|
||||
var l = parseFloat(ribbon.css('left'))
|
||||
l = !isNaN(l) ? l : 0
|
||||
var w = $('.image').outerWidth()
|
||||
|
||||
//if(ribbon.find('.image').index(image) >= 0){
|
||||
if(ribbon.find('.current.image').length > 0){
|
||||
offset = w/2
|
||||
}
|
||||
|
||||
if(target.length > 0){
|
||||
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)}
|
||||
l = {
|
||||
left: l + dl - (w/2) + offset
|
||||
}
|
||||
|
||||
} else {
|
||||
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)}
|
||||
l = {
|
||||
left: l + dl + (w/2) + offset
|
||||
}
|
||||
}
|
||||
|
||||
if(mode == 'animate'){
|
||||
@ -981,7 +1021,7 @@ function centerRibbons(mode){
|
||||
function clickHandler(evt){
|
||||
var img = $(evt.target).closest('.image')
|
||||
|
||||
centerImage(focusImage(img))
|
||||
centerView(focusImage(img))
|
||||
|
||||
centerRibbons()
|
||||
}
|
||||
@ -1014,7 +1054,7 @@ function nextImage(n, mode){
|
||||
} else {
|
||||
target = target.eq(n-1)
|
||||
}
|
||||
return centerImage(focusImage(target))
|
||||
return centerView(focusImage(target))
|
||||
}
|
||||
function prevImage(n, mode){
|
||||
mode = mode == null ? NAV_DEFAULT : mode
|
||||
@ -1029,7 +1069,7 @@ function prevImage(n, mode){
|
||||
} else {
|
||||
target = target.eq(n-1)
|
||||
}
|
||||
return centerImage(focusImage(target))
|
||||
return centerView(focusImage(target))
|
||||
}
|
||||
|
||||
|
||||
@ -1049,7 +1089,7 @@ function firstImage(mode){
|
||||
if($('.current.image').prevAll('.image' + mode).length == 0){
|
||||
flashIndicator('start')
|
||||
}
|
||||
return centerImage(
|
||||
return centerView(
|
||||
focusImage(
|
||||
getRibbon().find('.image').filter(mode).first()))
|
||||
}
|
||||
@ -1061,7 +1101,7 @@ function lastImage(mode){
|
||||
if($('.current.image').nextAll('.image' + mode).length == 0){
|
||||
flashIndicator('end')
|
||||
}
|
||||
return centerImage(
|
||||
return centerView(
|
||||
focusImage(
|
||||
getRibbon().find('.image').filter(mode).last()))
|
||||
}
|
||||
@ -1085,7 +1125,7 @@ function prevRibbon(moving, mode){
|
||||
var next = target.nextAll('.image' + mode).first()
|
||||
target = next.length > 0 ? next : target
|
||||
}
|
||||
return centerImage(focusImage(target))
|
||||
return centerView(focusImage(target))
|
||||
}
|
||||
function nextRibbon(moving, mode){
|
||||
mode = mode == null ? NAV_DEFAULT : mode
|
||||
@ -1101,7 +1141,7 @@ function nextRibbon(moving, mode){
|
||||
var next = target.nextAll('.image' + mode).first()
|
||||
target = next.length > 0 ? next : target
|
||||
}
|
||||
return centerImage(focusImage(target))
|
||||
return centerView(focusImage(target))
|
||||
}
|
||||
|
||||
|
||||
@ -1120,7 +1160,7 @@ function fitNImages(n){
|
||||
|
||||
// XXX if animating, the next two likes must be animated together...
|
||||
setElementScale($('.ribbon-set'), scale)
|
||||
centerImage(image, 'css')
|
||||
centerView(image, 'css')
|
||||
|
||||
$('.viewer').trigger('fittingImages', [n])
|
||||
}
|
||||
@ -1169,7 +1209,7 @@ function shiftImageTo(image, direction, moving, force_create_ribbon, mode){
|
||||
|
||||
shiftImage(direction, image, force_create_ribbon)
|
||||
// XXX does this need to be animated???
|
||||
return centerImage(focusImage(target), 'css')
|
||||
return centerView(focusImage(target), 'css')
|
||||
}
|
||||
function shiftImageUp(image, moving){
|
||||
return shiftImageTo(image, 'prev', moving)
|
||||
|
||||
@ -233,7 +233,6 @@ $(function(){
|
||||
|
||||
loadData(DATA)
|
||||
|
||||
|
||||
// NOTE: this is global so as to not to add any extra complexity to
|
||||
// the internal workings...
|
||||
$('.viewer')
|
||||
@ -244,25 +243,14 @@ $(function(){
|
||||
KEYBOARD_CONFIG,
|
||||
function(k){console.log(k)}))
|
||||
|
||||
|
||||
|
||||
// dynamic loading...
|
||||
DYNAMIC_LOADING = true
|
||||
|
||||
if(DYNAMIC_LOADING){
|
||||
// XXX move to a setup function in the lib...
|
||||
$('.viewer')
|
||||
// XXX still some times does not load the needed ribbon section
|
||||
// on the first try...
|
||||
// Example state:
|
||||
// 0 [50] 99
|
||||
// .. .. .. .. .. .. ..
|
||||
// in this case moving between the top ribbon images
|
||||
// does not center the bottom ribbon right away, needs
|
||||
// several clicks on the current image to get there...
|
||||
// ...also when going down from 50 lastImage() behaves
|
||||
// in a very odd way, going back and froth rather than
|
||||
// reaching 98 right away...
|
||||
// XXX this always reloads everything...
|
||||
// XXX this causes miss-aligns after shifting and/or zooming...
|
||||
.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...
|
||||
@ -280,29 +268,6 @@ $(function(){
|
||||
// XXX compensate for the changing number of images...
|
||||
// XXX
|
||||
}
|
||||
|
||||
/*
|
||||
// load the head of the images...
|
||||
if(gid_before == null){
|
||||
// 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 the tail...
|
||||
// XXX for some reason this does not work (see XXX on top of the binding)
|
||||
} else if(gid_before == gr[gr.length-1]){
|
||||
rollImages(gr.length, ribbon)
|
||||
|
||||
// load a new set of images...
|
||||
} else if(getImageGID(img_before) != gid_before){
|
||||
var images = ribbon.find('.image')
|
||||
var cur = getImageGID(images.eq(Math.round(images.length/2)))
|
||||
//var cur = getImageGID(images.first())
|
||||
// XXX this sometimes misses...
|
||||
rollImages(gr.indexOf(gid_before) - gr.indexOf(cur), ribbon)
|
||||
}
|
||||
*/
|
||||
})
|
||||
/*
|
||||
// XXX BUGGY...
|
||||
@ -319,10 +284,6 @@ $(function(){
|
||||
|
||||
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()
|
||||
|
||||
// get the frame size to load...
|
||||
var screen_size = getScreenWidthInImages()
|
||||
@ -330,8 +291,10 @@ $(function(){
|
||||
// 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
|
||||
//var frame_size = screen_size * LOAD_SCREENS
|
||||
var frame_size = 4
|
||||
//var threshold = screen_size * LOAD_THRESHOLD
|
||||
var threshold = 2
|
||||
|
||||
// do the loading...
|
||||
// XXX need to expand/contract the ribbon depending on zoom and speed...
|
||||
@ -362,12 +325,9 @@ $(function(){
|
||||
|
||||
.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)
|
||||
})
|
||||
|
||||
@ -395,7 +355,7 @@ $(function(){
|
||||
|
||||
|
||||
// XXX stub...
|
||||
centerImage(focusImage($('.image').first()), 'css')
|
||||
centerView(focusImage($('.image').first()), 'css')
|
||||
updateImages()
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user