mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +00:00
fixed centering though still not 100% on rotated images in single image mode...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
169e9a6d45
commit
6228505437
@ -247,6 +247,7 @@ var CurrentImageIndicatorActions = actions.Actions({
|
||||
}
|
||||
}
|
||||
|
||||
// XXX need to account for image margins....
|
||||
//css.left = cur[0].offsetLeft
|
||||
this.ribbons.dom.setOffset(marker, cur[0].offsetLeft, 0)
|
||||
|
||||
|
||||
@ -70,9 +70,6 @@ var core = require('features/core')
|
||||
//
|
||||
//
|
||||
// XXX should this be an action???
|
||||
// XXX .ribbons.correctImageProportionsForRotation(..) might be working
|
||||
// incorrectly...
|
||||
// ...when scaling a horizontal image, the thing starts jumping around....
|
||||
// XXX alignment issues in some orientations...
|
||||
function updateImageProportions(){
|
||||
var that = this
|
||||
@ -80,31 +77,42 @@ function updateImageProportions(){
|
||||
var viewer = this.ribbons.viewer
|
||||
|
||||
var img = this.ribbons.getImage()
|
||||
// XXX check if this accounts for margins...
|
||||
|
||||
var w = img.outerWidth()
|
||||
var h = img.outerHeight()
|
||||
|
||||
// inner diameter
|
||||
var di = Math.min(h, w)
|
||||
// outer diameter -- (m)ax
|
||||
var dm = Math.max(h, w)
|
||||
|
||||
var c = Math.min(this.screenwidth, this.screenheight)
|
||||
|
||||
// change proportions...
|
||||
if(c < threshold){
|
||||
var images = viewer.find('.ribbon .image')
|
||||
var W = viewer.width()
|
||||
var H = viewer.height()
|
||||
|
||||
// inner diameter
|
||||
var Di = Math.min(W, H)
|
||||
// outer diameter -- (m)ax
|
||||
var Dm = Math.max(W, H)
|
||||
|
||||
|
||||
// get dimensional scale....
|
||||
var s = Math.min(W, H) / Math.min(w, h)
|
||||
var s = Di / di
|
||||
// image dimension delta...
|
||||
var d =
|
||||
// the maximum difference between image and screen proportions...
|
||||
(Math.max(W, H) / s - Math.min(w, h))
|
||||
// coefficient: 0 @ c == threshold -> 1 @ c == 1
|
||||
(Dm / s - di)
|
||||
// coefficient: 0 : c == threshold -> 1 : c == 1
|
||||
* (threshold/c - 1)
|
||||
// total size...
|
||||
var n = Math.min(w, h) + d
|
||||
var n = di + d
|
||||
|
||||
|
||||
if(n == Math.max(w, h)){
|
||||
if(n == dm){
|
||||
return
|
||||
}
|
||||
|
||||
@ -112,41 +120,41 @@ function updateImageProportions(){
|
||||
that.ribbons.preventTransitions()
|
||||
|
||||
// horizontal viewer...
|
||||
if(Math.min(W, H) == H){
|
||||
// XXX
|
||||
viewer.find('.ribbon .image')
|
||||
.css({
|
||||
width: n,
|
||||
height: '',
|
||||
if(Di == H){
|
||||
images
|
||||
.each(function(_, img){
|
||||
img.style.width = n + 'px'
|
||||
img.style.height = ''
|
||||
})
|
||||
|
||||
// vertical viewer...
|
||||
} else {
|
||||
// XXX
|
||||
viewer.find('.ribbon .image')
|
||||
.css({
|
||||
width: '',
|
||||
height: n,
|
||||
images
|
||||
.each(function(_, img){
|
||||
img.style.width = ''
|
||||
img.style.height = n + 'px'
|
||||
})
|
||||
}
|
||||
|
||||
that.centerImage()
|
||||
that.ribbons.centerImage()
|
||||
|
||||
that.ribbons.restoreTransitions(true)
|
||||
})
|
||||
|
||||
// reset proportions to square...
|
||||
} else if(w != h) {
|
||||
var images = viewer.find('.ribbon .image')
|
||||
|
||||
getAnimationFrame(function(){
|
||||
that.ribbons.preventTransitions()
|
||||
|
||||
viewer.find('.ribbon .image')
|
||||
.css({
|
||||
width: '',
|
||||
height: '',
|
||||
images
|
||||
.each(function(_, img){
|
||||
img.style.width = ''
|
||||
img.style.height = ''
|
||||
})
|
||||
|
||||
that.centerImage()
|
||||
that.ribbons.centerImage()
|
||||
|
||||
that.ribbons.restoreTransitions(true)
|
||||
})
|
||||
|
||||
@ -2168,6 +2168,8 @@ var RibbonsPrototype = {
|
||||
var W = this.viewer.innerWidth()
|
||||
var H = this.viewer.innerHeight()
|
||||
|
||||
var images = images || this.viewer.find(IMAGE)
|
||||
|
||||
var viewer_p = W > H ? 'landscape' : 'portrait'
|
||||
|
||||
return $(images).each(function(i, e){
|
||||
@ -2221,8 +2223,10 @@ var RibbonsPrototype = {
|
||||
// XXX offset and scale are not used...
|
||||
// XXX custom align point woud also be nice...
|
||||
// (top, bottom, center, %, px)
|
||||
// XXX need to account for margins...
|
||||
centerRibbon: function(target, offset, scale){
|
||||
target = this.getImage(target)
|
||||
scale = scale || this.scale()
|
||||
var ribbon_set = this.getRibbonSet()
|
||||
|
||||
if(ribbon_set.length == 0 || target.length == 0){
|
||||
@ -2231,12 +2235,14 @@ var RibbonsPrototype = {
|
||||
|
||||
//this.origin(target)
|
||||
|
||||
var s = this.scale()
|
||||
var ro = ribbon_set.offset()
|
||||
var io = target.offset()
|
||||
var h = target.height()
|
||||
var ro = ribbon_set.offset().top
|
||||
// NOTE: this appears to account for margins...
|
||||
var io = target.offset().top
|
||||
var h = target.outerHeight()
|
||||
+ parseFloat(target.css('margin-top'))
|
||||
+ parseFloat(target.css('margin-bottom'))
|
||||
|
||||
var t = (io.top - ro.top)/s + h/2
|
||||
var t = (io - ro)/scale + h/2
|
||||
|
||||
var offset = this.dom.relativeOffset(this.viewer, ribbon_set, {
|
||||
top: t,
|
||||
@ -2253,6 +2259,7 @@ var RibbonsPrototype = {
|
||||
// XXX offset is not used...
|
||||
// XXX custom align point would also be nice...
|
||||
// (top, bottom, center, %, px)
|
||||
// XXX need to account for margins...
|
||||
centerImage: function(target, mode, offset, scale){
|
||||
target = this.getImage(target)
|
||||
scale = scale || this.scale()
|
||||
@ -2263,10 +2270,12 @@ var RibbonsPrototype = {
|
||||
}
|
||||
|
||||
var rl = ribbon.offset().left
|
||||
var il = target.offset().left
|
||||
//var rsl = this.getRibbonSet().offset().left
|
||||
// NOTE: this appears to account for margins...
|
||||
var il = target.offset().left
|
||||
var W = this.viewer.width() * scale
|
||||
var w = target.width() * scale
|
||||
var w = (target.outerWidth()
|
||||
+ parseFloat(target.css('margin-left'))
|
||||
+ parseFloat(target.css('margin-right'))) * scale
|
||||
|
||||
var image_offset = mode == 'before' ? w/2
|
||||
: mode == 'after' ? -w/2
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user