From 859973a2b009f25576041b84da12310a51e2196a Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Thu, 21 Jun 2012 15:29:14 +0400
Subject: [PATCH] added a fully working CSS experiment (success), now all that
 is left to do is to make the animation sane...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/experiment-css-only-structure-2.html | 205 ++++++++++++++++++++++++
 1 file changed, 205 insertions(+)
 create mode 100755 ui/experiment-css-only-structure-2.html
diff --git a/ui/experiment-css-only-structure-2.html b/ui/experiment-css-only-structure-2.html
new file mode 100755
index 00000000..13816ed3
--- /dev/null
+++ b/ui/experiment-css-only-structure-2.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<!--
+
+Goals:
+- investigate the posiblity to place the .current element at a 
+  predefined location.
+- position all other elements relative to .current
+- do the above two cleanly via CSS only - i.e. changing the .current 
+  class to another element will reposition the whole group.
+
+- make the animation natural, preferably CSS-only...
+
+
+-->
+
+<script src="jquery.js"></script>
+<script>
+
+$(document).ready(function(){
+	// setup...
+	if($('.current').length > 0){
+		var cur = $('.current').first()
+		$('.current').removeClass('current')
+		cur.addClass('current').prev('.square').addClass('previous')
+	} else {
+		$('.square').first().addClass('current')
+	}
+	// HACK: removes text between nodes...
+	// XXX a different way to do this is set font-size to 0 in the .container, 
+	//     but will need to reset it back in everything else...
+	// XXX us there a better way...
+	$('.container')
+		.contents()
+		.filter(function() {
+			// Node.TEXT_NODE && only whitespace
+			return (this.nodeType == 3 && $.trim(this.value) == '')
+		}).remove();
+	
+
+
+	// handlers...
+	$('.square').click(function(e){
+		$('.square').removeClass('current previous')
+		$(this).addClass('current')
+			.prev('.square').addClass('previous')
+
+		// XXX at this poit of afairs, to fix things will need 
+		//     to reverse the blue squares...
+
+		e.preventDefault()
+	})
+	$('.toggle-animation').click(function(e){
+		if($('.animated').length > 0){
+			$('.animated').removeClass('animated')
+		} else {
+			$('.square').addClass('animated')
+		}
+
+		e.preventDefault()
+	})
+	$('.toggle-overflow').click(function(e){
+		if($('.meta-container').css('overflow') == 'visible'){
+			$('.meta-container').css({overflow: 'hidden'})
+		} else {
+			$('.meta-container').css({overflow: 'visible'})
+		}
+
+		e.preventDefault()
+	})
+})
+
+</script>
+
+<style>
+
+.button {
+	border: solid 2px silver;
+	display: inline;
+	padding: 5px;
+	cursor: hand;
+}
+.meta-container {
+	border: solid 3px black;
+	overflow: visible;
+	height: 66px;
+	width: 100px;
+
+	position: relative;
+	top: 100px;
+	left: 450px;
+
+}
+
+/* this has to be of with = N * square.width + C where N is number of 
+sqares and C is to compensate for margins and borders
+
+margin-left = -(n*square.width + C) where n is the number of squares 
+left of .current */
+.container {
+	border: solid 3px gray;
+	overflow: visible;
+	height: 50px;
+	padding: 5px;
+
+	width: 1000px;
+
+	/* one way to go is to move the ribbon with this... */
+	/* NOTE: this needs to account for all the margins and borders 
+		 in the stack, in this case: 
+			 -(2*50-3*5) 
+
+		 .meta-container.width/2 - .square.width/2 (+/- margins and borders)
+	*/
+	margin-left: -475px;
+
+	text-align: right;
+}
+
+/* squares before the current */
+.square {
+	/* XXX this makes it eccessary to remove whitespace between elements */
+	display: inline-block;
+	position: relative;
+	width: 50px;
+	height: 50px;
+	background: blue;
+}
+
+.animated {
+	/* 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 {
+	background: silver;
+
+	margin-left: 50%;
+
+	clear: left;
+	float: left;
+}
+
+/* squares after the current */
+.current ~ .square {
+	background: red;
+	float: left;
+}
+
+/* squares after the prefious - this incudes current */
+.previous ~ .square {
+	/* puts thisngs back into the ribbon */
+	top: -50px;
+}
+
+.container .square:first-child {
+	border-left: solid 5px gray;
+}
+
+/* XXX find a honest, CSS-only, way to do this... 
+       i.e. without needing to set a second class
+       ...need to select only the element directly before .current (reverse 
+       of the + combinator)
+ */
+.previous {
+	margin-right: 50%;
+}
+
+.container .square:last-child {
+	border-right: solid 5px gray;
+
+}
+
+</style>
+
+
+<div class="toggle-animation button">toggle animation</div>
+<div class="toggle-overflow button">toggle overflow</div>
+
+<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">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>
+
+<!-- this is oddly aligned to the .squares -->
+<!--div class="toggle-animation-button">toggle animation</div-->
+
+
+</body>
+</html>
