{% include '@SyliusUi/_javascripts.html.twig' with {'path': 'bundles/monsieurbizsyliusricheditorplugin/js/rich-editor.js'} %}{% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'bundles/monsieurbizsyliusricheditorplugin/css/rich-editor.css'} %}<div class="ui small basic modal" id="monsieurbiz-rich-editor-confirmation-modal"> <div class="ui icon header"> <i class="warning sign icon"></i> {{ 'sylius.ui.confirm_your_action'|trans }} </div> <div class="content"> <p>{{ 'sylius.ui.are_your_sure_you_want_to_perform_this_action'|trans }}</p> </div> <div class="actions"> <div class="ui red basic cancel inverted button"> <i class="remove icon"></i> {{ 'sylius.ui.no_label'|trans }} </div> <div class="ui green ok inverted button" id="monsieurbiz-rich-editor-confirmation-button"> <i class="checkmark icon"></i> {{ 'sylius.ui.yes_label'|trans }} </div> </div></div><div class="ui small basic modal" id="monsieurbiz-rich-editor-confirmation-modal"> <div class="ui icon header"> <i class="warning sign icon"></i> {{ 'sylius.ui.confirm_your_action'|trans }} </div> <div class="content"> <p>{{ 'sylius.ui.are_your_sure_you_want_to_perform_this_action'|trans }}</p> </div> <div class="actions"> <div class="ui red basic cancel inverted button"> <i class="remove icon"></i> {{ 'sylius.ui.no_label'|trans }} </div> <div class="ui green ok inverted button" id="monsieurbiz-rich-editor-confirmation-button"> <i class="checkmark icon"></i> {{ 'sylius.ui.yes_label'|trans }} </div> </div></div><script id="monsieurbiz-rich-editor-actions" type="x-tmpl-mustache">{% verbatim %}<div class="ui horizontal divider"> <div class="ui compact tiny menu"> <a data-position="{{position}}" class="item js-uie-add" type="button"> <i class="plus square icon"></i> {% endverbatim %}{{ "monsieurbiz_richeditor_plugin.form.add"|trans }}{% verbatim %} </a> <a data-position="{{position}}" class="item js-uie-paste disabled" type="button"> <i class="paste icon"></i> {% endverbatim %}{{ "monsieurbiz_richeditor_plugin.form.paste_from_clipboard"|trans }}{% verbatim %} </a> </div></div>{% endverbatim %}</script><script id="monsieurbiz-rich-editor-ui-element" type="x-tmpl-mustache">{% verbatim %} <div class="ui segment js-uie-element"> <div class="uie-flex uie-flex-cross-center uie-flex-main-between uie-w-full uie-mb-sm sm:uie-flex-column"> <h3 class="header uie-m-0"> <i class="{{icon}} icon"></i> {{title}} {{#disabled}}<span class="ui label">{% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.ui.disabled'|trans }}{% verbatim %}</span>{{/disabled}} </h3> <div class="ui small basic icon buttons sm:uie-mt-xs"> <button class="ui button js-uie-delete" type="button" data-tooltip="{% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.form.delete'|trans }}{% verbatim %}" data-inverted> <i class="trash alternate outline icon"></i> </button> <button class="ui button js-uie-edit" type="button" data-tooltip="{% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.form.edit'|trans }}{% verbatim %}" data-inverted> <i class="pencil alternate icon"></i> </button> <button class="ui button js-uie-up" type="button" data-tooltip="{% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.form.move_up'|trans }}{% verbatim %}" data-inverted> <i class="arrow up icon"></i> </button> <button class="ui button js-uie-down" type="button" data-tooltip="{% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.form.move_down'|trans }}{% verbatim %}" data-inverted> <i class="arrow down icon"></i> </button> <button class="ui button js-uie-copy" type="button" data-alternate-text="{% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.form.copied'|trans }}{% verbatim %}" data-tooltip="{% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.form.copy'|trans }}{% verbatim %}" data-inverted> <i class="copy icon"></i> </button> </div> </div> <div class="ui fluid js-uie-preview">{{{preview}}}</div> </div>{% endverbatim %}</script><script id="monsieurbiz-rich-editor-ui-elements-container" type="x-tmpl-mustache"> <div class="ui"> <div class="uie-flex uie-flex-cross-right"> <div class="ui buttons"> <button class="ui icon button js-uie-tools-copy-all" type="button" data-alternate-text="{{ 'monsieurbiz_richeditor_plugin.form.copied'|trans }}" data-tooltip="{{ "monsieurbiz_richeditor_plugin.form.copy_all_from_clipboard"|trans }}"> <i class="copy icon"></i> </button> <button class="ui icon button js-uie-tools-paste-all" type="button" disabled data-tooltip="{{ "monsieurbiz_richeditor_plugin.form.paste_all_from_clipboard"|trans }}"> <i class="paste icon"></i> </button> <button class="ui icon button js-uie-tools-trash-all" type="button" data-tooltip="{{ "monsieurbiz_richeditor_plugin.form.trash_all"|trans }}"> <i class="trash icon"></i> </button> </div> </div> <div class="ui segment js-uie-container"> </div> </div></script><script id="monsieurbiz-rich-editor-ui-element-card" type="x-tmpl-mustache">{% verbatim %}<div class="ui link card uie-card js-uie-new"> <div class="content left aligned"> <div class="header"> <i class="{{icon}} icon"></i> {{title}} </div> <div class="description"> {{#description}} {{description}} {{/description}} </div> {{#wireframe}} <div class="wireframe"> {{& wireframeHtml }} </div> {{/wireframe}} </div> <div class="extra content right aligned"> {{#tags}} <span class="ui basic tiny label">{{.}}</span> {{/tags}} </div></div>{% endverbatim %}</script><script id="monsieurbiz-rich-editor-panels" type="x-tmpl-mustache">{% verbatim %}<div class="uie-panels js-uie-panels-{{uid}}"> <div class="uie-panels__content js-uie-panels-selector-{{uid}}"> <div class="uie-flex uie-flex-main-between uie-w-full uie-mb-md"> <h2 class="ui header uie-heading uie-m-0" id="uie-heading-{{uid}}"> {% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.form.select_ui_element'|trans }}{% verbatim %} </h2> <div class="uie-ml-md"> <button class="ui button icon js-uie-panels-close-{{uid}}" type="button"> <i class="close icon"></i> {% endverbatim %}{{ 'monsieurbiz_richeditor_plugin.form.close'|trans }}{% verbatim %} </button> </div> </div> <div class="ui cards uie-cards js-uie-cards-container"> </div> <div class="uie-panels__new js-uie-panels-new-{{uid}}"> </div> </div></div>{% endverbatim %}</script><script id="monsieurbiz-rich-editor-panels-edit" type="x-tmpl-mustache">{% verbatim %}<div class="uie-panels js-uie-panels-edit-{{uid}}"> <div class="uie-panels__content js-uie-content"> </div></div>{% endverbatim %}</script><script type="text/javascript"> document.addEventListener('DOMContentLoaded', () => { let editors = document.querySelectorAll('[data-component="rich-editor"]'); let uielements = {{ monsieurbiz_richeditor_list_elements() }}; let fallBackLocale = '{{ app.request.locale | default(app.request.defaultLocale) | default(sylius_base_locale) | escape('js') }}'; function setupRichEditor(editor, tags, locale) { let config = new MonsieurBizRichEditorConfig( editor, uielements, document.getElementById('monsieurbiz-rich-editor-ui-elements-container').innerHTML, document.getElementById('monsieurbiz-rich-editor-actions').innerHTML, document.getElementById('monsieurbiz-rich-editor-ui-element').innerHTML, document.getElementById('monsieurbiz-rich-editor-ui-element-card').innerHTML, document.getElementById('monsieurbiz-rich-editor-panels').innerHTML, document.getElementById('monsieurbiz-rich-editor-panels-edit').innerHTML, '{{ "monsieurbiz_richeditor_plugin.form.confirm_delete" |trans|e('js') }}', '{{ url("monsieurbiz_richeditor_admin_form_create", {"code": "__CODE__"})|e('js') }}', '{{ url("monsieurbiz_richeditor_admin_form_edit", {"code": "__CODE__"})|e('js') }}', '{{ url("monsieurbiz_richeditor_admin_form_render_elements")|e('js') }}', '{{ monsieurbiz_richeditor_get_default_element() }}', '{{ monsieurbiz_richeditor_get_default_element_data_field() }}', '{{ 'monsieurbiz_richeditor_plugin.error.ajax_error'|trans|e('js') }}', '{{ 'monsieurbiz_richeditor_plugin.error.unallowed_uielement'|trans|e('js') }}' ); editor.manager = new MonsieurBizRichEditorManager(config, tags, locale); } editors.forEach(function (editor) { let tags = editor.dataset.tags.length === 0 ? [] : editor.dataset.tags.split(',') let locale = editor.dataset.locale ? editor.dataset.locale : fallBackLocale; setupRichEditor(editor, tags, locale); }); // JQuery event triggered by @SyliusUiBundle/Resources/private/js/sylius-form-collection.js $(document).on('collection-form-add', (event, addedElement) => { document.dispatchEvent(new CustomEvent('rich-editor:reload', { detail: { target: addedElement[0], } })); }); document.addEventListener('monsieurBizRichEditorInitForm', (e) => { // Init dynamic editors let editors = document.querySelectorAll('[data-component="rich-editor"]:not([data-rich-editor-uid])'); let manager = e.detail.manager; editors.forEach(function (editor) { setupRichEditor(editor, manager.tags, manager.locale); // Retrieve tags and locale from the parent manager }); let form = e.detail.form; $(form).find('[data-form-type="collection"]').CollectionForm(); $(form).find('.sylius-autocomplete').autoComplete(); }); }); function monsieurBizRichEditorRemoveFile(inputName) { let input = document.querySelector('input[name="' + inputName + '"]'); let fileInput = document.querySelector('input[name="change_' + inputName + '"]'); input.parentElement.remove(); fileInput.style.display = 'inline'; fileInput.name = inputName; }</script>