From b60c15127041f7d623a3b13b4ef2b851c6ce1c20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Gonella?= Date: Mon, 19 Feb 2024 15:18:37 +0100 Subject: [PATCH 01/10] Add toolbox on top of each richeditor widget --- assets/css/app.scss | 4 ++ assets/js/app.js | 52 ++++++++++++++++++-- src/Resources/public/css/rich-editor-css.css | 2 +- src/Resources/public/js/rich-editor-js.js | 2 +- src/Resources/translations/messages.en.yml | 2 + src/Resources/translations/messages.fr.yml | 2 + src/Resources/views/Admin/app.html.twig | 15 +++++- 7 files changed, 71 insertions(+), 8 deletions(-) diff --git a/assets/css/app.scss b/assets/css/app.scss index a51d181f..18813fc9 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -209,6 +209,10 @@ html.is-disabled body { align-items: center !important; } +.uie-flex-cross-right { + justify-content: flex-end !important; +} + .uie-flex-main-between { justify-content: space-between !important; } diff --git a/assets/js/app.js b/assets/js/app.js index b70cdd36..94cdd047 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -242,6 +242,8 @@ global.MonsieurBizRichEditorManager = class { initInterface() { this.initUiElementsInterface(); this.initUiPanelsInterface(); + this.initUiToolsInterface(); + document.dispatchEvent(new CustomEvent('mbiz:rich-editor:init-interface-complete', { 'detail': {'editorManager': this} })); @@ -252,6 +254,24 @@ global.MonsieurBizRichEditorManager = class { }.bind(this)); } + initUiToolsInterface() { + const copyAllButton = this.container.querySelector('.js-uie-tools-copy-all'); + const pasteAllButton = this.container.querySelector('.js-uie-tools-paste-all'); + const trashAllButton = this.container.querySelector('.js-uie-tools-trash-all'); + + trashAllButton.addEventListener('click', e => { + this.resetUiElements(); + }); + + copyAllButton.addEventListener('click', e => { + this.saveUiElementsToClipboard(); + }); + + pasteAllButton.addEventListener('click', e => { + this.pasteUiElementsFromClipboard(); + }); + } + initUiPanelsInterface() { let panelsWrapper = document.createElement('div'); panelsWrapper.innerHTML = Mustache.render(this.config.panelsHtml, { uid: this.config.uid }); @@ -324,7 +344,7 @@ global.MonsieurBizRichEditorManager = class { ); }); // Disabled? - if (!this.isClipboardEmpty()) { + if (!this.isClipboardEmpty('monsieurBizRichEditorElementClipboard')) { actions.querySelector('.js-uie-paste').classList.remove('disabled'); } @@ -645,19 +665,41 @@ global.MonsieurBizRichEditorManager = class { req.send(data); } - isClipboardEmpty() { - const clipboard = window.localStorage.getItem('monsieurBizRichEditorClipboard'); + isClipboardEmpty(clipboardKey) { + const clipboard = window.localStorage.getItem(clipboardKey); return null === clipboard || '' === clipboard; } + resetUiElements() { + this.initUiElements([], () => { this.write(); }); + } + + saveUiElementsToClipboard() { + window.localStorage.setItem('monsieurBizRichEditorElementsClipboard', JSON.stringify(this.uiElements)); + + const button = e.currentTarget; + const originalText = button.dataset.tooltip; + button.dataset.tooltip = button.dataset.alternateText; + window.setTimeout(function () { + button.dataset.tooltip = originalText; + }, 1000); + } + + pasteUiElementsFromClipboard() { + const clipboard = window.localStorage.getItem('monsieurBizRichEditorElementsClipboard'); + const pastedUiElement = JSON.parse(clipboard); + this.initUiElements(pastedUiElement, () => { this.write(); }); + } + saveUiElementToClipboard(uiElement, callback) { - window.localStorage.setItem('monsieurBizRichEditorClipboard', JSON.stringify(uiElement)); + window.localStorage.setItem('monsieurBizRichEditorElementClipboard', JSON.stringify(uiElement)); callback(); document.dispatchEvent(new CustomEvent('mbiz:rich-editor:uielement:copied', {})); } + pasteUiElementFromClipboard(futurePosition) { - const clipboard = window.localStorage.getItem('monsieurBizRichEditorClipboard'); + const clipboard = window.localStorage.getItem('monsieurBizRichEditorElementClipboard'); if (null !== clipboard) { const pastedUiElement = JSON.parse(clipboard); const manager = this; diff --git a/src/Resources/public/css/rich-editor-css.css b/src/Resources/public/css/rich-editor-css.css index ea06da9e..3330007b 100644 --- a/src/Resources/public/css/rich-editor-css.css +++ b/src/Resources/public/css/rich-editor-css.css @@ -1 +1 @@ -html.is-disabled body{overflow:hidden}.pell{box-shadow:0 2px 4px 0 rgba(34,36,38,.03);border:1px solid rgba(34,36,38,.1);border-radius:.28571429rem}.pell,.pell-content{box-sizing:border-box}.pell-content{height:300px;outline:0;overflow-y:auto;padding:10px}.pell-content p,.pell-content span{font-size:unset!important;line-height:unset!important}.pell-actionbar{background-color:#fff;border-bottom:1px solid rgba(10,10,10,.1)}.pell-button{background-color:transparent;border:none;cursor:pointer;height:30px;outline:0;width:30px;vertical-align:bottom}.pell-button-selected{background-color:#f0f0f0}.uie-panels{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:none;padding:.714rem 0 .714rem 5%;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none}.uie-panels:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:rgba(0,0,0,.85);content:""}.uie-panels[aria-hidden=false]{display:block}.uie-panels[aria-hidden=false]:before{-webkit-animation:fadeOut .2s ease-out;animation:fadeOut .2s ease-out}.uie-panels__content{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:1.714rem;background:#fff;border:1px solid rgba(34,36,38,.15);border-right-width:0;border-radius:.286rem 0 0 .286rem;box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2)}[aria-hidden=false] .uie-panels__content{-webkit-animation:slideFromRight .3s ease-out;animation:slideFromRight .3s ease-out}.uie-panels__new{position:absolute;top:1.143rem;right:0;bottom:1.143rem;left:3.143rem;z-index:10;display:none;flex-direction:column;padding:1.714rem;overflow:hidden;background:#fff;border:1px solid rgba(34,36,38,.15);border-right-width:0;border-radius:.286rem 0 0 .286rem;box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.uie-panels__new[aria-hidden=false]{display:flex}.uie-panels__new[aria-hidden=false]>*{-webkit-animation:appear .4s ease-out;animation:appear .4s ease-out}.uie-panels__inner{height:100%;overflow-x:hidden;overflow-y:auto}@-webkit-keyframes fadeOut{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:0}to{opacity:1}}@-webkit-keyframes slideFromRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideFromRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@-webkit-keyframes appear{0%{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes appear{0%{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:translateY(0)}}.uie-cards{max-height:100%;overflow-x:hidden;overflow-y:auto;transition:opacity .1s ease-out}.is-active .uie-cards{opacity:0;pointer-events:none}.uie-card{min-height:6rem!important;cursor:pointer}.uie-card .content{padding-top:1.5rem!important}.is-active .uie-heading{transform:rotate(90deg) translateY(-.6rem) scale(.7);transform-origin:left top 0}.uie-flex{display:flex!important}.uie-flex-cross-center{align-items:center!important}.uie-flex-main-between{justify-content:space-between!important}.uie-w-full{width:100%!important}.uie-m-0{margin:0!important}.uie-mb-sm{margin-bottom:1rem!important}.uie-mb-md{margin-bottom:2rem!important}.uie-ml-md{margin-left:2rem!important}@media (max-width:700px){.sm\:uie-flex-column{flex-direction:column!important}.sm\:uie-mt-xs{margin-top:1rem!important}} \ No newline at end of file +html.is-disabled body{overflow:hidden}.pell{box-shadow:0 2px 4px 0 rgba(34,36,38,.03);border:1px solid rgba(34,36,38,.1);border-radius:.28571429rem}.pell,.pell-content{box-sizing:border-box}.pell-content{height:300px;outline:0;overflow-y:auto;padding:10px}.pell-content p,.pell-content span{font-size:unset!important;line-height:unset!important}.pell-actionbar{background-color:#fff;border-bottom:1px solid rgba(10,10,10,.1)}.pell-button{background-color:transparent;border:none;cursor:pointer;height:30px;outline:0;width:30px;vertical-align:bottom}.pell-button-selected{background-color:#f0f0f0}.uie-panels{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:none;padding:.714rem 0 .714rem 5%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.uie-panels:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:rgba(0,0,0,.85);content:""}.uie-panels[aria-hidden=false]{display:block}.uie-panels[aria-hidden=false]:before{animation:fadeOut .2s ease-out}.uie-panels__content{position:relative;display:flex;flex-direction:column;width:100%;height:100%;padding:1.714rem;background:#fff;border:1px solid rgba(34,36,38,.15);border-right-width:0;border-radius:.286rem 0 0 .286rem;box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2)}[aria-hidden=false] .uie-panels__content{animation:slideFromRight .3s ease-out}.uie-panels__new{position:absolute;top:1.143rem;right:0;bottom:1.143rem;left:3.143rem;z-index:10;display:none;flex-direction:column;padding:1.714rem;overflow:hidden;background:#fff;border:1px solid rgba(34,36,38,.15);border-right-width:0;border-radius:.286rem 0 0 .286rem;box-shadow:0 1px 2px 0 rgba(34,36,38,.15)}.uie-panels__new[aria-hidden=false]{display:flex}.uie-panels__new[aria-hidden=false]>*{animation:appear .4s ease-out}.uie-panels__inner{height:100%;overflow-x:hidden;overflow-y:auto}@keyframes fadeOut{0%{opacity:0}to{opacity:1}}@keyframes slideFromRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes appear{0%{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:translateY(0)}}.uie-cards{max-height:100%;overflow-x:hidden;overflow-y:auto;transition:opacity .1s ease-out}.is-active .uie-cards{opacity:0;pointer-events:none}.uie-card{min-height:6rem!important;cursor:pointer}.uie-card .content{padding-top:1.5rem!important}.is-active .uie-heading{transform:rotate(90deg) translateY(-.6rem) scale(.7);transform-origin:left top 0}.uie-flex{display:flex!important}.uie-flex-cross-center{align-items:center!important}.uie-flex-cross-right{justify-content:flex-end!important}.uie-flex-main-between{justify-content:space-between!important}.uie-w-full{width:100%!important}.uie-m-0{margin:0!important}.uie-mb-sm{margin-bottom:1rem!important}.uie-mb-md{margin-bottom:2rem!important}.uie-ml-md{margin-left:2rem!important}@media (max-width:700px){.sm\:uie-flex-column{flex-direction:column!important}.sm\:uie-mt-xs{margin-top:1rem!important}} \ No newline at end of file diff --git a/src/Resources/public/js/rich-editor-js.js b/src/Resources/public/js/rich-editor-js.js index 9a8e5d7f..31f88b61 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,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}()},ng4s:function(e,t,i){"use strict";i.r(t),function(e){var t=i("1f8Y"),n=i.n(t),r=i("/HGo"),s=i("nbsC"),o=i.n(s);function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function l(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 c(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 c(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 c(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.localStorage.getItem("monsieurBizRichEditorClipboard");return null===e||""===e}},{key:"saveUiElementToClipboard",value:function(e,t){window.localStorage.setItem("monsieurBizRichEditorClipboard",JSON.stringify(e)),t(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:uielement:copied",{}))}},{key:"pasteUiElementFromClipboard",value:function(e){var t=window.localStorage.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("yLpj"))},yLpj:function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i}}); \ 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}()},ng4s:function(t,i,n){"use strict";n.r(i),function(t){var i=n("1f8Y"),r=n.n(i),s=n("/HGo"),o=n("nbsC"),a=n.n(o);function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(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 u(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 u(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){function t(t){return e.apply(this,arguments)}return t.toString=function(){return e.toString()},t}((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){function t(t){return e.apply(this,arguments)}return t.toString=function(){return e.toString()},t}((function(e){a=!0,s=e})),f:function(){try{o||null==i.return||i.return()}finally{if(a)throw s}}}}function u(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(e){var t=window.localStorage.getItem(e);return null===t||""===t}},{key:"resetUiElements",value:function(){var e=this;this.initUiElements([],(function(){e.write()}))}},{key:"saveUiElementsToClipboard",value:function(){window.localStorage.setItem("monsieurBizRichEditorElementsClipboard",JSON.stringify(this.uiElements));var t=e.currentTarget,i=t.dataset.tooltip;t.dataset.tooltip=t.dataset.alternateText,window.setTimeout((function(){t.dataset.tooltip=i}),1e3)}},{key:"pasteUiElementsFromClipboard",value:function(){var e=this,t=window.localStorage.getItem("monsieurBizRichEditorElementsClipboard"),i=JSON.parse(t);this.initUiElements(i,(function(){e.write()}))}},{key:"saveUiElementToClipboard",value:function(e,t){window.localStorage.setItem("monsieurBizRichEditorElementClipboard",JSON.stringify(e)),t(),document.dispatchEvent(new CustomEvent("mbiz:rich-editor:uielement:copied",{}))}},{key:"pasteUiElementFromClipboard",value:function(e){var t=window.localStorage.getItem("monsieurBizRichEditorElementClipboard");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}}))}}]),t}()}.call(this,n("yLpj"))},yLpj:function(e,t){var i;i=function(){return this}();try{i=i||new Function("return this")()}catch(e){"object"==typeof window&&(i=window)}e.exports=i}}); \ No newline at end of file diff --git a/src/Resources/translations/messages.en.yml b/src/Resources/translations/messages.en.yml index 4c90c0e3..60b5f053 100644 --- a/src/Resources/translations/messages.en.yml +++ b/src/Resources/translations/messages.en.yml @@ -126,6 +126,8 @@ monsieurbiz_richeditor_plugin: justify: 'Justify' clipboard: 'Clipboard' paste_from_clipboard: 'Paste from clipboard' + paste_all_from_clipboard: 'Paste all elements' + copy_all_from_clipboard: 'Copy all elements' copied: 'Copied!' copy: 'Copy' action: diff --git a/src/Resources/translations/messages.fr.yml b/src/Resources/translations/messages.fr.yml index 6bcdd831..b1b54ed7 100644 --- a/src/Resources/translations/messages.fr.yml +++ b/src/Resources/translations/messages.fr.yml @@ -126,6 +126,8 @@ monsieurbiz_richeditor_plugin: justify: 'Justifié' clipboard: 'Presse-papier' paste_from_clipboard: 'Coller depuis le presse-papier' + paste_all_from_clipboard: 'Coller tous les élements' + copy_all_from_clipboard: 'Copier tous les élements ' copied: 'Copié !' copy: 'Copier' action: diff --git a/src/Resources/views/Admin/app.html.twig b/src/Resources/views/Admin/app.html.twig index 857c3ac6..2314a30d 100644 --- a/src/Resources/views/Admin/app.html.twig +++ b/src/Resources/views/Admin/app.html.twig @@ -53,7 +53,20 @@