From a455e55b4dd7bf3a3428c3f1e3de15ec626b8bf5 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 12 Dec 2013 19:35:13 +0400 Subject: [PATCH] finished the basic bookmarks functionality (not tested, needs CSS)... Signed-off-by: Alex A. Naanou --- ui/data.js | 28 +++++++++++++++++- ui/index.html | 1 + ui/marks.js | 79 +++++++++++++++++++++++++++++++++++++++++++++++++++ ui/setup.js | 54 ++++------------------------------- ui/sort.js | 1 + 5 files changed, 113 insertions(+), 50 deletions(-) diff --git a/ui/data.js b/ui/data.js index 2880642e..68d3fbe7 100755 --- a/ui/data.js +++ b/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: diff --git a/ui/index.html b/ui/index.html index ef2566d0..7d0f948c 100755 --- a/ui/index.html +++ b/ui/index.html @@ -33,6 +33,7 @@ + diff --git a/ui/marks.js b/ui/marks.js index 33e9ea11..a7638932 100755 --- a/ui/marks.js +++ b/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 : */ diff --git a/ui/setup.js b/ui/setup.js index 00320cb6..ab90d6b6 100755 --- a/ui/setup.js +++ b/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){ diff --git a/ui/sort.js b/ui/sort.js index 3cd447d4..a9c9c1f3 100755 --- a/ui/sort.js +++ b/ui/sort.js @@ -191,6 +191,7 @@ function sortImages(cmp, reverse){ DATA.order.reverse() } updateRibbonOrder() + $('.viewer').trigger('sortedImages', [cmp]) }