reportbro-designer
Version:
Designer to create pdf and excel report layouts. The reports can be generated with reportbro-lib (a Python package) on the server.
1,110 lines (1,079 loc) • 129 kB
JavaScript
import PanelBase from './PanelBase';
import StylePanel from './StylePanel';
import Command from '../commands/Command';
import CommandGroupCmd from '../commands/CommandGroupCmd';
import SetValueCmd from '../commands/SetValueCmd';
import Parameter from '../data/Parameter';
import Style from '../data/Style';
import DocElement from '../elements/DocElement';
import FrameElement from '../elements/FrameElement';
import ImageElement from '../elements/ImageElement';
import LineElement from '../elements/LineElement';
import SectionBandElement from '../elements/SectionBandElement';
import TableElement from '../elements/TableElement';
import TableBandElement from '../elements/TableBandElement';
import TableTextElement from '../elements/TableTextElement';
import TextElement from '../elements/TextElement';
import PopupWindow from '../PopupWindow';
import * as utils from '../utils';
import Quill from 'quill';
import autosize from 'autosize';
/**
* Generic panel to edit all shared properties of selected document elements.
* @class
*/
export default class DocElementPanel extends PanelBase {
constructor(rootElement, rb) {
super('rbro_doc_element', DocElement, rootElement, rb);
this.propertyDescriptors = {
'label': {
'type': SetValueCmd.type.text,
'fieldId': 'label'
},
'content': {
'type': SetValueCmd.type.text,
'fieldId': 'content',
'visibleIf': '!richText'
},
'richText': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'rich_text',
},
'richTextContent': {
'type': SetValueCmd.type.richText,
'fieldId': 'rich_text_content',
'visibleIf': 'richText'
},
'eval': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'eval',
'visibleIf': '!richText'
},
'dataSource': {
'type': SetValueCmd.type.text,
'fieldId': 'data_source'
},
'xReadOnly': {
'type': SetValueCmd.type.text,
'fieldId': 'x_read_only'
},
'x': {
'type': SetValueCmd.type.text,
'fieldId': 'x',
'rowId': 'rbro_doc_element_position_row',
'errorMsgId': 'rbro_doc_element_position_error',
'singleRowProperty': false,
'rowProperties': ['x', 'y'],
'labelId': 'rbro_doc_element_position_label',
'defaultLabel': 'docElementPosition',
'singlePropertyLabel': 'docElementPositionX'
},
'y': {
'type': SetValueCmd.type.text,
'fieldId': 'y',
'rowId': 'rbro_doc_element_position_row',
'errorMsgId': 'rbro_doc_element_position_error',
'singleRowProperty': false,
'labelId': 'rbro_doc_element_position_label',
'defaultLabel': 'docElementPosition',
'singlePropertyLabel': 'docElementPositionY'
},
'width': {
'type': SetValueCmd.type.text,
'fieldId': 'width',
'rowId': 'rbro_doc_element_size_row',
'errorMsgId': 'rbro_doc_element_size_error',
'singleRowProperty': false,
'rowProperties': ['width', 'height'],
'labelId': 'rbro_doc_element_size_label',
'defaultLabel': 'docElementSize',
'singlePropertyLabel': 'docElementWidth',
'visibleIf': "docElementType != 'bar_code' || (format != 'QRCode' && rotate)"
},
'height': {
'type': SetValueCmd.type.text,
'fieldId': 'height',
'rowId': 'rbro_doc_element_size_row',
'errorMsgId': 'rbro_doc_element_size_error',
'singleRowProperty': false,
'labelId': 'rbro_doc_element_size_label',
'defaultLabel': 'docElementSize',
'singlePropertyLabel': 'docElementHeight'
},
'colspan': {
'type': SetValueCmd.type.text,
'fieldId': 'colspan'
},
'format': {
'type': SetValueCmd.type.select,
'fieldId': 'format',
'allowEmpty': false
},
'displayValue': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'display_value',
'visibleIf': "format != 'QRCode'"
},
'barWidth': {
'type': SetValueCmd.type.text,
'fieldId': 'bar_width',
'visibleIf': "format != 'QRCode'"
},
'guardBar': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'guard_bar',
'visibleIf': "format == 'EAN8' || format == 'EAN13'"
},
'rotate': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'rotate',
'section': 'print',
'visibleIf': "format != 'QRCode'"
},
'errorCorrectionLevel': {
'type': SetValueCmd.type.select,
'fieldId': 'error_correction_level',
'visibleIf': "format == 'QRCode'"
},
'source': {
'type': SetValueCmd.type.text,
'fieldId': 'source',
},
'image': {
'type': SetValueCmd.type.file,
'fieldId': 'image',
'rowId': 'rbro_doc_element_image_row',
'singleRowProperty': false,
'rowProperties': ['image', 'imageFilename'],
},
'imageFilename': {
'type': SetValueCmd.type.filename,
'fieldId': 'image_filename',
'rowId': 'rbro_doc_element_image_row',
'singleRowProperty': false,
},
'columns': {
'type': SetValueCmd.type.text,
'fieldId': 'columns'
},
'header': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'header',
},
'contentRows': {
'type': SetValueCmd.type.text,
'fieldId': 'content_rows'
},
'footer': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'footer'
},
'rotateDeg': {
'type': SetValueCmd.type.text,
'fieldId': 'rotate_deg',
},
'opacity': {
'type': SetValueCmd.type.text,
'fieldId': 'opacity',
},
'showInForeground': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'show_in_foreground',
},
'styleId': {
'type': SetValueCmd.type.select,
'fieldId': 'style_id',
'section': 'style',
'allowEmpty': true
},
'color': {
'type': SetValueCmd.type.color,
'allowEmpty': false,
'fieldId': 'color',
'section': 'style'
},
'bold': {
'type': SetValueCmd.type.button,
'fieldId': 'bold',
'rowId': 'rbro_doc_element_textstyle_row',
'singleRowProperty': false,
'rowProperties': ['bold', 'italic', 'underline', 'strikethrough'],
'section': 'style',
'visibleIf': '!richText'
},
'italic': {
'type': SetValueCmd.type.button,
'fieldId': 'italic',
'rowId': 'rbro_doc_element_textstyle_row',
'singleRowProperty': false,
'section': 'style',
'visibleIf': '!richText'
},
'underline': {
'type': SetValueCmd.type.button,
'fieldId': 'underline',
'rowId': 'rbro_doc_element_textstyle_row',
'singleRowProperty': false,
'section': 'style',
'visibleIf': '!richText'
},
'strikethrough': {
'type': SetValueCmd.type.button,
'fieldId': 'strikethrough',
'rowId': 'rbro_doc_element_textstyle_row',
'singleRowProperty': false,
'section': 'style',
'visibleIf': '!richText'
},
'horizontalAlignment': {
'type': SetValueCmd.type.buttonGroup,
'fieldId': 'halignment',
'rowId': 'rbro_doc_element_alignment_row',
'singleRowProperty': false,
'rowProperties': ['horizontalAlignment', 'verticalAlignment'],
'section': 'style',
'visibleIf': '!richText'
},
'verticalAlignment': {
'type': SetValueCmd.type.buttonGroup,
'fieldId': 'valignment',
'rowId': 'rbro_doc_element_alignment_row',
'singleRowProperty': false,
'section': 'style'
},
'textColor': {
'type': SetValueCmd.type.color,
'allowEmpty': false,
'fieldId': 'text_color',
'section': 'style',
'visibleIf': '!richText'
},
'backgroundColor': {
'type': SetValueCmd.type.color,
'allowEmpty': true,
'fieldId': 'background_color',
'section': 'style'
},
'alternateBackgroundColor': {
'type': SetValueCmd.type.color,
'allowEmpty': true,
'fieldId': 'alternate_background_color',
'section': 'style'
},
'font': {
'type': SetValueCmd.type.select,
'fieldId': 'font',
'rowId': 'rbro_doc_element_font_row',
'singleRowProperty': false,
'rowProperties': ['font', 'fontSize'],
'section': 'style',
'allowEmpty': false,
'visibleIf': '!richText'
},
'fontSize': {
'type': SetValueCmd.type.select,
'fieldId': 'font_size',
'rowId': 'rbro_doc_element_font_row',
'singleRowProperty': false,
'section': 'style',
'allowEmpty': false,
'visibleIf': '!richText'
},
'lineSpacing': {
'type': SetValueCmd.type.select,
'fieldId': 'line_spacing',
'section': 'style',
'allowEmpty': false
},
'borderAll': {
'type': SetValueCmd.type.button,
'fieldId': 'border_all',
'rowId': 'rbro_doc_element_border_row',
'singleRowProperty': false,
'rowProperties': ['borderAll', 'borderLeft', 'borderTop', 'borderRight', 'borderBottom'],
'section': 'style'
},
'borderLeft': {
'type': SetValueCmd.type.button,
'fieldId': 'border_left',
'rowId': 'rbro_doc_element_border_row',
'singleRowProperty': false,
'section': 'style'
},
'borderTop': {
'type': SetValueCmd.type.button,
'fieldId': 'border_top',
'rowId': 'rbro_doc_element_border_row',
'singleRowProperty': false,
'section': 'style'
},
'borderRight': {
'type': SetValueCmd.type.button,
'fieldId': 'border_right',
'rowId': 'rbro_doc_element_border_row',
'singleRowProperty': false,
'section': 'style'
},
'borderBottom': {
'type': SetValueCmd.type.button,
'fieldId': 'border_bottom',
'rowId': 'rbro_doc_element_border_row',
'singleRowProperty': false,
'section': 'style'
},
'border': {
'type': SetValueCmd.type.buttonGroup,
'fieldId': 'table_border',
'rowId': 'rbro_doc_element_table_border_row',
'section': 'style'
},
'borderColor': {
'type': SetValueCmd.type.color,
'allowEmpty': false,
'fieldId': 'border_color',
'section': 'style'
},
'borderWidth': {
'type': SetValueCmd.type.text,
'fieldId': 'border_width',
'section': 'style'
},
'paddingLeft': {
'type': SetValueCmd.type.text,
'fieldId': 'padding_left',
'rowId': 'rbro_doc_element_padding_row',
'singleRowProperty': false,
'rowProperties': ['paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom'],
'section': 'style'
},
'paddingTop': {
'type': SetValueCmd.type.text,
'fieldId': 'padding_top',
'rowId': 'rbro_doc_element_padding_row',
'singleRowProperty': false,
'section': 'style'
},
'paddingRight': {
'type': SetValueCmd.type.text,
'fieldId': 'padding_right',
'rowId': 'rbro_doc_element_padding_row',
'singleRowProperty': false,
'section': 'style'
},
'paddingBottom': {
'type': SetValueCmd.type.text,
'fieldId': 'padding_bottom',
'rowId': 'rbro_doc_element_padding_row',
'singleRowProperty': false,
'section': 'style'
},
'groupExpression': {
'type': SetValueCmd.type.text,
'fieldId': 'group_expression',
'section': 'print'
},
'pageBreak': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'page_break',
'visibleIf': 'groupExpression',
'section': 'print'
},
'repeatGroupHeader': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'repeat_group_header',
'visibleIf': 'groupExpression',
'section': 'print'
},
'printIf': {
'type': SetValueCmd.type.text,
'fieldId': 'print_if',
'section': 'print'
},
'repeatHeader': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'repeat_header',
'section': 'print'
},
'removeEmptyElement': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'remove_empty_element',
'section': 'print'
},
'alwaysPrintOnSamePage': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'always_print_on_same_page',
'section': 'print'
},
'shrinkToContentHeight': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'shrink_to_content_height',
'section': 'print'
},
'alignToPageBottom': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'align_to_page_bottom',
'section': 'print'
},
'growWeight': {
'type': SetValueCmd.type.select,
'allowEmpty': false,
'fieldId': 'grow_weight',
'section': 'print'
},
'pattern': {
'type': SetValueCmd.type.text,
'fieldId': 'pattern',
'section': 'print',
'visibleIf': '!richText'
},
'link': {
'type': SetValueCmd.type.text,
'fieldId': 'link',
'section': 'print',
'visibleIf': '!richText'
},
'cs_condition': {
'type': SetValueCmd.type.text,
'fieldId': 'cs_condition',
'section': 'cs_style'
},
'cs_styleId': {
'type': SetValueCmd.type.select,
'fieldId': 'cs_style_id',
'section': 'cs_style',
'allowEmpty': true
},
'cs_additionalRules': {
'type': SetValueCmd.type.internal,
'fieldId': 'cs_additional_rules',
'section': 'cs_style',
'allowEmpty': true
},
'cs_bold': {
'type': SetValueCmd.type.button,
'fieldId': 'cs_bold',
'rowId': 'rbro_doc_element_cs_textstyle_row',
'singleRowProperty': false,
'rowProperties': ['cs_bold', 'cs_italic', 'cs_underline', 'cs_strikethrough'],
'section': 'cs_style',
'visibleIf': '!richText'
},
'cs_italic': {
'type': SetValueCmd.type.button,
'fieldId': 'cs_italic',
'rowId': 'rbro_doc_element_cs_textstyle_row',
'singleRowProperty': false,
'section': 'cs_style',
'visibleIf': '!richText'
},
'cs_underline': {
'type': SetValueCmd.type.button,
'fieldId': 'cs_underline',
'rowId': 'rbro_doc_element_cs_textstyle_row',
'singleRowProperty': false,
'section': 'cs_style',
'visibleIf': '!richText'
},
'cs_strikethrough': {
'type': SetValueCmd.type.button,
'fieldId': 'cs_strikethrough',
'rowId': 'rbro_doc_element_cs_textstyle_row',
'singleRowProperty': false,
'section': 'cs_style',
'visibleIf': '!richText'
},
'cs_horizontalAlignment': {
'type': SetValueCmd.type.buttonGroup,
'fieldId': 'cs_halignment',
'rowId': 'rbro_doc_element_cs_alignment_row',
'singleRowProperty': false,
'rowProperties': ['cs_horizontalAlignment', 'cs_verticalAlignment'],
'section': 'cs_style',
'visibleIf': '!richText'
},
'cs_verticalAlignment': {
'type': SetValueCmd.type.buttonGroup,
'fieldId': 'cs_valignment',
'rowId': 'rbro_doc_element_cs_alignment_row',
'singleRowProperty': false,
'section': 'cs_style'
},
'cs_textColor': {
'type': SetValueCmd.type.color,
'allowEmpty': false,
'fieldId': 'cs_text_color',
'section': 'cs_style',
'visibleIf': '!richText'
},
'cs_backgroundColor': {
'type': SetValueCmd.type.color,
'allowEmpty': true,
'fieldId': 'cs_background_color',
'section': 'cs_style'
},
'cs_font': {
'type': SetValueCmd.type.select,
'fieldId': 'cs_font',
'rowId': 'rbro_doc_element_cs_font_row',
'singleRowProperty': false,
'rowProperties': ['cs_font', 'cs_fontSize'],
'section': 'cs_style',
'allowEmpty': false,
'visibleIf': '!richText'
},
'cs_fontSize': {
'type': SetValueCmd.type.select,
'fieldId': 'cs_font_size',
'rowId': 'rbro_doc_element_cs_font_row',
'singleRowProperty': false,
'section': 'cs_style',
'allowEmpty': false,
'visibleIf': '!richText'
},
'cs_lineSpacing': {
'type': SetValueCmd.type.select,
'fieldId': 'cs_line_spacing',
'section': 'cs_style',
'allowEmpty': false
},
'cs_borderAll': {
'type': SetValueCmd.type.button,
'fieldId': 'cs_border_all',
'rowId': 'rbro_doc_element_cs_border_row',
'singleRowProperty': false,
'rowProperties': [
'cs_borderAll', 'cs_borderLeft', 'cs_borderTop', 'cs_borderRight', 'cs_borderBottom'
],
'section': 'cs_style'
},
'cs_borderLeft': {
'type': SetValueCmd.type.button,
'fieldId': 'cs_border_left',
'rowId': 'rbro_doc_element_cs_border_row',
'singleRowProperty': false,
'section': 'cs_style'
},
'cs_borderTop': {
'type': SetValueCmd.type.button,
'fieldId': 'cs_border_top',
'rowId': 'rbro_doc_element_cs_border_row',
'singleRowProperty': false,
'section': 'cs_style'
},
'cs_borderRight': {
'type': SetValueCmd.type.button,
'fieldId': 'cs_border_right',
'rowId': 'rbro_doc_element_cs_border_row',
'singleRowProperty': false,
'section': 'cs_style'
},
'cs_borderBottom': {
'type': SetValueCmd.type.button,
'fieldId': 'cs_border_bottom',
'rowId': 'rbro_doc_element_cs_border_row',
'singleRowProperty': false,
'section': 'cs_style'
},
'cs_borderColor': {
'type': SetValueCmd.type.color,
'allowEmpty': false,
'fieldId': 'cs_border_color',
'section': 'cs_style'
},
'cs_borderWidth': {
'type': SetValueCmd.type.text,
'fieldId': 'cs_border_width',
'section': 'cs_style'
},
'cs_paddingLeft': {
'type': SetValueCmd.type.text,
'fieldId': 'cs_padding_left',
'rowId': 'rbro_doc_element_cs_padding_row',
'singleRowProperty': false,
'rowProperties': ['paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom'],
'section': 'cs_style'
},
'cs_paddingTop': {
'type': SetValueCmd.type.text,
'fieldId': 'cs_padding_top',
'rowId': 'rbro_doc_element_cs_padding_row',
'singleRowProperty': false,
'section': 'cs_style'
},
'cs_paddingRight': {
'type': SetValueCmd.type.text,
'fieldId': 'cs_padding_right',
'rowId': 'rbro_doc_element_cs_padding_row',
'singleRowProperty': false,
'section': 'cs_style'
},
'cs_paddingBottom': {
'type': SetValueCmd.type.text,
'fieldId': 'cs_padding_bottom',
'rowId': 'rbro_doc_element_cs_padding_row',
'singleRowProperty': false,
'section': 'cs_style'
},
'spreadsheet_hide': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'spreadsheet_hide',
'section': 'spreadsheet'
},
'spreadsheet_column': {
'type': SetValueCmd.type.text,
'fieldId': 'spreadsheet_column',
'section': 'spreadsheet'
},
'spreadsheet_colspan': {
'type': SetValueCmd.type.text,
'fieldId': 'spreadsheet_colspan',
'section': 'spreadsheet'
},
'spreadsheet_addEmptyRow': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'spreadsheet_add_empty_row',
'section': 'spreadsheet'
},
'spreadsheet_type': {
'type': SetValueCmd.type.select,
'fieldId': 'spreadsheet_type',
'section': 'spreadsheet'
},
'spreadsheet_pattern': {
'type': SetValueCmd.type.text,
'fieldId': 'spreadsheet_pattern',
'section': 'spreadsheet',
'visibleIf': 'spreadsheet_type'
},
'spreadsheet_textWrap': {
'type': SetValueCmd.type.checkbox,
'fieldId': 'spreadsheet_text_wrap',
'section': 'spreadsheet'
}
};
if (!rb.getProperty('showPlusFeatures')) {
// remove all properties of PLUS version
delete this.propertyDescriptors['richText'];
delete this.propertyDescriptors['richTextContent'];
}
super.initVisibleIfFields();
}
render() {
let elDiv, elFormField, elParameterButton;
let panel = utils.createElement('div', { id: 'rbro_doc_element_panel', class: 'rbroHidden' });
elDiv = utils.createElement('div', { id: 'rbro_doc_element_label_row', class: 'rbroFormRow' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementLabel'), 'rbro_doc_element_label');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elLabel = utils.createElement('input', { id: 'rbro_doc_element_label', autocomplete: 'off' });
elLabel.addEventListener('input', (event) => {
let val = elLabel.value;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'label', val, SetValueCmd.type.text, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
elFormField.append(elLabel);
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement('div', { id: 'rbro_doc_element_data_source_row', class: 'rbroFormRow' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementDataSource'), 'rbro_doc_element_data_source');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elSplit = utils.createElement('div', { class: 'rbroSplit rbroSelector' });
let elDataSource = utils.createElement('textarea', { id: 'rbro_doc_element_data_source', rows: 1 });
elDataSource.addEventListener('input', (event) => {
let val = elDataSource.value;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'dataSource', val, SetValueCmd.type.text, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
autosize(elDataSource);
elSplit.append(elDataSource);
elParameterButton = utils.createElement('div', { class: 'rbroButton rbroRoundButton rbroIcon-select' });
elParameterButton.addEventListener('click', (event) => {
let selectedObjects = this.rb.getSelectedObjects();
// data source parameters are not shown in case multiple objects are selected
let selectedObject = selectedObjects.length === 1 ? selectedObjects[0] : null;
this.rb.getPopupWindow().show(
this.rb.getParameterItems(selectedObject, [Parameter.type.array]),
null, 'rbro_doc_element_data_source', 'dataSource', PopupWindow.type.parameterSet);
});
elSplit.append(elParameterButton);
elFormField.append(elSplit);
elFormField.append(
utils.createElement('div', { id: 'rbro_doc_element_data_source_error', class: 'rbroErrorMessage' })
);
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement('div', { id: 'rbro_doc_element_content_row', class: 'rbroFormRow rbroHidden' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementContent'), 'rbro_doc_element_content');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
elSplit = utils.createElement('div', { class: 'rbroSplit rbroSelector' });
let elContent = utils.createElement('textarea', { id: 'rbro_doc_element_content', rows: 1 });
elContent.addEventListener('input', (event) => {
let val = elContent.value;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'content', val, SetValueCmd.type.text, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
elContent.addEventListener('blur', (event) => {
this.rb.getPopupWindow().hide();
});
autosize(elContent);
elSplit.append(elContent);
elParameterButton = utils.createElement('div', { class: 'rbroButton rbroRoundButton rbroIcon-select' });
elParameterButton.addEventListener('click', (event) => {
let selectedObjects = this.rb.getSelectedObjects();
// data source parameters are not shown in case multiple objects are selected
let selectedObject = selectedObjects.length === 1 ? selectedObjects[0] : null;
this.rb.getPopupWindow().show(
this.rb.getParameterItems(selectedObject, null), null,
'rbro_doc_element_content', 'content', PopupWindow.type.parameterAppend);
});
elSplit.append(elParameterButton);
elFormField.append(elSplit);
elFormField.append(
utils.createElement('div', { id: 'rbro_doc_element_content_error', class: 'rbroErrorMessage' })
);
elDiv.append(elFormField);
panel.append(elDiv);
// Rich-Text-Editor
if (this.rb.getProperty('showPlusFeatures')) {
elDiv = utils.createElement('div', { id: 'rbro_doc_element_rich_text_row', class: 'rbroFormRow' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementRichText'), 'rbro_doc_element_rich_text');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elRichTextLabel = utils.createElement('label', { class: 'switch-light switch-material' });
let elRichText = utils.createElement('input', { id: 'rbro_doc_element_rich_text', type: 'checkbox' });
elRichText.addEventListener('change', (event) => {
let richTextChecked = elRichText.checked;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'richText', richTextChecked, SetValueCmd.type.checkbox, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
elRichTextLabel.append(elRichText);
let elRichTextSpan = utils.createElement('span');
elRichTextSpan.append(utils.createElement('span'));
elRichTextSpan.append(utils.createElement('span'));
elRichTextSpan.append(utils.createElement('a'));
elRichTextLabel.append(elRichTextSpan);
elFormField.append(elRichTextLabel);
elFormField.append(
utils.createElement('div', { id: 'rbro_doc_element_rich_text_error', class: 'rbroErrorMessage' })
);
if (this.rb.getProperty('showPlusFeaturesInfo')) {
const elInfoText = utils.createElement('div', { class: 'rbroInfo' });
elInfoText.innerHTML = this.rb.getLabel('plusFeatureInfo');
elFormField.append(elInfoText);
}
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement(
'div', {
id: 'rbro_doc_element_rich_text_content_row',
class: 'rbroFormRow rbroRichTextEditor rbroHidden'
});
let colors = this.rb.getProperty('colors');
const elRichTextColor = utils.createElement(
'select', { class: 'ql-color', title: this.rb.getLabel('styleTextColor') });
const elRichTextBackgroundColor = utils.createElement(
'select', { class: 'ql-background', title: this.rb.getLabel('styleBackgroundColor') });
for (let color of colors) {
elRichTextColor.append(utils.createElement('option', { value: color }, color));
elRichTextBackgroundColor.append(utils.createElement('option', { value: color }, color));
}
elRichTextColor.append(utils.createElement('option', { value: 'clear-color' }));
elRichTextBackgroundColor.append(utils.createElement('option', { value: 'clear-color' }));
const elRichTextFont = utils.createElement('select', { class: 'ql-font' });
const defaultFont = this.rb.getProperty('defaultFont');
for (let font of this.rb.getFonts()) {
const props = { value: font.value };
if (font.value === defaultFont) {
props.selected = 'selected';
}
elRichTextFont.append(utils.createElement('option', props, font.name));
}
const elRichTextFontSize = utils.createElement('select', { class: 'ql-size' });
for (let size of this.rb.getProperty('fontSizes')) {
const props = { value: size + 'px' };
if (size === 12) {
props.selected = 'selected';
}
elRichTextFontSize.append(utils.createElement('option', props, size + 'pt'));
}
const elToolbar = utils.createElement('div', { id: 'rbro_doc_element_rich_text_content_toolbar' });
let elToolbarBlock = utils.createElement('span', { class: 'ql-formats' });
elToolbarBlock.append(
utils.createElement('button', { class: 'ql-bold', title: this.rb.getLabel('styleBold') }));
elToolbarBlock.append(
utils.createElement('button', { class: 'ql-italic', title: this.rb.getLabel('styleItalic') }));
elToolbarBlock.append(
utils.createElement('button', { class: 'ql-underline', title: this.rb.getLabel('styleUnderline') }));
elToolbarBlock.append(
utils.createElement('button', { class: 'ql-strike', title: this.rb.getLabel('styleStrikethrough') }));
elToolbar.append(elToolbarBlock);
elToolbarBlock = utils.createElement('span', { class: 'ql-formats' });
elToolbarBlock.append(utils.createElement('button', { class: 'ql-link' }));
elToolbar.append(elToolbarBlock);
elToolbarBlock = utils.createElement('span', { class: 'ql-formats' });
elToolbarBlock.append(
utils.createElement('select', { class: 'ql-align', title: this.rb.getLabel('styleAlignment') }));
elToolbar.append(elToolbarBlock);
elToolbarBlock = utils.createElement('span', { class: 'ql-formats' });
elToolbarBlock.append(elRichTextColor);
elToolbarBlock.append(elRichTextBackgroundColor);
elToolbar.append(elToolbarBlock);
elToolbar.append(elRichTextFont);
elToolbar.append(elRichTextFontSize);
elToolbar.append(utils.createElement(
'div', {
id: 'rbro_doc_element_rich_text_content_toolbar_parameter',
class: 'rbroButton rbroRoundButton rbroIcon-select'
})
);
elDiv.append(elToolbar);
let elRichTextContent = utils.createElement('div', { id: 'rbro_doc_element_rich_text_content' });
elDiv.append(elRichTextContent);
elDiv.append(
utils.createElement(
'div', { id: 'rbro_doc_element_rich_text_content_error', class: 'rbroErrorMessage' })
);
panel.append(elDiv);
}
elDiv = utils.createElement('div', { id: 'rbro_doc_element_eval_row', class: 'rbroFormRow rbroHidden' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementEval'), 'rbro_doc_element_eval');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elEval = utils.createElement('input', { id: 'rbro_doc_element_eval', type: 'checkbox' });
elEval.addEventListener('change', (event) => {
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
let evalChecked = elEval.checked;
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'eval', evalChecked, SetValueCmd.type.checkbox, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
elFormField.append(elEval);
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement('div', { id: 'rbro_doc_element_format_row', class: 'rbroFormRow' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementFormat'), 'rbro_doc_element_format');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elFormat = utils.createElement('select', { id: 'rbro_doc_element_format' });
elFormat.append(utils.createElement('option', { value: 'CODE39' }, 'CODE39'));
elFormat.append(utils.createElement('option', { value: 'CODE128' }, 'CODE128'));
elFormat.append(utils.createElement('option', { value: 'EAN8' }, 'EAN-8'));
elFormat.append(utils.createElement('option', { value: 'EAN13' }, 'EAN-13'));
elFormat.append(utils.createElement('option', { value: 'UPC' }, 'UPC'));
elFormat.append(utils.createElement('option', { value: 'QRCode' }, 'QR Code'));
elFormat.addEventListener('change', (event) => {
let val = elFormat.value;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'format', val, SetValueCmd.type.select, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
elFormField.append(elFormat);
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement('div', { id: 'rbro_doc_element_display_value_row', class: 'rbroFormRow' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementDisplayValue'), 'rbro_doc_element_display_value');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elDisplayValue = utils.createElement('input', { id: 'rbro_doc_element_display_value', type: 'checkbox' });
elDisplayValue.addEventListener('change', (event) => {
let displayValueChecked = elDisplayValue.checked;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(),'displayValue', displayValueChecked, SetValueCmd.type.checkbox, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
elFormField.append(elDisplayValue);
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement('div', { id: 'rbro_doc_element_bar_width_row', class: 'rbroFormRow' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementBarWidth'), 'rbro_doc_element_bar_width');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elBarWidth = utils.createElement(
'input', { id: 'rbro_doc_element_bar_width', type: 'number', step: '0.1', autocomplete: 'off' });
elBarWidth.addEventListener('input', (event) => {
let val = elBarWidth.value;
if (val !== '') {
val = utils.checkInputDecimal(val, 0.3, 3);
}
if (val !== elBarWidth.value) {
elBarWidth.value = val;
}
let selectedObjects = this.rb.getSelectedObjects();
let valueChanged = false;
for (let i=selectedObjects.length - 1; i >= 0; i--) {
if (selectedObjects[i].getValue('barWidth') !== val) {
valueChanged = true;
break;
}
}
if (valueChanged) {
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'barWidth', val, SetValueCmd.type.text, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
}
});
elFormField.append(elBarWidth);
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement('div', { id: 'rbro_doc_element_guard_bar_row', class: 'rbroFormRow' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementGuardBar'), 'rbro_doc_element_guard_bar');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elGuardBar = utils.createElement('input', { id: 'rbro_doc_element_guard_bar', type: 'checkbox' });
elGuardBar.addEventListener('change', (event) => {
let guardBarChecked = elGuardBar.checked;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(),'guardBar', guardBarChecked, SetValueCmd.type.checkbox, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
elFormField.append(elGuardBar);
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement('div', { id: 'rbro_doc_element_rotate_row', class: 'rbroFormRow' });
utils.appendLabel(
elDiv, this.rb.getLabel('docElementRotate'), 'rbro_doc_element_rotate');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elRotate = utils.createElement('input', { id: 'rbro_doc_element_rotate', type: 'checkbox' });
elRotate.addEventListener('change', (event) => {
let rotateChecked = elRotate.checked;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'rotate', rotateChecked, SetValueCmd.type.checkbox, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
elFormField.append(elRotate);
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement('div', { id: 'rbro_doc_element_error_correction_level_row', class: 'rbroFormRow' });
utils.appendLabel(
elDiv, this.rb.getLabel('docElementErrorCorrectionLevel'), 'rbro_doc_element_error_correction_level');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
let elErrorCorrectionLevel = utils.createElement('select', { id: 'rbro_doc_element_error_correction_level' });
elErrorCorrectionLevel.append(
utils.createElement('option', { value: 'L' }, this.rb.getLabel('docElementErrorCorrectionLevelLow')));
elErrorCorrectionLevel.append(
utils.createElement('option', { value: 'M' }, this.rb.getLabel('docElementErrorCorrectionLevelMedium')));
elErrorCorrectionLevel.append(
utils.createElement('option', { value: 'Q' }, this.rb.getLabel('docElementErrorCorrectionLevelQuartile')));
elErrorCorrectionLevel.append(
utils.createElement('option', { value: 'H' }, this.rb.getLabel('docElementErrorCorrectionLevelHigh')));
elErrorCorrectionLevel.addEventListener('change', (event) => {
let val = elErrorCorrectionLevel.value;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'errorCorrectionLevel', val, SetValueCmd.type.select, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
elFormField.append(elErrorCorrectionLevel);
elDiv.append(elFormField);
panel.append(elDiv);
elDiv = utils.createElement('div', { id: 'rbro_doc_element_source_row', class: 'rbroFormRow' });
utils.appendLabel(elDiv, this.rb.getLabel('docElementSource'), 'rbro_doc_element_source');
elFormField = utils.createElement('div', { class: 'rbroFormField' });
elSplit = utils.createElement('div', { class: 'rbroSplit rbroSelector' });
let elSource = utils.createElement('textarea', { id: 'rbro_doc_element_source', rows: 1 });
elSource.addEventListener('input', (event) => {
let val = elSource.value;
let cmdGroup = new CommandGroupCmd('Set value', this.rb);
let selectedObjects = this.rb.getSelectedObjects();
for (let i=selectedObjects.length - 1; i >= 0; i--) {
let obj = selectedObjects[i];
cmdGroup.addSelection(obj.getId());
cmdGroup.addCommand(new SetValueCmd(
obj.getId(), 'source', val, SetValueCmd.type.text, this.rb));
}
if (!cmdGroup.isEmpty()) {
this.rb.executeCommand(cmdGroup);
}
});
autosize(elSource);
elSplit.append(elSource);
elParameterButton = utils.createElement('div', { class: 'rbroButton rbroRoundButton rbroIcon-select' });
elParameterButton.addEventListener('click', (event) => {
let selectedObjects = this.rb.getSelectedObjects();
// data source parameters are not shown in case multiple objects are selected
let selectedObject = selectedObjects.length === 1 ? selectedObjects[0] : null;
this.rb.getPopupWindow().show(
this.rb.getParameterItems(selectedObject, [Parameter.type.image, Parameter.type.string]),
null, 'rbro_doc_element_source', '