flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-12-21 02:31:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

added an 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-12 17:24:06 +04:00
parent 199b07dfc3
commit 97db146f2b
1 changed files with 120 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
ui/experiments/infinite-ribbon.html Executable file
View File

@ -0,0 +1,120 @@
<html>
<script src="jquery.js"></script>
<script>
function focus(elem){
$('.current.square').removeClass('current')
return $(elem).closest('.square').addClass('current')
}
function clickHandler(){
focus(this)
}
function shiftSquare(direction){
var cur = $('.current.square')
// trigger the event...
cur.closest('.container')
.trigger('shift'+direction)
// see if we are the last...
if(cur[direction]('.square').length < 1){
// do not move past the edge...
//return cur
// rotate...
return focus(cur
.closest('.container')
.children('.square')[ direction == 'next' ? 'first' : 'last' ]())
}
// shift the current element...
return cur
.removeClass('current')[direction]('.square')
.addClass('current')
}
// shift focus left/right...
function next(){
return shiftSquare('next')
}
function prev(){
return shiftSquare('prev')
}
// these will roll the container...
// XXX this needs a means to update the element content...
function rollRight(){
$('.square').first().appendTo($('.container'))
}
function rollLeft(){
$('.square').last().prependTo($('.container'))
}
$(function(){
$('.container')
.on('shiftnext', rollRight)
.on('shiftprev', rollLeft)
$('.square')
.click(clickHandler)
})
</script>
<style>
.container {
position: relative;
display: inline-block;
height: auto;
min-width: 0px;
overflow: visible;
white-space: nowrap;
font-size: 0;
background: gray;
padding: 10px;
}
.square {
position: relative;
display: inline-block;
vertical-align: middle;
text-align;left;
width: 100px;
height: 100px;
background: silver;
font-size: 12pt;
}
.current.square {
background: red;
}
</style>
<body>
<button onclick="prev()">prev</button>
<button onclick="next()">next</button>
<div class="meta-container">
<div class="container">
<!-- BUG: when current is first hell breaks lose... -->
<div class="square">1</div>
<div class="square">2</div>
<div class="square current">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
<div class="square">7</div>
</div>
</div>
</body>
<!-- vim:set ts=4 sw=4 : -->
</html>