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
|
import { $gettext } from './gettext.js';
import ToolbarButtonset from './toolbar_buttonset.js';
import Dialog from './dialog.js';
function getElementWidth(element) {
var proxy = null;
// Special case: Handle i18n hidden textareas
// - Hidden textareas have no dimensions thus we need to proxy the
// width from the first visible element in the i18n group
if ($(element).is(':hidden') && $(element).closest('.i18n_group').length > 0) {
proxy = $(element)
.closest('.i18n_group')
.find('div.i18n:visible')
.children()
.first();
if (proxy.length > 0) {
element = proxy;
}
}
return $(element).css('width') || $(element).outerWidth(true);
}
const Toolbar = {
buttonSet: ToolbarButtonset,
// Initializes (adds) a toolbar the passed textarea element
initialize: function(element, button_set) {
var $element = $(element),
wrap,
toolbar;
// don't initialize toolbar for wysiwyg textareas
if (STUDIP.editor_enabled && $element.hasClass('wysiwyg')) {
return;
}
// Bail out if the element is not a tetarea or a toolbar has already
// been applied
if (!$element.is('textarea') || $element.data('toolbar-added')) {
return;
}
button_set = button_set || Toolbar.buttonSet;
// Add flag so one element will never have more than one toolbar
$element.data('toolbar-added', true);
// Create toolbar element
toolbar = $('<div class="buttons">');
// Assemble toolbar
['left', 'right'].forEach(function(position) {
var buttons = $('<span>').addClass(position);
$.each(button_set[position], function(name, format) {
var button = $('<span>').addClass(name),
label = format.label || name;
if (format.icon) {
label = $('<img>', {
alt: format.label || name,
src: STUDIP.ASSETS_URL + 'images/icons/blue/' + format.icon + '.svg'
});
}
button
.html(label)
.button()
.click(function() {
var selection = $element.getSelection(),
result = format.evaluate(selection, $element, this) || selection,
replacement = $.isPlainObject(result)
? result.replacement
: result === undefined
? selection
: result,
offset = $.isPlainObject(result) ? result.offset : (result || '').length;
$element.replaceSelection(replacement, offset).change();
return false;
});
buttons.append(button);
});
toolbar.append(buttons);
});
// Attach toolbar to the specified element
wrap = $('<div class="editor_toolbar">').css({
width: getElementWidth($element),
display: $element.css('display')
});
$element
.css('width', '100%')
.wrap(wrap)
.before(toolbar);
}
};
export default Toolbar;
|
