flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2026-01-03 00:41:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor changes...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-04-26 05:31:26 +04:00
parent 00151937ff
commit c7e509abef
1 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ function focus(elem){
.addClass('current') .addClass('current')
.trigger('focus') .trigger('focus')
} }
function clickHandler(){ function clickHandler(){
focus(this) focus(this)
} }
@ -39,7 +40,10 @@ function shiftFocus(n){
cur.closest('.container') cur.closest('.container')
.trigger('shiftfocus', n) .trigger('shiftfocus', n)
// XXX will adding a singular [direction] branch make things faster
// for n = +/-1 ???
var dir = cur[direction+'All']('.square') var dir = cur[direction+'All']('.square')
// see if we need to warp arund... // see if we need to warp arund...
if(dir.length < Math.abs(n)){ if(dir.length < Math.abs(n)){
var sq = cur.closest('.container').children('.square') var sq = cur.closest('.container').children('.square')
@ -48,6 +52,7 @@ function shiftFocus(n){
? (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($(dir[Math.abs(n)-1])) return focus($(dir[Math.abs(n)-1]))
} }
@ -55,13 +60,16 @@ function shiftFocus(n){
// these will roll the container... // these will roll the container...
// XXX make this container context-aware...
function rollContainer(n){ function rollContainer(n){
var sq = $('.current.square')
.closest('.container')
.children('.square')
// right... // right...
if(n > 0){ if(n > 0){
return $($('.square').splice(0, n)).appendTo($('.container')) return $(sq.splice(0, n)).appendTo($('.container'))
// left... // left...
} else if(n < 0){ } else if(n < 0){
var sq = $('.square')
var l = sq.length var l = sq.length
return $(sq.splice(l+n, l)).prependTo($('.container')) return $(sq.splice(l+n, l)).prependTo($('.container'))
// 0... // 0...
@ -71,7 +79,8 @@ function rollContainer(n){
} }
var UPDATE_ELEMENT_TEXT = false // misc demo stuff...
var UPDATE_ELEMENT_TEXT = true
function toggleNumberUpdate(){ function toggleNumberUpdate(){
if(UPDATE_ELEMENT_TEXT){ if(UPDATE_ELEMENT_TEXT){
UPDATE_ELEMENT_TEXT = false UPDATE_ELEMENT_TEXT = false
@ -81,25 +90,28 @@ function toggleNumberUpdate(){
} }
// init things...
$(function(){ $(function(){
$('.container') $('.container')
// NOTE: this event will get completed BEFORE the element is focused. // NOTE: this event will get completed BEFORE the element is focused.
.on('shiftfocus', function(evt, n){ .on('shiftfocus', function(evt, n){
if(UPDATE_ELEMENT_TEXT){
var sq = $('.square')
// update squares -- numbers...
if(UPDATE_ELEMENT_TEXT){
var sq = $(this).children('.square')
if(n > 0){ if(n > 0){
var s = $('.square').last().text()*1 + 1 var s = sq.last().text()*1 + 1
} else if(n < 0){ } else if(n < 0){
var s = $('.square').first().text()*1 + n var s = sq.first().text()*1 + n
} else { } else {
return return
} }
rollContainer(n).each(function(i, e){ rollContainer(n).each(function(i, e){
$(this).text(i + s) $(this).text(i + s)
}) })
// roll as-is...
} else { } else {
rollContainer(n) rollContainer(n)
} }
@ -155,9 +167,9 @@ $(function(){
&nbsp; &nbsp;
<button onclick="toggleNumberUpdate()">toggle square number update</button> <button onclick="toggleNumberUpdate()">toggle square number update</button>
<div class="meta-container"> <div class="meta-container">
<div class="container"> <div class="container">
<!-- BUG: when current is first hell breaks lose... -->
<div class="square">1</div> <div class="square">1</div>
<div class="square">2</div> <div class="square">2</div>
<div class="square current">3</div> <div class="square current">3</div>
@ -169,8 +181,6 @@ $(function(){
</div> </div>
</body> </body>
<!-- vim:set ts=4 sw=4 : --> <!-- vim:set ts=4 sw=4 : -->
</html> </html>