flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 10:20:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

more cleanup, tweaking and experimenting...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-05-01 03:34:57 +03:00
parent 3e9774742b
commit abae6bb3a5
2 changed files with 25 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui (gen4)/features/meta.js
View File

@ -65,7 +65,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
'ui-single-image', 'ui-single-image',
//'ui-partial-ribbons', //'ui-partial-ribbons',
'ui-partial-ribbons-2', 'ui-partial-ribbons-2',
// XXX EXPERIMENTAL... /*/ XXX EXPERIMENTAL...
'ui-partial-ribbons-vdom', 'ui-partial-ribbons-vdom',
'-ui-partial-ribbons-2', '-ui-partial-ribbons-2',
// XXX this conflicts with ui-partial-ribbons-vdom... // XXX this conflicts with ui-partial-ribbons-vdom...

50
ui (gen4)/features/ui-partial-ribbons-vdom.js
View File

@ -109,7 +109,7 @@ var VirtualDOMRibbonsPrototype = {
var ribbons = data.ribbon_order var ribbons = data.ribbon_order
.map(function(gid){ .map(function(gid){
return that.makeRibbon(gid, count, state) }) return that.makeRibbon(gid, target, count, state) })
return vdom.h('div.ribbon-set', { return vdom.h('div.ribbon-set', {
//key: 'ribbon-set', //key: 'ribbon-set',
@ -130,11 +130,12 @@ var VirtualDOMRibbonsPrototype = {
// XXX setup handlers (???) // XXX setup handlers (???)
// XXX current image marker (???) // XXX current image marker (???)
// XXX STUB: make aligning more extensible... (???) // XXX STUB: make aligning more extensible... (???)
makeRibbon: function(gid, count, state){ makeRibbon: function(gid, target, count, state){
state = state || {} state = state || {}
var that = this var that = this
var ig = this.imagegrid var ig = this.imagegrid
var current = ig.current var current = ig.current
target = target || state.target || current
var size = this.state.tile_size = state.tile_size var size = this.state.tile_size = state.tile_size
|| this.state.tile_size || this.state.tile_size
|| ig.ribbons.getVisibleImageSize('max') || ig.ribbons.getVisibleImageSize('max')
@ -154,8 +155,19 @@ var VirtualDOMRibbonsPrototype = {
this.state.tile_size this.state.tile_size
|| ig.ribbons.getVisibleImageSize('max') || ig.ribbons.getVisibleImageSize('max')
// calculate offset...
// XXX this accounts for only one offset mode...
// ...make this extensible...
var vsize = ribbons.px2vmin(size / scale)
var ref = data.getImage(target, 'before', gid)
var offset = ref == target ? vsize / 2
: ref != null ? vsize
: 0
ref = ref || data.getImage(target, 'after', gid)
// build the images... // build the images...
var gids = data.getImages(gid, count, 'total') //var gids = data.getImages(gid, count, 'total')
var gids = data.getImages(ref, count, 'total')
gids gids
.forEach(function(gid){ .forEach(function(gid){
// image... // image...
@ -166,18 +178,9 @@ var VirtualDOMRibbonsPrototype = {
.forEach(function(mark){ imgs.push(mark) }) .forEach(function(mark){ imgs.push(mark) })
}) })
// calculate offset... // continue offset calculation...
// XXX this accounts for only one offset mode...
// ...make this extensible...
// XXX this only aligns to .current...
size = ribbons.px2vmin(size / scale)
var ref = data.getImage(current, 'before', gids)
var offset = ref == current ? size / 2
: ref != null ? size
: 0
ref = ref || data.getImage(current, 'after', gids)
var l = gids.indexOf(ref) var l = gids.indexOf(ref)
var x = (-(l * size) - offset) var x = (-(l * vsize) - offset)
return vdom.h('div.ribbon'+base, { return vdom.h('div.ribbon'+base, {
//key: 'ribbon-'+gid, //key: 'ribbon-'+gid,
@ -280,6 +283,7 @@ var VirtualDOMRibbonsPrototype = {
var dom = this.dom = this.dom var dom = this.dom = this.dom
// get/create the ribbon-set... // get/create the ribbon-set...
|| this.imagegrid.ribbons.getRibbonSet(true) || this.imagegrid.ribbons.getRibbonSet(true)
var state = this.state ? Object.create(this.state) : {} var state = this.state ? Object.create(this.state) : {}
target && (state.target = target) target && (state.target = target)
size && (state.count = size) size && (state.count = size)
@ -377,9 +381,8 @@ var PartialRibbonsActions = actions.Actions({
// XXX add threshold test -- we do not need this on every action... // XXX add threshold test -- we do not need this on every action...
// XXX this messes up align when exiting single image view... // XXX this messes up align when exiting single image view...
// XXX this does not work out of the box... // XXX this does not work out of the box...
return function(){ //this.virtualdom.sync(target, size)
this.virtualdom.sync(target, size) this.virtualdom.sync(this.current, size)
}
}], }],
}) })
@ -409,18 +412,11 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({
['clear', ['clear',
function(){ this.virtualdom.clear() }], function(){ this.virtualdom.clear() }],
['fitImage', ['fitImage toggleSingleImage',
function(){ delete this.virtualdom.state.tile_size }], function(){ delete this.virtualdom.state.tile_size }],
['focusImage.pre centerImage.pre', ['focusImage.post',
function(target, list){ function(_, target){ this.updateRibbon(target) }],
// NOTE: we have to do this as we are called BEFORE the
// actual focus change happens...
// XXX is there a better way to do this???
target = list != null ? target = this.data.getImage(target, list) : target
this.updateRibbon(target)
}],
], ],
}) })