added single ribbon mode (not final, not sure if we need to go between ribbons in this mode), and several tweaks...

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

ui/TODO.otl

@@ -93,18 +93,19 @@ Roadmap
 
 [_] 29% Gen 3 current todo
 	[_] 58% High priority
-		% Priority tasks
+		[_] % Priority tasks
-			full archive index
+			[_] full archive index
-				ribbon separation
+				[_] segmented loading of images and data
+				[_] ribbon separation
 				| split ribbon into manageable chunks
 				|
 				| this can be done naturally by:
 				| 	- date
 				| 	- event
 				|	- tag
-				index and group ALL files in an archive
+				[_] index and group ALL files in an archive
-				import metadata
+				[_] import metadata
-				real GIDs
+				[_] real GIDs
 		[_] BUG: align problems are back...
 		| default data set (browser/images.js) same images #4 (going 
 		| from right) & #5 (going from left) of 18 in the first ribbon 

ui/data.js

@@ -1042,6 +1042,27 @@ function loadSettings(){
 }
 
 
+// XXX make keep_ribbons option work...
+function cropDataToGIDs(gids, keep_ribbons){
+	var cur = DATA.current
+	var old_data = DATA
+	DATA = {
+		varsion: '2.0',
+		current: null,
+		ribbons: [
+			gids
+		],
+		order: DATA.order.slice(),
+	}
+	DATA.current = getGIDBefore(cur, 0)
+
+	reloadViewer()
+	updateImages()
+
+	return old_data
+}
+
+
 
 /**********************************************************************
 * Image caching...

ui/keybindings.js

@@ -149,14 +149,6 @@ var KEYBOARD_CONFIG = {
 		title: 'Single image mode',
 		doc: 'To toggle between this and ribbon modes press <b>Enter</b>.',
 
-		/*
-		F: doc('Toggle view proportions', 
-			function(){ 
-				var mode = toggleImageProportions() 
-				showStatus('Fitting image to:', mode + '...')
-				centerRibbons()
-			}),
-		*/
 		Esc: doc('Exit single image mode', 
 				function(){ 
 					toggleSingleImageMode('off') 
@@ -168,13 +160,15 @@ var KEYBOARD_CONFIG = {
 
 	// marked only ribbon mode...
 	//
-	'.marked-only-view:not(.single-image-mode)': {
+	'.single-ribbon-mode:not(.single-image-mode), .marked-only-view:not(.single-image-mode)': {
-		title: 'Marked only view',
+		title: 'Marked only and single ribbon views',
-		doc: 'To toggle this mode press <b>shift-F2</b>.',
+		doc: 'To show marked-only images press <b>shift-F2</b> and for single ribbon mode press <b>F3</b>.',
 
-		Esc: doc('Exit marked only view', 
+		Esc: doc('Exit mode', 
 				function(){ 
+					// add something like uncrop here...
 					toggleMarkedOnlyView('off') 
+					toggleSingleRibbonMode('off') 
 					return false
 				}),
 		Q: 'Esc',
@@ -540,13 +534,22 @@ var KEYBOARD_CONFIG = {
 				//	function(){ toggleImageMarkBlock() }),
 
 				ctrl: doc('Mark current ribbon', 
-					function(){ markAll('ribbon') }),
+					function(){ 
+						toggleMarkesView('on')
+						markAll('ribbon') 
+					}),
 				'ctrl+shift': doc('Mark all images', 
-					function(){ markAll('all') }),
+					function(){ 
+						toggleMarkesView('on')
+						markAll('all') 
+					}),
 			},
 		D: {
 				ctrl: doc('Unmark current ribbon', 
-					function(){ removeImageMarks('ribbon') }),
+					function(){ 
+						event.preventDefault()
+						removeImageMarks('ribbon') 
+					}),
 				'ctrl+shift': doc('Unmark all images', 
 					function(){ removeImageMarks('all') }),
 			},
@@ -563,13 +566,17 @@ var KEYBOARD_CONFIG = {
 		F2: {
 				default: doc('Toggle mark visibility', 
 					function(){ toggleMarkesView() }),
-				//shift: 'F3', 
+				shift: doc('Toggle marked only images view', 
-			},
-		F3: doc('Toggle marked only images view', 
 					function(){
 						toggleMarkedOnlyView()
 					}),
+			},
 
+		F3: doc('Toggle single ribbon view (EXPERIMENTAL)', 
+			function(){
+				event.preventDefault()
+				toggleSingleRibbonMode()
+			}),
 
 		E: doc('Open image in external software', openImage),
 		// XXX make F4 a default editor and E a default viewer...

ui/layout.css

@@ -14,6 +14,50 @@
 .expanding-text:hover .hidden {
   display: inline;
 }
+[tooltip-top] {
+  position: relative;
+  text-decoration: none;
+}
+[tooltip-top]:after {
+  content: attr(tooltip-top);
+  position: absolute;
+  bottom: 130%;
+  left: 20%;
+  background: #ffcb66;
+  padding: 5px 15px;
+  color: black;
+  border-radius: 10px;
+  white-space: nowrap;
+  opacity: 0;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+}
+[tooltip-top]:before {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 20px solid #ffcb66;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+  opacity: 0;
+  left: 30%;
+  bottom: 90%;
+}
+[tooltip-top]:hover:after {
+  bottom: 100%;
+}
+[tooltip-top]:hover:before {
+  bottom: 70%;
+}
+[tooltip-top]:hover:after,
+[tooltip-top]:hover:before {
+  opacity: 1;
+}
 /*********************************************************************/
 body {
   font-family: sans-serif;
@@ -321,6 +365,17 @@ button:hover {
 	background-image: url(images/loading-270deg.gif);
 }
 */
+/* separator test */
+.image.red + .image:not(.red):before {
+  display: inline-block;
+  position: relative;
+  content: "";
+  top: 0px;
+  left: -50px;
+  width: 100px;
+  height: 100%;
+  background-color: yellow;
+}
 /***************************************************** Image marks ***/
 .marks-visible.viewer .marked.image:after {
   display: block;
@@ -795,15 +850,18 @@ button:hover {
 .single-image-mode.viewer .global-mode-indicators:hover {
   opacity: 1;
 }
+.global-mode-indicators .indicator,
+.context-mode-indicators .indicator {
+  display: none;
+  height: 20px;
+  vertical-align: center;
+}
 /* actual indicators */
 /* marks... */
 .global-mode-indicators .marked-only-visible,
 .global-mode-indicators .marks-visible,
 .context-mode-indicators .current-image-marked {
-  display: none;
   color: blue;
-  height: 20px;
-  vertical-align: center;
 }
 .global-mode-indicators .marked-only-visible .shown,
 .global-mode-indicators .marks-visible .shown,
@@ -824,6 +882,11 @@ button:hover {
   margin-top: 3px;
   top: 50%;
 }
+.global-mode-indicators .marked-only-visible:after,
+.global-mode-indicators .marks-visible:after,
+.context-mode-indicators .current-image-marked:after {
+  color: blue;
+}
 .marks-visible.viewer .global-mode-indicators .marks-visible {
   display: inline-block;
 }
@@ -844,6 +907,10 @@ button:hover {
 .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
   display: inline-block;
 }
+.single-ribbon-mode.viewer .global-mode-indicators .single-ribbon-mode {
+  color: gray;
+  display: inline-block;
+}
 /********************************************** Mode: single image ***/
 .single-image-mode.viewer .image {
   background-color: transparent;

ui/layout.less

@@ -65,6 +65,52 @@
 }
 
 
+[tooltip-top] {
+	position: relative;
+	text-decoration: none;
+}
+[tooltip-top]:after {
+	content: attr(tooltip-top);
+	position: absolute;
+	bottom: 130%;
+	left: 20%;
+	background: #ffcb66;
+	padding: 5px 15px;
+	color: black;
+	border-radius: 10px;
+	white-space: nowrap;
+	opacity: 0;
+	-webkit-transition: all 0.4s ease;
+	-moz-transition: all 0.4s ease;
+	transition: all 0.4s ease;
+}
+[tooltip-top]:before {
+	content: "";
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-top: 20px solid #ffcb66;
+	border-left: 20px solid transparent;
+	border-right: 20px solid transparent;
+	-webkit-transition: all 0.4s ease;
+	-moz-transition : all 0.4s ease;
+	transition : all 0.4s ease;
+	opacity: 0;
+	left: 30%;
+	bottom: 90%;
+}
+[tooltip-top]:hover:after {
+	bottom: 100%;
+}
+[tooltip-top]:hover:before {
+	bottom: 70%;
+}
+[tooltip-top]:hover:after, 
+[tooltip-top]:hover:before {
+	opacity: 1;
+}
+
+
 
 /*********************************************************************/
 
@@ -363,6 +409,20 @@ button:hover {
 */
 
 
+/* separator test */
+.image.red+.image:not(.red):before {
+	display: inline-block;
+	position: relative;
+	content: "";
+	top:0px;
+	left: -50px;
+	width: 100px;
+	height: 100%;
+
+	background-color: yellow;
+}
+
+
 
 /***************************************************** Image marks ***/
 
@@ -791,16 +851,20 @@ button:hover {
 	opacity: 1;
 }
 
+.global-mode-indicators .indicator,
+.context-mode-indicators .indicator {
+	display: none;
+	height: 20px;
+	vertical-align: center;
+}
+
 
 /* actual indicators */
 /* marks... */
 .global-mode-indicators .marked-only-visible,
 .global-mode-indicators .marks-visible,
 .context-mode-indicators .current-image-marked {
-	display: none;
 	color: blue;
-	height: 20px;
-	vertical-align: center;
 }
 .global-mode-indicators .marked-only-visible .shown,
 .global-mode-indicators .marks-visible .shown,
@@ -822,6 +886,11 @@ button:hover {
 	margin-top: 3px;
 	top: 50%;
 }
+.global-mode-indicators .marked-only-visible:after,
+.global-mode-indicators .marks-visible:after,
+.context-mode-indicators .current-image-marked:after {
+	color: blue;
+}
 .marks-visible.viewer .global-mode-indicators .marks-visible {
 	display: inline-block;
 }
@@ -844,6 +913,12 @@ button:hover {
 }
 
 
+.single-ribbon-mode.viewer .global-mode-indicators .single-ribbon-mode {
+	color: gray;
+	display: inline-block;
+}
+
+
 
 /********************************************** Mode: single image ***/
 

ui/lib/jli.js

@@ -171,7 +171,7 @@ function createCSSClassToggler(elem, class_list, callback_a, callback_b){
 			if(callback_pre.call(this, action) === false){
 				// XXX should we return action here???
 				//return
-				return action
+				return func('?')
 			}
 		}
 		// update the element...

ui/marks.js

@@ -33,22 +33,9 @@ function loadMarkedOnlyData(cmp, no_cleanout_marks){
 			marked.splice(i, 1)
 		}
 	}
-	ALL_DATA = DATA
+
-	DATA = {
+	ALL_DATA = cropDataToGIDs(marked)
-		varsion: '2.0',
+
-		current: null,
-		ribbons: [
-			marked
-		],
-		//order: marked.slice(),
-		order: DATA.order,
-	}
-	DATA.current = getGIDBefore(cur, 0)
-	reloadViewer()
-	toggleMarkesView('off')
-	// XXX FIX: for some reason not all previews get updated to the 
-	// 		right size...
-	updateImages()
 	return DATA
 }
 
@@ -75,7 +62,14 @@ function loadAllImages(){
 
 var toggleMarkedOnlyView = createCSSClassToggler(
 		'.viewer', 
-		'marked-only-view',
+		'marked-only-view cropped-mode',
+		function(action){
+			// prevent reentering...
+			if(action == 'on' && $('.viewer').hasClass('cropped-mode')
+					|| action == toggleMarkedOnlyView('?')){
+				return false
+			}
+		},
 		function(action){
 			if(action == 'on'){
 				loadMarkedOnlyData()

ui/modes.js

@@ -170,6 +170,29 @@ var toggleSingleImageMode = createCSSClassToggler(
 		})
 
 
+// XXX make this not conflict with marked-only-mode, better yet, make them
+// 		one single mode...
+var toggleSingleRibbonMode = createCSSClassToggler(
+		'.viewer',
+		'single-ribbon-mode cropped-mode',
+		function(action){
+			// prevent reentering...
+			if(action == 'on' && $('.viewer').hasClass('cropped-mode')
+					|| action == toggleSingleRibbonMode('?')){
+				return false
+			}
+		},
+		function(action){
+			if(action == 'on'){
+				ALL_DATA = cropDataToGIDs(DATA.ribbons[getRibbonIndex()].slice())
+			} else {
+				DATA = ALL_DATA
+				reloadViewer()
+				updateImages()
+			}
+		})
+
+
 // TODO transitions...
 // TODO a real setup UI (instead of prompt)
 var toggleSlideShowMode = createCSSClassToggler(

ui/setup.js

@@ -16,6 +16,11 @@ var PROPORTIONS_RATIO_THRESHOLD = 1.5
 */
 
 function setupIndicators(){
+	showGlobalIndicator(
+			'single-ribbon-mode', 
+			'Single ribbon mode (F3)')
+		.css('cursor', 'hand')
+		.click(function(){ toggleSingleRibbonMode() })
 	showGlobalIndicator(
 			'marks-visible', 
 			'Marks visible (F2)')
@@ -23,7 +28,7 @@ function setupIndicators(){
 		.click(function(){ toggleMarkesView() })
 	showGlobalIndicator(
 			'marked-only-visible', 
-			'Marked only images visible (F3)')
+			'Marked only images visible (shift-F2)')
 		.css('cursor', 'hand')
 		.click(function(){ toggleMarkedOnlyView() })
 
@@ -283,7 +288,7 @@ function setupDataBindings(viewer){
 
 			// add marked image to list...
 			if(action == 'on'){
-				MARKED.push(gid)
+				 MARKED.indexOf(gid) == -1 && MARKED.push(gid)
 
 			// remove marked image from list...
 			} else {