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

infinite ribbon experiment - rewritten the API...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-04-16 16:36:01 +04:00
parent 02d05a3cb1
commit 226140de06
1 changed files with 69 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,10 @@
function focus(elem){ function focus(elem){
$('.current.square').removeClass('current') $('.current.square').removeClass('current')
return $(elem).closest('.square').addClass('current') $(elem)
.closest('.square')
.addClass('current')
.trigger('focus')
} }
function clickHandler(){ function clickHandler(){
focus(this) focus(this)
@ -21,62 +24,86 @@ function clickHandler(){
* and focus an element from the other end. * and focus an element from the other end.
* *
*/ */
function shiftSquare(direction, n){ // XXX make this customizable (selector-wise)...
if(n == null){ function shiftFocus(n){
n = 1
}
var cur = $('.current.square') var cur = $('.current.square')
// trigger the event... if(n > 0){
cur.closest('.container') direction = 'next'
.trigger('shift'+direction, n) } else if(n < 0){
// if we move to the same spot, do nothing... direction = 'prev'
if(n == 0){ } else {
return cur return cur
} }
// trigger the event...
cur.closest('.container')
.trigger('shiftfocus', n)
var dir = cur[direction+'All']('.square')
// see if we need to warp arund... // see if we need to warp arund...
if(cur[direction+'All']('.square').length < n){ if(dir.length < Math.abs(n)){
var sq = cur.closest('.container').children('.square') var sq = cur.closest('.container').children('.square')
var i = sq.index(cur) var i = sq.index(cur)
return focus($(sq[ direction == 'next' return focus($(sq[ n > 0
? (i + n) % sq.length ? (i + n) % sq.length
: sq.length - (Math.abs(i - n) % sq.length) ])) : sq.length - (Math.abs(i + n) % sq.length) ]))
} }
// shift the current element... // shift the current element...
return focus($(cur[direction+'All']('.square')[n-1])) return focus($(dir[Math.abs(n)-1]))
}
// shift focus left/right wrappers...
function next(n){
return shiftSquare('next', n)
}
function prev(n){
return shiftSquare('prev', n)
} }
// these will roll the container... // these will roll the container...
// XXX this needs a means to update the element content... function rollContainer(n){
function rollRight(n){ // right...
if(n == null){ if(n > 0){
n = 1 return $($('.square').splice(0, n)).appendTo($('.container'))
// left...
} else if(n < 0){
var sq = $('.square')
var l = sq.length
return $(sq.splice(l+n, l)).prependTo($('.container'))
// 0...
} else {
return
} }
$($('.square').splice(0, n)).appendTo($('.container'))
}
function rollLeft(n){
if(n == null){
n = 1
}
var sq = $('.square')
var l = sq.length
$(sq.splice(l-n, l)).prependTo($('.container'))
} }
var UPDATE_ELEMENT_TEXT = false
function toggleNumberUpdate(){
if(UPDATE_ELEMENT_TEXT){
UPDATE_ELEMENT_TEXT = false
} else {
UPDATE_ELEMENT_TEXT = true
}
}
$(function(){ $(function(){
$('.container') $('.container')
.on('shiftnext', function(evt, n){rollRight(n)}) // NOTE: this event will get completed BEFORE the element is focused.
.on('shiftprev', function(evt, n){rollLeft(n)}) .on('shiftfocus', function(evt, n){
if(UPDATE_ELEMENT_TEXT){
var sq = $('.square')
if(n > 0){
var s = $('.square').last().text()*1 + 1
} else if(n < 0){
var s = $('.square').first().text()*1 + n
} else {
return
}
rollContainer(n).each(function(i, e){
$(this).text(i + s)
})
} else {
rollContainer(n)
}
})
$('.square') $('.square')
.click(clickHandler) .click(clickHandler)
@ -121,10 +148,12 @@ $(function(){
<body> <body>
<button onclick="prev(5)">&lt;&lt;</button> <button onclick="shiftFocus(-5)">&lt;&lt;</button>
<button onclick="prev()">&lt;</button> <button onclick="shiftFocus(-1)">&lt;</button>
<button onclick="next()">&gt;</button> <button onclick="shiftFocus(1)">&gt;</button>
<button onclick="next(5)">&gt;&gt;</button> <button onclick="shiftFocus(5)">&gt;&gt;</button>
&nbsp;
<button onclick="toggleNumberUpdate()">toggle square number update</button>
<div class="meta-container"> <div class="meta-container">
<div class="container"> <div class="container">