From aede20c87f00fc1f23683816f963be046e101877 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Mon, 3 Sep 2012 22:03:43 +0400
Subject: [PATCH] started experimenting with dynamic loading...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/TODO.otl                         |  44 ++++++----
 ui/experiments/dynamic-loading.html | 120 ++++++++++++++++++++++++++++
 ui/gallery-prototype.js             |  43 ++++++----
 3 files changed, 177 insertions(+), 30 deletions(-)
 create mode 100755 ui/experiments/dynamic-loading.html

diff --git a/ui/TODO.otl b/ui/TODO.otl
index 03aada8e..144e1a0b 100755
--- a/ui/TODO.otl
+++ b/ui/TODO.otl
@@ -1,22 +1,34 @@
 Priority work
 	[_] 62% Preview II
-		[_] 0% dynamic loading of images
+		[_] 5% dynamic loading of images
+			[_] 11% stream on navigate
+				| parameters that affect loading:
+				| 	- current view size				-> image size must be closest
+				| 										above this
+				| 	- viewer width in images		-> number of widths (2-3) 
+				| 										distance is used to trigger
+				| 										loading or unloading of images
+				| 										depending on direction
+				| 										NOTE: this is done for each
+				| 											  image size in use.
+				|
+				| NOTE: here the trigger must be proximity to the view as we 
+				| 		can reach an image not just by navigating close but 
+				| 		also by scrolling/dragging to it (without changing the
+				| 		current image)...
+				[_] store structure separately from ui (mirror context)
+				| an alternative would be to store the whole thing (sans images)
+				| in DOM, but that ma get very big.
+				|
+				| storing the structure will enable us to have partial structures
+				| thus updating the structure of a very big set without the user
+				| noticing.
+				[_] 33% sync context (handle edit events)
+					[X] identify action position
+					| use id...
+					[_] handle edit events
+				[_] update ui structure (handle navigate/move events)
 			[_] sizes on zoom
-			[_] stream on navigate
-			| parameters that affect loading:
-			| 	- current view size				-> image size must be closest
-			| 										above this
-			| 	- viewer width in images		-> number of widths (2-3) 
-			| 										distance is used to trigger
-			| 										loading or unloading of images
-			| 										depending on direction
-			| 										NOTE: this is done for each
-			| 											  image size in use.
-			|
-			| NOTE: here the trigger must be proximity to the view as we 
-			| 		can reach an image not just by navigating close but 
-			| 		also by scrolling/dragging to it (without changing the
-			| 		current image)...
 		[_] make shift up/down direction-aware...
 		| i.e. if we are going through images in a direction select the 
 		| next image in that direction when shifting...
diff --git a/ui/experiments/dynamic-loading.html b/ui/experiments/dynamic-loading.html
new file mode 100755
index 00000000..2e02a52e
--- /dev/null
+++ b/ui/experiments/dynamic-loading.html
@@ -0,0 +1,120 @@
+<script src="../jquery.js"></script>
+
+<style>
+
+.field {
+	width: auto;
+	overflow: visible;
+}
+
+.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: gray;
+}
+
+.unloaded.image {
+	opacity: 0.5;
+}
+
+</style>
+
+
+<div class="field">
+</div>
+
+<script>
+
+// build an image element...
+function makeImage(url, order){
+	return $('<div class="image"/>').attr({id: order})
+}
+	
+var json = {
+	position: 10, 
+	ribbons:[
+		{
+			3: {},
+			4: {},
+			6: {},
+			7: {},
+			8: {},
+			10: {},
+			12: {},
+			13: {},
+			18: {},
+			19: {},
+			20: {},
+			30: {},
+			34: {},
+			37: {},
+			40: {},
+		}
+	]
+}
+
+/*
+format:
+[
+	// ribbon
+	[
+		<image-id>,
+		...
+	],
+	...
+]
+*/
+
+var LOAD = 5
+
+function loadJSON(json, index){
+	var field = $('.field')
+	var ribbons = json.ribbons
+	var current = json.position
+	var R = Math.floor(LOAD/2)
+
+	for(var i = 0; i < ribbons.length; i++){
+		var images = ribbons[i]
+
+		// index the ribbon...
+		var r_index = []
+		for(var j in images){
+			r_index.push(j)
+		}
+		r_index.sort(function(a, b){return parseInt(a)-parseInt(b)})
+
+		var ribbon = $('<div class="ribbon"/>').appendTo(field)
+		for(var j = 0; j < r_index.length; j++){
+			var cur_i = r_index.indexOf(current+"")
+			var i_index = r_index[j]
+			var image = makeImage('', i_index).appendTo(ribbon)
+			if(cur_i > 0 && Math.abs(cur_i - j) > R){
+				image.addClass('unloaded')
+			}
+			if(i_index == current){
+				image.addClass('current')
+			}
+		}
+	}
+
+}
+
+loadJSON(json)
+
+</script>
+
diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js
index 7b7592ee..849f3a6b 100755
--- a/ui/gallery-prototype.js
+++ b/ui/gallery-prototype.js
@@ -18,6 +18,8 @@ var ImageGrid = {
 	option_props: {},
 	option_groups: [],
 
+	image_data: null,
+
 	// define an action...
 	// the two values that are obligatory are:
 	// 		title	- name of the action
@@ -1166,18 +1168,18 @@ function makeImage(url, order, set_order){
 
 
 function loadImagesFromList(images){
-	var field = $('.field')
-
-	field.children('.ribbon').remove()
-
-	var ribbon = $('<div class="ribbon"></div>')
-		.appendTo(field)
-
-	for(var i = 0; i < images.length; i++){
-		makeImage(images[i], i)
-			.appendTo(ribbon)
+	var json = {
+		ribbons: [
+			{}
+		]
 	}
-	$('.image').first().click()
+	var ribbon = json.ribbons[0]
+	for(var i = 0; i < images.length; i++){
+		ribbon[i] = {
+			url: images[i]
+		}
+	}
+	return loadJSON(json)
 }
 
 
@@ -1188,15 +1190,21 @@ function loadImagesFromList(images){
  * 	{
  * 		position: <image-id>,
  * 		ribbons: [
- * 			<image-id>: {
- * 				url: <image-URL>,
- * 			},				
+ * 			{
+ * 				<image-id>: {
+ * 					url: <image-URL>,
+ * 				},				
+ * 				...
+ * 			},
  * 			...
  * 		]
  * 	}
  */
 // XXX add incremental or partial updates...
 function buildJSON(get_order){
+	if(ImageGrid.image_data != null){
+		return ImageGrid.image_data
+	}
 	if(get_order == null){
 		get_order = getImageOrder
 	}
@@ -1240,6 +1248,13 @@ function loadJSON(data, position, set_order){
 	if(ribbons == null){
 		return
 	}
+
+	/*
+	// XXX
+	// store the structure...
+	ImageGrid.image_data = data
+	*/
+
 	var field = $('.field')
 
 	// drop all old content...