more marking support, toggleImageMarkBlock(...) not yet supported...

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

ui/base.js

@@ -870,12 +870,15 @@ var toggleImageMark = createCSSClassToggler('.current.image', 'marked',
 function removeImageMarks(mode){
 	// remove marks from current ribbon (default)...
 	if(mode == 'ribbon' || mode == null){
-		return getRibbon()
+		var ribbon = getRibbon()
+		$('.viewer').trigger('removeingRibbonMarks', [ribbon])
+		return ribbon
 			.find('.marked')
 				.removeClass('marked')
 
 	// remove all marks...
 	} else if(mode == 'all'){
+		$('.viewer').trigger('removeingAllMarks')
 		return $('.marked')
 			.removeClass('marked')
 	} 
@@ -885,12 +888,14 @@ function removeImageMarks(mode){
 function markAll(mode){
 	// remove marks from current ribbon (default)...
 	if(mode == 'ribbon' || mode == null){
-		return getRibbon()
+		var ribbon = getRibbon()
+		$('.viewer').trigger('markingRibbon', [ribbon])
+		return ribbon
 			.find('.image:not(.marked)')
 				.addClass('marked')
 
-	// remove all marks...
 	} else if(mode == 'all'){
+		$('.viewer').trigger('markingAll')
 		return $('.image:not(.marked)').addClass('marked')
 	}
 }
@@ -898,7 +903,9 @@ function markAll(mode){
 
 // NOTE: this only does it's work in the current ribbon...
 function invertImageMarks(){
-	return getRibbon()
+	var ribbon = getRibbon()
+	$('.viewer').trigger('invertingMarks', [ribbon])
+	return ribbon
 		.find('.image')
 			.toggleClass('marked')
 }
@@ -906,10 +913,12 @@ function invertImageMarks(){
 
 // Toggle marks in the current continuous section of marked or unmarked
 // images...
+// XXX need to make this dynamic data compatible...
 function toggleImageMarkBlock(image){
 	if(image == null){
 		image = $('.current.image')
 	}
+	//$('.viewer').trigger('togglingImageBlockMarks', [image])
 	// we need to invert this...
 	var state = toggleImageMark()
 	var _convert = function(){

ui/data.js

@@ -541,6 +541,8 @@ function setupDataBindings(viewer){
 		})
 
 
+		// marks...
+		// XXX toggle marking a block is not yet supported...
 		.on('togglingMark', function(evt, img, action){
 			var gid = getImageGID(img) 
 
@@ -553,6 +555,39 @@ function setupDataBindings(viewer){
 				MARKS.splice(MARKS.indexOf(gid), 1)
 			}
 		})
+		.on('removeingRibbonMarks', function(evt, ribbon){
+			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
+				var i = MARKS.indexOf(e)
+				if(i != -1){
+					MARKS.splice(i, 1)
+				}
+			})
+		})
+		.on('removeingAllMarks', function(evt){
+			MARKS.splice(0, MARKS.length)
+		})
+		.on('markingRibbon', function(evt, ribbon){
+			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
+				var i = MARKS.indexOf(e)
+				if(i == -1){
+					MARKS.push(e)
+				}
+			})
+		})
+		.on('markingAll', function(evt){
+			MARKS.splice(0, MARKS.length)
+			MARKS.concat(DATA.order)
+		})
+		.on('invertingMarks', function(evt, ribbon){
+			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
+				var i = MARKS.indexOf(e)
+				if(i == -1){
+					MARKS.push(e)
+				} else {
+					MARKS.splice(i, 1)
+				}
+			})
+		})
 }
 
 

ui/index.html

@@ -24,8 +24,10 @@
 	position: absolute;
 	display: block;
 
-	/* neede for scaling/zooming to behave correctly and not shift the 
-	element, when its dimensions change... */
+	/* NOTE: this needs for scaling/zooming to behave correctly and not 
+			shift the element, when its dimensions change... 
+			...this is because .ribbon-set will both be used for scaling 
+			and aligning... */
 	transform-origin: top left;
 	-ms-transform-origin: top left;
 	-webkit-transform-origin: top left; /* Safari and Chrome */