From 3acbfb9cee9fd2c46dfcfd652d15bb9b21faf1b5 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 10 Nov 2022 16:57:54 +0100 Subject: [PATCH] wip #5468 @5 --- app/Fields/FluidbookLinkEditor/Action.php | 53 +++--- app/Fields/FluidbookLinkEditor/Depth.php | 4 + app/Fields/FluidbookLinkEditor/Layer.php | 20 ++- .../MultimediaIntegration.php | 4 + .../FluidbookLinkEditor/NumberingType.php | 4 + .../FluidbookLinkEditor/RolloverAnimation.php | 4 + .../FluidbookLinkEditor/ShowLinkCloseMode.php | 22 ++- .../FluidbookLinkEditor/ShowLinkMode.php | 4 + app/Fields/FluidbookLinkEditor/Target.php | 5 +- .../FluidbookLinkEditor/TriggerLinkEvent.php | 4 + .../FluidbookLinkEditor/WebvideoService.php | 7 +- app/SubForms/Link/Base.php | 6 +- resources/linkeditor/js/linkeditor.form.js | 155 +++++++++++++++--- resources/linkeditor/js/linkeditor.js | 3 +- resources/linkeditor/js/linkeditor.links.js | 79 ++------- resources/linkeditor/style/form.sass | 3 + 16 files changed, 241 insertions(+), 136 deletions(-) diff --git a/app/Fields/FluidbookLinkEditor/Action.php b/app/Fields/FluidbookLinkEditor/Action.php index 100dbed0c..599ec9788 100644 --- a/app/Fields/FluidbookLinkEditor/Action.php +++ b/app/Fields/FluidbookLinkEditor/Action.php @@ -6,29 +6,32 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class Action extends SelectFromArray { -public function getOptions() -{ - return [ - 'index'=>__("Basculer entre la publication et l'index"), - 'chapters'=>__('Afficher le sommaire'), - 'print'=>__('Imprimer'), - 'share'=>__('Partager par e-mail'), - 'bookmarks'=>__('Ajouter un marque-page'), - 'pdf'=>__('Télécharger le PDF'), - 'notes'=>__('Notes'), - 'fullscreen'=>__('Basculer entre le mode plein écran et le mode normal'), - 'sound'=>__('Activer / Couper le son'), - //'2dmode'=>__('Basculer du mode 2D au mode 3D'), - 'archives'=>__('Afficher les archives'), - 'basket'=>__('Ouvrir le panier'), - 'form'=>__('Ouvrir le formulaire'), - 'facebook'=>__('Partager sur Facebook'), - 'twitter'=>__('Partager sur Twitter'), - //'googleplus'=>__('Partager sur Google+'), - 'linkedin'=>__('Partager sur LinkedIn'), - //'viadeo'=>__('Partager sur Viadeo'), - 'whatsapp'=>__('Partager sur Whatsapp'), - 'pinterest'=>__('Partager sur Pinterest'), - ]; -} + protected $_ajax = false; + + public function getOptions() + { + + return [ + 'index' => __("Basculer entre la publication et l'index"), + 'chapters' => __('Afficher le sommaire'), + 'print' => __('Imprimer'), + 'share' => __('Partager par e-mail'), + 'bookmarks' => __('Ajouter un marque-page'), + 'pdf' => __('Télécharger le PDF'), + 'notes' => __('Notes'), + 'fullscreen' => __('Basculer entre le mode plein écran et le mode normal'), + 'sound' => __('Activer / Couper le son'), + //'2dmode'=>__('Basculer du mode 2D au mode 3D'), + 'archives' => __('Afficher les archives'), + 'basket' => __('Ouvrir le panier'), + 'form' => __('Ouvrir le formulaire'), + 'facebook' => __('Partager sur Facebook'), + 'twitter' => __('Partager sur Twitter'), + //'googleplus'=>__('Partager sur Google+'), + 'linkedin' => __('Partager sur LinkedIn'), + //'viadeo'=>__('Partager sur Viadeo'), + 'whatsapp' => __('Partager sur Whatsapp'), + 'pinterest' => __('Partager sur Pinterest'), + ]; + } } diff --git a/app/Fields/FluidbookLinkEditor/Depth.php b/app/Fields/FluidbookLinkEditor/Depth.php index f5459fbc9..9f25c42bb 100644 --- a/app/Fields/FluidbookLinkEditor/Depth.php +++ b/app/Fields/FluidbookLinkEditor/Depth.php @@ -7,6 +7,10 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class Depth extends SelectFromArray { protected $_ajax = false; + protected $_allowNull=false; + + protected $_default=-1; + public function getOptions() { diff --git a/app/Fields/FluidbookLinkEditor/Layer.php b/app/Fields/FluidbookLinkEditor/Layer.php index 4694af7b8..1b142a686 100644 --- a/app/Fields/FluidbookLinkEditor/Layer.php +++ b/app/Fields/FluidbookLinkEditor/Layer.php @@ -6,12 +6,16 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class Layer extends SelectFromArray { -public function getOptions() -{ - return [ - 'both'=>__('Texte et image'), - 'text'=>__('Texte'), - 'image'=>__('Image'), - ]; -} + protected $_ajax = false; + protected $_allowNull = false; + protected $_default = 'both'; + + public function getOptions() + { + return [ + 'both' => __('Texte et image'), + 'text' => __('Texte'), + 'image' => __('Image'), + ]; + } } diff --git a/app/Fields/FluidbookLinkEditor/MultimediaIntegration.php b/app/Fields/FluidbookLinkEditor/MultimediaIntegration.php index 3eabd6dab..e72b02532 100644 --- a/app/Fields/FluidbookLinkEditor/MultimediaIntegration.php +++ b/app/Fields/FluidbookLinkEditor/MultimediaIntegration.php @@ -6,6 +6,10 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class MultimediaIntegration extends SelectFromArray { + protected $_ajax=false; + protected $_allowNull=false; + protected $_default='inline'; + public function getOptions() { return [ diff --git a/app/Fields/FluidbookLinkEditor/NumberingType.php b/app/Fields/FluidbookLinkEditor/NumberingType.php index 7204af393..32cf124ae 100644 --- a/app/Fields/FluidbookLinkEditor/NumberingType.php +++ b/app/Fields/FluidbookLinkEditor/NumberingType.php @@ -6,6 +6,10 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class NumberingType extends SelectFromArray { + protected $_ajax = false; + protected $_allowNull = false; + protected $_default = 'virtual'; + public function getOptions() { return [ diff --git a/app/Fields/FluidbookLinkEditor/RolloverAnimation.php b/app/Fields/FluidbookLinkEditor/RolloverAnimation.php index 903dba661..8c69904fa 100644 --- a/app/Fields/FluidbookLinkEditor/RolloverAnimation.php +++ b/app/Fields/FluidbookLinkEditor/RolloverAnimation.php @@ -6,6 +6,10 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class RolloverAnimation extends SelectFromArray { + protected $_ajax = false; + protected $_allowNull = false; + protected $_default = 'none'; + public function getOptions() { return [ diff --git a/app/Fields/FluidbookLinkEditor/ShowLinkCloseMode.php b/app/Fields/FluidbookLinkEditor/ShowLinkCloseMode.php index a54512f01..93e608e79 100644 --- a/app/Fields/FluidbookLinkEditor/ShowLinkCloseMode.php +++ b/app/Fields/FluidbookLinkEditor/ShowLinkCloseMode.php @@ -6,13 +6,17 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class ShowLinkCloseMode extends SelectFromArray { -public function getOptions() -{ - return [ - 'none' => __('Aucune'), - 'topright' => __('En haut à droite'), - 'topleft' => __('En haut à gauche'), - 'whole' => __('Toute la zone'), - ]; -} + protected $_ajax = false; + protected $_allowNull = false; + protected $_default = 'none'; + + public function getOptions() + { + return [ + 'none' => __('Aucune'), + 'topright' => __('En haut à droite'), + 'topleft' => __('En haut à gauche'), + 'whole' => __('Toute la zone'), + ]; + } } diff --git a/app/Fields/FluidbookLinkEditor/ShowLinkMode.php b/app/Fields/FluidbookLinkEditor/ShowLinkMode.php index ab7e86271..99bdbbc96 100644 --- a/app/Fields/FluidbookLinkEditor/ShowLinkMode.php +++ b/app/Fields/FluidbookLinkEditor/ShowLinkMode.php @@ -6,6 +6,10 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class ShowLinkMode extends SelectFromArray { + protected $_ajax = false; + protected $_allowNull = false; + protected $_default = 'show'; + public function getOptions() { return [ diff --git a/app/Fields/FluidbookLinkEditor/Target.php b/app/Fields/FluidbookLinkEditor/Target.php index c702e2601..6376551ad 100644 --- a/app/Fields/FluidbookLinkEditor/Target.php +++ b/app/Fields/FluidbookLinkEditor/Target.php @@ -6,8 +6,9 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class Target extends SelectFromArray { - protected $_ajax=false; - protected $_allowNull=false; + protected $_ajax = false; + protected $_allowNull = false; + protected $_default = '_blank'; public function getOptions() { diff --git a/app/Fields/FluidbookLinkEditor/TriggerLinkEvent.php b/app/Fields/FluidbookLinkEditor/TriggerLinkEvent.php index 9b2e1c2b7..3f3c58fb8 100644 --- a/app/Fields/FluidbookLinkEditor/TriggerLinkEvent.php +++ b/app/Fields/FluidbookLinkEditor/TriggerLinkEvent.php @@ -6,6 +6,10 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class TriggerLinkEvent extends SelectFromArray { + protected $_ajax = false; + protected $_allowNull = false; + protected $_default = 'page'; + public function getOptions() { return [ diff --git a/app/Fields/FluidbookLinkEditor/WebvideoService.php b/app/Fields/FluidbookLinkEditor/WebvideoService.php index 2cdf04a60..2a649705f 100644 --- a/app/Fields/FluidbookLinkEditor/WebvideoService.php +++ b/app/Fields/FluidbookLinkEditor/WebvideoService.php @@ -6,6 +6,11 @@ use Cubist\Backpack\Magic\Fields\SelectFromArray; class WebvideoService extends SelectFromArray { + protected $_ajax = false; + protected $_default = 'youtube'; + protected $_allowNull = false; + + public function getOptions() { return [ @@ -14,5 +19,5 @@ class WebvideoService extends SelectFromArray 'vimeo' => 'Vimeo', 'brightcove' => 'Vimeo', ]; -} + } } diff --git a/app/SubForms/Link/Base.php b/app/SubForms/Link/Base.php index dd6034aa0..7a2cbed7b 100644 --- a/app/SubForms/Link/Base.php +++ b/app/SubForms/Link/Base.php @@ -5,6 +5,7 @@ namespace App\SubForms\Link; use App\Fields\FluidbookLinkEditor\Depth; use App\Fields\FluidbookLinkEditor\LinkType; use App\Fields\FluidbookLinkEditor\MultimediaIntegration; +use App\Fields\FluidbookLinkEditor\RolloverAnimation; use App\Models\FluidbookPublication; use Cubist\Backpack\Magic\Fields\Checkbox; use Cubist\Backpack\Magic\Fields\FieldGroupEnd; @@ -168,7 +169,7 @@ class Base extends Form } $this->addField('header_tooltip', FormSection::class, __('Infobulles')); $this->addField('tooltip', Text::class, __('Texte de l\'infobulle'), ['hint' => __('Laisser vide pour conserver le texte par défaut')]); - $this->addField('display_area', Checkbox::class, __('Afficher la zone de couleur au survol')); + $this->addField('display_area', Checkbox::class, __('Afficher la zone de couleur au survol'), ['default' => true]); } public function addTypeField() @@ -199,10 +200,11 @@ class Base extends Form if ($this->_addedContents) { $this->addField('header_contents', FormSection::class, __('Contenus superposés')); $this->addField('image', FilesOrURL::class, __('Image'), array_merge($this->getFilesOrURLEntry(), ['accept' => ['.jpg', '.jpeg', '.png', '.svg', '.gif']])); + $this->addField('image_rollover', RolloverAnimation::class, __('Animation de l\'image au survol')); $this->addField('animation', FilesOrURL::class, __('Animation'), array_merge($this->getFilesOrURLEntry(), ['accept' => ['.html']])); } if ($this->_integration) { - $this->addField('inline', MultimediaIntegration::class, __('Intégration'), ['default' => 'inline']); + $this->addField('inline', MultimediaIntegration::class, __('Intégration')); } if ($this->_multimedia) { $this->addMultimediaFields(); diff --git a/resources/linkeditor/js/linkeditor.form.js b/resources/linkeditor/js/linkeditor.form.js index b6b4deac4..c37bd8eee 100644 --- a/resources/linkeditor/js/linkeditor.form.js +++ b/resources/linkeditor/js/linkeditor.form.js @@ -1,48 +1,161 @@ function LinkeditorForm(linkeditor) { this.linkeditor = linkeditor; + this._maskChangeEvent = false; + this._maskChangeEventTimeout = null; this.init(); } LinkeditorForm.prototype = { init: function () { - $(document).on('focus', "input[type=text],input[type=email],input[type=url],input[type=number],textarea", function () { - var $this = $(this); - setTimeout(function () { - $this.select(); - }, 1); + var $this = this; + + $('#linkeditor-panel-form').on('change', '[name="type"]', function () { + if ($this._maskChangeEvent) { + return; + } + $this.saveFormDataInLink(); + $this.updateLinkForm(); + }); + + $('#linkeditor-panel-form').on('change', "input, select, textarea", function () { + if ($this._maskChangeEvent) { + return; + } + $this.saveFormDataInLink(); }); }, - initCodeMirror: function () { - $('#linkeditor-panel-form textarea.code').each(function () { - var textarea = $(this); - var c = CodeMirror.fromTextArea($(textarea).get(0), { - lineNumbers: true, mode: $(textarea).data('mode'), theme: 'dracula', - }); - $(textarea).data('codemirror', c); - c.on('change', function (o) { - o.save(); - }); + saveFormDataInLink: function () { + + var form = $("#linkeditor-panel-form form"); + if ($(form).length === 0) { + return; + } + + this.maskChangeEvent(); + var link = $(form).data('link'); + var data = $(form).serializeArray() + var ignore = ['_method', '_referrer', '_token', 'http_referrer']; + var map = {y: 'top', x: 'left', w: 'width', h: 'height'}; + var savedData = {}; + $.each(data, function (k, v) { + if (ignore.indexOf(v.name) >= 0) { + return; + } + let key = v.name; + if (map[v.name] !== undefined && map[v.name] !== null) { + key = map[v.name]; + } + savedData[key] = v.value; + $(link).attr('fb-' + key, v.value); }); + $(link).attr('fb-update', 1); + this.linkeditor.links.updateLinkData($(link).attr('fb-origuid'), savedData); + this.linkeditor.hasChanged(); + this.unmaskChangeEvent(); }, + emptyForm: function () { + $('#linkeditor-panel-form .select2_from_array').each(function () { + $(this).select2('close'); + $(this).select2('destroy'); + }); + $('#linkeditor-panel-form').html(''); + }, + + updateLinkForm: function () { + var links = $('.link.selected:not(.pendingCreate)'); + if (links.length != 1) { + this.emptyForm(); + return; + } + + this.emptyForm(); + var container = $('#linkeditor-panel-form'); + var link = $(links).eq(0); + var type = $(link).attr('fb-type'); + var form = $("#linkeditor-form-template-" + type).clone(false); + + $(form).attr('id', null); + $(form).data('link', link); + this.updateFormData(form); + container.append(form); + + + this.initSelect2(); + }, + + updateFormData: function (form) { + var $this = this; + try { + if (form === undefined) { + form = $('#linkeditor-panel-form form'); + if (form.length === 0) { + return; + } + } + var link = $(form).data('link'); + if (link === undefined || link === null) { + return; + } + } catch (e) { + return; + } + + + var types = {x: 'dimension', y: 'dimension', w: 'dimension', h: 'dimension', rot: 'dimension'} + var map = {top: 'y', left: 'x', width: 'w', height: 'h'}; + + this.maskChangeEvent(); + $.each(this.linkeditor.links.getLinkData(link), function (k, v) { + if (map[k] !== undefined) { + k = map[k]; + } + var type = 'string'; + if (types[k] !== undefined) { + type = types[k]; + } + if (type === 'dimension') { + v = parseFloat(v); + if (isNaN(v)) { + v = 0; + } + v = Math.round(v * 100000) / 100000; + } + $(form).find('[name=' + k + ']').val(v); + }); + this.unmaskChangeEvent(); + }, + + maskChangeEvent: function () { + this._maskChangeEvent = true; + }, + + unmaskChangeEvent: function () { + var $this = this; + clearTimeout(this._maskChangeEventTimeout); + if (this._maskChangeEvent === false) { + return; + } + this._maskChangeEventTimeout = setTimeout(function () { + $this._maskChangeEvent = false; + }, 100); + }, + + initSelect2: function () { // trigger select2 for each untriggered select2 box $('#linkeditor-panel-form .select2_from_array:not(.init)').each(function (i, obj) { var options = { theme: "bootstrap", }; - if ($(this).is('[data-ajax]')) { - options.ajax = { - url: 'select2/' + $(this).data('ajax'), dataType: 'json', delay: 250, - }; - } if ($(this).is('[data-allow-html="1"]')) { options.escapeMarkup = function (m) { return m; } } - $(obj).addClass('init').select2(options); + $(this).addClass('init') + $(this).select2(options); }); }, diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js index 5256dcd83..1269db68a 100644 --- a/resources/linkeditor/js/linkeditor.js +++ b/resources/linkeditor/js/linkeditor.js @@ -129,6 +129,7 @@ LinkEditor.prototype = { deselectAll = false; } if (deselectAll) { + $this.form.saveFormDataInLink(); $this.links.deselectAllLinks(); } }); @@ -232,7 +233,7 @@ LinkEditor.prototype = { }); $(e).css(css).attr('fb-update', '0'); }); - this.links.updateFormData(); + this.form.updateFormData(); }, fluidbookTo: function (dim, name, rect) { diff --git a/resources/linkeditor/js/linkeditor.links.js b/resources/linkeditor/js/linkeditor.links.js index 57ade90f1..f5f41992e 100644 --- a/resources/linkeditor/js/linkeditor.links.js +++ b/resources/linkeditor/js/linkeditor.links.js @@ -84,7 +84,7 @@ LinkeditorLinks.prototype = { var link = this.duplicateLinkClick({width: 0, height: 0}); $(link).addClass('pendingCreate'); this.startResizeLink('se'); - this.updateLinkForm(); + this.linkeditor.form.updateLinkForm(); }, startResizeLink: function (corner) { @@ -101,7 +101,7 @@ LinkeditorLinks.prototype = { $('.pendingCreate').each(function () { $this.deleteLink($(this), true); }); - this.updateLinkForm(); + this.linkeditor.form.updateLinkForm(); this.resizeLinkPos = null; }, @@ -216,7 +216,7 @@ LinkeditorLinks.prototype = { $(this).removeClass('pendingCreate'); } - $this.updateLinkData($(this).attr('fb-uid'), { + $this.updateLinkData($(this).attr('fb-origuid'), { top: newTop, left: newLeft, width: newWidth, height: newHeight }); }); @@ -278,7 +278,7 @@ LinkeditorLinks.prototype = { .attr('fb-top', top) .attr('fb-update', '1'); - $this.updateLinkData($(this).attr('fb-uid'), { + $this.updateLinkData($(this).attr('fb-origuid'), { top: top, left: left, }); }); @@ -291,67 +291,10 @@ LinkeditorLinks.prototype = { } $(l).addClass('selected'); this.currentSelection.push(l); - this.updateLinkForm(); + this.linkeditor.form.updateLinkForm(); this.lastSelectedLink = l; }, - updateLinkForm: function () { - var container = $('#linkeditor-panel-form'); - container.html(''); - var links = $('.link.selected:not(.pendingCreate)'); - if (links.length != 1) { - return; - } - var link = $(links).eq(0); - var type = $(link).attr('fb-type'); - var form = $("#linkeditor-form-template-" + type).clone(false); - - $(form).attr('id', null); - $(form).data('link', link); - this.updateFormData(form); - container.append(form); - - // Reset select2 fields - $(form).find('select.select2_from_array.init').each(function () { - $(this).removeClass('init'); - }); - - this.linkeditor.form.initSelect2(); - this.linkeditor.form.initCodeMirror(); - }, - - updateFormData: function (form) { - try { - if (form === undefined) { - form = $('#linkeditor-panel-form form'); - if (form.length === 0) { - return; - } - } - var link = $(form).data('link'); - if (link === undefined || link === null) { - return; - } - } catch (e) { - return; - } - var types = {x: 'dimension', y: 'dimension', w: 'dimension', h: 'dimension', rot: 'dimension'} - var map = {top: 'y', left: 'x', width: 'w', height: 'h'}; - $.each(this.getLinkData(link), function (k, v) { - if (map[k] !== undefined) { - k = map[k]; - } - var type = 'string'; - if (types[k] !== undefined) { - type = types[k]; - } - if (type === 'dimension') { - v = Math.round(parseFloat(v) * 100000) / 100000; - } - $(form).find('[name=' + k + ']').val(v); - }); - }, - checkLastSelectedLink: function () { if (this.lastSelectedLink === null || $(this.lastSelectedLink).length === 0) { return; @@ -375,7 +318,7 @@ LinkeditorLinks.prototype = { deselectAllLinks: function () { this.currentSelection = []; $(".link.selected").removeClass('selected'); - this.updateLinkForm(); + this.linkeditor.form.updateLinkForm(); }, offsetSelectedLinks: function (dim, value) { @@ -386,10 +329,10 @@ LinkeditorLinks.prototype = { let data = {}; data[dim] = newValue; $(this).attr('fb-' + dim, newValue).attr('fb-update', '1'); - $this.updateLinkData($(this).attr('fb-uid'), data); + $this.updateLinkData($(this).attr('fb-origuid'), data); }); this.linkeditor.updateFBElements(); - this.updateFormData(); + this.linkeditor.form.updateFormData(); }, getLinksOfPage: function (p) { @@ -434,6 +377,8 @@ LinkeditorLinks.prototype = { change = true; } + link.origuid = link.uid; + let attrs = {}; $.each(link, function (k, v) { attrs['fb-' + k] = v; @@ -477,7 +422,7 @@ LinkeditorLinks.prototype = { let link = this.addLink(data); this.deselectAllLinks(); this.selectLink($(link)); - this.updateFormData(); + this.linkeditor.form.updateFormData(); return $(link); }, @@ -493,7 +438,7 @@ LinkeditorLinks.prototype = { if (triggerChange === undefined) { triggerChange = true; } - delete LINKS[$(link).attr('fb-uid')]; + delete LINKS[$(link).attr('fb-origuid')]; $(link).remove(); if (triggerChange === true) { this.linkeditor.hasChanged(); diff --git a/resources/linkeditor/style/form.sass b/resources/linkeditor/style/form.sass index 533be65d8..6c64d7db4 100644 --- a/resources/linkeditor/style/form.sass +++ b/resources/linkeditor/style/form.sass @@ -1,3 +1,6 @@ +.select2-hidden-accessible + position: fixed !important + #linkeditor-form-templates display: none -- 2.39.5