From 3799e21a773ea4f9e1e130a3bdd00a0649025dec Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 24 Jul 2012 15:38:54 +0400
Subject: [PATCH] partial transition done, next cleanup and migration to real
 zooming...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/experiment-ribbon-navigation-n-zoom.html | 124 ++++++++++----------
 ui/gallery-prototype.js                     |  20 +++-
 ui/gallery.css                              |  15 ++-
 ui/gallery.html                             |   3 +
 ui/ui.js                                    |  46 ++++----
 5 files changed, 118 insertions(+), 90 deletions(-)

diff --git a/ui/experiment-ribbon-navigation-n-zoom.html b/ui/experiment-ribbon-navigation-n-zoom.html
index 45d8bf4f..e6ba451f 100755
--- a/ui/experiment-ribbon-navigation-n-zoom.html
+++ b/ui/experiment-ribbon-navigation-n-zoom.html
@@ -18,11 +18,11 @@ XXX zoom animation is odd...
 <script>
 
 $(document).ready(function(){
-	$('.square').click(squareClick)
+	$('.image').click(imageClick)
 
 	fieldSize(300, 200)
 
-	$('.current.square').click()
+	$('.current.image').click()
 })
 
 function toggleMarkers(){
@@ -34,7 +34,7 @@ function toggleMarkers(){
 	}
 }
 
