ImageGrid/ui/TODO.otl

Priority work
	[_] 68% Preview II
		[_] 53% save state
			[X] minimal: Local Storage (manual)
			| works across all targets (CEF, PhoneGap, browser)
			[_] local JSON (file)
			[_] CouchDB
			[_] 75% autosave
				[X] on edit
				[X] on navigate
				| only save position to save time...
				[X] on timer
				[_] on unload
			[X] manual incremental save
			[_] manual named save
			[X] versions/history
		[_] 66% load state
			[X] load mechanics
			[X] auto-load last state on startup
			[_] manual
		[_] 50% load folder
			[X] drag'n'drop
			[_] open dilog
		[_] 0% dynamic loading of images
			[_] sizes on zoom
			[_] stream on navigate
			| 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)...
		[_] 49% native client
			[_] 33% Windows (CEF / CEFPython)
				[X] basic test
				[_] basic wrapper
				| hook-in os-specific API
				[_] package a portable exe
			[_] 66% Android (PhoneGap)
				[X] basic test
				[X] disable transitions...
				[_] basic wrapper
				| hook-in os-specific API
		[X] 100% UI
			[X] 100% disable opacity for current ribbon
				[X] 1.0 opacity for current ribbon mode
				| automatically turned on for magnifications over 2 images 
				| per screen....
				[X] current image indicator
				| this can be:
				| 	- rectangle (not border)
				| 	- underline
				| 	- corner icon
			[X] 100% settings/help screen
				[X] keyboard config/help
				[X] auto-generated settings interface
			[X] "hide other ribbons" mode
			[X] fix single image mode
			| need to center the image correctly...
			[X] 100% add screen buttons for all actions...
				[X] navigation
				[X] actions
				[X] zooming
				[X] 100% zoom presets
					[X] single
					[X] three
					[X] wide
					| toggle...
			[X] 100% control single-image mode animations
				[X] scroll
				[X] switch (no transition)
			[X] 100% layout
				[X] 100% tablet
					[X] stretch to full screen
					| NOTE: viewer 0% sizes may break things...
					[X] make buttons semi-transparent and same color as bg in all modes
					| just like single image mode...
					[X] make bg color switching in all modes
					| black, white, gray
				[X] 100% PC
					[X] stretch to full screen
					[X] make view correctly resizable
					| appears to work correctly but need to click an image onResize...
					|
					| XXX find a way around always clicking things...
					[X] hide buttons for keyboard actions
				[X] web
				| is this is the same as the above two? (with auto-select)
			[X] add screen-width images next/prev navigation...
			[X] 100% debug mode
				[X] toggle cross-hair
		[X] 100% sorted images in ribbons
			[X] 100% stage I: position the promoted/demoted image correctly
			| 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] 100% 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
				[X] 100% migrate main code to the new system
					[X] basic navigation
					[X] basic actions
					[X] zooming
				[X] position other ribbons...
				| only prev/next for now...
		[X] 100% correct zooming and modes
			[X] zooming in ribbon view
			[X] 100% zoom presets for ribbon view
			| other possible presets:
			| 	- five
			| 	- all
			| 	- group
			| 	- day/month
			| 	- shoot
			| 	- tag
			| 	...
				[X] three
				[X] one (with zooming)
			[X] single image mode with zooming
			| ribbons are hidden
		[X] 100% fix layout and animations
			[X] zooming
			[X] navigation
			[X] 100% actions
				[X] bug: shifting up to new ribbon pushes the current row down...
				| before starting on a fix, need to cleanup the code from old hacks and workarounds...
	[_] 40% Preview II (optional features)
		[_] 0% PhoneGap + Android Issues:
			[_] scrolling in overlays does not work
			[_] half the keyboard is not working...
			[_] screen buttons are very laggy
			| while swipe works super fast...
			[_] .dblclick(...) does not work...
			[_] .dragable(...) does not work...
		[_] slideshow...
		[_] make keyboeard handler mode-aware...
		| this is needed to disable navigation keys in setup-mode, for example...
		[_] 50% serialization/deserialization
			[X] JSON loader/unloader
			[_] file reader/writer
		[_] actual file loading (Target-specific)
		[X] flip ribbons relative to current -- reverse order
		[_] fade transition in single image mode...
		[_] "show all promoted/demoted images" mode
		| display images below or above but in a more transparent 
		| fashion...
		|
		| XXX should they be skipped on navigation?
		[_] 80% drag/move action...
			[X] basic infrastructure
			[X] action: center current image
			[X] while zoomed more than the screen
			[X] while zoomed out (ribbon view)
			[_] 0% cleanup...
				[_] disable click events while dragging
				[_] differentiate with gestures
				| might be nice to add a Ps-like "space-dragging" 
				| feature to differentiate nav gestures and 
				| dragging... 
				| ...this may not work for tablets
				|
				| for tablets might be good to add a small timeout to 
				| both gestures and dragging, small enough for things 
				| to feel natural...
				|
				| another way is to start dragging anyway but if the 
				| eventual action resembles a gesture then exec that.
				| ...this will need careful setup of timeouts and 
				| dynamic disabling/enabling of both drag and gestures
				| e.g. of large zooms dragging takes priority.
		[_] 50% return to current image / home (after drag)
			[_] button
			[X] keyboard
		[X] double tap/click to zoom (a-la iPad)
		| ribbon <-> single image mode
		|
		| XXX does not work in android...
		[_] pinch to zoom
		[X] BUG: rendering error when current ribbon images opacity is 1...
		| This happens when:
		| - opcity of .current.ribbon .image is 1
		| - there is atleast a ribbon above
		| - the view is zoomed-out a bit ~70%
		|
		| the view is partially re-rendered when navigating images...
		|
		| since this is a browser render error, think of a way to work 
		| around this.
		|
		| WORKAROUND: set the opacity to 0.9999 instead of 1 forces the 
		| browser to re-render the whole set correctly. need to find a 
		| better way...
		[X] 100% add sort/re-sort capability...
			[X] abstract out image id
			[X] replace id (use something else like filename)
			[X] re-arrange ribbons (reverse)
			[X] in-place sort images in ribbons
		[_] 50% option to disable processor intensive features
			[X] global transitions
			[_] global opacity -- do a layout without opacity
		[_] make scrolling of other ribbons proportional to the gap...
		[_] 66% refactoring (low priority)
			[X] cleanup legacy workarounds
			[X] ui.js, gallery-prototype.js either merge or revise split logic
			[_] do a redraw function
			| this should position all the elements correctly within the 
			| current ui state...
			|
			| currently all operations that alter the layout call $('.current.image').click()
	[_] 0% Preview III
		[_] collection management
		[_] actual file loading
		[_] revise controls...
		[_] dynamic image/preview swap for zooming
		| important to make 1:1 previews for all main views and zoom levels...
		| also need to make this as device-neutral as possible...
		[_] dynamic image loading/unloading to very large ribbons
		| it is important to make this far enough from the curent view for the user not to notice anything...
		[_] 0% view modes
			[_] grid mode
			[_] calendar mode
		[_] 0% native client
			[_] android
				[_] restrict layout to horizontal
				| leave doing a different vertical layout for later versions...
			[_] windows
			[_] MacOS (low priority)
			[_] iOS (low priority)
		[_] 0% bugs:
			[_] adding a new ribbon above the current is still jumpy...
	[_] 0% Pre-Alpha
		[_] 0% finalize UI logic
			[_] unsorted images
	[_] 0% Alpha
	[_] 0% Beta
	[_] 0% 1.0
	

