flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-31 11:20:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

some tweeking and cleaning...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-05-13 01:33:13 +04:00
parent 23c9736376
commit 439001f654
2 changed files with 89 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
ui/ImageGrid.js
View File

@ -45,6 +45,7 @@ var DATA = {
'350px': './images/sizes/350px/SIZE.jpg', '350px': './images/sizes/350px/SIZE.jpg',
'900px': './images/sizes/900px/SIZE.jpg', '900px': './images/sizes/900px/SIZE.jpg',
}, },
classes: '',
}, },
} }
} }
@ -474,11 +475,17 @@ function extendRibbon(left, right, ribbon){
// compensate for the truncation... // compensate for the truncation...
// XXX do we need to split this into a separate function? // XXX do we need to split this into a separate function?
// ...the rest of the function is pretty generic... // ...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){ if(left != 0){
var l = parseFloat(ribbon.css('left')) var l = parseFloat(ribbon.css('left'))
l = isNaN(l) ? 0 : l l = isNaN(l) ? 0 : l
l = l + (-left * images.outerWidth())
console.log('>>> compensating to:', l)
ribbon.css({ ribbon.css({
left: l + (-left * parseFloat(images.outerWidth())) left: l
}) })
} }
@ -550,23 +557,28 @@ function updateImage(image, gid, size){
} }
size = size == null ? getVisibleImageSize() : 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(DATA.order.indexOf(gid)),
order: JSON.stringify(gid) order: JSON.stringify(gid)
// XXX update attrs // XXX update other attrs...
}) })
// XXX STUB // XXX STUB
image.text(gid) image.text(gid)
// select best preview by size...
var url
// XXX STUB, use real image GID... // XXX STUB, use real image GID...
gid = 'SIZE' 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){ if(s > size){
url = 'url('+ DATA.images[gid].preview[k] +')' url = 'url('+ img_data.preview[k] +')'
break break
} }
} }
@ -578,8 +590,11 @@ function updateImage(image, gid, size){
'background-image': url, 'background-image': url,
}) })
// update classes and other indicators...
// XXX
// XXX STUB
//image.text(image.text() + ' ('+ s +'px)')
} }
// shorthand... // shorthand...
@ -604,7 +619,11 @@ function loadImages(ref_gid, count, ribbon){
// start/end points... // start/end points...
var l = DATA.ribbons[ribbon_i].length 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) var from_i = DATA.ribbons[ribbon_i].indexOf(gid) - Math.floor(count/2)
}
// special case: head... // special case: head...
from_i = from_i < 0 ? 0 : from_i from_i = from_i < 0 ? 0 : from_i
// special case: tail... // special case: tail...
@ -617,11 +636,23 @@ function loadImages(ref_gid, count, ribbon){
var size = getVisibleImageSize() var size = getVisibleImageSize()
var gids = getImageGIDs(from_gid, count, ribbon_i, true) 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... // 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') images = ribbon.find('.image')
} }
return images.each(function(i, e){ return images.each(function(i, e){
updateImage(e, gids[i], size) updateImage(e, gids[i], size)
}) })
@ -715,13 +746,13 @@ var toggleMarkedOnlyView = createCSSClassToggler('.viewer', 'marked-only',
var cur = $('.current.image') var cur = $('.current.image')
// current is marked... // current is marked...
if(cur.hasClass('marked')){ if(cur.hasClass('marked')){
centerImage(null, 'css') centerView(null, 'css')
return return
} }
// there is a marked image in this ribbon... // there is a marked image in this ribbon...
var target = getImageBefore(cur, null) var target = getImageBefore(cur, null)
if(target.length > 0){ if(target.length > 0){
centerImage(focusImage(target), 'css') centerView(focusImage(target), 'css')
return return
} }
// get marked image from other ribbons... // get marked image from other ribbons...
@ -753,7 +784,7 @@ function toggleImageProportions(mode){
width: size, width: size,
height: size height: size
}) })
centerImage(null, 'css') centerView(null, 'css')
return 'square' return 'square'
// viewer size... // viewer size...
@ -767,7 +798,7 @@ function toggleImageProportions(mode){
} else { } else {
image.css('height', H * w/W) image.css('height', H * w/W)
} }
centerImage(null, 'css') centerView(null, 'css')
return 'viewer' return 'viewer'
} }
} }
@ -850,13 +881,13 @@ function alignVia(container, elem, via, valign, halign, mode){
// XXX make this more configurable (centering, ...)... // XXX make this more configurable (centering, ...)...
function centerImage(image, mode){ function centerView(image, mode){
if(mode == null){ if(mode == null){
//mode = 'css' //mode = 'css'
mode = 'animate' mode = 'animate'
} }
$('.viewer').trigger('preCenteringRibbon', [getRibbon(image), image]) $('.viewer').trigger('preCenteringView', [getRibbon(image), image])
if(image == null || image.length == 0){ if(image == null || image.length == 0){
image = $('.current.image') image = $('.current.image')
@ -892,7 +923,7 @@ function centerImage(image, mode){
ribbons.css(res) ribbons.css(res)
} }
$('.viewer').trigger('centeringRibbon', [getRibbon(image), image]) $('.viewer').trigger('centeringView', [getRibbon(image), image])
return image return image
} }
@ -901,10 +932,8 @@ function centerImage(image, mode){
// Center a ribbon... // Center a ribbon...
// //
// This behaves differently for different ribbons: // This behaves differently for different ribbons:
// - ribbon containing the target (given) image // - ribbon containing the current image
// center relative to the .viewer via .ribbon-set // center
// calls centerImage(...) directly
// both top and left are used...
// - any other ribbon // - any other ribbon
// center relative to target (given) via the ribbon left // center relative to target (given) via the ribbon left
// only left coordinate is changed... // only left coordinate is changed...
@ -924,31 +953,42 @@ function centerRibbon(ribbon, image, mode){
ribbon = $(ribbon) ribbon = $(ribbon)
image = image == null ? $('.current.image') : $(image) image = image == null ? $('.current.image') : $(image)
/*
// if centering current ribbon, just center the image... // if centering current ribbon, just center the image...
if(ribbon.find('.image').index(image) >= 0){ if(ribbon.find('.image').index(image) >= 0){
centerImage(image, mode) centerImage(image, mode)
// XXX should this return a ribbon or the target image??? // XXX should this return a ribbon or the target image???
return ribbon return ribbon
} }
*/
// XXX is this the correct spot for this? // XXX is this the correct spot for this?
$('.viewer').trigger('preCenteringRibbon', [ribbon, image]) $('.viewer').trigger('preCenteringRibbon', [ribbon, image])
var scale = getElementScale($('.ribbon-set')) var scale = getElementScale($('.ribbon-set'))
var target = getImageBefore(image, ribbon, null) 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){ if(target.length > 0){
var dl = getRelativeVisualPosition(target, image).left/scale var dl = getRelativeVisualPosition(target, image).left/scale
var l = parseFloat(ribbon.css('left')) l = {
l = !isNaN(l) ? l : 0 left: l + dl - (w/2) + offset
l = {left: l + dl - ($('.image').outerWidth()/2)} }
} else { } else {
target = ribbon.find('.image').filter(NAV_DEFAULT).first() target = ribbon.find('.image').filter(NAV_DEFAULT).first()
var dl = getRelativeVisualPosition(target, image).left/scale var dl = getRelativeVisualPosition(target, image).left/scale
var l = parseFloat(ribbon.css('left')) l = {
l = !isNaN(l) ? l : 0 left: l + dl + (w/2) + offset
l = {left: l + dl + ($('.image').outerWidth()/2)} }
} }
if(mode == 'animate'){ if(mode == 'animate'){
@ -981,7 +1021,7 @@ function centerRibbons(mode){
function clickHandler(evt){ function clickHandler(evt){
var img = $(evt.target).closest('.image') var img = $(evt.target).closest('.image')
centerImage(focusImage(img)) centerView(focusImage(img))
centerRibbons() centerRibbons()
} }
@ -1014,7 +1054,7 @@ function nextImage(n, mode){
} else { } else {
target = target.eq(n-1) target = target.eq(n-1)
} }
return centerImage(focusImage(target)) return centerView(focusImage(target))
} }
function prevImage(n, mode){ function prevImage(n, mode){
mode = mode == null ? NAV_DEFAULT : mode mode = mode == null ? NAV_DEFAULT : mode
@ -1029,7 +1069,7 @@ function prevImage(n, mode){
} else { } else {
target = target.eq(n-1) 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){ if($('.current.image').prevAll('.image' + mode).length == 0){
flashIndicator('start') flashIndicator('start')
} }
return centerImage( return centerView(
focusImage( focusImage(
getRibbon().find('.image').filter(mode).first())) getRibbon().find('.image').filter(mode).first()))
} }
@ -1061,7 +1101,7 @@ function lastImage(mode){
if($('.current.image').nextAll('.image' + mode).length == 0){ if($('.current.image').nextAll('.image' + mode).length == 0){
flashIndicator('end') flashIndicator('end')
} }
return centerImage( return centerView(
focusImage( focusImage(
getRibbon().find('.image').filter(mode).last())) getRibbon().find('.image').filter(mode).last()))
} }
@ -1085,7 +1125,7 @@ function prevRibbon(moving, mode){
var next = target.nextAll('.image' + mode).first() var next = target.nextAll('.image' + mode).first()
target = next.length > 0 ? next : target target = next.length > 0 ? next : target
} }
return centerImage(focusImage(target)) return centerView(focusImage(target))
} }
function nextRibbon(moving, mode){ function nextRibbon(moving, mode){
mode = mode == null ? NAV_DEFAULT : mode mode = mode == null ? NAV_DEFAULT : mode
@ -1101,7 +1141,7 @@ function nextRibbon(moving, mode){
var next = target.nextAll('.image' + mode).first() var next = target.nextAll('.image' + mode).first()
target = next.length > 0 ? next : target 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... // XXX if animating, the next two likes must be animated together...
setElementScale($('.ribbon-set'), scale) setElementScale($('.ribbon-set'), scale)
centerImage(image, 'css') centerView(image, 'css')
$('.viewer').trigger('fittingImages', [n]) $('.viewer').trigger('fittingImages', [n])
} }
@ -1169,7 +1209,7 @@ function shiftImageTo(image, direction, moving, force_create_ribbon, mode){
shiftImage(direction, image, force_create_ribbon) shiftImage(direction, image, force_create_ribbon)
// XXX does this need to be animated??? // XXX does this need to be animated???
return centerImage(focusImage(target), 'css') return centerView(focusImage(target), 'css')
} }
function shiftImageUp(image, moving){ function shiftImageUp(image, moving){
return shiftImageTo(image, 'prev', moving) return shiftImageTo(image, 'prev', moving)

54
ui/index.html
View File

@ -233,7 +233,6 @@ $(function(){
loadData(DATA) loadData(DATA)
// NOTE: this is global so as to not to add any extra complexity to // NOTE: this is global so as to not to add any extra complexity to
// the internal workings... // the internal workings...
$('.viewer') $('.viewer')
@ -244,25 +243,14 @@ $(function(){
KEYBOARD_CONFIG, KEYBOARD_CONFIG,
function(k){console.log(k)})) function(k){console.log(k)}))
// dynamic loading... // dynamic loading...
DYNAMIC_LOADING = true DYNAMIC_LOADING = true
if(DYNAMIC_LOADING){ if(DYNAMIC_LOADING){
// XXX move to a setup function in the lib... // XXX move to a setup function in the lib...
$('.viewer') $('.viewer')
// XXX still some times does not load the needed ribbon section // XXX this always reloads everything...
// on the first try... // XXX this causes miss-aligns after shifting and/or zooming...
// 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...
.on('preCenteringRibbon', function(evt, ribbon, image){ .on('preCenteringRibbon', function(evt, ribbon, image){
// NOTE: we do not need to worry about centering the ribbon // NOTE: we do not need to worry about centering the ribbon
// here, just ball-park-load the correct batch... // here, just ball-park-load the correct batch...
@ -280,29 +268,6 @@ $(function(){
// XXX compensate for the changing number of images... // XXX compensate for the changing number of images...
// XXX // 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... // XXX BUGGY...
@ -319,10 +284,6 @@ $(function(){
var head = img_before.prevAll('.image') var head = img_before.prevAll('.image')
var tail = img_before.nextAll('.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... // get the frame size to load...
var screen_size = getScreenWidthInImages() var screen_size = getScreenWidthInImages()
@ -330,8 +291,10 @@ $(function(){
// loaded, it might lead to odd effects... // loaded, it might lead to odd effects...
// XXX need to load additional images and keep track of the // XXX need to load additional images and keep track of the
// loaded chunk size... // loaded chunk size...
var frame_size = screen_size * LOAD_SCREENS //var frame_size = screen_size * LOAD_SCREENS
var threshold = screen_size * LOAD_THRESHOLD var frame_size = 4
//var threshold = screen_size * LOAD_THRESHOLD
var threshold = 2
// do the loading... // do the loading...
// XXX need to expand/contract the ribbon depending on zoom and speed... // XXX need to expand/contract the ribbon depending on zoom and speed...
@ -362,12 +325,9 @@ $(function(){
.on('createdRibbon', function(evt, index){ .on('createdRibbon', function(evt, index){
index = getRibbonIndex(index) index = getRibbonIndex(index)
console.log('creating ribbon...')
DATA.ribbons.splice(index, 0, []) DATA.ribbons.splice(index, 0, [])
}) })
.on('removedRibbon', function(evt, index){ .on('removedRibbon', function(evt, index){
console.log('removing ribbon...')
DATA.ribbons.splice(index, 1) DATA.ribbons.splice(index, 1)
}) })
@ -395,7 +355,7 @@ $(function(){
// XXX stub... // XXX stub...
centerImage(focusImage($('.image').first()), 'css') centerView(focusImage($('.image').first()), 'css')
updateImages() updateImages()