compleated bookmark indicators, more refactoring...

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

ui/keybindings.js

@@ -648,7 +648,7 @@ var KEYBOARD_CONFIG = {
 				// XXX  should this toggle or set mark to on?
 				default: doc('Mark current image and advance',
 					function(){ 
-						toggleImageMark('on')
+						toggleMark('on')
 						directionImage()
 						// XXX do we need this???
 						//if(getImage().filter(':visible').length == 0){
@@ -659,7 +659,7 @@ var KEYBOARD_CONFIG = {
 				// same as default but in reverse direction...
 				shift: doc('Mark current image and return',
 					function(){
-						toggleImageMark('on')
+						toggleMark('on')
 						directionImage(true)
 						// XXX do we need this???
 						//if(getImage().filter(':visible').length == 0){
@@ -669,13 +669,13 @@ var KEYBOARD_CONFIG = {
 					}),
 				ctrl: doc('Show mark dialog', function(){ markImagesDialog() }),
 			},
-		Ins: doc('Toggle mark on current image', function(){ toggleImageMark() }),
+		Ins: doc('Toggle mark on current image', function(){ toggleMark() }),
 		'invert-marks': doc('Invert image marks', 
 			function(){ invertImageMarks() }),
 		A: {
 			  	// XXX does not yet work with DATA (???)
 				//shift: doc('Toggle marks in current contagious block', 
-				//	function(){ toggleImageMarkBlock() }),
+				//	function(){ toggleMarkBlock() }),
 
 				ctrl: doc('Mark current ribbon', 
 					function(){ 
@@ -699,7 +699,7 @@ var KEYBOARD_CONFIG = {
 			},
 		U: {
 				default: doc('Unmark current image',
-					function(){ toggleImageMark('off') }), 
+					function(){ toggleMark('off') }), 
 				ctrl: doc('Unmark current ribbon', 
 					function(){ removeImageMarks('ribbon') }),
 				shift: doc('Unamrk all', 

ui/layout.css

@@ -1039,13 +1039,18 @@ button:hover {
 .context-mode-indicators .current-image-marked {
   color: blue;
 }
+.context-mode-indicators .current-image-bookmarked {
+  color: yellow;
+}
 .global-mode-indicators .marked-only-visible .shown,
 .global-mode-indicators .marks-visible .shown,
+.context-mode-indicators .current-image-bookmarked .shown,
 .context-mode-indicators .current-image-marked .shown {
   display: none;
 }
 .global-mode-indicators .marked-only-visible:after,
 .global-mode-indicators .marks-visible:after,
+.context-mode-indicators .current-image-bookmarked:after,
 .context-mode-indicators .current-image-marked:after {
   display: inline-block;
   width: 6px;
@@ -1063,6 +1068,11 @@ button:hover {
 .context-mode-indicators .current-image-marked:after {
   color: blue;
 }
+.context-mode-indicators .current-image-bookmarked:after {
+  color: yellow;
+  background-color: yellow;
+  border: solid 2px yellow;
+}
 .marks-visible.viewer .global-mode-indicators .marks-visible {
   display: inline-block;
 }
@@ -1076,10 +1086,11 @@ button:hover {
   background-color: transparent;
 }
 /* image mark in single image mode... */
+.context-mode-indicators .current-image-bookmarked,
 .context-mode-indicators .current-image-marked {
   display: none;
-  color: blue;
 }
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked.shown,
 .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
   display: inline-block;
 }

ui/layout.less

@@ -1068,13 +1068,18 @@ button:hover {
 .context-mode-indicators .current-image-marked {
 	color: blue;
 }
+.context-mode-indicators .current-image-bookmarked {
+	color: yellow;
+}
 .global-mode-indicators .marked-only-visible .shown,
 .global-mode-indicators .marks-visible .shown,
+.context-mode-indicators .current-image-bookmarked .shown,
 .context-mode-indicators .current-image-marked .shown {
 	display: none;
 }
 .global-mode-indicators .marked-only-visible:after,
 .global-mode-indicators .marks-visible:after,
+.context-mode-indicators .current-image-bookmarked:after,
 .context-mode-indicators .current-image-marked:after {
 	display: inline-block;
 	width: 6px;
@@ -1093,6 +1098,11 @@ button:hover {
 .context-mode-indicators .current-image-marked:after {
 	color: blue;
 }
+.context-mode-indicators .current-image-bookmarked:after {
+	color: yellow;
+	background-color: yellow;
+	border: solid 2px yellow;
+}
 .marks-visible.viewer .global-mode-indicators .marks-visible {
 	display: inline-block;
 }
@@ -1106,10 +1116,11 @@ button:hover {
 	background-color: transparent;
 }
 /* image mark in single image mode... */
+.context-mode-indicators .current-image-bookmarked,
 .context-mode-indicators .current-image-marked {
 	display: none;
-	color: blue;
 }
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked.shown,
 .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
 	display: inline-block;
 }

ui/marks.js

@@ -204,7 +204,7 @@ var toggleMarkesView = createCSSClassToggler(
 */
 
 
-var toggleImageMark = makeMarkToggler('marked', 'selected', 'togglingMark')
+var toggleMark = makeMarkToggler('marked', 'selected', 'togglingMark')
 
 
 // mode can be:
@@ -217,7 +217,7 @@ function removeImageMarks(mode){
 		var res = ribbon
 			.find('.marked')
 				.each(function(){
-					toggleImageMark(this, 'off')
+					toggleMark(this, 'off')
 				})
 		$('.viewer').trigger('removeingRibbonMarks', [ribbon])
 
@@ -225,7 +225,7 @@ function removeImageMarks(mode){
 	} else if(mode == 'all'){
 		var res = $('.marked')
 			.each(function(){
-				toggleImageMark(this, 'off')
+				toggleMark(this, 'off')
 			})
 		$('.viewer').trigger('removeingAllMarks')
 	} 
@@ -240,7 +240,7 @@ function markAll(mode){
 		var res = ribbon
 			.find('.image:not(.marked)')
 				.each(function(){
-					toggleImageMark(this, 'on')
+					toggleMark(this, 'on')
 				})
 		$('.viewer').trigger('markingRibbon', [ribbon])
 
@@ -248,7 +248,7 @@ function markAll(mode){
 	} else if(mode == 'all'){
 		var res = $('.image:not(.marked)')
 			.each(function(){
-				toggleImageMark(this, 'on')
+				toggleMark(this, 'on')
 			})
 		$('.viewer').trigger('markingAll')
 	}
@@ -262,7 +262,7 @@ function invertImageMarks(){
 	var res = ribbon
 		.find('.image')
 			.each(function(){
-				toggleImageMark(this, 'next')
+				toggleMark(this, 'next')
 			})
 	$('.viewer').trigger('invertingMarks', [ribbon])
 	return res
@@ -273,16 +273,16 @@ function invertImageMarks(){
 // images...
 // XXX need to make this dynamic data compatible...
 // XXX this will mark the block ONLY IF it is loaded!!!
-function toggleImageMarkBlock(image){
+function toggleMarkBlock(image){
 	if(image == null){
 		image = getImage()
 	}
 	var found = [false, false]
 	// we need to invert this...
-	var state = toggleImageMark()
+	var state = toggleMark()
 	var _convert = function(i){
 		return function(){
-			if(toggleImageMark(this, '?') == state){
+			if(toggleMark(this, '?') == state){
 				// we found the end...
 				// NOTE: this will not be set if we reached the end of 
 				// 		the ribbon or the end of the loaded images...
@@ -290,7 +290,7 @@ function toggleImageMarkBlock(image){
 				// stop the iteration...
 				return false
 			}
-			toggleImageMark(this, state)
+			toggleMark(this, state)
 		}
 	}
 	image.nextAll('.image').each(_convert(1))
@@ -387,7 +387,7 @@ function markImagesDialog(){
 
 	var alg = 'Mark images:'
 
-	var cur = toggleImageMark('?') == 'on' ? 'Unmark' : 'Mark'
+	var cur = toggleMark('?') == 'on' ? 'Unmark' : 'Mark'
 
 	cfg = {}
 	cfg[alg] = [
@@ -411,11 +411,11 @@ function markImagesDialog(){
 
 			// NOTE: these must be in order of least-specific last...
 			if(/current image/.test(res)){
-				toggleImageMark()
+				toggleMark()
 				var msg = (cur + ' image').toLowerCase()
 
 			} else if(/current block/.test(res)){
-				toggleImageMarkBlock()
+				toggleMarkBlock()
 				var msg = 'toggled block marks'
 
 			} else if(/Invert/.test(res)){

ui/setup.js

@@ -32,11 +32,17 @@ function setupIndicators(){
 		.css('cursor', 'hand')
 		.click(function(){ toggleMarkedOnlyView() })
 
+	showContextIndicator(
+			'current-image-bookmarked', 
+			'Image is bookmarked (ctrl-B)')
+		.css('cursor', 'hand')
+		.click(function(){ toggleBookmark() })
+
 	showContextIndicator(
 			'current-image-marked', 
 			'Image is marked (Ins)')
 		.css('cursor', 'hand')
-		.click(function(){ toggleImageMark() })
+		.click(function(){ toggleMark() })
 }
 
 
@@ -50,6 +56,13 @@ function updateContextIndicators(image){
 	} else {
 		indicator.removeClass('shown')
 	}
+
+	indicator = $('.context-mode-indicators .current-image-bookmarked')
+	if(image.hasClass('bookmarked')){
+		indicator.addClass('shown')
+	} else {
+		indicator.removeClass('shown')
+	}
 }
 
 
@@ -360,6 +373,7 @@ function setupDataBindings(viewer){
 		.on([
 				'focusingImage',
 				'togglingMark',
+				'togglingBookmark',
 				'removeingAllMarks',
 				'removeingRibbonMarks',
 				'markingAll',