flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-11-01 11:50:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

added multiple step shifts to infinite ribbon experiment...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-04-16 15:45:49 +04:00
parent 97db146f2b
commit 435d562835
1 changed files with 44 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
ui/experiments/infinite-ribbon.html
View File

@ -11,47 +11,65 @@ function clickHandler(){
focus(this) focus(this)
} }
function shiftSquare(direction){
function shiftSquare(direction, n){
if(n == null){
n = 1
}
var cur = $('.current.square') var cur = $('.current.square')
// trigger the event... // trigger the event...
cur.closest('.container') cur.closest('.container')
.trigger('shift'+direction) .trigger('shift'+direction, n)
// see if we are the last... // if we move to the same spot, do nothing...
if(cur[direction]('.square').length < 1){ if(n == 0){
// do not move past the edge... return cur
//return cur }
// see if we need to rotate...
if(cur[direction+'All']('.square').length < n){
var sq = cur.closest('.container').children('.square')
var i = sq.index(cur)
// rotate... // rotate...
return focus(cur return focus($(sq[ direction == 'next'
.closest('.container') ? (i + n) % sq.length
.children('.square')[ direction == 'next' ? 'first' : 'last' ]()) : sq.length - (Math.abs(i - n) % sq.length) ]))
} }
// shift the current element... // shift the current element...
return cur return focus($(cur[direction+'All']('.square')[n-1]))
.removeClass('current')[direction]('.square')
.addClass('current')
} }
// shift focus left/right... // shift focus left/right...
function next(){ function next(n){
return shiftSquare('next') return shiftSquare('next', n)
} }
function prev(){ function prev(n){
return shiftSquare('prev') return shiftSquare('prev', n)
} }
// these will roll the container... // these will roll the container...
// XXX this needs a means to update the element content... // XXX this needs a means to update the element content...
function rollRight(){ function rollRight(n){
$('.square').first().appendTo($('.container')) if(n == null){
n = 1
}
$($('.square').splice(0, n)).appendTo($('.container'))
} }
function rollLeft(){ function rollLeft(n){
$('.square').last().prependTo($('.container')) if(n == null){
n = 1
}
var sq = $('.square')
var l = sq.length
$(sq.splice(l-n, l)).prependTo($('.container'))
} }
$(function(){ $(function(){
$('.container') $('.container')
.on('shiftnext', rollRight) .on('shiftnext', function(evt, n){rollRight(n)})
.on('shiftprev', rollLeft) .on('shiftprev', function(evt, n){rollLeft(n)})
$('.square') $('.square')
.click(clickHandler) .click(clickHandler)
@ -96,8 +114,10 @@ $(function(){
<body> <body>
<button onclick="prev()">prev</button> <button onclick="prev(5)">&lt;&lt;</button>
<button onclick="next()">next</button> <button onclick="prev()">&lt;</button>
<button onclick="next()">&gt;</button>
<button onclick="next(5)">&gt;&gt;</button>
<div class="meta-container"> <div class="meta-container">
<div class="container"> <div class="container">