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

added offset calculation + more experimenting...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2017-04-30 01:02:03 +03:00
parent 08193fd17f
commit 626001b90b
2 changed files with 57 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,30 +124,30 @@ var VirtualDOMRibbonsPrototype = {
ribbons)
])
},
// XXX calc offset (x) -- the only thing left to be fully usable...
// XXX setup handlers (???)
// XXX current image marker (???)
makeRibbon: function(gid, count, state){
state = state || {}
var that = this
var ig = this.imagegrid
var current = ig.current
var size = this.state.tile_size = state.tile_size
|| this.state.tile_size
|| ig.ribbons.getVisibleImageSize('max')
var scale = state.scale = state.scale
|| ig.scale
var data = ig.data
var images = ig.images
var ribbons = ig.ribbons
var base = data.base == gid ? '.base' : ''
var imgs = []
this.state = this.state || {}
this.state.ribbons = this.state.ribbons || {}
var x = this.state.ribbons[gid] =
(state.ribbons && state.ribbons[gid])
|| this.state.ribbons[gid]
// XXX calculate new offset
// ...this will work only for cases where nothing
// changes...
|| parseFloat(ig.ribbons.getRibbon(gid).transform('x'))
data.getImages(gid, count, 'total')
// build the images...
var gids = data.getImages(gid, count, 'total')
gids
.forEach(function(gid){
// image...
imgs.push(that.makeImage(gid))
@ -157,6 +157,23 @@ var VirtualDOMRibbonsPrototype = {
.forEach(function(mark){ imgs.push(mark) })
})
// calculate offset...
// 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 x = //this.state.ribbons[gid] =
(state.ribbons && state.ribbons[gid])
|| this.state.ribbons[gid]
//|| parseFloat(ig.ribbons.getRibbon(gid).transform('x'))
|| (-(l * size) - offset)
return vdom.h('div.ribbon'+base, {
key: 'ribbon-'+gid,
@ -233,7 +250,7 @@ var VirtualDOMRibbonsPrototype = {
},
makeImageMark: function(gid, type){
return vdom.h('div.mark.'+(type || ''), {
key: 'mark-'+gid,
key: 'mark-'+type+'-'+gid,
attributes: {
gid: JSON.stringify(gid)
.replace(/^"(.*)"$/g, '$1'),

31
ui (gen4)/imagegrid/ribbons.js
View File

@ -211,6 +211,26 @@ module.DOMAdapter = {
/*********************************************************************/
var RibbonsClassPrototype = {
// utils...
px2v: function(px, mode){
var ref = mode == 'vw' ?
document.body.offsetWidth
: mode == 'vh' ?
document.body.offsetHeight
: mode == 'vmin' ?
Math.min(document.body.offsetWidth, document.body.offsetHeight)
: mode == 'vmax' ?
Math.max(document.body.offsetWidth, document.body.offsetHeight)
: null
return ref ?
(px / ref) * 100
: ref
},
px2vw: function(px){ return this.px2v(px, 'vw') },
px2vh: function(px){ return this.px2v(px, 'vh') },
px2vmin: function(px){ return this.px2v(px, 'vmin') },
px2vmax: function(px){ return this.px2v(px, 'vmax') },
// Generic getters...
getElemGID: function(elem){
return JSON.parse('"'
@ -267,6 +287,7 @@ var RibbonsClassPrototype = {
return this.setElemGID($('<div class="mark">')
.addClass(cls), gid)
},
}
@ -301,6 +322,13 @@ var RibbonsPrototype = {
// DOM Adapter...
dom: DOMAdapter,
// utils...
px2v: RibbonsClassPrototype.px2v,
px2vw: RibbonsClassPrototype.px2vw,
px2vh: RibbonsClassPrototype.px2vh,
px2vmin: RibbonsClassPrototype.px2vmin,
px2vmax: RibbonsClassPrototype.px2vmax,
// Constructors...
createViewer: RibbonsClassPrototype.createViewer,
createRibbon: RibbonsClassPrototype.createRibbon,
@ -2574,8 +2602,7 @@ var RibbonsPrototype = {
: w/2
// relative offset to vmin...
var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
var x = (-(l + image_offset)/W)*100 + 'vmin'
var x = -this.px2vmin(l + image_offset) + 'vmin'
// absolute offset...
//var x = -(l + image_offset)