/** * WebDataRocks Reporting v1.3.3 (http://www.webdatarocks.com/) * Copyright 2017 WebDataRocks. All rights reserved. */ var WebDataRocksToolbar = function (pivotContainer, pivot, _, width, labels) { this.pivot = pivot; this.pivotContainer = pivotContainer; this.width = (typeof width == "number" || (width.indexOf("px") < 0 && width.indexOf("%") < 0)) ? width + "px" : width; this.Labels = labels; } WebDataRocksToolbar.prototype.getTabs = function () { var tabs = []; var Labels = this.Labels; // Connect tab tabs.push({ title: Labels.connect, id: "wdr-tab-connect", icon: this.icons.connect, menu: [ { title: Labels.connect_local_csv, id: "wdr-tab-connect-local-csv", handler: this.connectLocalCSVHandler, mobile: false, icon: this.icons.connect_csv }, { title: Labels.connect_local_json, id: "wdr-tab-connect-local-json", handler: this.connectLocalJSONHandler, mobile: false, icon: this.icons.connect_json }, { title: this.osUtils.isMobile ? Labels.connect_remote_csv_mobile : Labels.connect_remote_csv, id: "wdr-tab-connect-remote-csv", handler: this.connectRemoteCSV, icon: this.icons.connect_csv }, { title: this.osUtils.isMobile ? Labels.connect_remote_json_mobile : Labels.connect_remote_json, id: "wdr-tab-connect-remote-json", handler: this.connectRemoteJSON, icon: this.icons.connect_json }, ] }); // Open tab tabs.push({ title: Labels.open, id: "wdr-tab-open", icon: this.icons.open, menu: [ { title: Labels.local_report, id: "wdr-tab-open-local-report", handler: this.openLocalReport, mobile: false, icon: this.icons.open_local }, { title: this.osUtils.isMobile ? Labels.remote_report_mobile : Labels.remote_report, id: "wdr-tab-open-remote-report", handler: this.openRemoteReport, icon: this.icons.open_remote } ] }); // Save tab tabs.push({ title: Labels.save, id: "wdr-tab-save", handler: this.saveHandler, mobile: false, icon: this.icons.save }); // Export tab tabs.push({ title: Labels.export, id: "wdr-tab-export", mobile: false, icon: this.icons.export, menu: [ { title: Labels.export_print, id: "wdr-tab-export-print", handler: this.printHandler, icon: this.icons.export_print }, { title: Labels.export_html, id: "wdr-tab-export-html", handler: this.exportHandler, args: "html", icon: this.icons.export_html }, { title: Labels.export_excel, id: "wdr-tab-export-excel", handler: this.exportHandler, args: "excel", icon: this.icons.export_excel }, { title: Labels.export_pdf, id: "wdr-tab-export-pdf", handler: this.exportHandler, args: "pdf", icon: this.icons.export_pdf }, ] }); // Format tab tabs.push({ title: Labels.format, id: "wdr-tab-format", icon: this.icons.format, rightGroup: true, menu: [ { title: this.osUtils.isMobile ? Labels.format_cells_mobile : Labels.format_cells, id: "wdr-tab-format-cells", handler: this.formatCellsHandler, icon: this.icons.format_number }, { title: this.osUtils.isMobile ? Labels.conditional_formatting_mobile : Labels.conditional_formatting, id: "wdr-tab-format-conditional", handler: this.conditionalFormattingHandler, icon: this.icons.format_conditional } ] }); // Options tab tabs.push({ title: Labels.options, id: "wdr-tab-options", handler: this.optionsHandler, icon: this.icons.options, rightGroup: true }); // Fields tab tabs.push({ title: Labels.fields, id: "wdr-tab-fields", handler: this.fieldsHandler, icon: this.icons.fields, rightGroup: true }); // Fullscreen tab if (document["addEventListener"] != undefined) { // For IE8 tabs.push({ title: Labels.fullscreen, id: "wdr-tab-fullscreen", handler: this.fullscreenHandler, mobile: false, icon: this.icons.fullscreen, rightGroup: true }); } return tabs; } WebDataRocksToolbar.prototype.create = function () { this.popupManager = new WebDataRocksToolbar.PopupManager(this); this.dataProvider = this.getTabs(); this.init(); } WebDataRocksToolbar.prototype.applyToolbarLayoutClasses = function() { if (!this.osUtils.isMobile) { var _this = this; var addLayoutClasses = function() { if (!_this.toolbarWrapper) return; var toolbarWidth = _this.toolbarWrapper.getBoundingClientRect().width; _this.toolbarWrapper.classList.remove("wdr-layout-500"); _this.toolbarWrapper.classList.remove("wdr-layout-360"); _this.toolbarWrapper.classList.remove("wdr-layout-300"); if (toolbarWidth < 500) { _this.toolbarWrapper.classList.add("wdr-layout-500"); } if (toolbarWidth < 360) { _this.toolbarWrapper.classList.add("wdr-layout-360"); } if (toolbarWidth < 300) { _this.toolbarWrapper.classList.add("wdr-layout-300"); } }; addLayoutClasses(); window.addEventListener("resize", addLayoutClasses); } } WebDataRocksToolbar.prototype.init = function () { this.container = this.pivotContainer; this.container.style.position = (this.container.style.position == "") ? "relative" : this.container.style.position; this.toolbarWrapper = document.createElement("div"); this.toolbarWrapper.id = "wdr-toolbar-wrapper"; this.toolbarWrapper.style.width = this.width; if (this.osUtils.isMobile) { this.addClass(this.toolbarWrapper, "wdr-mobile"); } this.addClass(this.toolbarWrapper, "wdr-toolbar-ui"); this.toolbarWrapper.style.width = this.width; var toolbar = document.createElement("ul"); toolbar.id = "wdr-toolbar"; var rightGroup = document.createElement("div"); rightGroup.classList.add("wdr-toolbar-group-right"); toolbar.appendChild(rightGroup); for (var i = 0; i < this.dataProvider.length; i++) { if (this.isDisabled(this.dataProvider[i])) continue; if (this.osUtils.isMobile && this.dataProvider[i].menu != null && this.dataProvider[i].collapse != true) { for (var j = 0; j < this.dataProvider[i].menu.length; j++) { if (this.isDisabled(this.dataProvider[i].menu[j])) continue; toolbar.appendChild(this.createTab(this.dataProvider[i].menu[j])); } } else { var tab = (this.dataProvider[i].divider) ? this.createDivider(this.dataProvider[i]) : this.createTab(this.dataProvider[i]); if (rightGroup && this.dataProvider[i].rightGroup) { rightGroup.appendChild(tab); } else { toolbar.appendChild(tab); } } } this.toolbarWrapper.appendChild(toolbar); this.container.insertBefore(this.toolbarWrapper, this.container.firstChild); this.updateLabels(this.Labels); this.applyToolbarLayoutClasses(); } // LABELS WebDataRocksToolbar.prototype.updateLabels = function (labels) { var Labels = this.Labels = labels; this.setText(document.querySelector("#wdr-tab-connect > a > span"), Labels.connect); this.setText(document.querySelector("#wdr-tab-connect-local-csv > a > span"), Labels.connect_local_csv); this.setText(document.querySelector("#wdr-tab-connect-local-json > a > span"), Labels.connect_local_json); this.setText(document.querySelector("#wdr-tab-connect-remote-csv > a > span"), this.osUtils.isMobile ? Labels.connect_remote_csv_mobile : Labels.connect_remote_csv); this.setText(document.querySelector("#wdr-tab-open > a > span"), Labels.open); this.setText(document.querySelector("#wdr-tab-open-local-report > a > span"), Labels.local_report); this.setText(document.querySelector("#wdr-tab-open-remote-report > a > span"), this.osUtils.isMobile ? Labels.remote_report_mobile : Labels.remote_report); this.setText(document.querySelector("#wdr-tab-save > a > span"), Labels.save); this.setText(document.querySelector("#wdr-tab-format > a > span"), Labels.format); this.setText(document.querySelector("#wdr-tab-format-cells > a > span"), this.osUtils.isMobile ? Labels.format_cells_mobile : Labels.format_cells); this.setText(document.querySelector("#wdr-tab-format-conditional > a > span"), this.osUtils.isMobile ? Labels.conditional_formatting_mobile : Labels.conditional_formatting); this.setText(document.querySelector("#wdr-tab-options > a > span"), Labels.options); this.setText(document.querySelector("#wdr-tab-fullscreen > a > span"), Labels.fullscreen); this.setText(document.querySelector("#wdr-tab-export > a > span"), Labels.export); this.setText(document.querySelector("#wdr-tab-export-print > a > span"), Labels.export_print); this.setText(document.querySelector("#wdr-tab-export-html > a > span"), Labels.export_html); this.setText(document.querySelector("#wdr-tab-export-excel > a > span"), Labels.export_excel); this.setText(document.querySelector("#wdr-tab-export-pdf > a > span"), Labels.export_pdf); this.setText(document.querySelector("#wdr-tab-fields > a > span"), Labels.fields); } // ICONS WebDataRocksToolbar.prototype.icons = { connect: 'menu_connect', connect_csv: '', connect_json: '', open: 'menu_open', open_local: '', open_remote: '', save: 'menu_save', export: 'menu_export', export_print: 'dd_save_print', export_excel: '', export_html: '', export_pdf: '', format: 'menu_format', format_number: '', format_conditional: '', options: 'menu_options', fields: 'menu_fields', fullscreen: 'menu_fullscreen_open', }; // HANDLERS // Connect tab WebDataRocksToolbar.prototype.connectLocalCSVHandler = function () { this.pivot.connectTo({ dataSourceType: "csv", browseForFile: true }); } WebDataRocksToolbar.prototype.connectLocalJSONHandler = function () { this.pivot.connectTo({ dataSourceType: "json", browseForFile: true }); } WebDataRocksToolbar.prototype.connectRemoteCSV = function () { this.showConnectToRemoteCSVDialog(); } WebDataRocksToolbar.prototype.connectRemoteJSON = function () { this.showConnectToRemoteJSONDialog(); } // Open tab WebDataRocksToolbar.prototype.openLocalReport = function () { this.pivot.open(); } WebDataRocksToolbar.prototype.openRemoteReport = function () { this.showOpenRemoteReportDialog(); } // Save tab WebDataRocksToolbar.prototype.saveHandler = function () { this.pivot.save("report.json", 'file'); } // Format tab WebDataRocksToolbar.prototype.formatCellsHandler = function () { this.showFormatCellsDialog(); } WebDataRocksToolbar.prototype.conditionalFormattingHandler = function () { this.showConditionalFormattingDialog(); } // Options tab WebDataRocksToolbar.prototype.optionsHandler = function () { this.showOptionsDialog(); } // Fields tab WebDataRocksToolbar.prototype.fieldsHandler = function () { this.pivot.openFieldsList(); } // Export tab WebDataRocksToolbar.prototype.printHandler = function () { this.pivot.print(); } WebDataRocksToolbar.prototype.exportHandler = function (type) { (type == "pdf") ? this.showExportPdfDialog() : this.pivot.exportTo(type); } // Fullscreen tab WebDataRocksToolbar.prototype.fullscreenHandler = function () { this.toggleFullscreen(); } // DIALOGS WebDataRocksToolbar.prototype.defaults = {}; // Connect to remote CSV WebDataRocksToolbar.prototype.showConnectToRemoteCSVDialog = function () { var self = this; var Labels = this.Labels; var applyHandler = function () { if (textInput.value.length > 0) { self.pivot.connectTo({ filename: textInput.value, dataSourceType: "csv" }); } } var dialog = this.popupManager.createPopup(); dialog.content.classList.add("wdr-popup-w500"); dialog.setTitle(Labels.open_remote_csv); dialog.setToolbar([ { id: "wdr-btn-open", label: Labels.open, handler: applyHandler, isPositive: true }, { id: "wdr-btn-cancel", label: Labels.cancel } ]); var content = document.createElement("div"); var textInput = document.createElement("input"); textInput.id = "wdr-inp-file-url"; textInput.type = "text"; textInput.value = "https://cdn.webdatarocks.com/data/data.csv"; content.appendChild(textInput); dialog.setContent(content); this.popupManager.addPopup(dialog.content); } // Connect to remote JSON WebDataRocksToolbar.prototype.showConnectToRemoteJSONDialog = function () { var self = this; var Labels = this.Labels; var applyHandler = function () { if (textInput.value.length > 0) { self.pivot.connectTo({ filename: textInput.value, dataSourceType: "json" }); } } var dialog = this.popupManager.createPopup(); dialog.content.classList.add("wdr-popup-w500"); dialog.setTitle(Labels.open_remote_json); dialog.setToolbar([ { id: "wdr-btn-open", label: Labels.open, handler: applyHandler, isPositive: true }, { id: "wdr-btn-cancel", label: Labels.cancel } ]); var content = document.createElement("div"); var textInput = document.createElement("input"); textInput.id = "wdr-inp-file-url"; textInput.type = "text"; textInput.value = "https://cdn.webdatarocks.com/data/data.json"; content.appendChild(textInput); dialog.setContent(content); this.popupManager.addPopup(dialog.content); } // Open remote report WebDataRocksToolbar.prototype.showOpenRemoteReportDialog = function () { var self = this; var Labels = this.Labels; var applyHandler = function () { if (textInput.value.length > 0) { self.pivot.load(textInput.value); } } var dialog = this.popupManager.createPopup(); dialog.content.classList.add("wdr-popup-w500"); dialog.setTitle(Labels.open_remote_report); dialog.setToolbar([ { id: "wdr-btn-open", label: Labels.open, handler: applyHandler, isPositive: true }, { id: "wdr-btn-cancel", label: Labels.cancel } ]); var content = document.createElement("div"); var textInput = document.createElement("input"); textInput.type = "text"; var options = self.pivot.getOptions() || {}; var isFlatTable = (options.grid && options.grid.type == "flat"); textInput.value = isFlatTable ? "https://cdn.webdatarocks.com/reports/report-flat.json" : "https://cdn.webdatarocks.com/reports/report.json"; content.appendChild(textInput); dialog.setContent(content); this.popupManager.addPopup(dialog.content); } // Format cells WebDataRocksToolbar.prototype.showFormatCellsDialog = function () { var self = this; var Labels = this.Labels; function updateDropdowns() { textAlignDropDown.disabled = thousandsSepDropDown.disabled = decimalSepDropDown.disabled = decimalPlacesDropDown.disabled = currencySymbInput.disabled = currencyAlignDropDown.disabled = nullValueInput.disabled = isPercentDropdown.disabled = (valuesDropDown.value == "empty"); } var valuesDropDownChangeHandler = function () { updateDropdowns(); var formatVO = self.pivot.getFormat(valuesDropDown.value); textAlignDropDown.value = (formatVO.textAlign == "left" || formatVO.textAlign == "right") ? formatVO.textAlign : "right"; thousandsSepDropDown.value = formatVO.thousandsSeparator; decimalSepDropDown.value = formatVO.decimalSeparator; decimalPlacesDropDown.value = formatVO.decimalPlaces; currencySymbInput.value = formatVO.currencySymbol; currencyAlignDropDown.value = formatVO.currencySymbolAlign; nullValueInput.value = formatVO.nullValue; isPercentDropdown.value = (formatVO.isPercent == true) ? true : false; } var applyHandler = function () { var formatVO = {}; if (valuesDropDown.value == "") formatVO.name = ""; formatVO.textAlign = textAlignDropDown.value; formatVO.thousandsSeparator = thousandsSepDropDown.value; formatVO.decimalSeparator = decimalSepDropDown.value; formatVO.decimalPlaces = decimalPlacesDropDown.value; formatVO.currencySymbol = currencySymbInput.value; formatVO.currencySymbolAlign = currencyAlignDropDown.value; formatVO.nullValue = nullValueInput.value; formatVO.isPercent = isPercentDropdown.value == "true" ? true : false; self.pivot.setFormat(formatVO, (valuesDropDown.value == "" ? null : valuesDropDown.value)); self.pivot.refresh(); } var dialog = this.popupManager.createPopup(); dialog.content.id = "wdr-popup-format-cells"; dialog.setTitle(this.osUtils.isMobile ? Labels.format : Labels.format_cells); dialog.setToolbar([ { id: "wdr-btn-apply", label: Labels.apply, handler: applyHandler, isPositive: true }, { id: "wdr-btn-cancel", label: Labels.cancel } ], true); var content = document.createElement("div"); var group = document.createElement("div"); group.classList.add("wdr-inp-group"); content.appendChild(group); var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); // measures var label = document.createElement("label"); label.classList.add("wdr-uc"); self.setText(label, Labels.choose_value); row.appendChild(label); var select = self.createSelect(); var valuesDropDown = select.select; valuesDropDown.onchange = valuesDropDownChangeHandler; valuesDropDown.options[0] = new Option(Labels.choose_value, "empty"); valuesDropDown.options[0].disabled = true; valuesDropDown.options[1] = new Option(Labels.all_values, ""); row.appendChild(select); var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); var group = document.createElement("div"); group.classList.add("wdr-inp-group"); content.appendChild(group); // text align var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); var label = document.createElement("label"); self.setText(label, Labels.text_align); row.appendChild(label); var select = self.createSelect(); var textAlignDropDown = select.select; textAlignDropDown.options[0] = new Option(Labels.align_left, "left"); textAlignDropDown.options[1] = new Option(Labels.align_right, "right"); row.appendChild(select); // thousand_separator var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); var label = document.createElement("label"); self.setText(label, Labels.thousand_separator); row.appendChild(label); var select = self.createSelect(); var thousandsSepDropDown = select.select; thousandsSepDropDown.options[0] = new Option(Labels.none, ""); thousandsSepDropDown.options[1] = new Option(Labels.space, " "); thousandsSepDropDown.options[2] = new Option(",", ","); thousandsSepDropDown.options[3] = new Option(".", "."); row.appendChild(select); // decimal_separator var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); var label = document.createElement("label"); self.setText(label, Labels.decimal_separator); row.appendChild(label); var select = self.createSelect(); var decimalSepDropDown = select.select; decimalSepDropDown.options[0] = new Option(".", "."); decimalSepDropDown.options[1] = new Option(",", ","); row.appendChild(select); // decimal_places var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); var label = document.createElement("label"); self.setText(label, Labels.decimal_places); row.appendChild(label); var select = self.createSelect(); var decimalPlacesDropDown = select.select; for (var i = 0; i < 11; i++) { decimalPlacesDropDown.options[i] = new Option(i === 0 ? Labels.none : (i - 1), i - 1); } row.appendChild(select); // currency_symbol var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); var label = document.createElement("label"); self.setText(label, Labels.currency_symbol); row.appendChild(label); var currencySymbInput = document.createElement("input"); currencySymbInput.classList.add("wdr-inp"); currencySymbInput.type = "text"; row.appendChild(currencySymbInput); // currency_align var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); var label = document.createElement("label"); self.setText(label, Labels.currency_align); row.appendChild(label); var select = self.createSelect(); var currencyAlignDropDown = select.select; currencyAlignDropDown.options[0] = new Option(Labels.align_left, "left"); currencyAlignDropDown.options[1] = new Option(Labels.align_right, "right"); row.appendChild(select); // null_value var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); var label = document.createElement("label"); self.setText(label, Labels.null_value); row.appendChild(label); var nullValueInput = document.createElement("input"); nullValueInput.classList.add("wdr-inp"); nullValueInput.type = "text"; row.appendChild(nullValueInput); // is_percent var row = document.createElement("div"); row.classList.add("wdr-inp-row"); row.classList.add("wdr-ir-horizontal"); group.appendChild(row); var label = document.createElement("label"); self.setText(label, Labels.is_percent); row.appendChild(label); var select = self.createSelect(); var isPercentDropdown = select.select; isPercentDropdown.options[0] = new Option(Labels.true_value, true); isPercentDropdown.options[1] = new Option(Labels.false_value, false); row.appendChild(select); dialog.setContent(content); this.popupManager.addPopup(dialog.content); var measures = self.pivot.getMeasures(); for (var i = 0; i < measures.length; i++) { valuesDropDown.options[i + 2] = new Option(measures[i].caption, measures[i].uniqueName); } valuesDropDownChangeHandler(); } // Conditional formatting WebDataRocksToolbar.prototype.showConditionalFormattingDialog = function () { var self = this; var Labels = this.Labels; var conditions = this.pivot.getAllConditions(); var applyHandler = function () { self.pivot.removeAllConditions(); for (var i = 0; i < conditions.length; i++) { var formula = composeFormula(conditions[i].sign, conditions[i].value1, conditions[i].value2); if (formula == null) return; conditions[i].formula = formula; self.pivot.addCondition(conditions[i]); } self.pivot.refresh(); }; var onAddConditionBtnClick = function () { var condition = { sign: "<", value1: "0", measures: self.pivot.getMeasures(), format: { fontFamily: 'Arial', fontSize: '12px', color: '#000000', backgroundColor: '#FFFFFF' } }; conditions.push(condition); content.appendChild(self.createConditionalFormattingItem(condition, conditions)); self.popupManager.centerPopup(dialog.content); }; var composeFormula = function (sign, value1, value2) { var formula = ''; var firstValueEmpty = (value1 == null || value1.length == 0); var secondValueEmpty = (value2 == null || value2.length == 0); var isBetween = (sign === '><'); var isEmpty = (sign === 'isNaN'); if ((firstValueEmpty && !isEmpty) || (isBetween && secondValueEmpty)) { return formula; } if (isBetween && !secondValueEmpty) { formula = "AND(#value > " + value1 + ", #value < " + value2 + ")"; } else if (isEmpty) { formula = "isNaN(#value)"; } else { var isString = isNaN(parseFloat(value1)); if (isString) { value1 = "'" + value1 + "'"; } formula = "#value " + sign + " " + value1; } return formula; }; var parseStrings = function (input) { var output = []; var openQuote = false; var str = ""; for (var i = 0; i < input.length; i++) { if (input[i] == '"' || input[i] == "'") { if (openQuote) { output.push(str); } else { str = ""; } openQuote = !openQuote; continue; } if (openQuote) { str += input[i]; } } return output; }; var parseFormula = function (formula) { var parseNumber = /\W\d+\.*\d*/g; var parseSign = /<=|>=|<|>|=|=|!=|isNaN/g; var numbers = formula.match(parseNumber); var strings = parseStrings(formula); var signs = formula.match(parseSign); if (numbers == null && strings == null) return {}; return { value1: (numbers != null) ? numbers[0].replace(/\s/, '') : strings[0], value2: (numbers != null && numbers.length > 1) ? numbers[1].replace(/\s/, '') : '', sign: signs ? signs.join('') : "" }; }; var dialog = this.popupManager.createPopup(); dialog.content.id = "wdr-popup-conditional"; dialog.setTitle(this.osUtils.isMobile ? Labels.conditional : Labels.conditional_formatting); dialog.setToolbar([ { id: "wdr-btn-apply", label: Labels.apply, handler: applyHandler, isPositive: true }, { id: "wdr-btn-cancel", label: Labels.cancel } ], true); var addConditionBtn = document.createElement("a"); addConditionBtn.id = "wdr-add-btn"; addConditionBtn.setAttribute("href", "javascript:void(0)"); addConditionBtn.classList.add("wdr-ui-btn"); addConditionBtn.classList.add("wdr-ui-btn-light"); addConditionBtn.classList.add("wdr-button-add"); addConditionBtn.onclick = onAddConditionBtnClick; addConditionBtn.setAttribute("title", Labels.add_condition); var icon = document.createElement("span"); icon.classList.add("wdr-icon"); icon.classList.add("wdr-icon-act_add"); addConditionBtn.appendChild(icon); dialog.toolbar.insertBefore(addConditionBtn, dialog.toolbar.firstChild); var content = document.createElement("div"); content.classList.add("wdr-popup-content"); content.onclick = function (event) { if (event.target.classList.contains("wdr-cr-delete")) { self.popupManager.centerPopup(dialog.content); } } for (var i = 0; i < conditions.length; i++) { var formula = parseFormula(conditions[i].formula); conditions[i].value1 = formula.value1; conditions[i].value2 = formula.value2; conditions[i].sign = formula.sign; conditions[i].measures = self.pivot.getMeasures(); content.appendChild(self.createConditionalFormattingItem(conditions[i], conditions)); } dialog.setContent(content); this.popupManager.addPopup(dialog.content); }; WebDataRocksToolbar.prototype.defaults.fontSizes = ["8px", "9px", "10px", "11px", "12px", "13px", "14px"], WebDataRocksToolbar.prototype.defaults.fonts = ['Arial', 'Lucida Sans Unicode', 'Verdana', 'Courier New', 'Palatino Linotype', 'Tahoma', 'Impact', 'Trebuchet MS', 'Georgia', 'Times New Roman'], WebDataRocksToolbar.prototype.defaults.conditions = [ { label: "less_than", sign: '<' }, { label: "less_than_or_equal", sign: '<=' }, { label: "greater_than", sign: '>' }, { label: "greater_than_or_equal", sign: '>=' }, { label: "equal_to", sign: '=' }, { label: "not_equal_to", sign: '!=' }, { label: "between", sign: '><' }, { label: "is_empty", sign: 'isNaN' } ]; WebDataRocksToolbar.prototype.createConditionalFormattingItem = function (data, allConditions) { var self = this; var Labels = this.Labels; var fillValuesDropDown = function (measures, selectedMeasure) { valuesDropDown[0] = new Option(Labels.all_values, ""); var options = self.pivot.getOptions() || {}; var isFlatTable = (options.grid && options.grid.type == "flat"); for (var i = 0; i < measures.length; i++) { if (isFlatTable && measures[i].type == 7) { // count measure continue; } valuesDropDown[valuesDropDown.options.length] = new Option(measures[i].caption, measures[i].uniqueName); } if (selectedMeasure != null) { valuesDropDown.value = selectedMeasure; } else { valuesDropDown.selectedIndex = 0; } }; var fillConditionsDropDown = function (selectedCondition) { for (var i = 0; i < self.defaults.conditions.length; i++) { conditionsDropDown[i] = new Option(Labels[self.defaults.conditions[i].label], self.defaults.conditions[i].sign); } if (selectedCondition != null) { conditionsDropDown.value = selectedCondition; } else { conditionsDropDown.selectedIndex = 0; } }; var fillFontFamiliesDropDown = function (selectedFont) { for (var i = 0; i < self.defaults.fonts.length; i++) { fontFamiliesDropDown[i] = new Option(self.defaults.fonts[i], self.defaults.fonts[i]); } fontFamiliesDropDown.value = (selectedFont == null ? 'Arial' : selectedFont); }; var fillFontSizesDropDown = function (selectedFontSize) { for (var i = 0; i < self.defaults.fontSizes.length; i++) { fontSizesDropDown[i] = new Option(self.defaults.fontSizes[i], self.defaults.fontSizes[i]); } fontSizesDropDown.value = (selectedFontSize == null ? "12px" : selectedFontSize); }; var onValueChanged = function () { data.measure = valuesDropDown.value; }; var onFontFamilyChanged = function () { if (data.format != null) { data.format.fontFamily = fontFamiliesDropDown.value; drawSample(); } }; var onFontSizeChanged = function () { if (data.format != null) { data.format.fontSize = fontSizesDropDown.value; drawSample(); } }; var onConditionChanged = function () { data.sign = conditionsDropDown.value; if (('sign' in data) && data.sign === '><') { data.value2 = 0; } else if (('sign' in data) && data.sign === 'isNaN') { delete data.value1; delete data.value2; } else { delete data.value2; } drawInputs(); }; var onInput1Changed = function () { data.value1 = (input1.value.length == 0) ? "0" : input1.value; }; var onInput2Changed = function () { data.value2 = (input2.value.length == 0) ? "0" : input2.value; }; var onRemoveBtnClick = function () { var idx = allConditions.indexOf(data); if (idx > -1) { allConditions.splice(idx, 1); } output.parentNode.removeChild(output); }; var onColorChanged = function () { if (data.format != null) { sample.style.color = colorPicker.fontColor || '#000'; sample.style.backgroundColor = colorPicker.backgroundColor || '#fff'; } }; var onColorApply = function () { if (data.format != null) { data.format.color = colorPicker.fontColor; data.format.backgroundColor = colorPicker.backgroundColor; drawSample(); } }; var onColorCancel = function () { if (data.format != null) { colorPicker.setColor(data.format.hasOwnProperty('backgroundColor') ? data.format.backgroundColor : '0xFFFFFF', "bg"); colorPicker.setColor(data.format.hasOwnProperty('color') ? data.format.color : '0x000000', "font"); } drawSample(); } var drawInputs = function () { if (('sign' in data) && data.sign === '><') { input1.classList.remove("wdr-width120"); input1.classList.add("wdr-width50"); input1.style.display = "inline-block"; input2.value = ('value2' in data ? data.value2 : "0"); input2.style.display = "inline-block"; andLabel.style.display = "inline-block"; } else if (('sign' in data) && data.sign === 'isNaN') { input1.style.display = "none"; input2.style.display = "none"; andLabel.style.display = "none"; } else { input1.classList.add("wdr-width120"); input1.classList.remove("wdr-width50"); input1.style.display = "inline-block"; input2.style.display = "none"; andLabel.style.display = "none"; } }; var drawSample = function () { var format = data.format; if (format != null) { sample.style.backgroundColor = format.backgroundColor || '#fff'; sample.style.color = format.color || '#000'; sample.style.fontFamily = format.fontFamily || 'Arial'; sample.style.fontSize = format.fontSize || '12px'; } }; var output = document.createElement("div"); output.classList.add("wdr-condition-row"); var itemRenderer = document.createElement("div"); itemRenderer.classList.add("wdr-wrap-relative"); output.appendChild(itemRenderer); var removeBtn = document.createElement("span"); removeBtn.classList.add("wdr-cr-delete"); removeBtn.classList.add("wdr-icon"); removeBtn.classList.add("wdr-icon-act_trash"); removeBtn.onclick = onRemoveBtnClick; itemRenderer.appendChild(removeBtn); var row = document.createElement("div"); row.classList.add("wdr-cr-inner"); itemRenderer.appendChild(row); var label = document.createElement("div"); label.classList.add("wdr-cr-lbl"); label.classList.add("wdr-width50"); self.setText(label, Labels.value + ":"); row.appendChild(label); var select = self.createSelect(); select.id = "wdr-values"; var valuesDropDown = select.select; if ('measures' in data) { fillValuesDropDown(data.measures, data.measure); valuesDropDown.disabled = (data.measures.length === 0); } else { valuesDropDown.disabled = true; } valuesDropDown.onchange = onValueChanged; row.appendChild(select); var select = self.createSelect(); select.id = "wdr-conditions"; var conditionsDropDown = select.select; fillConditionsDropDown(!('sign' in data) ? null : data.sign); conditionsDropDown.onchange = onConditionChanged; row.appendChild(select); var input1 = document.createElement("input"); input1.classList.add("wdr-number-inp"); input1.classList.add("wdr-width50"); input1.type = "number"; input1.value = ('value1' in data ? data.value1 : "0"); input1.onchange = onInput1Changed; row.appendChild(input1); var andLabel = document.createElement("span"); andLabel.id = "wdr-and-label"; andLabel.classList.add("wdr-width20"); self.setText(andLabel, Labels.and_symbole); row.appendChild(andLabel); var input2 = document.createElement("input"); input2.classList.add("wdr-number-inp"); input2.classList.add("wdr-width50"); input2.type = "number"; input2.value = ('value2' in data ? data.value2 : "0"); input2.onchange = onInput2Changed; row.appendChild(input2); drawInputs(); var row = document.createElement("div"); row.classList.add("wdr-cr-inner"); itemRenderer.appendChild(row); var label = document.createElement("div"); label.classList.add("wdr-cr-lbl"); label.classList.add("wdr-width50"); self.setText(label, Labels.format + ":"); row.appendChild(label); var select = self.createSelect(); select.id = "wdr-font-family"; var fontFamiliesDropDown = select.select; fillFontFamiliesDropDown((data.hasOwnProperty('format')) && (data.format.hasOwnProperty('fontFamily')) ? data.format.fontFamily : null); fontFamiliesDropDown.onchange = onFontFamilyChanged; row.appendChild(select); var select = self.createSelect(); select.id = "wdr-font-size"; var fontSizesDropDown = select.select; fillFontSizesDropDown((data.hasOwnProperty('format')) && (data.format.hasOwnProperty('fontSize')) ? data.format.fontSize : null); fontSizesDropDown.onchange = onFontSizeChanged; row.appendChild(select); var colorPicker = new WebDataRocksToolbar.ColorPicker(this, output); colorPicker.setColor((data.hasOwnProperty('format')) && (data.format.hasOwnProperty('backgroundColor')) ? data.format.backgroundColor : '0xFFFFFF', "bg"); colorPicker.setColor((data.hasOwnProperty('format')) && (data.format.hasOwnProperty('color')) ? data.format.color : '0x000000', "font"); colorPicker.changeHandler = onColorChanged; colorPicker.applyHandler = onColorApply; colorPicker.cancelHandler = onColorCancel; row.appendChild(colorPicker.element); var sample = document.createElement("input"); sample.id = "wdr-sample"; sample.classList.add("wdr-inp"); sample.type = "number"; sample.value = "73.93"; sample.style.pointerEvents = "none"; row.appendChild(sample); drawSample(); return output; }; // Options WebDataRocksToolbar.prototype.showOptionsDialog = function () { var self = this; var Labels = this.Labels; var applyHandler = function () { var showGrandTotals; if (offRowsColsCbx.checked) { showGrandTotals = "off"; } else if (onRowsColsCbx.checked) { showGrandTotals = "on"; } else if (onRowsCbx.checked) { showGrandTotals = "rows"; } else if (onColsCbx.checked) { showGrandTotals = "columns"; } var showTotals; if (offSubtotalsCbx.checked) { showTotals = "off"; } else if (onSubtotalsCbx.checked) { showTotals = "on"; } else if (rowsSubtotalsCbx.checked) { showTotals = "rows"; } else if (colsSubtotalsCbx.checked) { showTotals = "columns"; } var gridType = "compact"; if (classicViewCbx && classicViewCbx.checked) { gridType = "classic"; } else if (flatViewCbx && flatViewCbx.checked) { gridType = "flat"; } var options = self.pivot.getOptions(); var currentViewType = options["viewType"]; var currentType = options["grid"]["type"]; var options = { grid: { showGrandTotals: showGrandTotals, showTotals: showTotals, type: gridType } }; self.pivot.setOptions(options); self.pivot.refresh(); } var dialog = this.popupManager.createPopup(); dialog.content.id = "wdr-popup-options"; dialog.setTitle(this.osUtils.isMobile ? Labels.options : Labels.layout_options); dialog.setToolbar([ { id: "wdr-btn-apply", label: Labels.apply, handler: applyHandler, isPositive: true }, { id: "wdr-btn-cancel", label: Labels.cancel } ], true); var content = document.createElement("div"); content.classList.add("wdr-popup-content"); var row = document.createElement("div"); row.classList.add("wdr-ui-row"); content.appendChild(row); var col = document.createElement("div"); col.classList.add("wdr-ui-col-2"); row.appendChild(col); // grand totals var title = document.createElement("div"); title.classList.add("wdr-title-2"); self.setText(title, Labels.grand_totals); col.appendChild(title); var grandTotalsGroup = "wdr-grand-totals-" + Date.now(); var list = document.createElement("ul"); list.classList.add("wdr-radiobtn-list"); col.appendChild(list); // grand totals - off var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var offRowsColsCbx = document.createElement("input"); offRowsColsCbx.type = "radio"; offRowsColsCbx.name = grandTotalsGroup; offRowsColsCbx.id = "wdr-gt-1"; offRowsColsCbx.value = "off"; itemWrap.appendChild(offRowsColsCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-gt-1"); self.setText(label, Labels.grand_totals_off); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); // grand totals - on var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var onRowsColsCbx = document.createElement("input"); onRowsColsCbx.type = "radio"; onRowsColsCbx.name = grandTotalsGroup; onRowsColsCbx.id = "wdr-gt-2"; onRowsColsCbx.value = "on"; itemWrap.appendChild(onRowsColsCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-gt-2"); self.setText(label, Labels.grand_totals_on); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); // grand totals - on rows var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var onRowsCbx = document.createElement("input"); onRowsCbx.type = "radio"; onRowsCbx.name = grandTotalsGroup; onRowsCbx.id = "wdr-gt-3"; onRowsCbx.value = "rows"; itemWrap.appendChild(onRowsCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-gt-3"); self.setText(label, Labels.grand_totals_on_rows); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); // grand totals - on cols var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var onColsCbx = document.createElement("input"); onColsCbx.type = "radio"; onColsCbx.name = grandTotalsGroup; onColsCbx.id = "wdr-gt-4"; onColsCbx.value = "rows"; itemWrap.appendChild(onColsCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-gt-4"); self.setText(label, Labels.grand_totals_on_columns); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); // layout var title = document.createElement("div"); title.classList.add("wdr-title-2"); self.setText(title, Labels.layout); col.appendChild(title); var layoutGroup = "wdr-layout-" + Date.now(); var list = document.createElement("ul"); list.classList.add("wdr-radiobtn-list"); col.appendChild(list); // layout - compact var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var compactViewCbx = document.createElement("input"); compactViewCbx.type = "radio"; compactViewCbx.name = layoutGroup; compactViewCbx.id = "wdr-lt-1"; compactViewCbx.value = "compact"; itemWrap.appendChild(compactViewCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-lt-1"); self.setText(label, Labels.compact_view); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); // layout - classic var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var classicViewCbx = document.createElement("input"); classicViewCbx.type = "radio"; classicViewCbx.name = layoutGroup; classicViewCbx.id = "wdr-lt-2"; classicViewCbx.value = "classic"; itemWrap.appendChild(classicViewCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-lt-2"); self.setText(label, Labels.classic_view); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); var options = self.pivot.getReport({ withDefaults: true, withGlobals: true }); // layout - flat var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var flatViewCbx = document.createElement("input"); flatViewCbx.type = "radio"; flatViewCbx.name = layoutGroup; flatViewCbx.id = "wdr-lt-3"; flatViewCbx.value = "flat"; itemWrap.appendChild(flatViewCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-lt-3"); self.setText(label, Labels.flat_view); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); var col = document.createElement("div"); col.classList.add("wdr-ui-col-2"); row.appendChild(col); // subtotals var title = document.createElement("div"); title.classList.add("wdr-title-2"); self.setText(title, Labels.subtotals); col.appendChild(title); var subTotalsGroup = "wdr-subtotals-" + Date.now(); var list = document.createElement("ul"); list.classList.add("wdr-radiobtn-list"); col.appendChild(list); // subtotals - off var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var offSubtotalsCbx = document.createElement("input"); offSubtotalsCbx.type = "radio"; offSubtotalsCbx.name = subTotalsGroup; offSubtotalsCbx.id = "wdr-st-1"; offSubtotalsCbx.value = "off"; itemWrap.appendChild(offSubtotalsCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-st-1"); self.setText(label, Labels.subtotals_off); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); // subtotals - on var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var onSubtotalsCbx = document.createElement("input"); onSubtotalsCbx.type = "radio"; onSubtotalsCbx.name = subTotalsGroup; onSubtotalsCbx.id = "wdr-st-2"; onSubtotalsCbx.value = "on"; itemWrap.appendChild(onSubtotalsCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-st-2"); self.setText(label, Labels.subtotals_on); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); // subtotals - rows var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var rowsSubtotalsCbx = document.createElement("input"); rowsSubtotalsCbx.type = "radio"; rowsSubtotalsCbx.name = subTotalsGroup; rowsSubtotalsCbx.id = "wdr-st-3"; rowsSubtotalsCbx.value = "rows"; itemWrap.appendChild(rowsSubtotalsCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-st-3"); self.setText(label, Labels.subtotals_on_rows); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); // subtotals - columns var item = document.createElement("li"); var itemWrap = document.createElement("div"); itemWrap.classList.add("wdr-radio-wrap"); var colsSubtotalsCbx = document.createElement("input"); colsSubtotalsCbx.type = "radio"; colsSubtotalsCbx.name = subTotalsGroup; colsSubtotalsCbx.id = "wdr-st-4"; colsSubtotalsCbx.value = "columns"; itemWrap.appendChild(colsSubtotalsCbx); var label = document.createElement("label"); label.setAttribute("for", "wdr-st-4"); self.setText(label, Labels.subtotals_on_columns); itemWrap.appendChild(label); item.appendChild(itemWrap); list.appendChild(item); dialog.setContent(content); this.popupManager.addPopup(dialog.content); var options = self.pivot.getOptions() || {}; var optionsGrid = options.grid || {}; if (optionsGrid.showGrandTotals == "off" || optionsGrid.showGrandTotals == false) { offRowsColsCbx.checked = true; } else if (optionsGrid.showGrandTotals == "on" || optionsGrid.showGrandTotals == true) { onRowsColsCbx.checked = true; } else if (optionsGrid.showGrandTotals == "rows") { onRowsCbx.checked = true; } else if (optionsGrid.showGrandTotals == "columns") { onColsCbx.checked = true; } if (optionsGrid.showTotals == "off") { offSubtotalsCbx.checked = true; } else if (optionsGrid.showTotals == "on") { onSubtotalsCbx.checked = true; } else if (optionsGrid.showTotals == "rows") { rowsSubtotalsCbx.checked = true; } else if (optionsGrid.showTotals == "columns") { colsSubtotalsCbx.checked = true; } if (optionsGrid.type == "flat" && flatViewCbx) { flatViewCbx.checked = true; } else if (optionsGrid.type == "classic" && classicViewCbx) { classicViewCbx.checked = true; } else if (compactViewCbx) { compactViewCbx.checked = true; } } // Export to PDF WebDataRocksToolbar.prototype.showExportPdfDialog = function () { var self = this; var Labels = this.Labels; var applyHandler = function () { var orientation = "portrait"; if (landscapeRadio.checked) { orientation = "landscape"; } self.pivot.exportTo('pdf', { pageOrientation: orientation }); } var dialog = this.popupManager.createPopup(); dialog.setTitle(Labels.choose_page_orientation); dialog.setToolbar([ { id: "wdr-btn-apply", label: Labels.apply, handler: applyHandler, isPositive: true }, { id: "wdr-btn-cancel", label: Labels.cancel } ]); var content = document.createElement("div"); var list = document.createElement("ul"); list.classList.add("wdr-radiobtn-list"); content.appendChild(list); // portrait var item = document.createElement("li"); list.appendChild(item); var wrap = document.createElement("div"); wrap.classList.add("wdr-radio-wrap"); item.appendChild(wrap); var portraitRadio = document.createElement("input"); portraitRadio.id = "wdr-portrait-radio"; portraitRadio.type = "radio"; portraitRadio.name = "wdr-pdf-orientation"; portraitRadio.checked = true; wrap.appendChild(portraitRadio); var label = document.createElement("label"); label.setAttribute("for", "wdr-portrait-radio"); self.setText(label, Labels.portrait); wrap.appendChild(label); // landscape var item = document.createElement("li"); list.appendChild(item); var wrap = document.createElement("div"); wrap.classList.add("wdr-radio-wrap"); item.appendChild(wrap); var landscapeRadio = document.createElement("input"); landscapeRadio.id = "wdr-landscape-radio"; landscapeRadio.type = "radio"; landscapeRadio.name = "wdr-pdf-orientation"; wrap.appendChild(landscapeRadio); var label = document.createElement("label"); label.setAttribute("for", "wdr-landscape-radio"); self.setText(label, Labels.landscape); wrap.appendChild(label); dialog.setContent(content); this.popupManager.addPopup(dialog.content); } // Fullscreen WebDataRocksToolbar.prototype.toggleFullscreen = function () { this.isFullscreen() ? this.exitFullscreen() : this.enterFullscreen(this.container); } WebDataRocksToolbar.prototype.isFullscreen = function () { return document.fullScreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement; } WebDataRocksToolbar.prototype.enterFullscreen = function (element) { if (element.requestFullscreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || (element.msRequestFullscreen && window == top)) { this.containerStyle = { width: this.container.style.width, height: this.container.style.height, position: this.container.style.position, top: this.container.style.top, bottom: this.container.style.bottom, left: this.container.style.left, right: this.container.style.right, marginTop: this.container.style.marginTop, marginLeft: this.container.style.left, toolbarWidth: this.toolbarWrapper.style.width }; this.container.style.width = "100%"; this.container.style.height = "100%"; this.container.style.position = "fixed"; this.container.style.top = 0 + "px"; this.container.style.left = 0 + "px"; this.toolbarWrapper.style.width = "100%"; if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { var ua = navigator.userAgent; if ((ua.indexOf("Safari") > -1) && (ua.indexOf("Chrome") == -1)) { element.webkitRequestFullScreen(); } else { element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); } } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { //IE 11 if (window == top) { element.msRequestFullscreen(); } else { alert("Fullscreen mode in IE 11 is not currently supported while Pivot embeded in iframe."); } } element.addEventListener("fullscreenchange", function () { if (!window.screenTop && !window.screenY && !this.isFullscreen()) { this.exitFullscreen(); } }.bind(this), false); element.addEventListener("webkitfullscreenchange", function () { if (!window.screenTop && !window.screenY && !this.isFullscreen()) { this.exitFullscreen(); } }.bind(this), false); element.addEventListener("mozfullscreenchange", function () { if (!(window.fullScreen) && !(window.innerWidth == screen.width && window.innerHeight == screen.height)) { this.exitFullscreen(); } }.bind(this), false); } } WebDataRocksToolbar.prototype.exitFullscreen = function () { this.container.style.width = this.containerStyle.width; this.container.style.height = this.containerStyle.height; this.container.style.position = this.containerStyle.position; this.container.style.top = this.containerStyle.top; this.container.style.left = this.containerStyle.left; this.container.style.marginTop = this.containerStyle.marginTop; this.container.style.marginLeft = this.containerStyle.marginLeft; this.toolbarWrapper.style.width = this.containerStyle.toolbarWidth; if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.cancelFullscreen) { document.cancelFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullScreen) { document.webkitExitFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { //IE 11 document.msExitFullscreen(); } } // PRIVATE API WebDataRocksToolbar.prototype.nullOrUndefined = function (val) { return (typeof (val) === 'undefined' || val === null); } WebDataRocksToolbar.prototype.hasClass = function (elem, cls) { return elem.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } WebDataRocksToolbar.prototype.addClass = function (elem, cls) { if (!this.hasClass(elem, cls)) { elem.className += " " + cls; } } WebDataRocksToolbar.prototype.removeClass = function (elem, cls) { if (this.hasClass(elem, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); elem.className = elem.className.replace(reg, ' '); } } WebDataRocksToolbar.prototype.setText = function (target, text) { if (!target) return; if (target.innerText !== undefined) { target.innerText = text; } if (target.textContent !== undefined) { target.textContent = text; } } WebDataRocksToolbar.prototype.createSelect = function () { var wrapper = document.createElement("div"); wrapper.classList.add("wdr-select"); var select = document.createElement("select"); wrapper.appendChild(select); wrapper.select = select; return wrapper; } WebDataRocksToolbar.prototype.createDivider = function (data) { var item = document.createElement("li"); item.className = "wdr-divider"; return item; } WebDataRocksToolbar.prototype.createTab = function (data) { var tab = document.createElement("li"); tab.id = data.id; var tabLink = document.createElement("a"); if (data.hasOwnProperty("class_attr")) { tabLink.setAttribute("class", data.class_attr); } tabLink.setAttribute("href", "javascript:void(0)"); if (data.icon) { var svgIcon = document.createElement("div"); svgIcon.classList.add("wdr-svg-icon"); svgIcon.innerHTML = data.icon; tabLink.appendChild(svgIcon); } var title = document.createElement("span"); this.setText(title, data.title); tabLink.appendChild(title); var _this = this; var _handler = typeof data.handler == "function" ? data.handler : this[data.handler]; if (!this.nullOrUndefined(_handler)) { tabLink.onclick = function (handler, args) { return function () { handler.call(_this, args); } }(_handler, data.args); } if (!this.nullOrUndefined(this[data.onShowHandler])) { tabLink.onmouseover = function (handler) { return function () { handler.call(_this); } }(this[data.onShowHandler]); } tab.onmouseover = function () { _this.showDropdown(this); } tab.onmouseout = function () { _this.hideDropdown(this); } tab.appendChild(tabLink); if (data.menu != null && (!this.osUtils.isMobile || data.collapse == true)) { tab.appendChild(this.createTabMenu(data.menu)); } return tab; } WebDataRocksToolbar.prototype.showDropdown = function (elem) { var menu = elem.querySelectorAll(".wdr-dropdown")[0]; if (menu) { menu.style.display = "block"; if (menu.getBoundingClientRect().right > this.toolbarWrapper.getBoundingClientRect().right) { menu.style.right = 0; this.addClass(elem, "wdr-align-rigth"); } } }; WebDataRocksToolbar.prototype.hideDropdown = function (elem) { var menu = elem.querySelectorAll(".wdr-dropdown")[0]; if (menu) { menu.style.display = "none"; menu.style.right = null; this.removeClass(elem, "wdr-align-rigth"); } }; WebDataRocksToolbar.prototype.createTabMenu = function (dataProvider) { var container = document.createElement("div"); container.className = "wdr-dropdown wdr-shadow-container"; var content = document.createElement("ul"); content.className = "wdr-dropdown-content"; for (var i = 0; i < dataProvider.length; i++) { if (this.isDisabled(dataProvider[i])) continue; content.appendChild((dataProvider[i].divider) ? this.createMenuDivider() : this.createTab(dataProvider[i])); } container.appendChild(content); return container; } WebDataRocksToolbar.prototype.createMenuDivider = function () { var item = document.createElement("li"); item.className = "wdr-v-divider"; return item; } WebDataRocksToolbar.prototype.isDisabled = function (data) { if (this.nullOrUndefined(data)) return true; return (data.ios === false && this.osUtils.isIOS) || (data.android === false && this.osUtils.isAndroid) || (data.mobile === false && this.osUtils.isMobile); } WebDataRocksToolbar.prototype.getElementById = function (id, parent) { var find = function (node, id) { for (var i = 0; i < node.childNodes.length; i++) { var child = node.childNodes[i]; if (child.id == id) { return child; } else { var res = find(child, id); } if (res != null) { return res; } } return null; }; return find(parent || this.toolbarWrapper, id); } WebDataRocksToolbar.prototype.osUtils = { isIOS: navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.platform.match(/iPhone|iPad|iPod/i) ? true : false, isMac: /Mac/i.test(navigator.platform), isAndroid: navigator.userAgent.match(/Android/i) ? true : false, isBlackBerry: /BlackBerry/i.test(navigator.platform), isMobile: navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.platform.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/Android/i) || /BlackBerry/i.test(navigator.platform) }; WebDataRocksToolbar.PopupManager = function (toolbar) { this.toolbar = toolbar; this.activePopup = null; } WebDataRocksToolbar.PopupManager.prototype.createPopup = function () { return new WebDataRocksToolbar.PopupManager.PopupWindow(this); }; WebDataRocksToolbar.PopupManager.prototype.addPopup = function (popup) { if (popup == null) return; this.removePopup(); this.modalOverlay = this.createModalOverlay(); this.activePopup = popup; this.toolbar.toolbarWrapper.appendChild(popup); this.toolbar.toolbarWrapper.appendChild(this.modalOverlay); this.addLayoutClasses(popup); this.centerPopup(popup); var _this = this; popup.resizeHandler = function () { if (!popup) return; _this.addLayoutClasses(popup); _this.centerPopup(popup); }; window.addEventListener("resize", popup.resizeHandler); }; WebDataRocksToolbar.PopupManager.prototype.addLayoutClasses = function (popup) { popup.classList.remove("wdr-layout-tablet"); popup.classList.remove("wdr-layout-mobile"); popup.classList.remove("wdr-layout-mobile-small"); var rect = this.getBoundingRect(this.toolbar.container); if (rect.width < 768) { popup.classList.add("wdr-layout-tablet"); } if (rect.width < 580) { popup.classList.add("wdr-layout-mobile"); } if (rect.width < 460) { popup.classList.add("wdr-layout-mobile-small"); } }; WebDataRocksToolbar.PopupManager.prototype.centerPopup = function (popup) { var containerRect = this.getBoundingRect(this.toolbar.container); var popupRect = this.getBoundingRect(popup); var toolbarRect = this.getBoundingRect(this.toolbar.toolbarWrapper); popup.style.zIndex = parseInt(this.modalOverlay.style.zIndex) + 1; //this.modalOverlay.style.top = toolbarRect.height + "px"; this.modalOverlay.style.height = containerRect.height /*- toolbarRect.height*/ + "px"; popup.style.left = Math.max(0, (toolbarRect.width - popupRect.width) / 2) + "px"; popup.style.top = Math.max(0, (containerRect.height - popupRect.height) / 2) + "px"; }; WebDataRocksToolbar.PopupManager.prototype.removePopup = function (popup) { var popup = (popup || this.activePopup); if (this.modalOverlay != null) { this.toolbar.toolbarWrapper.removeChild(this.modalOverlay); this.modalOverlay = null; } if (popup != null) { this.toolbar.toolbarWrapper.removeChild(popup); this.activePopup = null; window.removeEventListener("resize", popup.resizeHandler); } }; WebDataRocksToolbar.PopupManager.prototype.getBoundingRect = function (target) { var rect = target.getBoundingClientRect(); return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom, width: rect.width || target.clientWidth, height: rect.height || target.clientHeight }; }; WebDataRocksToolbar.PopupManager.prototype.createModalOverlay = function () { var modalOverlay = document.createElement("div"); modalOverlay.className = "wdr-modal-overlay"; modalOverlay.id = "wdr-popUp-modal-overlay"; var _this = this; modalOverlay.addEventListener('click', function (e) { _this.removePopup(_this.activePopup); }); return modalOverlay; }; WebDataRocksToolbar.PopupManager.PopupWindow = function (popupManager) { this.popupManager = popupManager; var contentPanel = document.createElement("div"); contentPanel.className = "wdr-panel-content"; var titleBar = document.createElement("div"); titleBar.className = "wdr-title-bar"; var titleLabel = document.createElement("div"); titleLabel.className = "wdr-title-text"; var toolbar = document.createElement("div"); toolbar.className = "wdr-toolbox"; toolbar.style.clear = "both"; this.content = document.createElement("div"); this.content.className = "wdr-popup wdr-panel wdr-toolbar-ui wdr-ui"; this.content.appendChild(contentPanel); contentPanel.appendChild(titleBar); titleBar.appendChild(titleLabel); this.setTitle = function (title) { WebDataRocksToolbar.prototype.setText(titleLabel, title); } this.setContent = function (content) { contentPanel.insertBefore(content, titleBar.nextSibling); } var _this = this; this.setToolbar = function (buttons, toHeader) { toolbar.innerHTML = ""; for (var i = buttons.length - 1; i >= 0; i--) { var button = document.createElement("a"); button.setAttribute("href", "javascript:void(0)"); button.className = "wdr-ui-btn" + (buttons[i].isPositive ? " wdr-ui-btn-dark" : ""); if (buttons[i].id) button.id = buttons[i].id; WebDataRocksToolbar.prototype.setText(button, buttons[i].label); button.onclick = function (handler) { return function () { if (handler != null) { handler.call(); } _this.popupManager.removePopup(); } }(buttons[i].handler); if (buttons[i].disabled === true) { WebDataRocksToolbar.prototype.addClass(button, "wdr-ui-disabled"); } else { WebDataRocksToolbar.prototype.removeClass(button, "wdr-ui-disabled"); } if (buttons[i].isPositive && (WebDataRocksToolbar.prototype.osUtils.isMac || WebDataRocksToolbar.prototype.osUtils.isIOS)) { toolbar.appendChild(button); } else { toolbar.insertBefore(button, toolbar.firstChild); } } if (toHeader) { toolbar.classList.add("wdr-ui-col"); titleBar.appendChild(toolbar); titleBar.classList.add("wdr-ui-row"); titleLabel.classList.add("wdr-ui-col"); } else { contentPanel.appendChild(toolbar); } } this.toolbar = toolbar; this.titleBar = titleBar; this.title = titleLabel; return this; }; WebDataRocksToolbar.ColorPicker = function (toolbar, popupContainer) { this.toolbar = toolbar; this.element = document.createElement("div"); this.element.classList.add("wdr-colorpick-wrap"); this.element.classList.add("wdr-width40"); this.colorPickerButton = document.createElement("div"); this.colorPickerButton.classList.add("wdr-colorpick-btn"); this.element.appendChild(this.colorPickerButton); this.colorPickerIcon = document.createElement("span"); this.colorPickerIcon.classList.add("wdr-icon"); this.colorPickerIcon.classList.add("wdr-icon-act_font"); this.colorPickerButton.appendChild(this.colorPickerIcon); this.popup = document.createElement('div'); this.popup.classList.add("wdr-colorpick-popup"); this.popup.onclick = function (event) { event.stopPropagation(); }; popupContainer.appendChild(this.popup); var colorSwitch = document.createElement("div"); colorSwitch.classList.add("wdr-color-targ-switch"); this.popup.appendChild(colorSwitch); var colorBtn = document.createElement("a"); colorBtn.classList.add("wdr-cts-item"); colorBtn.classList.add("wdr-current"); colorBtn.href = "javascript:void(0);"; colorBtn.innerHTML = toolbar.Labels.cp_text; colorBtn.onclick = function () { onSwitchChange('font'); }; colorSwitch.appendChild(colorBtn); var bgColorBtn = document.createElement("a"); bgColorBtn.classList.add("wdr-cts-item"); bgColorBtn.innerHTML = toolbar.Labels.cp_highlight; bgColorBtn.href = "javascript:void(0);"; bgColorBtn.onclick = function () { onSwitchChange('bg'); }; colorSwitch.appendChild(bgColorBtn); var row = document.createElement("div"); row.classList.add("wdr-cp-sett-row"); this.popup.appendChild(row); this.colorInput = document.createElement("input"); this.colorInput.type = "text"; this.colorInput.classList.add("wdr-inp"); this.colorInput.classList.add("wdr-width140"); this.colorInput.classList.add("wdr-tac"); this.colorInput.onchange = onColorInputChanged; row.appendChild(this.colorInput); this.colorPreview = document.createElement("div"); this.colorPreview.classList.add("wdr-cp-curr-color"); this.colorPreview.classList.add("wdr-width140"); row.appendChild(this.colorPreview); this.mainColors = document.createElement("div"); this.mainColors.classList.add("wdr-row-9colors"); this.popup.appendChild(this.mainColors); for (var color in this.colors) { var item = document.createElement("div"); item.classList.add("wdr-r9c-item"); item.style.backgroundColor = color; item.setAttribute('data-c', color); item.addEventListener('click', onMainColorClick); this.mainColors.appendChild(item); var check = document.createElement("span"); check.classList.add("wdr-cp-currentmark"); check.classList.add("wdr-icon"); check.classList.add("wdr-icon-act_check"); item.appendChild(check); var arrow = document.createElement("span"); arrow.classList.add("wdr-r9c-arrow"); arrow.style.borderTopColor = color; item.appendChild(arrow); } this.shadeColors = document.createElement("div"); this.shadeColors.classList.add("wdr-row-4colors"); this.popup.appendChild(this.shadeColors); for (var i = 0; i < 8; i++) { var item = document.createElement("div"); item.classList.add("wdr-r4c-item"); item.addEventListener('click', onColorClick); this.shadeColors.appendChild(item); var check = document.createElement("span"); check.classList.add("wdr-cp-currentmark"); check.classList.add("wdr-icon"); check.classList.add("wdr-icon-act_check"); item.appendChild(check); } this.drawShades(this.colors['#000000']); var row = document.createElement("div"); row.classList.add("wdr-cp-btns-row"); this.popup.appendChild(row); var applyBtn = document.createElement("a"); applyBtn.innerHTML = toolbar.Labels.apply; applyBtn.classList.add("wdr-ui-btn"); applyBtn.classList.add("wdr-ui-btn-dark"); applyBtn.addEventListener("click", onApplyClick); var cancelBtn = document.createElement("a"); cancelBtn.innerHTML = toolbar.Labels.cancel; cancelBtn.classList.add("wdr-ui-btn"); cancelBtn.addEventListener("click", onCancelClick); if (WebDataRocksToolbar.prototype.osUtils.isMac || WebDataRocksToolbar.prototype.osUtils.isIOS) { row.appendChild(cancelBtn); row.appendChild(applyBtn); } else { row.appendChild(applyBtn); row.appendChild(cancelBtn); } this.currentType = "font"; this.colorPickerButton.addEventListener('click', onColorButtonClick); document.body.addEventListener('click', onBodyClick); var _this = this; function onBodyClick(event) { onCancelClick(); } function onColorButtonClick(event) { event.stopPropagation(); if (_this.isOpened()) { _this.closePopup(); } else { _this.openPopup(); } } function onMainColorClick(event) { var color = event.target.getAttribute('data-c'); _this.drawShades(_this.colors[color]); _this.setColor(color, _this.currentType, true); } function onColorClick(event) { var color = event.target.getAttribute('data-c'); _this.setColor(color, _this.currentType, true); } function onSwitchChange(type) { _this.currentType = type; colorBtn.classList.remove("wdr-current"); bgColorBtn.classList.remove("wdr-current"); if (type == "bg") { bgColorBtn.classList.add("wdr-current"); _this.setColor(_this.backgroundColor, type, false); } else { colorBtn.classList.add("wdr-current"); _this.setColor(_this.fontColor, type, false); } } function onColorInputChanged() { var color = _this.colorInput.value; if (_this.isColor(color)) { _this.setColor(color, _this.currentType, true); } } function onApplyClick() { _this.closePopup(); if (_this.applyHandler) { _this.applyHandler(); } } function onCancelClick() { _this.closePopup(); if (_this.cancelHandler) { _this.cancelHandler(); } } } WebDataRocksToolbar.ColorPicker.prototype.colors = { '#000000': ["#000000", "#212121", "#424242", "#616161", "#757575", "#9E9E9E", "#BDBDBD", "#FFFFFF"], '#F44336': ["#D32F2F", "#E53935", "#F44336", "#EF5350", "#E57373", "#EF9A9A", "#FFCDD2", "#FFEBEE"], '#FF9800': ["#F57C00", "#FB8C00", "#FF9800", "#FFA726", "#FFB74D", "#FFCC80", "#FFE0B2", "#FFF3E0"], '#FFEB3B': ["#FBC02D", "#FDD835", "#FFEB3B", "#FFEE58", "#FFF176", "#FFF59D", "#FFF9C4", "#FFFDE7"], '#8BC34A': ["#689F38", "#7CB342", "#8BC34A", "#9CCC65", "#AED581", "#C5E1A5", "#DCEDC8", "#F1F8E9"], '#009688': ["#00796B", "#00897B", "#009688", "#26A69A", "#4DB6AC", "#80CBC4", "#B2DFDB", "#E0F2F1"], '#03A9F4': ["#0288D1", "#039BE5", "#03A9F4", "#29B6F6", "#4FC3F7", "#81D4FA", "#B3E5FC", "#E1F5FE"], '#3F51B5': ["#303F9F", "#3949AB", "#3F51B5", "#5C6BC0", "#7986CB", "#9FA8DA", "#C5CAE9", "#E8EAF6"], '#9C27B0': ["#7B1FA2", "#8E24AA", "#9C27B0", "#AB47BC", "#BA68C8", "#CE93D8", "#E1BEE7", "#F3E5F5"], }; WebDataRocksToolbar.ColorPicker.prototype.isOpened = function () { return this.popup.parentElement && this.popup.parentElement.classList.contains("wdr-popup-opened"); }; WebDataRocksToolbar.ColorPicker.prototype.drawShades = function (colors) { if (!colors) { return; } var children = this.shadeColors.children; for (var i = 0; i < children.length; i++) { var item = children[i]; item.setAttribute('data-c', colors[i]); item.style.backgroundColor = colors[i]; item.style.borderRight = colors[i] == "#FFFFFF" ? "1px solid #d5d5d5" : 'none'; item.style.borderBottom = colors[i] == "#FFFFFF" ? "1px solid #d5d5d5" : 'none'; } }; WebDataRocksToolbar.ColorPicker.prototype.setColor = function (colorValue, type, dispatch) { if (typeof colorValue === "string" && colorValue.indexOf("0x") == 0) { colorValue = "#" + colorValue.substr(2); } if (type == "bg") { this.backgroundColor = colorValue; this.colorPickerButton.style.backgroundColor = colorValue; } else { this.fontColor = colorValue; this.colorPickerIcon.style.color = colorValue; } this.colorInput.value = colorValue; this.colorPreview.style.backgroundColor = colorValue; this.drawSelected(); if (dispatch && this.changeHandler) { this.changeHandler(); } }; WebDataRocksToolbar.ColorPicker.prototype.drawSelected = function () { var color = this.currentType == "bg" ? this.backgroundColor : this.fontColor; var mainColor = this.findMain(color); this.drawShades(this.colors[mainColor]); var children = this.mainColors.children; for (var i = 0; i < children.length; i++) { children[i].classList.remove("wdr-current"); } var mainSelected = this.mainColors.querySelector("[data-c='" + mainColor + "']"); if (mainSelected) { mainSelected.classList.add("wdr-current"); } children = this.shadeColors.children; for (var i = 0; i < children.length; i++) { children[i].classList.remove("wdr-current"); } var shadeSelected = this.shadeColors.querySelector("[data-c='" + color + "']"); if (shadeSelected) { shadeSelected.classList.add("wdr-current"); } }; WebDataRocksToolbar.ColorPicker.prototype.findMain = function (color) { if (typeof color === "string" && color.indexOf("0x") == 0) { color = "#" + color.substr(2); } for (var mainColor in this.colors) { var colors = this.colors[mainColor]; if (colors.indexOf(color) >= 0) { return mainColor; } } }; WebDataRocksToolbar.ColorPicker.prototype.isColor = function (value) { return value.match(/^#?[0-9A-Fa-f]{6}$/g); } WebDataRocksToolbar.ColorPicker.prototype.closePopup = function () { if (!this.popup.parentElement) { return; } this.popup.parentElement.classList.remove("wdr-popup-opened"); } WebDataRocksToolbar.ColorPicker.prototype.openPopup = function () { // close others var openedPopups = this.toolbar.toolbarWrapper.querySelectorAll('.wdr-colorpick-popup'); for (var i = 0; i < openedPopups.length; i++) { openedPopups[i].parentElement.classList.remove("wdr-popup-opened"); } if (!this.popup.parentElement) { return; } // open current var parent = this.toolbar.toolbarWrapper.querySelector("#wdr-popup-conditional .wdr-panel-content"); var pos = this.getWhere(this.colorPickerButton, parent); var posAbs = this.getWhere(this.colorPickerButton, document.body); if (posAbs.top - this.popup.clientHeight < 0) { this.popup.classList.remove("wdr-arrow-down"); this.popup.classList.add("wdr-arrow-up"); this.popup.style.top = (this.colorPickerButton.clientHeight + pos.top + 11) + 'px'; this.popup.style.bottom = ""; } else { this.popup.classList.add("wdr-arrow-down"); this.popup.classList.remove("wdr-arrow-up"); this.popup.style.bottom = (parent.clientHeight - pos.top + 5) + 'px'; this.popup.style.top = ""; } this.popup.style.left = (pos.left + (this.colorPickerButton.clientWidth / 2) + 2) + 'px'; this.popup.parentElement.classList.add("wdr-popup-opened"); } WebDataRocksToolbar.ColorPicker.prototype.getWhere = function (el, parent) { var curleft = 0; var curtop = 0; var curtopscroll = 0; var curleftscroll = 0; if (el.offsetParent) { curleft = el.offsetLeft; curtop = el.offsetTop; var elScroll = el; while (elScroll = elScroll.parentNode) { if (elScroll == parent) { break; } curtopscroll = elScroll.scrollTop ? elScroll.scrollTop : 0; curleftscroll = 0; curleft -= curleftscroll; curtop -= curtopscroll; } while (el = el.offsetParent) { if (el == parent) { break; } curleft += el.offsetLeft; curtop += el.offsetTop; } } var isMSIE = /*@cc_on!@*/ 0; var offsetX = 0;// isMSIE ? document.body.scrollLeft : window.pageXOffset; var offsetY = 0;// isMSIE ? document.body.scrollTop : window.pageYOffset; return { top: curtop + offsetY, left: curleft + offsetX }; }