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

added ribbon roll compensation...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-05-03 04:18:47 +04:00
parent bd2a87330d
commit 7812d0d40a
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/ImageGrid.js
View File

@ -22,6 +22,11 @@
* Helpers * Helpers
*/ */
// XXX need ribbon end indicators...
// XXX might need shift left/right indicators (later)...
function flashIndicator(direction){ function flashIndicator(direction){
$(direction == 'prev' ? '.up-indicator' : '.down-indicator') $(direction == 'prev' ? '.up-indicator' : '.down-indicator')
// NOTE: this needs to be visible in all cases and key press // NOTE: this needs to be visible in all cases and key press
@ -43,11 +48,13 @@ function getRelativeVisualPosition(outer, inner){
} }
// Returns the image size (width) as viewed on screen...
function getVisibleImageSize(){ function getVisibleImageSize(){
return $('.image').outerWidth() * getElementScale($('.ribbon-set')) return $('.image').outerWidth() * getElementScale($('.ribbon-set'))
} }
// Return the number of images that can fit to viewer width...
function getScreenWidthInImages(){ function getScreenWidthInImages(){
return $('.viewer').innerWidth() / getVisibleImageSize() return $('.viewer').innerWidth() / getVisibleImageSize()
} }
@ -316,6 +323,7 @@ function centerImage(image, mode){
// ...this is to be done in the loader... // ...this is to be done in the loader...
// NOTE: negative left or right will contract the ribbon... // NOTE: negative left or right will contract the ribbon...
// XXX need to adjust ribbon position to compensate for ribbon shift...
function extendRibbon(left, right, ribbon){ function extendRibbon(left, right, ribbon){
ribbon = ribbon == null ? ribbon = ribbon == null ?
$('.current.image').closest('.ribbon') $('.current.image').closest('.ribbon')
@ -348,6 +356,19 @@ function extendRibbon(left, right, ribbon){
res.right = createImages(right, removed).appendTo(ribbon) res.right = createImages(right, removed).appendTo(ribbon)
} }
// compensate for the truncation...
// XXX do we need to split this into a separate function?
// ...the rest of the function if pretty generic...
// XXX for some odd reason this breaks in an unstable way when page
// is zoomed...
if(left != 0){
var l = parseFloat(ribbon.css('left'))
l = isNaN(l) ? 0 : l
ribbon.css({
left: l + (-left * parseFloat(images.outerWidth()))
})
}
return res return res
} }

8
ui/index.html
View File

@ -214,13 +214,13 @@ $(function(){
images.push(createImage().text(i)[0]) images.push(createImage().text(i)[0])
} }
r.append($(images)) r.append($(images))
var rr = r.clone() //var rr = r.clone()
var rrr = r.clone() //var rrr = r.clone()
$('.ribbon-set') $('.ribbon-set')
.append(r) .append(r)
.append(rr) //.append(rr)
.append(rrr) //.append(rrr)
// 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...