From 9e9198fb72cd74ab09f30231ab7cf9a6bec3fb1f Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 3 Jun 2013 21:10:42 +0400 Subject: [PATCH] more cleanup... Signed-off-by: Alex A. Naanou --- ui/TODO.otl | 2 +- ui/data.js | 42 ++++++++++++++++++++++++++++++++++++------ ui/index.html | 2 ++ ui/keybindings.js | 3 ++- ui/marks.js | 11 ++++++++--- ui/modes.js | 29 ++++++++++++++++++----------- 6 files changed, 67 insertions(+), 22 deletions(-) diff --git a/ui/TODO.otl b/ui/TODO.otl index 3106ac2a..1e437ba7 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -141,7 +141,7 @@ Roadmap [_] ASAP: test on Android... [_] 0% Tablet UI [_] screen buttons - [_] empty view (no data) usable... + [_] usable empty view -- w.o. data... [_] proper system init (start w.o. any data) [_] 75% image sorting (date/name/...) [X] 100% sort by: diff --git a/ui/data.js b/ui/data.js index ff8343af..fcc07143 100755 --- a/ui/data.js +++ b/ui/data.js @@ -18,38 +18,68 @@ var CACHE_DIR = '.ImageGridCache' // A stub image, also here for documentation... var STUB_IMAGE_DATA = { + // Entity GID... id: 'SIZE', - // entity type, can be 'image', 'group' + + // Entity type + // can be: + // - 'image' + // - 'group' type: 'image', - // entity state, can be 'single', 'grouped', 'hidden', ... + + // Entity state + // can be: + // - 'single' + // - 'grouped' + // - 'hidden' + // - ... state: 'single', + + // Creation time... ctime: 0, + + // Original path... path: './images/sizes/900px/SIZE.jpg', + + // Previews... + // NOTE: the actual values depend on specific image and can be + // any size... preview: { '150px': './images/sizes/150px/SIZE.jpg', '350px': './images/sizes/350px/SIZE.jpg', '900px': './images/sizes/900px/SIZE.jpg', }, + + // Classes + // XXX currently unused... classes: '', + + // Image orientation + // can be: + // - 0 (default) - load as-is + // - 90 - rotate 90deg CW + // - 180 - rotate 180deg CW + // - 270 - rotate 270deg CW (90deg CCW) orientation: 0, } // Data format... var DATA = { + // Format version... version: '2.0', - // current position, GID... + // Current position, GID... current: null, - // the ribbon cache... + // The ribbon cache... // in the simplest form this is a list of lists of GIDs ribbons: [], - // flat ordered list of images in current context... + // Flat ordered list of images in current context... // in the simplest form this is a list of GIDs. order: [], - // this can be used to store the filename/path of the file containing + // This can be used to store the filename/path of the file containing // image data... image_file: null } diff --git a/ui/index.html b/ui/index.html index ee5e3aeb..189348cb 100755 --- a/ui/index.html +++ b/ui/index.html @@ -51,6 +51,8 @@ $(function(){ //.dblclick(dblClickHandler) $(window) + // XXX in single image mode this still causes problems... + // this can be resolved by cycling to ribbon mode and back... .resize(function() { correctImageProportionsForRotation('.images') centerView() diff --git a/ui/keybindings.js b/ui/keybindings.js index 4f1924f9..74f2c291 100755 --- a/ui/keybindings.js +++ b/ui/keybindings.js @@ -48,7 +48,7 @@ var KEYBOARD_CONFIG = { title: 'Info overlay', doc: 'Displayed on bottom of the screen if enabled (toggle with '+ 'I) and/or inline, at bottom of and image when cursor '+ - 'is over it (only in ribbon mode, toggle with alt-I)

'+ + 'is over it (only in ribbon mode, toggle with alt-I)'+ '

NOTE: when the cursor is over the info overlay one can use '+ 'Ctrl-A and Ctrl-D for info text selection, without affecting '+ @@ -165,6 +165,7 @@ var KEYBOARD_CONFIG = { '.viewer:not(.overlay)': { title: 'Global', doc: 'These key bindings work in most other modes.'+ + '

