|
1
|
|
|
import sourceAutocomplete from './sourceAutocomplete' |
|
2
|
|
|
import sourceOption from './sourceOption' |
|
3
|
|
|
import {abeExtend, User, cmsData} from '../../../' |
|
4
|
|
|
|
|
5
|
|
|
export function getAttributes(params) { |
|
6
|
|
|
var attributes = '' |
|
7
|
|
|
if (params.key != null) |
|
8
|
|
|
attributes += `id="${params.key}" data-id="${params.key}"` |
|
|
|
|
|
|
9
|
|
|
if (params.value != null) attributes += ` value="${params.value}"` |
|
|
|
|
|
|
10
|
|
|
if (params['max-length'] != null) |
|
11
|
|
|
attributes += ` data-maxlength="${params['max-length']}"` |
|
|
|
|
|
|
12
|
|
|
if (params.reload != null) attributes += ` reload="${params.reload}"` |
|
|
|
|
|
|
13
|
|
|
if (params.order != null) attributes += ` tabIndex="${params.order}"` |
|
|
|
|
|
|
14
|
|
|
if (params.required != null) |
|
15
|
|
|
attributes += ` data-required="${params.required}"` |
|
|
|
|
|
|
16
|
|
|
if (params.display != null) attributes += ` data-display="${params.display}"` |
|
|
|
|
|
|
17
|
|
|
if (params.visible != null) attributes += ` data-visible="${params.visible}"` |
|
|
|
|
|
|
18
|
|
|
if (params.autocomplete != null) |
|
19
|
|
|
attributes += ` data-autocomplete="${params.autocomplete}"` |
|
|
|
|
|
|
20
|
|
|
if (params.placeholder != null) |
|
21
|
|
|
attributes += ` placeholder="${params.placeholder}"` |
|
|
|
|
|
|
22
|
|
|
if (params.thumbs != null) attributes += ` data-size="${params.thumbs}"` |
|
|
|
|
|
|
23
|
|
|
if (params.toolbar != null) attributes += ` data-toolbar="${params.toolbar}"` |
|
|
|
|
|
|
24
|
|
|
if (params.multiple != null) |
|
25
|
|
|
attributes += ` data-multiple="${params.multiple}"` |
|
|
|
|
|
|
26
|
|
|
if (params.disabled != null) attributes += ` ${params.disabled}` |
|
|
|
|
|
|
27
|
|
|
return attributes |
|
28
|
|
|
} |
|
29
|
|
|
|
|
30
|
|
|
export function getLabel(params) { |
|
31
|
|
|
var desc = params.desc + (params.required ? ' *' : '') |
|
32
|
|
|
return `<label class="control-label" for="${params.key}" > |
|
33
|
|
|
${desc} |
|
34
|
|
|
</label>` |
|
35
|
|
|
} |
|
36
|
|
|
|
|
37
|
|
|
export function hint(params) { |
|
38
|
|
|
if (params.hint) { |
|
39
|
|
|
return `<p class="abe-hint help-block"> |
|
40
|
|
|
<span class="glyphicon glyphicon-info-sign"></span> <em>${params.hint}</em> |
|
41
|
|
|
</p>` |
|
42
|
|
|
} |
|
43
|
|
|
|
|
44
|
|
|
return '' |
|
45
|
|
|
} |
|
46
|
|
|
|
|
47
|
|
|
export function createInputSource(attributes, inputClass, params) { |
|
48
|
|
|
var inputSource = `<div class="parent-${params.type} parent-${params.key}" data-parent="${params.key}">` |
|
49
|
|
|
var lastValues |
|
50
|
|
|
|
|
51
|
|
|
if ( |
|
52
|
|
|
(params.autocomplete != null && params.autocomplete === 'true') || |
|
53
|
|
|
(params.multiple != null && params.multiple === 'multiple') |
|
54
|
|
|
) { |
|
55
|
|
|
if (cmsData.sql.getSourceType(params.sourceString) === 'url') |
|
56
|
|
|
lastValues = params.source |
|
|
|
|
|
|
57
|
|
|
else lastValues = JSON.stringify(params.source).replace(/\'/g, '"e;') |
|
58
|
|
|
inputSource += '<div class="autocomplete-result-wrapper">' |
|
59
|
|
|
if ( |
|
60
|
|
|
params.autocomplete != null && |
|
61
|
|
|
params.autocomplete === 'true' && |
|
62
|
|
|
params.prefill === 'true' |
|
63
|
|
|
) { |
|
64
|
|
|
inputSource += `<div class="autocomplete-refresh" value='' |
|
65
|
|
|
data-autocomplete-refresh="true" |
|
66
|
|
|
data-autocomplete-refresh-sourcestring="${params.sourceString}" |
|
67
|
|
|
data-autocomplete-refresh-prefill-quantity="${params[ |
|
68
|
|
|
'prefill-quantity' |
|
69
|
|
|
]}" |
|
70
|
|
|
data-autocomplete-refresh-key="${params.key}" |
|
71
|
|
|
data-autocomplete-data-display="${params.display}" > |
|
72
|
|
|
<span class="glyphicon glyphicon-refresh"></span> |
|
73
|
|
|
</div>` |
|
74
|
|
|
} |
|
75
|
|
|
Array.prototype.forEach.call(params.value, val => { |
|
76
|
|
|
inputSource += sourceAutocomplete(val, params) |
|
77
|
|
|
}) |
|
78
|
|
|
inputSource += '</div>' |
|
79
|
|
|
} |
|
80
|
|
|
|
|
81
|
|
|
if (params.autocomplete != null && params.autocomplete === 'true') { |
|
82
|
|
|
inputSource += `<input value="" type="text" autocomplete="off" data-value='${lastValues}' ${attributes} class="${inputClass}" />` |
|
|
|
|
|
|
83
|
|
|
} else { |
|
84
|
|
|
// lastValues = JSON.stringify(params.value).replace(/\'/g, '"e;') |
|
85
|
|
|
inputSource += `<select ${attributes} class="${inputClass}">` |
|
86
|
|
|
|
|
87
|
|
|
// if (!params.required) inputSource += '<option value=\'\'></option>' |
|
88
|
|
|
var options = '' |
|
89
|
|
|
if ( |
|
90
|
|
|
typeof params.source === 'object' && |
|
91
|
|
|
Object.prototype.toString.call(params.source) === '[object Array]' |
|
92
|
|
|
) { |
|
93
|
|
|
Array.prototype.forEach.call(params.source, val => { |
|
94
|
|
|
options += sourceOption(val, params) |
|
95
|
|
|
}) |
|
96
|
|
|
} else { |
|
97
|
|
|
options += sourceOption(params.source, params) |
|
98
|
|
|
} |
|
99
|
|
|
|
|
100
|
|
|
var defaultValueSelected = 'selected=selected' |
|
101
|
|
|
if (options.indexOf('selected') > -1) { |
|
102
|
|
|
defaultValueSelected = '' |
|
103
|
|
|
} |
|
104
|
|
|
if (params.required) |
|
105
|
|
|
inputSource += `<option value="" disabled ${defaultValueSelected}>Select ${params.desc.toLowerCase()}...</option>` |
|
|
|
|
|
|
106
|
|
|
if (!params.required) |
|
107
|
|
|
inputSource += `<option value="" ${defaultValueSelected}></option>` |
|
|
|
|
|
|
108
|
|
|
inputSource += options |
|
109
|
|
|
|
|
110
|
|
|
inputSource += '</select>' |
|
111
|
|
|
} |
|
112
|
|
|
inputSource += `${hint(params)}</div>` |
|
113
|
|
|
|
|
114
|
|
|
return inputSource |
|
115
|
|
|
} |
|
116
|
|
|
|
|
117
|
|
|
export function createInputRich(attributes, inputClass, params) { |
|
118
|
|
|
var buttons = [ |
|
119
|
|
|
{ |
|
120
|
|
|
icon: 'bold', |
|
121
|
|
|
title: 'Bold (Ctrl+B)', |
|
122
|
|
|
action: 'bold', |
|
123
|
|
|
param: '', |
|
124
|
|
|
hotkey: 'b', |
|
125
|
|
|
key: 'b' |
|
126
|
|
|
}, |
|
127
|
|
|
{ |
|
128
|
|
|
icon: 'ti-Italic', |
|
129
|
|
|
title: 'Italic (Ctrl+I)', |
|
130
|
|
|
action: 'italic', |
|
131
|
|
|
param: '', |
|
132
|
|
|
hotkey: 'i' |
|
133
|
|
|
}, |
|
134
|
|
|
{ |
|
135
|
|
|
icon: 'ti-underline', |
|
136
|
|
|
title: 'Underline (Ctrl+U)', |
|
137
|
|
|
action: 'underline', |
|
138
|
|
|
param: '', |
|
139
|
|
|
hotkey: 'u' |
|
140
|
|
|
}, |
|
141
|
|
|
{ |
|
142
|
|
|
icon: 'strikethrough', |
|
143
|
|
|
title: 'Strikethrough', |
|
144
|
|
|
action: 'strikethrough', |
|
145
|
|
|
param: '', |
|
146
|
|
|
key: 's' |
|
147
|
|
|
}, |
|
148
|
|
|
{ |
|
149
|
|
|
icon: 'ti-paint-bucket', |
|
150
|
|
|
title: 'Text color', |
|
151
|
|
|
action: 'forecolor', |
|
152
|
|
|
param: '', |
|
153
|
|
|
popup: 'color' |
|
154
|
|
|
}, |
|
155
|
|
|
{ |
|
156
|
|
|
icon: 'ti-paint-bucket bg', |
|
157
|
|
|
title: 'Background color', |
|
158
|
|
|
action: 'highlight', |
|
159
|
|
|
param: '', |
|
160
|
|
|
popup: 'color' |
|
161
|
|
|
}, |
|
162
|
|
|
{icon: 'ti-align-left', title: 'Left', action: 'align', param: 'left'}, |
|
163
|
|
|
{ |
|
164
|
|
|
icon: 'ti-align-center', |
|
165
|
|
|
title: 'Center', |
|
166
|
|
|
action: 'align', |
|
167
|
|
|
param: 'center' |
|
168
|
|
|
}, |
|
169
|
|
|
{icon: 'ti-align-right', title: 'Right', action: 'align', param: 'right'}, |
|
170
|
|
|
{ |
|
171
|
|
|
icon: 'ti-align-justify', |
|
172
|
|
|
title: 'Justify', |
|
173
|
|
|
action: 'align', |
|
174
|
|
|
param: 'justify' |
|
175
|
|
|
}, |
|
176
|
|
|
{ |
|
177
|
|
|
icon: 'ti-text ti-text-sub', |
|
178
|
|
|
title: 'Subscript', |
|
179
|
|
|
action: 'subscript', |
|
180
|
|
|
param: '' |
|
181
|
|
|
}, |
|
182
|
|
|
{ |
|
183
|
|
|
icon: 'ti-text ti-text-sup', |
|
184
|
|
|
title: 'Superscript', |
|
185
|
|
|
action: 'superscript', |
|
186
|
|
|
param: '' |
|
187
|
|
|
}, |
|
188
|
|
|
{icon: 'ti-shift-right-alt', title: 'Indent', action: 'indent', param: ''}, |
|
189
|
|
|
{ |
|
190
|
|
|
icon: 'ti-shift-left-alt', |
|
191
|
|
|
title: 'Outdent', |
|
192
|
|
|
action: 'indent', |
|
193
|
|
|
param: 'outdent' |
|
194
|
|
|
}, |
|
195
|
|
|
{icon: 'ti-list', title: 'Unordered list', action: 'list', param: ''}, |
|
196
|
|
|
{ |
|
197
|
|
|
icon: 'ti-list-ol', |
|
198
|
|
|
title: 'Ordered list', |
|
199
|
|
|
action: 'list', |
|
200
|
|
|
param: 'ordered' |
|
201
|
|
|
}, |
|
202
|
|
|
{ |
|
203
|
|
|
icon: 'ti-eraser', |
|
204
|
|
|
title: 'Remove format', |
|
205
|
|
|
action: 'removeFormat', |
|
206
|
|
|
param: '' |
|
207
|
|
|
}, |
|
208
|
|
|
{ |
|
209
|
|
|
icon: 'ti-link', |
|
210
|
|
|
title: 'Add link', |
|
211
|
|
|
action: 'insertLink', |
|
212
|
|
|
param: '', |
|
213
|
|
|
popup: 'link' |
|
214
|
|
|
}, |
|
215
|
|
|
{ |
|
216
|
|
|
icon: 'console', |
|
217
|
|
|
title: 'Code style', |
|
218
|
|
|
action: 'code', |
|
219
|
|
|
param: '', |
|
220
|
|
|
key: '{code}' |
|
221
|
|
|
}, |
|
222
|
|
|
{ |
|
223
|
|
|
icon: 'ti-image', |
|
224
|
|
|
title: 'media', |
|
225
|
|
|
action: 'media', |
|
226
|
|
|
param: '', |
|
227
|
|
|
popup: 'image' |
|
228
|
|
|
}, |
|
229
|
|
|
{ |
|
230
|
|
|
icon: 'ti-face-smile', |
|
231
|
|
|
title: 'smiley', |
|
232
|
|
|
action: 'smiley', |
|
233
|
|
|
param: '', |
|
234
|
|
|
popup: 'smiley' |
|
235
|
|
|
} |
|
236
|
|
|
] |
|
237
|
|
|
|
|
238
|
|
|
var selects = [ |
|
239
|
|
|
{ |
|
240
|
|
|
name: 'Formating', |
|
241
|
|
|
id: 'format', |
|
242
|
|
|
options: [ |
|
243
|
|
|
{name: 'Heading 1', regexp: '<h1>$1</h1>'}, |
|
244
|
|
|
{name: 'Heading 2', regexp: '<h2>$1</h2>'}, |
|
245
|
|
|
{name: 'Heading 3', regexp: '<h3>$1</h3>'}, |
|
246
|
|
|
{name: 'Heading 4', regexp: '<h4>$1</h4>'}, |
|
247
|
|
|
{name: 'Heading 5', regexp: '<h5>$1</h5>'}, |
|
248
|
|
|
{name: 'Heading 6', regexp: '<h6>$1</h6>'}, |
|
249
|
|
|
{name: 'Paragraph', regexp: '<p>$1</p>'} |
|
250
|
|
|
] |
|
251
|
|
|
}, |
|
252
|
|
|
{ |
|
253
|
|
|
name: 'Font', |
|
254
|
|
|
id: 'font', |
|
255
|
|
|
options: [ |
|
256
|
|
|
{ |
|
257
|
|
|
name: 'Georgia', |
|
258
|
|
|
regexp: '<span style="font-family:Georgia;">$1</span>' |
|
259
|
|
|
}, |
|
260
|
|
|
{name: 'serif', regexp: '<span style="font-family:serif;">$1</span>'}, |
|
261
|
|
|
{ |
|
262
|
|
|
name: 'Helvetica', |
|
263
|
|
|
regexp: '<span style="font-family:Helvetica;">$1</span>' |
|
264
|
|
|
}, |
|
265
|
|
|
{name: 'Times', regexp: '<span style="font-family:Times;">$1</span>'}, |
|
266
|
|
|
{ |
|
267
|
|
|
name: 'Times New Roman', |
|
268
|
|
|
regexp: '<span style="font-family:Times New Roman;">$1</span>' |
|
269
|
|
|
}, |
|
270
|
|
|
{name: 'Arial', regexp: '<span style="font-family:Arial;">$1</span>'}, |
|
271
|
|
|
{ |
|
272
|
|
|
name: 'Arial Black', |
|
273
|
|
|
regexp: '<span style="font-family:Arial Black;">$1</span>' |
|
274
|
|
|
}, |
|
275
|
|
|
{ |
|
276
|
|
|
name: 'Verdana', |
|
277
|
|
|
regexp: '<span style="font-family:Verdana;">$1</span>' |
|
278
|
|
|
}, |
|
279
|
|
|
{ |
|
280
|
|
|
name: 'monospace', |
|
281
|
|
|
regexp: '<span style="font-family:monospace;">$1</span>' |
|
282
|
|
|
}, |
|
283
|
|
|
{ |
|
284
|
|
|
name: 'fantasy', |
|
285
|
|
|
regexp: '<span style="font-family:fantasy;">$1</span>' |
|
286
|
|
|
} |
|
287
|
|
|
] |
|
288
|
|
|
}, |
|
289
|
|
|
{ |
|
290
|
|
|
name: 'Font size', |
|
291
|
|
|
id: 'fontsize', |
|
292
|
|
|
options: [ |
|
293
|
|
|
{name: '5', regexp: '<span style="font-size:5px;">$1</span>'}, |
|
294
|
|
|
{name: '6', regexp: '<span style="font-size:6px;">$1</span>'}, |
|
295
|
|
|
{name: '7', regexp: '<span style="font-size:7px;">$1</span>'}, |
|
296
|
|
|
{name: '8', regexp: '<span style="font-size:8px;">$1</span>'}, |
|
297
|
|
|
{name: '9', regexp: '<span style="font-size:9px;">$1</span>'}, |
|
298
|
|
|
{name: '10', regexp: '<span style="font-size:10px;">$1</span>'}, |
|
299
|
|
|
{name: '11', regexp: '<span style="font-size:11px;">$1</span>'}, |
|
300
|
|
|
{name: '12', regexp: '<span style="font-size:12px;">$1</span>'}, |
|
301
|
|
|
{name: '14', regexp: '<span style="font-size:14px;">$1</span>'}, |
|
302
|
|
|
{name: '16', regexp: '<span style="font-size:16px;">$1</span>'}, |
|
303
|
|
|
{name: '18', regexp: '<span style="font-size:18px;">$1</span>'}, |
|
304
|
|
|
{name: '20', regexp: '<span style="font-size:20px;">$1</span>'}, |
|
305
|
|
|
{name: '22', regexp: '<span style="font-size:22px;">$1</span>'}, |
|
306
|
|
|
{name: '24', regexp: '<span style="font-size:24px;">$1</span>'}, |
|
307
|
|
|
{name: '26', regexp: '<span style="font-size:26px;">$1</span>'}, |
|
308
|
|
|
{name: '28', regexp: '<span style="font-size:28px;">$1</span>'}, |
|
309
|
|
|
{name: '36', regexp: '<span style="font-size:36px;">$1</span>'}, |
|
310
|
|
|
{name: '48', regexp: '<span style="font-size:48px;">$1</span>'}, |
|
311
|
|
|
{name: '72', regexp: '<span style="font-size:72px;">$1</span>'} |
|
312
|
|
|
] |
|
313
|
|
|
} |
|
314
|
|
|
] |
|
315
|
|
|
|
|
316
|
|
|
if (params.toolbar !== '*') params.toolbar = params.toolbar.split(',') |
|
|
|
|
|
|
317
|
|
|
var inputRich = `<div class="parent-${params.type} parent-${params.key}" data-parent="${params.key}"> |
|
318
|
|
|
<div class="wysiwyg-container rich"> |
|
319
|
|
|
<div class="wysiwyg-toolbar wysiwyg-toolbar-top">` |
|
320
|
|
|
|
|
321
|
|
|
selects.forEach(function(select) { |
|
322
|
|
|
if (params.toolbar === '*' || params.toolbar.indexOf(select.id) > -1) { |
|
323
|
|
|
inputRich += `<div class="dropdown"> |
|
324
|
|
|
<button id="${select.id}" class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
|
325
|
|
|
${select.name} |
|
326
|
|
|
<span class="caret"></span> |
|
327
|
|
|
</button> |
|
328
|
|
|
<ul class="dropdown-menu" aria-labelledby="${select.id}">` |
|
329
|
|
|
select.options.forEach(function(option) { |
|
330
|
|
|
inputRich += `<li> |
|
331
|
|
|
<a href='#' class='wysiwyg-dropdown-option' data-regexp='${option.regexp}'> |
|
332
|
|
|
${option.name} |
|
333
|
|
|
</a> |
|
334
|
|
|
</li>` |
|
335
|
|
|
}) |
|
336
|
|
|
inputRich += `</ul> |
|
337
|
|
|
</div>` |
|
338
|
|
|
} |
|
339
|
|
|
}) |
|
340
|
|
|
|
|
341
|
|
|
buttons.forEach(function(button) { |
|
342
|
|
|
if (params.toolbar === '*' || params.toolbar.indexOf(button.action) > -1) { |
|
343
|
|
|
var hotkey = button.hotkey != null ? `hotkey="${button.hotkey}"` : '' |
|
344
|
|
|
var popup = button.popup != null ? `data-popup="${button.popup}"` : '' |
|
345
|
|
|
if (button.popup === 'image') button.action = 'insertImage' |
|
|
|
|
|
|
346
|
|
|
if (button.action === 'list') button.action = 'insertList' |
|
|
|
|
|
|
347
|
|
|
inputRich += `<a class="wysiwyg-toolbar-icon parent-${button.icon}" |
|
348
|
|
|
data-action="${button.action}" |
|
349
|
|
|
data-param="${button.param}" |
|
350
|
|
|
title="${button.title}" |
|
351
|
|
|
${hotkey} |
|
352
|
|
|
${popup} |
|
353
|
|
|
href="#"> |
|
354
|
|
|
<span class="glyphicon theme-icon ${button.icon}">${button.key |
|
355
|
|
|
? button.key |
|
356
|
|
|
: ''}</span> |
|
357
|
|
|
</a>` |
|
358
|
|
|
} |
|
359
|
|
|
}) |
|
360
|
|
|
|
|
361
|
|
|
inputRich += `</div> |
|
362
|
|
|
<textarea class="${inputClass} form-rich" ${attributes} rows="4">${params.value}</textarea> |
|
363
|
|
|
</div> |
|
364
|
|
|
${hint(params)} |
|
365
|
|
|
</div>` |
|
366
|
|
|
return inputRich |
|
367
|
|
|
} |
|
368
|
|
|
|
|
369
|
|
|
export function createInputFile(attributes, inputClass, params) { |
|
370
|
|
|
return `<div class="parent-${params.type} parent-${params.key}" data-parent="${params.key}"> |
|
371
|
|
|
<div class="input-group file-upload"> |
|
372
|
|
|
<div class="input-group-addon image"> |
|
373
|
|
|
<span class="glyphicon glyphicon-file" aria-hidden="true"></span> |
|
374
|
|
|
</div> |
|
375
|
|
|
<input type="text" ${attributes} class="${inputClass} file-input" /> |
|
376
|
|
|
|
|
377
|
|
|
<div class="input-group-btn"> |
|
378
|
|
|
<span class="border"> |
|
379
|
|
|
<div class="upload-wrapper"> |
|
380
|
|
|
<input class="form-control" ${attributes} name="${params.key}" type="file" title="upload file"/> |
|
381
|
|
|
<span class="percent"> |
|
382
|
|
|
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span> |
|
383
|
|
|
</span> |
|
384
|
|
|
</div> |
|
385
|
|
|
</span> |
|
386
|
|
|
<span class="image-icon"></span> |
|
387
|
|
|
</div> |
|
388
|
|
|
|
|
389
|
|
|
</div> |
|
390
|
|
|
<div class="input-error"></div> |
|
391
|
|
|
${hint(params)} |
|
392
|
|
|
</div>` |
|
393
|
|
|
} |
|
394
|
|
|
|
|
395
|
|
|
export function createInputTextarea(attributes, inputClass, params) { |
|
396
|
|
|
return `<div class="parent-${params.type} parent-${params.key}" data-parent="${params.key}"> |
|
397
|
|
|
<textarea class="${inputClass}" ${attributes} rows="4">${params.value}</textarea> |
|
398
|
|
|
${hint(params)} |
|
399
|
|
|
</div>` |
|
400
|
|
|
} |
|
401
|
|
|
|
|
402
|
|
|
export function createInputLink(attributes, inputClass, params) { |
|
403
|
|
|
return `<div class="parent-${params.type} parent-${params.key}" data-parent="${params.key}"> |
|
404
|
|
|
<div class="input-group"> |
|
405
|
|
|
<div class="input-group-addon link"> |
|
406
|
|
|
<span class="glyphicon glyphicon-link" aria-hidden="true"></span> |
|
407
|
|
|
</div> |
|
408
|
|
|
<input type="text" ${attributes} class="${inputClass}" /> |
|
409
|
|
|
</div> |
|
410
|
|
|
${hint(params)} |
|
411
|
|
|
</div>` |
|
412
|
|
|
} |
|
413
|
|
|
|
|
414
|
|
|
export function createInputImage(attributes, inputClass, params) { |
|
415
|
|
|
return `<div class="parent-${params.type} parent-${params.key}" data-parent="${params.key}"> |
|
416
|
|
|
<div class="input-group img-upload"> |
|
417
|
|
|
<div class="input-group-addon image"> |
|
418
|
|
|
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> |
|
419
|
|
|
</div> |
|
420
|
|
|
<input type="text" ${attributes} class="${inputClass} file-input" /> |
|
421
|
|
|
<div class="input-group-btn"> |
|
422
|
|
|
<span class="border"> |
|
423
|
|
|
<div class="upload-wrapper"> |
|
424
|
|
|
<input class="form-control" ${attributes} name="${params.key}" type="file" title="upload an image"/> |
|
425
|
|
|
<span class="percent"> |
|
426
|
|
|
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span> |
|
427
|
|
|
</span> |
|
428
|
|
|
</div> |
|
429
|
|
|
</span> |
|
430
|
|
|
<span class="image-icon"></span> |
|
431
|
|
|
</div> |
|
432
|
|
|
</div> |
|
433
|
|
|
<div class="input-error"> |
|
434
|
|
|
</div> |
|
435
|
|
|
${hint(params)} |
|
436
|
|
|
</div>` |
|
437
|
|
|
} |
|
438
|
|
|
|
|
439
|
|
|
export function createInputText(attributes, inputClass, params) { |
|
440
|
|
|
if (params.editable) |
|
441
|
|
|
return `<div class="parent-${params.type} parent-${params.key}" data-parent="${params.key}"> |
|
|
|
|
|
|
442
|
|
|
<div class="input-group"> |
|
443
|
|
|
<div class="input-group-addon"> |
|
444
|
|
|
<span class="glyphicon glyphicon-font" aria-hidden="true"></span> |
|
445
|
|
|
</div> |
|
446
|
|
|
<input type="text" ${attributes} class="${inputClass}" /> |
|
447
|
|
|
</div> |
|
448
|
|
|
${hint(params)} |
|
449
|
|
|
</div>` |
|
450
|
|
|
else |
|
451
|
|
|
return `<div class="parent-${params.type} parent-${params.key}" data-parent="${params.key}"> |
|
452
|
|
|
<div> |
|
453
|
|
|
<input type="hidden" ${attributes} class="${inputClass}" /> |
|
454
|
|
|
</div> |
|
455
|
|
|
</div>` |
|
456
|
|
|
} |
|
457
|
|
|
|
|
458
|
|
|
/** |
|
459
|
|
|
* Print form input based on input data type {Textarea | text | meta | link | image | ...} |
|
460
|
|
|
* && add appropriate attributs / data-attributs |
|
461
|
|
|
* @return {String|html} input / input group ... |
|
462
|
|
|
*/ |
|
463
|
|
|
export function printInput(params, root) { |
|
464
|
|
|
params = abeExtend.hooks.instance.trigger('beforeEditorInput', params) |
|
465
|
|
|
let userWorkflow = root.user != null ? root.user.role.workflow : '' |
|
466
|
|
|
let inputClass = 'form-control form-abe' |
|
467
|
|
|
let res |
|
468
|
|
|
if (params.editable) { |
|
469
|
|
|
res = `<div class="form-group" data-precontrib-templates="${params.precontribTemplate}">` |
|
470
|
|
|
res += getLabel(params) |
|
471
|
|
|
} else { |
|
472
|
|
|
res = `<div data-precontrib-templates="${params.precontribTemplate}">` |
|
473
|
|
|
} |
|
474
|
|
|
|
|
475
|
|
|
if (params.value === null && params.defaultValue != null) |
|
476
|
|
|
params.value = params.defaultValue |
|
|
|
|
|
|
477
|
|
|
params.placeholder = params.placeholder || '' |
|
478
|
|
|
params.value = params.value || '' |
|
479
|
|
|
|
|
480
|
|
|
if (typeof params.value === 'string') |
|
481
|
|
|
params.value = params.value.replace(/\"/g, '"') |
|
|
|
|
|
|
482
|
|
|
if (!(params.toolbar != null)) params.toolbar = '*' |
|
|
|
|
|
|
483
|
|
|
|
|
484
|
|
|
params.disabled = '' |
|
485
|
|
|
if ( |
|
486
|
|
|
params.tab !== 'slug' && |
|
487
|
|
|
!User.utils.isUserAllowedOnRoute( |
|
488
|
|
|
userWorkflow, |
|
489
|
|
|
`/abe/operations/edit/${params.status}` |
|
490
|
|
|
) |
|
491
|
|
|
) { |
|
492
|
|
|
params.disabled = 'disabled="disabled"' |
|
493
|
|
|
} |
|
494
|
|
|
let attributes = getAttributes(params) |
|
495
|
|
|
|
|
496
|
|
|
if (params.source != null) { |
|
497
|
|
|
params.multiple = |
|
498
|
|
|
(params['max-length'] == null || params['max-length'] > 1) && |
|
499
|
|
|
params.source.length > 0 |
|
500
|
|
|
? 'multiple' |
|
501
|
|
|
: '' |
|
502
|
|
|
params.disabled = params.source.length <= 0 ? 'disabled' : '' |
|
503
|
|
|
res += createInputSource(getAttributes(params), inputClass, params) |
|
504
|
|
|
} else if (params.type.indexOf('rich') >= 0) |
|
505
|
|
|
res += createInputRich(attributes, inputClass, params) |
|
|
|
|
|
|
506
|
|
|
else if (params.type.indexOf('file') >= 0) |
|
507
|
|
|
res += createInputFile(attributes, inputClass, params) |
|
|
|
|
|
|
508
|
|
|
else if (params.type.indexOf('textarea') >= 0) |
|
509
|
|
|
res += createInputTextarea(attributes, inputClass, params) |
|
|
|
|
|
|
510
|
|
|
else if (params.type.indexOf('link') >= 0) |
|
511
|
|
|
res += createInputLink(attributes, inputClass, params) |
|
|
|
|
|
|
512
|
|
|
else if (params.type.indexOf('image') >= 0) |
|
513
|
|
|
res += createInputImage(attributes, inputClass, params) |
|
|
|
|
|
|
514
|
|
|
else res += createInputText(attributes, inputClass, params) |
|
515
|
|
|
|
|
516
|
|
|
res += '</div>' |
|
517
|
|
|
res = abeExtend.hooks.instance.trigger('afterEditorInput', res, params) |
|
518
|
|
|
|
|
519
|
|
|
return res |
|
520
|
|
|
} |
|
521
|
|
|
|
abecms /
abecms
Loading history...
Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.
Consider:
If you or someone else later decides to put another statement in, only the first statement will be executed.
In this case the statement
b = 42will always be executed, while the logging statement will be executed conditionally.ensures that the proper code will be executed conditionally no matter how many statements are added or removed.