ImageGrid/ui/TODO.otl

Priority work
	[_] 12% Preview II
		[_] 0% sorted images in ribbons
		| and correct positioning on promote/demote
		|
		|	input:
		| 	[01][02][03][04][05][06][07][08][09][10][11] ... [19][20]
		|
		| 		single ribbon, nothing special here.
		|
		|
		|   general sort:
		| 	         [05]      [10][11][12]  [15] [19][20] 
		| 	[01]  [04]  [06][07][08]  [13][14]  [18]
		| 	 [02][03]              [09]    [16][17]
		|
		| 	 	each strip is positioned above or below the place it was 
		| 	 	shifted from.
		| 	 	if there is not enough space use weights to balance the 
		| 	 	thing.
		|
		|
		|   selected [08]:
		| 	                 [05] [10][11][12] [15] [19][20] 
		| 	[01] [04] [06][07][[08]] [13][14] [18]
		| 	             [02][03] [09] [16][17]
		|
		| 		above and below images are centered around the current 
		| 		image as axis, the rule is that the strips left are coming 
		| 		from the left of the axis and likewise for the right side. 
		|
			[X] stage I: position the promoted/demoted image correctly
			[_] stage II: scroll ribbons correctly
			| this is simple:
			| - center the right edge of image returned
			|   by getImageBefore in all ribbons other than current...
			| - center current-image in current ribbon
			| - vertically center the current ribbon (negative margin?)
				[X] prototype and basic API
				[_] migrate main code to the new system
		[_] 0% correct zooming and modes
			[_] zooming in ribbon view
			[_] zoom presets for ribbon view
				[_] all
				[_] all in group
				[_] five
				[_] three
				[_] one (with zooming)
			[_] single image mode with zooming
			| ribbons are hidden
			[_] grid mode (mid priority)
			[_] calendar mode (low priority)
		[_] 0% fix layout and animations
			[_] zooming
			[_] navigation
			[_] actions
	[_] 0% misc
		[_] add sort/re-sort capability...
		[_] make scrolling of other ribbons proportional to the gap...
	[_] 0% Preview III
		[_] 0% native client
			[_] windows
			[_] android
			[_] MacOS (low priority)
			[_] iOS (low priority)
	[_] 0% Pre-Alpha
		[_] 0% finalize UI logic
			[_] unsorted images
	

Goals:
	main ribbon always consistent
	fast sorting via several simple passes
		binary
		| items are split into two ribbons.
		|
		| this can be done either by mandatorily shifting either up or 
		| down or by restricting shifting to just one direction.
		|
		| this is a bit too restrictive.
		|
		| essentially this is a combination in the ternary approach 
		| below as we can still shift images between levels.
		ternary
		| current ribbon and items are either sifted up, shifted down 
		| relative to it or left on, unshifted.
		|
		| main ribbon consistency is not always obvious, especially on 
		| partially sorted sets. e.g. while sorting part of the set where 
		| should the unsorted part be?
		|
		|			sorted section
		| 			+-------------------+
		|
		| 	  oooooooooooooooooooooooooooooooo
		| 	-	oooooooooooooooooooooooooooo
		|	>		oooooooooooooooooooooxxxxxxxxxxxxxxxxxxxxxxxxxxx... <
		| 	+		   oooooooooooooooo
		| 			         oooo
		|
		| 			         			 +----------------------------+
		| 			         			 which level should this go to?
		|
		| in the illustration, the ribbon marked by ">" and "<" is where 
		| the sorting started.
		|
		| there is also a question of how do we define the border between
		| sorted and unsorted zones and when? 
		| ...after the sort is done, and when is that?
		|
		| possible ways to go around this:
		| 	before sorting select the working batch
		| 		- adds an extra step
		| 		- restricts later sorting
		| 	restrict promotion over the main ribbon
		| 		+ sorting can be refined later in the same mode
		| 		- prevents the user to select the better images on first pass
		| 	split the sorted and unsorted batches and never mix them
		| 		- restricts later sorting
		| 	main ribbon always shows all the better images (from better levels)
		| 		o needs a way to move whole topologies up/down relative 
		| 		  to the main ribbon...
		| 		  one way to do this is select and shift multiple images
		| 		  will shift the whole pyramid (with all the "worse" images in between)
		| 		- introduces modes: sorting / viewing
		| 		- adds a separate stage -- move the topology to a correct
		| 		  main ribbon position
		|
		| Q: is this system applicable to sorting search results?
		| A: likely yes, but the farther one gets from the main ribbon 
		|    the more the difference can get between adjacent images.
	images are always sortable
	all levels always browsable
	make all the steps except the actual sorting implicit
	| i.e. no jumping through hoops for the human...
	


basic structure
	[X] ribbons	
	[X] images
	[_] indicators
	| show where the images came from...


[_] % basic control elements
	[_] 77% touch zones / buttons
		[X] next				DONE
		[X] prev				DONE
		[X] shift up			DONE
		[X] shift down			DONE
		[X] promote				DONE
		[X] demote				DONE
		[_] zoom in				~		need real zooming...
		[_] zoom out			~		need real zooming...
		[X] toggle single image	DONE

[_] 11% features
	[_] 45% views
		[_] 40% ribbon-based view
			[_] show all
			| might be good to not show any images here at all, just replace them with their average color
			[X] show map
			[X] fit to ribbon
			[_] fit to image (square)
			[_] ribbon with promoted/demoted images
			| show semi-transparent images that were demoted/promoted from current ribbon
		[_] 50% single image view
			[_] image fit to screen
			[X] image fit to square
	| show parts of upper and lower ribbons
	[_] image zooming
	| fast zooming to stages:
	| 	fit
	| 	100%
	| 	200%
	| 	...
	[_] basic editing and manipulation
	| image unchanged, data saved to json...
		[_] crop
		[_] rotate

[_] 20% General ToDo
	[_] 0% image sorting
		[_] will affect:
			[_] promote
			[_] demote
			[_] shift up
			[_] shift down
			[_] ribbon merging
	[_] add promote/demote events (to attach structure editors)...
	| enable extension and use as a generic widget...
	[X] add real images...
	[_] make all the code relative to the current selection (multiple instances on a page support)
	[_] add ribbon relative scrolling...
	| each ribbon is positioned relative to the current selected image
	| 	below-left: closest image to the left of the current
	| 	bolow-right: same as above but right...
	|
	| this will demote/promote the image directly up or down...
	[_] make this into a jquery plugin...
	[_] add dynamic loading and unloading for very large sets...
	[X] gesture support...
	[_] add basic actions:
		[_] rotate left
		[_] rotate right
		[_] crop
		...
	[_] add info:
		[_] number of images in ribbon
		[_] position in ribbon


[X] 100% refactoring:
	[X] merge almost identical functions...


[_] % ISSUES and BUGS:
	[_] jumping on focus up/down...
	[_] demoting a first element (a ribbon is created) positions the field incorrectly (see demoteImage() for details)...

.
| vim:set spell :