-function squareClick(){
+function imageClick(){
 	// set classes...
 	$('.current').removeClass('current')
 	$(this)
@@ -115,7 +115,7 @@ function squareClick(){
 	transition: all 0.5s ease;
 }
 
-.square {
+.image {
 	width: 50px;
 	height: 50px;
 	background: silver;
@@ -130,13 +130,13 @@ function squareClick(){
 	transition: all 0.5s ease;
 }
 
-.image {
+.pic {
 	background: no-repeat 50% black;
 	background-size: contain;
 	background-image: url(images/350px/DSC_3501.jpg);
 }
 
-.current.square {
+.current.image {
 	background-color: gray;
 }
 
@@ -166,76 +166,76 @@ Size:
 <div class="container animated">
 	<div class="field">
 		<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 class="image">1</div>
+			<div class="image">2</div>
+			<div class="image">3</div>
+			<div class="image">4</div>
+			<div class="image">5</div>
+			<div class="image">6</div>
+			<div class="image">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 class="image">1</div>
+			<div class="image">2</div>
+			<div class="image">3</div>
+			<div class="image">4</div>
+			<div class="image">5</div>
+			<div class="image">6</div>
+			<div class="image">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 class="image">1</div>
+			<div class="image">2</div>
+			<div class="image current">3</div>
+			<div class="image">4</div>
+			<div class="image">5</div>
+			<div class="image">6</div>
+			<div class="image">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 image">5</div>
-			<div class="square">6</div>
-			<div class="square">7</div>
+			<div class="image">1</div>
+			<div class="image">2</div>
+			<div class="image">3</div>
+			<div class="image">4</div>
+			<div class="image pic">5</div>
+			<div class="image">6</div>
+			<div class="image">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 class="image">1</div>
+			<div class="image">2</div>
+			<div class="image">3</div>
+			<div class="image">4</div>
+			<div class="image">5</div>
+			<div class="image">6</div>
+			<div class="image">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 class="image">1</div>
+			<div class="image">2</div>
+			<div class="image">3</div>
+			<div class="image">4</div>
+			<div class="image">5</div>
+			<div class="image">6</div>
+			<div class="image">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 class="image">1</div>
+			<div class="image">2</div>
+			<div class="image">3</div>
+			<div class="image">4</div>
+			<div class="image">5</div>
+			<div class="image">6</div>
+			<div class="image">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 class="image">1</div>
+			<div class="image">2</div>
+			<div class="image">3</div>
+			<div class="image">4</div>
+			<div class="image">5</div>
+			<div class="image">6</div>
+			<div class="image">7</div>
 		</div>
 	</div>
 	<div class="h-marker"></div>
diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js
index d2827986..9dc5f29f 100755
--- a/ui/gallery-prototype.js
+++ b/ui/gallery-prototype.js
@@ -46,7 +46,7 @@ function setupGestures(){
 
 function setupControlElements(){
 	// images...
-	$(".image").click(handleImageClick)
+	$(".image").click(setCurrentImage)
 
 	// buttons...
 	$('.next-image').click(nextImage)
@@ -70,7 +70,7 @@ function loadImages(json){
 			.css({ 'background-image': 'url('+images[i]+')' })
 			// set a unique id for each image...
 			.attr({'id': i})
-			.click(handleImageClick)
+			.click(setCurrentImage)
 			.appendTo(ribbon)
 	}
 	ribbon.children().first().click()
@@ -80,7 +80,22 @@ function loadImages(json){
 
 
 /*************************************************** Event Handlers **/
+function setCurrentImage(){
+	// set classes...
+	$('.current').removeClass('current')
+	$(this)
+		.addClass('current')
+		.parents('.ribbon')
+			.addClass('current')
 
+	// position the field and ribbons...
+	centerSquare()
+}
+
+
+
+// XXX depricated...
+/*
 function handleImageClick(e) {
 	var cur = $(this)
 
@@ -111,6 +126,7 @@ function handleImageClick(e) {
 	// XXX do I need this???
 	e.preventDefault();
 }
+*/
 
 
 
diff --git a/ui/gallery.css b/ui/gallery.css
index 04f8238d..92bf75d7 100755
--- a/ui/gallery.css
+++ b/ui/gallery.css
@@ -1,10 +1,14 @@
 .image {
+	/* new markup... */
+	float: left;
+	/* old markup...
 	position: relative;
+	display: inline-block;
+	 */
 
 	width: 350px;
 	height: 350px;
 
-	display: inline-block;
 	background: no-repeat 50% black;
 	background-size: contain;
 
@@ -110,8 +114,11 @@
 .field {
 	position: relative;
 	overflow: visible;
+	/* XXX replace this with transform:scale(...) */
+	zoom: 1;
 	top: 0px;
-	left: -100px;
+	left: 0px;
+	margin-top: 0px;
 
 	-webkit-transition: all 0.2s ease;
 	-moz-transition: all 0.2s ease;
@@ -127,7 +134,7 @@
 	overflow: visible;
 	padding-top: 2px;
 	padding-bottom: 2px;
-	text-align: center;
+	/*text-align: center;*/
 	opacity: 0.2;
 
 	-webkit-transition: all 0.2s ease;
@@ -152,8 +159,10 @@
 }
 
 .current.ribbon {
+	/*
 	padding-top: 20px;
 	padding-bottom: 20px;
+	*/
 
 	opacity: 1.0;
 
diff --git a/ui/gallery.html b/ui/gallery.html
index 2beffd93..630a3986 100755
--- a/ui/gallery.html
+++ b/ui/gallery.html
@@ -33,6 +33,9 @@ function setup(){
 	setupGestures()
 	setupControlElements()
 
+	// XXX
+	//fieldSize(800, 500)
+
 	// load images...
 	// XXX not allowed...
 	//$.getJSON('images.js', loadImages})
diff --git a/ui/ui.js b/ui/ui.js
index 3a5a6a50..8ece3a61 100755
--- a/ui/ui.js
+++ b/ui/ui.js
@@ -32,16 +32,16 @@
 
 // get the vertical offset of the center of square from center of container
 // NOTE: this does not account for field margins
-function getCurrentVerticalOffset(square){
-	if(square == null){
-		square = $('.square.current')
+function getCurrentVerticalOffset(image){
+	if(image == null){
+		image = $('.image.current')
 	}
 
 	var zoom = $('.field').css('zoom')
 
 	var ribbons = $('.ribbon')
-	var ribbon = square.parents('.ribbon')
-	var squares = ribbon.children('.square')
+	var ribbon = image.parents('.ribbon')
+	var images = ribbon.children('.image')
 
 	// vertical...
 	var H = $('.container').height()
@@ -62,23 +62,23 @@ function getCurrentVerticalOffset(square){
 
 // get the horizontal offset of the center of square from center of container
 // NOTE: this does not account for field margins
-function getCurrentHorizontalOffset(square){
-	if(square == null){
-		square = $('.square.current')
+function getCurrentHorizontalOffset(image){
+	if(image == null){
+		image = $('.image.current')
 	}
 
 	var zoom = $('.field').css('zoom')
 
-	var ribbon = square.parents('.ribbon')
-	var squares = ribbon.children('.square')
+	var ribbon = image.parents('.ribbon')
+	var images = ribbon.children('.image')
 
 	var W = $('.container').width()
-	var w = squares.outerWidth(true)
+	var w = images.outerWidth(true)
 	// margin...
 	// XXX do we need this?
-	var mw = w - squares.outerWidth()
+	var mw = w - images.outerWidth()
 	// current square position (1-based)
-	var sn = squares.index(square) + 1
+	var sn = images.index(image) + 1
 	var l = sn * (w - mw/2)
 
 	return -l + W/2 + w/2
@@ -94,16 +94,16 @@ function centerSquare(){
 	alignRibbon()
 }
 
-function alignRibbon(square, position){
+function alignRibbon(image, position){
 	// default values...
-	if(square == null){
-		square = $('.square.current')
+	if(image == null){
+		image = $('.image.current')
 	}
 	if(position == null){
 		position = 'center'
 	}
 
-	var ribbon = square.parents('.ribbon')
+	var ribbon = image.parents('.ribbon')
 
 	// account for margined field...
 	// NOTE: this enables us to cheat and shift all the ribbons just
@@ -112,8 +112,8 @@ function alignRibbon(square, position){
 	if(!cml){
 		cml = 0
 	}
-	var h_offset = getCurrentHorizontalOffset(square) - cml
-	var w = $('.square').outerWidth(true)
+	var h_offset = getCurrentHorizontalOffset(image) - cml
+	var w = $('.image').outerWidth(true)
 
 	switch(position){
 		case 'before':
@@ -185,8 +185,8 @@ function fitImage(){
 	var H = $('.container').height()
 	var W = $('.container').width()
 
-	var h = $('.square.current').height()
-	var w = $('.square.current').width()
+	var h = $('.image.current').height()
+	var w = $('.image.current').width()
 
 	var f = Math.min(H/h, W/w)
 
@@ -197,9 +197,9 @@ function fitThreeImages(){
 	var H = $('.container').height()
 	var W = $('.container').width()
 
-	var h = $('.square.current').height()
+	var h = $('.image.current').height()
 	// XXX cheating, need to get three widths...
-	var w = $('.square.current').width()*3
+	var w = $('.image.current').width()*3
 
 	var f = Math.min(H/h, W/w)