wip #6200 @3.5

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 6ddda8c109d3b0eaa104a10731177f52d8f86fae..ce8a7ffcb7501dbcd7d4419442c3218056ae8662 100644 (file)
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -534,7 +534,7 @@ FluidbookLoader.prototype = {
             this._needSeparateTextures[page] = false;
             $.each(this.fluidbook.settings.clinks[page], function (blendmode, links) {
                 $.each(links, function (k, link) {
-                    if (link.indexOf('data-animation-hide') >= 0 || link.indexOf('data-animation-hide-on-leave') >= 0) {
+                    if (link.indexOf('data-animation-hide') >= 0 || link.indexOf('data-animation-hide-on-leave') >= 0 || link.indexOf('data-animation-zommed-in') >= 0 || link.indexOf('data-animation-zoomed-out') >= 0) {
                         $this._needSeparateTextures[page] = true;
                         return false;
                     }
@@ -676,126 +676,164 @@ FluidbookLoader.prototype = {
         }
         var $this = this;
 
-        this._preloadContentLinkTextures(page, this.fluidbook.settings.clinks[page], this.fluidbook.settings.links[page], enter,
-            function (textures, clinks) {
-                if ($this.fluidbook.pagetransitions.flip3d !== false) {
-                    var d = 1024;
-                    var c = document.getElementById("pscanvas");
-                    c.width = d;
-                    c.height = d;
-                    var ctx = c.getContext("2d");
-                    ctx.clearRect(0, 0, d, d);
-
-                    var wr = d / $this.fluidbook.settings.width;
-                    var hr = d / $this.fluidbook.settings.height;
-
-                    // Draw background
-                    if ($this.backgrounds[page] !== undefined && $this.backgrounds[page] !== null) {
-                        ctx.drawImage($this.backgrounds[page].get(0), 0, 0, d * 1.002, d);
-                    } else {
-                        ctx.fillStyle = "#FFFFFF";
-                        ctx.fillRect(0, 0, d, d);
-                    }
-                    // Draw the texts if necessary
-                    if ($this.getVersionToLoad(page) === 'textasvector' || $this.getVersionToLoad(page) === 'vector') {
-                        try {
-                            var img = $this.texts[page].get(0);
-                            if (img.width === 0) {
-                                $this.deletePage(page);
-                                $this._preloadPage(page, callback);
-                                console.warn('failed to load page for drawing texture ', page);
-                                return;
-                            }
-                            ctx.drawImage(img, -1, 0, d + 2, d);
-                        } catch (e) {
-                            console.warn(e);
+        this._preloadContentLinkTextures(page, this.fluidbook.settings.clinks[page], this.fluidbook.settings.links[page], enter, function (textures, clinks) {
+            if ($this.fluidbook.pagetransitions.flip3d !== false) {
+                var d = 1024;
+                var c = document.getElementById("pscanvas");
+                c.width = d;
+                c.height = d;
+                var ctx = c.getContext("2d");
+                ctx.clearRect(0, 0, d, d);
+
+                var wr = d / $this.fluidbook.settings.width;
+                var hr = d / $this.fluidbook.settings.height;
+
+                // Draw background
+                if ($this.backgrounds[page] !== undefined && $this.backgrounds[page] !== null) {
+                    ctx.drawImage($this.backgrounds[page].get(0), 0, 0, d * 1.002, d);
+                } else {
+                    ctx.fillStyle = "#FFFFFF";
+                    ctx.fillRect(0, 0, d, d);
+                }
+                // Draw the texts if necessary
+                if ($this.getVersionToLoad(page) === 'textasvector' || $this.getVersionToLoad(page) === 'vector') {
+                    try {
+                        var img = $this.texts[page].get(0);
+                        if (img.width === 0) {
+                            $this.deletePage(page);
+                            $this._preloadPage(page, callback);
+                            console.warn('failed to load page for drawing texture ', page);
+                            return;
                         }
+                        ctx.drawImage(img, -1, 0, d + 2, d);
+                    } catch (e) {
+                        console.warn(e);
                     }
+                }
+
+                // Draw content links
+                if (clinks !== '') {
+                    $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () {
+                        if ((enter && $(this).is('[data-animation-hide]')) || (!enter && $(this).is('[data-animation-hide-on-leave]'))) {
+                            return;
+                        }
 
-                    // Draw content links
-                    if (clinks !== '') {
-                        $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () {
-                            if ((enter && $(this).is('[data-animation-hide]')) || (!enter && $(this).is('[data-animation-hide-on-leave]'))) {
+                        let texture;
+
+                        let scale = 1;
+                        let sx = 0;
+                        let sy = 0;
+                        let sw = 0;
+                        let sh = 0;
+                        let tw;
+                        let th;
+
+                        if ($(this).is('[data-image]')) {
+                            var i = $(this).data('id');
+                            if (textures[i] === undefined || textures[i] === null) {
                                 return;
                             }
-                            var left = parseFloat($(this).css('left')) * wr;
-                            var top = parseFloat($(this).css('top')) * hr;
-                            var width = parseFloat($(this).css('width')) * wr;
-                            var height = parseFloat($(this).css('height')) * hr;
+                            texture = textures[i].get(0);
+                            tw = sw = texture.width;
+                            th = sh = texture.height;
+                        }
+
+
+                        if (enter && $(this).is('[data-animation-zoomed-out]')) {
+                            scale = parseFloat($(this).data('animation-zoomed-out'));
+                        } else if (!enter && $(this).is('[data-animation-zoomed-in]')) {
+                            scale = parseFloat($(this).data('animation-zoomed-in'));
+                        }
+                        let w = parseFloat($(this).css('width'));
+                        let h = parseFloat($(this).css('height'));
 
-                            var blendmode = $(this).data('blendmode');
+                        if (scale !== 1) {
+                            let origin = '50% 50%';
+                            origin = parseTransformOrigin(origin);
 
-                            if (blendmode === 'normal') {
+                            sx = (1 - (1 / scale)) * tw * origin[0];
+                            sy = (1 - (1 / scale)) * th * origin[1];
+                            sw = tw - (sx / (1 - origin[0]));
+                            sh = th - (sy / (1 - origin[1]));
+                        }
+
+                        var left = (parseFloat($(this).css('left'))) * wr;
+                        var top = (parseFloat($(this).css('top'))) * hr;
+                        var width = w * wr;
+                        var height = h * hr;
+
+                        var blendmode = $(this).data('blendmode');
+
+                        if (blendmode === 'normal') {
+                            ctx.globalCompositeOperation = 'source-over';
+                        } else {
+                            try {
+                                ctx.globalCompositeOperation = blendmode;
+                            } catch (e) {
                                 ctx.globalCompositeOperation = 'source-over';
-                            } else {
-                                try {
-                                    ctx.globalCompositeOperation = blendmode;
-                                } catch (e) {
-                                    ctx.globalCompositeOperation = 'source-over';
-                                }
                             }
+                        }
 
-                            if ($(this).is('[data-layer="bothsvg"]')) {
-                                ctx.fillStyle = '#ffffff';
-                                ctx.fillRect(left, top, width, height);
-                            }
+                        if ($(this).is('[data-layer="bothsvg"]')) {
+                            ctx.fillStyle = '#ffffff';
+                            ctx.fillRect(left, top, width, height);
+                        }
 
-                            if ($(this).is('[data-color]')) {
-                                ctx.fillStyle = $(this).attr('data-color');
-                                ctx.fillRect(left, top, width, height);
-                            } else if ($(this).is('[data-image]')) {
-                                var i = $(this).data('id');
-                                if (textures[i] !== undefined && textures[i] !== null) {
-                                    try {
-                                        ctx.drawImage(textures[i].get(0), left, top, width, height);
-                                    } catch (e) {
-                                        console.warn(textures[i]);
-                                    }
+                        if ($(this).is('[data-color]')) {
+                            ctx.fillStyle = $(this).attr('data-color');
+                            ctx.fillRect(left, top, width, height);
+                        } else if ($(this).is('[data-image]')) {
+                            try {
+                                ctx.drawImage(texture, sx, sy, sw, sh, left, top, width, height);
+                                if (scale != 1) {
+                                    console.log(scale, '|', sx, sy, sw, sh, '|', tw, th, '|', left, top, width, height);
                                 }
+                            } catch (e) {
+                                console.warn(texture);
                             }
-                        });
-                        $('.texture_clinks[data-page="' + page + '"]').remove();
-                    }
-
-                    // Draw the shadow if necessary
-                    if ($this.fluidbook.settings.shadeAlpha > 0) {
-                        var sw = d * .25;
-                        var s, x;
-                        if (page % 2 === 0 && $this.fluidbook.l10n.ltr || page % 2 === 1 && $this.fluidbook.l10n.rtl) {
-                            // Left
-                            s = $this.shadeLeft;
-                            x = 1024 - sw;
-                        } else {
-                            // Right
-                            s = $this.shadeRight;
-                            x = 0;
                         }
-                        ctx.globalAlpha = 2 * $this.fluidbook.settings.shadeAlpha / 100;
-                        ctx.drawImage(s.get(0), x, 0, sw, d);
-                        ctx.globalAlpha = 1;
+                    });
+                    $('.texture_clinks[data-page="' + page + '"]').remove();
+                }
+
+                // Draw the shadow if necessary
+                if ($this.fluidbook.settings.shadeAlpha > 0) {
+                    var sw = d * .25;
+                    var s, x;
+                    if (page % 2 === 0 && $this.fluidbook.l10n.ltr || page % 2 === 1 && $this.fluidbook.l10n.rtl) {
+                        // Left
+                        s = $this.shadeLeft;
+                        x = 1024 - sw;
+                    } else {
+                        // Right
+                        s = $this.shadeRight;
+                        x = 0;
                     }
+                    ctx.globalAlpha = 2 * $this.fluidbook.settings.shadeAlpha / 100;
+                    ctx.drawImage(s.get(0), x, 0, sw, d);
+                    ctx.globalAlpha = 1;
+                }
 
-                    try {
-                        let dataurl = c.toDataURL("image/png");
-                        var i = new Image();
-                        i.onload = function () {
-                            if (enter) {
-                                $this.textures[page] = i;
-                            } else {
-                                $this.leaveTextures[page] = i;
-                            }
-                            callback();
+                try {
+                    let dataurl = c.toDataURL("image/png");
+                    var i = new Image();
+                    i.onload = function () {
+                        if (enter) {
+                            $this.textures[page] = i;
+                        } else {
+                            $this.leaveTextures[page] = i;
                         }
-                        i.src = dataurl;
-                    } catch (e) {
-                        console.warn(e);
                         callback();
                     }
-                } else {
+                    i.src = dataurl;
+                } catch (e) {
+                    console.warn(e);
                     callback();
                 }
+            } else {
+                callback();
             }
-        );
+        });
     },
 
     getURL(url) {

diff --git a/js/libs/fluidbook/fluidbook.utils.js b/js/libs/fluidbook/fluidbook.utils.js
index 5354347e6838cccd4ef419944d2fe16cd01be92b..5121cf4568ccdd8f62e973e07e0f2dc496053e98 100644 (file)
--- a/js/libs/fluidbook/fluidbook.utils.js
+++ b/js/libs/fluidbook/fluidbook.utils.js
@@ -121,3 +121,35 @@ function getIframeDocument(iframe) {
     return doc;
 }
 
+function parseTransformOrigin(origin) {
+    origin = origin.trim();
+    if (origin === 'center') {
+        return [0.5, 0.5];
+    }
+    let o = origin.split(' ');
+    if (o.length <= 1) {
+        return [0.5, 0.5];
+    }
+    return [parseTransformOriginComponent(o[0]), parseTransformOriginComponent(o[1])];
+}
+
+function parseTransformOriginComponent(c) {
+    c = c.trim();
+    switch (c) {
+        case 'left':
+        case 'top':
+            return 0;
+        case 'middle':
+        case 'center':
+            return 0.5;
+        case 'right':
+        case 'bottom':
+            return 1;
+        default:
+            if (c.indexOf('%') > 0) {
+                return parseFloat(c) / 100;
+            }
+            return parseFloat(c);
+    }
+}
+