re-did marks modes...

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

ui/base.js

@@ -387,30 +387,6 @@ function rollRibbon(n, ribbon, extend, no_compensate_shift){
 * Modes
 */
 
-// XXX shifting images and unmarking in this mode do not work correctly...
-var toggleMarkedOnlyView = createCSSClassToggler('.viewer', 'marked-only',
-	function(){
-		var cur = $('.current.image')
-		// current is marked...
-		if(cur.hasClass('marked')){
-			centerView(null, 'css')
-			return
-		} 
-		// there is a marked image in this ribbon...
-		var target = getImageBefore(cur, null)
-		if(target.length > 0){
-			centerView(focusImage(target), 'css')
-			return
-		}
-		// get marked image from other ribbons...
-		prevRibbon()
-		if($('.current.image').hasClass('marked')){
-			return
-		}
-		nextRibbon()
-	})
-
-
 // XXX add ability to take all marked images and open them in a separate view...
 
 
@@ -863,10 +839,35 @@ function shiftImageDownNewRibbon(image, moving){
 
 /*********************************************************** Marks ***/
 
+// XXX shifting images and unmarking in this mode do not work correctly...
+var toggleMarkesView = createCSSClassToggler('.viewer', 'marks-visible',
+	function(){
+		var cur = $('.current.image')
+		// current is marked...
+		if(cur.hasClass('marked')){
+			centerView(null, 'css')
+			return
+		} 
+		// there is a marked image in this ribbon...
+		var target = getImageBefore(cur, null)
+		if(target.length > 0){
+			centerView(focusImage(target), 'css')
+			return
+		}
+		// get marked image from other ribbons...
+		prevRibbon()
+		if($('.current.image').hasClass('marked')){
+			return
+		}
+		nextRibbon()
+	})
+
+
 // XXX if this unmarks an image in marked-only mode no visible image is 
 // 		going to be current...
 var toggleImageMark = createCSSClassToggler('.current.image', 'marked',
 	function(action){
+		toggleMarkesView('on')
 		$('.viewer').trigger('togglingMark', [$('.current.image'), action])
 	})
 

ui/data.js

@@ -41,7 +41,7 @@ var DATA = {
 	images: {}
 }
 
-var MARKS = []
+var MARKED = []
 
 var IMAGE_CACHE = []
 
@@ -260,7 +260,7 @@ function updateImage(image, gid, size){
 	})
 
 	// setup marks...
-	if(MARKS.indexOf(gid) != -1){
+	if(MARKED.indexOf(gid) != -1){
 		image.addClass('marked')
 	} else {
 		image.removeClass('marked')
@@ -460,6 +460,12 @@ function loadData(data, images_per_screen){
 }
 
 
+// NOTE: this compares two images by gid...
+function imageDateCmp(a, b){
+	return DATA.images[b].ctime - DATA.images[a].ctime
+}
+
+
 function convertDataGen1(data){
 	var res = {
 		varsion: '2.0',
@@ -471,10 +477,6 @@ function convertDataGen1(data){
 	var ribbons = res.ribbons
 	var images = res.images
 	var order = res.order
-	var _dateSort = function(a, b){
-		return images[b].ctime - images[a].ctime
-	}
-
 	// position...
 	res.current = data.position
 	
@@ -488,11 +490,11 @@ function convertDataGen1(data){
 			order.push(id)
 			images[id] = image
 		}
-		ribbon.sort(_dateSort)
+		ribbon.sort(imageDateCmp)
 	})
 
 	// order...
-	order.sort(_dateSort)
+	order.sort(imageDateCmp)
 
 	// XXX STUB
 	res.current = order[0]
@@ -520,6 +522,19 @@ function saveLocalStorage(attr){
 }
 
 
+function loadLocalStorageMarks(attr){
+	attr = attr == null ? 'MARKED' : attr
+	MARKED = JSON.parse(localStorage[attr])
+	return loadData(DATA)
+}
+
+
+function saveLocalStorageMarks(attr){
+	attr = attr == null ? 'MARKED' : attr
+	localStorage[attr] = JSON.stringify(MARKED)
+}
+
+
 
 /**********************************************************************
 * Image caching...
@@ -559,6 +574,50 @@ function preCacheAllRibbons(){
 
 
 
+/**********************************************************************
+* Marking
+*/
+
+function loadMarkedOnlyData(){
+	var cur = DATA.current
+	var marked = MARKED.slice().sort(imageDateCmp)
+	ALL_DATA = DATA
+	DATA = {
+		varsion: '2.0',
+		current: null,
+		ribbons: [
+			marked
+		],
+		//order: marked.slice(),
+		order: DATA.order,
+		images: DATA.images,
+	}
+	DATA.current = getGIDBefore(cur, 0)
+	loadData(DATA)
+	toggleMarkesView('off')
+	return DATA
+}
+
+
+// XXX name this in a better way...
+function loadAllImages(){
+	DATA = ALL_DATA
+	loadData(DATA)
+	return DATA
+}
+
+
+var toggleMarkedOnlyView = createCSSClassToggler('.viewer', 'marked-only-view',
+		function(action){
+			if(action == 'on'){
+				loadMarkedOnlyData()
+			} else {
+				loadAllImages()
+			}
+		})
+
+
+
 /**********************************************************************
 * Setup
 */
@@ -695,43 +754,43 @@ function setupDataBindings(viewer){
 
 			// add marked image to list...
 			if(action == 'on'){
-				MARKS.push(gid)
+				MARKED.push(gid)
 
 			// remove marked image from list...
 			} else {
-				MARKS.splice(MARKS.indexOf(gid), 1)
+				MARKED.splice(MARKED.indexOf(gid), 1)
 			}
 		})
 		.on('removeingRibbonMarks', function(evt, ribbon){
 			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
-				var i = MARKS.indexOf(e)
+				var i = MARKED.indexOf(e)
 				if(i != -1){
-					MARKS.splice(i, 1)
+					MARKED.splice(i, 1)
 				}
 			})
 		})
 		.on('removeingAllMarks', function(evt){
-			MARKS.splice(0, MARKS.length)
+			MARKED.splice(0, MARKED.length)
 		})
 		.on('markingRibbon', function(evt, ribbon){
 			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
-				var i = MARKS.indexOf(e)
+				var i = MARKED.indexOf(e)
 				if(i == -1){
-					MARKS.push(e)
+					MARKED.push(e)
 				}
 			})
 		})
 		.on('markingAll', function(evt){
-			MARKS.splice(0, MARKS.length)
-			MARKS.concat(DATA.order)
+			MARKED.splice(0, MARKED.length)
+			MARKED.concat(DATA.order)
 		})
 		.on('invertingMarks', function(evt, ribbon){
 			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
-				var i = MARKS.indexOf(e)
+				var i = MARKED.indexOf(e)
 				if(i == -1){
-					MARKS.push(e)
+					MARKED.push(e)
 				} else {
-					MARKS.splice(i, 1)
+					MARKED.splice(i, 1)
 				}
 			})
 		})

