added a hacky experiment with working infinite ribbons...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/experiments/infinite-ribbon-timeout-method.html

@@ -0,0 +1,151 @@
+
+<script src="jquery.js"></script>
+<script>
+
+function handle_click(e){
+	$('.current.image').removeClass('current')
+	$(this).addClass('current')
+}
+
+function make_image(){
+	return $('<div class="image"/>')
+			.click(handle_click)
+}
+
+function load_images_before(){
+	$('.ribbon').prepend( 
+		make_image(), 
+		make_image(), 
+		make_image(), 
+		make_image(), 
+		make_image() )
+}
+function load_images_after(){
+	$('.ribbon').append( 
+		make_image(), 
+		make_image(), 
+		make_image(), 
+		make_image(), 
+		make_image() )
+}
+
+function trim_images_at_end(){
+	$('.image:nth-last-child(6) ~ .image').remove()
+}
+function trim_images_at_start(){
+	$('.image:nth-child(1),'+
+		'.image:nth-child(2), '+
+		'.image:nth-child(3), '+
+		'.image:nth-child(4), '+
+		'.image:nth-child(5)'
+		).remove()
+}
+
+function shift_ribbon_left(){
+	$('.field').addClass('unanimated')
+
+	load_images_after()
+	trim_images_at_start()
+
+	// correct for growth...
+	var w = 80
+	var l = parseFloat($('.field').css('left'))
+	$('.field').css({left: l + w*5})
+	console.log($('.field').css('left'), l, l+w*5)
+
+	// XXX this is really hackish! ...find a better way to solve this...
+	// XXX this is bad because it might depend on the speed of the device...
+	setTimeout(function(){$('.field').removeClass('unanimated')}, 10)
+}
+function shift_ribbon_right(){
+	$('.field').addClass('unanimated')
+
+	load_images_before()
+	trim_images_at_end()
+
+	// correct for growth...
+	var w = 80
+	var l = parseFloat($('.field').css('left'))
+	$('.field').css({left: l - w*5})
+	console.log($('.field').css('left'), l, l-w*5)
+
+	// XXX this is really hackish! ...find a better way to solve this...
+	// XXX this is bad because it might depend on the speed of the device...
+	setTimeout(function(){$('.field').removeClass('unanimated')}, 10)
+}
+
+
+function center_current_image(){
+}
+
+
+$(document).ready(function(){
+	$('.ribbon').append( make_image().click() )
+	load_images_before()
+	load_images_after()
+})
+
+</script>
+
+
+<style>
+
+body {
+	overflow: hidden;
+}
+
+.field {
+	position: relative;
+	top: 0px;
+	left: 0px;
+	width: auto;
+	overflow: visible;
+
+	-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;
+}
+
+.unanimated {
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: all 0 ease;
+	-ms-transition: none;	
+	transition: none;
+}
+
+.ribbon {
+	padding: 10px;
+	height: 100px;
+
+	width: auto;
+	overflow: visible;
+	white-space: nowrap;
+	font-size: 0px;
+}
+
+.image {
+	display: inline-block;
+	height: 80px;
+	width: 80px;
+	background: silver;
+}
+
+.current.image {
+	background: red;
+}
+
+</style>
+
+
+<button onclick="shift_ribbon_left()">&lt;</button>
+<button onclick="shift_ribbon_right()">&gt;</button>
+
+<div class="viewer">
+	<div class="field">
+		<div class="ribbon">
+		</div>
+	</div>
+</div>