added ribbon indicator + broken crop modes...

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

ui/TODO.otl

@@ -94,7 +94,7 @@ Roadmap
 
 
 [_] 28% Gen 3 current todo
-	[_] 56% High priority
+	[_] 57% High priority
 		[_] 33% mormalize ribbons -- top-align sorted chunks
 			[X] basic mechanics
 			| splitData(...)
@@ -197,8 +197,6 @@ Roadmap
 		| centerView() fixes this, but only for the current image...
 		[_] BUG: sometimes images.json folder is created...
 		| can't repeat this yet, and seen only once...
-		[_] add indicator to ribbon up/down navigation in full screen...
-		| this might be a number or some kind of animation...
 		[_] rework the marks.js/modes.js to enable multi-level ribbon cropping...
 		[_] 0% full archive index
 			[_] segmented loading of images and data
@@ -324,6 +322,8 @@ Roadmap
 			[_] remove extra and repetitive actions
 			[_] caching config
 		[_] side-by side view...
+		[X] add indicator to ribbon up/down navigation in full screen...
+		| this might be a number or some kind of animation...
 		[X] BUG: scaling #2 in single image mode fits image to screen on wide screens
 		[X] BUG: cropping in cropped mode will not save the whole data...
 		[X] 100% BUG: sometimes the previews are not updated...

ui/base.js

@@ -765,7 +765,9 @@ function prevRibbon(){
 			target = next.length > 0 ? next : target
 		}
 	}
-	return centerView(focusImage(target))
+	var res = centerView(focusImage(target))
+	$('.viewer').trigger('focusedPrevRibbon', [getRibbonIndex()])
+	return res
 }
 function nextRibbon(){
 	var cur = getImage()
@@ -783,7 +785,9 @@ function nextRibbon(){
 		}
 	}
 
-	return centerView(focusImage(target))
+	var res = centerView(focusImage(target))
+	$('.viewer').trigger('focusedNextRibbon', [getRibbonIndex()])
+	return res
 }
 
 

ui/layout.css

@@ -982,6 +982,30 @@ button:hover {
   color: gray;
   display: inline-block;
 }