ui/index.html

@@ -104,7 +104,7 @@ body {
 }
 
 /* dot mark... */
-.marked.image:after {
+.marks-visible.viewer .marked.image:after {
 	display: block;
 	position: absolute;
 	content: "";
@@ -147,11 +147,11 @@ body {
 */
 
 
-.marked-only.viewer:after {
+.marks-visible.viewer:after {
 	display: block;
 	position: absolute;
-	content: "Showing marked images only";
-	font-size: 14pt;
+	content: "Marks visible";
+	font-size: 11pt;
 	border: none;
 	color: blue;
 	width: auto;
@@ -161,11 +161,27 @@ body {
 	right: 10px;
 
 }
-.marked-only .image:not(.marked) {
-	display: none;
+.marked-only-view.viewer:after {
+	display: block;
+	position: absolute;
+	content: "Showing marked images only";
+	font-size: 11pt;
+	border: none;
+	color: blue;
+	width: auto;
+	height: auto;
+
+	top: 10px;
+	right: 10px;
+
 }
-.marked-only .marked.image:after {
-	display: none;
+.marked-only-view.marks-visible.viewer:after {
+	content: "Showing marked images only (marks visible)";
+}
+
+/* XXX should we use opacity??? */
+.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
+	opacity: 0.3;
 }
 
 
@@ -270,6 +286,12 @@ $(function(){
 		loadData(convertDataGen1(image_list))
 	}
 
+	// XXX this will reload everything...
+	if('MARKED' in localStorage){
+		loadLocalStorageMarks()
+	}
+
+
 	// NOTE: this is global so as to not to add any extra complexity to 
 	//		the internal workings...
 	$('.viewer')

ui/keybindings3.js

@@ -210,9 +210,11 @@ var KEYBOARD_CONFIG = {
 				ctrl: function(){ removeImageMarks('ribbon') },
 				shift: function(){ removeImageMarks('all') },
 			},
-		F2: function(){ 
+		F2: {
+				default: function(){ toggleMarkesView() },
+				shift: function(){
 					toggleMarkedOnlyView()
-				centerRibbons()
+				}
 			},
 	}
 }