NOTE: shifting markid images from different ribbons will '+ 'perform the operations on ALL marked images but relative '+ 'the the current ribbon. i.e. some images might get promoted,'+ diff --git a/ui/marks.js b/ui/marks.js index a32abb47..03ebc716 100755 --- a/ui/marks.js +++ b/ui/marks.js @@ -67,7 +67,8 @@ function loadAllImages(){ * Modes */ -var toggleMarkedOnlyView = createCSSClassToggler('.viewer', +var toggleMarkedOnlyView = createCSSClassToggler( + '.viewer', 'marked-only-view', function(action){ if(action == 'on'){ @@ -79,7 +80,9 @@ var toggleMarkedOnlyView = createCSSClassToggler('.viewer', // XXX shifting images and unmarking in this mode do not work correctly... -var toggleMarkesView = createCSSClassToggler('.viewer', 'marks-visible', +var toggleMarkesView = createCSSClassToggler( + '.viewer', + 'marks-visible', function(){ var cur = getImage() // current is marked... @@ -107,7 +110,9 @@ var toggleMarkesView = createCSSClassToggler('.viewer', 'marks-visible', * Actions */ -var toggleImageMark = createCSSClassToggler('.current.image', 'marked', +var toggleImageMark = createCSSClassToggler( + '.current.image', + 'marked', function(action){ toggleMarkesView('on') $('.viewer').trigger('togglingMark', [getImage(), action]) diff --git a/ui/modes.js b/ui/modes.js index 41adb86b..cbdce918 100755 --- a/ui/modes.js +++ b/ui/modes.js @@ -6,6 +6,9 @@ //var DEBUG = DEBUG != null ? DEBUG : true +var SLIDESHOW_INTERVAL = 3000 +var SLIDESHOW_LOOP = true +var SLIDESHOW_DIRECTION = 'next' @@ -17,7 +20,9 @@ //function makeDrawerToggler(contentRenderer, root, element_class, mode_class){ function makeDrawerToggler(contentRenderer, root){ var element_class = '.drawer-block' - var toggler = createCSSClassToggler(root, 'drawer-mode overlay', + var toggler = createCSSClassToggler( + root, + 'drawer-mode overlay', function(action){ // XXX var body = $(document.body) @@ -111,7 +116,8 @@ function makeDrawerToggler(contentRenderer, root){ */ // XXX make this save and restore settings... -var toggleSingleImageMode = createCSSClassToggler('.viewer', +var toggleSingleImageMode = createCSSClassToggler( + '.viewer', 'single-image-mode', function(action){ // prevent reiniting... @@ -162,13 +168,10 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer', }) -var SLIDESHOW_INTERVAL = 3000 -var SLIDESHOW_LOOP = true -var SLIDESHOW_DIRECTION = 'next' - // TODO transitions... // TODO a real setup UI (instead of prompt) -var toggleSlideShowMode = createCSSClassToggler('.viewer', +var toggleSlideShowMode = createCSSClassToggler( + '.viewer', '.slideshow-mode', function(action){ if(action == 'on'){ @@ -216,7 +219,8 @@ var toggleSlideShowMode = createCSSClassToggler('.viewer', }) -var toggleTheme = createCSSClassToggler('.viewer', +var toggleTheme = createCSSClassToggler( + '.viewer', [ 'gray', 'dark', @@ -228,7 +232,8 @@ var toggleTheme = createCSSClassToggler('.viewer', }) -var toggleImageInfo = createCSSClassToggler('.viewer', +var toggleImageInfo = createCSSClassToggler( + '.viewer', '.image-info-visible', function(action){ if(toggleSingleImageMode('?') == 'off'){ @@ -237,7 +242,8 @@ var toggleImageInfo = createCSSClassToggler('.viewer', }) -var toggleInlineImageInfo = createCSSClassToggler('.viewer', +var toggleInlineImageInfo = createCSSClassToggler( + '.viewer', '.image-info-inline-visible', function(action){ if(action == 'on'){ @@ -251,7 +257,8 @@ var toggleInlineImageInfo = createCSSClassToggler('.viewer', }) -var toggleImageProportions = createCSSClassToggler('.viewer', +var toggleImageProportions = createCSSClassToggler( + '.viewer', [ 'fit-square', 'fit-viewer'