@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
1,367 lines (1,128 loc) • 106 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
require('./kendo.sortable.js');
require('./kendo.html.button.js');
require('./kendo.core.js');
require('./kendo.icons.js');
require('./kendo.menu.js');
require('./kendo.dialog.js');
require('./kendo.form.js');
require('./kendo.data.js');
require('./kendo.toolbar.js');
require('./kendo.textbox.js');
require('./kendo.draganddrop.js');
require('./kendo.userevents.js');
require('./kendo.licensing.js');
require('@progress/kendo-licensing');
require('./kendo.html.base.js');
require('./kendo.html.icon.js');
require('@progress/kendo-svg-icons');
require('./kendo.popup.js');
require('./kendo.data.odata.js');
require('./kendo.data.xml.js');
require('./kendo.floatinglabel.js');
require('./prefix-suffix-containers-BmDm564f.js');
require('./kendo.editable.js');
require('./kendo.checkbox.js');
require('./kendo.toggleinputbase.js');
require('./kendo.html.input.js');
require('./kendo.dropdownlist.js');
require('./kendo.list.js');
require('./kendo.label.js');
require('./kendo.actionsheet.js');
require('./dropdowns-loader-Bc4IELFi.js');
require('./kendo.mobile.scroller.js');
require('./kendo.fx.js');
require('./kendo.virtuallist.js');
require('./valueMapper-q_OtZ-Tj.js');
require('./kendo.datepicker.js');
require('./kendo.calendar.js');
require('./kendo.selectable.js');
require('./kendo.dateinput.js');
require('@progress/kendo-dateinputs-common');
require('./kendo.numerictextbox.js');
require('./kendo.validator.js');
require('./kendo.binder.js');
require('./kendo.otpinput.js');
require('./kendo.button.js');
require('./kendo.badge.js');
require('./kendo.splitbutton.js');
require('./kendo.button.menu.js');
require('./kendo.dropdownbutton.js');
require('./kendo.buttongroup.js');
require('./kendo.togglebutton.js');
(function($, undefined$1) {
var kendo = window.kendo,
ui = kendo.ui,
Observable = kendo.Observable,
encode = kendo.htmlEncode,
extend = $.extend,
DOT = ".",
NS = DOT + "kendoTaskBoardColumn",
CLICK = "click",
BLUR = "blur",
MOVE = "move",
MOVE_START = "moveStart",
MOVE_END = "moveEnd",
CHANGE = "change",
ACTION = "action";
var TaskBoardColumnStyles = {
element: "k-taskboard-column",
header: "k-taskboard-column-header",
headerText: "k-taskboard-column-header-text",
ellipsis: "k-text-ellipsis",
spacer: "k-spacer",
actions: "k-taskboard-column-header-actions",
cardsContainer: "k-taskboard-column-cards-container",
columnCards: "k-taskboard-column-cards",
actionButton: "k-taskboard-column-action-button",
card: "k-taskboard-card",
cardTitle: "k-card-title",
sortableSuffix: "-kendosortable",
textbox: "k-textbox k-input k-input-md k-rounded-md k-input-solid",
input: "k-input-inner",
newColumn: "k-taskboard-column-new",
editColumn: "k-taskboard-column-edit",
disabled: "k-disabled",
dragPlaceholder: "k-taskboard-drag-placeholder",
dragHint: "k-taskboard-drag-hint",
ignoreDrag: "k-taskboard-drag-ignore",
grabbingCursor: "k-cursor-grabbing"
};
function preventDefault(ev) { ev.preventDefault(); }
var TaskBoardColumn = Observable.extend({
init: function(options, dataItem) {
var that = this;
that._dataItem = dataItem;
that.options = extend(true, {}, options);
that.sortableUniqueClass = that.options.sortableIdentifier + TaskBoardColumn.styles.sortableSuffix;
that._render();
that._attachEvents();
if (options.states.isReorderable) {
that._initSortable();
}
Observable.fn.init.call(that);
},
empty: function() {
var that = this;
that.container.empty();
},
addCard: function(cardHtml) {
var that = this;
that.container.append(cardHtml);
},
edit: function() {
var that = this,
styles = TaskBoardColumn.styles;
that.element.addClass(styles.editColumn);
that._renderEditHeader();
},
getDataItem: function() {
return this._dataItem;
},
cards: function() {
var that = this;
return that.container.children();
},
template: (data) => `<div class="${encode(data.styles.headerText)} ${encode(data.styles.ellipsis)}">${kendo.getter(data.dataTextField)(data)}</div>` +
`<span class="${encode(data.styles.spacer)}"></span>` +
`${data.buttons}`,
editTemplate: (data) => `<div class="${encode(data.styles.headerText)} ${encode(data.styles.ellipsis)}">` +
`<span class="${encode(data.styles.textbox)}">` +
`<input class="${encode(data.styles.input)}" placeholder="${encode(kendo.getter(data.dataTextField)(data) ? data.messages.editColumn : data.messages.newColumn)}" ${encode(kendo.attr("command"))}="SaveColumnCommand" value="${encode(kendo.getter(data.dataTextField)(data))}" />` +
'</span>' +
'</div>' +
`<span class="${encode(data.styles.spacer)}"></span>` +
`${data.buttons}`,
actionButton: ({ styles, icon, spriteCssClass, text, command, options }) =>
kendo.html.renderButton(`<button class="${encode(styles.actionButton)}" title="${encode(text)}" ${encode(kendo.attr("command"))}="${encode(command)}" ${options ? encode(kendo.attr('options')) + "=" + encode(options) : ""}></button>`, {
icon: encode(icon),
iconClass: `k-button-icon ${encode(spriteCssClass)}`,
fillMode: "flat"
}),
builtinButtons: {
"editColumn": { name: "editColumn", icon: "pencil", text: "Edit Column", command: "EditColumnCommand", rules: "isEditable" },
"addCard": { name: "addCard", icon: "plus", text: "Add Card", command: "AddCardCommand", rules: "isEditable" },
"deleteColumn": { name: "deleteColumn", icon: "x", text: "Delete Column", command: "DeleteColumnCommand", rules: "isEditable" }
},
defaultButtons: [ "editColumn", "addCard", "deleteColumn" ],
_render: function() {
var that = this,
styles = TaskBoardColumn.styles,
headerLabelId = kendo.guid(),
element = $("<div class='" + styles.element + "'></div>")
.attr(kendo.attr("uid"), that._dataItem.uid)
.css({
width: that.options.width
})
.attr("role", "list").attr("aria-labelledby", headerLabelId),
header = $("<div class='" + styles.header + "'></div>"),
cardsContainer = $("<div class='" + styles.cardsContainer + "'></div>"),
columnCards = $("<div class='" + styles.columnCards + "'></div>");
that.header = header.appendTo(element).attr("id", headerLabelId);
that._renderHeader();
cardsContainer.appendTo(element);
that.container = columnCards
.appendTo(cardsContainer)
.addClass(that.sortableUniqueClass);
that.element = element;
},
_renderHeader: function() {
var that = this,
styles = TaskBoardColumn.styles,
options = that.options,
template = options.template ? options.template : that.template;
that.header.append(kendo.template(template)(extend(true, {}, {
styles: styles,
buttons: that._buildActionsHtml(),
dataTextField: options.dataTextField
}, that._dataItem)));
},
_renderEditHeader: function() {
var that = this,
styles = TaskBoardColumn.styles,
options = that.options,
template = options.editTemplate ? options.editTemplate : that.editTemplate;
that.header.html("");
that.header.append(kendo.template(template)(extend(true, {}, {
styles: styles,
messages: options.messages,
buttons: that._buildActionsHtml(),
dataTextField: options.dataTextField
}, that._dataItem)));
setTimeout(function() {
that.header.find("input").trigger("focus");
}, 0);
that.header.find(DOT + styles.actions).addClass(styles.disabled);
},
_buildActionsHtml: function() {
var that = this,
options = that.options,
messages = options.messages,
buttons = options.buttons || that.defaultButtons,
styles = TaskBoardColumn.styles,
html = "<div class='" + styles.actions + "'>";
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button = ($.isPlainObject(button) && Object.keys(button).length === 1 && button.name) ? button.name : button;
if (typeof button === "string") {
button = extend(true, {},
that.builtinButtons[button] || { spriteCssClass: button, command: button + "Command" },
{ text: messages[button] || button }
);
} else if ($.isPlainObject(button) && button.name) {
button = extend(true, button,
{ text: messages[button.name] }
);
}
if (!that._validateRules(button)) {
continue;
}
button.spriteCssClass = button.spriteCssClass || "";
html += kendo.template(that.actionButton)(extend(true, {}, {
styles: styles,
options: false
}, button));
}
html += "</div>";
return html;
},
_validateRules: function(tool) {
var that = this,
states = that.options.states,
rules = tool.rules ? tool.rules.split(";") : [];
if (!rules.length) {
return true;
}
for (var i = 0; i < rules.length; i++) {
if (!states[rules[i]]) {
return false;
}
}
return true;
},
_actionClick: function(ev) {
var that = this,
target = $(ev.target).closest("[" + kendo.attr("command") + "]"),
command = target.attr(kendo.attr("command")),
options = target.attr(kendo.attr("options"));
options = typeof(options) === "string" ? { value: options } : options;
if (!command) {
return;
}
that.trigger(ACTION, {
command: command,
options: extend({ target: target }, options)
});
},
_textboxBlur: function(ev) {
var that = this,
target = $(ev.target).closest("[" + kendo.attr("command") + "]"),
command = target.attr(kendo.attr("command")),
options = target.attr(kendo.attr("options"));
options = typeof(options) === "string" ? { value: options } : options;
if (!command) {
return;
}
that.trigger(ACTION, {
command: command,
options: extend({ target: target }, options)
});
},
_attachEvents: function() {
var that = this;
that.header.on(CLICK + NS,
DOT + TaskBoardColumn.styles.actionButton,
that._actionClick.bind(that));
that.header.on(BLUR + NS,
DOT + TaskBoardColumn.styles.input,
that._textboxBlur.bind(that));
that.header.on("keyup" + NS,
DOT + TaskBoardColumn.styles.input,
function(ev) {
if (ev.keyCode === kendo.keys.ENTER) {
that._textboxBlur(ev);
}
}
);
if (that.container) {
that.container.on(CLICK + NS,
DOT + TaskBoardColumn.styles.card + " [" + kendo.attr("command") + "]",
that._actionClick.bind(that));
that.container.on(CLICK + NS,
DOT + TaskBoardColumn.styles.card + " a." + TaskBoardColumn.styles.cardTitle,
preventDefault);
}
},
_initSortable: function() {
var that = this,
isRtl = that.options.states.isRtl,
dirClass = isRtl ? " k-rtl" : "",
container = that.container;
if (!that.container) {
return;
}
that.sortable = new ui.Sortable(container, {
ignore: DOT + TaskBoardColumn.styles.ignoreDrag + " *",
connectWith: DOT + that.sortableUniqueClass,
filter: DOT + TaskBoardColumn.styles.card,
hint: function(element) {
return element.clone()
.addClass(TaskBoardColumn.styles.dragHint + " " + TaskBoardColumn.styles.grabbingCursor + dirClass)
.css({
width: element[0].offsetWidth,
height: element[0].offsetHeight
});
},
placeholder: function(element) {
return $("<div></div>")
.addClass(TaskBoardColumn.styles.dragPlaceholder + " " + TaskBoardColumnStyles.card)
.css({
height: element[0].offsetHeight
});
},
move: that._move.bind(that),
start: that._start.bind(that),
end: that._end.bind(that),
change: that._change.bind(that)
});
that.sortable.draggable.userEvents.unbind("select");
that.sortable.draggable.userEvents.bind("select", that._select.bind(that));
},
_select: function(ev) {
var ignoreDragSelectors = TaskBoardColumn.ignoreDragSelectors;
var target = $(ev.event.target);
for (var i = 0; i < ignoreDragSelectors.length; i++) {
if (target.is(ignoreDragSelectors[i])) {
ev.preventDefault();
break;
}
}
},
_move: function(ev) {
extend(ev, {
columnElement: ev.sender.element.parents(DOT + TaskBoardColumn.styles.element)
});
this.trigger(MOVE, ev);
},
_start: function(ev) {
extend(ev, {
columnElement: ev.sender.element.parents(DOT + TaskBoardColumn.styles.element)
});
this.trigger(MOVE_START, ev);
},
_end: function(ev) {
const that = this;
const moveArgs = {
command: "MoveCardCommand",
options: ev
};
extend(ev, {
columnElement: ev.sender.element.parents(DOT + TaskBoardColumn.styles.element)
});
this.trigger(MOVE_END, ev);
if (ev.action === "receive" && ev.newIndex >= 0 && that.trigger(ACTION, moveArgs)) {
ev.preventDefault();
return;
}
},
_change: function(ev) {
var that = this;
extend(ev, {
columnElement: ev.sender.element.parents(DOT + TaskBoardColumn.styles.element)
});
that.trigger(CHANGE, ev);
},
destroy: function() {
var that = this;
that.header.off(NS);
that.container.off(NS);
if (that.sortable) {
that.sortable.destroy();
}
}
});
var TaskBoardNewColumn = TaskBoardColumn.extend({
_render: function() {
var that = this,
styles = TaskBoardColumn.styles,
element = $("<div class='" + styles.element + "'></div>").addClass(styles.newColumn).attr(kendo.attr("uid"), that._dataItem.uid),
header = $("<div class='" + styles.header + "'></div>");
that.header = header.appendTo(element);
that._renderEditHeader();
that.element = element;
}
});
extend(kendo.ui, {
taskboard: {
Column: TaskBoardColumn,
NewColumn: TaskBoardNewColumn
}
});
extend(true, kendo.ui.taskboard.Column, {
styles: TaskBoardColumnStyles,
ignoreDragSelectors: ["img"]
});
})(window.kendo.jQuery);
(function($, undefined$1) {
var kendo = window.kendo,
Observable = kendo.Observable,
encode = kendo.htmlEncode,
extend = $.extend;
var TaskBoardCardStyles = {
element: "k-taskboard-card",
card: "k-card",
header: "k-card-header",
hbox: "k-hbox",
title: "k-card-title",
link: "k-link",
spacer: "k-spacer",
button: "k-button",
cardMenuButton: "k-taskboard-card-menu-button k-icon-button",
flatButton: "k-button-md k-rounded-md k-button-flat k-button-flat-base",
body: "k-card-body",
actionsIcon: "more-vertical",
moveCursor: "k-cursor-move",
categoryBorder: "k-taskboard-card-category",
headerActions: "k-card-header-actions",
disabled: "k-disabled"
};
var TaskBoardCard = Observable.extend({
init: function(options, dataItem, resources) {
var that = this;
that._dataItem = dataItem;
that.resources = resources;
that.options = extend(true, {}, options);
that._render();
Observable.fn.init.call(that);
},
contentTemplate: (data) => `<div class="${encode(data.styles.header)} ${encode(data.styles.hbox)}">` +
`<a class="${encode(data.styles.title)} ${encode(data.styles.link)}" href="#" ${data.selectable ? kendo.attr("command") + '=SelectCardCommand' : ''}>${encode(kendo.getter(data.dataTitleField)(data))}</a>` +
`<span class="${encode(data.styles.spacer)}"></span>` +
`${data.cardMenuButton}` +
'</div>' +
`<div class="${encode(data.styles.body)}"><p>${encode(kendo.getter(data.dataDescriptionField)(data))}</p></div>`,
cardMenuButtonTemplate: ({ styles }) => `<div class="${encode(styles.headerActions)}"><button aria-label="menu" class="${encode(styles.button)} ${encode(styles.flatButton)} ${encode(styles.cardMenuButton)}">` +
kendo.ui.icon({ icon: encode(styles.actionsIcon), iconClass: "k-button-icon" }) +
'</button></div>',
_render: function() {
var that = this,
options = that.options,
styles = TaskBoardCard.styles,
template = options.template || that.contentTemplate,
element = $("<div class='" + styles.element + " " + styles.card + " " + styles.moveCursor + "'></div>"),
cardMenuButtonTemplate = options.cardMenu ? that.cardMenuButtonTemplate : "",
resources = that._resources(that._dataItem),
borderDir = options.states.isRtl ? "borderRightColor" : "borderLeftColor",
categoryColor;
element
.attr(kendo.attr("uid"), that._dataItem.uid)
.attr("aria-disabled", !options.states.isDisabled)
.attr("role", "listitem")
.toggleClass(styles.disabled, options.states.isDisabled);
categoryColor = (resources[options.dataCategoryField] && resources[options.dataCategoryField].color) ||
that._dataItem.get(options.dataCategoryField);
if (categoryColor) {
element.addClass(styles.categoryBorder).css(borderDir, categoryColor);
}
element.append(kendo.template(template)(extend(true, {}, {
styles: styles,
cardMenuButton: kendo.template(cardMenuButtonTemplate)({ styles: styles }),
selectable: options.states.isSelectable,
resources: resources,
dataTitleField: options.dataTitleField,
dataDescriptionField: options.dataDescriptionField
}, that._dataItem)));
that.element = element;
},
_resources: function(card) {
var that = this,
resources = {};
if (!that.resources) {
return resources;
}
for (var key in that.resources) {
var resource = that.resources[key];
var field = resource.field;
var cardResources = kendo.getter(field)(card);
if (!cardResources) {
continue;
}
if (!resource.multiple) {
cardResources = [cardResources];
}
var data = resource.dataSource.view();
for (var resourceIndex = 0; resourceIndex < cardResources.length; resourceIndex++) {
var cardResource = null;
var value = cardResources[resourceIndex];
if (!resource.valuePrimitive) {
value = kendo.getter(resource.dataValueField)(value);
}
for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
if (data[dataIndex].get(resource.dataValueField) == value) {
cardResource = data[dataIndex];
break;
}
}
if (cardResource !== null) {
var resourceColor = kendo.getter(resource.dataColorField)(cardResource);
var result = {
field: resource.field,
title: resource.title,
name: resource.name,
text: kendo.getter(resource.dataTextField)(cardResource),
value: value,
color: resourceColor
};
if (resource.multiple) {
if (resources[resource.field]) {
resources[resource.field].push(result);
} else {
resources[resource.field] = [result];
}
} else {
resources[resource.field] = result;
}
}
}
}
return resources;
},
_buildTemplate: function() {
var that = this,
options = that.options,
headerTemplate = kendo.format(that.headerTemplate, options.dataTitleField),
bodyTemplate = kendo.format(that.bodyTemplate, options.dataDescriptionField);
return headerTemplate + bodyTemplate;
}
});
extend(kendo.ui.taskboard, {
Card: TaskBoardCard
});
extend(true, kendo.ui.taskboard.Card, { styles: TaskBoardCardStyles });
})(window.kendo.jQuery);
(function($, undefined$1) {
var kendo = window.kendo,
extend = $.extend;
kendo.template;
var ContextMenu = kendo.ui.ContextMenu,
encode = kendo.htmlEncode,
ACTION = "action";
var TaskBoardCardMenu = ContextMenu.extend({
init: function(element, options) {
var that = this;
ContextMenu.fn.init.call(that, element, options);
that._overrideTemplates();
that._extendItems();
that.bind("select", that._onSelect.bind(that));
that.bind("open", that._onOpen.bind(that));
that.bind("activate", that._focus.bind(that));
},
_overrideTemplates: function() {
this.templates.sprite = ({ icon, spriteCssClass }) => `${(icon || spriteCssClass) ? kendo.ui.icon({ icon: encode(icon || ""), iconClass: encode(spriteCssClass || "") }) : ''}`;
},
defaultItems: {
"editCard": { name: "editCard", text: "Edit card", icon: "pencil", command: "EditCardCommand", rules: "isEditable" },
"deleteCard": { name: "deleteCard", text: "Delete card", icon: "trash", command: "DeleteCardCommand", rules: "isEditable" }
},
events: ContextMenu.fn.events.concat([
ACTION
]),
_extendItems: function() {
var that = this,
items = that.options.items,
item, isBuiltInTool;
if (items && items.length) {
for (var i = 0; i < items.length; i++) {
item = items[i];
isBuiltInTool = $.isPlainObject(item) && Object.keys(item).length === 1 && item.name;
if (isBuiltInTool) {
item = item.name;
}
if ($.isPlainObject(item)) {
that._append(item);
} else if (that.defaultItems[item]) {
item = that.defaultItems[item];
that._append(item);
} else if (typeof(item) === "string") {
item = { name: item, text: item, spriteCssClass: item, command: item + "Command" };
that._append(item);
}
}
} else {
for (var key in that.defaultItems) {
item = that.defaultItems[key];
that._append(item);
}
}
},
_append: function(item) {
var that = this;
that._extendItem(item);
if (that._validateRules(item)) {
that.append(item);
}
},
_extendItem: function(item) {
var that = this,
messages = that.options.messages,
attr = {};
attr[kendo.attr("command")] = item.command;
if (item.options) {
attr[kendo.attr("options")] = item.options;
}
extend(item, {
text: messages[item.name],
icon: item.icon || "",
spriteCssClass: item.spriteCssClass || "",
attr: attr,
uid: kendo.guid()
});
},
_validateRules: function(tool) {
var that = this,
states = that.options.states,
rules = tool.rules ? tool.rules.split(";") : [];
if (!rules.length) {
return true;
}
for (var i = 0; i < rules.length; i++) {
if (!states[rules[i]]) {
return false;
}
}
return true;
},
_onSelect: function(ev) {
var command = $(ev.item).attr(kendo.attr("command")),
options = $(ev.item).attr(kendo.attr("options")),
target = $(ev.target);
options = typeof(options) === "string" ? { value: options } : options;
if (!command) {
return;
}
this.action({
command: command,
options: extend({ target: target }, options)
});
},
_onOpen: function(ev) {
var menu = ev.sender,
items = menu.options.items;
if (!items && $.isEmptyObject(this.defaultItems)) {
ev.preventDefault();
}
},
_focus: function(ev) {
if (ev.sender) {
ev.sender.element.trigger("focus");
}
},
action: function(args) {
this.trigger(ACTION, args);
}
});
extend(kendo.ui.taskboard, {
CardMenu: TaskBoardCardMenu
});
})(window.kendo.jQuery);
(function($, undefined$1) {
var kendo = window.kendo,
extend = $.extend,
isPlainObject = $.isPlainObject,
Class = kendo.Class;
var TaskBoardCommand = Class.extend({
init: function(options) {
this.options = options;
this.taskboard = options.taskboard;
},
_confirm: function(title, content, okText, cancel) {
var that = this,
taskboard = that.taskboard,
taskboardOptions = taskboard.options,
confirm;
if (isPlainObject(taskboardOptions.editable) && taskboardOptions.editable.confirmation === false ) {
var fakePromise = $.Deferred();
fakePromise.resolve();
return fakePromise;
}
confirm = $("<div></div>").kendoConfirm(extend({}, {
title: title,
content: content,
messages: {
okText: okText,
cancel: cancel
},
buttonLayout: "normal"
})).data("kendoConfirm");
confirm.open();
setTimeout(function() {
confirm.element.trigger("focus");
});
return confirm.result;
}
});
// Column commands
var AddColumnCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard;
if (taskboard.trigger("editColumn", { column: null })) {
return;
}
taskboard.columns().each(function(index, column) {
taskboard.enableByColumn(column, false);
});
taskboard.addColumn();
}
});
var EditColumnCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
options = that.options,
taskboard = that.taskboard;
if (taskboard.trigger("editColumn", { column: options.column })) {
return;
}
taskboard.columns().each(function(index, column) {
taskboard.enableByColumn(column, false);
});
taskboard.editColumn(options.columnElement);
}
});
var DeleteColumnCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
options = that.options,
taskboard = that.taskboard,
taskboardOptions = taskboard.options,
messages = taskboardOptions.messages,
columnDS = taskboard.columnsDataSource;
var result = that._confirm(messages.deleteColumn, messages.deleteColumnConfirm, messages["delete"], messages.cancel);
result.done(function() {
if (taskboard.trigger("deleteColumn", { column: options.column })) {
taskboard.dataSource.cancelChanges();
return;
}
columnDS.remove(options.column);
columnDS.sync();
});
}
});
var SaveColumnCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
options = that.options,
taskboard = that.taskboard,
columnSettings = taskboard.options.columnSettings,
columnDS = taskboard.columnsDataSource,
column = options.column,
text = options.target.val();
if (taskboard.trigger("saveColumn", { column: options.column })) {
taskboard.dataSource.cancelChanges();
return;
}
column.set(columnSettings.dataTextField, text);
columnDS.sync();
}
});
var CancelEditColumnCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard,
columnDS = taskboard.columnsDataSource;
columnDS.cancelChanges();
}
});
//Move focus command
var MoveFocusCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard,
options = that.options,
cardElement = options.cardElement,
columnElement = options.columnElement,
columns = taskboard.columns(),
currentColumnIndex = columnElement.index(),
direction = options.value,
columnIndex, column;
switch (direction) {
case "left":
columnIndex = Math.max(0, currentColumnIndex - 1);
break;
case "right":
columnIndex = Math.min(columns.length - 1, currentColumnIndex + 1);
break;
default:
columnIndex = currentColumnIndex;
break;
}
that.columns = columns;
that.columnIndex = columnIndex;
that.column = column = taskboard._getColumnByElement(columns.eq(columnIndex));
that.cards = column.cards();
if (cardElement) {
that._moveFromCardFocus(direction, cardElement);
} else if (columnElement && direction === "down") {
that.cards.eq(0).trigger("focus");
} else {
columns.eq(columnIndex).trigger("focus");
}
},
_moveFromCardFocus: function(direction, cardElement) {
var that = this,
currentIndex = cardElement.index(),
focusCard, index, seekFocusableCard = false;
switch (direction) {
case "up":
index = currentIndex - 1;
break;
case "down":
index = currentIndex + 1;
break;
default:
seekFocusableCard = true;
index = currentIndex;
break;
}
focusCard = that.cards.eq(index);
if (!focusCard.length && seekFocusableCard) {
focusCard = that._getFocusableCard(index, direction);
}
if (index >= 0) {
focusCard.trigger("focus");
} else {
that.options.columnElement.focus();
}
},
_getFocusableCard: function(index, direction) {
var that = this,
lastIndex = that.cards.length - 1,
focusable = that.cards.eq(Math.min(index, lastIndex));
if (focusable.length) {
return focusable;
}
if (that.columnIndex <= 0 || that.columnIndex >= that.columns.length - 1) {
return;
}
switch (direction) {
case "left":
that.columnIndex = Math.max(0, that.columnIndex - 1);
break;
case "right":
that.columnIndex = Math.min(that.columns.length - 1, that.columnIndex + 1);
break;
}
that.column = that.taskboard._getColumnByElement(that.columns.eq(that.columnIndex));
that.cards = that.column.cards();
return that._getFocusableCard(index, direction);
}
});
// Card commands
var TaskBoardBaseCardCommand = TaskBoardCommand.extend({
_updateOrder: function(column, currentIndex) {
var that = this,
taskboard = that.taskboard,
taskBoardOptions = taskboard.options,
dataOrderField = taskBoardOptions.dataOrderField,
options = that.options,
currentCard = options.card,
cardIndex = options.cardElement ? options.cardElement.index() : column.cards().length,
newIndex = currentIndex,
cards = column.cards().map(function(idx, card) {
return taskboard.dataItem(card);
}),
prevCard = cards[cardIndex - 1],
nextCard;
currentCard.set(dataOrderField, newIndex);
if (prevCard && prevCard.get(dataOrderField) >= currentCard.get(dataOrderField)) {
currentCard.set(dataOrderField, prevCard.get(dataOrderField) + 1);
}
for (var i = newIndex + 1; i < cards.length; i++) {
nextCard = cards[i];
if (nextCard.get(dataOrderField) <= currentCard.get(dataOrderField)) {
nextCard.set(dataOrderField, currentCard.get(dataOrderField) + 1);
currentCard = nextCard;
} else {
break;
}
}
}
});
var SelectCardCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard,
options = that.options,
cardElement = options.cardElement;
taskboard._select(cardElement, true);
cardElement.focus();
}
});
var SaveChangesCommand = TaskBoardBaseCardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard,
taskBoardOptions = taskboard.options,
options = that.options,
receivedStatus = options.card.get(taskBoardOptions.dataStatusField),
targetColumn = taskboard._getColumn(receivedStatus),
activeElm = $(document.activeElement);
if (activeElm.length) {
activeElm.trigger("change");
}
if (taskboard.pane && taskboard.pane.form && !taskboard.pane.form.validate()) {
return;
}
if (taskboard.trigger("saveCard", { card: options.card })) {
taskboard.dataSource.cancelChanges();
return;
}
if (targetColumn && taskBoardOptions.dataOrderField) {
that._updateOrder(targetColumn, options.card.get(taskBoardOptions.dataOrderField));
}
taskboard.dataSource.sync().then(function() {
taskboard.columns().eq(0).trigger("focus");
});
}
});
var DeleteCardCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard,
messages = taskboard.options.messages,
options = that.options;
var result = that._confirm(messages.deleteCard, messages.deleteCardConfirm, messages["delete"], messages.cancel);
result
.done(function() {
if (taskboard.trigger("deleteCard", { card: options.card })) {
taskboard.dataSource.cancelChanges();
return;
}
taskboard.dataSource.remove(options.card);
taskboard.dataSource.sync().then(function() {
taskboard.columns().eq(0).trigger("focus");
});
})
.fail(function() {
options.cardElement.trigger("focus");
});
}
});
var MoveCardCommand = TaskBoardBaseCardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard,
taskBoardOptions = taskboard.options,
columnSettings = taskBoardOptions.columnSettings,
options = that.options,
receivedStatus = options.column.get(columnSettings.dataStatusField);
options.card.set(taskBoardOptions.dataStatusField, receivedStatus);
if (taskBoardOptions.dataOrderField) {
that._updateOrder(taskboard._getColumn(receivedStatus), options.newIndex);
}
taskboard.dataSource.sync();
}
});
var EditCardCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard,
options = that.options;
if (taskboard.trigger("editCard", { card: options.card })) {
return;
}
taskboard._openPane(extend({
pane: "Edit"
}, options));
}
});
var AddCardCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard,
options = that.options;
if (taskboard.trigger("editCard", { card: null })) {
return;
}
taskboard.dataSource.cancelChanges();
taskboard._openPane(extend({
pane: "Create"
}, options));
}
});
// Pane commands
var OpenPaneCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
options = that.options,
taskboard = that.taskboard;
taskboard._openPane({
pane: options.value,
card: options.card,
cardElement: options.cardElement,
column: options.column,
columnElement: options.columnElement
});
}
});
var ClosePaneCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
taskboard = that.taskboard;
taskboard._closePane();
taskboard.dataSource.cancelChanges();
}
});
// Search command
var SearchCommand = TaskBoardCommand.extend({
exec: function() {
var that = this,
value = that.options.value,
taskboard = that.taskboard,
taskboardOptions = taskboard.options,
searchOptions = taskboardOptions.search,
operator = searchOptions.operator,
fields = (searchOptions && searchOptions.fields) || [ taskboardOptions.dataTitleField, taskboardOptions.dataDescriptionField ],
filters;
filters = that._buildFilters(fields, operator, value);
taskboard.dataSource.filter(filters);
},
_buildFilters: function(fields, operator, value) {
var filters = fields.map(function(field) {
return { field: field, operator: operator, value: value };
});
return { logic: "or", filters: filters };
}
});
extend(kendo.ui.taskboard, {
Command: TaskBoardCommand,
commands: {
AddColumnCommand: AddColumnCommand,
EditColumnCommand: EditColumnCommand,
DeleteColumnCommand: DeleteColumnCommand,
SaveColumnCommand: SaveColumnCommand,
CancelEditColumnCommand: CancelEditColumnCommand,
OpenPaneCommand: OpenPaneCommand,
ClosePaneCommand: ClosePaneCommand,
SelectCardCommand: SelectCardCommand,
MoveFocusCommand: MoveFocusCommand,
SaveChangesCommand: SaveChangesCommand,
DeleteCardCommand: DeleteCardCommand,
MoveCardCommand: MoveCardCommand,
EditCardCommand: EditCardCommand,
AddCardCommand: AddCardCommand,
SearchCommand: SearchCommand
}
});
})(window.kendo.jQuery);
(function($, undefined$1) {
var kendo = window.kendo,
extend = $.extend,
Observable = kendo.Observable,
encode = kendo.htmlEncode,
Form = kendo.ui.Form,
DOT = ".",
NS = DOT + "kendoTaskBoardPane",
ACTION = "action",
CLICK = "click";
var TaskBoardPaneStyles = {
element: "k-taskboard-pane",
edit: "k-taskboard-edit-pane",
preview: "k-taskboard-preview-pane",
header: "k-taskboard-pane-header",
headerText: "k-taskboard-pane-header-text",
spacer: "k-spacer",
headerActions: "k-taskboard-pane-header-actions",
content: "k-taskboard-pane-content",
footerActions: "k-taskboard-pane-actions",
footerActionButtons: "k-actions k-hstack k-justify-content-start",
baseButton: "k-button-solid-base",
primaryButton: "k-button-solid-primary"
};
var TaskBoardPane = Observable.extend({
init: function(taskboard, options, dataItem, resources) {
var that = this;
that.taskboard = taskboard;
that._dataItem = dataItem;
that.resources = resources;
that.options = extend(true, {}, options);
that._render();
that.element.on(CLICK + NS,
"[" + kendo.attr("command") + "]",
that._commandClick.bind(that));
Observable.fn.init.call(that);
},
headerTemplate: ({ styles, messages, fieldFormat }) => `<div class="${encode(styles.headerText)}">${fieldFormat}</div>` +
`<span class="${encode(styles.spacer)}"></span>` +
`<div class="${encode(styles.headerActions)}">` +
kendo.html.renderButton(`<button title="${encode(messages.close)}" ${encode(kendo.attr("command"))}="ClosePaneCommand"></button>`, {
icon: "x",
iconClass: 'k-button-icon',
fillMode: "flat",
}) +
'</div>',
buttonTemplate: ({ styles, icon, spriteCssClass, text, fillMode, themeColor, command, options }) =>
kendo.html.renderButton(`<button title="${encode(text)}" ${encode(kendo.attr("command"))}="${encode(command)}" ${encode(kendo.attr("options"))}="${encode(options)}">` +
`${encode(text)}` +
'</button>', {
icon: encode(icon),
iconClass: `k-button-icon ${encode(spriteCssClass)}`,
fillMode: fillMode,
themeColor: themeColor
}),
contentTemplate: () => ``,
builtinButtons: {
"edit": { name: "edit", icon: "pencil", text: "Edit", themeColor: "primary", command: "EditCardCommand", rules: "isEditable" },
"delete": { name: "delete", icon: "trash", text: "Delete", command: "DeleteCardCommand", rules: "isEditable", fillMode: "flat", themeColor: "primary" },
"cancel": { name: "cancel", icon: "cancel-outline", text: "Cancel", command: "ClosePaneCommand" },
"saveChanges": { name: "saveChanges", icon: "save", text: "Save", command: "SaveChangesCommand", themeColor: "primary", rules: "isEditable" },
"create": { name: "create", icon: "save", text: "Create", command: "SaveChangesCommand", themeColor: "primary", rules: "isEditable" }
},
defaultButtons: [],
_render: function() {
var that = this,
styles = TaskBoardPane.styles,
element = $("<div class='" + styles.element + "'></div>"),
header = $("<div class='" + styles.header + "'></div>"),
content = $("<div class='" + styles.content + "'></div>"),