From cc75d3024717b5138335a0b759be800113f32fe5 Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 5 Aug 2024 14:18:43 +0200 Subject: [PATCH] wip #6961 --- .../js/fluidbook.links.animations.js | 4 +- resources/linkeditor/js/linkeditor.js | 2 + resources/linkeditor/js/linkeditor.links.js | 83 +++++++++++++------ resources/linkeditor/js/linkeditor.panels.js | 2 + resources/linkeditor/style/inc/_form.sass | 3 + resources/linkeditor/style/inc/_toolbar.sass | 3 + .../link_editor.blade.php | 2 + .../link_editor_icons.blade.php | 2 +- 8 files changed, 71 insertions(+), 30 deletions(-) diff --git a/resources/linkeditor/js/fluidbook.links.animations.js b/resources/linkeditor/js/fluidbook.links.animations.js index 8a7b9db39..0085b0b02 100644 --- a/resources/linkeditor/js/fluidbook.links.animations.js +++ b/resources/linkeditor/js/fluidbook.links.animations.js @@ -1,5 +1,3 @@ - - function FluidbookLinksAnimations(fluidbook) { if (fluidbook === undefined) { fluidbook = false; @@ -423,4 +421,4 @@ FluidbookLinksAnimations.prototype = { -export default FluidbookLinksAnimations; \ No newline at end of file +export default FluidbookLinksAnimations; diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 8cb410112..9bdfba21b 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -1,5 +1,6 @@ import tippy from 'tippy.js'; import 'tippy.js/dist/tippy.css'; +import gsap from "gsap"; import Noty from "noty"; import 'noty/lib/noty.css'; @@ -31,6 +32,7 @@ window.key = require('keymaster-reloaded'); window.tippy = tippy; window.Noty = Noty; window.GrahamScan = GrahamScan; +window.gsap = gsap; window.key.filter = function (event) { return keyfilter(event); diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index 4cc3c6444..c0ca33cd1 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -352,6 +352,14 @@ LinkeditorLinks.prototype = { }, }); + $(document).on("click", "#linkeditor-start-animation", function(e) { + e.preventDefault() + let isActive = $("#preview-links").hasClass("active") + $("#preview-links").addClass("active") + $this.setPreview(false,isActive) + $this.setAnim(false,isActive) + }) + setInterval(function () { $this.checkLastSelectedLink(); }, 250); @@ -1558,6 +1566,18 @@ LinkeditorLinks.prototype = { } }, + animation: function() { + let el = $("[data-action^='links.']") + el.addClass("active") + if(el.hasClass("active")) { + this.setPreview() + this.setAnim() + } else { + this.clearPreview() + el.removeClass("active") + } + }, + loadFontSize: function() { if(Object.keys(window.LINKS).length > 0) { $.ajax({ @@ -1636,8 +1656,6 @@ LinkeditorLinks.prototype = { }) this.updateFontSize(link) } else if (linkData.type === '39') { - const pw = $(".linkeditor-page").get(0).getBoundingClientRect().width - const ph = $(".linkeditor-page").get(0).getBoundingClientRect().height if($("[data-id-preview=" + linkData.uid + "] .linkeditor-page").length < 1) { $("[data-id-preview=" + linkData.uid + "]").html('
') $("[data-id-preview=" + linkData.uid + "]").find(".linkeditor-page-right-copy,.linkeditor-page-left-copy").css({ @@ -1681,26 +1699,7 @@ LinkeditorLinks.prototype = { "left": -left - 1, "top": -top - 1, }) - - /*const canvas = $('#canvas'+ linkData.uid).get(0), - ctx = canvas.getContext('2d') - - var image = new Image(); - image.src = $("#linkeditor-page-left .contents .images").attr('src') - - var texts = new Image(); - texts.src = $("#linkeditor-page-left .contents .texts").attr('src') - - var image2 = new Image(); - image2.src = $("#linkeditor-page-right .contents .images").attr('src') - - var texts2 = new Image(); - texts2.src = $("#linkeditor-page-right .contents .texts").attr('src') - ctx.drawImage(image,-xLeft,-yLeft,pw,ph); - ctx.drawImage(texts,-xLeft,-yLeft,pw,ph); - ctx.drawImage(image2,-xRight.toFixed(2),-yRight,pw,ph); - ctx.drawImage(texts2,-xRight.toFixed(2),-yRight,pw,ph); - */}) + }) } @@ -1747,11 +1746,25 @@ LinkeditorLinks.prototype = { } }, - setPreview: function(zooming = false) { + setPreview: function(zooming = false, isActive = false) { const links = this.getLinksOfPage(this.linkeditor.currentPage) for(let link in links) { - this.updatePreview(links[link], zooming) + if(!isActive) { + console.log('ok 2') + this.updatePreview(links[link], zooming) + } + } + }, + + setAnim: function() { + const links = this.getLinksOfPage(this.linkeditor.currentPage) + + for(let link in links) { + let animationText = $("[fb-uid=" + links[link].uid + "]").attr("fb-image_rollover") + let animations = this.resolveAnimation(animationText) + + this.linkeditor.linksAnimations.executeAnimations($("[data-id-preview=" + links[link].uid + "]").children().get(0), animations) } }, @@ -1793,8 +1806,26 @@ LinkeditorLinks.prototype = { }, clearPreview: function() { - $("[data-id-preview]").remove() - }, + $("[data-id-preview]").remove() + $("[data-action='links.animation']").removeClass("active") + }, + + resolveAnimation: function(animationText) { + let animations = animationText.split('---') + let obj = [] + let result = [] + for(let anim in animations) { + let o = animations[anim].trim().split('\n') + obj.push({}); + result = [] + for(let k in o) { + let entries = o[k].split('=') + result[entries[0]] = entries[1] + } + obj[anim] = Object.assign({},result) + } + return obj + } }; export default LinkeditorLinks; diff --git a/resources/linkeditor/js/linkeditor.panels.js b/resources/linkeditor/js/linkeditor.panels.js index 66c6d5ef4..1fc923293 100644 --- a/resources/linkeditor/js/linkeditor.panels.js +++ b/resources/linkeditor/js/linkeditor.panels.js @@ -38,6 +38,8 @@ LinkeditorPanels.prototype = { } }); + $("[data-name=image_rollover]").append("") + this.linkeditor.layers.init(); this.linkeditor.resize.resize(); diff --git a/resources/linkeditor/style/inc/_form.sass b/resources/linkeditor/style/inc/_form.sass index ce7eb0bc2..2935ac18e 100644 --- a/resources/linkeditor/style/inc/_form.sass +++ b/resources/linkeditor/style/inc/_form.sass @@ -275,3 +275,6 @@ button .select2-container--bootstrap .select2-results > .select2-results__options max-height: 350px !important + +#linkeditor-start-animation + display: block diff --git a/resources/linkeditor/style/inc/_toolbar.sass b/resources/linkeditor/style/inc/_toolbar.sass index 834724d31..ae3c59b45 100644 --- a/resources/linkeditor/style/inc/_toolbar.sass +++ b/resources/linkeditor/style/inc/_toolbar.sass @@ -126,3 +126,6 @@ #preview-links.disabled pointer-events: none + + .linkeditor-start-animation + fill: transparent diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php index ee82f54b4..acfef9db2 100644 --- a/resources/views/fluidbook_publication/link_editor.blade.php +++ b/resources/views/fluidbook_publication/link_editor.blade.php @@ -310,6 +310,8 @@ data-tooltip="{{__('Afficher un overlay blanc semi-opaque au dessus des pages')}}"> + diff --git a/resources/views/fluidbook_publication/link_editor_icons.blade.php b/resources/views/fluidbook_publication/link_editor_icons.blade.php index 95d8bc1ba..1b8a4fd5c 100644 --- a/resources/views/fluidbook_publication/link_editor_icons.blade.php +++ b/resources/views/fluidbook_publication/link_editor_icons.blade.php @@ -3,7 +3,7 @@ Downloaded from https://dev.toolbox.fluidbook.com/tool-sprite/3/download Edit here : https://dev.toolbox.fluidbook.com/tool-sprite/3/edit ---}} +--}} @push('linkeditor_scripts')