From 226140de060027de4b4e85a58450437da312d04b Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Tue, 16 Apr 2013 16:36:01 +0400 Subject: [PATCH] infinite ribbon experiment - rewritten the API... Signed-off-by: Alex A. Naanou --- ui/experiments/infinite-ribbon.html | 109 ++++++++++++++++++---------- 1 file changed, 69 insertions(+), 40 deletions(-) diff --git a/ui/experiments/infinite-ribbon.html b/ui/experiments/infinite-ribbon.html index 0f5a88c7..aefbfbc6 100755 --- a/ui/experiments/infinite-ribbon.html +++ b/ui/experiments/infinite-ribbon.html @@ -5,7 +5,10 @@ function focus(elem){ $('.current.square').removeClass('current') - return $(elem).closest('.square').addClass('current') + $(elem) + .closest('.square') + .addClass('current') + .trigger('focus') } function clickHandler(){ focus(this) @@ -21,62 +24,86 @@ function clickHandler(){ * and focus an element from the other end. * */ -function shiftSquare(direction, n){ - if(n == null){ - n = 1 - } +// XXX make this customizable (selector-wise)... +function shiftFocus(n){ var cur = $('.current.square') - // trigger the event... - cur.closest('.container') - .trigger('shift'+direction, n) - // if we move to the same spot, do nothing... - if(n == 0){ + if(n > 0){ + direction = 'next' + } else if(n < 0){ + direction = 'prev' + } else { return cur } + + // trigger the event... + cur.closest('.container') + .trigger('shiftfocus', n) + + var dir = cur[direction+'All']('.square') // 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 i = sq.index(cur) - return focus($(sq[ direction == 'next' + return focus($(sq[ n > 0 ? (i + n) % sq.length - : sq.length - (Math.abs(i - n) % sq.length) ])) + : sq.length - (Math.abs(i + n) % sq.length) ])) } // shift the current element... - return focus($(cur[direction+'All']('.square')[n-1])) -} -// shift focus left/right wrappers... -function next(n){ - return shiftSquare('next', n) -} -function prev(n){ - return shiftSquare('prev', n) + return focus($(dir[Math.abs(n)-1])) } // these will roll the container... -// XXX this needs a means to update the element content... -function rollRight(n){ - if(n == null){ - n = 1 +function rollContainer(n){ + // right... + if(n > 0){ + 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(){ $('.container') - .on('shiftnext', function(evt, n){rollRight(n)}) - .on('shiftprev', function(evt, n){rollLeft(n)}) + // NOTE: this event will get completed BEFORE the element is focused. + .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') .click(clickHandler) @@ -121,10 +148,12 @@ $(function(){ - - - - + + + + +  +