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

moving to relative units on all positioning...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-11-30 06:37:22 +03:00
parent 108f01021e
commit 0e8c268630
4 changed files with 52 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui (gen4)/features/ui-chrome.js
View File

@ -257,9 +257,15 @@ var CurrentImageIndicatorActions = actions.Actions({
}
}
/* // set absolute offset...
this.ribbons.dom.setOffset(marker,
cur[0].offsetLeft - (parseFloat(cur[0].style.marginLeft) || 0),
0)
*/
// set relative offset...
var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
var x = ((cur[0].offsetLeft - (parseFloat(cur[0].style.marginLeft) || 0))/W)*100 + 'vmin'
marker.transform({x: x, y: 0, z: 0})
marker.css(css)
}],

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

@ -555,9 +555,11 @@ module.ViewerActions = actions.Actions({
}],
centerViewer: ['- Interface/Center the viewer',
function(target){
/*
this
.centerImage(target)
.centerRibbon(target)
*/
}],
focusImage: [

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

@ -1492,6 +1492,8 @@ var RibbonsPrototype = {
// get/create the ribbon...
var r = this.getRibbon(ribbon)
var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
if(r.length == 0){
place = true
// no such ribbon exists, then create and append it in the end...
@ -1509,14 +1511,15 @@ var RibbonsPrototype = {
// align only if ref is loaded...
if(ref.length > 0){
var gid = this.getElemGID(ref)
var w = this.getVisibleImageSize('width', 1, ref)
var w = this.getVisibleImageSize('width', 1, ref) / W * 100
// calculate offset...
// NOTE: this will not work for non-square images...
var dl = loaded.index(ref) - gids.indexOf(gid)
if(dl != 0){
this.dom.setOffset(r, this.dom.getOffset(r).left + dl * w)
var x = parseFloat(r.transform('translate3d')[0]) + w * dl
r.transform({x: x + 'vmin', y: 0, z: 0})
}
}
}
@ -1609,6 +1612,9 @@ var RibbonsPrototype = {
// NOTE: this is a less general but simpler/faster alternative to
// .updateRibbon(..)
// NOTE: this needs the ribbon to exist...
//
// XXX revize offset compensation + cleanup...
// ...at this point offset compensation animates...
resizeRibbon: function(ribbon, left, right, transitions, reference){
ribbon = this.getRibbon(ribbon)
left = left || 0
@ -1616,6 +1622,7 @@ var RibbonsPrototype = {
reference = this.getImage(reference)
//scale = scale || this.scale()
var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
var w = this.getVisibleImageSize('width', 1, reference)
var that = this
@ -1662,7 +1669,7 @@ var RibbonsPrototype = {
// XXX this assumes that all widths are equal...
// ...we can't calculate image width unless it is attached...
//var l = -left * (reference.outerWidth() / scale)
var l = -left * w
//var l = -left * w
// clear stuff...
$(marks)
@ -1671,14 +1678,23 @@ var RibbonsPrototype = {
requestAnimationFrame(function(){
transitions || that.preventTransitions(ribbon)
var a = images[-left].offsetLeft
unloaded
.detach()
.removeClass('moving current')
// blank out images to prevent wrong image flashing
// when reusing...
.css('background-image', 'none')
// compensate for the offset...
that.dom.setOffset(ribbon, that.dom.getOffset(ribbon).left + l)
//that.dom.setOffset(ribbon, that.dom.getOffset(ribbon).left + l)
var b = images[-left].offsetLeft
var d = ((a - b) / W) * 100
var x = parseFloat(ribbon.transform('translate3d')[0]) + d
ribbon.transform({x: x + 'vmin', y: 0, z: 0})
transitions || that.restoreTransitions(ribbon, true)
})
@ -1734,11 +1750,14 @@ var RibbonsPrototype = {
// XXX this assumes that all widths are equal...
// ...we can't calculate image with unless it is attached...
//var l = c * (reference.outerWidth() / scale)
var l = c * w
//var l = c * w
requestAnimationFrame(function(){
transitions || that.preventTransitions(ribbon)
// XXX is this the correct reference item -- can it be deleted above???
var a = images[0].offsetLeft
ribbon.prepend(loading)
// XXX this is here to update the indicators...
@ -1748,7 +1767,14 @@ var RibbonsPrototype = {
})
// compensate for the offset...
that.dom.setOffset(ribbon, that.dom.getOffset(ribbon).left - l)
//that.dom.setOffset(ribbon, that.dom.getOffset(ribbon).left - l)
// XXX is this the correct reference item -- can it be deleted above???
var b = images[0].offsetLeft
var d = ((a - b) / W) * 100
var x = parseFloat(ribbon.transform('translate3d')[0]) + d
ribbon.transform({x: x + 'vmin', y: 0, z: 0})
transitions || that.restoreTransitions(ribbon, true)
})
@ -2289,12 +2315,20 @@ var RibbonsPrototype = {
var l = target[0].offsetLeft
var w = target[0].offsetWidth
var image_offset = mode == 'before' ? 0
: mode == 'after' ? w
: w/2
// relative offset to vmin...
var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
var x = (-(l + image_offset)/W)*100 + 'vmin'
// absolute offset...
//var x = -(l + image_offset)
//ribbon.css('transform', 'translateX(-'+ (l + image_offset) +'px)')
ribbon.transform({x: -(l + image_offset), y: 0, z: 0})
ribbon.transform({x: x, y: 0, z: 0})
return this
},

4
ui (gen4)/lib/transform.js
View File

@ -254,7 +254,7 @@ var transformEditor = function(){
var unit = args[i] || ''
data[i] = typeof(arg) == typeof(123)
|| (typeof(arg) == typeof('str')
&& /^[0-9\.]+$/.test(arg)) ? arg + unit
&& /^-?[0-9\.]+$/.test(arg)) ? arg + unit
: arg == '' ? neutral + unit
: arg
res[i] = arg
@ -272,7 +272,7 @@ var transformEditor = function(){
.map(function(arg, i){
var unit = args[i] || ''
return arg.slice(-unit.length) == unit
|| /^[0-9\.]+$/.test(arg)?
|| /^-?[0-9\.]+$/.test(arg)?
parseFloat(arg)
: arg
})