@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
1,329 lines (1,179 loc) • 252 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
require('./mixins-RbnksPfz.js');
require('./kendo.ooxml.js');
require('./kendo.progressbar.js');
require('./kendo.core.js');
require('./html-sdnHcjkh.js');
require('./mixins-D385O08Q.js');
require('./kendo.toolbar.js');
require('./kendo.list.js');
require('./kendo.spreadsheet.common.js');
require('./kendo.binder.js');
require('./kendo.validator.js');
require('./kendo.icons.js');
require('./kendo.window.js');
require('./kendo.colorpicker.js');
require('./kendo.combobox.js');
require('./kendo.dropdownlist.js');
require('./kendo.dropdownbutton.js');
require('./kendo.popup.js');
require('./kendo.togglebutton.js');
require('./kendo.calendar.js');
require('./kendo.listview.js');
require('./kendo.dom.js');
require('./kendo.sortable.js');
require('./kendo.treeview.js');
require('./kendo.numerictextbox.js');
require('./kendo.datepicker.js');
require('./kendo.datetimepicker.js');
require('./kendo.data.js');
require('./kendo.data.odata.js');
require('./kendo.licensing.js');
require('@progress/kendo-licensing');
require('./kendo.data.xml.js');
require('@progress/kendo-ooxml');
require('@progress/kendo-drawing');
require('./kendo.color.js');
require('./kendo.splitbutton.js');
require('./kendo.html.button.js');
require('./kendo.html.base.js');
require('./kendo.html.icon.js');
require('@progress/kendo-svg-icons');
require('./kendo.button.menu.js');
require('./kendo.buttongroup.js');
require('./kendo.button.js');
require('./kendo.badge.js');
require('./kendo.menu.js');
require('./kendo.label.js');
require('./kendo.floatinglabel.js');
require('./kendo.actionsheet.js');
require('./dropdowns-loader-Bc4IELFi.js');
require('@progress/kendo-spreadsheet-common');
require('./kendo.draganddrop.js');
require('./kendo.userevents.js');
require('./kendo.slider.js');
require('./kendo.textbox.js');
require('./prefix-suffix-containers-BmDm564f.js');
require('./kendo.mobile.scroller.js');
require('./kendo.fx.js');
require('./kendo.virtuallist.js');
require('./valueMapper-q_OtZ-Tj.js');
require('./kendo.selectable.js');
require('./kendo.editable.js');
require('./kendo.checkbox.js');
require('./kendo.toggleinputbase.js');
require('./kendo.html.input.js');
require('./kendo.otpinput.js');
require('./kendo.dateinput.js');
require('@progress/kendo-dateinputs-common');
require('./kendo.pager.js');
require('./kendo.treeview.draganddrop.js');
require('./kendo.timepicker.js');
(function(kendo) {
var $ = kendo.jQuery;
var ObservableObject = kendo.data.ObservableObject;
var MESSAGES = kendo.spreadsheet.messages.dialogs = {
apply: "Apply",
save: "Save",
cancel: "Cancel",
remove: "Remove",
retry: "Retry",
revert: "Revert",
okText: "OK",
formatCellsDialog: {
title: "Format",
categories: {
number: "Number",
currency: "Currency",
date: "Date"
}
},
fontFamilyDialog: {
title: "Font"
},
fontSizeDialog: {
title: "Font size"
},
bordersDialog: {
title: "Borders"
},
alignmentDialog: {
title: "Alignment",
buttons: {
justifyLeft: "Align left",
justifyCenter: "Center",
justifyRight: "Align right",
justifyFull: "Justify",
alignTop: "Align top",
alignMiddle: "Align middle",
alignBottom: "Align bottom"
}
},
mergeDialog: {
title: "Merge cells",
buttons: {
mergeCells: "Merge all",
mergeHorizontally: "Merge horizontally",
mergeVertically: "Merge vertically",
unmerge: "Unmerge"
}
},
freezeDialog: {
title: "Freeze panes",
buttons: {
freezePanes: "Freeze panes",
freezeRows: "Freeze rows",
freezeColumns: "Freeze columns",
unfreeze: "Unfreeze panes"
}
},
confirmationDialog: {
text: "Are you sure you want to remove this sheet?",
title: "Sheet remove"
},
validationDialog: {
title: "Data Validation",
hintMessage: "Please enter a valid {0} value {1}.",
hintTitle: "Validation {0}",
criteria: {
any: "Any value",
number: "Number",
text: "Text",
date: "Date",
custom: "Custom Formula",
list: "List"
},
comparers: {
greaterThan: "greater than",
lessThan: "less than",
between: "between",
notBetween: "not between",
equalTo: "equal to",
notEqualTo: "not equal to",
greaterThanOrEqualTo: "greater than or equal to",
lessThanOrEqualTo: "less than or equal to"
},
comparerMessages: {
greaterThan: "greater than {0}",
lessThan: "less than {0}",
between: "between {0} and {1}",
notBetween: "not between {0} and {1}",
equalTo: "equal to {0}",
notEqualTo: "not equal to {0}",
greaterThanOrEqualTo: "greater than or equal to {0}",
lessThanOrEqualTo: "less than or equal to {0}",
custom: "that satisfies the formula: {0}"
},
labels: {
criteria: "Criteria",
comparer: "Comparer",
min: "Min",
max: "Max",
value: "Value",
start: "Start",
end: "End",
onInvalidData: "On invalid data",
rejectInput: "Reject input",
showWarning: "Show warning",
showHint: "Show hint",
hintTitle: "Hint title",
hintMessage: "Hint message",
ignoreBlank: "Ignore blank",
showListButton: "Display button to show list",
showCalendarButton: "Display button to show calendar"
},
placeholders: {
typeTitle: "Type title",
typeMessage: "Type message"
}
},
exportAsDialog: {
title: "Export...",
defaultFileName: "Workbook",
xlsx: {
description: "Excel Workbook (.xlsx)"
},
pdf: {
description: "Portable Document Format (.pdf)",
area: {
workbook: "Entire Workbook",
sheet: "Active Sheet",
selection: "Selection"
},
paper: {
a2 : "A2 (420 mm × 594 mm)",
a3 : "A3 (297 mm x 420 mm)",
a4 : "A4 (210 mm x 297 mm)",
a5 : "A5 (148 mm x 210 mm)",
b3 : "B3 (353 mm × 500 mm)",
b4 : "B4 (250 mm x 353 mm)",
b5 : "B5 (176 mm x 250 mm)",
folio : 'Folio (8.5" x 13")',
legal : 'Legal (8.5" x 14")',
letter : 'Letter (8.5" x 11")',
tabloid : 'Tabloid (11" x 17")',
executive : 'Executive (7.25" x 10.5")'
},
margin: {
normal: "Normal",
narrow: "Narrow",
wide: "Wide"
}
},
labels: {
scale: "Scale",
fit: "Fit to page",
fileName: "File name",
saveAsType: "Save as type",
exportArea: "Export",
paperSize: "Paper size",
margins: "Margins",
orientation: "Orientation",
print: "Print",
guidelines: "Guidelines",
center: "Center",
horizontally: "Horizontally",
vertically: "Vertically"
}
},
modifyMergedDialog: {
errorMessage: "Cannot change part of a merged cell."
},
rangeDisabledDialog: {
errorMessage: "Destination range contains disabled cells."
},
intersectsArrayDialog: {
errorMessage: "You cannot alter part of an array"
},
incompatibleRangesDialog: {
errorMessage: "Incompatible ranges"
},
noFillDirectionDialog: {
errorMessage: "Cannot determine fill direction"
},
duplicateSheetNameDialog: {
errorMessage: "Duplicate sheet name"
},
overflowDialog: {
errorMessage: "Cannot paste, because the copy area and the paste area are not the same size and shape."
},
useKeyboardDialog: {
title: "Copying and pasting",
errorMessage: "These actions cannot be invoked through the menu. Please use the keyboard shortcuts instead:",
labels: {
forCopy: "for copy",
forCut: "for cut",
forPaste: "for paste"
}
},
unsupportedSelectionDialog: {
errorMessage: "That action cannot be performed on multiple selection."
},
linkDialog: {
title: "Hyperlink",
labels: {
text: "Text",
url: "Address",
removeLink: "Remove link"
}
},
sheetRenameDialog: {
title: "Rename Sheet",
labels: {
text: "Rename Sheet",
rename: "Rename"
}
},
insertCommentDialog: {
title: "Insert comment",
labels: {
comment: "Comment",
removeComment: "Remove comment"
}
},
insertImageDialog: {
title: "Insert image",
info: "Drag an image here, or click to select",
typeError: "Please select a JPEG, PNG or GIF image"
}
};
var registry = {};
kendo.spreadsheet.dialogs = {
register: function(name, dialogClass) {
registry[name] = dialogClass;
},
registered: function(name) {
return !!registry[name];
},
create: function(name, options) {
var dialogClass = registry[name];
if (dialogClass) {
return new dialogClass(options);
}
}
};
var SpreadsheetDialog = kendo.spreadsheet.SpreadsheetDialog = kendo.Observable.extend({
init: function(options) {
kendo.Observable.fn.init.call(this, options);
this.options = translate($.extend(true, {}, this.options, options));
this.bind(this.events, options);
},
events: [
"close",
"activate"
],
options: {
autoFocus: true
},
dialog: function() {
if (!this._dialog) {
var options = {
autoFocus: false,
scrollable: false,
resizable: false,
modal: true,
visible: false,
width: this.options.width || 320,
title: this.options.title,
open: function() {
this.center();
},
close: this._onDialogClose.bind(this),
activate: this._onDialogActivate.bind(this),
deactivate: this._onDialogDeactivate.bind(this)
};
this._dialog = $("<div class='k-spreadsheet-window k-action-window k-popup-edit-form' />")
.addClass(this.options.className || "")
.append(kendo.template(this.options.template)({
messages: kendo.spreadsheet.messages.dialogs || MESSAGES,
ns: kendo.ns,
// this is for ImportErrorDialog. ugly that
// we need this line here, but I couldn't
// figure out a better way
errors: this.options.errors
}))
.kendoWindow(options)
.data("kendoWindow");
}
return this._dialog;
},
_onDialogClose: function() {
this.trigger("close", {
action: this._action
});
},
_onDialogActivate: function() {
this.trigger("activate");
},
_onDialogDeactivate: function() {
this.trigger("deactivate");
this.destroy();
},
destroy: function() {
if (this._dialog) {
this._dialog.destroy();
this._dialog = null;
}
},
open: function() {
this.dialog().open();
this.dialog().element.find(".k-button-solid-primary").trigger("focus");
},
apply: function() {
this.close();
},
close: function() {
this._action = "close";
this.dialog().close();
}
});
function formattedValue(value, format) {
return kendo.spreadsheet.formatting.text(value, format);
}
var FormatCellsViewModel = kendo.spreadsheet.FormatCellsViewModel = ObservableObject.extend({
init: function(options) {
ObservableObject.fn.init.call(this, options);
this.useCategory(this.category);
},
useCategory: function(category) {
var type = category && category.type || "number";
var formatCurrency = type == "currency";
this.category = category;
this.set("showCurrencyFilter", formatCurrency && this.currencies.length > 1);
if (!formatCurrency) {
this.set("formats", this.allFormats[type + "Formats"]);
} else {
this.currency(this.currencies[0]);
}
this.useFirstFormat();
},
useFirstFormat: function() {
if (this.formats.length) {
this.set("format", this.formats[0].value);
}
},
currency: function(currency) {
if (currency !== undefined) {
this._currency = currency;
var info = currency.value;
var formats = [
{ currency: info, decimals: true },
{ currency: info, decimals: true, iso: true },
{ currency: info, decimals: false }
];
formats = formats.map(function(format) {
format = FormatCellsViewModel.convert.currency(format);
return { value: format, name: formattedValue(1000, format) };
});
this.set("formats", formats);
this.useFirstFormat();
}
return this._currency || this.currencies[0];
},
categoryFilter: function(category) {
if (category !== undefined) {
this.useCategory(category);
}
return this.category;
},
preview: function() {
var format = this.get("format");
var value = this.value || 0;
if (format && format.length) {
return formattedValue(value, format);
} else {
return value;
}
}
});
FormatCellsViewModel.convert = {
currency: function(options) {
function repeat(token, n) {
return new Array(n+1).join(token);
}
// convert culture info to spreadsheet format
var info = options.currency;
var format = info.pattern[1];
if (options.decimals) {
format = format.replace(/n/g, "n" + info["."] + repeat("0", info.decimals));
}
if (options.iso) {
format = '"' + info.abbr + '" ' + format.replace(/\s*\$\s*/g, "");
} else {
format = format.replace(/\$/g, JSON.stringify(info.symbol));
}
format = format.replace(/n/g, "?");
return format;
},
date: function(format) {
if ((/T|Z/).test(format)) {
return "";
}
return format.toLowerCase().replace(/tt/g, "AM/PM").replace(/'/g, '"');
}
};
function uniqueBy(field, array) {
var result = [];
var values = [];
for (var i = 0; i < array.length; i++) {
if ($.inArray(array[i][field], values) == -1) {
result.push(array[i]);
values.push(array[i][field]);
}
}
return result;
}
var FormatCellsDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.formatCellsDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
categories: [
{ type: "number", name: messages.categories.number },
{ type: "currency", name: messages.categories.currency },
{ type: "date", name: messages.categories.date }
]
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
this._generateFormats();
},
options: {
className: "k-spreadsheet-format-cells",
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div class='k-edit-form-container'><div class='k-root-tabs' data-${kendo.htmlEncode(data.ns)}role='tabstrip' data-${kendo.htmlEncode(data.ns)}text-field='name' data-${kendo.htmlEncode(data.ns)}bind='source: categories, value: categoryFilter' data-${kendo.htmlEncode(data.ns)}animation='false'></div>
<div class='k-spreadsheet-preview' data-${kendo.htmlEncode(data.ns)}bind='text: preview'></div><select data-${kendo.htmlEncode(data.ns)}role='dropdownlist' class='k-format-filter' data-${kendo.htmlEncode(data.ns)}text-field='description' data-${kendo.htmlEncode(data.ns)}value-field='value.name' data-${kendo.htmlEncode(data.ns)}bind='visible: showCurrencyFilter, value: currency, source: currencies'></select><ul data-${kendo.htmlEncode(data.ns)}role='staticlist' tabindex='0' id='formats-list' aria-label='formats list' class='k-list k-reset' bind:data-${kendo.htmlEncode(data.ns)}template='formatItemTemplate' data-${kendo.htmlEncode(data.ns)}value-primitive='true' data-${kendo.htmlEncode(data.ns)}value-field='value' data-${kendo.htmlEncode(data.ns)}bind='source: formats, value: format'></ul>
<div class='k-actions'><button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary' data-${kendo.htmlEncode(data.ns)}bind='click: apply'><span class='k-button-text'>${kendo.htmlEncode(data.messages.apply)}</span></button><button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base' data-${kendo.htmlEncode(data.ns)}bind='click: close'><span class='k-button-text'>${kendo.htmlEncode(data.messages.cancel)}</span></button></div>
</div>`;
return $kendoOutput;
}
},
_generateFormats: function() {
var options = this.options;
if (!options.currencies) {
options.currencies = FormatCellsDialog.currenciesFrom(kendo.cultures);
}
if (!options.numberFormats) {
options.numberFormats = [
{ value: "#.00%", name: "100.00%" },
{ value: "#%", name: "100%" },
{ value: "#.00", name: "1024.00" },
{ value: "#,###.00", name: "1,024.00" }
];
}
if (!options.dateFormats) {
var calendarPatterns = kendo.cultures.current.calendars.standard.patterns;
options.dateFormats = uniqueBy("value", $.map(calendarPatterns, function(format) {
format = FormatCellsViewModel.convert.date(format);
if (!format) {
return;
}
return { value: format, name: formattedValue(34567.7678, format) };
}));
}
},
open: function(range) {
var options = this.options;
var value = range.value();
var categories = options.categories.slice(0);
var element;
this.viewModel = new FormatCellsViewModel({
currencies: options.currencies.slice(0),
allFormats: {
numberFormats: options.numberFormats.slice(0),
dateFormats: options.dateFormats.slice(0)
},
categories: categories,
format: range.format(),
category: value instanceof Date ? categories[2] : categories[0],
apply: this.apply.bind(this),
close: this.close.bind(this),
value: value,
formatItemTemplate: (data) => kendo.htmlEncode(data.name)
});
SpreadsheetDialog.fn.open.call(this);
element = this.dialog().element;
kendo.bind(element, this.viewModel);
var currencyFilter = element.find("select.k-format-filter").data("kendoDropDownList");
if (options.currencies.length > 10) {
currencyFilter.setOptions({ filter: "contains" });
}
element.find(kendo.roleSelector("staticlist")).parent().addClass("k-list-wrapper");
element.find(".k-tabstrip-item").attr("aria-controls", "formats-list");
},
apply: function() {
var format = this.viewModel.format;
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: "format",
value: format
}
});
}
});
FormatCellsDialog.currenciesFrom = function (cultures) {
return uniqueBy("description", $.map(cultures, function(culture, name) {
if (!(/-/).test(name)) {
return;
}
var currency = culture.numberFormat.currency;
var description = kendo.format(
"{0} ({1}, {2})",
currency.name,
currency.abbr,
currency.symbol
);
return { description: description, value: currency };
}));
};
kendo.spreadsheet.dialogs.register("formatCells", FormatCellsDialog);
kendo.spreadsheet.dialogs.FormatCellsDialog = FormatCellsDialog;
var MessageDialog = SpreadsheetDialog.extend({
options: {
className: "k-spreadsheet-message",
title: "",
messageId: "",
text: "",
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div class='k-spreadsheet-message-content' data-${kendo.htmlEncode(data.ns)}bind='text: text'></div>
<div class='k-actions'><button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary'
data-${kendo.htmlEncode(data.ns)}bind='click: close'><span
class='k-button-text'>${data.messages.okText}</span></button></div>`;
return $kendoOutput;
}
},
open: function() {
SpreadsheetDialog.fn.open.call(this);
var options = this.options;
var text = options.text;
if (options.messageId) {
text = kendo.getter(options.messageId, true)(kendo.spreadsheet.messages.dialogs);
}
kendo.bind(this.dialog().element, {
text: text,
close: this.close.bind(this)
});
}
});
kendo.spreadsheet.dialogs.register("message", MessageDialog);
var ConfirmationDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.confirmationDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
text: messages.text
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
},
options: {
className: "k-spreadsheet-message",
messageId: "",
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div class='k-spreadsheet-message-content' data-${kendo.htmlEncode(data.ns)}bind='text: text'></div>
<div class='k-actions'><button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary'
data-${kendo.htmlEncode(data.ns)}bind='click: confirm'><span
class='k-button-text'>${data.messages.okText}</span></button><button
class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'
data-${kendo.htmlEncode(data.ns)}bind='click: cancel'><span
class='k-button-text'>${data.messages.cancel}</span></button></div>`;
return $kendoOutput;
}
},
open: function() {
SpreadsheetDialog.fn.open.call(this);
var options = this.options;
var text = options.text;
if (options.messageId) {
text = kendo.getter(options.messageId, true)(kendo.spreadsheet.messages.dialogs);
}
kendo.bind(this.dialog().element, {
text: text,
confirm: this.confirm.bind(this),
cancel: this.close.bind(this)
});
},
isConfirmed: function() {
return this._confirmed;
},
confirm: function() {
this._confirmed = true;
this.close();
}
});
kendo.spreadsheet.dialogs.register("confirmation", ConfirmationDialog);
var ValidationErrorDialog = SpreadsheetDialog.extend({
options: {
className: "k-spreadsheet-message",
title: "",
messageId: "",
text: "",
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div class='k-spreadsheet-message-content' data-${kendo.htmlEncode(data.ns)}bind='text: text'></div><div class='k-actions'><button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary' data-${kendo.htmlEncode(data.ns)}bind='click: retry'><span class='k-button-text'>${data.messages.retry}</span></button><button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base' data-${kendo.htmlEncode(data.ns)}bind='click: cancel'><span class='k-button-text'>${data.messages.cancel}</span></button></div>`;
return $kendoOutput;
}
},
open: function() {
SpreadsheetDialog.fn.open.call(this);
var options = this.options;
var text = options.text;
if (options.messageId) {
text = kendo.getter(options.messageId, true)(kendo.spreadsheet.messages.dialogs);
}
kendo.bind(this.dialog().element, {
text: text,
retry: this.retry.bind(this),
cancel: this.close.bind(this)
});
},
retry: function() {
this._retry = true;
this.close();
}
});
kendo.spreadsheet.dialogs.register("validationError", ValidationErrorDialog);
var FontFamilyDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.fontFamilyDialog || MESSAGES;
SpreadsheetDialog.fn.init.call(this, $.extend({ title: messages.title }, options));
this._list();
},
options: {
template: () => "<ul class='k-list k-reset'></ul>"
},
_list: function() {
var ul = this.dialog().element.find("ul");
var fonts = this.options.options;
var defaultFont = this.options.default;
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: fonts }),
template: (data) => kendo.htmlEncode(data),
value: defaultFont,
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: "fontFamily",
value: e.sender.value()[0]
}
});
}
});
kendo.spreadsheet.dialogs.register("fontFamily", FontFamilyDialog);
var FontSizeDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.fontSizeDialog || MESSAGES;
SpreadsheetDialog.fn.init.call(this, $.extend({ title: messages.title }, options));
this._list();
},
options: {
template: () => "<ul class='k-list k-reset'></ul>"
},
_list: function() {
var ul = this.dialog().element.find("ul");
var sizes = this.options.options;
var defaultSize = this.options.default;
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: sizes }),
template: (data) => kendo.htmlEncode(data),
value: defaultSize,
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: "fontSize",
value: kendo.parseInt(e.sender.value()[0])
}
});
}
});
kendo.spreadsheet.dialogs.register("fontSize", FontSizeDialog);
var BordersDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.bordersDialog || MESSAGES;
SpreadsheetDialog.fn.init.call(this, $.extend({ title: messages.title }, options));
this.element = this.dialog().element;
this._borderPalette();
this.viewModel = kendo.observable({
apply: this.apply.bind(this),
close: this.close.bind(this)
});
kendo.bind(this.element.find(".k-actions"), this.viewModel);
},
options: {
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div></div>
<div class='k-actions'><button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary'
data-${kendo.htmlEncode(data.ns)}bind='click: apply'><span
class='k-button-text'>${kendo.htmlEncode(data.messages.apply)}</span></button><button
class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'
data-${kendo.htmlEncode(data.ns)}bind='click: close'><span
class='k-button-text'>${kendo.htmlEncode(data.messages.cancel)}</span></button></div>`;
return $kendoOutput;
}
},
apply: function() {
SpreadsheetDialog.fn.apply.call(this);
var state = this.borderPalette.value();
if (state.color && state.type) {
this.trigger("action", {
command: "BorderChangeCommand",
options: {
border: state.type,
style: { size: 1, color: state.color }
}
});
}
},
_borderPalette: function() {
var element = this.dialog().element.find("div").first();
this.borderPalette = new kendo.spreadsheet.BorderPalette(element, {
change: this.value.bind(this)
});
},
value: function(state) {
if (state === undefined) {
return this._state;
} else {
this._state = state;
}
}
});
kendo.spreadsheet.dialogs.register("borders", BordersDialog);
var ColorChooser = SpreadsheetDialog.extend({
init: function(options) {
SpreadsheetDialog.fn.init.call(this, options);
this.element = this.dialog().element;
this.property = options.property;
this.options.title = options.title;
this.viewModel = kendo.observable({
apply: this.apply.bind(this),
close: this.close.bind(this)
});
kendo.bind(this.element.find(".k-actions"), this.viewModel);
},
options: {
template: (data) => {
let $kendoOutput;
$kendoOutput = `<div></div>
<div class='k-actions'><button class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary'
data-${kendo.htmlEncode(data.ns)}bind='click: apply'><span
class='k-button-text'>${kendo.htmlEncode(data.messages.apply)}</span></button><button
class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'
data-${kendo.htmlEncode(data.ns)}bind='click: close'><span
class='k-button-text'>${kendo.htmlEncode(data.messages.cancel)}</span></button></div>`;
return $kendoOutput;
}
},
apply: function() {
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: this.property,
value: this.value()
}
});
},
value: function(e) {
if (e === undefined) {
return this._value;
} else {
this._value = e.value;
}
}
});
var ColorPickerDialog = ColorChooser.extend({
init: function(options) {
options.width = 177;
ColorChooser.fn.init.call(this, options);
this._colorPalette();
},
_colorPalette: function() {
var element = this.dialog().element.find("div").first();
this.colorPalette = element.kendoColorPalette({
palette: [ //metro palette
"#ffffff", "#000000", "#d6ecff", "#4e5b6f", "#7fd13b", "#ea157a", "#feb80a", "#00addc", "#738ac8", "#1ab39f",
"#f2f2f2", "#7f7f7f", "#a7d6ff", "#d9dde4", "#e5f5d7", "#fad0e4", "#fef0cd", "#c5f2ff", "#e2e7f4", "#c9f7f1",
"#d8d8d8", "#595959", "#60b5ff", "#b3bcca", "#cbecb0", "#f6a1c9", "#fee29c", "#8be6ff", "#c7d0e9", "#94efe3",
"#bfbfbf", "#3f3f3f", "#007dea", "#8d9baf", "#b2e389", "#f272af", "#fed46b", "#51d9ff", "#aab8de", "#5fe7d5",
"#a5a5a5", "#262626", "#003e75", "#3a4453", "#5ea226", "#af0f5b", "#c58c00", "#0081a5", "#425ea9", "#138677",
"#7f7f7f", "#0c0c0c", "#00192e", "#272d37", "#3f6c19", "#750a3d", "#835d00", "#00566e", "#2c3f71", "#0c594f"
],
change: this.value.bind(this)
}).data("kendoColorPalette");
}
});
kendo.spreadsheet.dialogs.register("colorPicker", ColorPickerDialog);
var CustomColorDialog = ColorChooser.extend({
init: function(options) {
options.width = 268;
ColorChooser.fn.init.call(this, options);
this.dialog().setOptions({ animation: false });
this.dialog().one("activate", this._colorPicker.bind(this));
},
_colorPicker: function() {
var element = this.dialog().element.find("div").first();
this.colorPicker = element.kendoFlatColorPicker({
change: this.value.bind(this)
}).data("kendoFlatColorPicker");
}
});
kendo.spreadsheet.dialogs.register("customColor", CustomColorDialog);
var AlignmentDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.alignmentDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
buttons: [
{ property: "textAlign", value: "left", iconClass: "align-left", text: messages.buttons.justifyLeft },
{ property: "textAlign", value: "center", iconClass: "align-center", text: messages.buttons.justifyCenter },
{ property: "textAlign", value: "right", iconClass: "align-right", text: messages.buttons.justifyRight },
{ property: "textAlign", value: "justify", iconClass: "align-justify", text: messages.buttons.justifyFull },
{ property: "verticalAlign", value: "top", iconClass: "align-top", text: messages.buttons.alignTop },
{ property: "verticalAlign", value: "center", iconClass: "align-middle", text: messages.buttons.alignMiddle },
{ property: "verticalAlign", value: "bottom", iconClass: "align-bottom", text: messages.buttons.alignBottom }
]
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
this._list();
},
options: {
template: () => "<ul class='k-list k-reset'></ul>"
},
_list: function() {
var ul = this.dialog().element.find("ul");
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: this.options.buttons }),
template: (data) => `<a role='button' title='${data.text}' data-property='${data.property}' data-value='${data.value}'>
${kendo.ui.icon(data.iconClass)} ${data.text}
</a>`,
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
var dataItem = e.sender.value()[0];
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "PropertyChangeCommand",
options: {
property: dataItem.property,
value: dataItem.value
}
});
}
});
kendo.spreadsheet.dialogs.register("alignment", AlignmentDialog);
var MergeDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.mergeDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
buttons: [
{ value: "cells", iconClass: "cells-merge", text: messages.buttons.mergeCells },
{ value: "horizontally", iconClass: "cells-merge-horizontally", text: messages.buttons.mergeHorizontally },
{ value: "vertically", iconClass: "cells-merge-vertically", text: messages.buttons.mergeVertically },
{ value: "unmerge", iconClass: "table-unmerge", text: messages.buttons.unmerge }
]
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
this._list();
},
options: {
template: () => "<ul class='k-list k-reset'></ul>"
},
_list: function() {
var ul = this.dialog().element.find("ul");
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: this.options.buttons }),
template: (data) => `<a role='button' title='${data.text}' data-value='${data.value}'>` +
`${kendo.ui.icon(data.iconClass)}${data.text}` +
"</a>",
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
var dataItem = e.sender.value()[0];
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "MergeCellCommand",
options: {
value: dataItem.value
}
});
}
});
kendo.spreadsheet.dialogs.register("merge", MergeDialog);
var FreezeDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.freezeDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
buttons: [
{ value: "panes", iconClass: "pane-freeze", text: messages.buttons.freezePanes },
{ value: "rows", iconClass: "row-freeze", text: messages.buttons.freezeRows },
{ value: "columns", iconClass: "column-freeze", text: messages.buttons.freezeColumns },
{ value: "unfreeze", iconClass: "table-unmerge", text: messages.buttons.unfreeze }
]
};
SpreadsheetDialog.fn.init.call(this, $.extend(defaultOptions, options));
this._list();
},
options: {
template: () => "<ul class='k-list k-reset'></ul>"
},
_list: function() {
var ul = this.dialog().element.find("ul");
this.list = new kendo.ui.StaticList(ul, {
dataSource: new kendo.data.DataSource({ data: this.options.buttons }),
template: (data) => `<a role='button' title='${data.text}' data-value='${data.value}'>` +
`${kendo.ui.icon(data.iconClass)}${data.text}` +
"</a>",
change: this.apply.bind(this)
});
this.list.dataSource.fetch();
},
apply: function(e) {
var dataItem = e.sender.value()[0];
SpreadsheetDialog.fn.apply.call(this);
this.trigger("action", {
command: "FreezePanesCommand",
options: {
value: dataItem.value
}
});
}
});
kendo.spreadsheet.dialogs.register("freeze", FreezeDialog);
var ValidationViewModel = kendo.spreadsheet.ValidationCellsViewModel = ObservableObject.extend({
init: function(options) {
ObservableObject.fn.init.call(this, options);
this.bind("change", (function(e) {
if (e.field === "criterion") {
this.reset();
if (this.criterion === "custom" || this.criterion === "list") {
this.setHintMessageTemplate();
}
}
if (e.field === "comparer") {
this.setHintMessageTemplate();
}
if ((e.field == "hintMessage" || e.field == "hintTitle") && !this._mute) {
this.shouldBuild = false;
}
if ((e.field == "from" || e.field == "to" || e.field == "hintMessageTemplate" || e.field == "type") && this.shouldBuild) {
this.buildMessages();
}
}).bind(this));
this.reset();
},
buildMessages: function() {
this._mute = true;
this.set("hintTitle", this.hintTitleTemplate ? kendo.format(this.hintTitleTemplate, this.type) : "");
this.set("hintMessage", this.hintMessageTemplate ? kendo.format(this.hintMessageTemplate, this.from, this.to) : "");
this._mute = false;
},
reset: function() {
this.setComparers();
this.set("comparer", this.comparers[0].type);
this.set("from", null);
this.set("to", null);
this.set("useCustomMessages", false);
this.shouldBuild = true;
this.hintTitleTemplate = this.defaultHintTitle;
this.buildMessages();
},
//TODO: refactor
setComparers: function() {
var all = this.defaultComparers;
var comparers = [];
if (this.criterion === "text") {
var text_comparers = ["equalTo", "notEqualTo"];
for (var idx = 0; idx < all.length; idx++) {
if (text_comparers[0] == all[idx].type) {
comparers.push(all[idx]);
text_comparers.shift();
}
}
} else {
comparers = all.slice();
}
this.set("comparers", comparers);
},
setHintMessageTemplate: function() {
if (this.criterion !== "custom" && this.criterion !== "list") {
this.set("hintMessageTemplate", kendo.format(this.defaultHintMessage, this.criterion, this.comparerMessages[this.comparer]));
} else {
this.set("hintMessageTemplate", "");
this.set("hintMessage", "");
}
},
isAny: function() {
return this.get("criterion") === "any";
},
isNumber: function() {
return this.get("criterion") === "number";
},
showToForNumber: function() {
return this.showTo() && this.isNumber();
},
showToForDate: function() {
return this.showTo() && this.isDate();
},
isText: function() {
return this.get("criterion") === "text";
},
isDate: function() {
return this.get("criterion") === "date";
},
isList: function() {
return this.get("criterion") === "list";
},
isCustom: function() {
return this.get("criterion") === "custom";
},
showRemove: function() {
return this.get("hasValidation");
},
showTo: function() {
return this.get("comparer") == "between" || this.get("comparer") == "notBetween";
},
update: function(validation) {
this.set("hasValidation", !!validation);
if (validation) {
this.fromValidationObject(validation);
}
},
fromValidationObject: function(validation) {
this.set("criterion", validation.dataType);
this.set("comparer", validation.comparerType);
this.set("from", validation.from);
this.set("to", validation.to);
this.set("type", validation.type);
this.set("ignoreBlank", validation.allowNulls);
this.set("showButton", validation.showButton);
if (validation.messageTemplate || validation.titleTemplate) {
this.hintMessageTemplate = validation.messageTemplate;
this.hintMessage = validation.messageTemplate;
this.hintTitleTemplate = validation.titleTemplate;
this.hintTitle = validation.titleTemplate;
this.useCustomMessages = true;
this.buildMessages();
} else {
this.useCustomMessages = false;
}
},
toValidationObject: function() {
if (this.criterion === "any") {
return null;
}
var options = {
type: this.type,
dataType: this.criterion,
comparerType: this.comparer,
from: this.from,
to: this.to,
allowNulls: this.ignoreBlank,
showButton: this.showButton
};
if (this.useCustomMessages) {
options.messageTemplate = this.shouldBuild ? this.hintMessageTemplate : this.hintMessage;
options.titleTemplate = this.hintTitle;
}
return options;
}
});
var ValidationDialog = SpreadsheetDialog.extend({
init: function(options) {
var messages = kendo.spreadsheet.messages.dialogs.validationDialog || MESSAGES;
var defaultOptions = {
title: messages.title,
hintMessage: messages.hintMessage,
hintTitle: messages.hintTitle,
criteria: [
{ type: "any", name: messages.criteria.any },
{ type: "number", name: messages.criteria.number },
{ type: "text", name: messages.criteria.text },
{ type: "date", name: messages.criteria.date },
{ type: "custom", name: messages.criteria.custom },
{ type: "list", name: messages.criteria.list }
],
comparers: [