mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +00:00
did a successfull experiment with the new navigation system... time to integrate into main UI...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
b190b5aa57
commit
f660dc9ca5
262
ui/experiment-ribbon-navigation-mechanics-n-structure.html
Executable file
262
ui/experiment-ribbon-navigation-mechanics-n-structure.html
Executable file
@ -0,0 +1,262 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Goals:
|
||||||
|
- design a simple navigation system and structure
|
||||||
|
- make it animate correctly only via CSS
|
||||||
|
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
<script src="jquery.js"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('.square').click(squareClick)
|
||||||
|
|
||||||
|
$('.current.square').click()
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
function squareClick(){
|
||||||
|
// set classes...
|
||||||
|
$('.current').removeClass('current')
|
||||||
|
$(this)
|
||||||
|
.addClass('current')
|
||||||
|
.parents('.ribbon')
|
||||||
|
.addClass('current')
|
||||||
|
|
||||||
|
// position the container and ribbons...
|
||||||
|
centerSquare()
|
||||||
|
allignRibbons()
|
||||||
|
}
|
||||||
|
|
||||||
|
function centerSquare(){
|
||||||
|
var ribbons = $('.ribbon')
|
||||||
|
var ribbon = $('.ribbon.current')
|
||||||
|
var squares = ribbon.children('.square')
|
||||||
|
|
||||||
|
// vertical...
|
||||||
|
var H = $('.meta-container').height()
|
||||||
|
var h = ribbons.outerHeight(true)
|
||||||
|
// margin...
|
||||||
|
var mh = h - ribbons.outerHeight()
|
||||||
|
// current ribbon position (1-based)
|
||||||
|
var rn = ribbons.index(ribbon) + 1
|
||||||
|
// XXX compensating for margin error buildup... really odd!
|
||||||
|
// ...why is this still different for the first three ribbons?!
|
||||||
|
// ....sub-pixel error?
|
||||||
|
// relative position to container...
|
||||||
|
// XXX is there a better way to get this?
|
||||||
|
var t = rn * (h - mh/2)
|
||||||
|
$('.container').css({'margin-top': -t + H/2 + h/2})
|
||||||
|
|
||||||
|
// horizontal...
|
||||||
|
alignRibbon()
|
||||||
|
}
|
||||||
|
|
||||||
|
function alignRibbon(square, position){
|
||||||
|
// default values...
|
||||||
|
if(position == null){
|
||||||
|
position = 'center'
|
||||||
|
}
|
||||||
|
if(square == null){
|
||||||
|
square = $('.square.current')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var ribbon = square.parents('.ribbon')
|
||||||
|
var squares = ribbon.children('.square')
|
||||||
|
|
||||||
|
var W = $('.meta-container').width()
|
||||||
|
var w = squares.outerWidth(true)
|
||||||
|
// margin...
|
||||||
|
// XXX do we need this?
|
||||||
|
var mw = w - squares.outerWidth()
|
||||||
|
// current square position (1-based)
|
||||||
|
var sn = squares.index(square) + 1
|
||||||
|
var l = sn * (w - mw/2)
|
||||||
|
|
||||||
|
switch(position){
|
||||||
|
case 'before':
|
||||||
|
ribbon.css({'margin-left': -l + W/2 + w})
|
||||||
|
return true
|
||||||
|
case 'center':
|
||||||
|
ribbon.css({'margin-left': -l + W/2 + w/2})
|
||||||
|
return true
|
||||||
|
case 'after':
|
||||||
|
ribbon.css({'margin-left': -l + W/2})
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
function alignRibbons(){
|
||||||
|
// XXX this is not present here as there is no notion of square
|
||||||
|
// order in this experiment...
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.meta-container {
|
||||||
|
position: relative;
|
||||||
|
border: solid gray 5px;
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.h-marker {
|
||||||
|
position: absolute;
|
||||||
|
border-top: solid blue 1px;
|
||||||
|
height: 0px;
|
||||||
|
width: 300px;
|
||||||
|
top: 100px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
.v-marker {
|
||||||
|
position: absolute;
|
||||||
|
border-left: solid blue 1px;
|
||||||
|
height: 200px;
|
||||||
|
width: 0px;
|
||||||
|
top: 0px;
|
||||||
|
left: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
/* set this to adjust the vertical position of the view... */
|
||||||
|
margin-top: -50px;
|
||||||
|
|
||||||
|
/* animate */
|
||||||
|
-webkit-transition: all 0.5s ease;
|
||||||
|
-moz-transition: all 0.5s ease;
|
||||||
|
-o-transition: all 0.5s ease;
|
||||||
|
-ms-transition: all 0.5s ease;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ribbon {
|
||||||
|
height: 50px;
|
||||||
|
/* HACK: need to figure out a way to avoid setting the width here... */
|
||||||
|
width: 1000px;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
/* animate */
|
||||||
|
-webkit-transition: all 0.5s ease;
|
||||||
|
-moz-transition: all 0.5s ease;
|
||||||
|
-o-transition: all 0.5s ease;
|
||||||
|
-ms-transition: all 0.5s ease;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: silver;
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
/* animate */
|
||||||
|
-webkit-transition: all 0.5s ease;
|
||||||
|
-moz-transition: all 0.5s ease;
|
||||||
|
-o-transition: all 0.5s ease;
|
||||||
|
-ms-transition: all 0.5s ease;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current.square {
|
||||||
|
background: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="meta-container">
|
||||||
|
<div class="container">
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="square">1</div>
|
||||||
|
<div class="square">2</div>
|
||||||
|
<div class="square">3</div>
|
||||||
|
<div class="square">4</div>
|
||||||
|
<div class="square">5</div>
|
||||||
|
<div class="square">6</div>
|
||||||
|
<div class="square">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon" style="margin-left: 40px;">
|
||||||
|
<div class="square">1</div>
|
||||||
|
<div class="square">2</div>
|
||||||
|
<div class="square">3</div>
|
||||||
|
<div class="square">4</div>
|
||||||
|
<div class="square">5</div>
|
||||||
|
<div class="square">6</div>
|
||||||
|
<div class="square">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon current">
|
||||||
|
<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 class="ribbon" style="margin-left: -100px;">
|
||||||
|
<div class="square">1</div>
|
||||||
|
<div class="square">2</div>
|
||||||
|
<div class="square">3</div>
|
||||||
|
<div class="square">4</div>
|
||||||
|
<div class="square">5</div>
|
||||||
|
<div class="square">6</div>
|
||||||
|
<div class="square">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="square">1</div>
|
||||||
|
<div class="square">2</div>
|
||||||
|
<div class="square">3</div>
|
||||||
|
<div class="square">4</div>
|
||||||
|
<div class="square">5</div>
|
||||||
|
<div class="square">6</div>
|
||||||
|
<div class="square">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="square">1</div>
|
||||||
|
<div class="square">2</div>
|
||||||
|
<div class="square">3</div>
|
||||||
|
<div class="square">4</div>
|
||||||
|
<div class="square">5</div>
|
||||||
|
<div class="square">6</div>
|
||||||
|
<div class="square">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="square">1</div>
|
||||||
|
<div class="square">2</div>
|
||||||
|
<div class="square">3</div>
|
||||||
|
<div class="square">4</div>
|
||||||
|
<div class="square">5</div>
|
||||||
|
<div class="square">6</div>
|
||||||
|
<div class="square">7</div>
|
||||||
|
</div>
|
||||||
|
<div class="ribbon">
|
||||||
|
<div class="square">1</div>
|
||||||
|
<div class="square">2</div>
|
||||||
|
<div class="square">3</div>
|
||||||
|
<div class="square">4</div>
|
||||||
|
<div class="square">5</div>
|
||||||
|
<div class="square">6</div>
|
||||||
|
<div class="square">7</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-marker"></div>
|
||||||
|
<div class="v-marker"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- this is oddly aligned to the .squares -->
|
||||||
|
<!--div class="toggle-animation-button">toggle animation</div-->
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user