diff --git a/README.md b/README.md index 5fbb6cd2..010c6187 100644 --- a/README.md +++ b/README.md @@ -161,7 +161,18 @@ monsieurbiz_sylius_richeditor: ## Available elements -The plugin already contains some simple elements. +### Row Element (Layout) + +It contains another rich editor field, each element will be displayed one below the other (as rows…). + +### Column Element (Layout) + +It contains another rich editor field, each element will be displayed side by side (as columns…). + +By using this element in the `Row` element, you will be able to build some layout like the screenshot below. +You can distinguish the `Row` element and the `Column` element by their dotted borders. + +![The Columns and Rows elements](screenshots/columns_and_rows.jpg) ### HTML Element diff --git a/assets/js/app.js b/assets/js/app.js index 1d93bf92..e88bb63b 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -63,6 +63,8 @@ global.MonsieurBizRichEditorConfig = class { actionsHtml, elementHtml, elementCardHtml, + panelsHtml, + panelsEditHtml, deletionConfirmation, createElementFormUrl, editElementFormUrl, @@ -79,6 +81,8 @@ global.MonsieurBizRichEditorConfig = class { this.actionsHtml = actionsHtml; this.elementHtml = elementHtml; this.elementCardHtml = elementCardHtml; + this.panelsHtml = panelsHtml; + this.panelsEditHtml = panelsEditHtml; this.deletionConfirmation = deletionConfirmation; this.createElementFormUrl = createElementFormUrl; this.editElementFormUrl = editElementFormUrl; @@ -87,6 +91,7 @@ global.MonsieurBizRichEditorConfig = class { this.defaultUIElementDataField = defaultUIElementDataField; this.errorMessage = errorMessage; this.unallowedUiElementMessage = unallowedUiElementMessage; + this.uid = Math.random().toString(36).substring(2, 11); } findUiElementByCode(code) { @@ -165,12 +170,14 @@ global.MonsieurBizRichEditorManager = class { /** * */ - constructor(config) { + constructor(config, tags) { + config.input.setAttribute('data-rich-editor-uid', config.uid); + this.config = config; let inputValue = this.input.value.trim(); - this.tags = this.input.dataset.tags.length === 0 ? [] : this.input.dataset.tags.split(','); + this.tags = tags; this.tagsAreExclusive = false; for (let tag of this.tags) { if (!tag.startsWith('-')) { @@ -246,16 +253,26 @@ global.MonsieurBizRichEditorManager = class { } initUiPanelsInterface() { - this.selectionPanel = new Dialog('.js-uie-panels', { - labelledby: 'uie-heading', + let panelsWrapper = document.createElement('div'); + panelsWrapper.innerHTML = Mustache.render(this.config.panelsHtml, { uid: this.config.uid }); + document.body.appendChild(panelsWrapper.firstElementChild); + + let panelsEditWrapper = document.createElement('div'); + panelsEditWrapper.innerHTML = Mustache.render(this.config.panelsEditHtml, { + uid: this.config.uid, + }); + document.body.appendChild(panelsEditWrapper.firstElementChild); + + this.selectionPanel = new Dialog('.js-uie-panels-' + this.config.uid, { + labelledby: 'uie-heading-' + this.config.uid, enableAutoFocus: false, - closingSelector: '.js-uie-panels-close', + closingSelector: '.js-uie-panels-close-' + this.config.uid, }); - this.newPanel = new Dialog('.js-uie-panels-new', { - helperSelector: '.js-uie-panels-selector', + this.newPanel = new Dialog('.js-uie-panels-new-' + this.config.uid, { + helperSelector: '.js-uie-panels-selector-' + this.config.uid, enableAutoFocus: false, }); - this.editPanel = new Dialog('.js-uie-panels-edit', { + this.editPanel = new Dialog('.js-uie-panels-edit-' + this.config.uid, { enableAutoFocus: false, }); } @@ -423,7 +440,7 @@ global.MonsieurBizRichEditorManager = class { this.newPanel.dialog.innerHTML = formHtml; let form = this.newPanel.dialog; this.wysiwyg.load(form); - this.dispatchInitFormEvent(form); + this.dispatchInitFormEvent(form, this); // Form submit let formElement = form.querySelector('form'); @@ -490,7 +507,7 @@ global.MonsieurBizRichEditorManager = class { let form = this.editPanel.dialog; this.wysiwyg.load(form); - this.dispatchInitFormEvent(form); + this.dispatchInitFormEvent(form, this); // Form submit let formElement = form.querySelector('form'); @@ -677,9 +694,9 @@ global.MonsieurBizRichEditorManager = class { } } - dispatchInitFormEvent(form) { + dispatchInitFormEvent(form, manager) { document.dispatchEvent(new CustomEvent('monsieurBizRichEditorInitForm', { - 'detail': {'form': form} + 'detail': {'form': form, 'manager': manager} })); } }; diff --git a/composer.json b/composer.json index 41cd9ba2..af4e3bf9 100644 --- a/composer.json +++ b/composer.json @@ -80,7 +80,8 @@ "symfony/thanks": true, "phpstan/extension-installer": true, "ergebnis/composer-normalize": true, - "symfony/flex": true + "symfony/flex": true, + "php-http/discovery": true } } } diff --git a/screenshots/columns_and_rows.jpg b/screenshots/columns_and_rows.jpg new file mode 100644 index 00000000..0130edd7 Binary files /dev/null and b/screenshots/columns_and_rows.jpg differ diff --git a/src/Form/Type/UiElement/ColumnType.php b/src/Form/Type/UiElement/ColumnType.php new file mode 100644 index 00000000..7ee5c225 --- /dev/null +++ b/src/Form/Type/UiElement/ColumnType.php @@ -0,0 +1,38 @@ + + * + * For the full copyright and license information, please view the LICENSE.txt + * file that was distributed with this source code. + */ + +declare(strict_types=1); + +namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement; + +use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\RichEditorType; +use Symfony\Component\Form\AbstractType; +use Symfony\Component\Form\FormBuilderInterface; +use Symfony\Component\Validator\Constraints as Assert; + +class ColumnType extends AbstractType +{ + /** + * @inheritdoc + */ + public function buildForm(FormBuilderInterface $builder, array $options): void + { + $builder + ->add('content', RichEditorType::class, [ + 'required' => true, + 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.field.content', + 'constraints' => [ + new Assert\NotBlank([]), + ], + ]) + ; + } +} diff --git a/src/Form/Type/UiElement/RowType.php b/src/Form/Type/UiElement/RowType.php new file mode 100644 index 00000000..789b0cd6 --- /dev/null +++ b/src/Form/Type/UiElement/RowType.php @@ -0,0 +1,38 @@ + + * + * For the full copyright and license information, please view the LICENSE.txt + * file that was distributed with this source code. + */ + +declare(strict_types=1); + +namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement; + +use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\RichEditorType; +use Symfony\Component\Form\AbstractType; +use Symfony\Component\Form\FormBuilderInterface; +use Symfony\Component\Validator\Constraints as Assert; + +class RowType extends AbstractType +{ + /** + * @inheritdoc + */ + public function buildForm(FormBuilderInterface $builder, array $options): void + { + $builder + ->add('content', RichEditorType::class, [ + 'required' => true, + 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.field.content', + 'constraints' => [ + new Assert\NotBlank([]), + ], + ]) + ; + } +} diff --git a/src/Resources/config/richeditor.yaml b/src/Resources/config/richeditor.yaml index eb5e4f49..6e8272e6 100644 --- a/src/Resources/config/richeditor.yaml +++ b/src/Resources/config/richeditor.yaml @@ -142,3 +142,25 @@ monsieurbiz_sylius_richeditor: templates: admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/image_collection.html.twig' front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/image_collection.html.twig' + monsieurbiz.column: + alias: column + title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.title' + description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.description' + icon: columns + tags: [ default, layout ] + classes: + form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ColumnType + templates: + admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/column.html.twig' + front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/column.html.twig' + monsieurbiz.row: + alias: row + title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.title' + description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.description' + icon: columns + tags: [ default, layout ] + classes: + form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\RowType + templates: + admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/row.html.twig' + front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/row.html.twig' diff --git a/src/Resources/public/js/rich-editor-js.js b/src/Resources/public/js/rich-editor-js.js index 37a09130..c7716f97 100644 --- a/src/Resources/public/js/rich-editor-js.js +++ b/src/Resources/public/js/rich-editor-js.js @@ -2,4 +2,4 @@ /*! * mustache.js - Logic-less {{mustache}} templates with JavaScript * http://github.com/janl/mustache.js - */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function i(e){return"function"==typeof e}function n(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var s=RegExp.prototype.test,o=/\S/;function a(e){return!function(e,t){return s.call(e,t)}(o,e)}var l={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},c=/\s*/,u=/\s+/,d=/\s*=/,h=/\s*\}/,f=/#|\^|\/|>|\{|&|=|!/;function p(e){this.string=e,this.tail=e,this.pos=0}function m(e,t){this.view=e,this.cache={".":this.view},this.parent=t}function g(){this.templateCache={_cache:{},set:function(e,t){this._cache[e]=t},get:function(e){return this._cache[e]},clear:function(){this._cache={}}}}p.prototype.eos=function(){return""===this.tail},p.prototype.scan=function(e){var t=this.tail.match(e);if(!t||0!==t.index)return"";var i=t[0];return this.tail=this.tail.substring(i.length),this.pos+=i.length,i},p.prototype.scanUntil=function(e){var t,i=this.tail.search(e);switch(i){case-1:t=this.tail,this.tail="";break;case 0:t="";break;default:t=this.tail.substring(0,i),this.tail=this.tail.substring(i)}return this.pos+=t.length,t},m.prototype.push=function(e){return new m(e,this)},m.prototype.lookup=function(e){var t,n,s,o=this.cache;if(o.hasOwnProperty(e))t=o[e];else{for(var a,l,c,u=this,d=!1;u;){if(e.indexOf(".")>0)for(a=u.view,l=e.split("."),c=0;null!=a&&c0?r[r.length-1][4]:i;break;default:n.push(t)}return i}(function(e){for(var t,i,n=[],r=0,s=e.length;r"===o?a=this.renderPartial(s,t,i,r):"&"===o?a=this.unescapedValue(s,t):"name"===o?a=this.escapedValue(s,t):"text"===o&&(a=this.rawValue(s)),void 0!==a&&(l+=a);return l},g.prototype.renderSection=function(e,n,r,s){var o=this,a="",l=n.lookup(e[1]);if(l){if(t(l))for(var c=0,u=l.length;c0||!i)&&(r[s]=n+r[s]);return r.join("\n")},g.prototype.renderPartial=function(e,t,n,r){if(n){var s=i(n)?n(e[1]):n[e[1]];if(null!=s){var o=e[6],a=e[5],l=e[4],c=s;return 0==a&&l&&(c=this.indentPartial(s,l,o)),this.renderTokens(this.parse(c,r),t,n,c,r)}}},g.prototype.unescapedValue=function(e,t){var i=t.lookup(e[1]);if(null!=i)return i},g.prototype.escapedValue=function(e,t){var i=t.lookup(e[1]);if(null!=i)return v.escape(i)},g.prototype.rawValue=function(e){return e[1]};var v={name:"mustache.js",version:"4.0.1",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.render=function(e,i,n,r){if("string"!=typeof e)throw new TypeError('Invalid template! Template should be a "string" but "'+(t(s=e)?"array":typeof s)+'" was given as the first argument for mustache#render(template, view, partials)');var s;return y.render(e,i,n,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return l[e]}))},v.Scanner=p,v.Context=m,v.Writer=g,v}()},mf8f:function(e,t,i){"use strict";var n={documentSelector:".js-document",documentDisabledClass:"is-disabled",openingTriggerActiveClass:"is-active",delay:200},r=['[href]:not([tabindex^="-"])','input:not([disabled]):not([type="hidden"]):not([tabindex^="-"]):not([type="radio"])','input[type="radio"]:checked','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])','[contenteditable="true"]:not([tabindex^="-"])'],s="Escape",o="Tab",a="F6";function l(e,t){let i=e;for(;i!==t&&i;)i=i.parentNode;return!!i}const c=Symbol("onClick"),u=Symbol("onKeydown"),d=Symbol("addEventDelegation"),h=Symbol("addEventListeners"),f=Symbol("removeEventListeners"),p=Symbol("addAttributes"),m=Symbol("removeAttributes"),g=Symbol("setAttributes"),v=Symbol("setFocusableElements"),y=Symbol("setFocus"),b=Symbol("restoreFocus"),E=Symbol("switchFocus"),w=Symbol("maintainFocus"),S=Symbol("addObserver"),k=Symbol("removeObserver");let C=n;t.a=class{constructor(e,{onOpen:t=(()=>{}),onClose:i=(()=>{}),openingSelector:n,closingSelector:r,backdropSelector:s,helperSelector:o,labelledby:a,describedby:l,isModal:h=!0,isTooltip:f=!1,isOpen:p=!1,isCreated:m=!0,disableScroll:g=!0,enableAutoFocus:y=!0,openingTriggerActiveClass:b=C.openingTriggerActiveClass,delay:w=C.delay}={}){document.querySelector(e)?(this.config={dialogSelector:e,onOpen:t,onClose:i,openingSelector:n,closingSelector:r,backdropSelector:s,helperSelector:o,labelledby:a,describedby:l,isModal:h,isTooltip:f,isCreated:m,isOpen:p,disableScroll:g,enableAutoFocus:y,documentSelector:C.documentSelector,documentDisabledClass:C.documentDisabledClass,openingTriggerActiveClass:b,delay:w},this.dialog=document.querySelector(e),this.dialogArea=`${e}, ${n}`,this.openingTriggers=document.querySelectorAll(n),this.backdropTrigger=document.querySelector(s),this.helpers=document.querySelectorAll(o),this.document=document.querySelector(this.config.documentSelector)||document.querySelector("html"),this.documentIsAlreadyDisabled=!1,this.focusableElements=[],this.firstFocusableElement=null,this.lastFocusableElement=null,this.openingTrigger=null,this.closingTrigger=null,this.isCreated=!1,this.isOpen=!1,this.close=this.close.bind(this),this.toggle=this.toggle.bind(this),this[c]=this[c].bind(this),this[u]=this[u].bind(this),this[d]=this[d].bind(this),this[E]=this[E].bind(this),this.observer=new MutationObserver(e=>e.forEach(()=>this[v]())),this.isInitialized=!0,m&&this.create()):this.isInitialized=!1}[c](e){this.config.isTooltip&&!e.target.closest(this.dialogArea)&&this.close(e),e.target===this.backdropTrigger&&this.close(e)}[u](e){switch(e.key){case s:e.stopPropagation(),this.close(e);break;case a:this.config.isModal||(this.config.isTooltip?this.close(e):this[b]());break;case o:this[w](e)}}[d](e){document.querySelectorAll(this.config.openingSelector).forEach(t=>{l(e.target,t)&&(this.openingTrigger=t,this.toggle(e))}),document.querySelectorAll(this.config.closingSelector).forEach(t=>{l(e.target,t)&&(this.closingTrigger=t,this.close())})}[h](){document.addEventListener("click",this[c],{capture:!0}),this.dialog.addEventListener("keydown",this[u])}[f](){document.removeEventListener("click",this[c],{capture:!0}),this.dialog.removeEventListener("keydown",this[u]),this.openingTrigger&&this.openingTrigger.removeEventListener("keydown",this[E])}[p](){this.dialog.setAttribute("role","dialog"),this.dialog.setAttribute("tabindex",-1),this.dialog.setAttribute("aria-hidden",!0),this.config.labelledby&&this.dialog.setAttribute("aria-labelledby",this.config.labelledby),this.config.describedby&&this.dialog.setAttribute("aria-describedby",this.config.describedby),this.config.isModal&&this.dialog.setAttribute("aria-modal",!0),this.openingTriggers.forEach(e=>e.setAttribute("aria-haspopup","dialog"))}[m](){this.dialog.removeAttribute("role"),this.dialog.removeAttribute("tabindex"),this.dialog.removeAttribute("aria-hidden"),this.dialog.removeAttribute("aria-labelledby"),this.dialog.removeAttribute("aria-describedby"),this.dialog.removeAttribute("aria-modal"),this.config.disableScroll&&this.isOpen&&!this.documentIsAlreadyDisabled&&this.document.classList.remove(this.config.documentDisabledClass),this.openingTriggers.forEach(e=>e.removeAttribute("aria-haspopup")),this.openingTrigger&&this.openingTrigger.classList.remove(this.config.openingTriggerActiveClass),this.helpers.forEach(e=>e.classList.remove(this.config.openingTriggerActiveClass))}[g](){this.dialog.setAttribute("aria-hidden",!this.isOpen),this.config.disableScroll&&!this.documentIsAlreadyDisabled&&(this.isOpen?this.document.classList.add(this.config.documentDisabledClass):this.document.classList.remove(this.config.documentDisabledClass)),this.openingTrigger&&(this.isOpen?this.openingTrigger.classList.add(this.config.openingTriggerActiveClass):this.openingTrigger.classList.remove(this.config.openingTriggerActiveClass)),this.helpers.forEach(e=>{this.isOpen?e.classList.add(this.config.openingTriggerActiveClass):e.classList.remove(this.config.openingTriggerActiveClass)})}[v](){const e=function(e){const t=[];return e.forEach(e=>{const i=e.getBoundingClientRect();(i.width>0||i.height>0)&&t.push(e)}),t}(this.dialog.querySelectorAll(r)),t=function(e,t,i){const n=e.querySelectorAll(t),r=[];let s=!1;return 0===n.length?i:(i.forEach(e=>{n.forEach(t=>{t.contains(e)&&(s=!0)}),s||r.push(e),s=!1}),r)}(this.dialog,'[role="dialog"]',e);this.focusableElements=t.length>0?t:[this.dialog],[this.firstFocusableElement]=this.focusableElements,this.lastFocusableElement=this.focusableElements[this.focusableElements.length-1]}[y](){this.config.enableAutoFocus&&window.setTimeout(()=>this.firstFocusableElement.focus(),this.config.delay)}[b](){this.config.enableAutoFocus&&window.setTimeout(()=>this.openingTrigger.focus(),this.config.delay),this.isOpen&&this.openingTrigger.addEventListener("keydown",this[E])}[E](e){e.key===a&&(this.openingTrigger.removeEventListener("keydown",this[E]),this[y]())}[w](e){e.shiftKey&&e.target===this.firstFocusableElement&&(e.preventDefault(),this.lastFocusableElement.focus()),e.shiftKey||e.target!==this.lastFocusableElement||(e.preventDefault(),this.firstFocusableElement.focus())}[S](){this.observer.observe(this.dialog,{childList:!0,attributes:!0,subtree:!0})}[k](){this.observer.disconnect()}open(){this.isInitialized&&this.isCreated&&!this.isOpen&&(this.isOpen=!0,this.documentIsAlreadyDisabled=this.document.classList.contains(this.config.documentDisabledClass),this[g](),this[h](),this[y](),this.config.onOpen(this.dialog,this.openingTrigger))}close(e){this.isInitialized&&this.isCreated&&this.isOpen&&(this.isOpen=!1,e&&e.preventDefault(),this[g](),this[f](),this.openingTrigger&&(!this.config.isTooltip||this.config.isTooltip&&e&&"click"!==e.type)&&this[b](),this.config.onClose(this.dialog,this.closingTrigger))}toggle(e){this.isInitialized&&this.isCreated&&(e&&e.preventDefault(),this.isOpen?this.close():this.open())}create(){this.isInitialized&&!this.isCreated&&(this.isCreated=!0,this[p](),this[v](),this[S](),this.config.isOpen&&this.open(),document.addEventListener("click",this[d],{capture:!0}))}destroy(){this.isInitialized&&this.isCreated&&(this.close(),this.isCreated=!1,this[m](),this[f](),this[k](),document.removeEventListener("click",this[d],{capture:!0}))}}},ng4s:function(e,t,i){"use strict";i.r(t),function(e){var t=i("P50k"),n=i.n(t),r=i("mf8f"),s=i("W4wD"),o=i.n(s);function a(e,t){var i;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(i=function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return l(e,t)}(e))||t&&e&&"number"==typeof e.length){i&&(e=i);var n=0,r=function(){};return{s:r,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,o=!0,a=!1;return{s:function(){i=e[Symbol.iterator]()},n:function(){var e=i.next();return o=e.done,e},e:function(e){a=!0,s=e},f:function(){try{o||null==i.return||i.return()}finally{if(a)throw s}}}}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=new Array(t);i0)for(var r in n=!this.tagsAreExclusive,this.tags){var s=this.tags[r].replace(/^(-|\+)/,"");0<=this.config.uielements[i].tags.indexOf(s)&&(n=!this.tags[r].startsWith("-"))}n&&t.append(this.getNewUiElementCard(this.config.uielements[i],e))}this.newPanel.close(),this.selectionPanel.open()}},{key:"drawNewForm",value:function(e,t){this.newPanel.dialog.innerHTML=e;var i=this.newPanel.dialog;this.wysiwyg.load(i),this.dispatchInitFormEvent(i);var n=i.querySelector("form");n.manager=this,n.position=t,n.addEventListener("submit",(function(e){e.preventDefault();var t=e.currentTarget;return t.manager.submitUiElementForm(t,(function(){if(200===this.status){var e=JSON.parse(this.responseText);e.error?this.form.manager.drawNewForm(e.form_html,this.form.position):(this.form.manager.create(e.code,e.data,e.previewHtml,this.form.position),this.form.manager.newPanel.close(),this.form.manager.selectionPanel.close())}200!==this.status&&alert(this.form.manager.config.errorMessage)})),!1}));var r=i.querySelector(".js-uie-cancel");r.panel=this.newPanel,r.addEventListener("click",(function(e){e.currentTarget.panel.close()}));var s=i.querySelector(".js-uie-save");s.panel=this.newPanel,s.addEventListener("click",(function(e){e.currentTarget.panel.dialog.querySelector("form").dispatchEvent(new Event("submit",{cancelable:!0}))}))}},{key:"openNewPanel",value:function(e,t,i){this.newPanel.dialog.manager=this,this.newPanel.dialog.position=i,this.drawNewForm(e,i),this.newPanel.open()}},{key:"editUiElement",value:function(e){this.loadUiElementEditForm(e,(function(t){if(200===this.status){var i=JSON.parse(this.responseText);e.manager.openEditPanel(i.form_html,e)}}))}},{key:"drawEditForm",value:function(e,t){this.editPanel.dialog.querySelector(".js-uie-content").innerHTML=e;var i=this.editPanel.dialog;this.wysiwyg.load(i),this.dispatchInitFormEvent(i);var n=i.querySelector("form");n.manager=this,n.uiElement=t,n.addEventListener("submit",(function(e){e.preventDefault();var t=e.currentTarget;return t.manager.submitUiElementForm(t,(function(){if(200===this.status){var e=JSON.parse(this.responseText);e.error?this.form.manager.drawEditForm(e.form_html,this.form.uiElement):(this.form.uiElement.data=e.data,this.form.uiElement.previewHtml=e.previewHtml,this.form.manager.write(),this.form.manager.editPanel.close())}200!==this.status&&alert(this.config.errorMessage)})),!1}));var r=i.querySelector(".js-uie-cancel");r.panel=this.editPanel,r.addEventListener("click",(function(e){e.currentTarget.panel.close()}));var s=i.querySelector(".js-uie-save");s.panel=this.editPanel,s.addEventListener("click",(function(e){e.currentTarget.panel.dialog.querySelector("form").dispatchEvent(new Event("submit",{cancelable:!0}))}))}},{key:"openEditPanel",value:function(e,t){this.editPanel.dialog.manager=this,this.editPanel.dialog.uiElement=t,this.drawEditForm(e,t),this.editPanel.open()}},{key:"write",value:function(){this.input.value=this.uiElements.length>0?JSON.stringify(this.uiElements):"",this.drawUiElements(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:write-complete",{detail:{editorManager:this}}))}},{key:"create",value:function(e,t,i,n){var r=new MonsieurBizRichEditorUiElement(this.config,e,t,i);return this.uiElements.splice(n,0,r),this.write(),r}},{key:"moveUp",value:function(e){var t=this.uiElements.indexOf(e);0!==t&&(this.uiElements.splice(t,1),this.uiElements.splice(t-1,0,e),this.write())}},{key:"moveDown",value:function(e){var t=this.uiElements.indexOf(e);t!==this.uiElements.length-1&&(this.uiElements.splice(t,1),this.uiElements.splice(t+1,0,e),this.write())}},{key:"delete",value:function(e){var t=this.uiElements.indexOf(e);this.uiElements.splice(t,1),this.write()}},{key:"loadUiElementCreateForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t;var n=this.config.createElementFormUrl;i.open("get",n.replace("__CODE__",e.code),!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.send()}},{key:"loadUiElementEditForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t;var n=this.config.editElementFormUrl;i.open("post",n.replace("__CODE__",e.code),!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),i.send(new URLSearchParams({data:JSON.stringify(e.data)}).toString())}},{key:"submitUiElementForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t,i.form=e,i.open("post",e.action,!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.send(new FormData(e))}},{key:"requestUiElementsHtml",value:function(e,t){var i=new XMLHttpRequest;i.onload=t,i.open("post",this.config.renderElementsUrl,!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest");var n=new FormData;n.append("ui_elements",JSON.stringify(e)),this.input.dataset.locale&&n.append("locale",this.input.dataset.locale),i.uiElements=e,i.manager=this,i.send(n)}},{key:"isClipboardEmpty",value:function(){var e=window.sessionStorage.getItem("monsieurBizRichEditorClipboard");return null===e||""===e}},{key:"saveUiElementToClipboard",value:function(e,t){window.sessionStorage.setItem("monsieurBizRichEditorClipboard",JSON.stringify(e)),t(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:uielement:copied",{}))}},{key:"pasteUiElementFromClipboard",value:function(e){var t=window.sessionStorage.getItem("monsieurBizRichEditorClipboard");if(null!==t){var i=JSON.parse(t),n=this;n.requestUiElementsHtml([i],(function(){if(200===this.status){var t=JSON.parse(this.responseText).shift();void 0===i.code&&void 0!==i.type&&(i.code=i.type,i.data=i.fields,delete i.type,delete i.fields);var r=n.config.findUiElementByCode(i.code);if(null!==r)if(n.tags.length>0){var s=!1;for(var o in n.tags)0<=n.config.uielements[r.code].tags.indexOf(n.tags[o])&&(s=!0);s?n.create(r.code,i.data,t,e):alert(n.config.unallowedUiElementMessage)}else n.create(r.code,i.data,t,e)}}))}}},{key:"dispatchInitFormEvent",value:function(e){document.dispatchEvent(new CustomEvent("monsieurBizRichEditorInitForm",{detail:{form:e}}))}},{key:"input",get:function(){return this.config.input}},{key:"wysiwyg",get:function(){return this.config.wysiwyg}}]),e}()}.call(this,i("2mad"))}}); \ No newline at end of file + */var e=Object.prototype.toString,t=Array.isArray||function(t){return"[object Array]"===e.call(t)};function i(e){return"function"==typeof e}function n(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function r(e,t){return null!=e&&"object"==typeof e&&t in e}var s=RegExp.prototype.test,o=/\S/;function a(e){return!function(e,t){return s.call(e,t)}(o,e)}var l={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="},c=/\s*/,u=/\s+/,d=/\s*=/,h=/\s*\}/,f=/#|\^|\/|>|\{|&|=|!/;function p(e){this.string=e,this.tail=e,this.pos=0}function m(e,t){this.view=e,this.cache={".":this.view},this.parent=t}function g(){this.templateCache={_cache:{},set:function(e,t){this._cache[e]=t},get:function(e){return this._cache[e]},clear:function(){this._cache={}}}}p.prototype.eos=function(){return""===this.tail},p.prototype.scan=function(e){var t=this.tail.match(e);if(!t||0!==t.index)return"";var i=t[0];return this.tail=this.tail.substring(i.length),this.pos+=i.length,i},p.prototype.scanUntil=function(e){var t,i=this.tail.search(e);switch(i){case-1:t=this.tail,this.tail="";break;case 0:t="";break;default:t=this.tail.substring(0,i),this.tail=this.tail.substring(i)}return this.pos+=t.length,t},m.prototype.push=function(e){return new m(e,this)},m.prototype.lookup=function(e){var t,n,s,o=this.cache;if(o.hasOwnProperty(e))t=o[e];else{for(var a,l,c,u=this,d=!1;u;){if(e.indexOf(".")>0)for(a=u.view,l=e.split("."),c=0;null!=a&&c0?r[r.length-1][4]:i;break;default:n.push(t)}return i}(function(e){for(var t,i,n=[],r=0,s=e.length;r"===o?a=this.renderPartial(s,t,i,r):"&"===o?a=this.unescapedValue(s,t):"name"===o?a=this.escapedValue(s,t,r):"text"===o&&(a=this.rawValue(s)),void 0!==a&&(l+=a);return l},g.prototype.renderSection=function(e,n,r,s,o){var a=this,l="",c=n.lookup(e[1]);if(c){if(t(c))for(var u=0,d=c.length;u0||!i)&&(r[s]=n+r[s]);return r.join("\n")},g.prototype.renderPartial=function(e,t,n,r){if(n){var s=this.getConfigTags(r),o=i(n)?n(e[1]):n[e[1]];if(null!=o){var a=e[6],l=e[5],c=e[4],u=o;0==l&&c&&(u=this.indentPartial(o,c,a));var d=this.parse(u,s);return this.renderTokens(d,t,n,u,r)}}},g.prototype.unescapedValue=function(e,t){var i=t.lookup(e[1]);if(null!=i)return i},g.prototype.escapedValue=function(e,t,i){var n=this.getConfigEscape(i)||v.escape,r=t.lookup(e[1]);if(null!=r)return"number"==typeof r&&n===v.escape?String(r):n(r)},g.prototype.rawValue=function(e){return e[1]},g.prototype.getConfigTags=function(e){return t(e)?e:e&&"object"==typeof e?e.tags:void 0},g.prototype.getConfigEscape=function(e){return e&&"object"==typeof e&&!t(e)?e.escape:void 0};var v={name:"mustache.js",version:"4.2.0",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(e){y.templateCache=e},get templateCache(){return y.templateCache}},y=new g;return v.clearCache=function(){return y.clearCache()},v.parse=function(e,t){return y.parse(e,t)},v.render=function(e,i,n,r){if("string"!=typeof e)throw new TypeError('Invalid template! Template should be a "string" but "'+(t(s=e)?"array":typeof s)+'" was given as the first argument for mustache#render(template, view, partials)');var s;return y.render(e,i,n,r)},v.escape=function(e){return String(e).replace(/[&<>"'`=\/]/g,(function(e){return l[e]}))},v.Scanner=p,v.Context=m,v.Writer=g,v}()},mf8f:function(e,t,i){"use strict";var n={documentSelector:".js-document",documentDisabledClass:"is-disabled",openingTriggerActiveClass:"is-active",delay:200},r=['[href]:not([tabindex^="-"])','input:not([disabled]):not([type="hidden"]):not([tabindex^="-"]):not([type="radio"])','input[type="radio"]:checked','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])','[contenteditable="true"]:not([tabindex^="-"])'],s="Escape",o="Tab",a="F6";function l(e,t){let i=e;for(;i!==t&&i;)i=i.parentNode;return!!i}const c=Symbol("onClick"),u=Symbol("onKeydown"),d=Symbol("addEventDelegation"),h=Symbol("addEventListeners"),f=Symbol("removeEventListeners"),p=Symbol("addAttributes"),m=Symbol("removeAttributes"),g=Symbol("setAttributes"),v=Symbol("setFocusableElements"),y=Symbol("setFocus"),b=Symbol("restoreFocus"),E=Symbol("switchFocus"),w=Symbol("maintainFocus"),S=Symbol("addObserver"),k=Symbol("removeObserver");let C=n;t.a=class{constructor(e,{onOpen:t=(()=>{}),onClose:i=(()=>{}),openingSelector:n,closingSelector:r,backdropSelector:s,helperSelector:o,labelledby:a,describedby:l,isModal:h=!0,isTooltip:f=!1,isOpen:p=!1,isCreated:m=!0,disableScroll:g=!0,enableAutoFocus:y=!0,openingTriggerActiveClass:b=C.openingTriggerActiveClass,delay:w=C.delay}={}){document.querySelector(e)?(this.config={dialogSelector:e,onOpen:t,onClose:i,openingSelector:n,closingSelector:r,backdropSelector:s,helperSelector:o,labelledby:a,describedby:l,isModal:h,isTooltip:f,isCreated:m,isOpen:p,disableScroll:g,enableAutoFocus:y,documentSelector:C.documentSelector,documentDisabledClass:C.documentDisabledClass,openingTriggerActiveClass:b,delay:w},this.dialog=document.querySelector(e),this.dialogArea=`${e}, ${n}`,this.openingTriggers=document.querySelectorAll(n),this.backdropTrigger=document.querySelector(s),this.helpers=document.querySelectorAll(o),this.document=document.querySelector(this.config.documentSelector)||document.querySelector("html"),this.documentIsAlreadyDisabled=!1,this.focusableElements=[],this.firstFocusableElement=null,this.lastFocusableElement=null,this.openingTrigger=null,this.closingTrigger=null,this.isCreated=!1,this.isOpen=!1,this.close=this.close.bind(this),this.toggle=this.toggle.bind(this),this[c]=this[c].bind(this),this[u]=this[u].bind(this),this[d]=this[d].bind(this),this[E]=this[E].bind(this),this.observer=new MutationObserver(e=>e.forEach(()=>this[v]())),this.isInitialized=!0,m&&this.create()):this.isInitialized=!1}[c](e){this.config.isTooltip&&!e.target.closest(this.dialogArea)&&this.close(e),e.target===this.backdropTrigger&&this.close(e)}[u](e){switch(e.key){case s:e.stopPropagation(),this.close(e);break;case a:this.config.isModal||(this.config.isTooltip?this.close(e):this[b]());break;case o:this[w](e)}}[d](e){document.querySelectorAll(this.config.openingSelector).forEach(t=>{l(e.target,t)&&(this.openingTrigger=t,this.toggle(e))}),document.querySelectorAll(this.config.closingSelector).forEach(t=>{l(e.target,t)&&(this.closingTrigger=t,this.close())})}[h](){document.addEventListener("click",this[c],{capture:!0}),this.dialog.addEventListener("keydown",this[u])}[f](){document.removeEventListener("click",this[c],{capture:!0}),this.dialog.removeEventListener("keydown",this[u]),this.openingTrigger&&this.openingTrigger.removeEventListener("keydown",this[E])}[p](){this.dialog.setAttribute("role","dialog"),this.dialog.setAttribute("tabindex",-1),this.dialog.setAttribute("aria-hidden",!0),this.config.labelledby&&this.dialog.setAttribute("aria-labelledby",this.config.labelledby),this.config.describedby&&this.dialog.setAttribute("aria-describedby",this.config.describedby),this.config.isModal&&this.dialog.setAttribute("aria-modal",!0),this.openingTriggers.forEach(e=>e.setAttribute("aria-haspopup","dialog"))}[m](){this.dialog.removeAttribute("role"),this.dialog.removeAttribute("tabindex"),this.dialog.removeAttribute("aria-hidden"),this.dialog.removeAttribute("aria-labelledby"),this.dialog.removeAttribute("aria-describedby"),this.dialog.removeAttribute("aria-modal"),this.config.disableScroll&&this.isOpen&&!this.documentIsAlreadyDisabled&&this.document.classList.remove(this.config.documentDisabledClass),this.openingTriggers.forEach(e=>e.removeAttribute("aria-haspopup")),this.openingTrigger&&this.openingTrigger.classList.remove(this.config.openingTriggerActiveClass),this.helpers.forEach(e=>e.classList.remove(this.config.openingTriggerActiveClass))}[g](){this.dialog.setAttribute("aria-hidden",!this.isOpen),this.config.disableScroll&&!this.documentIsAlreadyDisabled&&(this.isOpen?this.document.classList.add(this.config.documentDisabledClass):this.document.classList.remove(this.config.documentDisabledClass)),this.openingTrigger&&(this.isOpen?this.openingTrigger.classList.add(this.config.openingTriggerActiveClass):this.openingTrigger.classList.remove(this.config.openingTriggerActiveClass)),this.helpers.forEach(e=>{this.isOpen?e.classList.add(this.config.openingTriggerActiveClass):e.classList.remove(this.config.openingTriggerActiveClass)})}[v](){const e=function(e){const t=[];return e.forEach(e=>{const i=e.getBoundingClientRect();(i.width>0||i.height>0)&&t.push(e)}),t}(this.dialog.querySelectorAll(r)),t=function(e,t,i){const n=e.querySelectorAll(t),r=[];let s=!1;return 0===n.length?i:(i.forEach(e=>{n.forEach(t=>{t.contains(e)&&(s=!0)}),s||r.push(e),s=!1}),r)}(this.dialog,'[role="dialog"]',e);this.focusableElements=t.length>0?t:[this.dialog],[this.firstFocusableElement]=this.focusableElements,this.lastFocusableElement=this.focusableElements[this.focusableElements.length-1]}[y](){this.config.enableAutoFocus&&window.setTimeout(()=>this.firstFocusableElement.focus(),this.config.delay)}[b](){this.config.enableAutoFocus&&window.setTimeout(()=>this.openingTrigger.focus(),this.config.delay),this.isOpen&&this.openingTrigger.addEventListener("keydown",this[E])}[E](e){e.key===a&&(this.openingTrigger.removeEventListener("keydown",this[E]),this[y]())}[w](e){e.shiftKey&&e.target===this.firstFocusableElement&&(e.preventDefault(),this.lastFocusableElement.focus()),e.shiftKey||e.target!==this.lastFocusableElement||(e.preventDefault(),this.firstFocusableElement.focus())}[S](){this.observer.observe(this.dialog,{childList:!0,attributes:!0,subtree:!0})}[k](){this.observer.disconnect()}open(){this.isInitialized&&this.isCreated&&!this.isOpen&&(this.isOpen=!0,this.documentIsAlreadyDisabled=this.document.classList.contains(this.config.documentDisabledClass),this[g](),this[h](),this[y](),this.config.onOpen(this.dialog,this.openingTrigger))}close(e){this.isInitialized&&this.isCreated&&this.isOpen&&(this.isOpen=!1,e&&e.preventDefault(),this[g](),this[f](),this.openingTrigger&&(!this.config.isTooltip||this.config.isTooltip&&e&&"click"!==e.type)&&this[b](),this.config.onClose(this.dialog,this.closingTrigger))}toggle(e){this.isInitialized&&this.isCreated&&(e&&e.preventDefault(),this.isOpen?this.close():this.open())}create(){this.isInitialized&&!this.isCreated&&(this.isCreated=!0,this[p](),this[v](),this[S](),this.config.isOpen&&this.open(),document.addEventListener("click",this[d],{capture:!0}))}destroy(){this.isInitialized&&this.isCreated&&(this.close(),this.isCreated=!1,this[m](),this[f](),this[k](),document.removeEventListener("click",this[d],{capture:!0}))}}},ng4s:function(e,t,i){"use strict";i.r(t),function(e){var t=i("P50k"),n=i.n(t),r=i("mf8f"),s=i("W4wD"),o=i.n(s);function a(e,t){var i="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!i){if(Array.isArray(e)||(i=function(e,t){if(!e)return;if("string"==typeof e)return l(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return l(e,t)}(e))||t&&e&&"number"==typeof e.length){i&&(e=i);var n=0,r=function(){};return{s:r,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,o=!0,a=!1;return{s:function(){i=i.call(e)},n:function(){var e=i.next();return o=e.done,e},e:function(e){a=!0,s=e},f:function(){try{o||null==i.return||i.return()}finally{if(a)throw s}}}}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=new Array(t);i0)for(var r in n=!this.tagsAreExclusive,this.tags){var s=this.tags[r].replace(/^(-|\+)/,"");0<=this.config.uielements[i].tags.indexOf(s)&&(n=!this.tags[r].startsWith("-"))}n&&t.append(this.getNewUiElementCard(this.config.uielements[i],e))}this.newPanel.close(),this.selectionPanel.open()}},{key:"drawNewForm",value:function(e,t){this.newPanel.dialog.innerHTML=e;var i=this.newPanel.dialog;this.wysiwyg.load(i),this.dispatchInitFormEvent(i,this);var n=i.querySelector("form");n.manager=this,n.position=t,n.addEventListener("submit",(function(e){e.preventDefault();var t=e.currentTarget;return t.manager.submitUiElementForm(t,(function(){if(200===this.status){var e=JSON.parse(this.responseText);e.error?this.form.manager.drawNewForm(e.form_html,this.form.position):(this.form.manager.create(e.code,e.data,e.previewHtml,this.form.position),this.form.manager.newPanel.close(),this.form.manager.selectionPanel.close())}200!==this.status&&alert(this.form.manager.config.errorMessage)})),!1}));var r=i.querySelector(".js-uie-cancel");r.panel=this.newPanel,r.addEventListener("click",(function(e){e.currentTarget.panel.close()}));var s=i.querySelector(".js-uie-save");s.panel=this.newPanel,s.addEventListener("click",(function(e){e.currentTarget.panel.dialog.querySelector("form").dispatchEvent(new Event("submit",{cancelable:!0}))}))}},{key:"openNewPanel",value:function(e,t,i){this.newPanel.dialog.manager=this,this.newPanel.dialog.position=i,this.drawNewForm(e,i),this.newPanel.open()}},{key:"editUiElement",value:function(e){this.loadUiElementEditForm(e,(function(t){if(200===this.status){var i=JSON.parse(this.responseText);e.manager.openEditPanel(i.form_html,e)}}))}},{key:"drawEditForm",value:function(e,t){this.editPanel.dialog.querySelector(".js-uie-content").innerHTML=e;var i=this.editPanel.dialog;this.wysiwyg.load(i),this.dispatchInitFormEvent(i,this);var n=i.querySelector("form");n.manager=this,n.uiElement=t,n.addEventListener("submit",(function(e){e.preventDefault();var t=e.currentTarget;return t.manager.submitUiElementForm(t,(function(){if(200===this.status){var e=JSON.parse(this.responseText);e.error?this.form.manager.drawEditForm(e.form_html,this.form.uiElement):(this.form.uiElement.data=e.data,this.form.uiElement.previewHtml=e.previewHtml,this.form.manager.write(),this.form.manager.editPanel.close())}200!==this.status&&alert(this.config.errorMessage)})),!1}));var r=i.querySelector(".js-uie-cancel");r.panel=this.editPanel,r.addEventListener("click",(function(e){e.currentTarget.panel.close()}));var s=i.querySelector(".js-uie-save");s.panel=this.editPanel,s.addEventListener("click",(function(e){e.currentTarget.panel.dialog.querySelector("form").dispatchEvent(new Event("submit",{cancelable:!0}))}))}},{key:"openEditPanel",value:function(e,t){this.editPanel.dialog.manager=this,this.editPanel.dialog.uiElement=t,this.drawEditForm(e,t),this.editPanel.open()}},{key:"write",value:function(){this.input.value=this.uiElements.length>0?JSON.stringify(this.uiElements):"",this.drawUiElements(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:write-complete",{detail:{editorManager:this}}))}},{key:"create",value:function(e,t,i,n){var r=new MonsieurBizRichEditorUiElement(this.config,e,t,i);return this.uiElements.splice(n,0,r),this.write(),r}},{key:"moveUp",value:function(e){var t=this.uiElements.indexOf(e);0!==t&&(this.uiElements.splice(t,1),this.uiElements.splice(t-1,0,e),this.write())}},{key:"moveDown",value:function(e){var t=this.uiElements.indexOf(e);t!==this.uiElements.length-1&&(this.uiElements.splice(t,1),this.uiElements.splice(t+1,0,e),this.write())}},{key:"delete",value:function(e){var t=this.uiElements.indexOf(e);this.uiElements.splice(t,1),this.write()}},{key:"loadUiElementCreateForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t;var n=this.config.createElementFormUrl;i.open("get",n.replace("__CODE__",e.code),!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.send()}},{key:"loadUiElementEditForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t;var n=this.config.editElementFormUrl;i.open("post",n.replace("__CODE__",e.code),!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),i.send(new URLSearchParams({data:JSON.stringify(e.data)}).toString())}},{key:"submitUiElementForm",value:function(e,t){var i=new XMLHttpRequest;i.onload=t,i.form=e,i.open("post",e.action,!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest"),i.send(new FormData(e))}},{key:"requestUiElementsHtml",value:function(e,t){var i=new XMLHttpRequest;i.onload=t,i.open("post",this.config.renderElementsUrl,!0),i.setRequestHeader("X-Requested-With","XMLHttpRequest");var n=new FormData;n.append("ui_elements",JSON.stringify(e)),this.input.dataset.locale&&n.append("locale",this.input.dataset.locale),i.uiElements=e,i.manager=this,i.send(n)}},{key:"isClipboardEmpty",value:function(){var e=window.sessionStorage.getItem("monsieurBizRichEditorClipboard");return null===e||""===e}},{key:"saveUiElementToClipboard",value:function(e,t){window.sessionStorage.setItem("monsieurBizRichEditorClipboard",JSON.stringify(e)),t(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:uielement:copied",{}))}},{key:"pasteUiElementFromClipboard",value:function(e){var t=window.sessionStorage.getItem("monsieurBizRichEditorClipboard");if(null!==t){var i=JSON.parse(t),n=this;n.requestUiElementsHtml([i],(function(){if(200===this.status){var t=JSON.parse(this.responseText).shift();void 0===i.code&&void 0!==i.type&&(i.code=i.type,i.data=i.fields,delete i.type,delete i.fields);var r=n.config.findUiElementByCode(i.code);if(null!==r)if(n.tags.length>0){var s=!1;for(var o in n.tags)0<=n.config.uielements[r.code].tags.indexOf(n.tags[o])&&(s=!0);s?n.create(r.code,i.data,t,e):alert(n.config.unallowedUiElementMessage)}else n.create(r.code,i.data,t,e)}}))}}},{key:"dispatchInitFormEvent",value:function(e,t){document.dispatchEvent(new CustomEvent("monsieurBizRichEditorInitForm",{detail:{form:e,manager:t}}))}}]),e}()}.call(this,i("2mad"))}}); \ No newline at end of file diff --git a/src/Resources/translations/messages.en.yml b/src/Resources/translations/messages.en.yml index 719c2154..4c90c0e3 100644 --- a/src/Resources/translations/messages.en.yml +++ b/src/Resources/translations/messages.en.yml @@ -1,5 +1,15 @@ monsieurbiz_richeditor_plugin: ui_element: + monsieurbiz.column: + title: 'Column Layout Element' + description: 'A layout to display elements as a column' + field: + content: 'Content' + monsieurbiz.row: + title: 'Row Layout Element' + description: 'A layout to display elements as a row' + field: + content: 'Content' monsieurbiz.html: title: 'HTML Element' description: 'An element with raw data' diff --git a/src/Resources/translations/messages.fr.yml b/src/Resources/translations/messages.fr.yml index dc64a621..6bcdd831 100644 --- a/src/Resources/translations/messages.fr.yml +++ b/src/Resources/translations/messages.fr.yml @@ -1,5 +1,15 @@ monsieurbiz_richeditor_plugin: ui_element: + monsieurbiz.column: + title: 'Lame Colonne' + description: 'Une lame contenant d''autres lames affichées en colonne' + field: + content: 'Contenu' + monsieurbiz.row: + title: 'Lame Ligne' + description: 'Une lame contenant d''autres lames affichées côte à côte' + field: + content: 'Contenu' monsieurbiz.html: title: 'Lame HTML' description: 'Une lame contenant un contenu en brut' diff --git a/src/Resources/translations/messages.hr.yml b/src/Resources/translations/messages.hr.yml index a94eea9d..654b1b43 100644 --- a/src/Resources/translations/messages.hr.yml +++ b/src/Resources/translations/messages.hr.yml @@ -1,5 +1,15 @@ monsieurbiz_richeditor_plugin: ui_element: + monsieurbiz.column: + title: 'Kolona' + description: 'Element koji sadrži druge elemente unutra' + field: + content: 'Sadržaj' + monsieurbiz.row: + title: 'Red' + description: 'Element koji sadrži druge elemente unutra' + field: + content: 'Sadržaj' monsieurbiz.html: title: 'Neobrađeni HTML' description: 'Element koji sadrži neobrađeni HTML.' diff --git a/src/Resources/translations/messages.nl.yml b/src/Resources/translations/messages.nl.yml index b78afaa1..5279b383 100644 --- a/src/Resources/translations/messages.nl.yml +++ b/src/Resources/translations/messages.nl.yml @@ -1,5 +1,15 @@ monsieurbiz_richeditor_plugin: ui_element: + monsieurbiz.column: + title: 'Kolom' + description: 'Een element met een lijst met elementen erin' + field: + content: 'Inhoud' + monsieurbiz.row: + title: 'Rij' + description: 'Een element met een lijst met elementen erin' + field: + content: 'Inhoud' monsieurbiz.html: title: 'HTML' description: 'Een element met HTML-code' diff --git a/src/Resources/views/Admin/UiElement/column.html.twig b/src/Resources/views/Admin/UiElement/column.html.twig new file mode 100644 index 00000000..d4a4360c --- /dev/null +++ b/src/Resources/views/Admin/UiElement/column.html.twig @@ -0,0 +1,16 @@ +{# + UI Element template + type: columns + element fields : + content +#} +{% if element.content|default('') is not empty %} +
+ {% set content = monsieurbiz_richeditor_get_elements(element.content) %} + {% for row in content %} +
+ {{ row | monsieurbiz_richeditor_render_element }} +
+ {% endfor %} +
+{% endif %} diff --git a/src/Resources/views/Admin/UiElement/row.html.twig b/src/Resources/views/Admin/UiElement/row.html.twig new file mode 100644 index 00000000..1db8ccf8 --- /dev/null +++ b/src/Resources/views/Admin/UiElement/row.html.twig @@ -0,0 +1,16 @@ +{# + UI Element template + type: row + element fields : + content +#} +{% if element.content|default('') is not empty %} +
+ {% set content = monsieurbiz_richeditor_get_elements(element.content) %} + {% for column in content %} +
+ {{ column | monsieurbiz_richeditor_render_element }} +
+ {% endfor %} +
+{% endif %} diff --git a/src/Resources/views/Admin/app.html.twig b/src/Resources/views/Admin/app.html.twig index 455f4d2d..d7f65594 100644 --- a/src/Resources/views/Admin/app.html.twig +++ b/src/Resources/views/Admin/app.html.twig @@ -83,14 +83,16 @@ {% endverbatim %} -
-
+ -
+