-
Notifications
You must be signed in to change notification settings - Fork 35
/
app.html.twig
139 lines (126 loc) · 5.19 KB
/
app.html.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
{% include '@SyliusUi/_javascripts.html.twig' with {'path': 'bundles/monsieurbizsyliusricheditorplugin/js/rich-editor-js.js'} %}
{% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'bundles/monsieurbizsyliusricheditorplugin/css/rich-editor-css.css'} %}
<script id="monsieurbiz-rich-editor-button-add" type="x-tmpl-mustache">
{% verbatim %}
<div class="ui horizontal divider">
<button data-position="{{position}}" class="tiny ui basic button uie-m-n js-uie-add" type="button">
<i class="plus square icon"></i>
Add element
</button>
</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-n">
<i class="{{icon}} icon"></i>
{{title}}
</h3>
<div class="ui small basic icon buttons sm:uie-mt-xs">
<button class="ui button js-uie-delete" type="button">
<i class="trash alternate outline icon"></i>
</button>
<button class="ui button js-uie-edit" type="button">
<i class="pencil alternate icon"></i>
</button>
<button class="ui button js-uie-up" type="button">
<i class="arrow up icon"></i>
</button>
<button class="ui button js-uie-down" type="button">
<i class="arrow down 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">
{% verbatim %}
<div class="ui container">
<div class="ui segment js-uie-container">
</div>
</div>
{% endverbatim %}
</script>
<script id="monsieurbiz-rich-editor-ui-element-card" type="x-tmpl-mustache">
{% verbatim %}
<button class="card uie-card js-uie-new" type="button">
<div class="content">
<h3 class="header">
<i class="{{icon}} icon"></i>
{{title}}
</h3>
</div>
</button>
{% endverbatim %}
</script>
<div class="uie-panels js-uie-panels">
<div class="uie-panels__content js-uie-panels-selector">
<h2 class="ui header uie-heading uie-mb-md" id="uie-heading">{{ "Select an UI Element"|trans }}</h2>
<div class="ui cards uie-cards js-uie-cards-container">
</div>
<div class="uie-panels__new js-uie-panels-new">
</div>
</div>
</div>
<div class="uie-panels js-uie-panels-edit">
<div class="uie-panels__content js-uie-content">
</div>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
let wysiwyg = new MonsieurBizRichEditorWysiwyg({
actions: [
'bold',
'italic',
'underline',
'ulist',
'olist',
'heading1',
'heading2',
{
name: 'heading3',
icon: '<b>H<sub>3</sub></b>',
title: 'Heading 3',
result: () => exec('formatBlock', '<h3>')
},
'link'
]
});
let editors = document.querySelectorAll('[data-component="rich-editor"]');
let uielements = {{ monsieurbiz_richeditor_list_elements() }};
editors.forEach(function (editor) {
let config = new MonsieurBizRichEditorConfig(
editor,
uielements,
wysiwyg,
document.getElementById('monsieurbiz-rich-editor-ui-elements-container').innerHTML,
document.getElementById('monsieurbiz-rich-editor-button-add').innerHTML,
document.getElementById('monsieurbiz-rich-editor-ui-element').innerHTML,
document.getElementById('monsieurbiz-rich-editor-ui-element-card').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.html',
'content'
);
editor.manager = new MonsieurBizRichEditorManager(config);
});
});
document.addEventListener('monsieurBizRichEditorInitUiCollectionForm', (e) => {
let form = e.detail.form;
$(form).find('[data-form-type="collection"]').CollectionForm();
});
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>