From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 13 Oct 2017 15:54:21 +0000 (+0200)
Subject: fix #1738 @0.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=5ce662b3d93059725d6cceb79bcaa229378e222a;p=fluidbook-html5.git

fix #1738 @0.75
---

diff --git a/js/libs/fluidbook/fluidbook.background.js b/js/libs/fluidbook/fluidbook.background.js
index d4de6fef..028b97ff 100644
--- a/js/libs/fluidbook/fluidbook.background.js
+++ b/js/libs/fluidbook/fluidbook.background.js
@@ -1,52 +1,97 @@
 function FluidbookBackground(fluidbook) {
-	this.fluidbook = fluidbook;
-	this.hasLinks = false;
-	this.init();
+    this.fluidbook = fluidbook;
+    this.hasLinks = false;
+    this.init();
 }
 
 FluidbookBackground.prototype = {
-	init: function() {
-		if (this.fluidbook.datas.links.background != undefined
-				&& this.fluidbook.datas.repeat != Fluidbook.REPEAT
-				&& this.fluidbook.datas.repeat != Fluidbook.STRETCH
-				&& this.fluidbook.datas.links.background != ''
-				&& this.fluidbook.datas.mobileIgnoreBackgroundLinks === false) {
-			$("#background").prepend('<div class="links">' + this.fluidbook.datas.links.background + '</div>');
-			this.hasLinks = true;
-		}
-	},
-	resize: function(w, h) {
-		if (!this.hasLinks) {
-			return;
-		}
-
-		var left, top, iw, ih;
-		if (this.fluidbook.datas.repeat == Fluidbook.NONE) {
-			iw = this.fluidbook.datas.backgroundImageDimensions.width;
-			ih = this.fluidbook.datas.backgroundImageDimensions.height;
-		}
-
-		if (this.fluidbook.datas.backgroundHAlign == Fluidbook.LEFT) {
-			left = 0
-		} else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.RIGHT) {
-			left = w - iw;
-		} else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.CENTER) {
-			left = (w - iw) / 2;
-		}
-
-
-		if (this.fluidbook.datas.backgroundVAlign == Fluidbook.TOP) {
-			top = 0
-		} else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.BOTTOM) {
-			top = h - ih;
-		} else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.MIDDLE) {
-			top = (h - ih) / 2;
-		}
-
-		$("#background .links").css({
-			top: top,
-			left: left
-		});
-	}
+    init: function () {
+        if (this.fluidbook.datas.links.background != undefined
+            && this.fluidbook.datas.repeat != Fluidbook.REPEAT
+            && this.fluidbook.datas.links.background != ''
+            && this.fluidbook.datas.mobileIgnoreBackgroundLinks === false) {
+            $("#background").prepend('<div class="links">' + this.fluidbook.datas.links.background + '</div>');
+            this.hasLinks = true;
+        }
+    },
+    resize: function (w, h) {
+        if (!this.hasLinks) {
+            return;
+        }
+
+        var left, top, iw, ih;
+        if (this.fluidbook.datas.repeat == Fluidbook.NONE) {
+            iw = this.fluidbook.datas.backgroundImageDimensions.width;
+            ih = this.fluidbook.datas.backgroundImageDimensions.height;
+
+            if (this.fluidbook.datas.backgroundHAlign == Fluidbook.LEFT) {
+                left = 0
+            } else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.RIGHT) {
+                left = w - iw;
+            } else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.CENTER) {
+                left = (w - iw) / 2;
+            }
+
+
+            if (this.fluidbook.datas.backgroundVAlign == Fluidbook.TOP) {
+                top = 0
+            } else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.BOTTOM) {
+                top = h - ih;
+            } else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.MIDDLE) {
+                top = (h - ih) / 2;
+            }
+
+            $("#background .links").css({
+                top: top,
+                left: left
+            });
+        } else if (this.fluidbook.datas.repeat == Fluidbook.RATIO || this.fluidbook.datas.repeat == Fluidbook.STRETCH) {
+
+            var origin = ['0%', '0%', '0%'];
+            // if (this.fluidbook.datas.backgroundHAlign == Fluidbook.LEFT) {
+            //     origin[0] = '0%';
+            // } else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.RIGHT) {
+            //     origin[0] = '100%';
+            // } else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.CENTER) {
+            //     origin[0] = '50%';
+            // }
+            // if (this.fluidbook.datas.backgroundVAlign == Fluidbook.TOP) {
+            //     origin[1] = '0%';
+            // } else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.BOTTOM) {
+            //     origin[1] = '100%';
+            // } else if (this.fluidbook.datas.backgroundVAlign == Fluidbook.MIDDLE) {
+            //     origin[1] = '50%';
+            // }
+            //
+            // Todo, search why this works :)
+            origin = ['0%', '0%', '0%'];
+
+            var bw = parseFloat(this.fluidbook.datas.backgroundImageDimensions.width);
+            var bh = parseFloat(this.fluidbook.datas.backgroundImageDimensions.height);
+
+            var translateX = 0;
+            var translateY = 0;
+            var css = {};
+            var scaleX = w / bw;
+            var scaleY = h / bh;
+            if (this.fluidbook.datas.repeat == Fluidbook.RATIO) {
+                if (scaleX < scaleY) {
+                    var l = ((scaleX - scaleY) * bw);
+                    if (this.fluidbook.datas.backgroundHAlign == Fluidbook.CENTER) {
+                        css.left = l / 2;
+                    } else if (this.fluidbook.datas.backgroundHAlign == Fluidbook.LEFT) {
+                        css.left = 0;
+                    }
+                } else {
+                    css.left = 0;
+                }
+                scaleX = scaleY = Math.max(scaleX, scaleY);
+            }
+            var transform = {scaleX: scaleX, scaleY: scaleY, translateX: translateX, translateY: translateY, origin: origin};
+            $("#background .links").transform(transform).css(css);
+        }
+
+
+    }
 };