more cleanup...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/TODO.otl

@@ -141,7 +141,7 @@ Roadmap
 		[_] ASAP: test on Android...
 		[_] 0% Tablet UI
 			[_] screen buttons
-		[_] empty view (no data) usable...
+		[_] usable empty view -- w.o. data...
 		[_] proper system init (start w.o. any data)
 		[_] 75% image sorting (date/name/...)
 			[X] 100% sort by:

ui/data.js

@@ -18,38 +18,68 @@ var CACHE_DIR = '.ImageGridCache'
 
 // A stub image, also here for documentation...
 var STUB_IMAGE_DATA = {
+	// Entity GID...
 	id: 'SIZE',
-	// entity type, can be 'image', 'group'
+
+	// Entity type
+	// can be:
+	// 	- 'image'
+	// 	- 'group'
 	type: 'image',
-	// entity state, can be 'single', 'grouped', 'hidden', ...
+
+	// Entity state
+	// can be:
+	// 	- 'single'
+	// 	- 'grouped'
+	// 	- 'hidden'
+	// 	- ...
 	state: 'single',
+
+	// Creation time...
 	ctime: 0,
+
+	// Original path...
 	path: './images/sizes/900px/SIZE.jpg',
+
+	// Previews...
+	// NOTE: the actual values depend on specific image and can be
+	// 		any size...
 	preview: {
 		'150px': './images/sizes/150px/SIZE.jpg',
 		'350px': './images/sizes/350px/SIZE.jpg',
 		'900px': './images/sizes/900px/SIZE.jpg',
 	},
+
+	// Classes
+	// XXX currently unused...
 	classes: '',
+
+	// Image orientation
+	// can be:
+	// 	- 0 (default)	- load as-is
+	// 	- 90			- rotate 90deg CW
+	// 	- 180			- rotate 180deg CW
+	// 	- 270			- rotate 270deg CW (90deg CCW)
 	orientation: 0,
 }
 
 // Data format...
 var DATA = {
+	// Format version...
 	version: '2.0',
 
-	// current position, GID...
+	// Current position, GID...
 	current: null,
 
-	// the ribbon cache...
+	// The ribbon cache...
 	// in the simplest form this is a list of lists of GIDs
 	ribbons: [],
 
-	// flat ordered list of images in current context...
+	// Flat ordered list of images in current context...
 	// in the simplest form this is a list of GIDs.
 	order: [],
 
-	// this can be used to store the filename/path of the file containing 
+	// This can be used to store the filename/path of the file containing 
 	// image data...
 	image_file: null
 }

ui/index.html

