finished the basic bookmarks functionality (not tested, needs CSS)...

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

ui/data.js

@@ -163,6 +163,14 @@ var UPDATE_SYNC = false
 var SYNC_IMG_LOADER = false
 
 
+// list of functions to setup different bindings
+//
+// each function must be of the form:
+// 	setupBinding(viewer) -> viewer
+//
+var SETUP_BINDINGS = []
+
+
 
 /**********************************************************************
 * Helpers
@@ -502,7 +510,7 @@ function getGIDBefore(gid, ribbon, search, data){
 	ribbon = ribbon == null ? getGIDRibbonIndex(gid, data) : ribbon
 	search = search == null ? binSearch : search
 	//search = search == null ? match2(linSearch, binSearch) : search
-	ribbon = data.ribbons[ribbon]
+	ribbon = typeof(ribbon) == typeof(123) ? data.ribbons[ribbon] : ribbon
 	var order = data.order
 
 	var target = order.indexOf(gid)
@@ -1713,6 +1721,24 @@ function preCacheAllRibbons(){
 * Actions...
 */
 
+function showImage(gid){
+	var img = getImage(gid)
+
+	// target image not loaded...
+	if(img.length == 0){
+		DATA.current = gid
+		reloadViewer()
+		img = getImage(gid)
+
+	// target is already loaded...
+	} else {
+		centerView(focusImage(img))
+		centerRibbons()
+	}
+	return img
+}
+
+
 // Sort the ribbons by DATA.order and re-render...
 //
 // This is the main way to sort images:

ui/index.html

@@ -33,6 +33,7 @@
 <script src="workers.js"></script>
 <script src="modes.js"></script>
 <script src="marks.js"></script>
+<script src="bookmarks.js"></script>
 <script src="files.js"></script>
 <script src="localstorage.js"></script>
 <script src="info.js"></script>

ui/marks.js

@@ -38,6 +38,28 @@ function _removeMark(cls, gid, image){
 }
 
 
+// Make a mark toggler
+//
+// The toggler will:
+// 	- toggle img_class on the target image
+// 	- add/remove a mark element after the image
+// 	- toggle mark_class on the mark element
+// 	- trigger the evt_name on the viewer passing it:
+// 		- target image
+// 		- action ('on' on 'off')
+//
+// The actual toggler is built with createCSSClassToggler(..), see its
+// docs for protocol descrittion.
+//
+// The resulting toggled, by default, marks the current image 
+// (.current.image), but can be passed a different image as first 
+// argument.
+//
+// NOTE: when passing an alternative image as an argument, the second 
+// 		argument MUST also be passed. it can be one of:
+// 			- 'on'		: force create mark
+// 			- 'off'		: force remove mark
+// 			- 'next'	: toggle next state (default)
 function makeMarkToggler(img_class, mark_class, evt_name){
 	return createCSSClassToggler(
 		'.current.image', 
@@ -348,5 +370,62 @@ function markImagesDialog(){
 }
 
 
+/*********************************************************************/
+
+function setupMarks(viewer){
+	console.log('Marks: setup...')
+	return viewer
+		// marks...
+		// XXX toggle marking a block is not yet supported...
+		.on('togglingMark', function(evt, img, action){
+			var gid = getImageGID(img) 
+
+			// add marked image to list...
+			if(action == 'on'){
+				MARKED.indexOf(gid) == -1 && MARKED.push(gid)
+
+			// remove marked image from list...
+			} else {
+				MARKED.splice(MARKED.indexOf(gid), 1)
+			}
+		})
+		.on('removeingRibbonMarks', function(evt, ribbon){
+			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
+				var i = MARKED.indexOf(e)
+				if(i != -1){
+					MARKED.splice(i, 1)
+				}
+			})
+		})
+		.on('removeingAllMarks', function(evt){
+			MARKED.splice(0, MARKED.length)
+		})
+		.on('markingRibbon', function(evt, ribbon){
+			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
+				var i = MARKED.indexOf(e)
+				if(i == -1){
+					MARKED.push(e)
+				}
+			})
+		})
+		.on('markingAll', function(evt){
+			MARKED.splice(0, MARKED.length)
+			MARKED.concat(DATA.order)
+		})
+		.on('invertingMarks', function(evt, ribbon){
+			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
+				var i = MARKED.indexOf(e)
+				if(i == -1){
+					MARKED.push(e)
+				} else {
+					MARKED.splice(i, 1)
+				}
+			})
+		})
+}
+SETUP_BINDINGS.push(setupMarks)
+
+
+
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */

ui/setup.js

@@ -68,6 +68,11 @@ function updateContextIndicators(image){
 //
 function setupDataBindings(viewer){
 	viewer = viewer == null ? $('.viewer') : viewer
+
+	SETUP_BINDINGS.forEach(function(setup){
+		setup(viewer)
+	})
+
 	viewer
 		.click(function(){
 			if($('.ribbon').length == 0){
@@ -321,55 +326,6 @@ function setupDataBindings(viewer){
 		})
 
 
-		// marks...
-		// XXX toggle marking a block is not yet supported...
-		.on('togglingMark', function(evt, img, action){
-			var gid = getImageGID(img) 
-
-			// add marked image to list...
-			if(action == 'on'){
-				 MARKED.indexOf(gid) == -1 && MARKED.push(gid)
-
-			// remove marked image from list...
-			} else {
-				MARKED.splice(MARKED.indexOf(gid), 1)
-			}
-		})
-		.on('removeingRibbonMarks', function(evt, ribbon){
-			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
-				var i = MARKED.indexOf(e)
-				if(i != -1){
-					MARKED.splice(i, 1)
-				}
-			})
-		})
-		.on('removeingAllMarks', function(evt){
-			MARKED.splice(0, MARKED.length)
-		})
-		.on('markingRibbon', function(evt, ribbon){
-			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
-				var i = MARKED.indexOf(e)
-				if(i == -1){
-					MARKED.push(e)
-				}
-			})
-		})
-		.on('markingAll', function(evt){
-			MARKED.splice(0, MARKED.length)
-			MARKED.concat(DATA.order)
-		})
-		.on('invertingMarks', function(evt, ribbon){
-			$.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){
-				var i = MARKED.indexOf(e)
-				if(i == -1){
-					MARKED.push(e)
-				} else {
-					MARKED.splice(i, 1)
-				}
-			})
-		})
-
-
 		// caching...
 		.on('reloadedRibbon updatedRibbon', function(evt, ribbon){
 

ui/sort.js

@@ -191,6 +191,7 @@ function sortImages(cmp, reverse){
 		DATA.order.reverse()
 	}
 	updateRibbonOrder()
+	$('.viewer').trigger('sortedImages', [cmp])
 }