+.ribbon-indicator {
+  display: none;
+  position: absolute;
+  top: 10px;
+  left: 15px;
+  color: white;
+  font-size: 42px;
+  font-weight: bold;
+  font-style: italic;
+  text-shadow: black 0.1em 0.1em 0.6em;
+  opacity: 0.1;
+}
+.flashing-ribbon-indicator {
+  display: inline-block;
+}
+.single-image-mode.marks-visible.viewer .ribbon-indicator {
+  display: inline-block;
+}
+.ribbon-indicator:hover:after {
+  display: inline-block;
+  content: "ribbon number";
+  font-size: 14px;
+  opacity: 0.8;
+}
 /********************************************** Mode: single image ***/
 .single-image-mode.viewer .image {
   background-color: transparent;
@@ -1014,6 +1038,16 @@ button:hover {
 .light.viewer .ribbon-set:empty:after {
   color: gray;
 }
+.light.viewer .ribbon-indicator {
+  color: silver;
+  text-shadow: none;
+  opacity: 0.3;
+}
+.light.viewer .ribbon-indicator:hover:after {
+  color: gray;
+  text-shadow: none;
+  opacity: 0.8;
+}
 .gray.viewer,
 .gray.viewer .overlay-block .background {
   background: #333;
@@ -1021,7 +1055,7 @@ button:hover {
 .gray.viewer .overlay-block .dialog {
   background: #555;
 }
-.light.viewer .overlay-block:hover .background:after {
+.gray.viewer .overlay-block:hover .background:after {
   color: silver;
   opacity: 0.4;
 }
@@ -1032,10 +1066,16 @@ button:hover {
 .dark.viewer .overlay-block .dialog {
   background: #333;
 }
-.light.viewer .overlay-block:hover .background:after {
+.dark.viewer .overlay-block:hover .background:after {
   color: gray;
   opacity: 0.4;
 }
+.dark.viewer .ribbon-indicator {
+  opacity: 0.2;
+}
+.dark.viewer .ribbon-indicator:hover:after {
+  opacity: 0.8;
+}
 .large.viewer:not(.single-image-mode) .current.image {
   border-width: 3px;
 }

ui/layout.less

@@ -1004,6 +1004,35 @@ button:hover {
 }
 
 
+.ribbon-indicator {
+	display: none;
+	position: absolute;
+	top: 10px;
+	left: 15px;
+
+	color: white;
+	font-size: 42px;
+	font-weight: bold;
+	font-style: italic;
+	text-shadow: black 0.1em 0.1em 0.6em;
+
+	opacity: 0.1;
+}
+.flashing-ribbon-indicator {
+	display: inline-block;
+}
+.single-image-mode.marks-visible.viewer .ribbon-indicator {
+	display: inline-block;
+}
+.ribbon-indicator:hover:after {
+	display: inline-block;
+	content: "ribbon number";
+	font-size: 14px;
+
+	opacity: 0.8;
+}
+
+
 
 /********************************************** Mode: single image ***/
 
@@ -1041,6 +1070,18 @@ button:hover {
 .light.viewer .ribbon-set:empty:after {
 	color: gray;
 }
+.light.viewer .ribbon-indicator {
+	color: silver;
+	text-shadow: none;
+
+	opacity: 0.3;
+}
+.light.viewer .ribbon-indicator:hover:after {
+	color: gray;
+	text-shadow: none;
+
+	opacity: 0.8;
+}
 
 .gray.viewer,
 .gray.viewer .overlay-block .background {
@@ -1049,7 +1090,7 @@ button:hover {
 .gray.viewer .overlay-block .dialog {
 	background: #555;
 }
-.light.viewer .overlay-block:hover .background:after {
+.gray.viewer .overlay-block:hover .background:after {
 	color: silver;
 	opacity: 0.4;
 }
@@ -1061,10 +1102,17 @@ button:hover {
 .dark.viewer .overlay-block .dialog {
 	background: #333;
 }
-.light.viewer .overlay-block:hover .background:after {
+.dark.viewer .overlay-block:hover .background:after {
 	color: gray;
 	opacity: 0.4;
 }
+.dark.viewer .ribbon-indicator {
+	opacity: 0.2;
+}
+.dark.viewer .ribbon-indicator:hover:after {
+	opacity: 0.8;
+}
+
 
 
 .large.viewer:not(.single-image-mode) .current.image {

ui/setup.js

@@ -346,6 +346,19 @@ function setupDataBindings(viewer){
 		})
 
 		// info...
+		.on('focusingImage',
+			function(){
+				showRibbonIndicator()
+			})
+		.on([
+				'focusedNextRibbon',
+				'focusedPrevRibbon'
+			].join(' '),
+			function(){
+				if(toggleSingleImageMode('?') == 'on'){
+					flashRibbonIndicator()
+				}
+			})
 		.on([
 				'focusingImage',
 				'togglingMark'

ui/ui.js

@@ -115,6 +115,46 @@ function flashIndicator(direction){
 }
 
 
+function showRibbonIndicator(){
+	var cls = '.ribbon-indicator'
+	var indicator = $(cls)
+
+	if(indicator.length == 0){
+		indicator = $('<div>')
+			.addClass(cls.replace('.', ''))
+			.appendTo($('.viewer'))
+	}
+
+	var r = getRibbonIndex()
+
+	// get the base ribbon...
+	// XXX add a real base ribbon index...
+	var base = 0
+
+	var r =  r == base ? r+'*' : r
+	return indicator.text(r)
+}
+
+function flashRibbonIndicator(){
+	var indicator = showRibbonIndicator()
+	var cls = '.flashing-ribbon-indicator'
+
+	var flashing_indicator = $(cls)
+
+	if(flashing_indicator.length == 0){
+		flashing_indicator = indicator
+			.clone()
+			.addClass(cls.replace('.', ''))
+			.appendTo($('.viewer'))
+	}
+
+	return flashing_indicator
+		.show()
+		.delay(100)
+		.fadeOut(300)
+}
+
+
 // Update an info element
 //
 // align can be:
@@ -775,7 +815,6 @@ function formDialog(root, message, config, btn, cls){
 var _alert = alert
 function alert(){
 	var message = Array.apply(null, arguments).join(' ')
-	//return formDialog(null, String(message), {}, 'OK', 'alert')
 	return formDialog(null, String(message), {}, false, 'alert')
 }
 
@@ -987,6 +1026,8 @@ function showImageInfo(){
 				'<h2>"'+ name +'"</h2>'+
 
 				'<table>'+
+					// basic info...
+					'<tr><td colspan="2"><hr></td></tr>'+
 					'<tr><td>GID: </td><td>'+ gid +'</td></tr>'+
 					'<tr><td>Path: </td><td>"'+ data.path +'"</td></tr>'+
 					'<tr><td>Orientation: </td><td>'+ orientation +'&deg;'+flipped+'</td></tr>'+
@@ -1005,18 +1046,21 @@ function showImageInfo(){
 			'</div>'),
 			// NOTE: without a save button, there will be no way to accept the 
 			// 		form on a touch-only device...
-			{}, 'Save', 'showImageInfoDialog')
+			{}, 'OK', 'showImageInfoDialog')
 
 		// save the form data...
 		.done(function(_, form){
 			// comment...
-			var comment = form.find('.comment').html().replace(/<br>/ig, '\n')
+			var ncomment = form.find('.comment').html()
-			if(comment.trim() == ''){
+			if(ncomment != comment){
+				ncomment = ncomment.replace(/<br>/ig, '\n')
+				if(ncomment.trim() == ''){
 					delete data.comment
 				} else {
-				data.comment = comment
+					data.comment = ncomment
 				}
 				IMAGES_UPDATED.push(gid)
+			}
 
 			// XXX tags...
 			// XXX