From 8dd8f29c82f5f58ac36c5cf60e1f0405d5512b06 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 11 Oct 2014 17:08:17 +0400 Subject: [PATCH] started ribbon editing actions... Signed-off-by: Alex A. Naanou --- ui (gen4)/data.js | 5 + ui (gen4)/lib/actions.js | 7 +- ui (gen4)/viewer.js | 229 ++++++++++++++++++++++++++++++++++++++- 3 files changed, 237 insertions(+), 4 deletions(-) diff --git a/ui (gen4)/data.js b/ui (gen4)/data.js index e298e4b7..4c73bad6 100755 --- a/ui (gen4)/data.js +++ b/ui (gen4)/data.js @@ -642,7 +642,9 @@ module.DataPrototype = { // // Get ribbon before/after current // .getRibbon('before') + // .getRibbon('prev') // .getRibbon('after') + // .getRibbon('next') // -> gid // -> null // @@ -675,6 +677,9 @@ module.DataPrototype = { return this.ribbon_order.slice(-1)[0] } + target = target == 'next' ? 'after' : target + target = target == 'prev' ? 'before' : target + if(target == 'before' || target == 'after'){ offset = target target = 'current' diff --git a/ui (gen4)/lib/actions.js b/ui (gen4)/lib/actions.js index 94e25bd8..aa0591ff 100755 --- a/ui (gen4)/lib/actions.js +++ b/ui (gen4)/lib/actions.js @@ -169,6 +169,10 @@ function args2array(args){ // object the action was called from. // // XXX do we need to return something from an action ever? +// XXX add more metadata/docs: +// .section +// .category +// ... var Action = module.Action = function Action(name, doc, ldoc, func){ @@ -462,7 +466,8 @@ function Actions(a, b){ var args = obj[k] // skip non-arrays... - if(args.constructor !== Array + if(args == null + || args.constructor !== Array // and arrays the last element of which is not a function... || !(args[args.length-1] instanceof Function)){ return diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js index 979cacae..b864e0b6 100755 --- a/ui (gen4)/viewer.js +++ b/ui (gen4)/viewer.js @@ -28,7 +28,80 @@ var ribbons = require('ribbons') var Client = module.Client = actions.Actions({ + + config: { + 'steps-to-change-direction': 3, + }, + + // basic state... + // NOTE: the setters in the following use the appropriate actions + // so to avoid recursion do not use these in the specific + // actions... + get base(){ + return this.data == null ? null : this.data.base + }, + set base(value){ + this.setBaseRibbon(value) + }, + + get current(){ + return this.data == null ? null : this.data.current + }, + set current(value){ + this.focusImage(value) + }, + + get currentRibbon(){ + return this.data == null ? null : this.data.getRibbon() + }, + set currentRibbon(value){ + this.focusRibbon(value) + }, + + // default direction + // + // NOTE: the system has inertial direction change, after >N steps of + // movement in one direction it takes N steps to reverse the + // default direction. + // the number of steps (N) is set in: + // .config['steps-to-change-direction'] + // NOTE: to force direction change append a '!' to the direction. + // NOTE: values other than 'left'/'right' are ignored... + get direction(){ + return this._direction >= 0 ? 'right' + : this._direction < 0 ? 'left' + : 'right' + }, + set direction(value){ + // force direction change... + if(value.slice(-1) == '!'){ + this._direction = value == 'left!' ? -1 + : value == 'right!' : 0 + : this._direction + + // 'update' direction... + } else { + value = value == 'left' ? -1 + : value == 'right' : 1 + : 0 + var d = (this._direction || 0) + value + var s = this.config['steps-to-change-direction'] + s = s < 1 ? 1 : s + // cap the direction value between -s and s-1... + // NOTE: we use s-1 instead of s as 0/null is a positive + // direction... + d = d >= s ? s-1 : d + d = d < -s ? -s : d + this._direction = d + } + } + + // basic life-cycle actions... + ready: [ + function(){ + // XXX setup empty state... + }], load: [ function(d){ this.data = data.Data(d.data) @@ -39,6 +112,7 @@ actions.Actions({ }], + // basic navigation... focusImage: ['Focus image', function(img){ this.data.focusImage(img) @@ -53,6 +127,8 @@ actions.Actions({ this.focusImage(t, r) }], + setBaseRibbon: ['', + function(target){ this.data.setBase(target) }], // shorthands for .focusImage(..) and .focusRibbon(..)... firstImage: ['Focus first image in current ribbon', @@ -61,9 +137,17 @@ actions.Actions({ function(){ this.focusImage('last') }], prevImage: ['Focus previous image', - function(){ this.focusImage('prev') }], + function(){ + // keep track of traverse direction... + this.direction = 'left' + this.focusImage('prev') + }], nextImage: ['Focus next image', - function(){ this.focusImage('next') }], + function(){ + // keep track of traverse direction... + this.direction = 'right' + this.focusImage('next') + }], firstRibbon: ['Focus previous ribbon', function(){ this.focusRibbon('fisrt') }], @@ -75,25 +159,120 @@ actions.Actions({ nextRibbon: ['Focus next ribbon', function(){ this.focusRibbon('after') }], + + // basic editing... + // + // NOTE: for all of these, current/ribbon image is a default... + // + // XXX move this out to a mixin... + shiftImageUp: ['Shift image up', + 'If implicitly shifting current image (i.e. no arguments), focus ' + +'will shift to the next or previous image in the current ' + +'ribbon depending on current direction.', + function(target){ + // by default we need to update the current position... + if(target == null){ + var direction = this.direction == 'right' ? 'next' : 'prev' + + var cur = this.data.getImage() + var next = this.data.getImage(direction) + + this.data.shiftImageUp(cur) + this.focusImage(next) + + // if a specific target is given, just shift it... + } else { + this.data.shiftImageUp(target) + } + }], + shiftImageDown: ['Shift image down', + function(target){ + // by default we need to update the current position... + if(target == null){ + var direction = this.direction == 'right' ? 'next' : 'prev' + + var cur = this.data.getImage() + var next = this.data.getImage(direction) + + this.data.shiftImageDown(cur) + this.focusImage(next) + + // if a specific target is given, just shift it... + } else { + this.data.shiftImageDown(target) + } + }], + shiftImageUpNewRibbon: ['', + function(target){ + this.data.newRibbon(target) + this.shiftImageUp(target) + }], + shiftImageDownNewRibbon: ['', + function(target){ + this.data.newRibbon(target, 'below') + this.shiftImageUp(target) + }], + // XXX is tracking direction here correct??? + shiftImageLeft: ['', + function(target){ + if(target == null){ + this.direction = 'left' + } + this.data.shiftImageLeft(target) + // XXX is this the right way to go/??? + this.focusImage() + }], + // XXX is tracking direction here correct??? + shiftImageRight: ['', + function(target){ + if(target == null){ + this.direction = 'right' + } + this.data.shiftImageLeft(target) + // XXX is this the right way to go/??? + this.focusImage() + }], + + shiftRibbonUp: ['', + function(target){ + this.data.shiftRibbonUp(target) + // XXX is this the right way to go/??? + this.focusImage() + }], + shiftRibbonDown: ['', + function(target){ + this.data.shiftRibbonDown(target) + // XXX is this the right way to go/??? + this.focusImage() + }], }) + // XXX do partial loading... var Viewer = module.Viewer = actions.Actions(Client, { + + ready: [ + function(){ + // XXX setup empty state... + }], load: [ function(data){ - // recycle the viewer... + // recycle the viewer if one is not given specifically... var viewer = data.viewer viewer = viewer == null && this.ribbons != null ? this.ribbons.viewer : viewer + // XXX do we need to recycle the images??? this.ribbons = ribbons.Ribbons(viewer, data.images) return function(){ // XXX do a partial load... + // XXX + this.ribbons.updateData(this.data) this.focusImage() } @@ -155,14 +334,58 @@ actions.Actions(Client, { } } }], + setBaseRibbon: ['', + function(target){ + var r = this.data.getRibbon(target) + r = r == null ? this.ribbons.getRibbon(target) : r + this.ribbons.setBaseRibbon(r) + }], // XXX prevScreen: ['Focus previous image one screen width away', function(){ + // XXX }], // XXX nextScreen: ['Focus next image one screen width away', function(){ + // XXX + }], + + + // XXX + shiftImageUp: [ + function(){ + // XXX + }], + shiftImageDown: [ + function(){ + // XXX + }], + shiftImageUpNewRibbon: [ + function(){ + // XXX + }], + shiftImageDownNewRibbon: [ + function(){ + // XXX + }], + shiftImageLeft: [ + function(){ + // XXX + }], + shiftImageRight: [ + function(){ + // XXX + }], + + shiftRibbonUp: [ + function(){ + // XXX + }], + shiftRibbonDown: [ + function(){ + // XXX }], })