From 8b96454530f84e2f5b650cbd2be1f352301e6ff4 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 19 Jun 2012 17:17:49 +0400
Subject: [PATCH] did and experiment with CSS-only structure and animations --
 partial fail, but close and fun to watch with animations on. will still try
 again.

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/experiment-css-only-structure.html | 164 ++++++++++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100755 ui/experiment-css-only-structure.html
diff --git a/ui/experiment-css-only-structure.html b/ui/experiment-css-only-structure.html
new file mode 100755
index 00000000..405be15e
--- /dev/null
+++ b/ui/experiment-css-only-structure.html
@@ -0,0 +1,164 @@
+<!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.
+
+
+-->
+
+<script src="jquery.js"></script>
+<script>
+
+$(document).ready(function(){
+	$('.square').click(function(e){
+		$('.square').removeClass('current')
+		$(this).addClass('current')
+
+		// XXX at this poit of afairs, to fix things will need 
+		//     to reverse the blue squares...
+
+		e.preventDefault()
+	})
+	$('.toggle-animation-button').click(function(e){
+		if($('.animated').length > 0){
+			$('.animated').removeClass('animated')
+		} else {
+			$('.square').addClass('animated')
+		}
+		e.preventDefault()
+	})
+})
+
+</script>
+
+<style>
+
+.toggle-animation-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;
+}
+
+/* XXX figure out a way to place these relative to the last one, PASIVELY!!
+	- one obvious way is to float them right and margin-right but 
+	  this will reverse the order of the elements...
+	  ...cen they be re-ordered back?
+	- bruteforce: calc left of the first-child (not CSS)...
+*/
+/* squares before the current */
+.square {
+	position: relative;
+
+	width: 50px;
+	height: 50px;
+	background: blue;
+
+	float: right;
+}
+
+.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;
+
+	top: -50px;
+}
+
+/* squares after the current */
+.current~.square {
+	background: red;
+	float: left;
+
+	/* puts thisngs back into the ribbon */
+	top: -50px;
+}
+
+.container .square:first-child {
+	border-left: solid 5px gray;
+
+	margin-right: 50%;
+}
+
+.container .square:last-child {
+	border-right: solid 5px gray;
+}
+
+</style>
+
+
+<div class="toggle-animation-button">toggle animation</div>
+
+<div class="meta-container">
+	<div class="container">
+		<!-- BUG: when current is first hell breaks lose... -->
+		<div class="square">1</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>
