From 79d2f87ca0fd41d4a00c1a9ae61d8101870921c9 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 13 Dec 2013 06:36:40 +0400 Subject: [PATCH] fixed marking block + some cleanup... Signed-off-by: Alex A. Naanou --- ui/data.js | 5 +++ ui/lib/jli.js | 4 ++ ui/marks.js | 104 ++++++++++++++++++++++++++++++++++++++++++-------- 3 files changed, 97 insertions(+), 16 deletions(-) diff --git a/ui/data.js b/ui/data.js index f90dbcc0..2b5cc3f6 100755 --- a/ui/data.js +++ b/ui/data.js @@ -167,6 +167,11 @@ var SYNC_IMG_LOADER = false // var SETUP_BINDINGS = [] +// list of function that update image state... +// +// each function must be of the form: +// updateImage(gid, image) -> image +// var IMAGE_UPDATERS = [] diff --git a/ui/lib/jli.js b/ui/lib/jli.js index c47d6ce7..3ad96a28 100755 --- a/ui/lib/jli.js +++ b/ui/lib/jli.js @@ -65,6 +65,10 @@ // this is due to several times I've repeated the same mistake of // forgetting to write the classes without leading dots, the class // list is not normalized... +// NOTE: the toggler can be passed a non-jquery object, but then only an +// explicit state is supported as the second argument, the reason +// being that we can not determain the current state without a propper +// .hasClass(..) test... // // // This also takes one or two callbacks. If only one is given then it is diff --git a/ui/marks.js b/ui/marks.js index f7a02c9c..0c42acde 100755 --- a/ui/marks.js +++ b/ui/marks.js @@ -19,6 +19,11 @@ function _addMark(cls, gid, image){ gid = gid == null ? getImageGID() : gid image = image == null ? getImage() : $(image) + // no image is loaded... + if(image.length == 0){ + return + } + var mark = $('.mark.'+cls+'.'+gid) if(mark.length == 0){ @@ -33,6 +38,11 @@ function _removeMark(cls, gid, image){ gid = gid == null ? getImageGID() : gid image = image == null ? getImage() : $(image) + // no image is loaded... + if(image.length == 0){ + return + } + var mark = $('.mark.'+cls+'.'+gid) if(mark.length != 0){ @@ -64,18 +74,35 @@ function _removeMark(cls, gid, image){ // - 'on' : force create mark // - 'off' : force remove mark // - 'next' : toggle next state (default) +// NOTE: when passing this a gid, the 'next' action is not supported function makeMarkToggler(img_class, mark_class, evt_name){ return createCSSClassToggler( '.current.image', img_class, function(action, elem){ toggleMarkesView('on') - if(action == 'on'){ - _addMark(mark_class, getImageGID(elem), elem) + + // we got a gid... + if(elem.length == 0 && elem.selector in IMAGES){ + var gid = elem.selector + elem = getImage(gid) + elem = elem.length == 0 ? null : elem + + // we are given an image... } else { - _removeMark(mark_class, getImageGID(elem), elem) + var gid = getImageGID(elem) } - $('.viewer').trigger(evt_name, [elem, action]) + + // do this only of the image is loaded... + if(elem != null){ + if(action == 'on'){ + _addMark(mark_class, gid, elem) + } else { + _removeMark(mark_class, gid, elem) + } + } + + $('.viewer').trigger(evt_name, [gid, action]) }) } @@ -241,22 +268,32 @@ function invertImageMarks(){ // Toggle marks in the current continuous section of marked or unmarked // images... // XXX need to make this dynamic data compatible... +// XXX this will mark the block ONLY IF it is loaded!!! function toggleImageMarkBlock(image){ if(image == null){ image = getImage() } - //$('.viewer').trigger('togglingImageBlockMarks', [image]) + var found = [false, false] // we need to invert this... var state = toggleImageMark() - var _convert = function(){ - if(toggleImageMark(this, '?') == state){ - // stop the iteration... - return false + var _convert = function(i){ + return function(){ + if(toggleImageMark(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... + found[i] = true + // stop the iteration... + return false + } + toggleImageMark(this, state) } - toggleImageMark(this, state) } - image.nextAll('.image').each(_convert) - image.prevAll('.image').each(_convert) + image.nextAll('.image').each(_convert(1)) + image.prevAll('.image').each(_convert(0)) + + $('.viewer').trigger('togglingImageBlockMarks', [image, state, found]) + return state } @@ -408,10 +445,7 @@ 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) - + .on('togglingMark', function(evt, gid, action){ // add marked image to list... if(action == 'on'){ MARKED.indexOf(gid) == -1 && MARKED.push(gid) @@ -421,6 +455,44 @@ function setupMarks(viewer){ MARKED.splice(MARKED.indexOf(gid), 1) } }) + .on('togglingImageBlockMarks', function(evt, img, state, found){ + var gid = getImageGID(img) + var ribbon = DATA.ribbons[getRibbonIndex(img)] + var i = ribbon.indexOf(gid) + + state = state == 'off' ? false : true + + var _convert = function(_, e){ + if(skipping && (MARKED.indexOf(e) >= 0) == state){ + return + } + skipping = false + if((MARKED.indexOf(e) >= 0) == state){ + return false + } + // do the toggle... + if(state){ + MARKED.push(e) + } else { + MARKED.splice(MARKED.indexOf(e), 1) + } + } + + // go left... + if(!found[0]){ + var skipping = true + var left = ribbon.slice(0, i) + left.reverse() + $.each(left, _convert) + } + + // go right... + if(!found[1]){ + var skipping = true + var right = ribbon.slice(i) + $.each(right, _convert) + } + }) .on('removeingRibbonMarks', function(evt, ribbon){ $.each(DATA.ribbons[getRibbonIndex(ribbon)], function(_, e){ var i = MARKED.indexOf(e)