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

cleanup and more tweaking...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-05-04 02:42:52 +03:00
parent c22c34a49a
commit 31b9e86964
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,7 +66,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
'ui-partial-ribbons-2', 'ui-partial-ribbons-2',
'-ui-partial-ribbons', '-ui-partial-ribbons',
//*/ //*/
/*/ XXX EXPERIMENTAL... // XXX EXPERIMENTAL...
'ui-partial-ribbons-vdom', 'ui-partial-ribbons-vdom',
'-ui-partial-ribbons', '-ui-partial-ribbons',
'-ui-partial-ribbons-2', '-ui-partial-ribbons-2',

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

@ -186,7 +186,7 @@ var VirtualDOMRibbonsPrototype = {
state: null, state: null,
// constructors... // constructors...
makeView: function(state){ makeView: function(state, initial){
state = state || {} state = state || {}
var that = this var that = this
var ig = this.imagegrid var ig = this.imagegrid
@ -204,7 +204,7 @@ var VirtualDOMRibbonsPrototype = {
var ribbons = data.ribbon_order var ribbons = data.ribbon_order
.map(function(gid){ .map(function(gid){
return that.makeRibbon(gid, target, count, state) }) return that.makeRibbon(gid, target, count, state, initial) })
return vdom.h('div.ribbon-set', return vdom.h('div.ribbon-set',
{ {
@ -226,7 +226,7 @@ var VirtualDOMRibbonsPrototype = {
}, },
// XXX setup handlers (???) // XXX setup handlers (???)
// XXX STUB: make aligning more extensible... (???) // XXX STUB: make aligning more extensible... (???)
makeRibbon: function(gid, target, count, state){ makeRibbon: function(gid, target, count, state, initial){
state = state || {} state = state || {}
var that = this var that = this
var ig = this.imagegrid var ig = this.imagegrid
@ -274,6 +274,9 @@ var VirtualDOMRibbonsPrototype = {
.forEach(function(mark){ imgs.push(mark) }) .forEach(function(mark){ imgs.push(mark) })
}) })
// XXX not sure about this...
var style = initial ? { transform: 'translate3d(120vw, 0, 0)' } : {}
return vdom.h('div.ribbon'+base, { return vdom.h('div.ribbon'+base, {
//key: 'ribbon-'+gid, //key: 'ribbon-'+gid,
@ -283,6 +286,8 @@ var VirtualDOMRibbonsPrototype = {
gid: JSON.stringify(gid) gid: JSON.stringify(gid)
.replace(/^"(.*)"$/g, '$1'), .replace(/^"(.*)"$/g, '$1'),
}, },
style: style,
}, },
imgs) imgs)
}, },
@ -438,7 +443,7 @@ var VirtualDOMRibbonsPrototype = {
// build initial state... // build initial state...
if(this.vdom == null){ if(this.vdom == null){
var n = this.vdom = this.makeView(state) var n = this.vdom = this.makeView(state, true)
var v = vdom.create(n) var v = vdom.create(n)
dom.replaceWith(v) dom.replaceWith(v)
this.dom = v this.dom = v
@ -454,6 +459,7 @@ var VirtualDOMRibbonsPrototype = {
return this return this
}, },
// XXX should this do a full or partial .clear()??? // XXX should this do a full or partial .clear()???
// XXX BUG: current image indicator resets but does not get shown...
reset: function(){ reset: function(){
delete this.dom delete this.dom
delete this.vdom delete this.vdom
@ -481,13 +487,13 @@ object.makeConstructor('VirtualDOMRibbons',
/*********************************************************************/ /*********************************************************************/
// XXX TODO: // XXX TODO:
// - image size/proportions (single image view) // - image size/proportions (single image view)
// - marking...
// - shifting images/ribbons // - shifting images/ribbons
// - use .virtualdom.sync() + shadow animation instead of .ribbons.* // - use .virtualdom.sync() + shadow animation instead of .ribbons.*
// - would be nice to make this an alternative feature... // - would be nice to make this an alternative feature...
// ...split out ribbon editing into a feature and do two // ...split out ribbon editing into a feature and do two
// implementations, the original and virtualdom... // implementations, the original and virtualdom...
// - current image indicator... // - current image indicator...
// - custom align: .alignByOrder(..) / .alignByFirst(..) / ..
// - ribbon rotation: .ribbonRotation(..) / .rotateRibbonCW(..) / .. // - ribbon rotation: .ribbonRotation(..) / .rotateRibbonCW(..) / ..
// - cropping??? // - cropping???
// //
@ -571,7 +577,6 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({
function(){ delete this.virtualdom.state.tile_size }], function(){ delete this.virtualdom.state.tile_size }],
// XXX account for fast navigation... // XXX account for fast navigation...
// XXX sync with .alignRibbons(..) correctly...
['focusImage.pre', ['focusImage.pre',
function(target){ function(target){
var img = this.ribbons.getImage(target) var img = this.ribbons.getImage(target)
@ -583,12 +588,15 @@ module.PartialRibbons = core.ImageGridFeatures.Feature({
if(!this.__partial_ribbon_update){ if(!this.__partial_ribbon_update){
this.__partial_ribbon_update = setTimeout((function(){ this.__partial_ribbon_update = setTimeout((function(){
delete this.__partial_ribbon_update delete this.__partial_ribbon_update
this.ribbons.preventTransitions() this.ribbons.preventTransitions()
this this
.updateRibbon(this.current) .updateRibbon(this.current)
// XXX HACK??? // NOTE: we are doing this manually because we
// are running after the handler is done
// thus missing the base call...
.alignRibbons(null, null, true) .alignRibbons(null, null, true)
this.ribbons.restoreTransitions() this.ribbons.restoreTransitions()
}).bind(this), 150) }).bind(this), 150)
} }