in study-builder/fdahpStudyDesigner/src/main/webapp/js/summernote-bs4.js [5064:5477]
Buttons.prototype.addToolbarButtons = function () {
var _this = this;
this.context.memo('button.style', function () {
return _this.ui.buttonGroup([
_this.button({
className: 'dropdown-toggle',
contents: _this.ui.dropdownButtonContents(_this.ui.icon(_this.options.icons.magic), _this.options),
tooltip: _this.lang.style.style,
data: {
toggle: 'dropdown'
}
}),
_this.ui.dropdown({
className: 'dropdown-style',
items: _this.options.styleTags,
template: function (item) {
if (typeof item === 'string') {
item = { tag: item, title: (_this.lang.style.hasOwnProperty(item) ? _this.lang.style[item] : item) };
}
var tag = item.tag;
var title = item.title;
var style = item.style ? ' style="' + item.style + '" ' : '';
var className = item.className ? ' class="' + item.className + '"' : '';
return '<' + tag + style + className + '>' + title + '</' + tag + '>';
},
click: _this.context.createInvokeHandler('editor.formatBlock')
})
]).render();
});
var _loop_1 = function (styleIdx, styleLen) {
var item = this_1.options.styleTags[styleIdx];
this_1.context.memo('button.style.' + item, function () {
return _this.button({
className: 'note-btn-style-' + item,
contents: '<div data-value="' + item + '">' + item.toUpperCase() + '</div>',
tooltip: item.toUpperCase(),
click: _this.context.createInvokeHandler('editor.formatBlock')
}).render();
});
};
var this_1 = this;
for (var styleIdx = 0, styleLen = this.options.styleTags.length; styleIdx < styleLen; styleIdx++) {
_loop_1(styleIdx, styleLen);
}
this.context.memo('button.bold', function () {
return _this.button({
className: 'note-btn-bold',
contents: _this.ui.icon(_this.options.icons.bold),
tooltip: _this.lang.font.bold + _this.representShortcut('bold'),
click: _this.context.createInvokeHandlerAndUpdateState('editor.bold')
}).render();
});
this.context.memo('button.italic', function () {
return _this.button({
className: 'note-btn-italic',
contents: _this.ui.icon(_this.options.icons.italic),
tooltip: _this.lang.font.italic + _this.representShortcut('italic'),
click: _this.context.createInvokeHandlerAndUpdateState('editor.italic')
}).render();
});
this.context.memo('button.underline', function () {
return _this.button({
className: 'note-btn-underline',
contents: _this.ui.icon(_this.options.icons.underline),
tooltip: _this.lang.font.underline + _this.representShortcut('underline'),
click: _this.context.createInvokeHandlerAndUpdateState('editor.underline')
}).render();
});
this.context.memo('button.clear', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.eraser),
tooltip: _this.lang.font.clear + _this.representShortcut('removeFormat'),
click: _this.context.createInvokeHandler('editor.removeFormat')
}).render();
});
this.context.memo('button.strikethrough', function () {
return _this.button({
className: 'note-btn-strikethrough',
contents: _this.ui.icon(_this.options.icons.strikethrough),
tooltip: _this.lang.font.strikethrough + _this.representShortcut('strikethrough'),
click: _this.context.createInvokeHandlerAndUpdateState('editor.strikethrough')
}).render();
});
this.context.memo('button.superscript', function () {
return _this.button({
className: 'note-btn-superscript',
contents: _this.ui.icon(_this.options.icons.superscript),
tooltip: _this.lang.font.superscript,
click: _this.context.createInvokeHandlerAndUpdateState('editor.superscript')
}).render();
});
this.context.memo('button.subscript', function () {
return _this.button({
className: 'note-btn-subscript',
contents: _this.ui.icon(_this.options.icons.subscript),
tooltip: _this.lang.font.subscript,
click: _this.context.createInvokeHandlerAndUpdateState('editor.subscript')
}).render();
});
this.context.memo('button.fontname', function () {
var styleInfo = _this.context.invoke('editor.currentStyle');
// Add 'default' fonts into the fontnames array if not exist
$$1.each(styleInfo['font-family'].split(','), function (idx, fontname) {
fontname = fontname.trim().replace(/['"]+/g, '');
if (_this.isFontDeservedToAdd(fontname)) {
if ($$1.inArray(fontname, _this.options.fontNames) === -1) {
_this.options.fontNames.push(fontname);
}
}
});
return _this.ui.buttonGroup([
_this.button({
className: 'dropdown-toggle',
contents: _this.ui.dropdownButtonContents('<span class="note-current-fontname"/>', _this.options),
tooltip: _this.lang.font.name,
data: {
toggle: 'dropdown'
}
}),
_this.ui.dropdownCheck({
className: 'dropdown-fontname',
checkClassName: _this.options.icons.menuCheck,
items: _this.options.fontNames.filter(_this.isFontInstalled.bind(_this)),
template: function (item) {
return '<span style="font-family: \'' + item + '\'">' + item + '</span>';
},
click: _this.context.createInvokeHandlerAndUpdateState('editor.fontName')
})
]).render();
});
this.context.memo('button.fontsize', function () {
return _this.ui.buttonGroup([
_this.button({
className: 'dropdown-toggle',
contents: _this.ui.dropdownButtonContents('<span class="note-current-fontsize"/>', _this.options),
tooltip: _this.lang.font.size,
data: {
toggle: 'dropdown'
}
}),
_this.ui.dropdownCheck({
className: 'dropdown-fontsize',
checkClassName: _this.options.icons.menuCheck,
items: _this.options.fontSizes,
click: _this.context.createInvokeHandlerAndUpdateState('editor.fontSize')
})
]).render();
});
this.context.memo('button.color', function () {
return _this.ui.buttonGroup({
className: 'note-color',
children: [
_this.button({
className: 'note-current-color-button',
contents: _this.ui.icon(_this.options.icons.font + ' note-recent-color'),
tooltip: _this.lang.color.recent,
click: function (e) {
var $button = $$1(e.currentTarget);
_this.context.invoke('editor.color', {
backColor: $button.attr('data-backColor'),
foreColor: $button.attr('data-foreColor')
});
},
callback: function ($button) {
var $recentColor = $button.find('.note-recent-color');
$recentColor.css('background-color', '#FFFF00');
$button.attr('data-backColor', '#FFFF00');
}
}),
_this.button({
className: 'dropdown-toggle',
contents: _this.ui.dropdownButtonContents('', _this.options),
tooltip: _this.lang.color.more,
data: {
toggle: 'dropdown'
}
}),
_this.ui.dropdown({
items: [
'<div class="note-palette">',
' <div class="note-palette-title">' + _this.lang.color.background + '</div>',
' <div>',
' <button type="button" class="note-color-reset btn btn-light" data-event="backColor" data-value="inherit">',
_this.lang.color.transparent,
' </button>',
' </div>',
' <div class="note-holder" data-event="backColor"/>',
'</div>',
'<div class="note-palette">',
' <div class="note-palette-title">' + _this.lang.color.foreground + '</div>',
' <div>',
' <button type="button" class="note-color-reset btn btn-light" data-event="removeFormat" data-value="foreColor">',
_this.lang.color.resetToDefault,
' </button>',
' </div>',
' <div class="note-holder" data-event="foreColor"/>',
'</div>'
].join(''),
callback: function ($dropdown) {
$dropdown.find('.note-holder').each(function (idx, item) {
var $holder = $$1(item);
$holder.append(_this.ui.palette({
colors: _this.options.colors,
eventName: $holder.data('event'),
container: _this.options.container,
tooltip: _this.options.tooltip
}).render());
});
},
click: function (event) {
var $button = $$1(event.target);
var eventName = $button.data('event');
var value = $button.data('value');
if (eventName && value) {
var key = eventName === 'backColor' ? 'background-color' : 'color';
var $color = $button.closest('.note-color').find('.note-recent-color');
var $currentButton = $button.closest('.note-color').find('.note-current-color-button');
$color.css(key, value);
$currentButton.attr('data-' + eventName, value);
_this.context.invoke('editor.' + eventName, value);
}
}
})
]
}).render();
});
this.context.memo('button.ul', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.unorderedlist),
tooltip: _this.lang.lists.unordered + _this.representShortcut('insertUnorderedList'),
click: _this.context.createInvokeHandler('editor.insertUnorderedList')
}).render();
});
this.context.memo('button.ol', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.orderedlist),
tooltip: _this.lang.lists.ordered + _this.representShortcut('insertOrderedList'),
click: _this.context.createInvokeHandler('editor.insertOrderedList')
}).render();
});
var justifyLeft = this.button({
contents: this.ui.icon(this.options.icons.alignLeft),
tooltip: this.lang.paragraph.left + this.representShortcut('justifyLeft'),
click: this.context.createInvokeHandler('editor.justifyLeft')
});
var justifyCenter = this.button({
contents: this.ui.icon(this.options.icons.alignCenter),
tooltip: this.lang.paragraph.center + this.representShortcut('justifyCenter'),
click: this.context.createInvokeHandler('editor.justifyCenter')
});
var justifyRight = this.button({
contents: this.ui.icon(this.options.icons.alignRight),
tooltip: this.lang.paragraph.right + this.representShortcut('justifyRight'),
click: this.context.createInvokeHandler('editor.justifyRight')
});
var justifyFull = this.button({
contents: this.ui.icon(this.options.icons.alignJustify),
tooltip: this.lang.paragraph.justify + this.representShortcut('justifyFull'),
click: this.context.createInvokeHandler('editor.justifyFull')
});
var outdent = this.button({
contents: this.ui.icon(this.options.icons.outdent),
tooltip: this.lang.paragraph.outdent + this.representShortcut('outdent'),
click: this.context.createInvokeHandler('editor.outdent')
});
var indent = this.button({
contents: this.ui.icon(this.options.icons.indent),
tooltip: this.lang.paragraph.indent + this.representShortcut('indent'),
click: this.context.createInvokeHandler('editor.indent')
});
this.context.memo('button.justifyLeft', func.invoke(justifyLeft, 'render'));
this.context.memo('button.justifyCenter', func.invoke(justifyCenter, 'render'));
this.context.memo('button.justifyRight', func.invoke(justifyRight, 'render'));
this.context.memo('button.justifyFull', func.invoke(justifyFull, 'render'));
this.context.memo('button.outdent', func.invoke(outdent, 'render'));
this.context.memo('button.indent', func.invoke(indent, 'render'));
this.context.memo('button.paragraph', function () {
return _this.ui.buttonGroup([
_this.button({
className: 'dropdown-toggle',
contents: _this.ui.dropdownButtonContents(_this.ui.icon(_this.options.icons.alignLeft), _this.options),
tooltip: _this.lang.paragraph.paragraph,
data: {
toggle: 'dropdown'
}
}),
_this.ui.dropdown([
_this.ui.buttonGroup({
className: 'note-align',
children: [justifyLeft, justifyCenter, justifyRight, justifyFull]
}),
_this.ui.buttonGroup({
className: 'note-list',
children: [outdent, indent]
})
])
]).render();
});
this.context.memo('button.height', function () {
return _this.ui.buttonGroup([
_this.button({
className: 'dropdown-toggle',
contents: _this.ui.dropdownButtonContents(_this.ui.icon(_this.options.icons.textHeight), _this.options),
tooltip: _this.lang.font.height,
data: {
toggle: 'dropdown'
}
}),
_this.ui.dropdownCheck({
items: _this.options.lineHeights,
checkClassName: _this.options.icons.menuCheck,
className: 'dropdown-line-height',
click: _this.context.createInvokeHandler('editor.lineHeight')
})
]).render();
});
this.context.memo('button.table', function () {
return _this.ui.buttonGroup([
_this.button({
className: 'dropdown-toggle',
contents: _this.ui.dropdownButtonContents(_this.ui.icon(_this.options.icons.table), _this.options),
tooltip: _this.lang.table.table,
data: {
toggle: 'dropdown'
}
}),
_this.ui.dropdown({
className: 'note-table',
items: [
'<div class="note-dimension-picker">',
' <div class="note-dimension-picker-mousecatcher" data-event="insertTable" data-value="1x1"/>',
' <div class="note-dimension-picker-highlighted"/>',
' <div class="note-dimension-picker-unhighlighted"/>',
'</div>',
'<div class="note-dimension-display">1 x 1</div>'
].join('')
})
], {
callback: function ($node) {
var $catcher = $node.find('.note-dimension-picker-mousecatcher');
$catcher.css({
width: _this.options.insertTableMaxSize.col + 'em',
height: _this.options.insertTableMaxSize.row + 'em'
}).mousedown(_this.context.createInvokeHandler('editor.insertTable'))
.on('mousemove', _this.tableMoveHandler.bind(_this));
}
}).render();
});
this.context.memo('button.link', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.link),
tooltip: _this.lang.link.link + _this.representShortcut('linkDialog.show'),
click: _this.context.createInvokeHandler('linkDialog.show')
}).render();
});
this.context.memo('button.picture', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.picture),
tooltip: _this.lang.image.image,
click: _this.context.createInvokeHandler('imageDialog.show')
}).render();
});
this.context.memo('button.video', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.video),
tooltip: _this.lang.video.video,
click: _this.context.createInvokeHandler('videoDialog.show')
}).render();
});
this.context.memo('button.hr', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.minus),
tooltip: _this.lang.hr.insert + _this.representShortcut('insertHorizontalRule'),
click: _this.context.createInvokeHandler('editor.insertHorizontalRule')
}).render();
});
this.context.memo('button.fullscreen', function () {
return _this.button({
className: 'btn-fullscreen',
contents: _this.ui.icon(_this.options.icons.arrowsAlt),
tooltip: _this.options.fullscreen,
click: _this.context.createInvokeHandler('fullscreen.toggle')
}).render();
});
this.context.memo('button.codeview', function () {
return _this.button({
className: 'btn-codeview',
contents: _this.ui.icon(_this.options.icons.code),
tooltip: _this.options.codeview,
click: _this.context.createInvokeHandler('codeview.toggle')
}).render();
});
this.context.memo('button.redo', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.redo),
tooltip: _this.lang.history.redo + _this.representShortcut('redo'),
click: _this.context.createInvokeHandler('editor.redo')
}).render();
});
this.context.memo('button.undo', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.undo),
tooltip: _this.lang.history.undo + _this.representShortcut('undo'),
click: _this.context.createInvokeHandler('editor.undo')
}).render();
});
this.context.memo('button.help', function () {
return _this.button({
contents: _this.ui.icon(_this.options.icons.question),
tooltip: _this.options.help,
click: _this.context.createInvokeHandler('helpDialog.show')
}).render();
});
};