diff --git a/ui/base.js b/ui/base.js index 1f67bc7e..27324234 100755 --- a/ui/base.js +++ b/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]) }) diff --git a/ui/data.js b/ui/data.js index 7c8a253c..6d119b36 100755 --- a/ui/data.js +++ b/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) } }) }) diff --git a/ui/index.html b/ui/index.html index 0d300cc4..07b0f0c2 100755 --- a/ui/index.html +++ b/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') diff --git a/ui/keybindings3.js b/ui/keybindings3.js index 8c41ebce..c4accb0b 100755 --- a/ui/keybindings3.js +++ b/ui/keybindings3.js @@ -210,9 +210,11 @@ var KEYBOARD_CONFIG = { ctrl: function(){ removeImageMarks('ribbon') }, shift: function(){ removeImageMarks('all') }, }, - F2: function(){ - toggleMarkedOnlyView() - centerRibbons() + F2: { + default: function(){ toggleMarkesView() }, + shift: function(){ + toggleMarkedOnlyView() + } }, } }