@@ -51,6 +51,8 @@ $(function(){
 		//.dblclick(dblClickHandler)
 
 	$(window)
+		// XXX in single image mode this still causes problems...
+		//		this can be resolved by cycling to ribbon mode and back...
 		.resize(function() {
 			correctImageProportionsForRotation('.images')
 			centerView()

ui/keybindings.js

@@ -48,7 +48,7 @@ var KEYBOARD_CONFIG = {
 		title: 'Info overlay',
 		doc: 'Displayed on bottom of the screen if enabled (toggle with '+
 			'<b>I</b>) and/or inline, at bottom of and image when cursor '+
-			'is over it (only in ribbon mode, toggle with <b>alt-I</b>)<p>'+
+			'is over it (only in ribbon mode, toggle with <b>alt-I</b>)'+
 
 			'<p>NOTE: when the cursor is over the info overlay one can use '+
 			'Ctrl-A and Ctrl-D for info text selection, without affecting '+
@@ -165,6 +165,7 @@ var KEYBOARD_CONFIG = {
 	'.viewer:not(.overlay)': {
 		title: 'Global',
 		doc: 'These key bindings work in most other modes.'+
+
 			'<p>NOTE: shifting markid images from different ribbons will '+
 			'perform the operations on ALL marked images but relative '+
 			'the the current ribbon. i.e. some images might get promoted,'+

ui/marks.js

@@ -67,7 +67,8 @@ function loadAllImages(){
 * Modes
 */
 
-var toggleMarkedOnlyView = createCSSClassToggler('.viewer', 
+var toggleMarkedOnlyView = createCSSClassToggler(
+		'.viewer', 
 		'marked-only-view',
 		function(action){
 			if(action == 'on'){
@@ -79,7 +80,9 @@ var toggleMarkedOnlyView = createCSSClassToggler('.viewer',
 
 
 // XXX shifting images and unmarking in this mode do not work correctly...
-var toggleMarkesView = createCSSClassToggler('.viewer', 'marks-visible',
+var toggleMarkesView = createCSSClassToggler(
+	'.viewer', 
+	'marks-visible',
 	function(){
 		var cur = getImage()
 		// current is marked...
@@ -107,7 +110,9 @@ var toggleMarkesView = createCSSClassToggler('.viewer', 'marks-visible',
 * Actions
 */
 
-var toggleImageMark = createCSSClassToggler('.current.image', 'marked',
+var toggleImageMark = createCSSClassToggler(
+	'.current.image', 
+	'marked',
 	function(action){
 		toggleMarkesView('on')
 		$('.viewer').trigger('togglingMark', [getImage(), action])

ui/modes.js

@@ -6,6 +6,9 @@
 
 //var DEBUG = DEBUG != null ? DEBUG : true
 
+var SLIDESHOW_INTERVAL = 3000
+var SLIDESHOW_LOOP = true
+var SLIDESHOW_DIRECTION = 'next'
 
 
 
@@ -17,7 +20,9 @@
 //function makeDrawerToggler(contentRenderer, root, element_class, mode_class){
 function makeDrawerToggler(contentRenderer, root){
 	var element_class = '.drawer-block'
-	var toggler = createCSSClassToggler(root, 'drawer-mode overlay',
+	var toggler = createCSSClassToggler(
+			root, 
+			'drawer-mode overlay',
 			function(action){
 				// XXX
 				var body = $(document.body)
@@ -111,7 +116,8 @@ function makeDrawerToggler(contentRenderer, root){
 */
 
 // XXX make this save and restore settings...
-var toggleSingleImageMode = createCSSClassToggler('.viewer', 
+var toggleSingleImageMode = createCSSClassToggler(
+		'.viewer', 
 		'single-image-mode',
 		function(action){
 			// prevent reiniting...
@@ -162,13 +168,10 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer',
 		})
 
 
-var SLIDESHOW_INTERVAL = 3000
-var SLIDESHOW_LOOP = true
-var SLIDESHOW_DIRECTION = 'next'
-
 // TODO transitions...
 // TODO a real setup UI (instead of prompt)
-var toggleSlideShowMode = createCSSClassToggler('.viewer', 
+var toggleSlideShowMode = createCSSClassToggler(
+		'.viewer', 
 		'.slideshow-mode',
 		function(action){
 			if(action == 'on'){
@@ -216,7 +219,8 @@ var toggleSlideShowMode = createCSSClassToggler('.viewer',
 		})
 
 
-var toggleTheme = createCSSClassToggler('.viewer',
+var toggleTheme = createCSSClassToggler(
+		'.viewer',
 		[
 			'gray',
 			'dark',
@@ -228,7 +232,8 @@ var toggleTheme = createCSSClassToggler('.viewer',
 		})
 
 
-var toggleImageInfo = createCSSClassToggler('.viewer',
+var toggleImageInfo = createCSSClassToggler(
+		'.viewer',
 		'.image-info-visible',
 		function(action){
 			if(toggleSingleImageMode('?') == 'off'){
@@ -237,7 +242,8 @@ var toggleImageInfo = createCSSClassToggler('.viewer',
 		})
 
 
-var toggleInlineImageInfo = createCSSClassToggler('.viewer', 
+var toggleInlineImageInfo = createCSSClassToggler(
+		'.viewer', 
 		'.image-info-inline-visible',
 		function(action){
 			if(action == 'on'){
@@ -251,7 +257,8 @@ var toggleInlineImageInfo = createCSSClassToggler('.viewer',
 		})
 
 
-var toggleImageProportions = createCSSClassToggler('.viewer',
+var toggleImageProportions = createCSSClassToggler(
+		'.viewer',
 		[
 			'fit-square',
 			'fit-viewer'