From d5ec67950e1998c3fb421b53dd8c693043181ee3 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 11 Oct 2014 06:33:49 +0400 Subject: [PATCH] started implementing new actions... Signed-off-by: Alex A. Naanou --- ui (gen4)/data.js | 23 ++++++ ui (gen4)/index.html | 4 +- ui (gen4)/lib/actions.js | 11 ++- ui (gen4)/ribbons.js | 42 +++-------- ui (gen4)/testing.js | 24 ++++--- ui (gen4)/ui.js | 6 +- ui (gen4)/viewer.js | 148 +++++++++++++++++++++++++++++++++++++-- 7 files changed, 201 insertions(+), 57 deletions(-) diff --git a/ui (gen4)/data.js b/ui (gen4)/data.js index e508e43b..e298e4b7 100755 --- a/ui (gen4)/data.js +++ b/ui (gen4)/data.js @@ -312,6 +312,13 @@ module.DataPrototype = { // NOTE: in both the above cases if gid|order is found explicitly // it will be returned. // + // Get next/prev image (offset of 1): + // .getImage('next') + // .getImage('prev') + // .getImage(gid|order, 'next'[, list|ribbon]) + // .getImage(gid|order, 'prev'[, list|ribbon]) + // -> gid + // // Get image at an offset from a given image: // .getImage(gid|order, offset[, list|ribbon]) // -> gid @@ -398,6 +405,10 @@ module.DataPrototype = { : offset > 0 ? 'after' : mode offset = Math.abs(offset) + } else if(mode == 'next'){ + offset = 1 + } else if(mode == 'prev'){ + offset = -1 } else { var offset = 0 mode = mode == null ? 'before' : mode @@ -620,6 +631,11 @@ module.DataPrototype = { // .getRibbon('current') // -> ribbon gid // + // Get first/last ribbon: + // .getRibbon('first') + // .getRibbon('last') + // -> ribbon gid + // // Get base ribbon: // .getRibbon('base') // -> base ribbon gid @@ -652,6 +668,13 @@ module.DataPrototype = { getRibbon: function(target, offset){ target = target == null ? this.current : target + if(target == 'first'){ + return this.ribbon_order[0] + + } else if(target == 'last'){ + return this.ribbon_order.slice(-1)[0] + } + if(target == 'before' || target == 'after'){ offset = target target = 'current' diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html index 4fefeea2..2883b352 100755 --- a/ui (gen4)/index.html +++ b/ui (gen4)/index.html @@ -5,9 +5,9 @@ - + diff --git a/ui (gen4)/lib/actions.js b/ui (gen4)/lib/actions.js index a4e40b6e..94e25bd8 100755 --- a/ui (gen4)/lib/actions.js +++ b/ui (gen4)/lib/actions.js @@ -201,7 +201,7 @@ function Action(name, doc, ldoc, func){ // ...searching the inheritance chain is not reliable as a // method can be referenced more than once, both with the // same as well as under different names... - var handlers = getHandlers(name) + var handlers = getHandlers.call(this, name) .map(function(h){ return h.apply(that, args) }) // NOTE: this action will get included and called by the code @@ -250,6 +250,10 @@ module.MetaActions = { get actions(){ var res = [] for(var k in this){ + // avoid recursion... + if(k == 'actions' || k == 'length'){ + continue + } // get only actions... if(this[k] instanceof Action){ res.push(k) @@ -269,15 +273,16 @@ module.MetaActions = { getDoc: function(actions){ var res = {} var that = this - actions = actions == null ? this.actions() + actions = actions == null ? this.actions : arguments.length > 1 ? args2array(arguments) : typeof(actions) == typeof('str') ? [actions] : actions // get the first defined set of docs in the inheritance chain... actions.forEach(function(n){ var cur = that + res[n] = [] while(cur.__proto__ != null){ - if(cur[n].doc != null){ + if(cur[n] != null && cur[n].doc != null){ res[n] = [ cur[n].doc, cur[n].long_doc ] break } diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js index 6e0d4a95..ba3b34a2 100755 --- a/ui (gen4)/ribbons.js +++ b/ui (gen4)/ribbons.js @@ -855,6 +855,10 @@ module.RibbonsPrototype = { // clear all... if(gids == null || gids == '*'){ this.viewer.find('.ribbon').remove() + // reset offsets... + this.viewer.find('.ribbon-set').css({ + top: '', + }) // clear one or more gids... } else { @@ -888,23 +892,13 @@ module.RibbonsPrototype = { // NOTE: overflowing offset will focus first/last image. // // XXX interaction animation... - focusImage: function(gid){ + focusImage: function(target){ var cur = this.viewer .find('.current.image') - - // relative keywords... - gid = gid == 'next' ? 1 - : gid == 'prev' ? -1 - : gid - - // offset... - if(typeof(gid) == typeof(123)){ - return this.focusImage(this.getImage(gid)) - } + var next = this.getImage(target) cur.removeClass('current') - return this.getImage(gid) - .addClass('current') + return next.addClass('current') }, // Set base ribbon... @@ -1259,7 +1253,7 @@ module.RibbonsPrototype = { // center an image horizontally... // XXX centerImage: function(target, mode, offset){ - offset = offset == null ? this._getOffset(target) : offset + offset = offset == null ? this._getOffset(target, 'center', 'center', mode) : offset // horizontal offset, current ribbon... this.getRibbon(target) @@ -1303,26 +1297,6 @@ Ribbons.prototype.constructor = Ribbons -/*********************************************************************/ - -// XXX keep this here or move this to a different module??? -module.setupActionHandlers = function(ribbons, context, actions){ - - context.on('focusImage', function(evt, img){ - img = ribbons.focusImage(img) - ribbons - .centerImage(img) - .centerRibbon(img) - }) - - - // XXX this does not need focus ribbon handlers as the Data will - // get those, chose an image and trigger the appropriate - // focusImage event... -} - - - /********************************************************************** * vim:set ts=4 sw=4 : */ return module }) diff --git a/ui (gen4)/testing.js b/ui (gen4)/testing.js index bab8f991..77e92594 100755 --- a/ui (gen4)/testing.js +++ b/ui (gen4)/testing.js @@ -22,9 +22,9 @@ var ribbons = module.ribbons = require('ribbons') -var actions = -module.actions = - require('actions') +var v = +module.v = + require('viewer') @@ -77,17 +77,19 @@ module.loadTestRibbons = function(ribbons, data, images, viewer){ var setupActions = -module.setupActions = function(viewer, r){ +module.setupActions = function(viewer){ viewer = viewer == null ? $('.viewer') : viewer - r = r == null ? makeTestRibbons(viewer, images) : r + //r = r == null ? makeTestRibbons(viewer, images) : r - /* - var a = actions.setupBaseActions(viewer, {}) - actions.setupUIActions(viewer, a) - ribbons.setupActionHandlers(r, viewer, a) + var vv = Object.create(v.Viewer) - return a - */ + vv.load({ + data: data.Data(module.mock_data), + viewer: viewer, + images: makeTestImages(), + }) + + return vv } diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js index e3eac753..af844c22 100755 --- a/ui (gen4)/ui.js +++ b/ui (gen4)/ui.js @@ -35,6 +35,8 @@ var testing = require('testing') var client = require('client') +var viewer = require('viewer') + /*********************************************************************/ @@ -117,9 +119,7 @@ $(function(){ window.DEBUG && console.log(k) })) - // XXX - window.r = testing.loadTestRibbons() - window.a = testing.setupActions(null, r) + window.a = testing.setupActions() }) diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index af7eb053..979cacae 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -9,6 +9,11 @@ console.log('>>> viewer') //var DEBUG = DEBUG != null ? DEBUG : true +var actions = require('lib/actions') + +var data = require('data') +var ribbons = require('ribbons') + /*********************************************************************/ // @@ -20,11 +25,146 @@ console.log('>>> viewer') // // -var Client = { -} +var Client = +module.Client = +actions.Actions({ + // basic life-cycle actions... + load: [ + function(d){ + this.data = data.Data(d.data) + }], + clear: [ + function(){ + delete this.data + }], -var Viewer = { -} + + focusImage: ['Focus image', + function(img){ + this.data.focusImage(img) + }], + focusRibbon: ['Focus Ribbon', + function(target){ + var data = this.data + var r = data.getRibbon(target) + var t = data.getImage('current', r) + // XXX is there a 'last' special case??? + t = t == null ? data.getImage('first', r) : t + + this.focusImage(t, r) + }], + + // shorthands for .focusImage(..) and .focusRibbon(..)... + firstImage: ['Focus first image in current ribbon', + function(){ this.focusImage('first') }], + lastImage: ['Focus last image in current ribbon', + function(){ this.focusImage('last') }], + + prevImage: ['Focus previous image', + function(){ this.focusImage('prev') }], + nextImage: ['Focus next image', + function(){ this.focusImage('next') }], + + firstRibbon: ['Focus previous ribbon', + function(){ this.focusRibbon('fisrt') }], + lastRibbon: ['Focus next ribbon', + function(){ this.focusRibbon('last') }], + + prevRibbon: ['Focus previous ribbon', + function(){ this.focusRibbon('before') }], + nextRibbon: ['Focus next ribbon', + function(){ this.focusRibbon('after') }], + +}) + + +// XXX do partial loading... +var Viewer = +module.Viewer = +actions.Actions(Client, { + load: [ + function(data){ + // recycle the viewer... + var viewer = data.viewer + viewer = viewer == null && this.ribbons != null + ? this.ribbons.viewer + : viewer + + this.ribbons = ribbons.Ribbons(viewer, data.images) + + return function(){ + // XXX do a partial load... + this.ribbons.updateData(this.data) + this.focusImage() + } + }], + clear: [ + // XXX do we need to delete the ribbons??? + function(){ + this.ribbons.clear() + delete this.ribbons + }], + + + focusImage: [ + // XXX skip invisible ribbons (???) + // XXX load data chunks... + function(target){ + var ribbons = this.ribbons + var data = this.data + + if(data != null){ + var gid = data.getImage(target) + gid = gid == null ? data.getImage('current') : gid + + // XXX see if we need to load a new data set... + // XXX + + target = ribbons.focusImage(gid) + + } else { + target = ribbons.focusImage(target) + var gid = ribbons.getElemGID(target) + } + + // align current ribbon... + ribbons + .centerRibbon(target) + .centerImage(target) + + // align other ribbons... + if(data != null){ + var ribbon = data.getRibbon(gid) + for(var r in data.ribbons){ + // skip the current ribbon... + if(r == ribbon){ + continue + } + + // XXX skip off-screen ribbons... + // XXX + + // center... + // XXX is there a 'last' special case here??? + var t = data.getImage(gid, r) + if(t == null){ + ribbons.centerImage(data.getImage('first', r), 'before') + } else { + ribbons.centerImage(t, 'after') + } + } + } + }], + + // XXX + prevScreen: ['Focus previous image one screen width away', + function(){ + }], + // XXX + nextScreen: ['Focus next image one screen width away', + function(){ + }], +})