wait #7164 @5:00

diff --git a/resources/linkeditor/js/fluidbook.links.animations.js b/resources/linkeditor/js/fluidbook.links.animations.js
index 0085b0b02f57ebdbb21d542dc9246f22e43f5178..2da9f38636cbb4c3bc18c12fa81176dd82652408 100644 (file)
--- a/resources/linkeditor/js/fluidbook.links.animations.js
+++ b/resources/linkeditor/js/fluidbook.links.animations.js
@@ -215,6 +215,19 @@ FluidbookLinksAnimations.prototype = {
             var bottom = h;
             var left = 0;
 
+            /**
+             * Rename animation direction name
+             */
+            if(!animation.direction) {
+                animation.direction = 'right'
+            }
+            if(animation.direction === 'top') {
+                animation.direction = 'up'
+            }
+            if(animation.direction === 'bottom') {
+                animation.direction = 'down'
+            }
+
             var rectinit = 'rect(0px,' + w + 'px,' + h + 'px,0px)';
             if ((animation.direction === 'left' && animation.type === 'unmask') || (animation.direction === 'right' && animation.type === 'reveal')) {
                 right = 0;
@@ -339,6 +352,7 @@ FluidbookLinksAnimations.prototype = {
                 value = $(link).data('anim-numeric-value');
             }
             link.text('');
+
             var countup = new CountUp(link.attr('id'), value, options);
             setTimeout(function () {
                 link.css('opacity', 1);

diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index 9bdfba21b54c6264b2e0736070ec381c5e86b740..dc736e194532ee917819164c291875213693ee23 100644 (file)
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -1,6 +1,8 @@
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import gsap from "gsap";
+import Raphael from "raphael";
+import { CountUp } from "countup.js";
 
 import Noty from "noty";
 import 'noty/lib/noty.css';
@@ -33,6 +35,8 @@ window.tippy = tippy;
 window.Noty = Noty;
 window.GrahamScan = GrahamScan;
 window.gsap = gsap;
+window.Raphael = Raphael;
+window.CountUp = CountUp;
 
 window.key.filter = function (event) {
     return keyfilter(event);
@@ -99,6 +103,8 @@ function LinkEditor() {
     this.dimensionProperties = ['left', 'top', 'width', 'height'];
 
     this.init();
+
+    let $this = this
 }
 
 LinkEditor.prototype = {
@@ -383,7 +389,9 @@ LinkEditor.prototype = {
                         css[dim] = (v * ($this.fs * $this.zoom.zoom)) + 1;
                         if (dim === 'height') {
                             if (LINKS[$(e).attr('fb-uid')].type === '35') {
-                                $this.links.setFontSize(LINKS[$(e).attr('fb-uid')])
+                                $( document ).ajaxComplete(function( event, xhr, settings ) {
+                                    //$this.links.setFontSize(LINKS[$(e).attr('fb-uid')])
+                                })
                             }
                         }
                     } else {
@@ -498,9 +506,7 @@ LinkEditor.prototype = {
         }
         this.undo.updateIconsStates();
         this.loader.preloadPages();
-        if ($("#preview-links").hasClass("active")) {
-            this.links.setPreview()
-        }
+        this.previewLinks.setPreview()
     },
 
     getCurrentPages: function (page) {

diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js
index e3f2fadf91ff8a3d6301290d768d747129013a85..982187cf9461407fc2a929a2a3ea80f6a3ed92db 100644 (file)
--- a/resources/linkeditor/js/linkeditor.links.js
+++ b/resources/linkeditor/js/linkeditor.links.js
@@ -364,8 +364,6 @@ LinkeditorLinks.prototype = {
         setInterval(function () {
             $this.checkLastSelectedLink();
         }, 250);
-
-        $this.linkeditor.previewLinks.setPreview(false,true)
     },
 
     key: function (shortcut, scope) {
@@ -1573,6 +1571,7 @@ LinkeditorLinks.prototype = {
     },
 
     loadFontSize: function() {
+        const $this = this
         if(Object.keys(window.LINKS).length > 0) {
             $.ajax({
                 url: '/fluidbook-publication/' + FLUIDBOOK_DATA.id + '/generatefont',
@@ -1588,6 +1587,9 @@ LinkeditorLinks.prototype = {
                         $("#extra-font-face").append("@font-face{font-family:" + FONT_SIZE[k]['font'] + ";src:url('/fluidbook-publication/" + FLUIDBOOK_DATA.id + "/edit/links/assets/" + FONT_SIZE[k]['hash'] + "' ) format('woff');}")
                     }
                     $("#preview-links").removeClass('disabled');
+                    $this.linkeditor.resize.resize()
+                    $this.linkeditor.changePage()
+                    $this.linkeditor.previewLinks.setPreview()
                 }
             });
         } else {

diff --git a/resources/linkeditor/js/linkeditor.previewLinks.js b/resources/linkeditor/js/linkeditor.previewLinks.js
index f702ddd84e3ca13ca73f178f9d647fa32b5841e0..f60ed5f077cea1b969fd71df0699a11ef0077e5a 100644 (file)
--- a/resources/linkeditor/js/linkeditor.previewLinks.js
+++ b/resources/linkeditor/js/linkeditor.previewLinks.js
@@ -37,13 +37,11 @@ LinkeditorPreviewLinks.prototype = {
         $this.previewByType(link.type)
     },
 
-    setPreview: function(zooming = false, isActive = false) {
+    setPreview: function() {
         const links = this.linkeditor.links.getLinksOfPage(this.linkeditor.currentPage)
 
         for (let link in links) {
-            if (!isActive) {
-                this.updatePreview(links[link])
-            }
+            this.updatePreview(links[link])
         }
     },
 
@@ -62,17 +60,9 @@ LinkeditorPreviewLinks.prototype = {
             imgUrl = imgUrl + (imgUrl.includes('.svg') ? "#svgView(preserveAspectRatio(none))" : '')
             let img = "<img src='" + imgUrl + "' />"
             $("[data-id-preview=" + $this.linkData.uid + "]").css("position","absolute").html(img)
-
-            $("[data-id-preview=" + $this.linkData.uid + "] img").css({
-                height: '100%',
-                width: '100%',
-                display: 'block',
-                'background-size': '100% 100%',
-                'background-position': '0 0',
-            })
         } else if (type === '35') {
             var hash = 'fb_' + window.MD5($this.linkData.image).toString().substring(0, 10)
-            this.linkeditor.links.setFontSize($this.linkData)
+            $this.linkeditor.links.setFontSize($this.linkData)
 
             $("[data-id-preview=" + $this.linkData.uid + "]").addClass("link-text").text($this.linkData.to).css({
                 'height': 'auto',
@@ -81,7 +71,7 @@ LinkeditorPreviewLinks.prototype = {
                 'color': $this.linkData.extra,
                 'position': 'absolute'
             })
-            this.linkeditor.links.updateFontSize($this.linkData)
+            $this.linkeditor.links.updateFontSize($this.linkData)
         } else if (type === '39') {
             let $link = $("[fb-uid="+$this.linkData.uid+"]")
             let animationText = $link.attr("fb-image_rollover")
@@ -92,23 +82,10 @@ LinkeditorPreviewLinks.prototype = {
                 $("[data-id-preview=" + $this.linkData.uid + "]").append('<div class="preview-wrapper"></div>')
             }
 
-            if($("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page").length < 1) {
-                $("[data-id-preview=" + $this.linkData.uid + "]").html('<div class="linkeditor-zoom-copy"><div class="linkeditor-fluidbook-copy"><div class="linkeditor-page linkeditor-page-right-copy" data-page="1"></div><div class="linkeditor-page linkeditor-page-left-copy" data-page="0"></div></div></div>')
-                $("[data-id-preview=" + $this.linkData.uid + "]").find(".linkeditor-page-right-copy,.linkeditor-page-left-copy").css({
-                    "position": "absolute",
-                    "left": 0
-                })
-
-                $("[data-id-preview=" + $this.linkData.uid + "]").find(".linkeditor-zoom-copy").css({
-                    "position": "absolute",
-                    "transform-origin": "0 0"
-                })
-                this.linkeditor.resize.resizePages()
-
-                $(".linkeditor-fluidbook-copy").css({position: 'absolute', "transform-origin": "0 0"});
+            this.createPreviewLayerHTML($("[data-id-preview=" + $this.linkData.uid + "]"))
+            this.linkeditor.resize.resizePages()
+            //this.linkeditor.zoom.setZoom(1)
 
-                this.linkeditor.zoom.setZoom(1)
-            }
             if(animZoom.length > 0) {
                 let srcImg = $("#linkeditor-page-left .contents img.images").attr('src')
                 let srcText = $("#linkeditor-page-left .contents img.texts").attr('src')
@@ -122,7 +99,6 @@ LinkeditorPreviewLinks.prototype = {
                     bg = 'url('+srcText+')'
                 }
 
-                $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").css("clip-path","inset(0)")
                 $("[data-id-preview=" + $this.linkData.uid + "] .preview-wrapper").addClass("img")
 
                 $("[data-id-preview=" + $this.linkData.uid + "] .linkeditor-page-left-copy").css({
@@ -140,17 +116,6 @@ LinkeditorPreviewLinks.prototype = {
             }
 
             this.linkeditor.resize.resizeCanvas()
-
-            $("[data-id-preview=" + $this.linkData.uid + "]").css({
-                "clip-path":"inset(0)",
-                "position": "absolute",
-            }).find('img').css({
-                'width': '100%',
-                'height': '100%',
-                'position': 'absolute',
-                'left': 0,'top': 0
-            })
-
             let linkeditorZoomRect = $("#linkeditor-zoom")[0].getBoundingClientRect()
             let left = $this.linkeditor.fluidbookToGlobal($this.linkData.left, 'left') - linkeditorZoomRect.left
             let top = $this.linkeditor.fluidbookToGlobal($this.linkData.top, 'top') - linkeditorZoomRect.top
@@ -221,6 +186,18 @@ LinkeditorPreviewLinks.prototype = {
         $("[data-id-preview]").parents('.link').css()
     },
 
+    createPreviewLayerHTML: function(el) {
+        let html = `
+            <div class="linkeditor-zoom-copy">
+                <div class="linkeditor-fluidbook-copy">
+                    <div class="linkeditor-page linkeditor-page-right-copy" data-page="1"></div>
+                    <div class="linkeditor-page linkeditor-page-left-copy" data-page="0"></div>
+                </div>
+            </div>
+        `;
+        el.html(html)
+    },
+
 }
 
 export default LinkeditorPreviewLinks;

diff --git a/resources/linkeditor/js/linkeditor.zoom.js b/resources/linkeditor/js/linkeditor.zoom.js
index 128b1468664bf17d91799195da638d4e3546cc2d..33c5ee551034b6a64f654d40b051d97e2d513a64 100644 (file)
--- a/resources/linkeditor/js/linkeditor.zoom.js
+++ b/resources/linkeditor/js/linkeditor.zoom.js
@@ -81,7 +81,7 @@ LinkeditorZoom.prototype = {
 
         $("#linkeditor-canvas").scrollTo({left: sx, top: sy});
         this.linkeditor.rulers.updateRulers();
-        this.linkeditor.previewLinks.setPreview(this.zoom)
+        this.linkeditor.previewLinks.setPreview()
     },
 
     normalizeZoom: function (z) {

diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass
index f650ce98d098e9b1103c3d7c819426719f50fda4..4ff1f3c0f84d35bb14b7fe82cc673f46f8b1615b 100644 (file)
--- a/resources/linkeditor/style/inc/_links.sass
+++ b/resources/linkeditor/style/inc/_links.sass
@@ -8,6 +8,12 @@ body.preview
             [data-id-preview]
                 display: block !important
 
+body:not(.preview)
+    #linkeditor-links
+        .link
+            .bg-preview
+                display: none
+
 
 #linkeditor-links
     .link
@@ -44,6 +50,22 @@ body.preview
         &[fb-type='14'] [data-id-preview]
             mix-blend-mode: normal
             position: absolute
+            img
+                height: 100%
+                width: 100%
+                display: block
+                background-size: 100% 100%
+                background-position: 0 0
+
+        &[fb-type='39'] [data-id-preview]
+            clip-path: inset(0)
+            position: absolute
+            img
+                width: 100%
+                height: 100%
+                position: absolute
+                left: 0
+                top: 0
 
         [data-id-preview]
             &.onlytext,&.text
@@ -60,6 +82,21 @@ body.preview
                 .images,.texts
                     display: initial !important
 
+            .preview-wrapper
+                clip-path: inset(0)
+
+            .linkeditor-page-right-copy,
+            .linkeditor-page-left-copy
+                position: absolute
+                left: 0
+                width: 100%
+                height: 100%
+
+            .linkeditor-zoom-copy,
+            .linkeditor-fluidbook-copy
+                position: absolute
+                transform-origin: 0 0
+
 
         #linkeditor-main.dropfile &.dropfile
             border-style: dashed