mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
added renderer template + more cleanup and notes...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
d9b3942469
commit
3810dccfda
123
ui (gen4)/features/_ui-render.js
Executable file
123
ui (gen4)/features/_ui-render.js
Executable file
@ -0,0 +1,123 @@
|
||||
/**********************************************************************
|
||||
*
|
||||
*
|
||||
*
|
||||
**********************************************************************/
|
||||
((typeof define)[0]=='u'?function(f){module.exports=f(require)}:define)
|
||||
(function(require){ var module={} // make module AMD/node compatible...
|
||||
/*********************************************************************/
|
||||
|
||||
var object = require('lib/object')
|
||||
var actions = require('lib/actions')
|
||||
var features = require('lib/features')
|
||||
|
||||
var core = require('features/core')
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
var RenderActions = actions.Actions({
|
||||
load: [
|
||||
function(){
|
||||
// XXX
|
||||
}],
|
||||
reload: [
|
||||
function(){
|
||||
// XXX
|
||||
}],
|
||||
refresh: [
|
||||
function(){
|
||||
// XXX
|
||||
}],
|
||||
clear: [
|
||||
function(){
|
||||
// XXX
|
||||
}],
|
||||
|
||||
resizing: [
|
||||
core.notUserCallable(function(unit, size, overflow){
|
||||
// This is a resizing protocol root function.
|
||||
//
|
||||
// This will never be used directly, but will wrap protocol user
|
||||
// functions.
|
||||
//
|
||||
// As an example see: .viewScale(..)
|
||||
|
||||
// XXX stop current animation...
|
||||
// XXX
|
||||
|
||||
// XXX call .resizingDone(..) when animations done...
|
||||
// XXX
|
||||
})],
|
||||
|
||||
viewScale: ['- Zoom/',
|
||||
function(scale){
|
||||
if(scale == null || scale == '?'){
|
||||
return // XXX get scale...
|
||||
}
|
||||
|
||||
this.resizing.chainCall(this, function(){
|
||||
// XXX set scale...
|
||||
}, 'scale', scale)
|
||||
}],
|
||||
fitImage: ['Zoom/Fit image',
|
||||
function(count, overflow){
|
||||
if(count == '?'){
|
||||
return // XXX get size...
|
||||
}
|
||||
|
||||
this.resizing.chainCall(this, function(){
|
||||
// XXX
|
||||
}, 'screenwidth', count, overflow)
|
||||
}],
|
||||
fitRibbon: ['Zoom/Fit ribbon vertically',
|
||||
function(count, whole){
|
||||
if(count == '?'){
|
||||
return // XXX get size...
|
||||
}
|
||||
|
||||
this.resizing.chainCall(this, function(){
|
||||
// XXX set size...
|
||||
}, 'screenheight', count, whole)
|
||||
}],
|
||||
|
||||
centerImage: ['- Interface/Center an image in ribbon horizontally',
|
||||
function(target, align, offset, scale){
|
||||
// XXX
|
||||
}],
|
||||
centerRibbon: ['- Interface/Center a ribbon vertically',
|
||||
function(target){
|
||||
// XXX
|
||||
}],
|
||||
|
||||
ribbonRotation: ['- Interface|Ribbon/',
|
||||
function(angle){
|
||||
// XXX
|
||||
}],
|
||||
})
|
||||
|
||||
var Render =
|
||||
module.Render = core.ImageGridFeatures.Feature({
|
||||
title: '',
|
||||
doc: '',
|
||||
|
||||
// XXX
|
||||
tag: 'ui-xxx-render',
|
||||
exclusive: ['ui-render'],
|
||||
depends: [
|
||||
// XXX
|
||||
],
|
||||
|
||||
actions: RenderActions,
|
||||
|
||||
handlers: [
|
||||
// XXX
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* vim:set ts=4 sw=4 : */ return module })
|
||||
@ -15,31 +15,86 @@ var core = require('features/core')
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
var ViewerClassPrototype = {
|
||||
}
|
||||
|
||||
|
||||
var ViewerPrototype = {
|
||||
sync: function(){
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
var Viewer =
|
||||
module.Viewer =
|
||||
object.makeConstructor('Viewer',
|
||||
ViewerClassPrototype,
|
||||
ViewerPrototype)
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
|
||||
var ReactActions = actions.Actions({
|
||||
get viewer(){
|
||||
},
|
||||
load: [
|
||||
function(){
|
||||
// XXX
|
||||
}],
|
||||
reload: [
|
||||
function(){
|
||||
// XXX
|
||||
}],
|
||||
refresh: [
|
||||
function(){
|
||||
// XXX
|
||||
}],
|
||||
clear: [
|
||||
function(){
|
||||
// XXX
|
||||
}],
|
||||
|
||||
resizing: [
|
||||
core.notUserCallable(function(unit, size, overflow){
|
||||
// This is a resizing protocol root function.
|
||||
//
|
||||
// This will never be used directly, but will wrap protocol user
|
||||
// functions.
|
||||
//
|
||||
// As an example see: .viewScale(..)
|
||||
|
||||
// XXX stop current animation...
|
||||
// XXX
|
||||
|
||||
// XXX call .resizingDone(..) when animations done...
|
||||
// XXX
|
||||
})],
|
||||
|
||||
viewScale: ['- Zoom/',
|
||||
function(scale){
|
||||
if(scale == null || scale == '?'){
|
||||
return // XXX get scale...
|
||||
}
|
||||
|
||||
this.resizing.chainCall(this, function(){
|
||||
// XXX set scale...
|
||||
}, 'scale', scale)
|
||||
}],
|
||||
fitImage: ['Zoom/Fit image',
|
||||
function(count, overflow){
|
||||
if(count == '?'){
|
||||
return // XXX get size...
|
||||
}
|
||||
|
||||
this.resizing.chainCall(this, function(){
|
||||
// XXX
|
||||
}, 'screenwidth', count, overflow)
|
||||
}],
|
||||
fitRibbon: ['Zoom/Fit ribbon vertically',
|
||||
function(count, whole){
|
||||
if(count == '?'){
|
||||
return // XXX get size...
|
||||
}
|
||||
|
||||
this.resizing.chainCall(this, function(){
|
||||
// XXX set size...
|
||||
}, 'screenheight', count, whole)
|
||||
}],
|
||||
|
||||
centerImage: ['- Interface/Center an image in ribbon horizontally',
|
||||
function(target, align, offset, scale){
|
||||
// XXX
|
||||
}],
|
||||
centerRibbon: ['- Interface/Center a ribbon vertically',
|
||||
function(target){
|
||||
// XXX
|
||||
}],
|
||||
|
||||
ribbonRotation: ['- Interface|Ribbon/',
|
||||
function(angle){
|
||||
// XXX
|
||||
}],
|
||||
})
|
||||
|
||||
var React =
|
||||
@ -55,7 +110,9 @@ module.React = core.ImageGridFeatures.Feature({
|
||||
|
||||
actions: ReactActions,
|
||||
|
||||
handlers: [],
|
||||
handlers: [
|
||||
// XXX
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
|
||||
@ -329,6 +329,7 @@ actions.Actions({
|
||||
}
|
||||
}],
|
||||
|
||||
|
||||
// Zoom/scale protocol...
|
||||
resizing: [
|
||||
core.notUserCallable(function(unit, size, overflow){
|
||||
@ -586,7 +587,7 @@ core.ImageGridFeatures.Feature({
|
||||
|
||||
// XXX try using .ribbons.resizeRibbon(..) for basic tasks...
|
||||
// XXX try a strategy: load more in the direction of movement by an offset...
|
||||
// XXX updateRibbon(..) is not signature compatible with data.updateRibbon(..)
|
||||
// XXX .updateRibbon(..) is not signature compatible with data.updateRibbon(..)
|
||||
var PartialRibbonsActions =
|
||||
actions.Actions({
|
||||
config: {
|
||||
@ -686,14 +687,6 @@ actions.Actions({
|
||||
}],
|
||||
})
|
||||
|
||||
// NOTE: I do not fully understand it yet, but PartialRibbons must be
|
||||
// setup BEFORE RibbonAlignToFirst, otherwise the later will break
|
||||
// on shifting an image to a new ribbon...
|
||||
// To reproduce:
|
||||
// - setupe RibbonAlignToFirst first
|
||||
// - go to top ribbon
|
||||
// - shift image up
|
||||
// XXX The two should be completely independent.... (???)
|
||||
var PartialRibbons =
|
||||
module.PartialRibbons =
|
||||
core.ImageGridFeatures.Feature({
|
||||
|
||||
@ -51,20 +51,6 @@ var base = require('features/base')
|
||||
// This requires a 'ui-render' family feature to be present
|
||||
//
|
||||
// Expected render API is:
|
||||
// Center image horizontally...
|
||||
// .centerImage(target, align, offset, scale){
|
||||
// -> this
|
||||
//
|
||||
// Center ribbon vertically...
|
||||
// .centerRibbon(target)
|
||||
// -> this
|
||||
//
|
||||
// Get/set ribbon rotation...
|
||||
// .ribbonRotation()
|
||||
// -> angle
|
||||
// .ribbonRotation(angle)
|
||||
// -> this
|
||||
//
|
||||
// Get/set view scale...
|
||||
// .viewScale()
|
||||
// .viewScale('?')
|
||||
@ -84,6 +70,20 @@ var base = require('features/base')
|
||||
// .fitRibbon(count, whole)
|
||||
// -> this
|
||||
//
|
||||
// Center image horizontally...
|
||||
// .centerImage(target, align, offset, scale){
|
||||
// -> this
|
||||
//
|
||||
// Center ribbon vertically...
|
||||
// .centerRibbon(target)
|
||||
// -> this
|
||||
//
|
||||
// Get/set ribbon rotation...
|
||||
// .ribbonRotation()
|
||||
// -> angle
|
||||
// .ribbonRotation(angle)
|
||||
// -> this
|
||||
//
|
||||
// Expected render events:
|
||||
// Pre/post wrap the resize animation...
|
||||
// .resizing(unit, size, overflow)
|
||||
@ -626,18 +626,18 @@ module.ViewerActions = actions.Actions({
|
||||
// NOTE: these are here for documentation purpose...
|
||||
//
|
||||
// XXX should these check if they are a base feature and if so err???
|
||||
centerImage: ['- Interface/Center an image in ribbon horizontally',
|
||||
function(target, align, offset, scale){ }],
|
||||
centerRibbon: ['- Interface/Center a ribbon vertically',
|
||||
function(target){ }],
|
||||
ribbonRotation: ['- Interface|Ribbon/',
|
||||
function(angle){ }],
|
||||
viewScale: ['- Zoom/',
|
||||
function(scale){ }],
|
||||
fitImage: ['Zoom/Fit image',
|
||||
function(count, overflow){ }],
|
||||
fitRibbon: ['Zoom/Fit ribbon vertically',
|
||||
function(count, whole){ }],
|
||||
centerImage: ['- Interface/Center an image in ribbon horizontally',
|
||||
function(target, align, offset, scale){ }],
|
||||
centerRibbon: ['- Interface/Center a ribbon vertically',
|
||||
function(target){ }],
|
||||
ribbonRotation: ['- Interface|Ribbon/',
|
||||
function(angle){ }],
|
||||
})
|
||||
|
||||
var Viewer =
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user