some refactoring and preparing for more...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-05-17 04:53:00 +03:00
parent 5762735766
commit 0ac1d5a523
10 changed files with 153 additions and 125 deletions

View File

@ -15,12 +15,39 @@ var core = require('features/core')
/*********************************************************************/
var RibbonsClassPrototype = {
}
var RibbonsPrototype = {
getImage: function(){
// XXX
},
getImageByPosition: function(){
// XXX
},
getRibbon: function(){
// XXX
},
}
var Ribbons =
module.Ribbons =
object.makeConstructor('Ribbons',
RibbonsClassPrototype,
RibbonsPrototype)
/*********************************************************************/
var RenderActions = actions.Actions({
load: [
function(){
// XXX
// XXX setup .ribbons
}],
reload: [
function(){

View File

@ -70,7 +70,7 @@ module.Clickable = core.ImageGridFeatures.Feature({
// this will prevent double clicks...
x = null
y = null
that.focusImage(that.ribbons.getElemGID($(this)))
that.focusImage(that.ribbons.elemGID($(this)))
last = Date.now()
}
})
@ -190,11 +190,11 @@ module.DirectControlHammer = core.ImageGridFeatures.Feature({
// silently focus central image...
if(that.config['focus-central-image'] == 'silent'){
that.data.current = that.ribbons.getElemGID(central)
that.data.current = that.ribbons.elemGID(central)
// focus central image in a normal manner...
} else if(that.config['focus-central-image']){
that.focusImage(that.ribbons.getElemGID(central))
that.focusImage(that.ribbons.elemGID(central))
}
setTimeout(function(){

View File

@ -45,7 +45,7 @@ var PartialRibbonsActions = actions.Actions({
updateRibbon: ['- Interface/Update partial ribbon size',
function(target, w, size, threshold, preload){
target = target instanceof jQuery
? this.ribbons.getElemGID(target)
? this.ribbons.elemGID(target)
// NOTE: data.getImage(..) can return null at start or end
// of ribbon, thus we need to account for this...
: (this.data.getImage(target)

View File

@ -109,7 +109,7 @@ var PreCacheActions = actions.Actions({
preCacheJumpTargets: ['- Interface/Pre-cache potential jump target images',
function(target, sources, radius, size){
target = target instanceof jQuery
? this.ribbons.getElemGID(target)
? this.ribbons.elemGID(target)
// NOTE: data.getImage(..) can return null at start or end
// of ribbon, thus we need to account for this...
: (this.data.getImage(target)

View File

@ -61,8 +61,7 @@ var Ribbons = {
restoreTransitions: null,
noTransitions: null,
noTransitionsDeep: null,
getElemGID: null,
setElemGID: null,
elemGID: null,
replaceGid: null,
makeShadow: null,
@ -518,7 +517,7 @@ var PartialRibbonsActions = actions.Actions({
updateRibbon: ['- Interface/Update partial ribbon size',
function(target, w, size, threshold){
target = target instanceof jQuery
? this.ribbons.getElemGID(target)
? this.ribbons.elemGID(target)
// NOTE: data.getImage(..) can return null at start or end
// of ribbon, thus we need to account for this...
: (this.data.getImage(target)

View File

@ -32,10 +32,10 @@ function updateImagePosition(actions, target){
target = target || actions.current
target = target instanceof jQuery
? actions.ribbons.getElemGID(target)
? actions.ribbons.elemGID(target)
: target
var source_ribbon = actions.ribbons.getElemGID(actions.ribbons.getRibbon(target))
var source_ribbon = actions.ribbons.elemGID(actions.ribbons.getRibbon(target))
var source_order = actions.data.getImageOrder(target)
return function(){
@ -106,18 +106,6 @@ actions.Actions({
return this.ribbons ? this.ribbons.viewer : undefined },
// NOTE: this expects that ribbons will maintain .parent.images...
// NOTE: when getting rid of ribbons need to also remove the .parent
// reference...
// XXX remove...
get ribbons(){
return this.__ribbons },
set ribbons(ribbons){
this.__ribbons = ribbons
ribbons.parent = this
},
load: [
function(data){
return function(){
@ -283,7 +271,7 @@ actions.Actions({
centerImage: ['- Interface/Center an image in ribbon horizontally',
function(target, align, offset, scale){
target = target instanceof jQuery
? this.ribbons.getElemGID(target)
? this.ribbons.elemGID(target)
: target
// align current ribbon...
@ -292,7 +280,7 @@ actions.Actions({
centerRibbon: ['- Interface/Center a ribbon vertically',
function(target){
target = target instanceof jQuery
? this.ribbons.getElemGID(target)
? this.ribbons.elemGID(target)
: target
// align current ribbon...
@ -323,7 +311,7 @@ actions.Actions({
t = t.eq(direction == 'before' ? 0 : 1)
}
t = ribbons.getElemGID(t)
t = ribbons.elemGID(t)
this.focusImage(t, r)
}
@ -612,7 +600,7 @@ actions.Actions({
updateRibbon: ['- Interface/Update partial ribbon size',
function(target, w, size, threshold){
target = target instanceof jQuery
? this.ribbons.getElemGID(target)
? this.ribbons.elemGID(target)
// NOTE: data.getImage(..) can return null at start or end
// of ribbon, thus we need to account for this...
: (this.data.getImage(target)

View File

@ -18,28 +18,6 @@ var core = require('features/core')
/*********************************************************************/
/*/ XXX
var ViewerClassPrototype = {
}
var ViewerPrototype = {
sync: function(){
},
}
var Viewer =
module.Viewer =
object.makeConstructor('Viewer',
ViewerClassPrototype,
ViewerPrototype)
//*/
//---------------------------------------------------------------------
//
// - take care of DOM construction and update...
// - alignment is done via .centerRibbon(..) / .centerImage(..)
// - preview updates (XXX)
@ -51,7 +29,7 @@ var VirtualDOMRibbonsClassPrototype = {
var VirtualDOMRibbonsPrototype = {
// XXX this is a circular ref -- I do not like it...
imagegrid: null,
parent: null,
dom: null,
vdom: null,
@ -77,23 +55,28 @@ var VirtualDOMRibbonsPrototype = {
},
restoreTransitions: function(){
},
getElemGID: function(){
elemGID: function(){
},
getImage: function(){
},
getImageByPosition: function(){
},
getRibbon: function(){
},
getVisibleImageSize: function(){
},
focusImage: function(){
},
px2vmin: function(){
},
// ...
// constructors...
makeView: function(state, initial){
state = state || {}
var that = this
var ig = this.imagegrid
var ig = this.parent
var target = state.target || ig.current
@ -133,7 +116,7 @@ var VirtualDOMRibbonsPrototype = {
makeRibbon: function(gid, target, count, state, initial){
state = state || {}
var that = this
var ig = this.imagegrid
var ig = this.parent
var current = ig.current
target = target || state.target || current
var size = this.state.tile_size = state.tile_size
@ -201,13 +184,13 @@ var VirtualDOMRibbonsPrototype = {
// XXX update image previews...
// XXX update image proportions for rotated images... (???)
makeImage: function(gid, size){
var ig = this.imagegrid
var ig = this.parent
//size = this.state.tile_size = size
size = size
|| this.state.tile_size
|| this.getVisibleImageSize('max')
var data = this.imagegrid.data
var images = this.imagegrid.images || {}
var data = this.parent.data
var images = this.parent.images || {}
var current = data.current == gid ? '.current' : ''
// resolve group preview cover...
@ -253,7 +236,7 @@ var VirtualDOMRibbonsPrototype = {
makeImageMarks: function(gid){
var that = this
var marks = []
var tags = this.imagegrid.data.getTags(gid)
var tags = this.parent.data.getTags(gid)
// XXX STUB: make this extensible...
tags.indexOf('bookmark') >= 0
@ -312,7 +295,7 @@ var VirtualDOMRibbonsPrototype = {
this.sync()
} else {
return this.imagegrid.scale
return this.parent.scale
}
},
@ -349,7 +332,7 @@ var VirtualDOMRibbonsPrototype = {
if(this.vdom == null){
var n = this.vdom = this.makeView(state, true)
var v = vdom.create(n)
this.imagegrid.dom.append(v)
this.parent.dom.append(v)
this.dom = v
// patch state...
@ -375,8 +358,8 @@ var VirtualDOMRibbonsPrototype = {
.sync()
},
__init__: function(imagegrid){
this.imagegrid = imagegrid
__init__: function(parent){
this.parent = parent || this.parent
},
}
@ -388,9 +371,7 @@ object.makeConstructor('VirtualDOMRibbons',
/*********************************************************************/
//---------------------------------------------------------------------
var VirtualDomActions = actions.Actions({
@ -398,10 +379,8 @@ var VirtualDomActions = actions.Actions({
return this.__dom },
set dom(value){
this.__dom = value},
get virtualdom(){
return (this.__virtual_dom = this.__virtual_dom || VirtualDOMRibbons(this)) },
// XXX setup .ribbons...
load: [
function(data){
return function(){
@ -411,9 +390,10 @@ var VirtualDomActions = actions.Actions({
if(this.dom == null){
this.dom = viewer
this.ribbons = new VirtualDOMRibbons()
} else {
this.virtualdom.clear()
this.ribbons.clear()
}
this.reload()
@ -421,13 +401,13 @@ var VirtualDomActions = actions.Actions({
}],
reload: ['Interface/Reload viewer',
function(){
this.virtualdom.reset()
this.ribbons.reset()
this.focusImage()
}],
// XXX this ignores it's args...
refresh: ['Interface/Refresh images without reloading',
function(gids, scale){
this.virtualdom.sync()
this.ribbons.sync()
this.focusImage()
}],
@ -436,7 +416,7 @@ var VirtualDomActions = actions.Actions({
updateRibbon: ['- Interface/Update partial ribbon size',
function(target, w, size, threshold){
target = target instanceof jQuery
? this.virtualdom.getElemGID(target)
? this.ribbons.elemGID(target)
// NOTE: data.getImage(..) can return null at start or end
// of ribbon, thus we need to account for this...
: (this.data.getImage(target)
@ -452,7 +432,7 @@ var VirtualDomActions = actions.Actions({
// XXX for some reason this does not set the .current class
// on the right image...
this.virtualdom.sync(target, size)
this.ribbons.sync(target, size)
// XXX HACK: this fixes a bug in virtual-dom where .current
// is not synced correctly...
@ -460,7 +440,7 @@ var VirtualDomActions = actions.Actions({
// manually, dom gets diffed and no change is detected
// then the object gets recycled and the .current class
// ends up on a different element...
this.virtualdom.focusImage(target)
this.ribbons.focusImage(target)
this.centerViewer(target)
}],
@ -481,14 +461,14 @@ module.VirtualDom = core.ImageGridFeatures.Feature({
handlers: [
['clear',
function(){ this.virtualdom.clear() }],
function(){ this.ribbons.clear() }],
['fitImage toggleSingleImage',
function(){ delete this.virtualdom.state.tile_size }],
function(){ delete this.ribbons.state.tile_size }],
// XXX account for fast navigation...
['focusImage.pre',
function(target){
var img = this.virtualdom.getImage(target)
var img = this.ribbons.getImage(target)
// in-place update...
if(img.length > 0){
@ -497,7 +477,7 @@ module.VirtualDom = core.ImageGridFeatures.Feature({
if(!this.__partial_ribbon_update){
this.__partial_ribbon_update = setTimeout((function(){
delete this.__partial_ribbon_update
this.virtualdom.preventTransitions()
this.ribbons.preventTransitions()
this
.updateRibbon(this.current)
@ -506,7 +486,7 @@ module.VirtualDom = core.ImageGridFeatures.Feature({
// thus missing the base call...
.alignRibbons(null, null, true)
this.virtualdom.restoreTransitions()
this.ribbons.restoreTransitions()
}).bind(this), 150)
}
@ -526,7 +506,7 @@ module.VirtualDom = core.ImageGridFeatures.Feature({
'toggleMark',
'toggleBookmark',
//], function(){ this.updateRibbon() }],
], function(){ this.virtualdom.sync() }],
], function(){ this.ribbons.sync() }],
],
})

View File

@ -1396,7 +1396,7 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({
event.preventDefault()
event.stopPropagation()
var g = gid || that.ribbons.getElemGID(img)
var g = gid || that.ribbons.elemGID(img)
that
.focusImage(g)
@ -1867,7 +1867,7 @@ var WidgetTestActions = actions.Actions({
if(cur && next && cur.birthtime.getMonth() != next.birthtime.getMonth()){
this.ribbons.getImageMarks(gid).filter('.partition').remove()
this.ribbons.getImage(gid)
.after(this.ribbons.setElemGID($('<div class="mark partition">'), gid)
.after(this.ribbons.elemGID($('<div class="mark partition">'), gid)
.attr('text', month[next.birthtime.getMonth()]))
}
}],

View File

@ -93,6 +93,24 @@ var base = require('features/base')
// .updateRibbon(target)
// -> this
//
// Generic .ribbons API (introspection):
// .ribbons.getImage(..)
// -> image
//
// .ribbons.getImageByPosition(..)
// -> image
//
// .ribbons.getRibbon(..)
// -> ribbon
//
// .ribbons.elemGID(..)
// -> gid
//
// XXX do we need these???
// .ribbons.focusImage(..)
// XXX Avoid using methods that expose specific non-generic structure:
// .ribbons.getRibbonSet(..)
// .ribbons.getRibbonLocator(..)
//
//
// Workspaces:
@ -189,6 +207,17 @@ module.ViewerActions = actions.Actions({
// Viewer dom...
dom: null,
// NOTE: this expects that ribbons will maintain .parent.images...
// NOTE: when getting rid of ribbons need to also remove the .parent
// reference...
get ribbons(){
return this.__ribbons },
set ribbons(ribbons){
this.__ribbons = ribbons
ribbons.parent = this
},
// Current image data...
//
get image(){
@ -1390,7 +1419,7 @@ var ControlActions = actions.Actions({
var handler = setup.handler = setup.handler
|| function(){
var img = $(event.target)
var gid = that.ribbons.getElemGID(img)
var gid = that.ribbons.elemGID(img)
// sanity check: only handle clicks on images...
if(!img.hasClass('image')){
@ -1483,7 +1512,7 @@ var ControlActions = actions.Actions({
makeRibbonVisible: ['- Interface/Make ribbon visible if it is off screen',
function(target, center_off_screen){
var r = this.ribbons.getRibbon(target)
var rgid = this.ribbons.getElemGID(r)
var rgid = this.ribbons.elemGID(r)
var central = this.ribbons.getImageByPosition('center', r)
@ -1595,7 +1624,7 @@ var ControlActions = actions.Actions({
var that = this
var r = this.ribbons.getRibbon(target)
var rgid = this.ribbons.getElemGID(r)
var rgid = this.ribbons.elemGID(r)
var data = false
var post_handlers
@ -1711,7 +1740,7 @@ var ControlActions = actions.Actions({
var current_ribbon = that.data.getRibbon()
if(current_ribbon == rgid){
var central = that.ribbons.getImageByPosition('center', r)
var gid = that.ribbons.getElemGID(central)
var gid = that.ribbons.elemGID(central)
// silently focus central image...
if(that.config['focus-central-image'] == 'silent'){
that.data.focusImage(gid)
@ -1815,7 +1844,7 @@ var ControlActions = actions.Actions({
var current_ribbon = that.data.getRibbon()
if(current_ribbon == rgid){
var central = that.ribbons.getImageByPosition('center', r)
var gid = that.ribbons.getElemGID(central)
var gid = that.ribbons.elemGID(central)
// silently focus central image...
if(that.config['focus-central-image'] == 'silent'){
that.data.focusImage(gid)
@ -1835,7 +1864,7 @@ var ControlActions = actions.Actions({
var that = this
var r = this.ribbons.getRibbon(target)
var rgid = this.ribbons.getElemGID(r)
var rgid = this.ribbons.elemGID(r)
// XXX vertical scroll...
this.dom

View File

@ -214,18 +214,24 @@ var RibbonsClassPrototype = {
px2vmax: function(px){ return this.px2v(px, 'vmax') },
// Generic getters...
getElemGID: function(elem){
return JSON.parse('"'
+ (elem instanceof jQuery ?
elem.attr('gid')
: elem.getAttribute('gid'))
+ '"')
},
setElemGID: function(elem, gid){
return $(elem)
.attr('gid', JSON.stringify(gid)
// this removes the extra quots...
.replace(/^"(.*)"$/g, '$1'))
elemGID: function(elem, gid){
// get gid...
return (gid == null || gid == '?') ?
JSON.parse('"'
+ (elem instanceof jQuery ?
elem.attr('gid')
: elem.getAttribute('gid'))
+ '"')
// remove gid...
: gid == '' ?
$(elem)
.removesAttr('gid')
// set gid...
: $(elem)
.attr('gid',
JSON.stringify(gid)
// this removes the extra quots...
.replace(/^"(.*)"$/g, '$1'))
},
// DOM Constructors...
@ -245,11 +251,11 @@ var RibbonsClassPrototype = {
return $(gids.map(function(gid){
gid = gid != null ? gid+'' : gid
return that.setElemGID($('<div>')
return that.elemGID($('<div>')
.addClass('ribbon'), gid)[0]
//return $('<div>')
// .addClass('ribbon-container')
// .append(that.setElemGID($('<div>')
// .append(that.elemGID($('<div>')
// .addClass('ribbon'), gid))[0]
}))
},
@ -260,13 +266,13 @@ var RibbonsClassPrototype = {
var that = this
return $(gids.map(function(gid){
gid = gid != null ? gid+'' : gid
return that.setElemGID($('<div>')
return that.elemGID($('<div>')
.addClass('image'), gid)[0]
}))
},
createMark: function(cls, gid){
gid = gid != null ? gid+'' : gid
return this.setElemGID($('<div class="mark">')
return this.elemGID($('<div class="mark">')
.addClass(cls), gid)
},
}
@ -317,8 +323,7 @@ var RibbonsPrototype = {
createMark: RibbonsClassPrototype.createMark,
// Generic getters...
getElemGID: RibbonsClassPrototype.getElemGID,
setElemGID: RibbonsClassPrototype.setElemGID,
elemGID: RibbonsClassPrototype.elemGID,
get parent(){
@ -712,7 +717,7 @@ var RibbonsPrototype = {
return function(){}
}
var gid = this.getElemGID(img)
var gid = this.elemGID(img)
var s = this.scale()
var vo = this.viewer.offset()
var io = img.offset()
@ -934,7 +939,7 @@ var RibbonsPrototype = {
getImageMarks: function(img, cls){
img = img || this.getImage()
gid = typeof(img) == typeof('str') ? img : null
gid = gid == null ? this.getElemGID(img) : gid
gid = gid == null ? this.elemGID(img) : gid
var marks = this.viewer.find('.mark[gid='+JSON.stringify(gid)+']')
@ -1316,14 +1321,14 @@ var RibbonsPrototype = {
var img = this.getImage(from)
img && img.length > 0
&& this.setElemGID(img, to)
&& this.elemGID(img, to)
return this
},
// XXX is .__image_updaters the right way to go???
updateImageIndicators: function(gid, image){
gid = gid == null ? this.getElemGID() : gid
gid = gid == null ? this.elemGID() : gid
image = image == null ? this.getImage() : $(image)
// collect marks...
@ -1406,7 +1411,7 @@ var RibbonsPrototype = {
if(image.length == 0){
return
}
var old_gid = that.getElemGID(image)
var old_gid = that.elemGID(image)
// same image -- update...
if(old_gid == gid || gid == null){
@ -1529,7 +1534,7 @@ var RibbonsPrototype = {
if(image.length == 0){
return
}
var old_gid = that.getElemGID(image)
var old_gid = that.elemGID(image)
var data = update[old_gid] = {
image: image,
attrs: {},
@ -1702,7 +1707,7 @@ var RibbonsPrototype = {
// align only if ref is loaded...
if(ref.length > 0){
var gid = this.getElemGID(ref)
var gid = this.elemGID(ref)
var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
var w = this.getVisibleImageSize('width', 1, ref) / W * 100
@ -1722,7 +1727,7 @@ var RibbonsPrototype = {
var unload_marks = []
loaded = loaded
.filter(function(i, img){
var g = that.getElemGID(img)
var g = that.elemGID(img)
if(gids.indexOf(g) >= 0){
return true
}
@ -1754,7 +1759,7 @@ var RibbonsPrototype = {
if(img.length == 0){
img = unloaded.length > 0
// reuse an image we just detached...
? that.setElemGID(unloaded.pop(), gid)
? that.elemGID(unloaded.pop(), gid)
// create a new image...
: that.createImage(gid)
}
@ -1762,7 +1767,7 @@ var RibbonsPrototype = {
// see of we are loaded in the right position...
// NOTE: loaded is maintained current later, thus it always
// contains a set of images representative of the ribbon...
var g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null
var g = loaded.length > i ? that.elemGID(loaded.eq(i)) : null
// check if we need to reattach the image...
if(gid != g){
@ -1811,7 +1816,7 @@ var RibbonsPrototype = {
// align only if ref is loaded...
if(ref.length > 0){
var gid = this.getElemGID(ref)
var gid = this.elemGID(ref)
var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
var w = this.getVisibleImageSize('width', 1, ref) / W * 100
@ -1836,14 +1841,14 @@ var RibbonsPrototype = {
var img = loaded.eq(i)
// cleanup marks...
var g = that.getElemGID(img)
var g = that.elemGID(img)
unload_marks = gids.indexOf(g) < 0 ?
unload_marks.concat(that.getImageMarks(g).toArray())
: unload_marks
// XXX for some reason this is smoother than:
// gid && that.updateImage(img, gid)
gid && that.updateImage(that.setElemGID(img, gid))
gid && that.updateImage(that.elemGID(img, gid))
}
// })
}
@ -1889,7 +1894,7 @@ var RibbonsPrototype = {
// remove marks...
.each(function(_, img){
marks = marks.concat(
that.getImageMarks(that.getElemGID(img)).toArray())
that.getImageMarks(that.elemGID(img)).toArray())
})
// clear stuff...
@ -1914,7 +1919,7 @@ var RibbonsPrototype = {
// remove marks...
.each(function(_, img){
marks = marks.concat(
that.getImageMarks(that.getElemGID(img)).toArray())
that.getImageMarks(that.elemGID(img)).toArray())
})
// calculate the compensation...
@ -1965,7 +1970,7 @@ var RibbonsPrototype = {
// update images...
right instanceof Array && right.forEach(function(gid, i){
var img = loading.eq(i)
that.setElemGID(img, gid)
that.elemGID(img, gid)
// XXX for some reason this does not add indicators...
that.updateImage(img)
})
@ -1993,7 +1998,7 @@ var RibbonsPrototype = {
// update images...
left instanceof Array && left.forEach(function(gid, i){
var img = loading.eq(i)
that.setElemGID(img, gid)
that.elemGID(img, gid)
// XXX for some reason this does not add indicators...
that.updateImage(img)
})
@ -2122,7 +2127,7 @@ var RibbonsPrototype = {
that.viewer.find(RIBBON).each(function(){
var r = $(this)
if(ribbons.indexOf(that.getElemGID(r)) < 0){
if(ribbons.indexOf(that.elemGID(r)) < 0){
r.remove()
}
})
@ -2270,7 +2275,7 @@ var RibbonsPrototype = {
// get marked state...
if(action == '?'){
var gid = this.getElemGID(image)
var gid = this.elemGID(image)
var res = 0
cls.forEach(function(cls){
res += that.getImageMarks(gid, cls).length != 0 ? 1 : 0
@ -2281,7 +2286,7 @@ var RibbonsPrototype = {
// set the marks...
image.each(function(){
var image = $(this)
var gid = that.getElemGID(image)
var gid = that.elemGID(image)
cls.forEach(function(cls){
var mark = that.getImageMarks(gid, cls)