some work on actions, API unification between data and ribbons (in progress) and some helpers and experimentation...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2014-08-01 19:20:11 +04:00
parent 8875b75208
commit 0c9ba92964
4 changed files with 139 additions and 15 deletions

View File

@ -15,11 +15,17 @@ console.log('>>> actions')
// arguments for actions (a-la jQuery collections): // arguments for actions (a-la jQuery collections):
// //
// Image - current image // Image - current image
// Images - all images // .next(<offset> | 'all')
// .prev(..)
// Ribbon - ribbon or ribbon images // Ribbon - ribbon or ribbon images
// .next(..)
// .prev(..)
//
// Images - all images
// Marked - marked images // Marked - marked images
// Bookmarked - bookmarked images // Bookmarked - bookmarked images
// //
//
// NOTE: these can also beused as a basis for actions... // NOTE: these can also beused as a basis for actions...
// //
// //
@ -35,12 +41,14 @@ function(context, name, args){
: null : null
var jQuery = typeof(jQuery) != 'undefined' ? jQuery : null var jQuery = typeof(jQuery) != 'undefined' ? jQuery : null
// jQuery event...
if(typeof(context) == typeof('str') if(typeof(context) == typeof('str')
|| (jq_object != null || (jq_object != null
&& context instanceof jQuery)){ && context instanceof jQuery)){
var c = $(context) var c = $(context)
.trigger(name, args) .trigger(name, args)
// node event...
} else if(EventEmitter != null && context instanceof EventEmitter){ } else if(EventEmitter != null && context instanceof EventEmitter){
var c = context var c = context
.emit.apply(context, [name].concat(args)) .emit.apply(context, [name].concat(args))
@ -129,6 +137,37 @@ function Actions(context, names, actions, mode){
/*********************************************************************/
//
// Action variables:
//
// SCREEN_IMAGES
// - screen width in images
// - resolves to number
//
// CURRENT
// - current image
// - resolves to gid
// - support basic math: +/-
// e.g. CURRENT + 1 ~ next image
//
// RIBBON
// - current ribbon
// - resolves to gid
// - support basic math: +/-
//
// BASE
// - base ribbon
// - resolves to gid
// - support basic math: +/-
//
//
// XXX add action variables!!!
var SCREEN_IMAGES = null
/*********************************************************************/ /*********************************************************************/
// XXX need a way to define compound actions... // XXX need a way to define compound actions...
@ -169,12 +208,17 @@ module.BASE_ACTIONS = {
// crop... // crop...
// XXX should this be here on in a crop pligin... // XXX should this be here on in a crop pligin...
cropRibbon: '', cropRibbon: '',
uncropView: '', cropCurrentRibbonAndAbove: '',
uncropAll: '', uncropView: 'Uncrop to previous crop',
uncropAll: 'Uncrop to base',
uncropViewAndKeepOrder:
'Uncrop view to previous crop, keeping current image order',
uncropAllAndKeepOrder: 'Uncrop to base, keeping current image order',
openURL: '', openURL: '',
//openHistory: '', //openHistory: '',
saveOrder: '',
saveState: '', saveState: '',
exportImages: '', exportImages: '',
@ -195,14 +239,19 @@ function setupBaseActions(context, actions){
var UI_ACTIONS = var UI_ACTIONS =
module.UI_ACTIONS = { module.UI_ACTIONS = {
// basic navigation... focusImage: '',
nextImage: 'Focus next image in current ribbon', focusRibbon: '',
nextRibbon: 'Focus next ribbon (down)',
nextScreen: 'Show next screen width of images',
prevImage: 'Focus previous image in current ribbon', // basic navigation...
prevRibbon: 'Focus previous ribbon (up)', nextImage: ['Focus next image in current ribbon', { focusImage: 'next' }],
prevScreen: 'Show previous screen width of images', nextRibbon: ['Focus next ribbon (down)', { focusRibbon: 'next' }],
// XXX actions vars...
nextScreen: ['Show next screen width of images', { focusImage: SCREEN_IMAGES }],
prevImage: ['Focus previous image in current ribbon', { focusImage: 'prev' }],
prevRibbon: ['Focus previous ribbon (up)', { focusRibbon: 'prev' }],
// XXX actions vars...
prevScreen: ['Show previous screen width of images', { focusImage: -SCREEN_IMAGES }],
firstImage: 'Focus first image in ribbon', firstImage: 'Focus first image in ribbon',
lastImage: 'Focus last image in ribbon', lastImage: 'Focus last image in ribbon',
@ -238,10 +287,10 @@ module.UI_ACTIONS = {
toggleTheme: 'Toggle themes', toggleTheme: 'Toggle themes',
// dialogs... // dialogs...
// XXX move to specific blocks...
openDialog: 'Show open diaolg', openDialog: 'Show open diaolg',
historyDialog: 'Show history dialog', historyDialog: 'Show history dialog',
cropDialog: 'Show crop dialog', cropDialog: 'Show crop dialog',
markDialog: 'Show mark dialog',
// panels... // panels...
togglePanels: '', togglePanels: '',
@ -290,6 +339,10 @@ module.MARKS_ACTIONS = {
invertMarkedRibbon: '', invertMarkedRibbon: '',
invertMarkedAll: '', invertMarkedAll: '',
// placing...
placeMarkedAfter: 'Place marked images after current',
placeMarkedBefore: 'Place marked images before current',
shiftMarkedUp: '', shiftMarkedUp: '',
shiftMarkedDown: '', shiftMarkedDown: '',
shiftMarkedLeft: '', shiftMarkedLeft: '',
@ -299,6 +352,9 @@ module.MARKS_ACTIONS = {
cropMarkedImages: '', cropMarkedImages: '',
cropMarkedImagesToSingleRibbon: '', cropMarkedImagesToSingleRibbon: '',
markDialog: 'Show mark dialog',
placeMarkedDialog: '',
} }
var setupMarksActions = var setupMarksActions =

View File

@ -372,7 +372,7 @@ module.DataPrototype = {
if(target in this.ribbons || target.constructor.name == 'Array'){ if(target in this.ribbons || target.constructor.name == 'Array'){
list = target list = target
target = this.current target = this.current
} else if(target == 'before' || target == 'after'){ } else if(['before', 'after', 'next', 'prev'].indexOf(target) >= 0){
list = mode list = mode
mode = target mode = target
target = this.current target = this.current
@ -419,10 +419,10 @@ module.DataPrototype = {
} }
// prepare for the search... // prepare for the search...
if(mode == 'before'){ if(mode == 'before' || mode == 'prev'){
var step = -1 var step = -1
} else if(mode == 'after'){ } else if(mode == 'after' || mode == 'next'){
var step = 1 var step = 1
// strict -- no hit means there is no point in searching... // strict -- no hit means there is no point in searching...
@ -1470,6 +1470,15 @@ Data.prototype.constructor = Data
/*********************************************************************/
// XXX keep this here or move this to a different module???
module.setupActionHandlers = function(context){
// XXX
}
/********************************************************************** /**********************************************************************
* vim:set ts=4 sw=4 : */ * vim:set ts=4 sw=4 : */
return module }) return module })

View File

@ -508,6 +508,15 @@ Images.prototype.constructor = Images
/*********************************************************************/
// XXX keep this here or move this to a different module???
module.setupActionHandlers = function(context){
// XXX
}
/********************************************************************** /**********************************************************************
* vim:set ts=4 sw=4 : */ * vim:set ts=4 sw=4 : */
return module }) return module })

View File

@ -1,6 +1,6 @@
/********************************************************************** /**********************************************************************
* *
* Minomal UI API... * Minimal UI API...
* *
* *
**********************************************************************/ **********************************************************************/
@ -23,6 +23,39 @@ var IMAGE_UPDATERS =
module.IMAGE_UPDATERS = [] module.IMAGE_UPDATERS = []
/*********************************************************************/
// XXX add inheritance...
var makeObject =
module.makeObject =
function makeObject(name, cls, obj){
// NOTE: we are using eval here to name the function correctly as
// simply assigning .name does not work...
// XXX think of a cleaner way...
eval(('var O = function ${NAME}(){'
+' if(this.constructor.name != name){'
+' return new (Function.prototype.bind.apply('
+' ${NAME},'
+' arguments.length == 1 ? [null, arguments[0]]'
+' : [null].concat(Array.apply(null, arguments))))'
+' }'
+''
+' if(this.__init__ != null){'
+' this.__init__.apply(this, arguments)'
+' }'
+''
+' return this'
+'}').replace(/\${NAME}/g, name))
O.__proto__ = cls == null ? {} : cls
O.prototype = obj == null ? {} : obj
O.prototype.constructor = O
return O
}
/*********************************************************************/ /*********************************************************************/
// //
// This expects the following HTML structure... // This expects the following HTML structure...
@ -1161,6 +1194,23 @@ 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){
ribbons.alignRibbon(ribbons.focusImage(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 : */ * vim:set ts=4 sw=4 : */
return module }) return module })