From 2240025747da64737f725e01926aad8471e7b5fc Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Mon, 2 Nov 2015 21:06:42 +0300 Subject: [PATCH] now viewer ui is a feature... Signed-off-by: Alex A. Naanou --- ui (gen4)/data.js | 20 +++++-- ui (gen4)/testing.js | 3 +- ui (gen4)/ui.js | 11 ++-- ui (gen4)/viewer.js | 124 +++++++++++++++++++++++++++++-------------- 4 files changed, 105 insertions(+), 53 deletions(-) diff --git a/ui (gen4)/data.js b/ui (gen4)/data.js index cf36d187..d549213f 100755 --- a/ui (gen4)/data.js +++ b/ui (gen4)/data.js @@ -453,6 +453,14 @@ var DataPrototype = { /*********************************************** Introspection ***/ + get length(){ + return this.order.length + }, + get ribbonLength(){ + return this.getImages(this.getRibbon()).len + }, + + // Get image // // Get current image: @@ -522,16 +530,18 @@ var DataPrototype = { // NOTE: If gid|order is not given, current image is assumed. // Similarly, if list|ribbon is not given then the current // ribbon is used. - // NOTE: if input gid is invalid this will return -1 (XXX is this good???) - // NOTE: the folowing are equivalent: + // NOTE: if input gid is invalid this will return -1 + // NOTE: the following are equivalent: // D.getImage('current', -1, R) // D.getImage('before', R) // D.getImage('current', 'before', R) // where D is a Data object and R a ribbon id/index different - // from the current ribbon (see next note for details). + // from the current ribbon, i.e. the current image is not present + // in R (see next note for details). // NOTE: in before/after modes, if the target image is found then it - // will be returned, use offset to explicitly get the image - // before/after target. + // will be returned, thus the mode has no effect unless the + // target image is not loaded. + // Use offset to explicitly get the image before/after target. // // XXX most of the complexity here comes from argument DSL parsing, // might be good to revise argument syntax and handling... diff --git a/ui (gen4)/testing.js b/ui (gen4)/testing.js index 3a36e1f3..ae7357f0 100755 --- a/ui (gen4)/testing.js +++ b/ui (gen4)/testing.js @@ -100,7 +100,8 @@ module.setupActions = function(viewer){ viewer = viewer == null ? $('.viewer') : viewer //r = r == null ? makeTestRibbons(viewer, images) : r - var vv = Object.create(v.Viewer) + //var vv = Object.create(v.Viewer) + var vv = Object.create(v.Client) // XXX need to automate this... vv.config = Object.create(vv.config || {}) diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js index 3ac77327..1c19b04d 100755 --- a/ui (gen4)/ui.js +++ b/ui (gen4)/ui.js @@ -242,23 +242,17 @@ $(function(){ // XXX window.a = testing.setupActions() - .load({ - viewer: $('.viewer') - }) // used switch experimental actions on (set to true) or off (unset or false)... //a.experimental = true - // XXX for some reason this is not visible when loading... - a.setEmptyMsg('Loading...') - viewer.ImageGridFeatures.setup(a, [ 'viewer-testing', // XXX this is not for production... 'experiments', ]) - + // this publishes all the actions... //module.GLOBAL_KEYBOARD.__proto__ = a @@ -266,10 +260,11 @@ $(function(){ // NOTE: we can load this in parts... a .load({ - //viewer: $('.viewer'), + viewer: $('.viewer'), data: data.Data(testing.mock_data), images: testing.makeTestImages(), }) + .setEmptyMsg('Loading...') // this is needed when loading legacy sources that do not have tags // synced... // do not do for actual data... diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index 17378531..d406611a 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -274,28 +274,10 @@ actions.Actions({ // basic navigation... // focusImage: ['Navigate/Focus image', - /* XXX same structure as action but instead of a function uses - a list of args... - // aliases... - { - 'firstImage': ['Navigate/First image in current ribbon', [ 'first' ]], - 'lastImage': ['Navigate/Last image in current ribbon', [ 'last' ]], - 'firstGlobalImage': ['Navigate/First globally image', [ 0 ]], - 'lastGlobalImage': ['Navigate/Last globally image', [ -1 ]], - }, - */ function(img, list){ this.data.focusImage(img, list) }], focusRibbon: ['Navigate/Focus Ribbon', - /* - { - firstRibbon: ['Navigate/First ribbon', [ 'first' ]], - lastRibbon: ['Navigate/Last ribbon', [ 'last' ]], - prevRibbon: ['Navigate/Previous ribbon', [ 'before' ]], - nextRibbon: ['Navigate/Next ribbon', [ 'after' ]], - }, - */ function(target){ var data = this.data var r = data.getRibbon(target) @@ -800,25 +782,19 @@ actions.Actions({ -// XXX do partial loading... -var Viewer = -module.Viewer = -actions.Actions(Client, { +/*********************************************************************/ - config: { - // The maximum screen width allowed when zooming... - 'max-screen-images': 30, +var ImageGridFeatures = +module.ImageGridFeatures = Object.create(features.FeatureSet) - // A step (multiplier) used by .zoomIn()/.zoomOut() actions. - // NOTE: this is rounded to the nearest whole screen width in images - // and current fit-overflow added. - 'zoom-step': 1.2, - // added to odd number of images to fit to indicate scroll ability... - // ...this effectively sets the closest distance an image can be from - // the viewer edge... - 'fit-overflow': 0.2, - }, + +//--------------------------------------------------------------------- + +var ViewerActions = +module.ViewerActions = +//actions.Actions(Client, { +actions.Actions({ /* // Images... @@ -1317,12 +1293,31 @@ actions.Actions(Client, { }) +var Viewer = +module.Viewer = features.Feature(ImageGridFeatures, { + title: 'Graphical User Interface', + tag: 'ui', -/*********************************************************************/ + priority: 'high', -var ImageGridFeatures = -module.ImageGridFeatures = Object.create(features.FeatureSet) + config: { + // The maximum screen width allowed when zooming... + 'max-screen-images': 30, + + // A step (multiplier) used by .zoomIn()/.zoomOut() actions. + // NOTE: this is rounded to the nearest whole screen width in images + // and current fit-overflow added. + 'zoom-step': 1.2, + + // added to odd number of images to fit to indicate scroll ability... + // ...this effectively sets the closest distance an image can be from + // the viewer edge... + 'fit-overflow': 0.2, + }, + + actions: ViewerActions, +}) @@ -1333,6 +1328,10 @@ module.ImageGridFeatures = Object.create(features.FeatureSet) // XXX would be great to add a mechanism define how to reverse actions... // ...one way to do this at this point is to revert to last state // and re-run the journal until the desired event... +// XXX need to define a clear journaling strategy in the lines of: +// - save state clears journal and adds a state load action +// - .load(..) clears journal +// XXX needs careful testing... var Journal = module.Journal = features.Feature(ImageGridFeatures, { title: 'Action Journal', @@ -1355,6 +1354,16 @@ module.Journal = features.Feature(ImageGridFeatures, { delete this.journal } }], + runJournal: ['Journal/Run journal', + function(journal){ + var that = this + journal.forEach(function(e){ + // load state... + that.focusImage(e[0]) + // run action... + that[e[1]].apply(that, e[2]) + }) + }], }), // log state, action and its args... @@ -1400,6 +1409,8 @@ module.Journal = features.Feature(ImageGridFeatures, { 'ungroup', 'expandGroup', 'collapseGroup', + + 'runJournal', ].map(function(action){ return [ action, @@ -1554,6 +1565,7 @@ module.PartialRibbons = features.Feature(ImageGridFeatures, { priority: 'high', tag: 'ui-partial-ribbons', + depends: ['ui'], actions: PartialRibbonsActions, @@ -1694,6 +1706,12 @@ module.SingleImageView = features.Feature(ImageGridFeatures, { doc: '', tag: 'ui-single-image-view', + depends: ['ui'], + + config: { + 'single-image-scale': null, + 'ribbon-scale': null, + }, actions: SingleImageActions, @@ -1705,18 +1723,29 @@ module.SingleImageView = features.Feature(ImageGridFeatures, { updateImageProportions.call(this) } }], + // XXX this uses .screenwidth for scale, is this the right way to go? ['toggleSingleImage.post', function(){ // singe image mode -- set image proportions... if(this.toggleSingleImage('?') == 'on'){ updateImageProportions.call(this) + // update scale... + var w = this.screenwidth + this.config['ribbon-scale'] = w + this.screenwidth = this.config['single-image-scale'] || w + // ribbon mode -- restore original image size... } else { this.ribbons.viewer.find('.image:not(.clone)').css({ width: '', height: '' }) + + // update scale... + var w = this.screenwidth + this.config['single-image-scale'] = w + this.screenwidth = this.config['ribbon-scale'] || w } }], ], @@ -1736,6 +1765,7 @@ module.AlignRibbonsToImageOrder = features.Feature(ImageGridFeatures, { doc: '', tag: 'ui-ribbon-align-to-order', + depends: ['ui'], exclusive: ['ui-ribbon-align'], handlers: [ @@ -1750,6 +1780,7 @@ module.AlignRibbonsToFirstImage = features.Feature(ImageGridFeatures, { doc: '', tag: 'ui-ribbon-align-to-first', + depends: ['ui'], exclusive: ['ui-ribbon-align'], handlers: [ @@ -1768,6 +1799,7 @@ module.ShiftAnimation = features.Feature(ImageGridFeatures, { doc: '', tag: 'ui-animation', + depends: ['ui'], handlers: [ ['shiftImageUp.pre shiftImageDown.pre', @@ -1853,6 +1885,7 @@ module.BoundsIndicators = features.Feature(ImageGridFeatures, { doc: '', tag: 'ui-bounds-indicators', + depends: ['ui'], actions: BoundsIndicatorsActions, @@ -2011,6 +2044,7 @@ module.CurrentImageIndicator = features.Feature(ImageGridFeatures, { doc: '', tag: 'ui-current-image-indicator', + depends: ['ui'], config: { 'current-image-border': 3, @@ -2113,7 +2147,10 @@ module.CurrentImageIndicatorHideOnFastScreenNav = features.Feature(ImageGridFeat tag: 'ui-current-image-indicator-hide-on-fast-screen-nav', - depends: ['ui-current-image-indicator'], + depends: [ + 'ui', + 'ui-current-image-indicator' + ], exclusive: ['ui-current-image-indicator-hide'], @@ -2175,7 +2212,10 @@ module.CurrentImageIndicatorHideOnScreenNav = features.Feature(ImageGridFeatures tag: 'ui-current-image-indicator-hide-on-screen-nav', - depends: ['ui-current-image-indicator'], + depends: [ + 'ui', + 'ui-current-image-indicator' + ], exclusive: ['ui-current-image-indicator-hide'], @@ -2211,6 +2251,7 @@ module.ImageStateIndicator = features.Feature(ImageGridFeatures, { doc: '', tag: 'ui-image-state-indicator', + depends: ['ui'], }) @@ -2224,6 +2265,7 @@ module.GlobalStateIndicator = features.Feature(ImageGridFeatures, { doc: '', tag: 'ui-global-state-indicator', + depends: ['ui'], }) @@ -2423,6 +2465,7 @@ module.ActionTree = features.Feature(ImageGridFeatures, { doc: '', tag: 'ui-action-tree', + depends: ['ui'], config: { 'action-category-order': [ @@ -2767,6 +2810,8 @@ module.FileSystemLoader = features.Feature(ImageGridFeatures, { // features.Feature(ImageGridFeatures, 'viewer-testing', [ + 'ui', + // features... 'ui-ribbon-align-to-order', 'ui-single-image-view', @@ -2802,6 +2847,7 @@ features.Feature(ImageGridFeatures, 'commandline', [ ]) features.Feature(ImageGridFeatures, 'viewer-minimal', [ + 'ui', 'ui-ribbon-align-to-order', 'ui-animation', 'ui-bounds-indicators',