[_] 33% Main workflow
	[_] 33% image viewing
		[X] viewer
		[_] select source
		[_] slideshow
	[X] 100% image sorting
		[X] ribbon navigation
		[X] shift image between ribbons
		[X] 100% basic large scale operations
			[X] sort all images
			[X] reverse all images
			[X] reverse ribbons
	[_] 0% metadata
		[_] tag filtering
		[_] tag editing
		[_] EXIF/IPTC
	[_] 0% image/export export
		[_] JSON
		[_] XMP metadata
		[_] fav dirs
		[_] file list
		[_] image set
	


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...
	use the same mechanism as used for sorting, for image selection
	| this can be used for tagging, exhibitions, ...etc.
		context
		| a context consists of two things:
		| - image selection (might be a product of another context, search or selection)
		| - a way the levels are interpreted within this context
		|
		| default contexts: 
		| - full view rating context
		|   this incorporates ALL the archive and the levels are interpreted as ratings.
		| - selection rating context
		|   same as full view but only part of the archive is rated
		|   XXX this will need to be merged correctly back into the archive...
		| - selection context
		|   this simply takes one set of images as input and shows a subset as output.
		|
		| contexts are persistent, much like a catalogue.
		|
		| a context can be cloned and re-used.
		|
		| contexts can be used to mark:
		| - shoots
		| - subjects
		| - exhibitions/shows
		| - portfolios
		| - ...
	

[[controls.otl]]



[_] 38% features
	[_] 55% views
		[_] 60% ribbon-based view
			[_] show all (very zoomed out view)
			| 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
			[X] 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
	[X] image zooming
	| fast zooming to stages:
	| 	fit
	| 	100%
	| 	200%
	| 	...
	[_] basic editing and manipulation
	| image unchanged, data saved to json...
		[_] crop
		[_] rotate



[_] 38% General ToDo
	[_] 80% image sorting
		[_] will affect:
			[X] promote
			[X] demote
			[X] shift up
			[X] 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)
	[X] 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



[_] % 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 :