' + (content || "#=data.value#") + ' ', { useWithBlock: !!content }),
empty: template('' + (empty || " ") + " ", { useWithBlock: !!empty })
};
that.footer = footer !== false ? template(footer || '#= kendo.toString(data,"D","' + options.culture +'") #', { useWithBlock: false }) : null;
}
});
ui.plugin(Calendar);
var calendar = {
firstDayOfMonth: function (date) {
return new DATE(
date.getFullYear(),
date.getMonth(),
1
);
},
firstVisibleDay: function (date, calendarInfo) {
calendarInfo = calendarInfo || kendo.culture().calendar;
var firstDay = calendarInfo.firstDay,
firstVisibleDay = new DATE(date.getFullYear(), date.getMonth(), 0, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
while (firstVisibleDay.getDay() != firstDay) {
calendar.setTime(firstVisibleDay, -1 * MS_PER_DAY);
}
return firstVisibleDay;
},
setTime: function (date, time) {
var tzOffsetBefore = date.getTimezoneOffset(),
resultDATE = new DATE(date.getTime() + time),
tzOffsetDiff = resultDATE.getTimezoneOffset() - tzOffsetBefore;
date.setTime(resultDATE.getTime() + tzOffsetDiff * MS_PER_MINUTE);
},
views: [{
name: MONTH,
title: function(date, min, max, culture) {
return getCalendarInfo(culture).months.names[date.getMonth()] + " " + date.getFullYear();
},
content: function(options) {
var that = this,
idx = 0,
min = options.min,
max = options.max,
date = options.date,
dates = options.dates,
format = options.format,
culture = options.culture,
navigateUrl = options.url,
hasUrl = navigateUrl && dates[0],
currentCalendar = getCalendarInfo(culture),
firstDayIdx = currentCalendar.firstDay,
days = currentCalendar.days,
names = shiftArray(days.names, firstDayIdx),
shortNames = shiftArray(days.namesShort, firstDayIdx),
start = calendar.firstVisibleDay(date, currentCalendar),
firstDayOfMonth = that.first(date),
lastDayOfMonth = that.last(date),
toDateString = that.toDateString,
today = new DATE(),
html = '';
for (; idx < 7; idx++) {
html += '' + shortNames[idx] + ' ';
}
today = new DATE(today.getFullYear(), today.getMonth(), today.getDate());
adjustDST(today, 0);
today = +today;
return view({
cells: 42,
perRow: 7,
html: html += ' ',
start: new DATE(start.getFullYear(), start.getMonth(), start.getDate()),
min: new DATE(min.getFullYear(), min.getMonth(), min.getDate()),
max: new DATE(max.getFullYear(), max.getMonth(), max.getDate()),
content: options.content,
empty: options.empty,
setter: that.setDate,
build: function(date) {
var cssClass = [],
day = date.getDay(),
linkClass = "",
url = "#";
if (date < firstDayOfMonth || date > lastDayOfMonth) {
cssClass.push(OTHERMONTH);
}
if (+date === today) {
cssClass.push("k-today");
}
if (day === 0 || day === 6) {
cssClass.push("k-weekend");
}
if (hasUrl && inArray(+date, dates)) {
url = navigateUrl.replace("{0}", kendo.toString(date, format, culture));
linkClass = " k-action-link";
}
return {
date: date,
dates: dates,
ns: kendo.ns,
title: kendo.toString(date, "D", culture),
value: date.getDate(),
dateString: toDateString(date),
cssClass: cssClass[0] ? ' class="' + cssClass.join(" ") + '"' : "",
linkClass: linkClass,
url: url
};
}
});
},
first: function(date) {
return calendar.firstDayOfMonth(date);
},
last: function(date) {
var last = new DATE(date.getFullYear(), date.getMonth() + 1, 0),
first = calendar.firstDayOfMonth(date),
timeOffset = Math.abs(last.getTimezoneOffset() - first.getTimezoneOffset());
if (timeOffset) {
last.setHours(first.getHours() + (timeOffset / 60));
}
return last;
},
compare: function(date1, date2) {
var result,
month1 = date1.getMonth(),
year1 = date1.getFullYear(),
month2 = date2.getMonth(),
year2 = date2.getFullYear();
if (year1 > year2) {
result = 1;
} else if (year1 < year2) {
result = -1;
} else {
result = month1 == month2 ? 0 : month1 > month2 ? 1 : -1;
}
return result;
},
setDate: function(date, value) {
var hours = date.getHours();
if (value instanceof DATE) {
date.setFullYear(value.getFullYear(), value.getMonth(), value.getDate());
} else {
calendar.setTime(date, value * MS_PER_DAY);
}
adjustDST(date, hours);
},
toDateString: function(date) {
return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate();
}
},
{
name: "year",
title: function(date) {
return date.getFullYear();
},
content: function(options) {
var namesAbbr = getCalendarInfo(options.culture).months.namesAbbr,
toDateString = this.toDateString,
min = options.min,
max = options.max;
return view({
min: new DATE(min.getFullYear(), min.getMonth(), 1),
max: new DATE(max.getFullYear(), max.getMonth(), 1),
start: new DATE(options.date.getFullYear(), 0, 1),
setter: this.setDate,
build: function(date) {
return {
value: namesAbbr[date.getMonth()],
ns: kendo.ns,
dateString: toDateString(date),
cssClass: ""
};
}
});
},
first: function(date) {
return new DATE(date.getFullYear(), 0, date.getDate());
},
last: function(date) {
return new DATE(date.getFullYear(), 11, date.getDate());
},
compare: function(date1, date2){
return compare(date1, date2);
},
setDate: function(date, value) {
var month,
hours = date.getHours();
if (value instanceof DATE) {
month = value.getMonth();
date.setFullYear(value.getFullYear(), month, date.getDate());
if (month !== date.getMonth()) {
date.setDate(0);
}
} else {
month = date.getMonth() + value;
date.setMonth(month);
if (month > 11) {
month -= 12;
}
if (month > 0 && date.getMonth() != month) {
date.setDate(0);
}
}
adjustDST(date, hours);
},
toDateString: function(date) {
return date.getFullYear() + "/" + date.getMonth() + "/1";
}
},
{
name: "decade",
title: function(date, min, max) {
return title(date, min, max, 10);
},
content: function(options) {
var year = options.date.getFullYear(),
toDateString = this.toDateString;
return view({
start: new DATE(year - year % 10 - 1, 0, 1),
min: new DATE(options.min.getFullYear(), 0, 1),
max: new DATE(options.max.getFullYear(), 0, 1),
setter: this.setDate,
build: function(date, idx) {
return {
value: date.getFullYear(),
ns: kendo.ns,
dateString: toDateString(date),
cssClass: idx === 0 || idx == 11 ? OTHERMONTHCLASS : ""
};
}
});
},
first: function(date) {
var year = date.getFullYear();
return new DATE(year - year % 10, date.getMonth(), date.getDate());
},
last: function(date) {
var year = date.getFullYear();
return new DATE(year - year % 10 + 9, date.getMonth(), date.getDate());
},
compare: function(date1, date2) {
return compare(date1, date2, 10);
},
setDate: function(date, value) {
setDate(date, value, 1);
},
toDateString: function(date) {
return date.getFullYear() + "/0/1";
}
},
{
name: CENTURY,
title: function(date, min, max) {
return title(date, min, max, 100);
},
content: function(options) {
var year = options.date.getFullYear(),
min = options.min.getFullYear(),
max = options.max.getFullYear(),
toDateString = this.toDateString,
minYear = min,
maxYear = max;
minYear = minYear - minYear % 10;
maxYear = maxYear - maxYear % 10;
if (maxYear - minYear < 10) {
maxYear = minYear + 9;
}
return view({
start: new DATE(year - year % 100 - 10, 0, 1),
min: new DATE(minYear, 0, 1),
max: new DATE(maxYear, 0, 1),
setter: this.setDate,
build: function(date, idx) {
var start = date.getFullYear(),
end = start + 9;
if (start < min) {
start = min;
}
if (end > max) {
end = max;
}
return {
ns: kendo.ns,
value: start + " - " + end,
dateString: toDateString(date),
cssClass: idx === 0 || idx == 11 ? OTHERMONTHCLASS : ""
};
}
});
},
first: function(date) {
var year = date.getFullYear();
return new DATE(year - year % 100, date.getMonth(), date.getDate());
},
last: function(date) {
var year = date.getFullYear();
return new DATE(year - year % 100 + 99, date.getMonth(), date.getDate());
},
compare: function(date1, date2) {
return compare(date1, date2, 100);
},
setDate: function(date, value) {
setDate(date, value, 10);
},
toDateString: function(date) {
var year = date.getFullYear();
return (year - year % 10) + "/0/1";
}
}]
};
function title(date, min, max, modular) {
var start = date.getFullYear(),
minYear = min.getFullYear(),
maxYear = max.getFullYear(),
end;
start = start - start % modular;
end = start + (modular - 1);
if (start < minYear) {
start = minYear;
}
if (end > maxYear) {
end = maxYear;
}
return start + "-" + end;
}
function view(options) {
var idx = 0,
data,
min = options.min,
max = options.max,
start = options.start,
setter = options.setter,
build = options.build,
length = options.cells || 12,
cellsPerRow = options.perRow || 4,
content = options.content || cellTemplate,
empty = options.empty || emptyCellTemplate,
html = options.html || '';
for(; idx < length; idx++) {
if (idx > 0 && idx % cellsPerRow === 0) {
html += ' ';
}
data = build(start, idx);
html += isInRange(start, min, max) ? content(data) : empty(data);
setter(start, 1);
}
return html + "
";
}
function compare(date1, date2, modifier) {
var year1 = date1.getFullYear(),
start = date2.getFullYear(),
end = start,
result = 0;
if (modifier) {
start = start - start % modifier;
end = start - start % modifier + modifier - 1;
}
if (year1 > end) {
result = 1;
} else if (year1 < start) {
result = -1;
}
return result;
}
function getToday() {
var today = new DATE();
return new DATE(today.getFullYear(), today.getMonth(), today.getDate());
}
function restrictValue (value, min, max) {
var today = getToday();
if (value) {
today = new DATE(+value);
}
if (min > today) {
today = new DATE(+min);
} else if (max < today) {
today = new DATE(+max);
}
return today;
}
function isInRange(date, min, max) {
return +date >= +min && +date <= +max;
}
function shiftArray(array, idx) {
return array.slice(idx).concat(array.slice(0, idx));
}
function setDate(date, value, multiplier) {
value = value instanceof DATE ? value.getFullYear() : date.getFullYear() + multiplier * value;
date.setFullYear(value);
}
function mousetoggle(e) {
$(this).toggleClass(HOVER, MOUSEENTER.indexOf(e.type) > -1 || e.type == FOCUS);
}
function prevent (e) {
e.preventDefault();
}
function getCalendarInfo(culture) {
return getCulture(culture).calendars.standard;
}
function normalize(options) {
var start = views[options.start],
depth = views[options.depth],
culture = getCulture(options.culture);
options.format = extractFormat(options.format || culture.calendars.standard.patterns.d);
if (isNaN(start)) {
start = 0;
options.start = MONTH;
}
if (depth === undefined || depth > start) {
options.depth = MONTH;
}
if (!options.dates) {
options.dates = [];
}
}
function makeUnselectable(element) {
if (isIE8) {
element.find("*").attr("unselectable", "on");
}
}
function inArray(date, dates) {
for(var i = 0, length = dates.length; i < length; i++) {
if (date === +dates[i]) {
return true;
}
}
return false;
}
function isEqualDatePart(value1, value2) {
if (value1) {
return value1.getFullYear() === value2.getFullYear() &&
value1.getMonth() === value2.getMonth() &&
value1.getDate() === value2.getDate();
}
return false;
}
function isEqualMonth(value1, value2) {
if (value1) {
return value1.getFullYear() === value2.getFullYear() &&
value1.getMonth() === value2.getMonth();
}
return false;
}
calendar.isEqualDatePart = isEqualDatePart;
calendar.makeUnselectable = makeUnselectable;
calendar.restrictValue = restrictValue;
calendar.isInRange = isInRange;
calendar.normalize = normalize;
calendar.viewsEnum = views;
kendo.calendar = calendar;
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
parse = kendo.parseDate,
keys = kendo.keys,
template = kendo.template,
activeElement = kendo._activeElement,
DIV = "
",
SPAN = "select ' + text + " ";
},
_optionLabelText: function() {
var options = this.options,
dataTextField = options.dataTextField,
optionLabel = options.optionLabel;
if (optionLabel && dataTextField && typeof optionLabel === "object") {
return this._text(optionLabel);
}
return optionLabel;
},
_data: function() {
var that = this,
options = that.options,
optionLabel = options.optionLabel,
textField = options.dataTextField,
valueField = options.dataValueField,
data = that.dataSource.view(),
length = data.length,
first = optionLabel,
idx = 0;
if (optionLabel && length) {
if (typeof optionLabel === "object") {
first = optionLabel;
} else if (textField) {
first = {};
textField = textField.split(".");
valueField = valueField.split(".");
assign(first, valueField, "");
assign(first, textField, optionLabel);
}
first = new kendo.data.ObservableArray([first]);
for (; idx < length; idx++) {
first.push(data[idx]);
}
data = first;
}
return data;
},
_selectItem: function() {
Select.fn._selectItem.call(this);
if (!this.current()) {
this.select(0);
}
},
_keydown: function(e) {
var that = this;
var key = e.keyCode;
var altKey = e.altKey;
var ul = that.ul[0];
var handled;
if (key === keys.LEFT) {
key = keys.UP;
} else if (key === keys.RIGHT) {
key = keys.DOWN;
}
e.keyCode = key;
handled = that._move(e);
if (!that.popup.visible() || !that.filterInput) {
if (key === keys.HOME) {
handled = true;
e.preventDefault();
that._select(ul.firstChild);
} else if (key === keys.END) {
handled = true;
e.preventDefault();
that._select(ul.lastChild);
}
}
if (altKey && key === keys.UP) {
that._focusElement(that.wrapper);
}
if (!altKey && !handled && that.filterInput) {
that._search();
}
},
_selectNext: function(word, index) {
var that = this, text,
startIndex = index,
data = that._data(),
length = data.length,
ignoreCase = that.options.ignoreCase,
action = function(text, index) {
text = text + "";
if (ignoreCase) {
text = text.toLowerCase();
}
if (text.indexOf(word) === 0) {
that._select(index);
that._triggerEvents();
return true;
}
};
for (; index < length; index++) {
text = that._text(data[index]);
if (text && action(text, index)) {
return true;
}
}
if (startIndex > 0 && startIndex < length) {
index = 0;
for (; index <= startIndex; index++) {
text = that._text(data[index]);
if (text && action(text, index)) {
return true;
}
}
}
return false;
},
_keypress: function(e) {
var that = this;
if (e.which === 0 || e.keyCode === kendo.keys.ENTER) {
return;
}
var character = String.fromCharCode(e.charCode || e.keyCode);
var index = that.selectedIndex;
var word = that._word;
if (that.options.ignoreCase) {
character = character.toLowerCase();
}
if (character === " ") {
e.preventDefault();
}
if (that._last === character && word.length <= 1 && index > -1) {
if (!word) {
word = character;
}
if (that._selectNext(word, index + 1)) {
return;
}
}
that._word = word + character;
that._last = character;
that._search();
},
_popupOpen: function() {
var popup = this.popup;
popup.wrapper = kendo.wrap(popup.element);
if (popup.element.closest(".km-root")[0]) {
popup.wrapper.addClass("km-popup km-widget");
this.wrapper.addClass("km-widget");
}
},
_popup: function() {
Select.fn._popup.call(this);
this.popup.one("open", proxy(this._popupOpen, this));
},
_focusElement: function(element) {
var active = activeElement();
var wrapper = this.wrapper;
var filterInput = this.filterInput;
var compareElement = element === filterInput ? wrapper : filterInput;
if (filterInput && compareElement[0] === active) {
this._prevent = true;
this._focused = element.focus();
}
},
_filter: function(word) {
if (word) {
var that = this;
var ignoreCase = that.options.ignoreCase;
if (ignoreCase) {
word = word.toLowerCase();
}
that._select(function(dataItem) {
var text = that._text(dataItem);
if (text !== undefined) {
text = (text + "");
if (ignoreCase) {
text = text.toLowerCase();
}
return text.indexOf(word) === 0;
}
});
}
},
_search: function() {
var that = this,
dataSource = that.dataSource,
index = that.selectedIndex,
word = that._word;
clearTimeout(that._typing);
if (that.options.filter !== "none") {
that._typing = setTimeout(function() {
var value = that.filterInput.val();
if (that._prev !== value) {
that._prev = value;
that.search(value);
}
that._typing = null;
}, that.options.delay);
} else {
that._typing = setTimeout(function() {
that._word = "";
}, that.options.delay);
if (index === -1) {
index = 0;
}
if (!that.ul[0].firstChild) {
dataSource.one(CHANGE, function () {
if (dataSource.data()[0] && index > -1) {
that._selectNext(word, index);
}
}).fetch();
return;
}
that._selectNext(word, index);
that._triggerEvents();
}
},
_select: function(li) {
var that = this,
current = that._current,
data = null,
value,
idx;
li = that._get(li);
if (li && li[0] && !li.hasClass(SELECTED)) {
if (that._state === STATE_FILTER) {
that._state = STATE_ACCEPT;
}
if (current) {
current.removeClass(SELECTED);
}
idx = ui.List.inArray(li[0], that.ul[0]);
if (idx > -1) {
that.selectedIndex = idx;
data = that._data()[idx];
value = that._value(data);
if (value === null) {
value = "";
}
that._textAccessor(data);
that._accessor(value !== undefined ? value : that._text(data), idx);
that._selectedValue = that._accessor();
that.current(li.addClass(SELECTED));
if (that._optionID) {
that._current.attr("aria-selected", true);
}
}
}
return data;
},
_triggerEvents: function() {
if (!this.popup.visible()) {
this._triggerCascade();
this._change();
}
},
_mobile: function() {
var that = this,
popup = that.popup,
root = popup.element.parents(".km-root").eq(0);
if (root.length && os) {
popup.options.animation.open.effects = (os.android || os.meego) ? "fadeIn" : (os.ios || os.wp) ? "slideIn:up" : popup.options.animation.open.effects;
}
},
_filterHeader: function() {
var icon;
var options = this.options;
var filterEnalbed = options.filter !== "none";
if (this.filterInput) {
this.filterInput
.off(ns)
.parent()
.remove();
this.filterInput = null;
}
if (filterEnalbed) {
icon = 'select ';
this.filterInput = $(' select select this._values.length;
},
_select: function(li) {
var that = this,
values = that._values,
dataItem,
idx;
if (!that._allowSelection()) {
return;
}
if (!isNaN(li)) {
idx = li;
that.ul[0].children[idx].style.display = "none";
} else {
idx = li.hide().data("idx");
}
that.element[0].children[idx].selected = true;
dataItem = that.dataSource.view()[idx];
that.tagList.append(that.tagTemplate(dataItem));
that._dataItems.push(dataItem);
values.push(that._dataValue(dataItem));
that._visibleItems -= 1;
that.currentTag(null);
that._placeholder();
that._height(that._visibleItems);
if (that._state === FILTER) {
that._state = ACCEPT;
}
},
_unselect: function(tag) {
var that = this,
index = tag.index(),
dataItem, value,
options, option, length;
tag.remove();
that.currentTag(null);
that._values.splice(index, 1);
dataItem = that._dataItems.splice(index, 1)[0];
value = that._dataValue(dataItem);
index = that._index(value);
if (index !== -1) {
$(that.ul[0].children[index]).show();
that.element[0].children[index].selected = false;
that._visibleItems += 1;
that._height(that._visibleItems);
} else {
index = that.dataSource.view().length;
options = that.element[0].children;
length = options.length;
for (; index < length; index++) {
option = options[index];
if (option.value == value) {
option.selected = false;
break;
}
}
}
that._placeholder();
},
_template: function() {
var that = this,
options = that.options,
itemTemplate = options.itemTemplate,
tagTemplate = options.tagTemplate,
hasDataSource = options.dataSource,
textTemplate;
if (that.element[0].length && !hasDataSource) {
options.dataTextField = options.dataTextField || "text";
options.dataValueField = options.dataValueField || "value";
}
textTemplate = kendo.template("#:" + kendo.expr(options.dataTextField, "data") + "#", { useWithBlock: false });
itemTemplate = itemTemplate ? kendo.template(itemTemplate) : textTemplate;
tagTemplate = tagTemplate ? kendo.template(tagTemplate) : textTemplate;
that.itemTemplate = function(data, idx, hide) {
return '' + itemTemplate(data) + ' ';
};
that.tagTemplate = function(data) {
return '' + tagTemplate(data) + ' delete
').insertBefore(element);
}
that.wrapper = wrapper.addClass(element[0].className).css("display", "");
that._innerWrapper = $(wrapper[0].firstChild);
}
});
function compare(a, b) {
var length;
if ((a === null && b !== null) || (a !== null && b === null)) {
return false;
}
length = a.length;
if (length !== b.length) {
return false;
}
while (length--) {
if (a[length] !== b[length]) {
return false;
}
}
return true;
}
function first(ul) {
var item = ul.firstChild;
if (item && item.style.display === "none") {
item = sibling(item, NEXT);
}
if (item) {
return $(item);
}
return item;
}
function last(ul) {
var item = ul.lastChild;
if (item && item.style.display === "none") {
item = sibling(item, PREV);
}
if (item) {
return $(item);
}
return item;
}
function sibling(item, direction) {
item = item[direction];
if (item && item.style.display === "none") {
item = sibling(item, direction);
}
return item;
}
ui.plugin(MultiSelect);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
Widget = kendo.ui.Widget,
Draggable = kendo.ui.Draggable,
extend = $.extend,
format = kendo.format,
parse = kendo.parseFloat,
proxy = $.proxy,
isArray = $.isArray,
math = Math,
support = kendo.support,
pointers = support.pointers,
msPointers = support.msPointers,
CHANGE = "change",
SLIDE = "slide",
NS = ".slider",
MOUSE_DOWN = "touchstart" + NS + " mousedown" + NS,
TRACK_MOUSE_DOWN = pointers ? "pointerdown" + NS : (msPointers ? "MSPointerDown" + NS : MOUSE_DOWN),
MOUSE_UP = "touchend" + NS + " mouseup" + NS,
TRACK_MOUSE_UP = pointers ? "pointerup" : (msPointers ? "MSPointerUp" + NS : MOUSE_UP),
MOVE_SELECTION = "moveSelection",
KEY_DOWN = "keydown" + NS,
CLICK = "click" + NS,
MOUSE_OVER = "mouseover" + NS,
FOCUS = "focus" + NS,
BLUR = "blur" + NS,
DRAG_HANDLE = ".k-draghandle",
TRACK_SELECTOR = ".k-slider-track",
TICK_SELECTOR = ".k-tick",
STATE_SELECTED = "k-state-selected",
STATE_FOCUSED = "k-state-focused",
STATE_DEFAULT = "k-state-default",
STATE_DISABLED = "k-state-disabled",
PRECISION = 3,
DISABLED = "disabled",
UNDEFINED = "undefined",
TABINDEX = "tabindex",
getTouches = kendo.getTouches;
var SliderBase = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
options = that.options;
that._distance = round(options.max - options.min);
that._isHorizontal = options.orientation == "horizontal";
that._isRtl = that._isHorizontal && kendo.support.isRtl(element);
that._position = that._isHorizontal ? "left" : "bottom";
that._sizeFn = that._isHorizontal ? "width" : "height";
that._outerSize = that._isHorizontal ? "outerWidth" : "outerHeight";
options.tooltip.format = options.tooltip.enabled ? options.tooltip.format || "{0}" : "{0}";
that._createHtml();
that.wrapper = that.element.closest(".k-slider");
that._trackDiv = that.wrapper.find(TRACK_SELECTOR);
that._setTrackDivWidth();
that._maxSelection = that._trackDiv[that._sizeFn]();
that._sliderItemsInit();
that._tabindex(that.wrapper.find(DRAG_HANDLE));
that[options.enabled ? "enable" : "disable"]();
var rtlDirectionSign = kendo.support.isRtl(that.wrapper) ? -1 : 1;
that._keyMap = {
37: step(-1 * rtlDirectionSign * options.smallStep), // left arrow
40: step(-options.smallStep), // down arrow
39: step(+1 * rtlDirectionSign * options.smallStep), // right arrow
38: step(+options.smallStep), // up arrow
35: setValue(options.max), // end
36: setValue(options.min), // home
33: step(+options.largeStep), // page up
34: step(-options.largeStep) // page down
};
kendo.notify(that);
},
events: [
CHANGE,
SLIDE
],
options: {
enabled: true,
min: 0,
max: 10,
smallStep: 1,
largeStep: 5,
orientation: "horizontal",
tickPlacement: "both",
tooltip: { enabled: true, format: "{0}" }
},
_resize: function() {
this._setTrackDivWidth();
this.wrapper.find(".k-slider-items").remove();
this._maxSelection = this._trackDiv[this._sizeFn]();
this._sliderItemsInit();
this._refresh();
},
_sliderItemsInit: function() {
var that = this,
options = that.options;
var sizeBetweenTicks = that._maxSelection / ((options.max - options.min) / options.smallStep);
var pixelWidths = that._calculateItemsWidth(math.floor(that._distance / options.smallStep));
if (options.tickPlacement != "none" && sizeBetweenTicks >= 2) {
that._trackDiv.before(createSliderItems(options, that._distance));
that._setItemsWidth(pixelWidths);
that._setItemsTitle();
}
that._calculateSteps(pixelWidths);
if (options.tickPlacement != "none" && sizeBetweenTicks >= 2 &&
options.largeStep >= options.smallStep) {
that._setItemsLargeTick();
}
},
getSize: function() {
return kendo.dimensions(this.wrapper);
},
_setTrackDivWidth: function() {
var that = this,
trackDivPosition = parseFloat(that._trackDiv.css(that._isRtl ? "right" : that._position), 10) * 2;
that._trackDiv[that._sizeFn]((that.wrapper[that._sizeFn]() - 2) - trackDivPosition);
},
_setItemsWidth: function(pixelWidths) {
var that = this,
options = that.options,
first = 0,
last = pixelWidths.length - 1,
items = that.wrapper.find(TICK_SELECTOR),
i,
paddingTop = 0,
bordersWidth = 2,
count = items.length,
selection = 0;
for (i = 0; i < count - 2; i++) {
$(items[i + 1])[that._sizeFn](pixelWidths[i]);
}
if (that._isHorizontal) {
$(items[first]).addClass("k-first")[that._sizeFn](pixelWidths[last - 1]);
$(items[last]).addClass("k-last")[that._sizeFn](pixelWidths[last]);
} else {
$(items[last]).addClass("k-first")[that._sizeFn](pixelWidths[last]);
$(items[first]).addClass("k-last")[that._sizeFn](pixelWidths[last - 1]);
}
if (that._distance % options.smallStep !== 0 && !that._isHorizontal) {
for (i = 0; i < pixelWidths.length; i++) {
selection += pixelWidths[i];
}
paddingTop = that._maxSelection - selection;
paddingTop += parseFloat(that._trackDiv.css(that._position), 10) + bordersWidth;
that.wrapper.find(".k-slider-items").css("padding-top", paddingTop);
}
},
_setItemsTitle: function() {
var that = this,
options = that.options,
items = that.wrapper.find(TICK_SELECTOR),
titleNumber = options.min,
count = items.length,
i = that._isHorizontal && !that._isRtl ? 0 : count - 1,
limit = that._isHorizontal && !that._isRtl ? count : -1,
increment = that._isHorizontal && !that._isRtl ? 1 : -1;
for (; i - limit !== 0 ; i += increment) {
$(items[i]).attr("title", format(options.tooltip.format, round(titleNumber)));
titleNumber += options.smallStep;
}
},
_setItemsLargeTick: function() {
var that = this,
options = that.options,
items = that.wrapper.find(TICK_SELECTOR),
i = 0, item, value;
if (removeFraction(options.largeStep) % removeFraction(options.smallStep) === 0 || that._distance / options.largeStep >= 3) {
if (!that._isHorizontal && !that._isRtl) {
items = $.makeArray(items).reverse();
}
for (i = 0; i < items.length; i++) {
item = $(items[i]);
value = that._values[i];
if (removeFraction(value) % removeFraction(options.smallStep) === 0 && removeFraction(value) % removeFraction(options.largeStep) === 0) {
item.addClass("k-tick-large")
.html("" + item.attr("title") + " ");
if (i !== 0 && i !== items.length - 1) {
item.css("line-height", item[that._sizeFn]() + "px");
}
}
}
}
},
_calculateItemsWidth: function(itemsCount) {
var that = this,
options = that.options,
trackDivSize = parseFloat(that._trackDiv.css(that._sizeFn)) + 1,
pixelStep = trackDivSize / that._distance,
itemWidth,
pixelWidths,
i;
if ((that._distance / options.smallStep) - math.floor(that._distance / options.smallStep) > 0) {
trackDivSize -= ((that._distance % options.smallStep) * pixelStep);
}
itemWidth = trackDivSize / itemsCount;
pixelWidths = [];
for (i = 0; i < itemsCount - 1; i++) {
pixelWidths[i] = itemWidth;
}
pixelWidths[itemsCount - 1] = pixelWidths[itemsCount] = itemWidth / 2;
return that._roundWidths(pixelWidths);
},
_roundWidths: function(pixelWidthsArray) {
var balance = 0,
count = pixelWidthsArray.length,
i;
for (i = 0; i < count; i++) {
balance += (pixelWidthsArray[i] - math.floor(pixelWidthsArray[i]));
pixelWidthsArray[i] = math.floor(pixelWidthsArray[i]);
}
balance = math.round(balance);
return this._addAdditionalSize(balance, pixelWidthsArray);
},
_addAdditionalSize: function(additionalSize, pixelWidthsArray) {
if (additionalSize === 0) {
return pixelWidthsArray;
}
//set step size
var step = parseFloat(pixelWidthsArray.length - 1) / parseFloat(additionalSize == 1 ? additionalSize : additionalSize - 1),
i;
for (i = 0; i < additionalSize; i++) {
pixelWidthsArray[parseInt(math.round(step * i), 10)] += 1;
}
return pixelWidthsArray;
},
_calculateSteps: function(pixelWidths) {
var that = this,
options = that.options,
val = options.min,
selection = 0,
itemsCount = math.ceil(that._distance / options.smallStep),
i = 1,
lastItem;
itemsCount += (that._distance / options.smallStep) % 1 === 0 ? 1 : 0;
pixelWidths.splice(0, 0, pixelWidths[itemsCount - 2] * 2);
pixelWidths.splice(itemsCount -1, 1, pixelWidths.pop() * 2);
that._pixelSteps = [selection];
that._values = [val];
if (itemsCount === 0) {
return;
}
while (i < itemsCount) {
selection += (pixelWidths[i - 1] + pixelWidths[i]) / 2;
that._pixelSteps[i] = selection;
val += options.smallStep;
that._values[i] = round(val);
i++;
}
lastItem = that._distance % options.smallStep === 0 ? itemsCount - 1 : itemsCount;
that._pixelSteps[lastItem] = that._maxSelection;
that._values[lastItem] = options.max;
if (that._isRtl) {
that._pixelSteps.reverse();
that._values.reverse();
}
},
_getValueFromPosition: function(mousePosition, dragableArea) {
var that = this,
options = that.options,
step = math.max(options.smallStep * (that._maxSelection / that._distance), 0),
position = 0,
halfStep = (step / 2),
i;
if (that._isHorizontal) {
position = mousePosition - dragableArea.startPoint;
if (that._isRtl) {
position = that._maxSelection - position;
}
} else {
position = dragableArea.startPoint - mousePosition;
}
if (that._maxSelection - ((parseInt(that._maxSelection % step, 10) - 3) / 2) < position) {
return options.max;
}
for (i = 0; i < that._pixelSteps.length; i++) {
if (math.abs(that._pixelSteps[i] - position) - 1 <= halfStep) {
return round(that._values[i]);
}
}
},
_getFormattedValue: function(val, drag) {
var that = this,
html = "",
tooltip = that.options.tooltip,
tooltipTemplate,
selectionStart,
selectionEnd;
if (isArray(val)) {
selectionStart = val[0];
selectionEnd = val[1];
} else if (drag && drag.type) {
selectionStart = drag.selectionStart;
selectionEnd = drag.selectionEnd;
}
if (drag) {
tooltipTemplate = drag.tooltipTemplate;
}
if (!tooltipTemplate && tooltip.template) {
tooltipTemplate = kendo.template(tooltip.template);
}
if (isArray(val) || (drag && drag.type)) {
if (tooltipTemplate) {
html = tooltipTemplate({
selectionStart: selectionStart,
selectionEnd: selectionEnd
});
} else {
selectionStart = format(tooltip.format, selectionStart);
selectionEnd = format(tooltip.format, selectionEnd);
html = selectionStart + " - " + selectionEnd;
}
} else {
if (drag) {
drag.val = val;
}
if (tooltipTemplate) {
html = tooltipTemplate({
value: val
});
} else {
html = format(tooltip.format, val);
}
}
return html;
},
_getDraggableArea: function() {
var that = this,
offset = kendo.getOffset(that._trackDiv);
return {
startPoint: that._isHorizontal ? offset.left : offset.top + that._maxSelection,
endPoint: that._isHorizontal ? offset.left + that._maxSelection : offset.top
};
},
_createHtml: function() {
var that = this,
element = that.element,
options = that.options,
inputs = element.find("input");
if (inputs.length == 2) {
inputs.eq(0).prop("value", formatValue(options.selectionStart));
inputs.eq(1).prop("value", formatValue(options.selectionEnd));
} else {
element.prop("value", formatValue(options.value));
}
element.wrap(createWrapper(options, element, that._isHorizontal)).hide();
if (options.showButtons) {
element.before(createButton(options, "increase", that._isHorizontal))
.before(createButton(options, "decrease", that._isHorizontal));
}
element.before(createTrack(options, element));
},
_focus: function(e) {
var that = this,
target = e.target,
val = that.value(),
drag = that._drag;
if (!drag) {
if (target == that.wrapper.find(DRAG_HANDLE).eq(0)[0]) {
drag = that._firstHandleDrag;
that._activeHandle = 0;
} else {
drag = that._lastHandleDrag;
that._activeHandle = 1;
}
val = val[that._activeHandle];
}
$(target).addClass(STATE_FOCUSED + " " + STATE_SELECTED);
if (drag) {
that._activeHandleDrag = drag;
drag.selectionStart = that.options.selectionStart;
drag.selectionEnd = that.options.selectionEnd;
drag._updateTooltip(val);
}
},
_focusWithMouse: function(target) {
target = $(target);
var that = this,
idx = target.is(DRAG_HANDLE) ? target.index() : 0;
window.setTimeout(function(){
that.wrapper.find(DRAG_HANDLE)[idx == 2 ? 1 : 0].focus();
}, 1);
that._setTooltipTimeout();
},
_blur: function(e) {
var that = this,
drag = that._activeHandleDrag;
$(e.target).removeClass(STATE_FOCUSED + " " + STATE_SELECTED);
if (drag) {
drag._removeTooltip();
delete that._activeHandleDrag;
delete that._activeHandle;
}
},
_setTooltipTimeout: function() {
var that = this;
that._tooltipTimeout = window.setTimeout(function(){
var drag = that._drag || that._activeHandleDrag;
if (drag) {
drag._removeTooltip();
}
}, 300);
},
_clearTooltipTimeout: function() {
var that = this;
window.clearTimeout(this._tooltipTimeout);
var drag = that._drag || that._activeHandleDrag;
if (drag && drag.tooltipDiv) {
drag.tooltipDiv.stop(true, false).css("opacity", 1);
}
}
});
function createWrapper (options, element, isHorizontal) {
var orientationCssClass = isHorizontal ? " k-slider-horizontal" : " k-slider-vertical",
style = options.style ? options.style : element.attr("style"),
cssClasses = element.attr("class") ? (" " + element.attr("class")) : "",
tickPlacementCssClass = "";
if (options.tickPlacement == "bottomRight") {
tickPlacementCssClass = " k-slider-bottomright";
} else if (options.tickPlacement == "topLeft") {
tickPlacementCssClass = " k-slider-topleft";
}
style = style ? " style='" + style + "'" : "";
return "";
}
function createButton (options, type, isHorizontal) {
var buttonCssClass = "";
if (type == "increase") {
buttonCssClass = isHorizontal ? "k-i-arrow-e" : "k-i-arrow-n";
} else {
buttonCssClass = isHorizontal ? "k-i-arrow-w" : "k-i-arrow-s";
}
return "" + options[type + "ButtonTitle"] + " ",
count = math.floor(round(distance / options.smallStep)) + 1,
i;
for(i = 0; i < count; i++) {
result += " ";
}
result += " ";
return result;
}
function createTrack (options, element) {
var dragHandleCount = element.is("input") ? 1 : 2,
firstDragHandleTitle = dragHandleCount == 2 ? options.leftDragHandleTitle : options.dragHandleTitle;
return "
" +
"
Drag " +
(dragHandleCount > 1 ? "
Drag " : "") +
"
").appendTo(document.body);
html = owner._getFormattedValue(that.val || owner.value(), that);
if (!that.type) {
colloutCssClass = "k-callout-" + (owner._isHorizontal ? 's' : 'e');
that.tooltipInnerDiv = "
";
html += that.tooltipInnerDiv;
}
that.tooltipDiv.html(html);
that._scrollOffset = {
top: wnd.scrollTop(),
left: wnd.scrollLeft()
};
that.moveTooltip();
},
drag: function (e) {
var that = this,
owner = that.owner,
x = e.x.location,
y = e.y.location,
startPoint = that.dragableArea.startPoint,
endPoint = that.dragableArea.endPoint,
slideParams;
e.preventDefault();
if (owner._isHorizontal) {
if (owner._isRtl) {
that.val = that.constrainValue(x, startPoint, endPoint, x < endPoint);
} else {
that.val = that.constrainValue(x, startPoint, endPoint, x >= endPoint);
}
} else {
that.val = that.constrainValue(y, endPoint, startPoint, y <= endPoint);
}
if (that.oldVal != that.val) {
that.oldVal = that.val;
if (that.type) {
if (that.type == "firstHandle") {
if (that.val < that.selectionEnd) {
that.selectionStart = that.val;
} else {
that.selectionStart = that.selectionEnd = that.val;
}
} else {
if (that.val > that.selectionStart) {
that.selectionEnd = that.val;
} else {
that.selectionStart = that.selectionEnd = that.val;
}
}
slideParams = {
values: [that.selectionStart, that.selectionEnd],
value: [that.selectionStart, that.selectionEnd]
};
} else {
slideParams = { value: that.val };
}
owner.trigger(SLIDE, slideParams);
}
that._updateTooltip(that.val);
},
_updateTooltip: function(val) {
var that = this,
options = that.options,
tooltip = options.tooltip,
html = "";
if (!tooltip.enabled) {
return;
}
if (!that.tooltipDiv) {
that._createTooltip();
}
html = that.owner._getFormattedValue(round(val), that);
if (!that.type) {
html += that.tooltipInnerDiv;
}
that.tooltipDiv.html(html);
that.moveTooltip();
},
dragcancel: function() {
this.owner._refresh();
$(document.documentElement).css("cursor", "");
return this._end();
},
dragend: function() {
var that = this,
owner = that.owner;
$(document.documentElement).css("cursor", "");
if (that.type) {
owner._update(that.selectionStart, that.selectionEnd);
} else {
owner._update(that.val);
that.draggable.userEvents._disposeAll();
}
return that._end();
},
_end: function() {
var that = this,
owner = that.owner;
owner._focusWithMouse(that.element);
owner.element.on(MOUSE_OVER);
return false;
},
_removeTooltip: function(noAnimation) {
var that = this,
owner = that.owner;
if (that.tooltipDiv && owner.options.tooltip.enabled && owner.options.enabled) {
if (noAnimation) {
that.tooltipDiv.remove();
that.tooltipDiv = null;
} else {
that.tooltipDiv.fadeOut("slow", function(){
$(this).remove();
that.tooltipDiv = null;
});
}
}
},
moveTooltip: function () {
var that = this,
owner = that.owner,
top = 0,
left = 0,
element = that.element,
offset = kendo.getOffset(element),
margin = 8,
viewport = $(window),
callout = that.tooltipDiv.find(".k-callout"),
width = that.tooltipDiv.outerWidth(),
height = that.tooltipDiv.outerHeight(),
dragHandles, sdhOffset, diff, anchorSize;
if (that.type) {
dragHandles = owner.wrapper.find(DRAG_HANDLE);
offset = kendo.getOffset(dragHandles.eq(0));
sdhOffset = kendo.getOffset(dragHandles.eq(1));
if (owner._isHorizontal) {
top = sdhOffset.top;
left = offset.left + ((sdhOffset.left - offset.left) / 2);
} else {
top = offset.top + ((sdhOffset.top - offset.top) / 2);
left = sdhOffset.left;
}
anchorSize = dragHandles.eq(0).outerWidth() + 2 * margin;
} else {
top = offset.top;
left = offset.left;
anchorSize = element.outerWidth() + 2 * margin;
}
if (owner._isHorizontal) {
left -= parseInt((width - element[owner._outerSize]()) / 2, 10);
top -= height + callout.height() + margin;
} else {
top -= parseInt((height - element[owner._outerSize]()) / 2, 10);
left -= width + callout.width() + margin;
}
if (owner._isHorizontal) {
diff = that._flip(top, height, anchorSize, viewport.outerHeight() + that._scrollOffset.top);
top += diff;
left += that._fit(left, width, viewport.outerWidth() + that._scrollOffset.left);
} else {
diff = that._flip(left, width, anchorSize, viewport.outerWidth() + that._scrollOffset.left);
top += that._fit(top, height, viewport.outerHeight() + that._scrollOffset.top);
left += diff;
}
if (diff > 0 && callout) {
callout.removeClass();
callout.addClass("k-callout k-callout-" + (owner._isHorizontal ? "n" : "w"));
}
that.tooltipDiv.css({ top: top, left: left });
},
_fit: function(position, size, viewPortEnd) {
var output = 0;
if (position + size > viewPortEnd) {
output = viewPortEnd - (position + size);
}
if (position < 0) {
output = -position;
}
return output;
},
_flip: function(offset, size, anchorSize, viewPortEnd) {
var output = 0;
if (offset + size > viewPortEnd) {
output += -(anchorSize + size);
}
if (offset + output < 0) {
output += anchorSize + size;
}
return output;
},
constrainValue: function (position, min, max, maxOverflow) {
var that = this,
val = 0;
if (min < position && position < max) {
val = that.owner._getValueFromPosition(position, that.dragableArea);
} else {
if (maxOverflow ) {
val = that.options.max;
} else {
val = that.options.min;
}
}
return val;
}
};
kendo.ui.plugin(Slider);
var RangeSlider = SliderBase.extend({
init: function(element, options) {
var that = this,
inputs = $(element).find("input"),
firstInput = inputs.eq(0)[0],
secondInput = inputs.eq(1)[0];
firstInput.type = "text";
secondInput.type = "text";
options = extend({}, {
selectionStart: parseAttr(firstInput, "value"),
min: parseAttr(firstInput, "min"),
max: parseAttr(firstInput, "max"),
smallStep: parseAttr(firstInput, "step")
}, {
selectionEnd: parseAttr(secondInput, "value"),
min: parseAttr(secondInput, "min"),
max: parseAttr(secondInput, "max"),
smallStep: parseAttr(secondInput, "step")
}, options);
if (options && options.enabled === undefined) {
options.enabled = !inputs.is("[disabled]");
}
SliderBase.fn.init.call(that, element, options);
options = that.options;
if (!defined(options.selectionStart) || options.selectionStart === null) {
options.selectionStart = options.min;
inputs.eq(0).prop("value", formatValue(options.min));
}
if (!defined(options.selectionEnd) || options.selectionEnd === null) {
options.selectionEnd = options.max;
inputs.eq(1).prop("value", formatValue(options.max));
}
var dragHandles = that.wrapper.find(DRAG_HANDLE);
new RangeSlider.Selection(dragHandles, that, options);
that._firstHandleDrag = new Slider.Drag(dragHandles.eq(0), "firstHandle", that, options);
that._lastHandleDrag = new Slider.Drag(dragHandles.eq(1), "lastHandle" , that, options);
},
options: {
name: "RangeSlider",
leftDragHandleTitle: "drag",
rightDragHandleTitle: "drag",
tooltip: { format: "{0:#,#.##}" },
selectionStart: null,
selectionEnd: null
},
enable: function (enable) {
var that = this,
options = that.options,
clickHandler;
that.disable();
if (enable === false) {
return;
}
that.wrapper
.removeClass(STATE_DISABLED)
.addClass(STATE_DEFAULT);
that.wrapper.find("input").removeAttr(DISABLED);
clickHandler = function (e) {
var touch = getTouches(e)[0];
if (!touch) {
return;
}
var mousePosition = that._isHorizontal ? touch.location.pageX : touch.location.pageY,
dragableArea = that._getDraggableArea(),
val = that._getValueFromPosition(mousePosition, dragableArea),
target = $(e.target),
from, to, drag;
if (target.hasClass("k-draghandle")) {
that.wrapper.find("." + STATE_FOCUSED).removeClass(STATE_FOCUSED + " " + STATE_SELECTED);
target.addClass(STATE_FOCUSED + " " + STATE_SELECTED);
return;
}
if (val < options.selectionStart) {
from = val;
to = options.selectionEnd;
drag = that._firstHandleDrag;
} else if (val > that.selectionEnd) {
from = options.selectionStart;
to = val;
drag = that._lastHandleDrag;
} else {
if (val - options.selectionStart <= options.selectionEnd - val) {
from = val;
to = options.selectionEnd;
drag = that._firstHandleDrag;
} else {
from = options.selectionStart;
to = val;
drag = that._lastHandleDrag;
}
}
drag.dragstart(e);
that._setValueInRange(from, to);
that._focusWithMouse(drag.element);
};
that.wrapper
.find(TICK_SELECTOR + ", " + TRACK_SELECTOR)
.on(TRACK_MOUSE_DOWN, clickHandler)
.end()
.on(TRACK_MOUSE_DOWN, function() {
$(document.documentElement).one("selectstart", kendo.preventDefault);
})
.on(TRACK_MOUSE_UP, function() {
if (that._activeDragHandle) {
that._activeDragHandle._end();
}
});
that.wrapper
.find(DRAG_HANDLE)
.attr(TABINDEX, 0)
.on(MOUSE_UP, function () {
that._setTooltipTimeout();
})
.on(CLICK, function (e) {
that._focusWithMouse(e.target);
e.preventDefault();
})
.on(FOCUS, proxy(that._focus, that))
.on(BLUR, proxy(that._blur, that));
that.wrapper.find(DRAG_HANDLE)
.off(KEY_DOWN, kendo.preventDefault)
.eq(0).on(KEY_DOWN,
proxy(function(e) {
this._keydown(e, "firstHandle");
}, that)
)
.end()
.eq(1).on(KEY_DOWN,
proxy(function(e) {
this._keydown(e, "lastHandle");
}, that)
);
that.options.enabled = true;
},
disable: function () {
var that = this;
that.wrapper
.removeClass(STATE_DEFAULT)
.addClass(STATE_DISABLED);
that.wrapper.find("input").prop(DISABLED, DISABLED);
that.wrapper
.find(TICK_SELECTOR + ", " + TRACK_SELECTOR).off(TRACK_MOUSE_DOWN).off(TRACK_MOUSE_UP);
that.wrapper
.find(DRAG_HANDLE)
.attr(TABINDEX, -1)
.off(MOUSE_UP)
.off(KEY_DOWN)
.off(CLICK)
.off(FOCUS)
.off(BLUR);
that.options.enabled = false;
},
_keydown: function (e, handle) {
var that = this,
selectionStartValue = that.options.selectionStart,
selectionEndValue = that.options.selectionEnd,
dragSelectionStart,
dragSelectionEnd,
activeHandleDrag;
if (e.keyCode in that._keyMap) {
that._clearTooltipTimeout();
if (handle == "firstHandle") {
activeHandleDrag = that._activeHandleDrag = that._firstHandleDrag;
selectionStartValue = that._keyMap[e.keyCode](selectionStartValue);
if (selectionStartValue > selectionEndValue) {
selectionEndValue = selectionStartValue;
}
} else {
activeHandleDrag = that._activeHandleDrag = that._lastHandleDrag;
selectionEndValue = that._keyMap[e.keyCode](selectionEndValue);
if (selectionStartValue > selectionEndValue) {
selectionStartValue = selectionEndValue;
}
}
that._setValueInRange(selectionStartValue, selectionEndValue);
dragSelectionStart = Math.max(selectionStartValue, that.options.selectionStart);
dragSelectionEnd = Math.min(selectionEndValue, that.options.selectionEnd);
activeHandleDrag.selectionEnd = Math.max(dragSelectionEnd, that.options.selectionStart);
activeHandleDrag.selectionStart = Math.min(dragSelectionStart, that.options.selectionEnd);
activeHandleDrag._updateTooltip(that.value()[that._activeHandle]);
e.preventDefault();
}
},
_update: function (selectionStart, selectionEnd) {
var that = this,
values = that.value();
var change = values[0] != selectionStart || values[1] != selectionEnd;
that.value([selectionStart, selectionEnd]);
if (change) {
that.trigger(CHANGE, {
values: [selectionStart, selectionEnd],
value: [selectionStart, selectionEnd]
});
}
},
value: function(value) {
if (value && value.length) {
return this._value(value[0], value[1]);
} else {
return this._value();
}
},
_value: function(start, end) {
var that = this,
options = that.options,
selectionStart = options.selectionStart,
selectionEnd = options.selectionEnd;
if (isNaN(start) && isNaN(end)) {
return [selectionStart, selectionEnd];
} else {
start = round(start);
end = round(end);
}
if (start >= options.min && start <= options.max &&
end >= options.min && end <= options.max && start <= end) {
if (selectionStart != start || selectionEnd != end) {
that.element.find("input")
.eq(0).prop("value", formatValue(start))
.end()
.eq(1).prop("value", formatValue(end));
options.selectionStart = start;
options.selectionEnd = end;
that._refresh();
that._refreshAriaAttr(start, end);
}
}
},
values: function (start, end) {
if (isArray(start)) {
return this._value(start[0], start[1]);
} else {
return this._value(start, end);
}
},
_refresh: function() {
var that = this,
options = that.options;
that.trigger(MOVE_SELECTION, {
values: [options.selectionStart, options.selectionEnd],
value: [options.selectionStart, options.selectionEnd]
});
if (options.selectionStart == options.max && options.selectionEnd == options.max) {
that._setZIndex("firstHandle");
}
},
_refreshAriaAttr: function(start, end) {
var that = this,
dragHandles = that.wrapper.find(DRAG_HANDLE),
drag = that._activeHandleDrag,
formattedValue;
formattedValue = that._getFormattedValue([start, end], drag);
dragHandles.eq(0).attr("aria-valuenow", start);
dragHandles.eq(1).attr("aria-valuenow", end);
dragHandles.attr("aria-valuetext", formattedValue);
},
_setValueInRange: function (selectionStart, selectionEnd) {
var options = this.options;
selectionStart = math.max(math.min(selectionStart, options.max), options.min);
selectionEnd = math.max(math.min(selectionEnd, options.max), options.min);
if (selectionStart == options.max && selectionEnd == options.max) {
this._setZIndex("firstHandle");
}
this._update(math.min(selectionStart, selectionEnd), math.max(selectionStart, selectionEnd));
},
_setZIndex: function (type) {
this.wrapper.find(DRAG_HANDLE).each(function (index) {
$(this).css("z-index", type == "firstHandle" ? 1 - index : index);
});
},
destroy: function() {
var that = this;
Widget.fn.destroy.call(that);
that.wrapper.off(NS)
.find(TICK_SELECTOR + ", " + TRACK_SELECTOR).off(NS)
.end()
.find(DRAG_HANDLE).off(NS);
that._firstHandleDrag.draggable.destroy();
that._lastHandleDrag.draggable.destroy();
}
});
RangeSlider.Selection = function (dragHandles, that, options) {
function moveSelection(value) {
value = value || [];
var selectionStartValue = value[0] - options.min,
selectionEndValue = value[1] - options.min,
selectionStartIndex = math.ceil(round(selectionStartValue / options.smallStep)),
selectionEndIndex = math.ceil(round(selectionEndValue / options.smallStep)),
selectionStart = that._pixelSteps[selectionStartIndex],
selectionEnd = that._pixelSteps[selectionEndIndex],
halfHandle = parseInt(dragHandles.eq(0)[that._outerSize]() / 2, 10),
rtlCorrection = that._isRtl ? 2 : 0;
dragHandles.eq(0).css(that._position, selectionStart - halfHandle - rtlCorrection)
.end()
.eq(1).css(that._position, selectionEnd - halfHandle - rtlCorrection);
makeSelection(selectionStart, selectionEnd);
}
function makeSelection(selectionStart, selectionEnd) {
var selection,
selectionPosition,
selectionDiv = that._trackDiv.find(".k-slider-selection");
selection = math.abs(selectionStart - selectionEnd);
selectionDiv[that._sizeFn](selection);
if (that._isRtl) {
selectionPosition = math.max(selectionStart, selectionEnd);
selectionDiv.css("right", that._maxSelection - selectionPosition - 1);
} else {
selectionPosition = math.min(selectionStart, selectionEnd);
selectionDiv.css(that._position, selectionPosition - 1);
}
}
moveSelection(that.value());
that.bind([ CHANGE, SLIDE, MOVE_SELECTION ], function (e) {
moveSelection(e.values);
});
};
kendo.ui.plugin(RangeSlider);
})(window.kendo.jQuery);
(function($, parseInt, undefined){
// WARNING: removing the following jshint declaration and turning
// == into === to make JSHint happy will break functionality.
/*jshint eqnull:true */
var kendo = window.kendo,
Class = kendo.Class,
ui = kendo.ui,
Widget = ui.Widget,
KEYS = kendo.keys,
BACKGROUNDCOLOR = "background-color",
ITEMSELECTEDCLASS = "k-state-selected",
SIMPLEPALETTE = "000000,7f7f7f,880015,ed1c24,ff7f27,fff200,22b14c,00a2e8,3f48cc,a349a4,ffffff,c3c3c3,b97a57,ffaec9,ffc90e,efe4b0,b5e61d,99d9ea,7092be,c8bfe7",
WEBPALETTE = "FFFFFF,FFCCFF,FF99FF,FF66FF,FF33FF,FF00FF,CCFFFF,CCCCFF,CC99FF,CC66FF,CC33FF,CC00FF,99FFFF,99CCFF,9999FF,9966FF,9933FF,9900FF,FFFFCC,FFCCCC,FF99CC,FF66CC,FF33CC,FF00CC,CCFFCC,CCCCCC,CC99CC,CC66CC,CC33CC,CC00CC,99FFCC,99CCCC,9999CC,9966CC,9933CC,9900CC,FFFF99,FFCC99,FF9999,FF6699,FF3399,FF0099,CCFF99,CCCC99,CC9999,CC6699,CC3399,CC0099,99FF99,99CC99,999999,996699,993399,990099,FFFF66,FFCC66,FF9966,FF6666,FF3366,FF0066,CCFF66,CCCC66,CC9966,CC6666,CC3366,CC0066,99FF66,99CC66,999966,996666,993366,990066,FFFF33,FFCC33,FF9933,FF6633,FF3333,FF0033,CCFF33,CCCC33,CC9933,CC6633,CC3333,CC0033,99FF33,99CC33,999933,996633,993333,990033,FFFF00,FFCC00,FF9900,FF6600,FF3300,FF0000,CCFF00,CCCC00,CC9900,CC6600,CC3300,CC0000,99FF00,99CC00,999900,996600,993300,990000,66FFFF,66CCFF,6699FF,6666FF,6633FF,6600FF,33FFFF,33CCFF,3399FF,3366FF,3333FF,3300FF,00FFFF,00CCFF,0099FF,0066FF,0033FF,0000FF,66FFCC,66CCCC,6699CC,6666CC,6633CC,6600CC,33FFCC,33CCCC,3399CC,3366CC,3333CC,3300CC,00FFCC,00CCCC,0099CC,0066CC,0033CC,0000CC,66FF99,66CC99,669999,666699,663399,660099,33FF99,33CC99,339999,336699,333399,330099,00FF99,00CC99,009999,006699,003399,000099,66FF66,66CC66,669966,666666,663366,660066,33FF66,33CC66,339966,336666,333366,330066,00FF66,00CC66,009966,006666,003366,000066,66FF33,66CC33,669933,666633,663333,660033,33FF33,33CC33,339933,336633,333333,330033,00FF33,00CC33,009933,006633,003333,000033,66FF00,66CC00,669900,666600,663300,660000,33FF00,33CC00,339900,336600,333300,330000,00FF00,00CC00,009900,006600,003300,000000",
APPLY_CANCEL = {
apply : "Apply",
cancel : "Cancel"
},
NS = ".kendoColorTools",
CLICK_NS = "click" + NS,
KEYDOWN_NS = "keydown" + NS,
browser = kendo.support.browser,
isIE8 = browser.msie && browser.version < 9;
var ColorSelector = Widget.extend({
init: function(element, options) {
var that = this, ariaId;
Widget.fn.init.call(that, element, options);
element = that.element;
options = that.options;
that._value = options.value = parse(options.value);
that._tabIndex = element.attr("tabIndex") || 0;
ariaId = that._ariaId = options.ariaId;
if (ariaId) {
element.attr("aria-labelledby", ariaId);
}
if (options._standalone) {
that._triggerSelect = that._triggerChange;
}
},
options: {
name: "ColorSelector",
value: null,
_standalone: true
},
events: [
"change",
"select",
"cancel"
],
color: function(value) {
if (value !== undefined) {
this._value = parse(value);
this._updateUI(this._value);
}
return this._value;
},
value: function(color) {
color = this.color(color);
if (color) {
if (this.options.opacity) {
color = color.toCssRgba();
} else {
color = color.toCss();
}
}
return color || null;
},
enable: function(enable) {
if (arguments.length === 0) {
enable = true;
}
$(".k-disabled-overlay", this.wrapper).remove();
if (!enable) {
this.wrapper.append("
");
}
this._onEnable(enable);
},
_select: function(color, nohooks) {
var prev = this._value;
color = this.color(color);
if (!nohooks) {
this.element.trigger("change");
if (!color.equals(prev)) {
this.trigger("change", { value: this.value() });
} else if (!this._standalone) {
this.trigger("cancel");
}
}
},
_triggerSelect: function(color) {
triggerEvent(this, "select", color);
},
_triggerChange: function(color) {
triggerEvent(this, "change", color);
},
destroy: function() {
if (this.element) {
this.element.off(NS);
}
if (this.wrapper) {
this.wrapper.off(NS).find("*").off(NS);
}
this.wrapper = null;
Widget.fn.destroy.call(this);
},
_updateUI: $.noop,
_selectOnHide: function() {
return null;
},
_cancel: function() {
this.trigger("cancel");
}
});
function triggerEvent(self, type, color) {
color = parse(color);
if (color && !color.equals(self.color())) {
if (type == "change") {
// UI is already updated. setting _value directly
// rather than calling self.color(color) to avoid an
// endless loop.
self._value = color;
}
if (color.a != 1) {
color = color.toCssRgba();
} else {
color = color.toCss();
}
self.trigger(type, { value: color });
}
}
var ColorPalette = ColorSelector.extend({
init: function(element, options) {
var that = this;
ColorSelector.fn.init.call(that, element, options);
element = that.wrapper = that.element;
options = that.options;
var colors = options.palette;
if (colors == "websafe") {
colors = WEBPALETTE;
options.columns = 18;
} else if (colors == "basic") {
colors = SIMPLEPALETTE;
}
if (typeof colors == "string") {
colors = colors.split(",");
}
if ($.isArray(colors)) {
colors = $.map(colors, function(x) { return parse(x); });
}
that._selectedID = (options.ariaId || kendo.guid()) + "_selected";
element.addClass("k-widget k-colorpalette")
.attr("role", "grid")
.attr("aria-readonly", "true")
.append($(that._template({
colors : colors,
columns : options.columns,
tileSize : options.tileSize,
value : that._value,
id : options.ariaId
})))
.on(CLICK_NS, ".k-item", function(ev){
that._select($(ev.currentTarget).css(BACKGROUNDCOLOR));
})
.attr("tabIndex", that._tabIndex)
.on(KEYDOWN_NS, bind(that._keydown, that));
var tileSize = options.tileSize, width, height;
if (tileSize) {
if (/number|string/.test(typeof tileSize)) {
width = height = parseFloat(tileSize);
} else if (typeof tileSize == "object") {
width = parseFloat(tileSize.width);
height = parseFloat(tileSize.height);
} else {
throw new Error("Unsupported value for the 'tileSize' argument");
}
element.find(".k-item").css({ width: width, height: height });
}
},
focus: function(){
this.wrapper.focus();
},
options: {
name: "ColorPalette",
columns: 10,
tileSize: null,
palette: "basic"
},
_onEnable: function(enable) {
if (enable) {
this.wrapper.attr("tabIndex", this._tabIndex);
} else {
this.wrapper.removeAttr("tabIndex");
}
},
_keydown: function(e) {
var selected,
wrapper = this.wrapper,
items = wrapper.find(".k-item"),
current = items.filter("." + ITEMSELECTEDCLASS).get(0),
keyCode = e.keyCode;
if (keyCode == KEYS.LEFT) {
selected = relative(items, current, -1);
} else if (keyCode == KEYS.RIGHT) {
selected = relative(items, current, 1);
} else if (keyCode == KEYS.DOWN) {
selected = relative(items, current, this.options.columns);
} else if (keyCode == KEYS.UP) {
selected = relative(items, current, -this.options.columns);
} else if (keyCode == KEYS.ENTER) {
preventDefault(e);
if (current) {
this._select($(current).css(BACKGROUNDCOLOR));
}
} else if (keyCode == KEYS.ESC) {
this._cancel();
}
if (selected) {
preventDefault(e);
this._current(selected);
try {
var color = parse(selected.css(BACKGROUNDCOLOR));
this._triggerSelect(color);
} catch(ex) {}
}
},
_current: function(item) {
this.wrapper.find("." + ITEMSELECTEDCLASS)
.removeClass(ITEMSELECTEDCLASS)
.attr("aria-selected", false)
.removeAttr("id");
$(item)
.addClass(ITEMSELECTEDCLASS)
.attr("aria-selected", true)
.attr("id", this._selectedID);
this.element
.removeAttr("aria-activedescendant")
.attr("aria-activedescendant", this._selectedID);
},
_updateUI: function(color) {
var item = null;
this.wrapper.find(".k-item").each(function(){
var c = parse($(this).css(BACKGROUNDCOLOR));
if (c && c.equals(color)) {
item = this;
return false;
}
});
this._current(item);
},
_template: kendo.template(
'' +
'# for (var i = 0; i < colors.length; ++i) { #' +
'# var selected = colors[i].equals(value); #' +
'# if (i && i % columns == 0) { # # } #' +
'
'
)
});
var FlatColorPicker = ColorSelector.extend({
init: function(element, options) {
var that = this;
ColorSelector.fn.init.call(that, element, options);
options = that.options;
element = that.element;
that.wrapper = element.addClass("k-widget k-flatcolorpicker")
.append(that._template(options));
that._hueElements = $(".k-hsv-rectangle, .k-transparency-slider .k-slider-track", element);
that._selectedColor = $(".k-selected-color-display", element);
that._colorAsText = $("input.k-color-value", element);
that._sliders();
that._hsvArea();
that._updateUI(that._value || new _RGB(1, 0, 0, 1));
element
.find("input.k-color-value").on(KEYDOWN_NS, function(ev){
var input = this;
if (ev.keyCode == KEYS.ENTER) {
try {
var color = parse(input.value);
var val = that.color();
that._select(color, color.equals(val));
} catch(ex) {
$(input).addClass("k-state-error");
}
} else if (that.options.autoupdate) {
setTimeout(function(){
var color = parse(input.value, true);
if (color) {
that._updateUI(color, true);
}
}, 10);
}
}).end()
.on(CLICK_NS, ".k-controls button.apply", function(){
// calling select for the currently displayed
// color will trigger the "change" event.
that._select(that._getHSV());
})
.on(CLICK_NS, ".k-controls button.cancel", function(){
// but on cancel, we simply select the previous
// value (again, triggers "change" event).
that._updateUI(that.color());
that._cancel();
});
if (isIE8) {
// IE filters require absolute URLs
that._applyIEFilter();
}
},
destroy: function() {
this._hueSlider.destroy();
if (this._opacitySlider) {
this._opacitySlider.destroy();
}
this._hueSlider = this._opacitySlider = this._hsvRect = this._hsvHandle =
this._hueElements = this._selectedColor = this._colorAsText = null;
ColorSelector.fn.destroy.call(this);
},
options: {
name : "FlatColorPicker",
opacity : false,
buttons : false,
input : true,
preview : true,
autoupdate : true,
messages : APPLY_CANCEL
},
_applyIEFilter: function() {
var track = this.element.find(".k-hue-slider .k-slider-track")[0],
url = track.currentStyle.backgroundImage;
url = url.replace(/^url\([\'\"]?|[\'\"]?\)$/g, "");
track.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url + "', sizingMethod='scale')";
},
_sliders: function() {
var that = this,
element = that.element;
function hueChange(e) {
that._updateUI(that._getHSV(e.value, null, null, null));
}
that._hueSlider = element.find(".k-hue-slider").kendoSlider({
min: 0,
max: 359,
tickPlacement: "none",
showButtons: false,
slide: hueChange,
change: hueChange
}).data("kendoSlider");
function opacityChange(e) {
that._updateUI(that._getHSV(null, null, null, e.value / 100));
}
that._opacitySlider = element.find(".k-transparency-slider").kendoSlider({
min: 0,
max: 100,
tickPlacement: "none",
showButtons: false,
slide: opacityChange,
change: opacityChange
}).data("kendoSlider");
},
_hsvArea: function() {
var that = this,
element = that.element,
hsvRect = element.find(".k-hsv-rectangle"),
hsvHandle = hsvRect.find(".k-draghandle").attr("tabIndex", 0).on(KEYDOWN_NS, bind(that._keydown, that));
function update(x, y) {
var offset = this.offset,
dx = x - offset.left, dy = y - offset.top,
rw = this.width, rh = this.height;
dx = dx < 0 ? 0 : dx > rw ? rw : dx;
dy = dy < 0 ? 0 : dy > rh ? rh : dy;
that._svChange(dx / rw, 1 - dy / rh);
}
that._hsvEvents = new kendo.UserEvents(hsvRect, {
global: true,
press: function(e) {
this.offset = kendo.getOffset(hsvRect);
this.width = hsvRect.width();
this.height = hsvRect.height();
hsvHandle.focus();
update.call(this, e.x.location, e.y.location);
},
start: function() {
hsvRect.addClass("k-dragging");
hsvHandle.focus();
},
move: function(e) {
e.preventDefault();
update.call(this, e.x.location, e.y.location);
},
end: function() {
hsvRect.removeClass("k-dragging");
}
});
that._hsvRect = hsvRect;
that._hsvHandle = hsvHandle;
},
_onEnable: function(enable) {
this._hueSlider.enable(enable);
if (this._opacitySlider) {
this._opacitySlider.enable(enable);
}
this.wrapper.find("input").attr("disabled", !enable);
var handle = this._hsvRect.find(".k-draghandle");
if (enable) {
handle.attr("tabIndex", this._tabIndex);
} else {
handle.removeAttr("tabIndex");
}
},
_keydown: function(ev) {
var that = this;
function move(prop, d) {
var c = that._getHSV();
c[prop] += d * (ev.shiftKey ? 0.01 : 0.05);
if (c[prop] < 0) { c[prop] = 0; }
if (c[prop] > 1) { c[prop] = 1; }
that._updateUI(c);
preventDefault(ev);
}
function hue(d) {
var c = that._getHSV();
c.h += d * (ev.shiftKey ? 1 : 5);
if (c.h < 0) { c.h = 0; }
if (c.h > 359) { c.h = 359; }
that._updateUI(c);
preventDefault(ev);
}
switch (ev.keyCode) {
case KEYS.LEFT:
if (ev.ctrlKey) {
hue(-1);
} else {
move("s", -1);
}
break;
case KEYS.RIGHT:
if (ev.ctrlKey) {
hue(1);
} else {
move("s", 1);
}
break;
case KEYS.UP:
move(ev.ctrlKey && that._opacitySlider ? "a" : "v", 1);
break;
case KEYS.DOWN:
move(ev.ctrlKey && that._opacitySlider ? "a" : "v", -1);
break;
case KEYS.ENTER:
that._select(that._getHSV());
break;
case KEYS.F2:
that.wrapper.find("input.k-color-value").focus().select();
break;
case KEYS.ESC:
that._cancel();
break;
}
},
focus: function() {
this._hsvHandle.focus();
},
_getHSV: function(h, s, v, a) {
var rect = this._hsvRect,
width = rect.width(),
height = rect.height(),
handlePosition = this._hsvHandle.position();
if (h == null) {
h = this._hueSlider.value();
}
if (s == null) {
s = handlePosition.left / width;
}
if (v == null) {
v = 1 - handlePosition.top / height;
}
if (a == null) {
a = this._opacitySlider ? this._opacitySlider.value() / 100 : 1;
}
return new _HSV(h, s, v, a);
},
_svChange: function(s, v) {
var color = this._getHSV(null, s, v, null);
this._updateUI(color);
},
_updateUI: function(color, dontChangeInput) {
var that = this,
rect = that._hsvRect;
if (!color) {
return;
}
this._colorAsText.removeClass("k-state-error");
that._selectedColor.css(BACKGROUNDCOLOR, color.toDisplay());
if (!dontChangeInput) {
that._colorAsText.val(that._opacitySlider ? color.toCssRgba() : color.toCss());
}
that._triggerSelect(color);
color = color.toHSV();
that._hsvHandle.css({
// saturation is 0 on the left side, full (1) on the right
left: color.s * rect.width() + "px",
// value is 0 on the bottom, full on the top.
top: (1 - color.v) * rect.height() + "px"
});
that._hueElements.css(BACKGROUNDCOLOR, new _HSV(color.h, 1, 1, 1).toCss());
that._hueSlider.value(color.h);
if (that._opacitySlider) {
that._opacitySlider.value(100 * color.a);
}
},
_selectOnHide: function() {
return this.options.buttons ? null : this._getHSV();
},
_template: kendo.template(
'# if (preview) { #' +
'' +
'# } #' +
'' +
'#: messages.apply # #: messages.cancel #
' +
'# } #'
)
});
/* -----[ color utils ]----- */
function hex(n, width, pad) {
if (!pad) { pad = "0"; }
n = n.toString(16);
while (width > n.length) {
n = "0" + n;
}
return n;
}
function fixed(n) {
return parseFloat((+n).toFixed(3));
}
var Color = Class.extend({
toHSV: function() { return this; },
toRGB: function() { return this; },
toHex: function() { return this.toBytes().toHex(); },
toBytes: function() { return this; },
toCss: function() { return "#" + this.toHex(); },
toCssRgba: function() {
var rgb = this.toBytes();
return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + fixed(this.a) + ")";
},
toDisplay: function() {
if (isIE8) {
return this.toCss(); // no RGBA support; does it support any opacity in colors?
}
return this.toCssRgba();
},
equals: function(c) { return c === this || c !== null && this.toCssRgba() == parse(c).toCssRgba(); },
diff: function(c2) {
if (c2 == null) {
return NaN;
}
var c1 = this.toBytes();
c2 = c2.toBytes();
return Math.sqrt(Math.pow((c1.r - c2.r) * 0.30, 2) +
Math.pow((c1.g - c2.g) * 0.59, 2) +
Math.pow((c1.b - c2.b) * 0.11, 2));
},
clone: function() {
var c = this.toBytes();
if (c === this) {
c = new _Bytes(c.r, c.g, c.b, c.a);
}
return c;
}
});
var _RGB = Color.extend({
init: function(r, g, b, a) {
this.r = r; this.g = g; this.b = b; this.a = a;
},
toHSV: function() {
var min, max, delta, h, s, v;
var r = this.r, g = this.g, b = this.b;
min = Math.min(r, g, b);
max = Math.max(r, g, b);
v = max;
delta = max - min;
if (delta === 0) {
return new _HSV(0, 0, v, this.a);
}
if (max !== 0) {
s = delta / max;
if (r == max) {
h = (g - b) / delta;
} else if (g == max) {
h = 2 + (b - r) / delta;
} else {
h = 4 + (r - g) / delta;
}
h *= 60;
if (h < 0) {
h += 360;
}
} else {
s = 0;
h = -1;
}
return new _HSV(h, s, v, this.a);
},
toBytes: function() {
return new _Bytes(this.r * 255, this.g * 255, this.b * 255, this.a);
}
});
var _Bytes = _RGB.extend({
init: function(r, g, b, a) {
this.r = Math.round(r); this.g = Math.round(g); this.b = Math.round(b); this.a = a;
},
toRGB: function() {
return new _RGB(this.r / 255, this.g / 255, this.b / 255, this.a);
},
toHSV: function() {
return this.toRGB().toHSV();
},
toHex: function() {
return hex(this.r, 2) + hex(this.g, 2) + hex(this.b, 2);
},
toBytes: function() {
return this;
}
});
var _HSV = Color.extend({
init: function(h, s, v, a) {
this.h = h; this.s = s; this.v = v; this.a = a;
},
toRGB: function() {
var h = this.h, s = this.s, v = this.v;
var i, r, g, b, f, p, q, t;
if (s === 0) {
r = g = b = v;
} else {
h /= 60;
i = Math.floor(h);
f = h - i;
p = v * (1 - s);
q = v * (1 - s * f);
t = v * (1 - s * (1 - f));
switch (i) {
case 0 : r = v; g = t; b = p; break;
case 1 : r = q; g = v; b = p; break;
case 2 : r = p; g = v; b = t; break;
case 3 : r = p; g = q; b = v; break;
case 4 : r = t; g = p; b = v; break;
default : r = v; g = p; b = q; break;
}
}
return new _RGB(r, g, b, this.a);
},
toBytes: function() {
return this.toRGB().toBytes();
}
});
function parse(color, nothrow) {
if (color == null ||
color == "transparent" /* IE8 does this */)
{
return null;
}
if (color instanceof Color) {
return color;
}
var m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
if (m) {
return new _Bytes(parseInt(m[1], 16),
parseInt(m[2], 16),
parseInt(m[3], 16), 1);
}
m = /^#?([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(color);
if (m) {
return new _Bytes(parseInt(m[1] + m[1], 16),
parseInt(m[2] + m[2], 16),
parseInt(m[3] + m[3], 16), 1);
}
m = /^rgb\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*\)/.exec(color);
if (m) {
return new _Bytes(parseInt(m[1], 10),
parseInt(m[2], 10),
parseInt(m[3], 10), 1);
}
m = /^rgba\(\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9.]+)\s*\)/.exec(color);
if (m) {
return new _Bytes(parseInt(m[1], 10),
parseInt(m[2], 10),
parseInt(m[3], 10), parseFloat(m[4]));
}
m = /^rgb\(\s*([0-9]*\.?[0-9]+)%\s*,\s*([0-9]*\.?[0-9]+)%\s*,\s*([0-9]*\.?[0-9]+)%\s*\)/.exec(color);
if (m) {
return new _RGB(parseFloat(m[1]) / 100,
parseFloat(m[2]) / 100,
parseFloat(m[3]) / 100, 1);
}
m = /^rgba\(\s*([0-9]*\.?[0-9]+)%\s*,\s*([0-9]*\.?[0-9]+)%\s*,\s*([0-9]*\.?[0-9]+)%\s*,\s*([0-9.]+)\s*\)/.exec(color);
if (m) {
return new _RGB(parseFloat(m[1]) / 100,
parseFloat(m[2]) / 100,
parseFloat(m[3]) / 100, parseFloat(m[4]));
}
if (!nothrow) {
throw new Error("Cannot parse color: " + color);
}
return undefined;
}
function relative(array, element, delta) {
array = Array.prototype.slice.call(array);
var n = array.length;
var pos = array.indexOf(element);
if (pos < 0) {
return delta < 0 ? array[n - 1] : array[0];
}
pos += delta;
if (pos < 0) {
pos += n;
} else {
pos %= n;
}
return array[pos];
}
/* -----[ The ColorPicker widget ]----- */
var ColorPicker = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
options = that.options;
element = that.element;
var value = element.attr("value") || element.val();
if (value) {
value = parse(value, true);
} else {
value = parse(options.value, true);
}
that._value = options.value = value;
var content = that.wrapper = $(that._template(options));
element.hide().after(content);
if (element.is("input")) {
element.appendTo(content);
}
that._tabIndex = element.attr("tabIndex") || 0;
that.enable(!element.attr("disabled"));
var accesskey = element.attr("accesskey");
if (accesskey) {
element.attr("accesskey", null);
content.attr("accesskey", accesskey);
}
that.bind("activate", function(ev){
if (!ev.isDefaultPrevented()) {
that.toggle();
}
});
that._updateUI(value);
},
destroy: function() {
this.wrapper.off(NS).find("*").off(NS);
if (this._popup) {
this._selector.destroy();
this._popup.destroy();
}
this._selector = this._popup = this.wrapper = null;
Widget.fn.destroy.call(this);
},
enable: function(enable) {
var that = this,
wrapper = that.wrapper,
innerWrapper = wrapper.children(".k-picker-wrap"),
icon = innerWrapper.find(".k-select");
if (arguments.length === 0) {
enable = true;
}
that.element.attr("disabled", !enable);
wrapper.attr("aria-disabled", !enable);
icon.off(NS).on("mousedown" + NS, preventDefault);
wrapper.addClass("k-state-disabled")
.removeAttr("tabIndex")
.add("*", wrapper).off(NS);
if (enable) {
wrapper.removeClass("k-state-disabled")
.attr("tabIndex", that._tabIndex)
.on("mouseenter" + NS, function() { innerWrapper.addClass("k-state-hover"); })
.on("mouseleave" + NS, function() { innerWrapper.removeClass("k-state-hover"); })
.on("focus" + NS, function () { innerWrapper.addClass("k-state-focused"); })
.on("blur" + NS, function () { innerWrapper.removeClass("k-state-focused"); })
.on(KEYDOWN_NS, bind(that._keydown, that))
.on(CLICK_NS, ".k-icon", bind(that.toggle, that))
.on(CLICK_NS, that.options.toolIcon ? ".k-tool-icon" : ".k-selected-color", function(){
that.trigger("activate");
});
}
},
_template: kendo.template(
''
),
options: {
name: "ColorPicker",
palette: null,
columns: 10,
toolIcon: null,
value: null,
messages: APPLY_CANCEL,
opacity: false,
buttons: true,
preview: true,
ARIATemplate: 'Current selected color is #=data || ""#'
},
events: [ "activate", "change", "select", "open", "close" ],
open: function() {
this._getPopup().open();
},
close: function() {
this._getPopup().close();
},
toggle: function() {
this._getPopup().toggle();
},
color: ColorSelector.fn.color,
value: ColorSelector.fn.value,
_select: ColorSelector.fn._select,
_triggerSelect: ColorSelector.fn._triggerSelect,
_isInputTypeColor: function() {
var el = this.element[0];
return (/^input$/i).test(el.tagName) && (/^color$/i).test(el.type);
},
_updateUI: function(value) {
var formattedValue = "";
if (value) {
if (this._isInputTypeColor() || value.a == 1) {
// seems that input type="color" doesn't support opacity
// in colors; the only accepted format is hex #RRGGBB
formattedValue = value.toCss();
} else {
formattedValue = value.toCssRgba();
}
this.element.val(formattedValue);
}
if (!this._ariaTemplate) {
this._ariaTemplate = kendo.template(this.options.ARIATemplate);
}
this.wrapper.attr("aria-label", this._ariaTemplate(formattedValue));
this._triggerSelect(value);
this.wrapper.find(".k-selected-color").css(
BACKGROUNDCOLOR,
value ? value.toDisplay() : "transparent"
);
},
_keydown: function(ev) {
var key = ev.keyCode;
if (this._getPopup().visible()) {
if (key == KEYS.ESC) {
this._selector._cancel();
} else {
this._selector._keydown(ev);
}
preventDefault(ev);
}
else if (key == KEYS.ENTER || key == KEYS.DOWN) {
this.open();
preventDefault(ev);
}
},
_getPopup: function() {
var that = this, popup = that._popup;
if (!popup) {
var options = that.options;
var selectorType;
if (options.palette) {
selectorType = ColorPalette;
} else {
selectorType = FlatColorPicker;
}
options._standalone = false;
delete options.select;
delete options.change;
delete options.cancel;
var id = kendo.guid();
var selector = that._selector = new selectorType($('
').appendTo(document.body), options);
that.wrapper.attr("aria-owns", id);
that._popup = popup = selector.wrapper.kendoPopup({
anchor: that.wrapper
}).data("kendoPopup");
selector.bind({
select: function(ev){
that._updateUI(parse(ev.value));
},
change: function(){
that._select(selector.color());
that.close();
},
cancel: function() {
that.close();
}
});
popup.bind({
close: function(ev){
if (that.trigger("close")) {
ev.preventDefault();
return;
}
that.wrapper.children(".k-picker-wrap").removeClass("k-state-focused");
var color = selector._selectOnHide();
if (!color) {
that.wrapper.focus();
that._updateUI(that.color());
} else {
that._select(color);
}
},
open: function(ev) {
if (that.trigger("open")) {
ev.preventDefault();
} else {
that.wrapper.children(".k-picker-wrap").addClass("k-state-focused");
}
},
activate: function(){
selector._select(that.color(), true);
selector.focus();
that.wrapper.children(".k-picker-wrap").addClass("k-state-focused");
}
});
}
return popup;
}
});
function preventDefault(ev) { ev.preventDefault(); }
function bind(callback, obj) {
return function() {
return callback.apply(obj, arguments);
};
}
ui.plugin(ColorPalette);
ui.plugin(FlatColorPicker);
ui.plugin(ColorPicker);
kendo.parseColor = parse;
kendo.Color = {
fromBytes: function(r, g, b, a) {
return new _Bytes(r, g, b, a != null ? a : 1);
},
fromRGB: function(r, g, b, a) {
return new _RGB(r, g, b, a != null ? a : 1);
},
fromHSV: function(h, s, v, a) {
return new _HSV(h, s, v, a != null ? a : 1);
}
};
})(jQuery, parseInt);
(function($, undefined) {
var kendo = window.kendo,
caret = kendo.caret,
keys = kendo.keys,
ui = kendo.ui,
Widget = ui.Widget,
activeElement = kendo._activeElement,
extractFormat = kendo._extractFormat,
parse = kendo.parseFloat,
placeholderSupported = kendo.support.placeholder,
getCulture = kendo.getCulture,
round = kendo._round,
CHANGE = "change",
DISABLED = "disabled",
READONLY = "readonly",
INPUT = "k-input",
SPIN = "spin",
ns = ".kendoNumericTextBox",
TOUCHEND = "touchend",
MOUSELEAVE = "mouseleave" + ns,
HOVEREVENTS = "mouseenter" + ns + " " + MOUSELEAVE,
DEFAULT = "k-state-default",
FOCUSED = "k-state-focused",
HOVER = "k-state-hover",
FOCUS = "focus",
POINT = ".",
SELECTED = "k-state-selected",
STATEDISABLED = "k-state-disabled",
ARIA_DISABLED = "aria-disabled",
ARIA_READONLY = "aria-readonly",
INTEGER_REGEXP = /^(-)?(\d*)$/,
NULL = null,
proxy = $.proxy;
var NumericTextBox = Widget.extend({
init: function(element, options) {
var that = this,
isStep = options && options.step !== undefined,
min, max, step, value, disabled;
Widget.fn.init.call(that, element, options);
options = that.options;
element = that.element
.on("focusout" + ns, proxy(that._focusout, that))
.attr("role", "spinbutton");
options.placeholder = options.placeholder || element.attr("placeholder");
that._reset();
that._wrapper();
that._arrows();
that._input();
if (!kendo.support.mobileOS) {
that._text.on(FOCUS + ns, proxy(that._click, that));
} else {
that._text.on(TOUCHEND + ns + " " + FOCUS + ns, function(e) {
that._toggleText(false);
if (e.type === FOCUS) {
element.focus();
}
});
}
min = that.min(element.attr("min"));
max = that.max(element.attr("max"));
step = that._parse(element.attr("step"));
if (options.min === NULL && min !== NULL) {
options.min = min;
}
if (options.max === NULL && max !== NULL) {
options.max = max;
}
if (!isStep && step !== NULL) {
options.step = step;
}
element.attr("aria-valuemin", options.min)
.attr("aria-valuemax", options.max);
options.format = extractFormat(options.format);
value = options.value;
that.value(value !== NULL ? value : element.val());
disabled = element.is("[disabled]");
if (disabled) {
that.enable(false);
} else {
that.readonly(element.is("[readonly]"));
}
kendo.notify(that);
},
options: {
name: "NumericTextBox",
decimals: NULL,
min: NULL,
max: NULL,
value: NULL,
step: 1,
culture: "",
format: "n",
spinners: true,
placeholder: "",
upArrowText: "Increase value",
downArrowText: "Decrease value"
},
events: [
CHANGE,
SPIN
],
_editable: function(options) {
var that = this,
element = that.element,
disable = options.disable,
readonly = options.readonly,
text = that._text.add(element),
wrapper = that._inputWrapper.off(HOVEREVENTS);
that._toggleText(true);
that._upArrowEventHandler.unbind("press");
that._downArrowEventHandler.unbind("press");
element.off("keydown" + ns).off("keypress" + ns).off("paste" + ns);
if (!readonly && !disable) {
wrapper
.addClass(DEFAULT)
.removeClass(STATEDISABLED)
.on(HOVEREVENTS, that._toggleHover);
text.removeAttr(DISABLED)
.removeAttr(READONLY)
.attr(ARIA_DISABLED, false)
.attr(ARIA_READONLY, false);
that._upArrowEventHandler.bind("press", function(e) {
e.preventDefault();
that._spin(1);
that._upArrow.addClass(SELECTED);
});
that._downArrowEventHandler.bind("press", function(e) {
e.preventDefault();
that._spin(-1);
that._downArrow.addClass(SELECTED);
});
that.element
.on("keydown" + ns, proxy(that._keydown, that))
.on("keypress" + ns, proxy(that._keypress, that))
.on("paste" + ns, proxy(that._paste, that));
} else {
wrapper
.addClass(disable ? STATEDISABLED : DEFAULT)
.removeClass(disable ? DEFAULT : STATEDISABLED);
text.attr(DISABLED, disable)
.attr(READONLY, readonly)
.attr(ARIA_DISABLED, disable)
.attr(ARIA_READONLY, readonly);
}
},
readonly: function(readonly) {
this._editable({
readonly: readonly === undefined ? true : readonly,
disable: false
});
},
enable: function(enable) {
this._editable({
readonly: false,
disable: !(enable = enable === undefined ? true : enable)
});
},
destroy: function() {
var that = this;
that.element
.add(that._text)
.add(that._upArrow)
.add(that._downArrow)
.add(that._inputWrapper)
.off(ns);
that._upArrowEventHandler.destroy();
that._downArrowEventHandler.destroy();
if (that._form) {
that._form.off("reset", that._resetHandler);
}
Widget.fn.destroy.call(that);
},
min: function(value) {
return this._option("min", value);
},
max: function(value) {
return this._option("max", value);
},
step: function(value) {
return this._option("step", value);
},
value: function(value) {
var that = this, adjusted;
if (value === undefined) {
return that._value;
}
value = that._parse(value);
adjusted = that._adjust(value);
if (value !== adjusted) {
return;
}
that._update(value);
that._old = that._value;
},
focus: function() {
this._focusin();
},
_adjust: function(value) {
var that = this,
options = that.options,
min = options.min,
max = options.max;
if (value === NULL) {
return value;
}
if (min !== NULL && value < min) {
value = min;
} else if (max !== NULL && value > max) {
value = max;
}
return value;
},
_arrows: function() {
var that = this,
arrows,
_release = function() {
clearTimeout( that._spinning );
arrows.removeClass(SELECTED);
},
options = that.options,
spinners = options.spinners,
element = that.element;
arrows = element.siblings(".k-icon");
if (!arrows[0]) {
arrows = $(buttonHtml("n", options.upArrowText) + buttonHtml("s", options.downArrowText))
.insertAfter(element);
arrows.wrapAll('' + text + ' ' +
'
#=messages.info#
'+
'
'+
' ' +
'
'+
' ' +
'
' +
'#=messages.filter# ' +
'#=messages.clear# '+
'
' +
'
' +
'
#=messages.info#
'+
'
'+
'#for(var op in operators){#'+
'#=operators[op]# ' +
'#}#'+
' '+
'#if(values){#' +
'
' +
' ' +
'#}else{#' +
'
'+
'#}#' +
'#if(extra){#'+
'
'+
'#=messages.and# '+
'#=messages.or# '+
' '+
'
'+
'#for(var op in operators){#'+
'#=operators[op]# '+
'#}#'+
' '+
'#if(values){#' +
'
' +
' '+
'#}else{#' +
'
'+
'#}#' +
'#}#'+
'
'+
'#=messages.filter# '+
'#=messages.clear# '+
'
'+
'
")
.html(kendo.template(type === "boolean" ? booleanMobileTemplate : defaultMobileTemplate)({
field: that.field,
format: options.format,
ns: kendo.ns,
messages: options.messages,
extra: options.extra,
operators: operators,
type: type,
role: role,
useRole: (!kendo.support.input.date && type === "date") || type === "number",
inputType: mobileRoles[type],
values: convertItems(options.values)
}));
that.view = that.pane.append(that.form.html());
that.form = that.view.element.find("form");
that.view.element
.on("click", ".k-submit", function(e) {
that.form.submit();
e.preventDefault();
})
.on("click", ".k-cancel", function(e) {
that._closeForm();
e.preventDefault();
});
},
refresh: function() {
var that = this,
expression = that.dataSource.filter() || { filters: [], logic: "and" };
that.filterModel = kendo.observable({
logic: "and",
filters: [ that._defaultFilter(), that._defaultFilter()]
});
if (that.form) {
//NOTE: binding the form element directly causes weird error in IE when grid is bound through MVVM and column is sorted
kendo.bind(that.form.children().first(), that.filterModel);
}
if (that._bind(expression)) {
that.link.addClass("k-state-active");
} else {
that.link.removeClass("k-state-active");
}
},
destroy: function() {
var that = this;
Widget.fn.destroy.call(that);
if (that.form) {
kendo.unbind(that.form);
kendo.destroy(that.form);
that.form.unbind(NS);
if (that.popup) {
that.popup.destroy();
that.popup = null;
}
that.form = null;
}
if (that.view) {
that.view.purge();
that.view = null;
}
that.link.unbind(NS);
if (that._refreshHandler) {
that.dataSource.unbind("change", that._refreshHandler);
that.dataSource = null;
}
that.element = that.link = that._refreshHandler = that.filterModel = null;
},
_bind: function(expression) {
var that = this,
filters = expression.filters,
idx,
length,
found = false,
current = 0,
filterModel = that.filterModel,
currentFilter,
filter;
for (idx = 0, length = filters.length; idx < length; idx++) {
filter = filters[idx];
if (filter.field == that.field) {
filterModel.set("logic", expression.logic);
currentFilter = filterModel.filters[current];
if (!currentFilter) {
filterModel.filters.push({ field: that.field });
currentFilter = filterModel.filters[current];
}
currentFilter.set("value", that._parse(filter.value));
currentFilter.set("operator", filter.operator);
current++;
found = true;
} else if (filter.filters) {
found = found || that._bind(filter);
}
}
return found;
},
_merge: function(expression) {
var that = this,
logic = expression.logic || "and",
filters = expression.filters,
filter,
result = that.dataSource.filter() || { filters:[], logic: "and" },
idx,
length;
removeFiltersForField(result, that.field);
filters = $.grep(filters, function(filter) {
return filter.value !== "" && filter.value != null;
});
for (idx = 0, length = filters.length; idx < length; idx++) {
filter = filters[idx];
filter.value = that._parse(filter.value);
}
if (filters.length) {
if (result.filters.length) {
expression.filters = filters;
if (result.logic !== "and") {
result.filters = [ { logic: result.logic, filters: result.filters }];
result.logic = "and";
}
if (filters.length > 1) {
result.filters.push(expression);
} else {
result.filters.push(filters[0]);
}
} else {
result.filters = filters;
result.logic = logic;
}
}
return result;
},
filter: function(expression) {
expression = this._merge(expression);
if (expression.filters.length) {
this.dataSource.filter(expression);
}
},
clear: function() {
var that = this,
expression = that.dataSource.filter() || { filters:[] };
expression.filters = $.grep(expression.filters, function(filter) {
if (filter.filters) {
filter.filters = clearFilter(filter.filters, that.field);
return filter.filters.length;
}
return filter.field != that.field;
});
if (!expression.filters.length) {
expression = null;
}
that.dataSource.filter(expression);
},
_submit: function(e) {
e.preventDefault();
e.stopPropagation();
this.filter(this.filterModel.toJSON());
this._closeForm();
},
_reset: function() {
this.clear();
this._closeForm();
},
_closeForm: function() {
if (this._isMobile) {
this.pane.navigate("", this.options.animations.right);
} else {
this.popup.close();
}
},
_click: function(e) {
e.preventDefault();
e.stopPropagation();
if (!this.popup && !this.pane) {
this._init();
}
if (this._isMobile) {
this.pane.navigate(this.view, this.options.animations.left);
} else {
this.popup.toggle();
}
},
_open: function() {
var popup;
$(".k-filter-menu").not(this.form).each(function() {
popup = $(this).data(POPUP);
if (popup) {
popup.close();
}
});
},
_activate: function() {
this.form.find(":kendoFocusable:first").focus();
},
_keydown: function(e) {
if (e.keyCode == kendo.keys.ESC) {
this.popup.close();
}
},
events: [ INIT ],
options: {
name: "FilterMenu",
extra: true,
appendToElement: false,
type: "string",
operators: {
string: {
eq: EQ,
neq: NEQ,
startswith: "Starts with",
contains: "Contains",
doesnotcontain: "Does not contain",
endswith: "Ends with"
},
number: {
eq: EQ,
neq: NEQ,
gte: "Is greater than or equal to",
gt: "Is greater than",
lte: "Is less than or equal to",
lt: "Is less than"
},
date: {
eq: EQ,
neq: NEQ,
gte: "Is after or equal to",
gt: "Is after",
lte: "Is before or equal to",
lt: "Is before"
},
enums: {
eq: EQ,
neq: NEQ
}
},
messages: {
info: "Show items with value that:",
isTrue: "is true",
isFalse: "is false",
filter: "Filter",
clear: "Clear",
and: "And",
or: "Or",
selectValue: "-Select value-",
operator: "Operator",
value: "Value",
cancel: "Cancel"
},
animations: {
left: "slide",
right: "slide:right"
}
}
});
ui.plugin(FilterMenu);
})(window.kendo.jQuery);
(function ($, undefined) {
var kendo = window.kendo,
ui = kendo.ui,
activeElement = kendo._activeElement,
touch = (kendo.support.touch && kendo.support.mobileOS),
MOUSEDOWN = "mousedown",
CLICK = "click",
extend = $.extend,
proxy = $.proxy,
each = $.each,
template = kendo.template,
keys = kendo.keys,
Widget = ui.Widget,
excludedNodesRegExp = /^(ul|a|div)$/i,
NS = ".kendoMenu",
IMG = "img",
OPEN = "open",
MENU = "k-menu",
LINK = "k-link",
LAST = "k-last",
CLOSE = "close",
TIMER = "timer",
FIRST = "k-first",
IMAGE = "k-image",
SELECT = "select",
ZINDEX = "zIndex",
ACTIVATE = "activate",
DEACTIVATE = "deactivate",
POINTERDOWN = "touchstart" + NS + " MSPointerDown" + NS + " pointerdown" + NS,
pointers = kendo.support.pointers,
msPointers = kendo.support.msPointers,
allPointers = msPointers || pointers,
MOUSEENTER = pointers ? "pointerover" : (msPointers ? "MSPointerOver" : "mouseenter"),
MOUSELEAVE = pointers ? "pointerout" : (msPointers ? "MSPointerOut" : "mouseleave"),
mobile = touch || allPointers,
DOCUMENT_ELEMENT = $(document.documentElement),
KENDOPOPUP = "kendoPopup",
DEFAULTSTATE = "k-state-default",
HOVERSTATE = "k-state-hover",
FOCUSEDSTATE = "k-state-focused",
DISABLEDSTATE = "k-state-disabled",
menuSelector = ".k-menu",
groupSelector = ".k-menu-group",
popupSelector = groupSelector + ",.k-animation-container",
allItemsSelector = ":not(.k-list) > .k-item",
disabledSelector = ".k-item.k-state-disabled",
itemSelector = ".k-item:not(.k-state-disabled)",
linkSelector = ".k-item:not(.k-state-disabled) > .k-link",
exclusionSelector = ":not(.k-item.k-separator)",
nextSelector = exclusionSelector + ":eq(0)",
lastSelector = exclusionSelector + ":last",
templateSelector = "div:not(.k-animation-container,.k-list-container)",
touchPointerTypes = { "2": 1, "touch": 1 },
templates = {
content: template(
"#= content(item) #
"
),
group: template(
"" +
"#= renderItems(data) #" +
" "
),
itemWrapper: template(
"<#= tag(item) # class='#= textClass(item) #'#= textAttributes(item) #>" +
"#= image(item) ##= sprite(item) ##= text(item) #" +
"#= arrow(data) #" +
""
),
item: template(
"" +
"#= itemWrapper(data) #" +
"# if (item.items) { #" +
"#= subGroup({ items: item.items, menu: menu, group: { expanded: item.expanded } }) #" +
"# } else if (item.content || item.contentUrl) { #" +
"#= renderContent(data) #" +
"# } #" +
" "
),
image: template("
');
},
_init: function() {
var that = this;
that.pane = that.options.pane;
if (that.pane) {
that._isMobile = true;
}
if (that._isMobile) {
that._createMobileMenu();
} else {
that._createMenu();
}
that._angularItems("compile");
that._sort();
that._columns();
that._filter();
that._lockColumns();
that.trigger(INIT, { field: that.field, container: that.wrapper });
},
events: [ INIT ],
options: {
name: "ColumnMenu",
messages: {
sortAscending: "Sort Ascending",
sortDescending: "Sort Descending",
filter: "Filter",
columns: "Columns",
done: "Done",
settings: "Column Settings",
lock: "Lock",
unlock: "Unlock"
},
filter: "",
columns: true,
sortable: true,
filterable: true,
animations: {
left: "slide"
}
},
_createMenu: function() {
var that = this,
options = that.options;
that.wrapper.html(kendo.template(template)({
ns: kendo.ns,
messages: options.messages,
sortable: options.sortable,
filterable: options.filterable,
columns: that._ownerColumns(),
showColumns: options.columns,
lockedColumns: options.lockedColumns
}));
that.popup = that.wrapper[POPUP]({
anchor: that.link,
open: proxy(that._open, that),
activate: proxy(that._activate, that),
close: function() {
if (that.options.closeCallback) {
that.options.closeCallback(that.element);
}
}
}).data(POPUP);
that.menu = that.wrapper.children()[MENU]({
orientation: "vertical",
closeOnClick: false
}).data(MENU);
},
_createMobileMenu: function() {
var that = this,
options = that.options;
var html = kendo.template(mobileTemplate)({
ns: kendo.ns,
field: that.field,
title: that.title || that.field,
messages: options.messages,
sortable: options.sortable,
filterable: options.filterable,
columns: that._ownerColumns(),
showColumns: options.columns,
lockedColumns: options.lockedColumns
});
that.view = that.pane.append(html);
that.wrapper = that.view.element.find(".k-column-menu");
that.menu = new MobileMenu(that.wrapper.children(), {
pane: that.pane
});
that.view.element.on("click", ".k-done", function(e) {
that.close();
e.preventDefault();
});
if (that.options.lockedColumns) {
that.view.bind("show", function() {
that._updateLockedColumns();
});
}
},
_angularItems: function(action) {
var that = this;
that.angular(action, function(){
var items = that.wrapper.find(".k-columns-item input[" + kendo.attr("field") + "]").map(function(){
return $(this).closest("li");
});
var data = map(that._ownerColumns(), function(col){
return { column: col._originalObject };
});
return {
elements: items,
data: data
};
});
},
destroy: function() {
var that = this;
that._angularItems("cleanup");
Widget.fn.destroy.call(that);
if (that.filterMenu) {
that.filterMenu.destroy();
}
if (that._refreshHandler) {
that.dataSource.unbind(CHANGE, that._refreshHandler);
}
if (that.options.columns && that.owner) {
that.owner.unbind("columnShow", that._updateColumnsMenuHandler);
that.owner.unbind("columnHide", that._updateColumnsMenuHandler);
}
if (that.menu) {
that.menu.element.off(NS);
that.menu.destroy();
}
that.wrapper.off(NS);
if (that.popup) {
that.popup.destroy();
}
if (that.view) {
that.view.purge();
}
that.link.off(NS);
that.owner = null;
that.wrapper = null;
that.element = null;
},
close: function() {
this.menu.close();
if (this.popup) {
this.popup.close();
this.popup.element.off("keydown" + NS);
}
},
_click: function(e) {
e.preventDefault();
e.stopPropagation();
var options = this.options;
if (options.filter && this.element.is(!options.filter)) {
return;
}
if (!this.popup && !this.pane) {
this._init();
}
if (this._isMobile) {
this.pane.navigate(this.view, this.options.animations.left);
} else {
this.popup.toggle();
}
},
_open: function() {
var that = this;
$(".k-column-menu").not(that.wrapper).each(function() {
$(this).data(POPUP).close();
});
that.popup.element.on("keydown" + NS, function(e) {
if (e.keyCode == kendo.keys.ESC) {
that.close();
}
});
if (that.options.lockedColumns) {
that._updateLockedColumns();
}
},
_activate: function() {
this.menu.element.focus();
},
_ownerColumns: function() {
var columns = this.owner.columns,
menuColumns = grep(columns, function(col) {
var result = true,
title = trim(col.title || "");
if (col.menu === false || (!col.field && !title.length)) {
result = false;
}
return result;
});
return map(menuColumns, function(col) {
return {
originalField: col.field,
field: col.field || col.title,
title: col.title || col.field,
hidden: col.hidden,
index: inArray(col, columns),
locked: !!col.locked,
_originalObject: col
};
});
},
_sort: function() {
var that = this;
if (that.options.sortable) {
that.refresh();
that._refreshHandler = proxy(that.refresh, that);
that.dataSource.bind(CHANGE, that._refreshHandler);
that.menu.bind(SELECT, function(e) {
var item = $(e.item),
dir;
if (item.hasClass("k-sort-asc")) {
dir = ASC;
} else if (item.hasClass("k-sort-desc")) {
dir = DESC;
}
if (!dir) {
return;
}
item.parent().find(".k-sort-" + (dir == ASC ? DESC : ASC)).removeClass(ACTIVE);
that._sortDataSource(item, dir);
that.close();
});
}
},
_sortDataSource: function(item, dir) {
var that = this,
sortable = that.options.sortable,
dataSource = that.dataSource,
idx,
length,
sort = dataSource.sort() || [];
if (item.hasClass(ACTIVE) && sortable && sortable.allowUnsort !== false) {
item.removeClass(ACTIVE);
dir = undefined;
} else {
item.addClass(ACTIVE);
}
if (sortable === true || sortable.mode === "single") {
sort = [ { field: that.field, dir: dir } ];
} else {
for (idx = 0, length = sort.length; idx < length; idx++) {
if (sort[idx].field === that.field) {
sort.splice(idx, 1);
break;
}
}
sort.push({ field: that.field, dir: dir });
}
dataSource.sort(sort);
},
_columns: function() {
var that = this;
if (that.options.columns) {
that._updateColumnsMenu();
that._updateColumnsMenuHandler = proxy(that._updateColumnsMenu, that);
that.owner.bind(["columnHide", "columnShow"], that._updateColumnsMenuHandler);
that.menu.bind(SELECT, function(e) {
var item = $(e.item),
input,
index,
column,
columns = that.owner.columns,
field;
if (that._isMobile) {
e.preventDefault();
}
if (!item.parent().closest("li.k-columns-item")[0]) {
return;
}
input = item.find(":checkbox");
if (input.attr("disabled")) {
return;
}
field = input.attr(kendo.attr("field"));
column = grep(columns, function(column) {
return column.field == field || column.title == field;
})[0];
index = inArray(column, columns);
if (column.hidden === true) {
that.owner.showColumn(index);
} else {
that.owner.hideColumn(index);
}
});
}
},
_updateColumnsMenu: function() {
var idx, length, current, checked, locked;
var fieldAttr = kendo.attr("field"),
lockedAttr = kendo.attr("locked"),
visible = grep(this._ownerColumns(), function(field) {
return !field.hidden;
}),
visibleDataFields = grep(visible, function(field) {
return field.originalField;
}),
lockedCount = grep(visibleDataFields, function(col) {
return col.locked === true;
}).length,
nonLockedCount = grep(visibleDataFields, function(col) {
return col.locked !== true;
}).length;
visible = map(visible, function(col) {
return col.field;
});
var checkboxes = this.wrapper
.find(".k-columns-item input[" + fieldAttr + "]")
.prop("disabled", false)
.prop("checked", false);
for (idx = 0, length = checkboxes.length; idx < length; idx ++) {
current = checkboxes.eq(idx);
locked = current.attr(lockedAttr) === "true";
checked = false;
if (inArray(current.attr(fieldAttr), visible) > -1) {
checked = true;
current.prop("checked", checked);
}
if (checked) {
if (lockedCount == 1 && locked) {
current.prop("disabled", true);
}
if (nonLockedCount == 1 && !locked) {
current.prop("disabled", true);
}
}
}
},
_updateColumnsLockedState: function() {
var idx, length, current, locked, column;
var fieldAttr = kendo.attr("field");
var lockedAttr = kendo.attr("locked");
var columns = toHash(this._ownerColumns(), "field");
var checkboxes = this.wrapper
.find(".k-columns-item input[type=checkbox]");
for (idx = 0, length = checkboxes.length; idx < length; idx ++ ) {
current = checkboxes.eq(idx);
column = columns[current.attr(fieldAttr)];
if (column) {
current.attr(lockedAttr, column.locked);
}
}
this._updateColumnsMenu();
},
_filter: function() {
var that = this,
options = that.options;
if (options.filterable !== false) {
that.filterMenu = that.wrapper.find(".k-filterable")[FILTERMENU](
extend(true, {}, {
appendToElement: true,
dataSource: options.dataSource,
values: options.values,
field: that.field
},
options.filterable)
).data(FILTERMENU);
if (that._isMobile) {
that.menu.bind(SELECT, function(e) {
var item = $(e.item);
if (item.hasClass("k-filter-item")) {
that.pane.navigate(that.filterMenu.view, that.options.animations.left);
}
});
}
}
},
_lockColumns: function() {
var that = this;
that.menu.bind(SELECT, function(e) {
var item = $(e.item);
if (item.hasClass("k-lock")) {
that.owner.lockColumn(that.field);
that.close();
} else if (item.hasClass("k-unlock")) {
that.owner.unlockColumn(that.field);
that.close();
}
});
},
_updateLockedColumns: function() {
var field = this.field;
var columns = this.owner.columns;
var column = grep(columns, function(column) {
return column.field == field || column.title == field;
})[0];
var locked = column.locked === true;
var length = grep(columns, function(column) {
return !column.hidden && ((column.locked && locked) || (!column.locked && !locked));
}).length;
var lockItem = this.wrapper.find(".k-lock").removeClass("k-state-disabled");
var unlockItem = this.wrapper.find(".k-unlock").removeClass("k-state-disabled");
if (locked || length == 1) {
lockItem.addClass("k-state-disabled");
}
if (!locked || length == 1) {
unlockItem.addClass("k-state-disabled");
}
this._updateColumnsLockedState();
},
refresh: function() {
var that = this,
sort = that.options.dataSource.sort() || [],
descriptor,
field = that.field,
idx,
length;
that.wrapper.find(".k-sort-asc, .k-sort-desc").removeClass(ACTIVE);
for (idx = 0, length = sort.length; idx < length; idx++) {
descriptor = sort[idx];
if (field == descriptor.field) {
that.wrapper.find(".k-sort-" + descriptor.dir).addClass(ACTIVE);
}
}
}
});
var template = ''+
'#if(sortable){#'+
' ';
var mobileTemplate =
''+
''+
'
'+
'${title} '+
'#if(sortable){#'+
''+
''+
' '+
' '+
'#}#'+
' '+
'#if(showColumns){#'+
'${messages.columns} '+
'
");
}
overlay
.insertBefore(wrapper[0])
.toggle(visible)
.css(ZINDEX, parseInt(wrapper.css(ZINDEX), 10) - 1);
return overlay;
},
_actionForIcon: function(icon) {
var iconClass = /\bk-i-\w+\b/.exec(icon[0].className)[0];
return {
"k-i-close": "_close",
"k-i-maximize": "maximize",
"k-i-minimize": "minimize",
"k-i-restore": "restore",
"k-i-refresh": "refresh",
"k-i-pin": "pin",
"k-i-unpin": "unpin"
}[iconClass];
},
_windowActionHandler: function (e) {
if (this._closing) {
return;
}
var icon = $(e.target).closest(".k-window-action").find(".k-icon");
var action = this._actionForIcon(icon);
if (action) {
e.preventDefault();
this[action]();
return false;
}
},
_modals: function() {
var that = this;
var zStack = $(KWINDOW).filter(function() {
var dom = $(this);
var object = that._object(dom);
var options = object && object.options;
return options && options.modal && options.visible && dom.is(VISIBLE);
}).sort(function(a, b){
return +$(a).css("zIndex") - +$(b).css("zIndex");
});
that = null;
return zStack;
},
_object: function(element) {
var content = element.children(KWINDOWCONTENT);
return content.data("kendoWindow") || content.data("kendo" + this.options.name);
},
center: function () {
var that = this,
position = that.options.position,
wrapper = that.wrapper,
documentWindow = $(window),
scrollTop = 0,
scrollLeft = 0,
newTop, newLeft;
if (that.options.isMaximized) {
return that;
}
if (!that.options.pinned) {
scrollTop = documentWindow.scrollTop();
scrollLeft = documentWindow.scrollLeft();
}
newLeft = scrollLeft + Math.max(0, (documentWindow.width() - wrapper.width()) / 2);
newTop = scrollTop + Math.max(0, (documentWindow.height() - wrapper.height() - parseInt(wrapper.css("paddingTop"), 10)) / 2);
wrapper.css({
left: newLeft,
top: newTop
});
position.top = newTop;
position.left = newLeft;
return that;
},
title: function (text) {
var that = this,
wrapper = that.wrapper,
options = that.options,
titleBar = wrapper.children(KWINDOWTITLEBAR),
title = titleBar.children(KWINDOWTITLE),
titleBarHeight = titleBar.outerHeight();
if (!arguments.length) {
return title.text();
}
if (text === false) {
wrapper.addClass("k-window-titleless");
titleBar.remove();
} else {
if (!titleBar.length) {
wrapper.prepend(templates.titlebar(extend(templates, options)));
}
wrapper.css("padding-top", titleBarHeight);
titleBar.css("margin-top", -titleBarHeight);
}
title.text(text);
that.options.title = text;
return that;
},
content: function (html, data) {
var content = this.wrapper.children(KWINDOWCONTENT),
scrollContainer = content.children(".km-scroll-container");
content = scrollContainer[0] ? scrollContainer : content;
if (!defined(html)) {
return content.html();
}
this.angular("cleanup", function(){
return { elements: content.children() };
});
kendo.destroy(this.element.children());
content.empty().html(html);
this.angular("compile", function(){
var a = [];
for (var i = content.length; --i >= 0;) {
a.push({ dataItem: data });
}
return {
elements: content.children(),
data: a
};
});
return this;
},
open: function () {
var that = this,
wrapper = that.wrapper,
options = that.options,
showOptions = options.animation.open,
contentElement = wrapper.children(KWINDOWCONTENT),
overlay;
if (!that.trigger(OPEN)) {
if (that._closing) {
wrapper.kendoStop(true, true);
}
that._closing = false;
that.toFront();
if (options.autoFocus) {
that.element.focus();
}
options.visible = true;
if (options.modal) {
overlay = that._overlay(false);
overlay.kendoStop(true, true);
if (showOptions.duration && kendo.effects.Fade) {
var overlayFx = kendo.fx(overlay).fadeIn();
overlayFx.duration(showOptions.duration || 0);
overlayFx.endValue(0.5);
overlayFx.play();
} else {
overlay.css("opacity", 0.5);
}
overlay.show();
}
if (!wrapper.is(VISIBLE)) {
contentElement.css(OVERFLOW, HIDDEN);
wrapper.show().kendoStop().kendoAnimate({
effects: showOptions.effects,
duration: showOptions.duration,
complete: proxy(this._activate, this)
});
}
}
if (options.isMaximized) {
that._documentScrollTop = $(document).scrollTop();
$("html, body").css(OVERFLOW, HIDDEN);
}
return that;
},
_activate: function() {
if (this.options.autoFocus) {
this.element.focus();
}
this.trigger(ACTIVATE);
this.wrapper.children(KWINDOWCONTENT).css(OVERFLOW, "");
},
_removeOverlay: function(suppressAnimation) {
var modals = this._modals();
var options = this.options;
var hideOverlay = options.modal && !modals.length;
var overlay = options.modal ? this._overlay(true) : $(undefined);
var hideOptions = options.animation.close;
if (hideOverlay) {
if (!suppressAnimation && hideOptions.duration && kendo.effects.Fade) {
var overlayFx = kendo.fx(overlay).fadeOut();
overlayFx.duration(hideOptions.duration || 0);
overlayFx.startValue(0.5);
overlayFx.play();
} else {
this._overlay(false).remove();
}
} else if (modals.length) {
this._object(modals.last())._overlay(true);
}
},
_close: function(systemTriggered) {
var that = this,
wrapper = that.wrapper,
options = that.options,
showOptions = options.animation.open,
hideOptions = options.animation.close;
if (wrapper.is(VISIBLE) && !that.trigger(CLOSE, { userTriggered: !systemTriggered })) {
if (that._closing) {
return;
}
that._closing = true;
options.visible = false;
$(KWINDOW).each(function(i, element) {
var contentElement = $(element).children(KWINDOWCONTENT);
// Remove overlay set by toFront
if (element != wrapper && contentElement.find("> ." + KCONTENTFRAME).length > 0) {
contentElement.children(KOVERLAY).remove();
}
});
this._removeOverlay();
wrapper.kendoStop().kendoAnimate({
effects: hideOptions.effects || showOptions.effects,
reverse: hideOptions.reverse === true,
duration: hideOptions.duration,
complete: proxy(this._deactivate, this)
});
}
if (that.options.isMaximized) {
$("html, body").css(OVERFLOW, "");
if (that._documentScrollTop && that._documentScrollTop > 0) {
$(document).scrollTop(that._documentScrollTop);
}
}
},
_deactivate: function() {
this.wrapper.hide().css("opacity","");
this.trigger(DEACTIVATE);
var lastModal = this._object(this._modals().last());
if (lastModal) {
lastModal.toFront();
}
},
close: function () {
this._close(true);
return this;
},
_actionable: function(element) {
return $(element).is(TITLEBAR_BUTTONS + "," + TITLEBAR_BUTTONS + " .k-icon,:input,a");
},
_shouldFocus: function(target) {
var active = activeElement(),
element = this.element;
return this.options.autoFocus &&
!$(active).is(element) &&
!this._actionable(target) &&
(!element.find(active).length || !element.find(target).length);
},
toFront: function (e) {
var that = this,
wrapper = that.wrapper,
currentWindow = wrapper[0],
zIndex = +wrapper.css(ZINDEX),
originalZIndex = zIndex,
target = (e && e.target) || null;
$(KWINDOW).each(function(i, element) {
var windowObject = $(element),
zIndexNew = windowObject.css(ZINDEX),
contentElement = windowObject.children(KWINDOWCONTENT);
if (!isNaN(zIndexNew)) {
zIndex = Math.max(+zIndexNew, zIndex);
}
// Add overlay to windows with iframes and lower z-index to prevent
// trapping of events when resizing / dragging
if (element != currentWindow && contentElement.find("> ." + KCONTENTFRAME).length > 0) {
contentElement.append(templates.overlay);
}
});
if (!wrapper[0].style.zIndex || originalZIndex < zIndex) {
wrapper.css(ZINDEX, zIndex + 2);
}
that.element.find("> .k-overlay").remove();
if (that._shouldFocus(target)) {
that.element.focus();
var scrollTop = $(window).scrollTop(),
windowTop = parseInt(wrapper.position().top, 10);
if (windowTop > 0 && windowTop < scrollTop) {
if (scrollTop > 0) {
$(window).scrollTop(windowTop);
} else {
wrapper.css("top", scrollTop);
}
}
}
wrapper = null;
return that;
},
toggleMaximization: function () {
if (this._closing) {
return this;
}
return this[this.options.isMaximized ? "restore" : "maximize"]();
},
restore: function () {
var that = this;
var options = that.options;
var minHeight = options.minHeight;
var restoreOptions = that.restoreOptions;
if (!options.isMaximized && !options.isMinimized) {
return that;
}
if (minHeight && minHeight != Infinity) {
that.wrapper.css("min-height", minHeight);
}
that.wrapper
.css({
position: options.pinned ? "fixed" : "absolute",
left: restoreOptions.left,
top: restoreOptions.top,
width: restoreOptions.width,
height: restoreOptions.height
})
.removeClass(MAXIMIZEDSTATE)
.find(".k-window-content,.k-resize-handle").show().end()
.find(".k-window-titlebar .k-i-restore").parent().remove().end().end()
.find(MINIMIZE_MAXIMIZE).parent().show().end().end()
.find(PIN_UNPIN).parent().show();
that.options.width = restoreOptions.width;
that.options.height = restoreOptions.height;
$("html, body").css(OVERFLOW, "");
if (this._documentScrollTop && this._documentScrollTop > 0) {
$(document).scrollTop(this._documentScrollTop);
}
options.isMaximized = options.isMinimized = false;
that.resize();
return that;
},
maximize: sizingAction("maximize", function() {
var that = this,
wrapper = that.wrapper,
position = wrapper.position();
extend(that.restoreOptions, {
left: position.left,
top: position.top
});
wrapper.css({
left: 0,
top: 0,
position: "fixed"
})
.addClass(MAXIMIZEDSTATE);
this._documentScrollTop = $(document).scrollTop();
$("html, body").css(OVERFLOW, HIDDEN);
that.options.isMaximized = true;
that._onDocumentResize();
}),
minimize: sizingAction("minimize", function() {
var that = this;
that.wrapper.css({
height: "",
minHeight: ""
});
that.element.hide();
that.options.isMinimized = true;
}),
pin: function(force) {
var that = this,
win = $(window),
wrapper = that.wrapper,
top = parseInt(wrapper.css("top"), 10),
left = parseInt(wrapper.css("left"), 10);
if (force || !that.options.pinned && !that.options.isMaximized) {
wrapper.css({position: "fixed", top: top - win.scrollTop(), left: left - win.scrollLeft()});
wrapper.children(KWINDOWTITLEBAR).find(KPIN).addClass("k-i-unpin").removeClass("k-i-pin");
that.options.pinned = true;
}
},
unpin: function() {
var that = this,
win = $(window),
wrapper = that.wrapper,
top = parseInt(wrapper.css("top"), 10),
left = parseInt(wrapper.css("left"), 10);
if (that.options.pinned && !that.options.isMaximized) {
wrapper.css({position: "", top: top + win.scrollTop(), left: left + win.scrollLeft()});
wrapper.children(KWINDOWTITLEBAR).find(KUNPIN).addClass("k-i-pin").removeClass("k-i-unpin");
that.options.pinned = false;
}
},
_onDocumentResize: function () {
var that = this,
wrapper = that.wrapper,
wnd = $(window),
w, h;
if (!that.options.isMaximized) {
return;
}
w = wnd.width();
h = wnd.height() - parseInt(wrapper.css("padding-top"), 10);
wrapper.css({
width: w,
height: h
});
that.options.width = w;
that.options.height = h;
that.resize();
},
refresh: function (options) {
var that = this,
initOptions = that.options,
element = $(that.element),
iframe,
showIframe,
url;
if (!isPlainObject(options)) {
options = { url: options };
}
options = extend({}, initOptions.content, options);
showIframe = defined(initOptions.iframe) ? initOptions.iframe : options.iframe;
url = options.url;
if (url) {
if (!defined(showIframe)) {
showIframe = !isLocalUrl(url);
}
if (!showIframe) {
// perform AJAX request
that._ajaxRequest(options);
} else {
iframe = element.find("." + KCONTENTFRAME)[0];
if (iframe) {
// refresh existing iframe
iframe.src = url || iframe.src;
} else {
// render new iframe
element.html(templates.contentFrame(extend({}, initOptions, { content: options })));
}
element.find("." + KCONTENTFRAME)
.unbind("load" + NS)
.on("load" + NS, proxy(this._triggerRefresh, this));
}
} else {
if (options.template) {
// refresh template
that.content(template(options.template)({}));
}
that.trigger(REFRESH);
}
element.toggleClass("k-window-iframecontent", !!showIframe);
return that;
},
_triggerRefresh: function() {
this.trigger(REFRESH);
},
_ajaxComplete: function() {
clearTimeout(this._loadingIconTimeout);
this.wrapper.find(REFRESHICON).removeClass(LOADING);
},
_ajaxError: function (xhr, status) {
this.trigger(ERROR, { status: status, xhr: xhr });
},
_ajaxSuccess: function (contentTemplate) {
return function (data) {
var html = data;
if (contentTemplate) {
html = template(contentTemplate)(data || {});
}
this.content(html, data);
this.element.prop("scrollTop", 0);
this.trigger(REFRESH);
};
},
_showLoading: function() {
this.wrapper.find(REFRESHICON).addClass(LOADING);
},
_ajaxRequest: function (options) {
this._loadingIconTimeout = setTimeout(proxy(this._showLoading, this), 100);
$.ajax(extend({
type: "GET",
dataType: "html",
cache: false,
error: proxy(this._ajaxError, this),
complete: proxy(this._ajaxComplete, this),
success: proxy(this._ajaxSuccess(options.template), this)
}, options));
},
destroy: function () {
var that = this;
if (that.resizing) {
that.resizing.destroy();
}
if (that.dragging) {
that.dragging.destroy();
}
that.wrapper.off(NS)
.children(KWINDOWCONTENT).off(NS).end()
.find(".k-resize-handle,.k-window-titlebar").off(NS);
$(window).off("resize" + NS + that._marker);
clearTimeout(that._loadingIconTimeout);
Widget.fn.destroy.call(that);
that.unbind(undefined);
kendo.destroy(that.wrapper);
that._removeOverlay(true);
that.wrapper.empty().remove();
that.wrapper = that.appendTo = that.element = $();
},
_createWindow: function() {
var contentHtml = this.element,
options = this.options,
iframeSrcAttributes,
wrapper,
isRtl = kendo.support.isRtl(contentHtml);
if (options.scrollable === false) {
contentHtml.attr("style", "overflow:hidden;");
}
wrapper = $(templates.wrapper(options));
if (options.title !== false) {
wrapper.append(templates.titlebar(extend(templates, options)));
}
// Collect the src attributes of all iframes and then set them to empty string.
// This seems to fix this IE9 "feature": http://msdn.microsoft.com/en-us/library/gg622929%28v=VS.85%29.aspx?ppud=4
iframeSrcAttributes = contentHtml.find("iframe:not(.k-content)").map(function() {
var src = this.getAttribute("src");
this.src = "";
return src;
});
// Make sure the wrapper is appended to the body only once. IE9+ will throw exceptions if you move iframes in DOM
wrapper
.toggleClass("k-rtl", isRtl)
.appendTo(this.appendTo)
.append(contentHtml)
.find("iframe:not(.k-content)").each(function(index) {
// Restore the src attribute of the iframes when they are part of the live DOM tree
this.src = iframeSrcAttributes[index];
});
wrapper.find(".k-window-title")
.css(isRtl ? "left" : "right", wrapper.find(".k-window-actions").outerWidth() + 10);
contentHtml.css("visibility", "").show();
contentHtml.find("[data-role=editor]").each(function() {
var editor = $(this).data("kendoEditor");
if (editor) {
editor.refresh();
}
});
wrapper = contentHtml = null;
}
});
templates = {
wrapper: template("
"),
action: template(
"" +
"#= name # " +
" "
),
titlebar: template(
""
),
overlay: "
",
contentFrame: template(
""
),
resizeHandle: template("
")
};
function WindowResizing(wnd) {
var that = this;
that.owner = wnd;
that._draggable = new Draggable(wnd.wrapper, {
filter: ">" + KWINDOWRESIZEHANDLES,
group: wnd.wrapper.id + "-resizing",
dragstart: proxy(that.dragstart, that),
drag: proxy(that.drag, that),
dragend: proxy(that.dragend, that)
});
that._draggable.userEvents.bind("press", proxy(that.addOverlay, that));
that._draggable.userEvents.bind("release", proxy(that.removeOverlay, that));
}
WindowResizing.prototype = {
addOverlay: function () {
this.owner.wrapper.append(templates.overlay);
},
removeOverlay: function () {
this.owner.wrapper.find(KOVERLAY).remove();
},
dragstart: function (e) {
var that = this;
var wnd = that.owner;
var wrapper = wnd.wrapper;
that.elementPadding = parseInt(wrapper.css("padding-top"), 10);
that.initialPosition = kendo.getOffset(wrapper, "position");
that.resizeDirection = e.currentTarget.prop("className").replace("k-resize-handle k-resize-", "");
that.initialSize = {
width: wrapper.width(),
height: wrapper.height()
};
that.containerOffset = kendo.getOffset(wnd.appendTo, "position");
wrapper
.children(KWINDOWRESIZEHANDLES).not(e.currentTarget).hide();
$(BODY).css(CURSOR, e.currentTarget.css(CURSOR));
},
drag: function (e) {
var that = this,
wnd = that.owner,
wrapper = wnd.wrapper,
options = wnd.options,
direction = that.resizeDirection,
containerOffset = that.containerOffset,
initialPosition = that.initialPosition,
initialSize = that.initialSize,
newWidth, newHeight,
windowBottom, windowRight,
x = Math.max(e.x.location, containerOffset.left),
y = Math.max(e.y.location, containerOffset.top);
if (direction.indexOf("e") >= 0) {
newWidth = x - initialPosition.left;
wrapper.width(constrain(newWidth, options.minWidth, options.maxWidth));
} else if (direction.indexOf("w") >= 0) {
windowRight = initialPosition.left + initialSize.width;
newWidth = constrain(windowRight - x, options.minWidth, options.maxWidth);
wrapper.css({
left: windowRight - newWidth - containerOffset.left,
width: newWidth
});
}
if (direction.indexOf("s") >= 0) {
newHeight = y - initialPosition.top - that.elementPadding;
wrapper.height(constrain(newHeight, options.minHeight, options.maxHeight));
} else if (direction.indexOf("n") >= 0) {
windowBottom = initialPosition.top + initialSize.height;
newHeight = constrain(windowBottom - y, options.minHeight, options.maxHeight);
wrapper.css({
top: windowBottom - newHeight - containerOffset.top,
height: newHeight
});
}
if (newWidth) {
wnd.options.width = newWidth + "px";
}
if (newHeight) {
wnd.options.height = newHeight + "px";
}
wnd.resize();
},
dragend: function (e) {
var that = this,
wnd = that.owner,
wrapper = wnd.wrapper;
wrapper
.children(KWINDOWRESIZEHANDLES).not(e.currentTarget).show();
$(BODY).css(CURSOR, "");
if (wnd.touchScroller) {
wnd.touchScroller.reset();
}
if (e.keyCode == 27) {
wrapper.css(that.initialPosition)
.css(that.initialSize);
}
wnd.trigger(RESIZEEND);
return false;
},
destroy: function() {
if (this._draggable) {
this._draggable.destroy();
}
this._draggable = this.owner = null;
}
};
function WindowDragging(wnd, dragHandle) {
var that = this;
that.owner = wnd;
that._draggable = new Draggable(wnd.wrapper, {
filter: dragHandle,
group: wnd.wrapper.id + "-moving",
dragstart: proxy(that.dragstart, that),
drag: proxy(that.drag, that),
dragend: proxy(that.dragend, that),
dragcancel: proxy(that.dragcancel, that)
});
that._draggable.userEvents.stopPropagation = false;
}
WindowDragging.prototype = {
dragstart: function (e) {
var wnd = this.owner,
element = wnd.element,
actions = element.find(".k-window-actions"),
containerOffset = kendo.getOffset(wnd.appendTo);
wnd.trigger(DRAGSTART);
wnd.initialWindowPosition = kendo.getOffset(wnd.wrapper, "position");
wnd.startPosition = {
left: e.x.client - wnd.initialWindowPosition.left,
top: e.y.client - wnd.initialWindowPosition.top
};
if (actions.length > 0) {
wnd.minLeftPosition = actions.outerWidth() + parseInt(actions.css("right"), 10) - element.outerWidth();
} else {
wnd.minLeftPosition = 20 - element.outerWidth(); // at least 20px remain visible
}
wnd.minLeftPosition -= containerOffset.left;
wnd.minTopPosition = -containerOffset.top;
wnd.wrapper
.append(templates.overlay)
.children(KWINDOWRESIZEHANDLES).hide();
$(BODY).css(CURSOR, e.currentTarget.css(CURSOR));
},
drag: function (e) {
var wnd = this.owner,
position = wnd.options.position,
newTop = Math.max(e.y.client - wnd.startPosition.top, wnd.minTopPosition),
newLeft = Math.max(e.x.client - wnd.startPosition.left, wnd.minLeftPosition),
coordinates = {
left: newLeft,
top: newTop
};
$(wnd.wrapper).css(coordinates);
position.top = newTop;
position.left = newLeft;
},
_finishDrag: function() {
var wnd = this.owner;
wnd.wrapper
.children(KWINDOWRESIZEHANDLES).toggle(!wnd.options.isMinimized).end()
.find(KOVERLAY).remove();
$(BODY).css(CURSOR, "");
},
dragcancel: function (e) {
this._finishDrag();
e.currentTarget.closest(KWINDOW).css(this.owner.initialWindowPosition);
},
dragend: function () {
this._finishDrag();
this.owner.trigger(DRAGEND);
return false;
},
destroy: function() {
if (this._draggable) {
this._draggable.destroy();
}
this._draggable = this.owner = null;
}
};
kendo.ui.plugin(Window);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
mobile = kendo.mobile,
ui = mobile.ui,
attr = kendo.attr,
Class = kendo.Class,
Widget = ui.Widget,
ViewClone = kendo.ViewClone,
INIT = "init",
UI_OVERLAY = '
',
BEFORE_SHOW = "beforeShow",
SHOW = "show",
AFTER_SHOW = "afterShow",
BEFORE_HIDE = "beforeHide",
TRANSITION_END = "transitionEnd",
TRANSITION_START = "transitionStart",
HIDE = "hide",
DESTROY = "destroy",
Z_INDEX = "z-index",
attrValue = kendo.attrValue,
roleSelector = kendo.roleSelector;
function initPopOvers(element) {
var popovers = element.find(roleSelector("popover")),
idx, length,
roles = ui.roles;
for (idx = 0, length = popovers.length; idx < length; idx ++) {
kendo.initWidget(popovers[idx], {}, roles);
}
}
function preventScrollIfNotInput(e) {
if (!kendo.triggeredByInput(e)) {
e.preventDefault();
}
}
var View = Widget.extend({
init: function(element, options) {
Widget.fn.init.call(this, element, options);
this.params = {};
$.extend(this, options);
this.transition = this.transition || this.defaultTransition;
this._id();
this._layout();
this._overlay();
this._scroller();
this._model();
},
events: [
INIT,
BEFORE_SHOW,
SHOW,
AFTER_SHOW,
BEFORE_HIDE,
HIDE,
DESTROY,
TRANSITION_START,
TRANSITION_END
],
options: {
name: "View",
title: "",
reload: false,
transition: "",
defaultTransition: "",
useNativeScrolling: false,
stretch: false,
zoom: false,
model: null,
modelScope: window,
scroller: {},
initWidgets: true
},
enable: function(enable) {
if(typeof enable == "undefined") {
enable = true;
}
if(enable) {
this.overlay.hide();
} else {
this.overlay.show();
}
},
destroy: function() {
if (this.layout) {
this.layout.detach(this);
}
this.trigger(DESTROY);
Widget.fn.destroy.call(this);
if (this.scroller) {
this.scroller.destroy();
}
kendo.destroy(this.element);
},
purge: function() {
this.destroy();
this.element.remove();
},
triggerBeforeShow: function() {
if (this.trigger(BEFORE_SHOW, { view: this })) {
return false;
}
return true;
},
showStart: function() {
var that = this;
that.element.css("display", "");
if (!that.inited) {
that.inited = true;
that.trigger(INIT, {view: that});
}
if (that.layout) {
that.layout.attach(that);
}
that._padIfNativeScrolling();
that.trigger(SHOW, {view: that});
kendo.resize(that.element);
},
showEnd: function() {
this.trigger(AFTER_SHOW, {view: this});
this._padIfNativeScrolling();
},
hideStart: function() {
this.trigger(BEFORE_HIDE, {view: this});
},
hideEnd: function() {
var that = this;
that.element.hide();
that.trigger(HIDE, {view: that});
if (that.layout) {
that.layout.trigger(HIDE, { view : that, layout: that.layout });
}
},
beforeTransition: function(type){
this.trigger(TRANSITION_START, { type: type });
},
afterTransition: function(type){
this.trigger(TRANSITION_END, { type: type });
},
_padIfNativeScrolling: function() {
if (mobile.appLevelNativeScrolling()) {
var isAndroid = kendo.support.mobileOS && kendo.support.mobileOS.android,
topContainer = isAndroid ? "footer" : "header",
bottomContainer = isAndroid ? "header" : "footer";
this.content.css({
paddingTop: this[topContainer].height(),
paddingBottom: this[bottomContainer].height()
});
}
},
contentElement: function() {
var that = this;
return that.options.stretch ? that.content : that.scrollerContent;
},
clone: function(back) {
return new ViewClone(this);
},
_scroller: function() {
var that = this;
if (mobile.appLevelNativeScrolling()) {
return;
}
if (that.options.stretch) {
that.content.addClass("km-stretched-view");
} else {
that.content.kendoMobileScroller($.extend(that.options.scroller, { zoom: that.options.zoom, useNative: that.options.useNativeScrolling }));
that.scroller = that.content.data("kendoMobileScroller");
that.scrollerContent = that.scroller.scrollElement;
}
// prevent accidental address bar display when pulling the header
if (kendo.support.kineticScrollNeeded) {
$(that.element).on("touchmove", ".km-header", preventScrollIfNotInput);
if (!that.options.useNativeScrolling) {
$(that.element).on("touchmove", ".km-content", preventScrollIfNotInput);
}
}
},
_model: function() {
var that = this,
element = that.element,
model = that.options.model;
if (typeof model === "string") {
model = kendo.getter(model)(that.options.modelScope);
}
that.model = model;
initPopOvers(element);
that.element.css("display", "");
if (that.options.initWidgets) {
if (model) {
kendo.bind(element, model, ui, kendo.ui, kendo.dataviz.ui);
} else {
mobile.init(element.children());
}
}
that.element.css("display", "none");
},
_id: function() {
var element = this.element,
idAttrValue = element.attr("id") || "";
this.id = attrValue(element, "url") || "#" + idAttrValue;
if (this.id == "#") {
this.id = kendo.guid();
element.attr("id", this.id);
}
},
_layout: function() {
var that = this,
contentSelector = roleSelector("content"),
element = that.element;
element.addClass("km-view");
that.header = element.children(roleSelector("header")).addClass("km-header");
that.footer = element.children(roleSelector("footer")).addClass("km-footer");
if (!element.children(contentSelector)[0]) {
element.wrapInner("
');
}
that.content = element.children(roleSelector("content"))
.addClass("km-content");
that.element.prepend(that.header).append(that.footer);
if (that.layout) {
that.layout.setup(that);
}
},
_overlay: function() {
this.overlay = $(UI_OVERLAY).appendTo(this.element);
}
});
function initWidgets(collection) {
collection.each(function() {
kendo.initWidget($(this), {}, ui.roles);
});
}
var Layout = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
element = that.element;
that.header = element.children(roleSelector("header")).addClass("km-header");
that.footer = element.children(roleSelector("footer")).addClass("km-footer");
that.elements = that.header.add(that.footer);
initPopOvers(element);
kendo.mobile.init(that.element.children());
that.element.detach();
that.trigger(INIT, {layout: that});
},
options: {
name: "Layout"
},
events: [
INIT,
SHOW,
HIDE
],
setup: function(view) {
if (!view.header[0]) { view.header = this.header; }
if (!view.footer[0]) { view.footer = this.footer; }
},
detach: function(view) {
var that = this;
if (view.header === that.header && that.header[0]) {
view.element.prepend(that.header.detach()[0].cloneNode(true));
}
if (view.footer === that.footer && that.footer.length) {
view.element.append(that.footer.detach()[0].cloneNode(true));
}
},
attach: function(view) {
var that = this,
previousView = that.currentView;
if (previousView) {
that.detach(previousView);
}
if (view.header === that.header) {
that.header.detach();
view.element.children(roleSelector("header")).remove();
view.element.prepend(that.header);
}
if (view.footer === that.footer) {
that.footer.detach();
view.element.children(roleSelector("footer")).remove();
view.element.append(that.footer);
}
that.trigger(SHOW, {layout: that, view: view});
that.currentView = view;
}
});
var Observable = kendo.Observable,
bodyRegExp = /]*>(([\u000a\u000d\u2028\u2029]|.)*)<\/body>/i,
LOAD_START = "loadStart",
LOAD_COMPLETE = "loadComplete",
SHOW_START = "showStart",
SAME_VIEW_REQUESTED = "sameViewRequested",
VIEW_SHOW = "viewShow",
AFTER = "after";
var ViewEngine = Observable.extend({
init: function(options) {
var that = this,
views,
errorMessage,
container;
Observable.fn.init.call(that);
$.extend(that, options);
that.sandbox = $("
");
container = that.container;
views = that._hideViews(container);
that.rootView = views.first();
if (!that.rootView[0] && options.rootNeeded) {
if (container[0] == kendo.mobile.application.element[0]) {
errorMessage = 'Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.';
} else {
errorMessage = 'Your pane element does not contain any direct child elements with data-role="view" attribute set.';
}
throw new Error(errorMessage);
}
that.layouts = {};
that.viewContainer = new kendo.ViewContainer(that.container);
that.viewContainer.bind("accepted", function(e) {
e.view.params = that.params;
});
that.viewContainer.bind("complete", function(e) {
that.trigger(VIEW_SHOW, { view: e.view });
});
that.viewContainer.bind(AFTER, function(e) {
that.trigger(AFTER);
});
that._setupLayouts(container);
initWidgets(container.children(roleSelector("modalview drawer")));
},
destroy: function() {
kendo.destroy(this.container);
for (var id in this.layouts) {
this.layouts[id].destroy();
}
},
view: function() {
return this.viewContainer.view;
},
showView: function(url, transition, params) {
url = url.replace(new RegExp("^" + this.remoteViewURLPrefix), "");
if (url === "" && this.remoteViewURLPrefix) {
url = "/";
}
if (url === this.url) {
this.trigger(SAME_VIEW_REQUESTED);
return false;
}
this.trigger(SHOW_START);
var that = this,
showClosure = function(view) {
return that.viewContainer.show(view, transition, url);
},
element = that._findViewElement(url),
view = kendo.widgetInstance(element);
that.url = url;
that.params = params;
if (view && view.reload) {
view.purge();
element = [];
}
this.trigger("viewTypeDetermined", { remote: element.length === 0, url: url });
if (element[0]) {
if (!view) {
view = that._createView(element);
}
return showClosure(view);
} else {
that._loadView(url, showClosure);
return true;
}
},
append: function(html, url) {
var that = this,
sandbox = that.sandbox,
urlPath = (url || "").split("?")[0],
container = that.container,
views,
modalViews,
view;
if (bodyRegExp.test(html)) {
html = RegExp.$1;
}
sandbox[0].innerHTML = html;
container.append(sandbox.children("script, style"));
views = that._hideViews(sandbox);
view = views.first();
// Generic HTML content found as remote view - no remote view markers
if (!view.length) {
views = view = sandbox.wrapInner("
").children(); // one element
}
if (urlPath) {
view.hide().attr(attr("url"), urlPath);
}
that._setupLayouts(sandbox);
modalViews = sandbox.children(roleSelector("modalview drawer"));
container.append(sandbox.children(roleSelector("layout modalview drawer")).add(views));
// Initialize the modalviews after they have been appended to the final container
initWidgets(modalViews);
return that._createView(view);
},
_findViewElement: function(url) {
var element,
urlPath = url.split("?")[0];
if (!urlPath) {
return this.rootView;
}
element = this.container.children("[" + attr("url") + "='" + urlPath + "']");
// do not try to search for "#/foo/bar" id, jQuery throws error
if (!element[0] && urlPath.indexOf("/") === -1) {
element = this.container.children(urlPath.charAt(0) === "#" ? urlPath : "#" + urlPath);
}
return element;
},
_createView: function(element) {
var that = this,
viewOptions,
layout = attrValue(element, "layout");
if (typeof layout === "undefined") {
layout = that.layout;
}
if (layout) {
layout = that.layouts[layout];
}
viewOptions = {
defaultTransition: that.transition,
loader: that.loader,
container: that.container,
layout: layout,
modelScope: that.modelScope,
reload: attrValue(element, "reload")
};
return kendo.initWidget(element, viewOptions, ui.roles);
},
_loadView: function(url, callback) {
var that = this;
if (this.serverNavigation) {
location.href = url;
return;
}
if (that._xhr) {
that._xhr.abort();
}
that.trigger(LOAD_START);
that._xhr = $.get(kendo.absoluteURL(url, that.remoteViewURLPrefix), function(html) {
that.trigger(LOAD_COMPLETE);
callback(that.append(html, url));
}, 'html')
.fail(function(request) {
that.trigger(LOAD_COMPLETE);
if (request.status === 0 && request.responseText) {
callback(that.append(request.responseText, url));
}
});
},
_hideViews: function(container) {
return container.children(roleSelector("view splitview")).hide();
},
_setupLayouts: function(element) {
var that = this;
element.children(roleSelector("layout")).each(function() {
var layout = $(this),
platform = attrValue(layout, "platform");
if (platform === undefined || platform === mobile.application.os.name) {
that.layouts[kendo.attrValue(layout, "id")] = kendo.initWidget(layout, {}, ui.roles);
}
});
}
});
kendo.mobile.ViewEngine = ViewEngine;
ui.plugin(View);
ui.plugin(Layout);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.mobile.ui,
Widget = ui.Widget,
CAPTURE_EVENTS = $.map(kendo.eventMap, function(value) { return value; }).join(" ").split(" ");
var Loader = Widget.extend({
init: function(container, options) {
var that = this,
element = $('
');
Widget.fn.init.call(that, element, options);
that.container = container;
that.captureEvents = false;
that._attachCapture();
element.append(that.options.loading).hide().appendTo(container);
},
options: {
name: "Loader",
loading: "Loading... ",
timeout: 100
},
show: function() {
var that = this;
clearTimeout(that._loading);
if (that.options.loading === false) {
return;
}
that.captureEvents = true;
that._loading = setTimeout(function() {
that.element.show();
}, that.options.timeout);
},
hide: function() {
this.captureEvents = false;
clearTimeout(this._loading);
this.element.hide();
},
changeMessage: function(message) {
this.options.loading = message;
this.element.find(">h1").html(message);
},
transition: function() {
this.captureEvents = true;
this.container.css("pointer-events", "none");
},
transitionDone: function() {
this.captureEvents = false;
this.container.css("pointer-events", "");
},
_attachCapture: function() {
var that = this;
that.captureEvents = false;
function capture(e) {
if (that.captureEvents) {
e.preventDefault();
}
}
for (var i = 0; i < CAPTURE_EVENTS.length; i ++) {
that.container[0].addEventListener(CAPTURE_EVENTS[i], capture, true);
}
}
});
ui.plugin(Loader);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
mobile = kendo.mobile,
roleSelector = kendo.roleSelector,
ui = mobile.ui,
Widget = ui.Widget,
ViewEngine = mobile.ViewEngine,
View = ui.View,
Loader = mobile.ui.Loader,
EXTERNAL = "external",
HREF = "href",
DUMMY_HREF = "#!",
NAVIGATE = "navigate",
VIEW_SHOW = "viewShow",
SAME_VIEW_REQUESTED = "sameViewRequested",
OS = kendo.support.mobileOS,
SKIP_TRANSITION_ON_BACK_BUTTON = OS.ios && !OS.appMode && OS.flatVersion >= 700,
WIDGET_RELS = /popover|actionsheet|modalview|drawer/,
BACK = "#:back",
attrValue = kendo.attrValue,
// navigation element roles
buttonRoles = "button backbutton detailbutton listview-link",
linkRoles = "tab";
var Pane = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
options = that.options;
element = that.element;
element.addClass("km-pane");
if (that.options.collapsible) {
element.addClass("km-collapsible-pane");
}
this.history = [];
this.historyCallback = function(url, params, backButtonPressed) {
var transition = that.transition;
that.transition = null;
// swiping back in iOS leaves the app in a very broken state if we perform a transition
if (SKIP_TRANSITION_ON_BACK_BUTTON && backButtonPressed) {
transition = "none";
}
return that.viewEngine.showView(url, transition, params);
};
this._historyNavigate = function(url) {
if (url === BACK) {
if (that.history.length === 1) {
return;
}
that.history.pop();
url = that.history[that.history.length - 1];
} else {
that.history.push(url);
}
that.historyCallback(url, kendo.parseQueryStringParams(url));
};
this._historyReplace = function(url) {
var params = kendo.parseQueryStringParams(url);
that.history[that.history.length - 1] = url;
that.historyCallback(url, params);
};
that.loader = new Loader(element, {
loading: that.options.loading
});
that.viewEngine = new ViewEngine({
container: element,
transition: options.transition,
modelScope: options.modelScope,
rootNeeded: !options.initial,
serverNavigation: options.serverNavigation,
remoteViewURLPrefix: options.root || "",
layout: options.layout,
loader: that.loader
});
that.viewEngine.bind("showStart", function() {
that.loader.transition();
that.closeActiveDialogs();
});
that.viewEngine.bind("after", function(e) {
that.loader.transitionDone();
});
that.viewEngine.bind(VIEW_SHOW, function(e) {
that.trigger(VIEW_SHOW, e);
});
that.viewEngine.bind("loadStart", function() {
that.loader.show();
});
that.viewEngine.bind("loadComplete", function() {
that.loader.hide();
});
that.viewEngine.bind(SAME_VIEW_REQUESTED, function() {
that.trigger(SAME_VIEW_REQUESTED);
});
that.viewEngine.bind("viewTypeDetermined", function(e) {
if (!e.remote || !that.options.serverNavigation) {
that.trigger(NAVIGATE, { url: e.url });
}
});
this._setPortraitWidth();
kendo.onResize(function() {
that._setPortraitWidth();
});
that._setupAppLinks();
},
closeActiveDialogs: function() {
var dialogs = this.element.find(roleSelector("actionsheet popover modalview")).filter(":visible");
dialogs.each(function() {
kendo.widgetInstance($(this), ui).close();
});
},
navigateToInitial: function() {
var initial = this.options.initial;
if (initial) {
this.navigate(initial);
}
},
options: {
name: "Pane",
portraitWidth: "",
transition: "",
layout: "",
collapsible: false,
initial: null,
modelScope: window,
loading: "Loading... "
},
events: [
NAVIGATE,
VIEW_SHOW,
SAME_VIEW_REQUESTED
],
append: function(html) {
return this.viewEngine.append(html);
},
destroy: function() {
Widget.fn.destroy.call(this);
this.viewEngine.destroy();
this.userEvents.destroy();
},
navigate: function(url, transition) {
if (url instanceof View) {
url = url.id;
}
this.transition = transition;
this._historyNavigate(url);
},
replace: function(url, transition) {
if (url instanceof View) {
url = url.id;
}
this.transition = transition;
this._historyReplace(url);
},
bindToRouter: function(router) {
var that = this,
options = that.options,
initial = options.initial,
viewEngine = this.viewEngine;
router.bind("init", function(e) {
var url = e.url,
attrUrl = router.pushState ? url : "/";
viewEngine.rootView.attr(kendo.attr("url"), attrUrl);
if (url === "/" && initial) {
router.navigate(initial, true);
e.preventDefault(); // prevents from executing routeMissing, by default
}
});
router.bind("routeMissing", function(e) {
if (!that.historyCallback(e.url, e.params, e.backButtonPressed)) {
e.preventDefault();
}
});
router.bind("same", function() {
that.trigger(SAME_VIEW_REQUESTED);
});
that._historyNavigate = function(url) {
router.navigate(url);
};
that._historyReplace = function(url) {
router.replace(url);
};
},
hideLoading: function() {
this.loader.hide();
},
showLoading: function() {
this.loader.show();
},
changeLoadingMessage: function(message) {
this.loader.changeMessage(message);
},
view: function() {
return this.viewEngine.view();
},
_setPortraitWidth: function() {
var width,
portraitWidth = this.options.portraitWidth;
if (portraitWidth) {
width = kendo.mobile.application.element.is(".km-vertical") ? portraitWidth : "auto";
this.element.css("width", width);
}
},
_setupAppLinks: function() {
var that = this;
this.element.handler(this)
.on("down", roleSelector(linkRoles), "_mouseup")
.on("click", roleSelector(linkRoles + " " + buttonRoles), "_appLinkClick");
this.userEvents = new kendo.UserEvents(this.element, {
filter: roleSelector(buttonRoles),
tap: function(e) {
e.event.currentTarget = e.touch.currentTarget;
that._mouseup(e.event);
}
});
},
_appLinkClick: function (e) {
var href = $(e.currentTarget).attr("href");
var remote = href && href[0] !== "#" && this.options.serverNavigation;
if(!remote && attrValue($(e.currentTarget), "rel") != EXTERNAL) {
e.preventDefault();
}
},
_mouseup: function(e) {
if (e.which > 1 || e.isDefaultPrevented()) {
return;
}
var pane = this,
link = $(e.currentTarget),
transition = attrValue(link, "transition"),
rel = attrValue(link, "rel") || "",
target = attrValue(link, "target"),
href = link.attr(HREF),
delayedTouchEnd = SKIP_TRANSITION_ON_BACK_BUTTON && link[0].offsetHeight === 0,
remote = href && href[0] !== "#" && this.options.serverNavigation;
if (delayedTouchEnd || remote || rel === EXTERNAL || (typeof href === "undefined") || href === DUMMY_HREF) {
return;
}
// Prevent iOS address bar progress display for in app navigation
link.attr(HREF, DUMMY_HREF);
setTimeout(function() { link.attr(HREF, href); });
if (rel.match(WIDGET_RELS)) {
kendo.widgetInstance($(href), ui).openFor(link);
// if propagation is not stopped and actionsheet is opened from tabstrip,
// the actionsheet is closed immediately.
if (rel === "actionsheet" || rel === "drawer") {
e.stopPropagation();
}
} else {
if (target === "_top") {
pane = mobile.application.pane;
}
else if (target) {
pane = $("#" + target).data("kendoMobilePane");
}
pane.navigate(href, transition);
}
e.preventDefault();
}
});
Pane.wrap = function(element) {
if (!element.is(roleSelector("view"))) {
element = element.wrap('
').parent();
}
var paneContainer = element.wrap('').parent(),
pane = new Pane(paneContainer);
pane.navigate("");
return pane;
};
ui.plugin(Pane);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
mobile = kendo.mobile,
ui = mobile.ui,
SHOW = "show",
HIDE = "hide",
OPEN = "open",
CLOSE = "close",
WRAPPER = '',
ARROW = '',
OVERLAY = '',
DIRECTION_CLASSES = "km-up km-down km-left km-right",
Widget = ui.Widget,
DIRECTIONS = {
"down": {
origin: "bottom center",
position: "top center"
},
"up": {
origin: "top center",
position: "bottom center"
},
"left": {
origin: "center left",
position: "center right",
collision: "fit flip"
},
"right": {
origin: "center right",
position: "center left",
collision: "fit flip"
}
},
ANIMATION = {
animation: {
open: {
effects: "fade:in",
duration: 0
},
close: {
effects: "fade:out",
duration: 400
}
}
},
DIMENSIONS = {
"horizontal": { offset: "top", size: "height" },
"vertical": { offset: "left", size: "width" }
},
REVERSE = {
"up": "down",
"down": "up",
"left": "right",
"right": "left"
};
var Popup = Widget.extend({
init: function(element, options) {
var that = this,
containerPopup = element.closest(".km-modalview-wrapper"),
viewport = element.closest(".km-root").children('.km-pane').first(),
container = containerPopup[0] ? containerPopup : viewport,
popupOptions,
axis;
if (options.viewport) {
viewport = options.viewport;
} else if (!viewport[0]) {
viewport = window;
}
if (options.container) {
container = options.container;
} else if (!container[0]) {
container = document.body;
}
popupOptions = {
viewport: viewport,
copyAnchorStyles: false,
autosize: true,
open: function() {
that.overlay.show();
},
activate: $.proxy(that._activate, that),
deactivate: function() {
that.overlay.hide();
if (!that._apiCall) {
that.trigger(HIDE);
}
that._apiCall = false;
}
};
Widget.fn.init.call(that, element, options);
element = that.element;
options = that.options;
element.wrap(WRAPPER).addClass("km-popup").show();
axis = that.options.direction.match(/left|right/) ? "horizontal" : "vertical";
that.dimensions = DIMENSIONS[axis];
that.wrapper = element.parent().css({
width: options.width,
height: options.height
}).addClass("km-popup-wrapper km-" + options.direction).hide();
that.arrow = $(ARROW).prependTo(that.wrapper).hide();
that.overlay = $(OVERLAY).appendTo(container).hide();
popupOptions.appendTo = that.overlay;
if (options.className) {
that.overlay.addClass(options.className);
}
that.popup = new kendo.ui.Popup(that.wrapper, $.extend(true, popupOptions, ANIMATION, DIRECTIONS[options.direction]));
},
options: {
name: "Popup",
width: 240,
height: "",
direction: "down",
container: null,
viewport: null
},
events: [
HIDE
],
show: function(target) {
this.popup.options.anchor = $(target);
this.popup.open();
},
hide: function() {
this._apiCall = true;
this.popup.close();
},
destroy: function() {
Widget.fn.destroy.call(this);
this.popup.destroy();
this.overlay.remove();
},
target: function() {
return this.popup.options.anchor;
},
_activate: function() {
var that = this,
direction = that.options.direction,
dimensions = that.dimensions,
offset = dimensions.offset,
popup = that.popup,
anchor = popup.options.anchor,
anchorOffset = $(anchor).offset(),
elementOffset = $(popup.element).offset(),
cssClass = popup.flipped ? REVERSE[direction] : direction,
min = that.arrow[dimensions.size]() * 2,
max = that.element[dimensions.size]() - that.arrow[dimensions.size](),
size = $(anchor)[dimensions.size](),
offsetAmount = anchorOffset[offset] - elementOffset[offset] + (size / 2);
if (offsetAmount < min) {
offsetAmount = min;
}
if (offsetAmount > max) {
offsetAmount = max;
}
that.wrapper.removeClass(DIRECTION_CLASSES).addClass("km-" + cssClass);
that.arrow.css(offset, offsetAmount).show();
}
});
var PopOver = Widget.extend({
init: function(element, options) {
var that = this,
popupOptions;
that.initialOpen = false;
Widget.fn.init.call(that, element, options);
popupOptions = $.extend({
className: "km-popover-root",
hide: function() { that.trigger(CLOSE); }
}, this.options.popup);
that.popup = new Popup(that.element, popupOptions);
that.popup.overlay.on("move", function(e) {
if (e.target == that.popup.overlay[0]) {
e.preventDefault();
}
});
that.pane = new ui.Pane(that.element, this.options.pane);
that.pane.navigateToInitial();
kendo.notify(that, ui);
},
options: {
name: "PopOver",
popup: { },
pane: { }
},
events: [
OPEN,
CLOSE
],
open: function(target) {
this.popup.show(target);
if (!this.initialOpen) {
this.pane.navigate("");
this.popup.popup._position();
this.initialOpen = true;
}
},
openFor: function(target) {
this.open(target);
this.trigger(OPEN, { target: this.popup.target() });
},
close: function() {
this.popup.hide();
},
destroy: function() {
Widget.fn.destroy.call(this);
this.pane.destroy();
this.popup.destroy();
kendo.destroy(this.element);
}
});
ui.plugin(Popup);
ui.plugin(PopOver);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.mobile.ui,
Popup = kendo.ui.Popup,
SHIM = '
',
SHOW = "show",
HIDE = "hide",
Widget = ui.Widget;
var Shim = Widget.extend({
init: function(element, options) {
var that = this,
app = kendo.mobile.application,
os = kendo.support.mobileOS,
osname = app ? app.os.name : (os ? os.name : "ios"),
ioswp = osname === "ios" || osname === "wp" || (app ? app.os.skin : false),
bb = osname === "blackberry",
align = options.align || (ioswp ? "bottom center" : bb ? "center right" : "center center"),
position = options.position || (ioswp ? "bottom center" : bb ? "center right" : "center center"),
effect = options.effect || (ioswp ? "slideIn:up" : bb ? "slideIn:left" : "fade:in"),
shim = $(SHIM).handler(that).hide();
Widget.fn.init.call(that, element, options);
that.shim = shim;
element = that.element;
options = that.options;
if (options.className) {
that.shim.addClass(options.className);
}
if (!options.modal) {
that.shim.on("up", "_hide");
}
(app ? app.element : $(document.body)).append(shim);
that.popup = new Popup(that.element, {
anchor: shim,
modal: true,
appendTo: shim,
origin: align,
position: position,
animation: {
open: {
effects: effect,
duration: options.duration
},
close: {
duration: options.duration
}
},
close: function(e) {
var prevented = false;
if (!that._apiCall) {
prevented = that.trigger(HIDE);
}
if (prevented) {
e.preventDefault();
}
that._apiCall = false;
},
deactivate: function() { // Deactivate event can't be prevented.
shim.hide();
},
open: function() {
shim.show();
}
});
kendo.notify(that);
},
events: [ HIDE ],
options: {
name: "Shim",
modal: false,
align: undefined,
position: undefined,
effect: undefined,
duration: 200
},
show: function() {
this.popup.open();
},
hide: function() {
this._apiCall = true;
this.popup.close();
},
destroy: function() {
Widget.fn.destroy.call(this);
this.shim.kendoDestroy();
this.popup.destroy();
this.shim.remove();
},
_hide: function(e) {
if (!e || !$.contains(this.shim.children().children(".k-popup")[0], e.target)) {
this.popup.close();
}
}
});
ui.plugin(Shim);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
support = kendo.support,
ui = kendo.mobile.ui,
Shim = ui.Shim,
Popup = ui.Popup,
Widget = ui.Widget,
OPEN = "open",
CLOSE = "close",
COMMAND = "command",
BUTTONS = "li>a",
CONTEXT_DATA = "actionsheetContext",
WRAP = '
',
cancelTemplate = kendo.template('#:cancel#
')
.parent()
.bind("DOMMouseScroll" + NS + " mousewheel" + NS, proxy(that._wheelScroll, that));
if (kendo.support.kineticScrollNeeded) {
that.drag = new kendo.UserEvents(that.wrapper, {
global: true,
move: function(e) {
that.verticalScrollbar.scrollTop(that.verticalScrollbar.scrollTop() - e.y.delta);
wrapper.scrollLeft(wrapper.scrollLeft() - e.x.delta);
e.preventDefault();
}
});
}
that.verticalScrollbar = $('
')
.css({
width: scrollbar
}).appendTo(element)
.bind("scroll" + NS, proxy(that._scroll, that));
},
_wheelScroll: function (e) {
if (e.ctrlKey) {
return;
}
var scrollTop = this.verticalScrollbar.scrollTop(),
delta = kendo.wheelDeltaY(e);
if (delta) {
e.preventDefault();
//In Firefox DOMMouseScroll event cannot be canceled
$(e.currentTarget).one("wheel" + NS, false);
this.verticalScrollbar.scrollTop(scrollTop + (-delta));
}
},
_scroll: function(e) {
var that = this,
scrollTop = e.currentTarget.scrollTop,
dataSource = that.dataSource,
rowHeight = that.itemHeight,
skip = dataSource.skip() || 0,
start = that._rangeStart || skip,
height = that.element.innerHeight(),
isScrollingUp = !!(that._scrollbarTop && that._scrollbarTop > scrollTop),
firstItemIndex = math.max(math.floor(scrollTop / rowHeight), 0),
lastItemIndex = math.max(firstItemIndex + math.floor(height / rowHeight), 0);
that._scrollTop = scrollTop - (start * rowHeight);
that._scrollbarTop = scrollTop;
if (!that._fetch(firstItemIndex, lastItemIndex, isScrollingUp)) {
that.wrapper[0].scrollTop = that._scrollTop;
}
},
_fetch: function(firstItemIndex, lastItemIndex, scrollingUp) {
var that = this,
dataSource = that.dataSource,
itemHeight = that.itemHeight,
take = dataSource.take(),
rangeStart = that._rangeStart || dataSource.skip() || 0,
currentSkip = math.floor(firstItemIndex / take) * take,
fetching = false,
prefetchAt = 0.33;
if (firstItemIndex < rangeStart) {
fetching = true;
rangeStart = math.max(0, lastItemIndex - take);
that._scrollTop = (firstItemIndex - rangeStart) * itemHeight;
that._page(rangeStart, take);
} else if (lastItemIndex >= rangeStart + take && !scrollingUp) {
fetching = true;
rangeStart = firstItemIndex;
that._scrollTop = itemHeight;
that._page(rangeStart, take);
} else if (!that._fetching) {
if (firstItemIndex < (currentSkip + take) - take * prefetchAt && firstItemIndex > take) {
dataSource.prefetch(currentSkip - take, take);
}
if (lastItemIndex > currentSkip + take * prefetchAt) {
dataSource.prefetch(currentSkip + take, take);
}
}
return fetching;
},
_page: function(skip, take) {
var that = this,
dataSource = that.dataSource;
clearTimeout(that._timeout);
that._fetching = true;
that._rangeStart = skip;
if (dataSource.inRange(skip, take)) {
dataSource.range(skip, take);
} else {
kendo.ui.progress(that.wrapper.parent(), true);
that._timeout = setTimeout(function() {
dataSource.range(skip, take);
}, 100);
}
},
refresh: function() {
var that = this,
html = "",
maxHeight = 250000,
dataSource = that.dataSource,
rangeStart = that._rangeStart,
scrollbar = !kendo.support.kineticScrollNeeded ? kendo.support.scrollbar() : 0,
wrapperElement = that.wrapper[0],
totalHeight,
idx,
itemHeight;
kendo.ui.progress(that.wrapper.parent(), false);
clearTimeout(that._timeout);
itemHeight = that.itemHeight = that.options.itemHeight() || 0;
var addScrollBarHeight = (wrapperElement.scrollWidth > wrapperElement.offsetWidth) ? scrollbar : 0;
totalHeight = dataSource.total() * itemHeight + addScrollBarHeight;
for (idx = 0; idx < math.floor(totalHeight / maxHeight); idx++) {
html += '
';
}
if (totalHeight % maxHeight) {
html += '
';
}
that.verticalScrollbar.html(html);
wrapperElement.scrollTop = that._scrollTop;
if (that.drag) {
that.drag.cancel();
}
if (rangeStart && !that._fetching) { // we are rebound from outside local range should be reset
that._rangeStart = dataSource.skip();
if (dataSource.page() === 1) {// reset the scrollbar position if datasource is filtered
that.verticalScrollbar[0].scrollTop = 0;
}
}
that._fetching = false;
}
});
function groupCells(count) {
return new Array(count + 1).join(' ');
}
function stringifyAttributes(attributes) {
var attr,
result = " ";
if (attributes) {
if (typeof attributes === STRING) {
return attributes;
}
for (attr in attributes) {
result += attr + '="' + attributes[attr] + '"';
}
}
return result;
}
var defaultCommands = {
create: {
text: "Add new record",
imageClass: "k-add",
className: "k-grid-add",
iconClass: "k-icon"
},
cancel: {
text: "Cancel changes",
imageClass: "k-cancel",
className: "k-grid-cancel-changes",
iconClass: "k-icon"
},
save: {
text: "Save changes",
imageClass: "k-update",
className: "k-grid-save-changes",
iconClass: "k-icon"
},
destroy: {
text: "Delete",
imageClass: "k-delete",
className: "k-grid-delete",
iconClass: "k-icon"
},
edit: {
text: "Edit",
imageClass: "k-edit",
className: "k-grid-edit",
iconClass: "k-icon"
},
update: {
text: "Update",
imageClass: "k-update",
className: "k-primary k-grid-update",
iconClass: "k-icon"
},
canceledit: {
text: "Cancel",
imageClass: "k-cancel",
className: "k-grid-cancel",
iconClass: "k-icon"
}
};
function heightAboveHeader(context) {
var top = 0;
$('> .k-grouping-header, > .k-grid-toolbar', context).each(function () {
top += this.offsetHeight;
});
return top;
}
function cursor(context, value) {
$('th, th .k-grid-filter, th .k-link', context)
.add(document.body)
.css('cursor', value);
}
function buildEmptyAggregatesObject(aggregates) {
var idx,
length,
aggregate = {},
fieldsMap = {};
if (!isEmptyObject(aggregates)) {
if (!isArray(aggregates)){
aggregates = [aggregates];
}
for (idx = 0, length = aggregates.length; idx < length; idx++) {
aggregate[aggregates[idx].aggregate] = 0;
fieldsMap[aggregates[idx].field] = aggregate;
}
}
return fieldsMap;
}
function reorder(selector, source, dest, before) {
source = selector.eq(source);
if (typeof dest == "number") {
source[before ? "insertBefore" : "insertAfter"](selector.eq(dest));
} else {
source.appendTo(dest);
}
}
function elements(lockedContent, content, filter) {
return $(lockedContent).add(content).find(filter);
}
function attachCustomCommandEvent(context, container, commands) {
var idx,
length,
command,
commandName;
commands = !isArray(commands) ? [commands] : commands;
for (idx = 0, length = commands.length; idx < length; idx++) {
command = commands[idx];
if (isPlainObject(command) && command.click) {
commandName = command.name || command.text;
container.on(CLICK + NS, "a.k-grid-" + (commandName || "").replace(/\s/g, ""), { commandName: commandName }, proxy(command.click, context));
}
}
}
function visibleColumns(columns) {
return grep(columns, function(column) {
return !column.hidden;
});
}
function columnsWidth(cols) {
var colWidth, width = 0;
for (var idx = 0, length = cols.length; idx < length; idx++) {
colWidth = cols[idx].style.width;
if (colWidth && colWidth.indexOf("%") == -1) {
width += parseInt(colWidth, 10);
}
}
return width;
}
function lockedColumns(columns) {
return grep(columns, function(column) {
return column.locked;
});
}
function nonLockedColumns(columns) {
return grep(columns, function(column) {
return !column.locked;
});
}
function visibleNonLockedColumns(columns) {
return grep(columns, function(column) {
return !column.locked && !column.hidden;
});
}
function visibleLockedColumns(columns) {
return grep(columns, function(column) {
return column.locked && !column.hidden;
});
}
function appendContent(tbody, table, html) {
var placeholder,
tmp = tbody;
if (tbodySupportsInnerHtml) {
tbody[0].innerHTML = html;
} else {
placeholder = document.createElement("div");
placeholder.innerHTML = "";
tbody = placeholder.firstChild.firstChild;
table[0].replaceChild(tbody, tmp[0]);
tbody = $(tbody);
}
return tbody;
}
function addHiddenStyle(attr) {
attr = attr || {};
var style = attr.style;
if(!style) {
style = "display:none";
} else {
style = style.replace(/((.*)?display)(.*)?:([^;]*)/i, "$1:none");
if(style === attr.style) {
style = style.replace(/(.*)?/i, "display:none;$1");
}
}
return extend({}, attr, { style: style });
}
function removeHiddenStyle(attr) {
attr = attr || {};
var style = attr.style;
if(style) {
attr.style = style.replace(/(display\s*:\s*none\s*;?)*/ig, "");
}
return attr;
}
function normalizeCols(table, visibleColumns, hasDetails, groups) {
var colgroup = table.find(">colgroup"),
width,
cols = map(visibleColumns, function(column) {
width = column.width;
if (width && parseInt(width, 10) !== 0) {
return kendo.format('
').css({
height: handle.data("th").outerHeight() + that.tbody.attr("clientHeight")
});
},
start: function(e) {
th = $(e.currentTarget).data("th");
if (isMobile) {
that._hideResizeHandle();
}
var index = $.inArray(th[0], th.parent().children(":visible")),
header = th.closest("table");
isLocked = header.parent().hasClass("k-grid-header-locked");
var contentTable = isLocked ? that.lockedTable : that.table,
footer = that.footer || $();
if (that.footer && that.lockedContent) {
footer = isLocked ? that.footer.children(".k-grid-footer-locked") : that.footer.children(".k-grid-footer-wrap");
}
cursor(that.wrapper, 'col-resize');
if (options.scrollable) {
col = header.find("col:eq(" + index + ")")
.add(contentTable.children("colgroup").find("col:eq(" + index + ")"))
.add(footer.find("colgroup").find("col:eq(" + index + ")"));
} else {
col = contentTable.children("colgroup").find("col:eq(" + index + ")");
}
columnStart = e.x.location;
columnWidth = th.outerWidth();
gridWidth = isLocked ? contentTable.children("tbody").outerWidth() : that.tbody.outerWidth(); // IE returns 0 if grid is empty and scrolling is enabled
},
resize: function(e) {
var rtlMultiplier = isRtl ? -1 : 1,
currentWidth = columnWidth + (e.x.location * rtlMultiplier) - (columnStart * rtlMultiplier);
if (options.scrollable) {
var footer;
if (isLocked && that.lockedFooter) {
footer = that.lockedFooter.children("table");
} else if (that.footer) {
footer = that.footer.find(">.k-grid-footer-wrap>table");
}
if (!footer[0]) {
footer = $();
}
var header = th.closest("table");
var contentTable = isLocked ? that.lockedTable : that.table;
var constrain = false;
var totalWidth = that.wrapper.width() - scrollbar;
var width = currentWidth;
if (isLocked && gridWidth - columnWidth + width > totalWidth) {
width = columnWidth + (totalWidth - gridWidth - scrollbar * 2);
if (width < 0) {
width = currentWidth;
}
constrain = true;
}
if (width > 10) {
col.css('width', width);
if (gridWidth) {
if (constrain) {
width = totalWidth - scrollbar * 2;
} else {
width = gridWidth + (e.x.location * rtlMultiplier) - (columnStart * rtlMultiplier);
}
contentTable
.add(header)
.add(footer)
.css('width', width);
if (!isLocked) {
that._footerWidth = width;
}
}
}
} else if (currentWidth > 10) {
col.css('width', currentWidth);
}
},
resizeend: function() {
var newWidth = th.outerWidth(),
column,
header;
cursor(that.wrapper, "");
if (columnWidth != newWidth) {
header = that.lockedHeader ? that.lockedHeader.find("thead:first tr:first").add(that.thead.find("tr:first")) : th.parent();
column = that.columns[header.find("th:not(.k-group-cell):not(.k-hierarchy-cell)").index(th)];
column.width = newWidth;
that.trigger(COLUMNRESIZE, {
column: column,
oldWidth: columnWidth,
newWidth: newWidth
});
that._applyLockedContainersWidth();
that._syncLockedContentHeight();
that._syncLockedHeaderHeight();
}
that._hideResizeHandle();
th = null;
}
});
}
},
_draggable: function() {
var that = this;
if (that.options.reorderable) {
if (that._draggableInstance) {
that._draggableInstance.destroy();
}
that._draggableInstance = that.wrapper.kendoDraggable({
group: kendo.guid(),
filter: that.content ? ".k-grid-header:first " + HEADERCELLS : "table:first>.k-grid-header " + HEADERCELLS,
drag: function() {
that._hideResizeHandle();
},
hint: function(target) {
return $('')
.css({
width: target.width(),
paddingLeft: target.css("paddingLeft"),
paddingRight: target.css("paddingRight"),
lineHeight: target.height() + "px",
paddingTop: target.css("paddingTop"),
paddingBottom: target.css("paddingBottom")
})
.html(target.attr(kendo.attr("title")) || target.attr(kendo.attr("field")) || target.text())
.prepend(''+
''+
html +
'
');
container = that._editContainer = that.editView.element.find(".k-popup-edit-form");
}
that.angular("compile", function(){
return {
elements: container.get(),
scopeFrom: that.tbody.find("[" + kendo.attr("uid") + "=" + model.uid + "]")
};
});
that.editable = that._editContainer
.kendoEditable({
fields: fields,
model: model,
clearContainer: false,
target: that
}).data("kendoEditable");
// TODO: Replace this code with labels and for="ID"
if (that._isMobile) {
container.find("input[type=checkbox],input[type=radio]")
.parent(".k-edit-field")
.addClass("k-check")
.prev(".k-edit-label")
.addClass("k-check")
.click(function() {
$(this).next().children("input").click();
});
}
that._openPopUpEditor();
that.trigger(EDIT, { container: container, model: model });
},
_openPopUpEditor: function() {
if (!this._isMobile) {
this._editContainer.data("kendoWindow").center().open();
} else {
this.pane.navigate(this.editView, this._editAnimation);
}
},
_createInlineEditor: function(row, model) {
var that = this,
column,
cell,
command,
fields = [];
if (that.lockedContent) {
row = row.add(that._relatedRow(row));
}
row.children(":not(.k-group-cell,.k-hierarchy-cell)").each(function() {
cell = $(this);
column = that.columns[that.cellIndex(cell)];
if (!column.command && column.field && (!model.editable || model.editable(column.field))) {
fields.push({ field: column.field, format: column.format, editor: column.editor, values: column.values });
cell.attr(kendo.attr("container-for"), column.field);
cell.empty();
} else if (column.command) {
command = getCommand(column.command, "edit");
if (command) {
cell.empty();
var updateText,
cancelText,
attr;
if (isPlainObject(command)) {
if (command.text && isPlainObject(command.text)) {
updateText = command.text.update;
cancelText = command.text.cancel;
}
if (command.attr) {
attr = command.attr;
}
}
$(that._createButton({ name: "update", text: updateText, attr: attr }) +
that._createButton({ name: "canceledit", text: cancelText, attr: attr})).appendTo(cell);
}
}
});
that._editContainer = row;
that.editable = new kendo.ui.Editable(row
.addClass("k-grid-edit-row"),{
fields: fields,
model: model,
clearContainer: false
});
if (row.length > 1) {
adjustRowHeight(row[0], row[1]);
that._applyLockedContainersWidth();
}
that.trigger(EDIT, { container: row, model: model });
},
cancelRow: function() {
var that = this,
container = that._editContainer,
model,
tr;
if (container) {
model = that._modelForContainer(container);
that._destroyEditable();
that.dataSource.cancelChanges(model);
if (that._editMode() !== "popup") {
that._displayRow(container);
} else {
that._displayRow(that.tbody.find("[" + kendo.attr("uid") + "=" + model.uid + "]"));
}
}
},
saveRow: function() {
var that = this,
container = that._editContainer,
model = that._modelForContainer(container),
editable = that.editable;
if (container && editable && editable.end() &&
!that.trigger(SAVE, { container: container, model: model } )) {
that.dataSource.sync();
}
},
_displayRow: function(row) {
var that = this,
model = that._modelForContainer(row),
related,
newRow,
nextRow,
isAlt = row.hasClass("k-alt");
if (model) {
if (that.lockedContent) {
related = $((isAlt ? that.lockedAltRowTemplate : that.lockedRowTemplate)(model));
that._relatedRow(row.last()).replaceWith(related);
}
that.angular("cleanup", function(){ return { elements: row.get() }; });
newRow = $((isAlt ? that.altRowTemplate : that.rowTemplate)(model));
row.replaceWith(newRow);
that.angular("compile", function(){
return {
elements: newRow.get(),
data: [ { dataItem: model } ]
};
});
if (related) {
adjustRowHeight(newRow[0], related[0]);
}
nextRow = newRow.next();
if (nextRow.hasClass("k-detail-row") && nextRow.is(":visible")) {
newRow.find(".k-hierarchy-cell .k-icon")
.removeClass("k-plus")
.addClass("k-minus");
}
}
},
_showMessage: function(messages, row) {
var that = this;
if (!that._isMobile) {
return window.confirm(messages.title);
}
var template = kendo.template('');
var html = $(template(messages)).appendTo(that.view.element);
var actionSheet = that._actionSheet = new kendo.mobile.ui.ActionSheet(html, {
cancel: messages.cancelDelete,
cancelTemplate: '#:cancel#
").addClass("k-grouping-header").prependTo(wrapper);
}
if (that.groupable) {
that.groupable.destroy();
}
that.groupable = new Groupable(wrapper, extend({}, groupable, {
draggable: that._draggableInstance,
groupContainer: ">div.k-grouping-header",
dataSource: that.dataSource,
draggableElements: that.content ? ".k-grid-header:first " + GROUPINGDRAGGABLES : "table:first>.k-grid-header " + GROUPINGDRAGGABLES,
filter: that.content ? ".k-grid-header:first " + GROUPINGFILTER : "table:first>.k-grid-header " + GROUPINGFILTER,
allowDrag: that.options.reorderable
}));
}
},
_continuousItems: function(filter, cell) {
if (!this.lockedContent) {
return;
}
var that = this;
var elements = that.table.add(that.lockedTable);
var lockedItems = $(filter, elements[0]);
var nonLockedItems = $(filter, elements[1]);
var columns = cell ? lockedColumns(that.columns).length : 1;
var nonLockedColumns = cell ? that.columns.length - columns : 1;
var result = [];
for (var idx = 0; idx < lockedItems.length; idx += columns) {
push.apply(result, lockedItems.slice(idx, idx + columns));
push.apply(result, nonLockedItems.splice(0, nonLockedColumns));
}
return result;
},
_selectable: function() {
var that = this,
multi,
cell,
notString = [],
isLocked = that._isLocked(),
selectable = that.options.selectable;
if (selectable) {
if (that.selectable) {
that.selectable.destroy();
}
multi = typeof selectable === STRING && selectable.toLowerCase().indexOf("multiple") > -1;
cell = typeof selectable === STRING && selectable.toLowerCase().indexOf("cell") > -1;
if (that._hasDetails()) {
notString[notString.length] = ".k-detail-row";
}
if (that.options.groupable || that._hasFooters()) {
notString[notString.length] = ".k-grouping-row,.k-group-footer";
}
notString = notString.join(",");
if (notString !== "") {
notString = ":not(" + notString + ")";
}
var elements = that.table;
if (isLocked) {
elements = elements.add(that.lockedTable);
}
var filter = ">" + (cell ? SELECTION_CELL_SELECTOR : "tbody>tr" + notString);
that.selectable = new kendo.ui.Selectable(elements, {
filter: filter,
aria: true,
multiple: multi,
change: function() {
that.trigger(CHANGE);
},
useAllItems: isLocked && multi && cell,
relatedTarget: function(items) {
if (cell || !isLocked) {
return;
}
var related;
var result = $();
for (var idx = 0, length = items.length; idx < length; idx ++) {
related = that._relatedRow(items[idx]);
if (inArray(related[0], items) < 0) {
result = result.add(related);
}
}
return result;
},
continuousItems: function() {
return that._continuousItems(filter, cell);
}
});
if (that.options.navigatable) {
elements.on("keydown" + NS, function(e) {
var current = that.current();
var target = e.target;
if (e.keyCode === keys.SPACEBAR && $.inArray(target, elements) > -1 &&
!current.is(".k-edit-cell,.k-header") &&
current.parent().is(":not(.k-grouping-row,.k-detail-row,.k-group-footer)")) {
e.preventDefault();
e.stopPropagation();
current = cell ? current : current.parent();
if (isLocked && !cell) {
current = current.add(that._relatedRow(current));
}
if(multi) {
if(!e.ctrlKey) {
that.selectable.clear();
} else {
if(current.hasClass(SELECTED)) {
current.removeClass(SELECTED);
that.trigger(CHANGE);
return;
}
}
} else {
that.selectable.clear();
}
that.selectable.value(current);
}
});
}
}
},
_relatedRow: function(row) {
var lockedTable = this.lockedTable;
row = $(row);
if (!lockedTable) {
return row;
}
var table = row.closest(this.table.add(this.lockedTable));
var index = table.find(">tbody>tr").index(row);
table = table[0] === this.table[0] ? lockedTable : this.table;
return table.find(">tbody>tr").eq(index);
},
clearSelection: function() {
var that = this;
that.selectable.clear();
that.trigger(CHANGE);
},
select: function(items) {
var that = this,
selectable = that.selectable;
items = $(items);
if(items.length) {
if(!selectable.options.multiple) {
selectable.clear();
items = items.first();
}
if (that._isLocked()) {
items = items.add(items.map(function() {
return that._relatedRow(this);
}));
}
selectable.value(items);
return;
}
return selectable.value();
},
current: function(element) {
var that = this,
scrollable = that.options.scrollable,
current = that._current,
table = that.table.add(that.thead.parent());
if (element !== undefined && element.length) {
if (!current || current[0] !== element[0]) {
if (current) {
current.removeClass(FOCUSED).removeAttr("id");
table.removeAttr("aria-activedescendant");
}
element.attr("id", that._cellId);
that._current = element.addClass(FOCUSED);
table.attr("aria-activedescendant", that._cellId);
if(element.length && scrollable) {
var content = element.closest("table").parent();
if (content.is(".k-grid-content")) {
that._scrollTo(element.parent()[0], that.content[0]);
} else if (content.is(".k-grid-content-locked")) {
that._scrollTo(that._relatedRow(element.parent())[0], that.content[0]);
that.lockedContent[0].scrollTop = that.content[0].scrollTop;
}
if (!content.is(".k-grid-content-locked,.k-grid-header-locked")) {
if (scrollable.virtual) {
that._scrollTo(element[0], that.content.find(">.k-virtual-scrollable-wrap")[0]);
} else {
that._scrollTo(element[0], that.content[0]);
}
}
}
}
}
return that._current;
},
_removeCurrent: function() {
if (this._current) {
this._current.removeClass(FOCUSED);
this._current = null;
}
},
_scrollTo: function(element, container) {
var elementToLowercase = element.tagName.toLowerCase(),
isHorizontal = elementToLowercase === "td" || elementToLowercase === "th",
elementOffset = element[isHorizontal ? "offsetLeft" : "offsetTop"],
elementOffsetDir = element[isHorizontal ? "offsetWidth" : "offsetHeight"],
containerScroll = container[isHorizontal ? "scrollLeft" : "scrollTop"],
containerOffsetDir = container[isHorizontal ? "clientWidth" : "clientHeight"],
bottomDistance = elementOffset + elementOffsetDir,
result = 0;
if (containerScroll > elementOffset) {
result = elementOffset;
} else if (bottomDistance > (containerScroll + containerOffsetDir)) {
if (elementOffsetDir <= containerOffsetDir) {
result = (bottomDistance - containerOffsetDir);
} else {
result = elementOffset;
}
} else {
result = containerScroll;
}
container[isHorizontal ? "scrollLeft" : "scrollTop"] = result;
},
_navigatable: function() {
var that = this,
currentProxy = proxy(that.current, that),
table = that.table.add(that.lockedTable),
headerTable = that.thead.parent().add($(">table", that.lockedHeader)),
isLocked = that._isLocked(),
dataTable = table,
isRtl = kendo.support.isRtl(that.element);
if (!that.options.navigatable) {
return;
}
if (that.options.scrollable) {
dataTable = table.add(headerTable);
headerTable.attr(TABINDEX, -1);
}
dataTable.off("mousedown" + NS + " focus" + NS + " focusout" + NS + " keydown" + NS);
headerTable.on("keydown" + NS, function(e) {
if (e.altKey && e.keyCode == keys.DOWN) {
currentProxy().find(".k-grid-filter, .k-header-column-menu").click();
e.stopImmediatePropagation();
}
})
.find("a.k-link").attr("tabIndex", -1);
table
.attr(TABINDEX, math.max(table.attr(TABINDEX) || 0, 0))
.on("mousedown" + NS + " keydown" + NS, ".k-detail-cell", function(e) {
if (e.target !== e.currentTarget) {
e.stopImmediatePropagation();
}
});
dataTable
.on((kendo.support.touch ? "touchstart" + NS : "mousedown" + NS), NAVROW + ">" + NAVCELL, proxy(tableClick, that))
.on("focus" + NS, function() {
if (kendo.support.touch) {
return;
}
var current = currentProxy();
if (current && current.is(":visible")) {
current.addClass(FOCUSED);
} else {
currentProxy($(this).find(FIRSTNAVITEM));
}
table.attr(TABINDEX, -1);
headerTable.attr(TABINDEX, -1);
$(this).attr(TABINDEX, 0);
})
.on("focusout" + NS, function() {
var current = currentProxy();
if (current) {
current.removeClass(FOCUSED);
}
})
.on("keydown" + NS, function(e) {
var key = e.keyCode,
handled = false,
canHandle = !e.isDefaultPrevented() && !$(e.target).is(":button,a,:input,a>.k-icon"),
pageable = that.options.pageable,
dataSource = that.dataSource,
isInCell = that._editMode() == "incell",
active,
currentIndex,
row,
index,
tableToFocus,
shiftKey = e.shiftKey,
relatedRow = proxy(that._relatedRow, that),
current = currentProxy();
if (current && current.is("th")) {
canHandle = true;
}
if (canHandle && key == keys.UP) {
currentProxy(moveVertical(current, e.currentTarget, table, headerTable, true));
handled = true;
} else if (canHandle && key == keys.DOWN) {
currentProxy(moveVertical(current, e.currentTarget, table, headerTable));
handled = true;
} else if (canHandle && key == (isRtl ? keys.RIGHT : keys.LEFT)) {
currentProxy(moveLeft(current, e.currentTarget, table, headerTable, relatedRow));
handled = true;
} else if (canHandle && key == (isRtl ? keys.LEFT : keys.RIGHT)) {
currentProxy(moveRight(current, e.currentTarget, table, headerTable, relatedRow));
handled = true;
} else if (canHandle && pageable && keys.PAGEDOWN == key) {
dataSource.page(dataSource.page() + 1);
handled = true;
} else if (canHandle && pageable && keys.PAGEUP == key) {
dataSource.page(dataSource.page() - 1);
handled = true;
} else if (key == keys.ENTER || keys.F2 == key) {
current = current ? current : table.find(FIRSTNAVITEM);
if (!$(e.target).is("table") && !$.contains(current[0], e.target)) {
current = $(e.target).closest("[role=gridcell]");
}
if (current.is("th")) {
current.find(".k-link").click();
handled = true;
} else if (current.parent().is(".k-master-row,.k-grouping-row")) {
current.parent().find(".k-icon:first").click();
handled = true;
} else {
var focusable = current.find(":kendoFocusable:first");
if (!current.hasClass("k-edit-cell") && focusable[0] && current.hasClass("k-state-focused")) {
focusable.focus();
handled = true;
} else if (that.options.editable && !$(e.target).is(":button,.k-button,textarea")) {
var container = $(e.target).closest("[role=gridcell]");
if (!container[0]) {
container = current;
}
that._handleEditing(container, false, isInCell ? e.currentTarget : table[0]);
handled = true;
}
}
} else if (keys.ESC == key) {
active = activeElement();
if (current && $.contains(current[0], active) && !current.hasClass("k-edit-cell") && !current.parent().hasClass("k-grid-edit-row")) {
focusTable(e.currentTarget, true);
handled = true;
} else if (that._editContainer && (!current || that._editContainer.has(current[0]) || current[0] === that._editContainer[0])) {
if (isInCell) {
that.closeCell(true);
} else {
currentIndex = $(current).parent().index();
if (active) {
active.blur();
}
that.cancelRow();
if (currentIndex >= 0) {
that.current(table.find(">tbody>tr").eq(currentIndex).children().filter(NAVCELL).first());
}
}
if (browser.msie && browser.version < 9) {
document.body.focus();
}
focusTable(isInCell ? e.currentTarget : table[0], true);
handled = true;
}
} else if (keys.TAB == key) {
var cell;
current = $(current);
if (that.options.editable && isInCell) {
cell = $(activeElement()).closest(".k-edit-cell");
if (cell[0] && cell[0] !== current[0]) {
current = cell;
}
}
cell = tabNext(current, e.currentTarget, table, relatedRow, shiftKey);
if (!current.is("th") && cell.length && that.options.editable && isInCell) {
that._handleEditing(current, cell, cell.closest(table));
handled = true;
}
}
if (handled) {
//prevent browser scrolling
e.preventDefault();
//required in hierarchy
e.stopPropagation();
}
});
},
_handleEditing: function(current, next, table) {
var that = this,
active = $(activeElement()),
mode = that._editMode(),
isIE = browser.msie,
oldIE = isIE && browser.version < 9,
editContainer = that._editContainer,
focusable,
isEdited;
table = $(table);
if (mode == "incell") {
isEdited = current.hasClass("k-edit-cell");
} else {
isEdited = current.parent().hasClass("k-grid-edit-row");
}
if (that.editable) {
if ($.contains(editContainer[0], active[0])) {
if (browser.opera || oldIE) {
active.change().triggerHandler("blur");
} else {
active.blur();
if (isIE) {
//IE10 with jQuery 1.9.x does not trigger blur handler
//numeric textbox does trigger change
active.blur();
}
}
}
if (!that.editable) {
focusTable(table);
return;
}
if (that.editable.end()) {
if (mode == "incell") {
that.closeCell();
} else {
that.saveRow();
isEdited = true;
}
} else {
if (mode == "incell") {
that.current(editContainer);
} else {
that.current(editContainer.children().filter(DATA_CELL).first());
}
focusable = editContainer.find(":kendoFocusable:first")[0];
if (focusable) {
focusable.focus();
}
return;
}
}
if (next) {
that.current(next);
}
if (oldIE) {
document.body.focus();
}
focusTable(table, true);
if ((!isEdited && !next) || next) {
if (mode == "incell") {
that.editCell(that.current());
} else {
that.editRow(that.current().parent());
}
}
},
_wrapper: function() {
var that = this,
table = that.table,
height = that.options.height,
wrapper = that.element;
if (!wrapper.is("div")) {
wrapper = wrapper.wrap("
").parent();
}
that.wrapper = wrapper.addClass("k-grid k-widget");
if (height) {
that.wrapper.css(HEIGHT, height);
table.css(HEIGHT, "auto");
}
that._initMobile();
},
_initMobile: function() {
var options = this.options;
var that = this;
this._isMobile = (options.mobile === true && kendo.support.mobileOS) ||
options.mobile === "phone" ||
options.mobile === "tablet";
if (this._isMobile) {
var html = this.wrapper.addClass("k-grid-mobile").wrap(
'
'
)
.parent();
this.pane = kendo.mobile.ui.Pane.wrap(html);
this.view = this.pane.view();
this._actionSheetPopupOptions = $(document.documentElement).hasClass("km-root") ? { modal: false } : {
align: "bottom center",
position: "bottom center",
effect: "slideIn:up"
};
if (options.height) {
this.pane.element.parent().css(HEIGHT, options.height);
}
this._editAnimation = "slide";
this.view.bind("show", function() {
if (that._isLocked()) {
that._updateTablesWidth();
that._applyLockedContainersWidth();
that._syncLockedContentHeight();
that._syncLockedHeaderHeight();
that._syncLockedFooterHeight();
}
});
}
},
_tbody: function() {
var that = this,
table = that.table,
tbody;
tbody = table.find(">tbody");
if (!tbody.length) {
tbody = $("
').parent();
}
if (hasVirtualScroll) {
that.virtualScrollable = new VirtualScrollable(that.content, {
dataSource: that.dataSource,
itemHeight: function() { return that._averageRowHeight(); }
});
}
that.scrollables = header.children(".k-grid-header-wrap");
// the footer may exists if rendered from the server
var footer = that.wrapper.find(".k-grid-footer");
if (footer.length) {
that.scrollables = that.scrollables.add(footer.children(".k-grid-footer-wrap"));
}
if (scrollable.virtual) {
that.content.find(">.k-virtual-scrollable-wrap").unbind("scroll" + NS).bind("scroll" + NS, function () {
that.scrollables.scrollLeft(this.scrollLeft);
if (that.lockedContent) {
that.lockedContent[0].scrollTop = this.scrollTop;
}
});
} else {
that.content.unbind("scroll" + NS).bind("scroll" + NS, function () {
that.scrollables.scrollLeft(this.scrollLeft);
if (that.lockedContent) {
that.lockedContent[0].scrollTop = this.scrollTop;
}
});
var touchScroller = that.content.data("kendoTouchScroller");
if (touchScroller) {
touchScroller.destroy();
}
touchScroller = kendo.touchScroller(that.content);
if (touchScroller && touchScroller.movable) {
that.touchScroller = touchScroller;
touchScroller.movable.bind("change", function(e) {
that.scrollables.scrollLeft(-e.sender.x);
if (that.lockedContent) {
that.lockedContent.scrollTop(-e.sender.y);
}
});
that.one(DATABOUND, function (e) {
e.sender.wrapper.addClass("k-grid-backface");
});
}
}
}
},
_setContentWidth: function() {
var that = this,
hiddenDivClass = 'k-grid-content-expander',
hiddenDiv = '
',
resizable = that.resizable,
expander;
if (that.options.scrollable && that.wrapper.is(":visible")) {
expander = that.table.parent().children('.' + hiddenDivClass);
that._setContentWidthHandler = proxy(that._setContentWidth, that);
if (!that.dataSource || !that.dataSource.view().length) {
if (!expander[0]) {
expander = $(hiddenDiv).appendTo(that.table.parent());
if (resizable) {
resizable.bind("resize", that._setContentWidthHandler);
}
}
if (that.thead) {
expander.width(that.thead.width());
}
} else if (expander[0]) {
expander.remove();
if (resizable) {
resizable.unbind("resize", that._setContentWidthHandler);
}
}
that._applyLockedContainersWidth();
}
},
_applyLockedContainersWidth: function() {
if (this.options.scrollable && this.lockedHeader) {
var headerTable = this.thead.parent(),
headerWrap = headerTable.parent(),
contentWidth = this.wrapper[0].clientWidth,
groups = this._groups(),
scrollbar = kendo.support.scrollbar(),
cols = this.lockedHeader.find(">table>colgroup>col:not(.k-group-col, .k-hierarchy-col)"),
nonLockedCols = headerTable.find(">colgroup>col:not(.k-group-col, .k-hierarchy-col)"),
width = columnsWidth(cols),
nonLockedColsWidth = columnsWidth(nonLockedCols),
footerWrap;
if (groups > 0) {
width += this.lockedHeader.find(".k-group-cell:first").outerWidth() * groups;
}
if (width >= contentWidth) {
width = contentWidth - 3 * scrollbar;
}
this.lockedHeader
.add(this.lockedContent)
.width(width);
headerWrap[0].style.width = headerWrap.parent().width() - width - 2 + "px";
headerTable.add(this.table).width(nonLockedColsWidth);
if (this.virtualScrollable) {
contentWidth -= scrollbar;
}
this.content[0].style.width = contentWidth - width - 2 + "px";
if (this.lockedFooter && this.lockedFooter.length) {
this.lockedFooter.width(width);
footerWrap = this.footer.find(".k-grid-footer-wrap");
footerWrap[0].style.width = headerWrap[0].clientWidth + "px";
footerWrap.children().first().width(nonLockedColsWidth);
}
}
},
_setContentHeight: function() {
var that = this,
options = that.options,
height = that.wrapper.innerHeight(),
header = that.wrapper.children(".k-grid-header"),
scrollbar = kendo.support.scrollbar();
if (options.scrollable && that.wrapper.is(":visible")) {
height -= header.outerHeight();
if (that.pager) {
height -= that.pager.element.outerHeight();
}
if(options.groupable) {
height -= that.wrapper.children(".k-grouping-header").outerHeight();
}
if(options.toolbar) {
height -= that.wrapper.children(".k-grid-toolbar").outerHeight();
}
if (that.footerTemplate) {
height -= that.wrapper.children(".k-grid-footer").outerHeight();
}
var isGridHeightSet = function(el) {
var initialHeight, newHeight;
if (el[0].style.height) {
return true;
} else {
initialHeight = el.height();
}
el.height("auto");
newHeight = el.height();
if (initialHeight != newHeight) {
el.height("");
return true;
}
el.height("");
return false;
};
if (isGridHeightSet(that.wrapper)) { // set content height only if needed
if (height > scrollbar * 2) { // do not set height if proper scrollbar cannot be displayed
if (that.lockedContent) {
scrollbar = that.table[0].offsetWidth > that.table.parent()[0].clientWidth ? scrollbar : 0;
that.lockedContent.height(height - scrollbar);
}
that.content.height(height);
} else {
that.content.height(scrollbar * 2 + 1);
}
}
}
},
_averageRowHeight: function() {
var that = this,
itemsCount = that._items(that.tbody).length,
rowHeight = that._rowHeight;
if (itemsCount === 0) {
return rowHeight;
}
if (!that._rowHeight) {
that._rowHeight = rowHeight = that.table.outerHeight() / itemsCount;
that._sum = rowHeight;
that._measures = 1;
}
var currentRowHeight = that.table.outerHeight() / itemsCount;
if (rowHeight !== currentRowHeight) {
that._measures ++;
that._sum += currentRowHeight;
that._rowHeight = that._sum / that._measures;
}
return rowHeight;
},
_dataSource: function() {
var that = this,
options = that.options,
pageable,
dataSource = options.dataSource;
dataSource = isArray(dataSource) ? { data: dataSource } : dataSource;
if (isPlainObject(dataSource)) {
extend(dataSource, { table: that.table, fields: that.columns });
pageable = options.pageable;
if (isPlainObject(pageable) && pageable.pageSize !== undefined) {
dataSource.pageSize = pageable.pageSize;
}
}
if (that.dataSource && that._refreshHandler) {
that.dataSource.unbind(CHANGE, that._refreshHandler)
.unbind(PROGRESS, that._progressHandler)
.unbind(ERROR, that._errorHandler);
} else {
that._refreshHandler = proxy(that.refresh, that);
that._progressHandler = proxy(that._requestStart, that);
that._errorHandler = proxy(that._error, that);
}
that.dataSource = DataSource.create(dataSource)
.bind(CHANGE, that._refreshHandler)
.bind(PROGRESS, that._progressHandler)
.bind(ERROR, that._errorHandler);
},
_error: function() {
this._progress(false);
},
_requestStart: function() {
this._progress(true);
},
_modelChange: function(e) {
var that = this,
tbody = that.tbody,
model = e.model,
row = that.tbody.find("tr[" + kendo.attr("uid") + "=" + model.uid +"]"),
relatedRow,
cell,
column,
isAlt = row.hasClass("k-alt"),
tmp,
idx = that._items(tbody).index(row),
isLocked = that.lockedContent,
length;
if (isLocked) {
relatedRow = that._relatedRow(row);
}
if (row.add(relatedRow).children(".k-edit-cell").length && !that.options.rowTemplate) {
row.add(relatedRow).children(":not(.k-group-cell,.k-hierarchy-cell)").each(function() {
cell = $(this);
column = that.columns[that.cellIndex(cell)];
if (column.field === e.field) {
if (!cell.hasClass("k-edit-cell")) {
that._displayCell(cell, column, model);
$('
');
that._appendCols(html.find("table"));
html.css((isRtl ? "padding-left" : "padding-right"), scrollbar); // Update inner fix.
return html;
}
return '';
},
_columnMenu: function() {
var that = this,
menu,
columns = that.columns,
column,
options = that.options,
columnMenu = options.columnMenu,
menuOptions,
sortable,
filterable,
cells,
isMobile = this._isMobile,
initCallback = function(e) {
that.trigger(COLUMNMENUINIT, { field: e.field, container: e.container });
},
closeCallback = function(element) {
focusTable(element.closest("table"), true);
};
if (columnMenu) {
if (typeof columnMenu == "boolean") {
columnMenu = {};
}
cells = that.thead.find("tr:first th:not(.k-hierarchy-cell):not(.k-group-cell)");
for (var idx = 0, length = cells.length; idx < length; idx++) {
column = columns[idx];
var cell = cells.eq(idx);
if (!column.command && (column.field || cell.attr("data-" + kendo.ns + "field"))) {
menu = cell.data("kendoColumnMenu");
if (menu) {
menu.destroy();
}
sortable = column.sortable !== false && columnMenu.sortable !== false ? options.sortable : false;
filterable = options.filterable && column.filterable !== false && columnMenu.filterable !== false ? extend({ pane: that.pane }, column.filterable, options.filterable) : false;
menuOptions = {
dataSource: that.dataSource,
values: column.values,
columns: columnMenu.columns,
sortable: sortable,
filterable: filterable,
messages: columnMenu.messages,
owner: that,
closeCallback: closeCallback,
init: initCallback,
pane: that.pane,
filter: isMobile ? ":not(.k-column-active)" : "",
lockedColumns: column.lockable !== false && lockedColumns(columns).length > 0
};
cell.kendoColumnMenu(menuOptions);
}
}
}
},
_headerCells: function() {
return this.thead.find("th").filter(function() {
var th = $(this);
return !th.hasClass("k-group-cell") && !th.hasClass("k-hierarchy-cell");
});
},
_filterable: function() {
var that = this,
columns = that.columns,
filterMenu,
cells,
cell,
filterInit = function(e) {
that.trigger(FILTERMENUINIT, { field: e.field, container: e.container });
},
closeCallback = function(element) {
focusTable(element.closest("table"), true);
},
filterable = that.options.filterable;
if (filterable && typeof filterable.mode == STRING && filterable.mode.indexOf("menu") == -1) {
filterable = false;
}
if (filterable && !that.options.columnMenu) {
cells = that._headerCells();
for (var idx = 0, length = cells.length; idx < length; idx++) {
cell = cells.eq(idx);
if (columns[idx].filterable !== false && !columns[idx].command && (columns[idx].field || cell.attr("data-" + kendo.ns + "field"))) {
filterMenu = cell.data("kendoFilterMenu");
if (filterMenu) {
filterMenu.destroy();
}
var columnFilterable = columns[idx].filterable;
var options = extend({},
filterable,
columnFilterable,
{
dataSource: that.dataSource,
values: columns[idx].values,
closeCallback: closeCallback,
init: filterInit,
pane: that.pane
}
);
if (columnFilterable && columnFilterable.messages) {
options.messages = extend(true, {}, filterable.messages, columnFilterable.messages);
}
cell.kendoFilterMenu(options);
}
}
}
},
_filterRow: function() {
var that = this;
if (!that._hasFilterRow()) {
return;
}
var columns = that.columns,
filterable = that.options.filterable,
rowheader = that.thead.find(".k-filter-row");
for (var i = 0; i < columns.length; i++) {
var suggestDataSource,
col = columns[i],
operators = that.options.filterable.operators,
customDataSource = false,
th = $("Foo
columns = columns.length ? columns : map(table.find("th"), function(th, idx) {
th = $(th);
var sortable = th.attr(kendo.attr("sortable")),
filterable = th.attr(kendo.attr("filterable")),
type = th.attr(kendo.attr("type")),
groupable = th.attr(kendo.attr("groupable")),
field = th.attr(kendo.attr("field")),
menu = th.attr(kendo.attr("menu"));
if (!field) {
field = th.text().replace(/\s|[^A-z0-9]/g, "");
}
return {
field: field,
type: type,
sortable: sortable !== "false",
filterable: filterable !== "false",
groupable: groupable !== "false",
menu: menu,
template: th.attr(kendo.attr("template")),
width: cols.eq(idx).css("width")
};
});
encoded = !(that.table.find("tbody tr").length > 0 && (!dataSource || !dataSource.transport));
if (that.options.scrollable) {
var initialColumns = columns;
lockedCols = lockedColumns(columns);
columns = nonLockedColumns(columns);
if (lockedCols.length > 0 && columns.length === 0) {
throw new Error("There should be at least one non locked columns");
}
normalizeHeaderCells(that.element.find("tr:has(th):first").find("th:not(.k-group-cell)"), initialColumns);
columns = lockedCols.concat(columns);
}
that.columns = map(columns, function(column) {
column = typeof column === STRING ? { field: column } : column;
if (column.hidden) {
column.attributes = addHiddenStyle(column.attributes);
column.footerAttributes = addHiddenStyle(column.footerAttributes);
column.headerAttributes = addHiddenStyle(column.headerAttributes);
}
return extend({ encoded: encoded }, column);
});
},
_groups: function() {
var group = this.dataSource.group();
return group ? group.length : 0;
},
_tmpl: function(rowTemplate, columns, alt, skipGroupCells) {
var that = this,
settings = extend({}, kendo.Template, that.options.templateSettings),
idx,
length = columns.length,
template,
state = { storage: {}, count: 0 },
column,
type,
hasDetails = that._hasDetails(),
className = [],
groups = that._groups();
if (!rowTemplate) {
rowTemplate = " 0 && !skipGroupCells) {
rowTemplate += groupCells(groups);
}
if (hasDetails) {
rowTemplate += '";
rowTemplate += that._cellTmpl(column, state);
rowTemplate += "";
}
rowTemplate += "";
}
rowTemplate = kendo.template(rowTemplate, settings);
if (state.count > 0) {
return proxy(rowTemplate, state.storage);
}
return rowTemplate;
},
_headerCellText: function(column) {
var that = this,
settings = extend({}, kendo.Template, that.options.templateSettings),
template = column.headerTemplate,
type = typeof(template),
text = column.title || column.field || "";
if (type === FUNCTION) {
text = kendo.template(template, settings)({});
} else if (type === STRING) {
text = template;
}
return text;
},
_cellTmpl: function(column, state) {
var that = this,
settings = extend({}, kendo.Template, that.options.templateSettings),
template = column.template,
paramName = settings.paramName,
field = column.field,
html = "",
idx,
length,
format = column.format,
type = typeof template,
columnValues = column.values;
if (column.command) {
if (isArray(column.command)) {
for (idx = 0, length = column.command.length; idx < length; idx++) {
html += that._createButton(column.command[idx]);
}
return html.replace(templateHashRegExp, "\\#");
}
return that._createButton(column.command).replace(templateHashRegExp, "\\#");
}
if (type === FUNCTION) {
state.storage["tmpl" + state.count] = template;
html += "#=this.tmpl" + state.count + "(" + paramName + ")#";
state.count ++;
} else if (type === STRING) {
html += template;
} else if (columnValues && columnValues.length && isPlainObject(columnValues[0]) && "value" in columnValues[0] && field) {
html += "#var v =" + kendo.stringify(convertToObject(columnValues)).replace(templateHashRegExp, "\\#") + "#";
html += "#var f = v[";
if (!settings.useWithBlock) {
html += paramName + ".";
}
html += field + "]#";
html += "${f != null ? f : ''}";
} else {
html += column.encoded ? "#:" : "#=";
if (format) {
html += 'kendo.format(\"' + format.replace(formatRegExp,"\\$1") + '\",';
}
if (field) {
field = kendo.expr(field, paramName);
html += field + "==null?'':" + field;
} else {
html += "''";
}
if (format) {
html += ")";
}
html += "#";
}
return html;
},
_templates: function() {
var that = this,
options = that.options,
dataSource = that.dataSource,
groups = dataSource.group(),
footer = that.footer || that.wrapper.find(".k-grid-footer"),
aggregates = dataSource.aggregate(),
columnsLocked = lockedColumns(that.columns),
columns = options.scrollable ? nonLockedColumns(that.columns) : that.columns;
if (options.scrollable && columnsLocked.length) {
if (options.rowTemplate || options.altRowTemplate) {
throw new Error("Having both row template and locked columns is not supported");
}
that.rowTemplate = that._tmpl(options.rowTemplate, columns, false, true);
that.altRowTemplate = that._tmpl(options.altRowTemplate || options.rowTemplate, columns, true, true);
that.lockedRowTemplate = that._tmpl(options.rowTemplate, columnsLocked);
that.lockedAltRowTemplate = that._tmpl(options.altRowTemplate || options.rowTemplate, columnsLocked, true);
} else {
that.rowTemplate = that._tmpl(options.rowTemplate, columns);
that.altRowTemplate = that._tmpl(options.altRowTemplate || options.rowTemplate, columns, true);
}
if (that._hasDetails()) {
that.detailTemplate = that._detailTmpl(options.detailTemplate || "");
}
if ((that._group && !isEmptyObject(aggregates)) || (!isEmptyObject(aggregates) && !footer.length) ||
grep(that.columns, function(column) { return column.footerTemplate; }).length) {
that.footerTemplate = that._footerTmpl(that.columns, aggregates, "footerTemplate", "k-footer-template");
}
if (groups && grep(that.columns, function(column) { return column.groupFooterTemplate; }).length) {
aggregates = $.map(groups, function(g) { return g.aggregates; });
that.groupFooterTemplate = that._footerTmpl(columns, aggregates, "groupFooterTemplate", "k-group-footer", columnsLocked.length);
if (options.scrollable && columnsLocked.length) {
that.lockedGroupFooterTemplate = that._footerTmpl(columnsLocked, aggregates, "groupFooterTemplate", "k-group-footer");
}
}
},
_footerTmpl: function(columns, aggregates, templateName, rowClass, skipGroupCells) {
var that = this,
settings = extend({}, kendo.Template, that.options.templateSettings),
paramName = settings.paramName,
html = "",
idx,
length,
template,
type,
storage = {},
count = 0,
scope = {},
groups = that._groups(),
fieldsMap = buildEmptyAggregatesObject(aggregates),
column;
html += '';
if (groups > 0 && !skipGroupCells) {
html += groupCells(groups);
}
if (that._hasDetails()) {
html += ' ';
}
for (idx = 0, length = columns.length; idx < length; idx++) {
column = columns[idx];
template = column[templateName];
type = typeof template;
html += "";
if (template) {
if (type !== FUNCTION) {
scope = fieldsMap[column.field] ? extend({}, settings, { paramName: paramName + "['" + column.field + "']" }) : {};
template = kendo.template(template, scope);
}
storage["tmpl" + count] = template;
html += "#=this.tmpl" + count + "(" + paramName + ")#";
count ++;
} else {
html += " ";
}
html += "";
}
html += ' ';
html = kendo.template(html, settings);
if (count > 0) {
return proxy(html, storage);
}
return html;
},
_detailTmpl: function(template) {
var that = this,
html = "",
settings = extend({}, kendo.Template, that.options.templateSettings),
paramName = settings.paramName,
templateFunctionStorage = {},
templateFunctionCount = 0,
groups = that._groups(),
colspan = visibleColumns(that.columns).length,
type = typeof template;
html += '';
if (groups > 0) {
html += groupCells(groups);
}
html += '";
if (type === FUNCTION) {
templateFunctionStorage["tmpl" + templateFunctionCount] = template;
html += "#=this.tmpl" + templateFunctionCount + "(" + paramName + ")#";
templateFunctionCount ++;
} else {
html += template;
}
html += " ";
html = kendo.template(html, settings);
if (templateFunctionCount > 0) {
return proxy(html, templateFunctionStorage);
}
return html;
},
_hasDetails: function() {
var that = this;
return that.options.detailTemplate !== null || (that._events[DETAILINIT] || []).length;
},
_hasFilterRow: function() {
var filterable = this.options.filterable;
var hasFiltering = filterable &&
typeof filterable.mode == STRING &&
filterable.mode.indexOf("row") != -1;
var columns = this.columns;
var columnsWithoutFiltering = $.grep(columns, function(col, idx) {
return col.filterable === false;
});
if (columns.length && columnsWithoutFiltering.length == columns.length) {
hasFiltering = false;
}
return hasFiltering;
},
_details: function() {
var that = this;
if (that.options.scrollable && that._hasDetails() && lockedColumns(that.columns).length) {
throw new Error("Having both detail template and locked columns is not supported");
}
that.table.on(CLICK + NS, ".k-hierarchy-cell .k-plus, .k-hierarchy-cell .k-minus", function(e) {
var button = $(this),
expanding = button.hasClass("k-plus"),
masterRow = button.closest("tr.k-master-row"),
detailRow,
detailTemplate = that.detailTemplate,
data,
hasDetails = that._hasDetails();
button.toggleClass("k-plus", !expanding)
.toggleClass("k-minus", expanding);
detailRow = masterRow.next();
if (hasDetails && !detailRow.hasClass("k-detail-row")) {
data = that.dataItem(masterRow);
detailRow = $(detailTemplate(data))
.addClass(masterRow.hasClass("k-alt") ? "k-alt" : "")
.insertAfter(masterRow);
that.angular("compile", function(){
return {
elements: detailRow.get(),
data: [ { dataItem: data } ]
};
});
that.trigger(DETAILINIT, { masterRow: masterRow, detailRow: detailRow, data: data, detailCell: detailRow.find(".k-detail-cell") });
}
that.trigger(expanding ? DETAILEXPAND : DETAILCOLLAPSE, { masterRow: masterRow, detailRow: detailRow});
detailRow.toggle(expanding);
if (that._current) {
that._current.attr("aria-expanded", expanding);
}
e.preventDefault();
return false;
});
},
dataItem: function(tr) {
tr = $(tr)[0];
if (!tr) {
return null;
}
var rows = this.tbody.children(),
classesRegEx = /k-grouping-row|k-detail-row|k-group-footer/,
idx = tr.sectionRowIndex,
j, correctIdx;
correctIdx = idx;
for (j = 0; j < idx; j++) {
if (classesRegEx.test(rows[j].className)) {
correctIdx--;
}
}
return this._data[correctIdx];
},
expandRow: function(tr) {
$(tr).find('> td .k-plus, > td .k-i-expand').click();
},
collapseRow: function(tr) {
$(tr).find('> td .k-minus, > td .k-i-collapse').click();
},
_createHeaderCells: function(columns) {
var that = this,
idx,
th,
text,
html = "",
length;
for (idx = 0, length = columns.length; idx < length; idx++) {
th = columns[idx];
text = that._headerCellText(th);
if (!th.command) {
html += "";
} else {
html += "" + text + " ";
}
}
return html;
},
_appendLockedColumnContent: function() {
var columns = this.columns,
idx,
colgroup = this.table.find("colgroup"),
cols = colgroup.find("col:not(.k-group-col,.k-hierarchy-col)"),
length,
lockedCols = $(),
skipHiddenCount = 0,
container;
for (idx = 0, length = columns.length; idx < length; idx++) {
if (columns[idx].locked) {
if (!columns[idx].hidden) {
lockedCols = lockedCols.add(cols.eq(idx - skipHiddenCount));
} else {
skipHiddenCount ++;
}
}
}
container = $('');
// detach is required for IE8, otherwise it switches to compatibility mode
colgroup.detach();
container.find("colgroup").append(lockedCols);
colgroup.insertBefore(this.table.find("tbody"));
this.lockedContent = container.insertBefore(this.content);
this.lockedTable = container.children("table");
},
_appendLockedColumnFooter: function() {
var that = this;
var footer = that.footer;
var cells = footer.find(".k-footer-template>td");
var cols = footer.find(".k-grid-footer-wrap>table>colgroup>col");
var html = $('');
var idx, length;
var groups = that._groups();
var lockedCells = $(), lockedCols = $();
lockedCells = lockedCells.add(cells.filter(".k-group-cell"));
for (idx = 0, length = lockedColumns(that.columns).length; idx < length; idx++) {
lockedCells = lockedCells.add(cells.eq(idx + groups));
}
lockedCols = lockedCols.add(cols.filter(".k-group-col"));
for (idx = 0, length = visibleLockedColumns(that.columns).length; idx < length; idx++) {
lockedCols = lockedCols.add(cols.eq(idx + groups));
}
lockedCells.appendTo(html.find("tr"));
lockedCols.appendTo(html.find("colgroup"));
that.lockedFooter = html.prependTo(footer);
},
_appendLockedColumnHeader: function(container) {
var that = this,
columns = this.columns,
idx,
html,
length,
colgroup,
tr,
trFilter,
table,
header,
filtercellCells,
skipHiddenCount = 0,
cols = $(),
hasFilterRow = that._hasFilterRow(),
filterCells = $(),
cells = $();
colgroup = that.thead.prev().find("col:not(.k-group-col,.k-hierarchy-col)");
header = that.thead.find(".k-header:not(.k-group-cell,.k-hierarchy-cell)");
filtercellCells = that.thead.find(".k-filter-row").find("th");
for (idx = 0, length = columns.length; idx < length; idx++) {
if (columns[idx].locked) {
if (!columns[idx].hidden) {
cols = cols.add(colgroup.eq(idx - skipHiddenCount));
}
cells = cells.add(header.eq(idx));
filterCells = filterCells.add(filtercellCells.eq(idx));
}
if (columns[idx].hidden) {
skipHiddenCount++;
}
}
if (cells.length) {
html = '';
table = $(html);
colgroup = table.find("colgroup");
tr = table.find("thead tr:first");
trFilter = table.find(".k-filter-row");
colgroup.append(that.thead.prev().find("col.k-group-col").add(cols));
tr.append(that.thead.find("tr:first .k-group-cell").add(cells));
trFilter.append(that.thead.find(".k-filter-row .k-group-cell").add(filterCells));
this.lockedHeader = table.prependTo(container);
this._syncLockedHeaderHeight();
}
},
_removeLockedContainers: function() {
var elements = this.lockedHeader
.add(this.lockedContent)
.add(this.lockedFooter);
kendo.destroy(elements);
elements.off(NS).remove();
this.lockedHeader = this.lockedContent = this.lockedFooter = null;
this.selectable = null;
},
_thead: function() {
var that = this,
columns = that.columns,
hasDetails = that._hasDetails() && columns.length,
hasFilterRow = that._hasFilterRow(),
idx,
length,
html = "",
thead = that.table.find(">thead"),
tr,
text,
th;
if (!thead.length) {
thead = $(" ');
}
thead.append(filterRow);
}
if (!tr.children().length) {
if (hasDetails) {
html += ' ';
}
html += that._createHeaderCells(columns);
tr.html(html);
} else if (hasDetails && !tr.find(".k-hierarchy-cell")[0]) {
tr.prepend(' ');
}
tr.attr("role", "row").find("th").addClass("k-header");
if(!that.options.scrollable) {
thead.addClass("k-grid-header");
}
tr.find("script").remove().end().prependTo(thead);
if (that.thead) {
that._destroyColumnAttachments();
}
this.angular("cleanup", function(){
return {
elements: thead.find("th").get()
};
});
this.angular("compile", function(){
return {
elements: thead.find("th").get(),
data: map(columns, function(col){ return { column: col }; })
};
});
that.thead = thead.attr("role", "rowgroup");
that._sortable();
that._filterable();
that._filterRow();
that._scrollable();
that._updateCols();
that._columnMenu();
if (this.options.scrollable && lockedColumns(this.columns).length) {
that._appendLockedColumnHeader(that.thead.closest(".k-grid-header"));
that._appendLockedColumnContent();
that.lockedContent.bind("DOMMouseScroll" + NS + " mousewheel" + NS, proxy(that._wheelScroll, that));
that._applyLockedContainersWidth();
}
that._resizable();
that._draggable();
that._reorderable();
if (that.groupable) {
that._attachGroupable();
}
},
_wheelScroll: function (e) {
if (e.ctrlKey) {
return;
}
var content = this.content;
if (this.options.scrollable.virtual) {
content = this.virtualScrollable.verticalScrollbar;
}
var scrollTop = content.scrollTop(),
delta = kendo.wheelDeltaY(e);
if (delta) {
e.preventDefault();
//In Firefox DOMMouseScroll event cannot be canceled
$(e.currentTarget).one("wheel" + NS, false);
content.scrollTop(scrollTop + (-delta));
}
},
_isLocked: function() {
return this.lockedHeader != null;
},
_updateCols: function(table) {
table = table || this.thead.parent().add(this.table);
this._appendCols(table, this._isLocked());
},
_updateLockedCols: function(table) {
if (this._isLocked()) {
table = table || this.lockedHeader.find("table").add(this.lockedTable);
normalizeCols(table, visibleLockedColumns(this.columns), this._hasDetails(), this._groups());
}
},
_appendCols: function(table, locked) {
if (locked) {
normalizeCols(table, visibleNonLockedColumns(this.columns), this._hasDetails(), 0);
} else {
normalizeCols(table, visibleColumns(this.columns), this._hasDetails(), this._groups());
}
},
_autoColumns: function(schema) {
if (schema && schema.toJSON) {
var that = this,
field;
schema = schema.toJSON();
for (field in schema) {
that.columns.push({ field: field });
}
that._thead();
that._templates();
}
},
_rowsHtml: function(data, templates) {
var that = this,
html = "",
idx,
rowTemplate = templates.rowTemplate,
altRowTemplate = templates.altRowTemplate,
length;
for (idx = 0, length = data.length; idx < length; idx++) {
if (idx % 2) {
html += altRowTemplate(data[idx]);
} else {
html += rowTemplate(data[idx]);
}
that._data.push(data[idx]);
}
return html;
},
_groupRowHtml: function(group, colspan, level, groupHeaderBuilder, templates, skipColspan) {
var that = this,
html = "",
idx,
length,
field = group.field,
column = grep(that.columns, function(column) { return column.field == field; })[0] || { },
template = column.groupHeaderTemplate,
text = (column.title || field) + ': ' + formatGroupValue(group.value, column.format, column.values),
data = extend({}, { field: group.field, value: group.value }, group.aggregates[group.field]),
footerDefaults = that._groupAggregatesDefaultObject || {},
rowTemplate = templates.rowTemplate,
altRowTemplate = templates.altRowTemplate,
groupFooterTemplate = templates.groupFooterTemplate,
groupItems = group.items;
if (template) {
text = typeof template === FUNCTION ? template(data) : kendo.template(template)(data);
}
html += groupHeaderBuilder(colspan, level, text);
if(group.hasSubgroups) {
for(idx = 0, length = groupItems.length; idx < length; idx++) {
html += that._groupRowHtml(groupItems[idx], skipColspan ? colspan : colspan - 1, level + 1, groupHeaderBuilder, templates, skipColspan);
}
} else {
html += that._rowsHtml(groupItems, templates);
}
if (groupFooterTemplate) {
html += groupFooterTemplate(extend(footerDefaults, group.aggregates));
}
return html;
},
collapseGroup: function(group) {
group = $(group);
var level,
footerCount = 1,
offset,
relatedGroup = $(),
idx,
length,
tr;
if (this._isLocked()) {
if (!group.closest("div").hasClass("k-grid-content-locked")) {
relatedGroup = group.nextAll("tr");
group = this.lockedTable.find(">tbody>tr:eq(" + group.index() + ")");
} else {
relatedGroup = this.tbody.children("tr:eq(" + group.index() + ")").nextAll("tr");
}
}
level = group.find(".k-group-cell").length;
group.find(".k-icon").addClass("k-i-expand").removeClass("k-i-collapse");
group.find("td:first").attr("aria-expanded", false);
group = group.nextAll("tr");
for (idx = 0, length = group.length; idx < length; idx ++ ) {
tr = group.eq(idx);
offset = tr.find(".k-group-cell").length;
if (tr.hasClass("k-grouping-row")) {
footerCount++;
} else if (tr.hasClass("k-group-footer")) {
footerCount--;
}
if (offset <= level || (tr.hasClass("k-group-footer") && footerCount < 0)) {
break;
}
tr.hide();
relatedGroup.eq(idx).hide();
}
},
expandGroup: function(group) {
group = $(group);
var that = this,
level,
tr,
offset,
relatedGroup = $(),
idx,
length,
groupsCount = 1;
if (this._isLocked()) {
if (!group.closest("div").hasClass("k-grid-content-locked")) {
relatedGroup = group.nextAll("tr");
group = this.lockedTable.find(">tbody>tr:eq(" + group.index() + ")");
} else {
relatedGroup = this.tbody.children("tr:eq(" + group.index() + ")").nextAll("tr");
}
}
level = group.find(".k-group-cell").length;
group.find(".k-icon").addClass("k-i-collapse").removeClass("k-i-expand");
group.find("td:first").attr("aria-expanded", true);
group = group.nextAll("tr");
for (idx = 0, length = group.length; idx < length; idx ++ ) {
tr = group.eq(idx);
offset = tr.find(".k-group-cell").length;
if (offset <= level) {
break;
}
if (offset == level + 1 && !tr.hasClass("k-detail-row")) {
tr.show();
relatedGroup.eq(idx).show();
if (tr.hasClass("k-grouping-row") && tr.find(".k-icon").hasClass("k-i-collapse")) {
that.expandGroup(tr);
}
if (tr.hasClass("k-master-row") && tr.find(".k-icon").hasClass("k-minus")) {
tr.next().show();
relatedGroup.eq(idx + 1).show();
}
}
if (tr.hasClass("k-grouping-row")) {
groupsCount ++;
}
if (tr.hasClass("k-group-footer")) {
if (groupsCount == 1) {
tr.show();
relatedGroup.eq(idx).show();
} else {
groupsCount --;
}
}
}
},
_updateHeader: function(groups) {
var that = this,
container = that._isLocked() ? that.lockedHeader : that.thead,
filterCells = container.find("tr.k-filter-row").find("th.k-group-cell").length,
length = container.find("tr:first").find("th.k-group-cell").length;
if(groups > length) {
$(new Array(groups - length + 1).join('')).prependTo(container.find("tr"));
} else if(groups < length) {
container.find("tr").each(function(){
$(this).find("th.k-group-cell")
.filter(":eq(" + groups + ")," + ":gt(" + groups + ")").remove();
});
} else if(length > filterCells) {
$(new Array(length - filterCells + 1).join('')).prependTo(container.find(".k-filter-row"));
}
},
_firstDataItem: function(data, grouped) {
if(data && grouped) {
if(data.hasSubgroups) {
data = this._firstDataItem(data.items[0], grouped);
} else {
data = data.items[0];
}
}
return data;
},
_updateTablesWidth: function() {
var that = this,
tables;
if (!that._isLocked()) {
return;
}
tables =
$(">.k-grid-footer>.k-grid-footer-wrap>table", that.wrapper)
.add(that.thead.parent())
.add(that.table);
that._footerWidth = tableWidth(tables.eq(0));
tables.width(that._footerWidth);
tables =
$(">.k-grid-footer>.k-grid-footer-locked>table", that.wrapper)
.add(that.lockedHeader.find(">table"))
.add(that.lockedTable);
tables.width(tableWidth(tables.eq(0)));
},
hideColumn: function(column) {
var that = this,
cell,
tables,
idx,
cols,
colWidth,
width = 0,
length,
footer = that.footer || that.wrapper.find(".k-grid-footer"),
columns = that.columns,
visibleLocked = visibleLockedColumns(columns).length,
columnIndex;
if (typeof column == "number") {
column = columns[column];
} else {
column = grep(columns, function(item) {
return item.field === column;
})[0];
}
if (!column || column.hidden) {
return;
}
columnIndex = inArray(column, visibleColumns(columns));
column.hidden = true;
column.attributes = addHiddenStyle(column.attributes);
column.footerAttributes = addHiddenStyle(column.footerAttributes);
column.headerAttributes = addHiddenStyle(column.headerAttributes);
that._templates();
that._updateCols();
that._updateLockedCols();
setCellVisibility(elements($(">table>thead", that.lockedHeader), that.thead, ">tr:first-child>th"), columnIndex, false);
setCellVisibility(elements($(">table>thead", that.lockedHeader), that.thead, ">tr.k-filter-row>th"), columnIndex, false);
if (footer[0]) {
that._updateCols(footer.find(">.k-grid-footer-wrap>table"));
that._updateLockedCols(footer.find(">.k-grid-footer-locked>table"));
setCellVisibility(footer.find(".k-footer-template>td"), columnIndex, false);
}
if (that.lockedTable && visibleLocked > columnIndex) {
hideColumnCells(that.lockedTable.find(">tbody>tr"), columnIndex);
} else {
hideColumnCells(that.tbody.children(), columnIndex - visibleLocked);
}
if (that.lockedTable) {
that._updateTablesWidth();
that._applyLockedContainersWidth();
that._syncLockedContentHeight();
that._syncLockedHeaderHeight();
that._syncLockedFooterHeight();
} else {
cols = that.thead.prev().find("col");
for (idx = 0, length = cols.length; idx < length; idx += 1) {
colWidth = cols[idx].style.width;
if (colWidth && colWidth.indexOf("%") == -1) {
width += parseInt(colWidth, 10);
} else {
width = 0;
break;
}
}
tables = $(">.k-grid-header table:first,>.k-grid-footer table:first",that.wrapper)
.add(that.table);
that._footerWidth = null;
if (width) {
tables.width(width);
that._footerWidth = width;
}
if(browser.msie && browser.version == 8) {
tables.css("display", "inline-table");
setTimeout(function() {
tables.css("display", "table");
}, 1);
}
}
that.trigger(COLUMNHIDE, { column: column });
},
showColumn: function(column) {
var that = this,
idx,
length,
cell,
tables,
width,
colWidth,
cols,
columns = that.columns,
footer = that.footer || that.wrapper.find(".k-grid-footer"),
lockedColumnsCount = lockedColumns(columns).length,
columnIndex;
if (typeof column == "number") {
column = columns[column];
} else {
column = grep(columns, function(item) {
return item.field === column;
})[0];
}
if (!column || !column.hidden) {
return;
}
columnIndex = inArray(column, columns);
column.hidden = false;
column.attributes = removeHiddenStyle(column.attributes);
column.footerAttributes = removeHiddenStyle(column.footerAttributes);
column.headerAttributes = removeHiddenStyle(column.headerAttributes);
that._templates();
that._updateCols();
that._updateLockedCols();
setCellVisibility(elements($(">table>thead", that.lockedHeader), that.thead, ">tr:first-child>th"), columnIndex, true);
setCellVisibility(elements($(">table>thead", that.lockedHeader), that.thead, ">tr.k-filter-row>th"), columnIndex, true);
if (footer[0]) {
that._updateCols(footer.find(">.k-grid-footer-wrap>table"));
that._updateLockedCols(footer.find(">.k-grid-footer-locked>table"));
setCellVisibility(footer.find(".k-footer-template>td"), columnIndex, true);
}
if (that.lockedTable && lockedColumnsCount > columnIndex) {
showColumnCells(that.lockedTable.find(">tbody>tr"), columnIndex);
} else {
showColumnCells(that.tbody.children(), columnIndex - lockedColumnsCount);
}
if (that.lockedTable) {
that._updateTablesWidth();
that._applyLockedContainersWidth();
that._syncLockedContentHeight();
that._syncLockedHeaderHeight();
} else {
tables = $(">.k-grid-header table:first,>.k-grid-footer table:first",that.wrapper).add(that.table);
if (!column.width) {
tables.width("");
} else {
width = 0;
cols = that.thead.prev().find("col");
for (idx = 0, length = cols.length; idx < length; idx += 1) {
colWidth = cols[idx].style.width;
if (colWidth.indexOf("%") > -1) {
width = 0;
break;
}
width += parseInt(colWidth, 10);
}
that._footerWidth = null;
if (width) {
tables.width(width);
that._footerWidth = width;
}
}
}
that.trigger(COLUMNSHOW, { column: column });
},
_progress: function(toggle) {
var element = this.element;
if (this.lockedContent) {
element = this.wrapper;
} else if (this.element.is("table")) {
element = this.element.parent();
} else if (this.content && this.content.length) {
element = this.content;
}
kendo.ui.progress(element, toggle);
},
_resize: function() {
if (this.content) {
this._setContentHeight();
this._setContentWidth();
}
},
_isActiveInTable: function() {
var active = activeElement();
return this.table[0] === active ||
$.contains(this.table[0], active) ||
(this._isLocked() &&
(this.lockedTable[0] === active || $.contains(this.lockedTable[0], active))
);
},
refresh: function(e) {
var that = this,
length,
idx,
html = "",
data = that.dataSource.view(),
navigatable = that.options.navigatable,
currentIndex,
current = $(that.current()),
isCurrentInHeader = false,
groups = (that.dataSource.group() || []).length,
colspan = groups + visibleColumns(that.columns).length;
if (e && e.action === "itemchange" && that.editable) { // skip rebinding if editing is in progress
return;
}
e = e || {};
if (that.trigger("dataBinding", { action: e.action || "rebind", index: e.index, items: e.items })) {
return;
}
that._angularItems("cleanup");
if (navigatable && (that._isActiveInTable() || (that._editContainer && that._editContainer.data("kendoWindow")))) {
isCurrentInHeader = current.is("th");
currentIndex = 0;
if (isCurrentInHeader) {
currentIndex = that.thead.find("th:not(.k-group-cell)").index(current);
}
}
that._destroyEditable();
that._progress(false);
that._hideResizeHandle();
that._data = [];
if (!that.columns.length) {
that._autoColumns(that._firstDataItem(data[0], groups));
colspan = groups + that.columns.length;
}
that._group = groups > 0 || that._group;
if(that._group) {
that._templates();
that._updateCols();
that._updateLockedCols();
that._updateHeader(groups);
that._group = groups > 0;
}
that._renderContent(data, colspan, groups);
that._renderLockedContent(data, colspan, groups);
that._footer();
that._setContentHeight();
that._setContentWidth();
if (that.lockedTable) {
//requires manual trigger of scroll to sync both tables
if (that.options.scrollable.virtual) {
that.content.find(">.k-virtual-scrollable-wrap").trigger("scroll");
} else {
that.content.trigger("scroll");
}
}
if (currentIndex >= 0) {
that._removeCurrent();
if (!isCurrentInHeader) {
that.current(that.table.add(that.lockedTable).find(FIRSTNAVITEM).first());
} else {
that.current(that.thead.find("th:not(.k-group-cell)").eq(currentIndex));
}
if (that._current) {
focusTable(that._current.closest("table")[0], true);
}
}
if (that.touchScroller) {
that.touchScroller.contentResized();
}
if (that.selectable) {
that.selectable.resetTouchEvents();
}
that._angularItems("compile");
that.trigger(DATABOUND);
},
_renderContent: function(data, colspan, groups) {
var that = this,
idx,
length,
html = "",
isLocked = that.lockedContent != null,
templates = {
rowTemplate: that.rowTemplate,
altRowTemplate: that.altRowTemplate,
groupFooterTemplate: that.groupFooterTemplate
};
colspan = isLocked ? colspan - visibleLockedColumns(that.columns).length : colspan;
if(groups > 0) {
colspan = isLocked ? colspan - groups : colspan;
if (that.detailTemplate) {
colspan++;
}
if (that.groupFooterTemplate) {
that._groupAggregatesDefaultObject = buildEmptyAggregatesObject(that.dataSource.aggregate());
}
for (idx = 0, length = data.length; idx < length; idx++) {
html += that._groupRowHtml(data[idx], colspan, 0, isLocked ? groupRowLockedContentBuilder : groupRowBuilder, templates, isLocked);
}
} else {
html += that._rowsHtml(data, templates);
}
that.tbody = appendContent(that.tbody, that.table, html);
},
_renderLockedContent: function(data, colspan, groups) {
var html = "",
idx,
length,
templates = {
rowTemplate: this.lockedRowTemplate,
altRowTemplate: this.lockedAltRowTemplate,
groupFooterTemplate: this.lockedGroupFooterTemplate
};
if (this.lockedContent) {
var table = this.lockedTable;
if (groups > 0) {
colspan = colspan - visibleNonLockedColumns(this.columns).length;
for (idx = 0, length = data.length; idx < length; idx++) {
html += this._groupRowHtml(data[idx], colspan, 0, groupRowBuilder, templates);
}
} else {
html = this._rowsHtml(data, templates);
}
appendContent(table.children("tbody"), table, html);
this._syncLockedContentHeight();
}
},
_adjustRowsHeight: function(table1, table2) {
var rows = table1[0].rows,
length = rows.length,
idx,
rows2 = table2[0].rows,
containers = table1.add(table2),
containersLength = containers.length,
heights = [];
for (idx = 0; idx < length; idx++) {
if (rows[idx].style.height) {
rows[idx].style.height = rows2[idx].style.height = "";
}
var offsetHeight1 = rows[idx].offsetHeight;
var offsetHeight2 = rows2[idx].offsetHeight;
var height = 0;
if (offsetHeight1 > offsetHeight2) {
height = offsetHeight1;
} else if (offsetHeight1 < offsetHeight2) {
height = offsetHeight2;
}
heights.push(height);
}
for (idx = 0; idx < containersLength; idx++) {
containers[idx].style.display = "none";
}
for (idx = 0; idx < length; idx++) {
if (heights[idx]) {
rows[idx].style.height = rows2[idx].style.height = heights[idx] + "px";
}
}
for (idx = 0; idx < containersLength; idx++) {
containers[idx].style.display = "";
}
}
});
function adjustRowHeight(row1, row2) {
var height;
var clientHeight1 = row1.clientHeight;
var clientHeight2 = row2.clientHeight;
if (clientHeight1 > clientHeight2) {
height = clientHeight1 + "px";
} else if (clientHeight1 < clientHeight2) {
height = clientHeight2 + "px";
}
if (height) {
row1.style.height = row2.style.height = height;
}
}
function getCommand(commands, name) {
var idx, length, command;
if (typeof commands === STRING && commands === name) {
return commands;
}
if (isPlainObject(commands) && commands.name === name) {
return commands;
}
if (isArray(commands)) {
for (idx = 0, length = commands.length; idx < length; idx++) {
command = commands[idx];
if ((typeof command === STRING && command === name) || (command.name === name)) {
return command;
}
}
}
return null;
}
function focusTable(table, direct) {
var msie = browser.msie;
if (direct === true) {
table = $(table);
var condition = true || msie && table.parent().is(".k-grid-content,.k-grid-header-wrap"),
scrollTop, scrollLeft;
if (condition) {
scrollTop = table.parent().scrollTop();
scrollLeft = table.parent().scrollLeft();
}
if (msie) {
try {
//The setActive method does not cause the document to scroll to the active object in the current page
table[0].setActive();
} catch(e) {
table[0].focus();
}
} else {
table[0].focus(); //because preventDefault bellow, IE cannot focus the table alternative is unselectable=on
}
if (condition) {
table.parent().scrollTop(scrollTop);
table.parent().scrollLeft(scrollLeft);
}
} else {
$(table).one("focusin", function(e) { e.preventDefault(); }).focus();
}
}
function tableClick(e) {
var currentTarget = $(e.currentTarget),
isHeader = currentTarget.is("th"),
table = this.table.add(this.lockedTable),
headerTable = this.thead.parent().add($(">table", this.lockedHeader)),
isInput = $(e.target).is(":button,a,:input,a>.k-icon,textarea,span.k-icon,span.k-link,.k-input,.k-multiselect-wrap"),
currentTable = currentTarget.closest("table")[0];
if (kendo.support.touch || (isInput && currentTarget.find(kendo.roleSelector("filtercell")).length)) {
return;
}
if (currentTable !== table[0] && currentTable !== table[1] && currentTable !== headerTable[0] && currentTable !== headerTable[1]) {
return;
}
this.current(currentTarget);
if (isHeader || !isInput) {
setTimeout(function() {
//Do not focus if widget, because in IE8 a DDL will be closed
if (!(isIE8 && $(kendo._activeElement()).hasClass("k-widget"))) {
//DOMElement.focus() only for header, because IE doesn't really focus the table
focusTable(currentTable, true);
}
});
}
if (isHeader) {
e.preventDefault(); //if any problem occurs, call preventDefault only for the clicked header links
}
}
function verticalTable(current, downTable, upTable, up) {
current = $(current);
if (up) {
var temp = downTable;
downTable = upTable;
upTable = temp;
}
if (downTable.not(current).length != downTable.length) {
return current;
}
return current[0] == upTable[0] ?
downTable.eq(0) : downTable.eq(1);
}
function moveVertical(current, currentTable, dataTable, headerTable, up) {
var row, index;
var nextFn = up ? "prevAll" : "nextAll";
if (current) {
row = current.parent()[nextFn](NAVROW).first();
if (!row[0] && (up || current.is("th"))) {
currentTable = verticalTable(currentTable, dataTable, headerTable, up);
focusTable(currentTable);
row = currentTable.find((up ? ">thead>" : ">tbody>") + NAVROW).first();
}
index = current.index();
current = row.children().eq(index);
if (!current[0] || !current.is(NAVCELL)) {
current = row.children(NAVCELL).first();
}
} else {
current = dataTable.find(FIRSTNAVITEM);
}
return current;
}
function moveLeft(current, currentTable, dataTable, headerTable, relatedRow) {
var isLocked = dataTable.length > 1;
if (current) {
if (current.prev(":visible")[0]) {
current = current.prevAll(DATA_CELL).first();
} else if (isLocked) {
if (currentTable == dataTable[1]) {
focusTable(dataTable[0]);
current = relatedRow(current.parent()).children(DATA_CELL).last();
} else if (currentTable == headerTable[1]) {
focusTable(headerTable[0]);
current = headerTable.eq(0).find("tr>" + DATA_CELL).last();
}
}
} else {
current = dataTable.find(FIRSTNAVITEM);
}
return current;
}
function moveRight(current, currentTable, dataTable, headerTable, relatedRow) {
var isLocked = dataTable.length > 1;
if (current) {
if (current.next(":visible")[0]) {
current = current.nextAll(DATA_CELL).first();
} else if (isLocked) {
if (currentTable == dataTable[0]) {
focusTable(dataTable[1]);
current = relatedRow(current.parent()).children(DATA_CELL).first();
} else if (currentTable == headerTable[0]) {
focusTable(headerTable[1]);
current = headerTable.eq(1).find("tr>" + DATA_CELL).first();
}
}
} else {
current = dataTable.find(FIRSTNAVITEM);
}
return current;
}
function tabNext(current, currentTable, dataTable, relatedRow, back) {
var isLocked = dataTable.length == 2;
var switchRow = true;
var next = back ? current.prevAll(DATA_CELL + ":first") : current.nextAll(":visible:first");
if (!next.length) {
next = current.parent();
if (isLocked) {
switchRow = (back && currentTable == dataTable[0]) || (!back && currentTable == dataTable[1]);
next = relatedRow(next);
}
if (switchRow) {
next = next[back ? "prevAll" : "nextAll"]("tr:not(.k-grouping-row):not(.k-detail-row):visible:first");
}
next = next.children(DATA_CELL + (back ? ":last" : ":first"));
}
return next;
}
function groupRowBuilder(colspan, level, text) {
return '' + groupCells(level) +
'' +
'' +
'
';
}
function groupRowLockedContentBuilder(colspan, level, text) {
return '' +
'' +
'
';
}
ui.plugin(Grid);
ui.plugin(VirtualScrollable);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
CHANGE = "change",
CANCEL = "cancel",
DATABOUND = "dataBound",
DATABINDING = "dataBinding",
Widget = kendo.ui.Widget,
keys = kendo.keys,
FOCUSSELECTOR = ">*",
PROGRESS = "progress",
ERROR = "error",
FOCUSED = "k-state-focused",
SELECTED = "k-state-selected",
KEDITITEM = "k-edit-item",
STRING = "string",
EDIT = "edit",
REMOVE = "remove",
SAVE = "save",
CLICK = "click",
NS = ".kendoListView",
proxy = $.proxy,
activeElement = kendo._activeElement,
progress = kendo.ui.progress,
DataSource = kendo.data.DataSource;
var ListView = kendo.ui.DataBoundWidget.extend( {
init: function(element, options) {
var that = this;
options = $.isArray(options) ? { dataSource: options } : options;
Widget.fn.init.call(that, element, options);
options = that.options;
that.wrapper = element = that.element;
if (element[0].id) {
that._itemId = element[0].id + "_lv_active";
}
that._element();
that._dataSource();
that._templates();
that._navigatable();
that._selectable();
that._pageable();
that._crudHandlers();
if (that.options.autoBind){
that.dataSource.fetch();
}
kendo.notify(that);
},
events: [
CHANGE,
CANCEL,
DATABINDING,
DATABOUND,
EDIT,
REMOVE,
SAVE
],
options: {
name: "ListView",
autoBind: true,
selectable: false,
navigatable: false,
template: "",
altTemplate: "",
editTemplate: ""
},
setOptions: function(options) {
Widget.fn.setOptions.call(this, options);
this._templates();
},
_templates: function() {
var options = this.options;
this.template = kendo.template(options.template || "");
this.altTemplate = kendo.template(options.altTemplate || options.template);
this.editTemplate = kendo.template(options.editTemplate || "");
},
_item: function(action) {
return this.element.children()[action]();
},
items: function() {
return this.element.children();
},
dataItem: function(element) {
var attr = kendo.attr("uid");
var uid = $(element).closest("[" + attr + "]").attr(attr);
return this.dataSource.getByUid(uid);
},
setDataSource: function(dataSource) {
this.options.dataSource = dataSource;
this._dataSource();
if (this.options.autoBind) {
dataSource.fetch();
}
},
_unbindDataSource: function() {
var that = this;
that.dataSource.unbind(CHANGE, that._refreshHandler)
.unbind(PROGRESS, that._progressHandler)
.unbind(ERROR, that._errorHandler);
},
_dataSource: function() {
var that = this;
if (that.dataSource && that._refreshHandler) {
that._unbindDataSource();
} else {
that._refreshHandler = proxy(that.refresh, that);
that._progressHandler = proxy(that._progress, that);
that._errorHandler = proxy(that._error, that);
}
that.dataSource = DataSource.create(that.options.dataSource)
.bind(CHANGE, that._refreshHandler)
.bind(PROGRESS, that._progressHandler)
.bind(ERROR, that._errorHandler);
},
_progress: function() {
progress(this.element, true);
},
_error: function() {
progress(this.element, false);
},
_element: function() {
this.element.addClass("k-widget k-listview").attr("role", "listbox");
},
refresh: function(e) {
var that = this,
view = that.dataSource.view(),
data,
items,
item,
html = "",
idx,
length,
template = that.template,
altTemplate = that.altTemplate,
active = activeElement();
e = e || {};
if (e.action === "itemchange") {
if (!that._hasBindingTarget() && !that.editable) {
data = e.items[0];
item = that.items().filter("[" + kendo.attr("uid") + "=" + data.uid + "]");
if (item.length > 0) {
idx = item.index();
item.replaceWith(template(data));
item = that.items().eq(idx);
item.attr(kendo.attr("uid"), data.uid);
that.trigger("itemChange", {
item: item,
data: data
});
}
}
return;
}
if (that.trigger(DATABINDING, { action: e.action || "rebind", items: e.items, index: e.index })) {
return;
}
that._angularItems("cleanup");
that._destroyEditable();
for (idx = 0, length = view.length; idx < length; idx++) {
if (idx % 2) {
html += altTemplate(view[idx]);
} else {
html += template(view[idx]);
}
}
that.element.html(html);
items = that.items();
for (idx = 0, length = view.length; idx < length; idx++) {
items.eq(idx).attr(kendo.attr("uid"), view[idx].uid)
.attr("role", "option")
.attr("aria-selected", "false");
}
if (that.element[0] === active && that.options.navigatable) {
that.current(items.eq(0));
}
that._angularItems("compile");
that.trigger(DATABOUND);
},
_pageable: function() {
var that = this,
pageable = that.options.pageable,
settings,
pagerId;
if ($.isPlainObject(pageable)) {
pagerId = pageable.pagerId;
settings = $.extend({}, pageable, {
dataSource: that.dataSource,
pagerId: null
});
that.pager = new kendo.ui.Pager($("#" + pagerId), settings);
}
},
_selectable: function() {
var that = this,
multi,
current,
selectable = that.options.selectable,
navigatable = that.options.navigatable;
if (selectable) {
multi = typeof selectable === STRING && selectable.toLowerCase().indexOf("multiple") > -1;
if (multi) {
that.element.attr("aria-multiselectable", true);
}
that.selectable = new kendo.ui.Selectable(that.element, {
aria: true,
multiple: multi,
filter: FOCUSSELECTOR,
change: function() {
that.trigger(CHANGE);
}
});
if (navigatable) {
that.element.on("keydown" + NS, function(e) {
if (e.keyCode === keys.SPACEBAR) {
current = that.current();
if (e.target == e.currentTarget) {
e.preventDefault();
}
if(multi) {
if(!e.ctrlKey) {
that.selectable.clear();
} else {
if (current && current.hasClass(SELECTED)) {
current.removeClass(SELECTED);
return;
}
}
} else {
that.selectable.clear();
}
that.selectable.value(current);
}
});
}
}
},
current: function(candidate) {
var that = this,
element = that.element,
current = that._current,
id = that._itemId;
if (candidate === undefined) {
return current;
}
if (current && current[0]) {
if (current[0].id === id) {
current.removeAttr("id");
}
current.removeClass(FOCUSED);
element.removeAttr("aria-activedescendant");
}
if (candidate && candidate[0]) {
id = candidate[0].id || id;
that._scrollTo(candidate[0]);
element.attr("aria-activedescendant", id);
candidate.addClass(FOCUSED).attr("id", id);
}
that._current = candidate;
},
_scrollTo: function(element) {
var that = this,
container,
UseJQueryoffset = false,
SCROLL = "scroll";
if (that.wrapper.css("overflow") == "auto" || that.wrapper.css("overflow") == SCROLL) {
container = that.wrapper[0];
} else {
container = window;
UseJQueryoffset = true;
}
var scrollDirectionFunc = function(direction, dimension) {
var elementOffset = UseJQueryoffset ? $(element).offset()[direction.toLowerCase()] : element["offset" + direction],
elementDimension = element["client" + dimension],
containerScrollAmount = $(container)[SCROLL + direction](),
containerDimension = $(container)[dimension.toLowerCase()]();
if (elementOffset + elementDimension > containerScrollAmount + containerDimension) {
$(container)[SCROLL + direction](elementOffset + elementDimension - containerDimension);
} else if (elementOffset < containerScrollAmount) {
$(container)[SCROLL + direction](elementOffset);
}
};
scrollDirectionFunc("Top", "Height");
scrollDirectionFunc("Left", "Width");
},
_navigatable: function() {
var that = this,
navigatable = that.options.navigatable,
element = that.element,
clickCallback = function(e) {
that.current($(e.currentTarget));
if(!$(e.target).is(":button,a,:input,a>.k-icon,textarea")) {
element.focus();
}
};
if (navigatable) {
that._tabindex();
element.on("focus" + NS, function() {
var current = that._current;
if(!current || !current.is(":visible")) {
current = that._item("first");
}
that.current(current);
})
.on("focusout" + NS, function() {
if (that._current) {
that._current.removeClass(FOCUSED);
}
})
.on("keydown" + NS, function(e) {
var key = e.keyCode,
current = that.current(),
target = $(e.target),
canHandle = !target.is(":button,textarea,a,a>.t-icon,input"),
isTextBox = target.is(":text"),
preventDefault = kendo.preventDefault,
editItem = element.find("." + KEDITITEM),
active = activeElement(), idx;
if ((!canHandle && !isTextBox && keys.ESC != key) || (isTextBox && keys.ESC != key && keys.ENTER != key)) {
return;
}
if (keys.UP === key || keys.LEFT === key) {
if (current) {
current = current.prev();
}
that.current(!current || !current[0] ? that._item("last") : current);
preventDefault(e);
} else if (keys.DOWN === key || keys.RIGHT === key) {
if (current) {
current = current.next();
}
that.current(!current || !current[0] ? that._item("first") : current);
preventDefault(e);
} else if (keys.PAGEUP === key) {
that.current(null);
that.dataSource.page(that.dataSource.page() - 1);
preventDefault(e);
} else if (keys.PAGEDOWN === key) {
that.current(null);
that.dataSource.page(that.dataSource.page() + 1);
preventDefault(e);
} else if (keys.HOME === key) {
that.current(that._item("first"));
preventDefault(e);
} else if (keys.END === key) {
that.current(that._item("last"));
preventDefault(e);
} else if (keys.ENTER === key) {
if (editItem.length !== 0 && (canHandle || isTextBox)) {
idx = that.items().index(editItem);
if (active) {
active.blur();
}
that.save();
var focusAgain = function(){
that.element.trigger("focus");
that.current(that.items().eq(idx));
};
that.one("dataBound", focusAgain);
} else if (that.options.editTemplate !== "") {
that.edit(current);
}
} else if (keys.ESC === key) {
editItem = element.find("." + KEDITITEM);
if (editItem.length === 0) {
return;
}
idx = that.items().index(editItem);
that.cancel();
that.element.trigger("focus");
that.current(that.items().eq(idx));
}
});
element.on("mousedown" + NS + " touchstart" + NS, FOCUSSELECTOR, proxy(clickCallback, that));
}
},
clearSelection: function() {
var that = this;
that.selectable.clear();
that.trigger(CHANGE);
},
select: function(items) {
var that = this,
selectable = that.selectable;
items = $(items);
if(items.length) {
if(!selectable.options.multiple) {
selectable.clear();
items = items.first();
}
selectable.value(items);
return;
}
return selectable.value();
},
_destroyEditable: function() {
var that = this;
if (that.editable) {
that.editable.destroy();
delete that.editable;
}
},
_modelFromElement: function(element) {
var uid = element.attr(kendo.attr("uid"));
return this.dataSource.getByUid(uid);
},
_closeEditable: function(validate) {
var that = this,
editable = that.editable,
data,
index,
template = that.template,
valid = true;
if (editable) {
if (validate) {
valid = editable.end();
}
if (valid) {
if (editable.element.index() % 2) {
template = that.altTemplate;
}
data = that._modelFromElement(editable.element);
that._destroyEditable();
index = editable.element.index();
editable.element.replaceWith(template(data));
that.items().eq(index).attr(kendo.attr("uid"), data.uid);
}
}
return valid;
},
edit: function(item) {
var that = this,
data = that._modelFromElement(item),
container,
uid = data.uid,
index;
that.cancel();
item = that.items().filter("[" + kendo.attr("uid") + "=" + uid + "]");
index = item.index();
item.replaceWith(that.editTemplate(data));
container = that.items().eq(index).addClass(KEDITITEM).attr(kendo.attr("uid"), data.uid);
that.editable = container.kendoEditable({
model: data,
clearContainer: false,
errorTemplate: false,
target: that
}).data("kendoEditable");
that.trigger(EDIT, { model: data, item: container });
},
save: function() {
var that = this,
editable = that.editable,
model;
if (!editable) {
return;
}
editable = editable.element;
model = that._modelFromElement(editable);
if (!that.trigger(SAVE, { model: model, item: editable }) && that._closeEditable(true)) {
that.dataSource.sync();
}
},
remove: function(item) {
var that = this,
dataSource = that.dataSource,
data = that._modelFromElement(item);
if (!that.trigger(REMOVE, { model: data, item: item })) {
item.hide();
dataSource.remove(data);
dataSource.sync();
}
},
add: function() {
var that = this,
dataSource = that.dataSource,
index = dataSource.indexOf((dataSource.view() || [])[0]);
if (index < 0) {
index = 0;
}
that.cancel();
dataSource.insert(index, {});
that.edit(that.element.children().first());
},
cancel: function() {
var that = this,
dataSource = that.dataSource;
if (that.editable) {
var container = that.editable.element;
var model = that._modelFromElement(container);
if (!that.trigger(CANCEL, { model: model, container: container})) {
dataSource.cancelChanges(model);
that._closeEditable(false);
}
}
},
_crudHandlers: function() {
var that = this,
clickNS = CLICK + NS;
that.element.on(clickNS, ".k-edit-button", function(e) {
var item = $(this).closest("[" + kendo.attr("uid") + "]");
that.edit(item);
e.preventDefault();
});
that.element.on(clickNS, ".k-delete-button", function(e) {
var item = $(this).closest("[" + kendo.attr("uid") + "]");
that.remove(item);
e.preventDefault();
});
that.element.on(clickNS, ".k-update-button", function(e) {
that.save();
e.preventDefault();
});
that.element.on(clickNS, ".k-cancel-button", function(e) {
that.cancel();
e.preventDefault();
});
},
destroy: function() {
var that = this;
Widget.fn.destroy.call(that);
that._unbindDataSource();
that._destroyEditable();
that.element.off(NS);
if (that.pager) {
that.pager.destroy();
}
kendo.destroy(that.element);
}
});
kendo.ui.plugin(ListView);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
Widget = kendo.ui.Widget,
logToConsole = kendo.logToConsole,
rFileExtension = /\.([^\.]+)$/,
NS = ".kendoUpload",
SELECT = "select",
UPLOAD = "upload",
SUCCESS = "success",
ERROR = "error",
COMPLETE = "complete",
CANCEL = "cancel",
PROGRESS = "progress",
REMOVE = "remove";
var Upload = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
that.name = element.name;
that.multiple = that.options.multiple;
that.localization = that.options.localization;
var activeInput = that.element;
that.wrapper = activeInput.closest(".k-upload");
if (that.wrapper.length === 0) {
that.wrapper = that._wrapInput(activeInput);
}
that._activeInput(activeInput);
that.toggle(that.options.enabled);
var ns = that._ns = NS + "-" + kendo.guid();
activeInput.closest("form")
.on("submit" + ns, $.proxy(that._onParentFormSubmit, that))
.on("reset" + ns, $.proxy(that._onParentFormReset, that));
if (that.options.async.saveUrl) {
that._module = that._supportsFormData() ?
new formDataUploadModule(that) :
new iframeUploadModule(that);
that._async = true;
var initialFiles = that.options.files;
if (initialFiles.length > 0) {
that._renderInitialFiles(initialFiles);
}
} else {
that._module = new syncUploadModule(that);
}
if (that._supportsDrop()) {
that._setupDropZone();
}
that.wrapper
.on("click", ".k-upload-action", $.proxy(that._onFileAction, that))
.on("click", ".k-upload-selected", $.proxy(that._onUploadSelected, that));
if(that.element.val()) {
that._onInputChange({ target: that.element });
}
},
events: [
SELECT,
UPLOAD,
SUCCESS,
ERROR,
COMPLETE,
CANCEL,
PROGRESS,
REMOVE
],
options: {
name: "Upload",
enabled: true,
multiple: true,
showFileList: true,
template: "",
files: [],
async: {
removeVerb: "POST",
autoUpload: true,
withCredentials: true
},
localization: {
"select": "Select files...",
"cancel": "Cancel",
"retry": "Retry",
"remove": "Remove",
"uploadSelectedFiles": "Upload files",
"dropFilesHere": "drop files here to upload",
"statusUploading": "uploading",
"statusUploaded": "uploaded",
"statusWarning": "warning",
"statusFailed": "failed",
"headerStatusUploading": "Uploading...",
"headerStatusUploaded": "Done"
}
},
setOptions: function(options) {
var that = this,
activeInput = that.element;
Widget.fn.setOptions.call(that, options);
that.multiple = that.options.multiple;
activeInput.attr("multiple", that._supportsMultiple() ? that.multiple : false);
that.toggle(that.options.enabled);
},
enable: function(enable) {
enable = typeof (enable) === "undefined" ? true : enable;
this.toggle(enable);
},
disable: function() {
this.toggle(false);
},
toggle: function(enable) {
enable = typeof (enable) === "undefined" ? enable : !enable;
this.wrapper.toggleClass("k-state-disabled", enable);
this.element.prop("disabled", enable);
},
destroy: function() {
var that = this;
$(document)
.add($(".k-dropzone", that.wrapper))
.add(that.wrapper.closest("form"))
.off(that._ns);
$(that.element).off(NS);
Widget.fn.destroy.call(that);
},
_addInput: function(sourceInput) {
//check if source input is a DOM element. Required for some unit tests
if (!sourceInput[0].nodeType) {
return;
}
var that = this,
input = sourceInput.clone().val("");
input
.insertAfter(that.element)
.data("kendoUpload", that);
$(that.element)
.hide()
.attr("tabindex", "-1")
.removeAttr("id")
.off(NS);
that._activeInput(input);
that.element.focus();
},
_activeInput: function(input) {
var that = this,
wrapper = that.wrapper;
that.element = input;
input
.attr("multiple", that._supportsMultiple() ? that.multiple : false)
.attr("autocomplete", "off")
.on("click" + NS, function(e) {
if (wrapper.hasClass("k-state-disabled")) {
e.preventDefault();
}
})
.on("focus" + NS, function() {
$(this).parent().addClass("k-state-focused");
})
.on("blur" + NS, function() {
$(this).parent().removeClass("k-state-focused");
})
.on("change" + NS, $.proxy(that._onInputChange, that))
.on("keydown" + NS, $.proxy(that._onInputKeyDown, that));
},
_onInputKeyDown: function(e) {
var that = this;
var firstButton = that.wrapper.find(".k-upload-action:first");
if (e.keyCode === kendo.keys.TAB && firstButton.length > 0) {
e.preventDefault();
firstButton.focus();
}
},
_onInputChange: function(e) {
var that = this;
var input = $(e.target);
var files = assignGuidToFiles(that._inputFiles(input), that._isAsyncNonBatch());
var prevented = that.trigger(SELECT, { files: files });
if (prevented) {
that._addInput(input);
input.remove();
} else {
that._module.onSelect({target : input}, files);
}
},
_onDrop: function (e) {
var dt = e.originalEvent.dataTransfer;
var that = this;
var droppedFiles = dt.files;
var files = assignGuidToFiles(getAllFileInfo(droppedFiles), that._isAsyncNonBatch());
stopEvent(e);
if (droppedFiles.length > 0) {
var prevented = that.trigger(SELECT, { files: files });
if (!prevented) {
that._module.onSelect({target : $(".k-dropzone", that.wrapper) }, files);
}
}
},
_isAsyncNonBatch: function () {
return (this._async && !this.options.async.batch) || false;
},
_renderInitialFiles: function(files) {
var that = this;
var idx = 0;
files = assignGuidToFiles(files, true);
for (idx = 0; idx < files.length; idx++) {
var currentFile = files[idx];
var fileEntry = that._enqueueFile(currentFile.name, { fileNames: [ currentFile ] });
fileEntry.addClass("k-file-success").data("files", [ files[idx] ]);
$(".k-progress", fileEntry).width('100%');
$(".k-upload-status", fileEntry).prepend("100% ");
that._fileAction(fileEntry, REMOVE);
}
},
_prepareTemplateData: function(name, data) {
var filesData = data.fileNames,
templateData = {},
totalSize = 0,
idx = 0;
for (idx = 0; idx < filesData.length; idx++) {
totalSize += filesData[idx].size;
}
templateData.name = name;
templateData.size = totalSize;
templateData.files = data.fileNames;
return templateData;
},
_prepareDefaultFileEntryTemplate: function(name, data) {
var extension = "";
var defaultTemplate = $("" +
"" + name + " " +
" ");
if (data.fileNames.length == 1 && !!data.fileNames[0].extension) {
extension = data.fileNames[0].extension.substring(1);
$('.k-icon', defaultTemplate).addClass('k-i-' + extension);
}
return defaultTemplate;
},
_enqueueFile: function(name, data) {
var that = this;
var existingFileEntries;
var fileEntry;
var fileUid = data.fileNames[0].uid;
var fileList = $(".k-upload-files", that.wrapper);
var options = that.options;
var template = options.template;
var templateData;
if (fileList.length === 0) {
fileList = $("").appendTo(that.wrapper);
if (!that.options.showFileList) {
fileList.hide();
}
that.wrapper.removeClass("k-upload-empty");
}
existingFileEntries = $(".k-file", fileList);
if (!template) {
fileEntry = that._prepareDefaultFileEntryTemplate(name, data);
} else {
templateData = that._prepareTemplateData(name, data);
template = kendo.template(template);
fileEntry = $("" + template(templateData) + " ");
fileEntry.find(".k-upload-action").addClass("k-button k-button-bare");
}
fileEntry
.attr(kendo.attr("uid"), fileUid)
.appendTo(fileList)
.data(data);
if (!that._async) {
$(".k-progress", fileEntry).width('100%');
}
if (!that.multiple && existingFileEntries.length > 0) {
that._module.onRemove({target : $(existingFileEntries, that.wrapper)});
}
return fileEntry;
},
_removeFileEntry: function(fileEntry) {
var that = this;
var fileList = fileEntry.closest(".k-upload-files");
var allFiles;
var allCompletedFiles;
fileEntry.remove();
allFiles = $(".k-file", fileList);
allCompletedFiles = $(".k-file-success, .k-file-error", fileList);
if (allCompletedFiles.length === allFiles.length) {
this._hideUploadButton();
}
if (allFiles.length === 0) {
fileList.remove();
that.wrapper.addClass("k-upload-empty");
that._hideHeaderUploadstatus();
}
},
_fileAction: function(fileElement, actionKey) {
var classDictionary = { remove: "k-delete", cancel: "k-cancel", retry: "k-retry" };
var iconsClassDictionary = {remove: "k-i-close", cancel: "k-i-close", retry: "k-i-refresh"};
if (!classDictionary.hasOwnProperty(actionKey)) {
return;
}
this._clearFileAction(fileElement);
if (!this.options.template) {
fileElement.find(".k-upload-status .k-upload-action").remove();
fileElement.find(".k-upload-status").append(
this._renderAction(classDictionary[actionKey], this.localization[actionKey], iconsClassDictionary[actionKey])
);
} else {
fileElement.find(".k-upload-action")
.addClass("k-button k-button-bare")
.append("" +
" "
);
}
else {
return $(
"" +
actionText +
" "
);
}
},
_clearFileAction: function(fileElement) {
$(".k-upload-action", fileElement).empty().hide();
},
_onFileAction: function(e) {
var that = this;
if (!that.wrapper.hasClass("k-state-disabled")) {
var button = $(e.target).closest(".k-upload-action"),
icon = button.find(".k-icon"),
fileEntry = button.closest(".k-file"),
eventArgs = { files: fileEntry.data("fileNames") };
if (icon.hasClass("k-delete")) {
if (!that.trigger(REMOVE, eventArgs)) {
that._module.onRemove({target : $(fileEntry, that.wrapper)}, eventArgs.data);
}
} else if (icon.hasClass("k-cancel")) {
that.trigger(CANCEL, eventArgs);
that._module.onCancel({ target: $(fileEntry, that.wrapper) });
this._checkAllComplete();
that._updateHeaderUploadStatus();
} else if (icon.hasClass("k-retry")) {
$(".k-warning", fileEntry).remove();
that._module.onRetry({ target: $(fileEntry, that.wrapper) });
}
}
return false;
},
_onUploadSelected: function() {
var that = this;
var wrapper = that.wrapper;
if (!wrapper.hasClass("k-state-disabled")) {
this._module.onSaveSelected();
}
return false;
},
_onFileProgress: function(e, percentComplete) {
var progressPct;
if (!this.options.template) {
progressPct = $(".k-upload-pct", e.target);
if (progressPct.length === 0) {
$(".k-upload-status", e.target).prepend("' + localization.headerStatusUploading +
'' + localization.statusUploading + ' ' +
' ';
if (dropZone.length > 0) {
dropZone.append(headerUploadStatus);
} else {
$('.k-upload-button', this.wrapper).after(headerUploadStatus);
}
},
_updateHeaderUploadStatus: function() {
var that = this;
var localization = that.localization;
var currentlyUploading = $('.k-file', that.wrapper).not('.k-file-success, .k-file-error');
var failedUploads;
var headerUploadStatus;
var headerUploadStatusIcon;
if (currentlyUploading.length === 0) {
failedUploads = $('.k-file.k-file-error', that.wrapper);
headerUploadStatus = $('.k-upload-status-total', that.wrapper);
headerUploadStatusIcon = $('.k-icon', headerUploadStatus)
.removeClass('k-loading')
.addClass((failedUploads.length !== 0) ? 'k-warning' : "k-i-tick")
.text((failedUploads.length !== 0) ? localization.statusWarning : localization.statusUploaded);
headerUploadStatus.text(that.localization.headerStatusUploaded)
.append(headerUploadStatusIcon);
}
},
_hideHeaderUploadstatus: function() {
$('.k-upload-status-total', this.wrapper).remove();
},
_onParentFormSubmit: function() {
var upload = this,
element = upload.element;
if(typeof this._module.onAbort !== 'undefined'){
this._module.onAbort();
}
if (!element.value) {
var input = $(element);
// Prevent submitting an empty input
input.attr("disabled", "disabled");
window.setTimeout(function() {
// Restore the input so the Upload remains functional
// in case the user cancels the form submit
input.removeAttr("disabled");
}, 0);
}
},
_onParentFormReset: function() {
$(".k-upload-files", this.wrapper).remove();
},
_supportsFormData: function() {
return typeof(FormData) != "undefined";
},
_supportsMultiple: function() {
var windows = this._userAgent().indexOf("Windows") > -1;
return !kendo.support.browser.opera &&
!(kendo.support.browser.safari && windows);
},
_supportsDrop: function() {
var userAgent = this._userAgent().toLowerCase(),
isChrome = /chrome/.test(userAgent),
isSafari = !isChrome && /safari/.test(userAgent),
isWindowsSafari = isSafari && /windows/.test(userAgent);
return !isWindowsSafari && this._supportsFormData() && (this.options.async.saveUrl);
},
_userAgent: function() {
return navigator.userAgent;
},
_setupDropZone: function() {
var that = this;
$(".k-upload-button", this.wrapper)
.wrap("
");
var ns = that._ns;
var dropZone = $(".k-dropzone", that.wrapper)
.append($("" + that.localization.dropFilesHere + " "))
.on("dragenter" + ns, stopEvent)
.on("dragover" + ns, function(e) { e.preventDefault(); })
.on("drop" + ns, $.proxy(this._onDrop, this));
bindDragEventWrappers(dropZone, ns,
function() { dropZone.addClass("k-dropzone-hovered"); },
function() { dropZone.removeClass("k-dropzone-hovered"); });
bindDragEventWrappers($(document), ns,
function() {
dropZone.addClass("k-dropzone-active");
dropZone.closest('.k-upload').removeClass('k-upload-empty');
},
function() {
dropZone.removeClass("k-dropzone-active");
if ($('li.k-file', dropZone.closest('.k-upload')).length === 0) {
dropZone.closest('.k-upload').addClass('k-upload-empty');
}
});
},
_supportsRemove: function() {
return !!this.options.async.removeUrl;
},
_submitRemove: function(fileNames, data, onSuccess, onError) {
var upload = this,
removeField = upload.options.async.removeField || "fileNames",
params = $.extend(data, getAntiForgeryTokens());
params[removeField] = fileNames;
jQuery.ajax({
type: this.options.async.removeVerb,
dataType: "json",
dataFilter: normalizeJSON,
url: this.options.async.removeUrl,
traditional: true,
data: params,
success: onSuccess,
error: onError
});
},
_wrapInput: function(input) {
var that = this;
var options = that.options;
input.wrap("");
if(!options.async.saveUrl) {
input.closest(".k-upload").addClass("k-upload-sync");
}
input.closest(".k-upload").addClass("k-upload-empty");
input.closest(".k-button")
.append("" + this.localization.select + " ");
return input.closest(".k-upload");
},
_checkAllComplete: function() {
if ($(".k-file.k-file-progress", this.wrapper).length === 0) {
this.trigger(COMPLETE);
}
},
_inputFiles: function(sourceInput) {
return inputFiles(sourceInput);
}
});
// Synchronous upload module
var syncUploadModule = function(upload) {
this.name = "syncUploadModule";
this.element = upload.wrapper;
this.upload = upload;
this.element
.closest("form")
.attr("enctype", "multipart/form-data")
.attr("encoding", "multipart/form-data");
};
syncUploadModule.prototype = {
onSelect: function(e, files) {
var upload = this.upload;
var sourceInput = $(e.target);
upload._addInput(sourceInput);
var file = upload._enqueueFile(getFileName(sourceInput), {
"relatedInput" : sourceInput, "fileNames": files
});
upload._fileAction(file, REMOVE);
},
onRemove: function(e) {
var fileEntry = getFileEntry(e);
fileEntry.data("relatedInput").remove();
this.upload._removeFileEntry(fileEntry);
}
};
var iframeUploadModule = function(upload) {
this.name = "iframeUploadModule";
this.element = upload.wrapper;
this.upload = upload;
this.iframes = [];
};
Upload._frameId = 0;
iframeUploadModule.prototype = {
onSelect: function(e, files) {
var upload = this.upload,
sourceInput = $(e.target);
var fileEntry = this.prepareUpload(sourceInput, files);
if (upload.options.async.autoUpload) {
this.performUpload(fileEntry);
} else {
if (upload._supportsRemove()) {
this.upload._fileAction(fileEntry, REMOVE);
}
upload._showUploadButton();
}
},
prepareUpload: function(sourceInput, files) {
var upload = this.upload;
var activeInput = $(upload.element);
var name = upload.options.async.saveField || sourceInput.attr("name");
upload._addInput(sourceInput);
sourceInput.attr("name", name);
var iframe = this.createFrame(upload.name + "_" + Upload._frameId++);
this.registerFrame(iframe);
var form = this.createForm(upload.options.async.saveUrl, iframe.attr("name"))
.append(activeInput);
var fileEntry = upload._enqueueFile(
getFileName(sourceInput),
{ "frame": iframe, "relatedInput": activeInput, "fileNames": files });
iframe
.data({ "form": form, "file": fileEntry });
return fileEntry;
},
performUpload: function(fileEntry) {
var e = { files: fileEntry.data("fileNames") },
iframe = fileEntry.data("frame"),
upload = this.upload;
if (!upload.trigger(UPLOAD, e)) {
upload._hideUploadButton();
upload._showHeaderUploadStatus();
iframe.appendTo(document.body);
var form = iframe.data("form")
.attr("action", upload.options.async.saveUrl)
.appendTo(document.body);
e.data = $.extend({ }, e.data, getAntiForgeryTokens());
for (var key in e.data) {
var dataInput = form.find("input[name='" + key + "']");
if (dataInput.length === 0) {
dataInput = $("${text}
')
.appendTo(this.element);
that.breadcrumbs = navigation.find("input:first")
.kendoBreadcrumbs({
value: that.options.path,
change: function() {
that.path(this.value());
}
}).data("kendoBreadcrumbs");
that.searchBox = navigation.parent().find("input:last")
.kendoSearchBox({
label: that.options.messages.search,
change: function() {
that.search(this.value());
}
}).data("kendoSearchBox");
},
_error: function(e) {
var that = this,
status;
if (!that.trigger(ERROR, e)) {
status = e.xhr.status;
if (e.status == 'error') {
if (status == '404') {
that._showMessage(that.options.messages.directoryNotFound);
} else if (status != '0') {
that._showMessage('Error! The requested URL returned ' + status + ' - ' + e.xhr.statusText);
}
} else if (status == 'timeout') {
that._showMessage('Error! Server timeout.');
}
}
},
_showMessage: function(message, type) {
return window[type || "alert"](message);
},
refresh: function() {
var that = this;
that._navigation();
that._toolbar();
that._content();
},
_editTmpl: function() {
var html = '';
html += '#if(' + TYPEFIELD + ' == "d") { #';
html += '
';
html += "#}else{#";
html += '
';
html += "#}#";
html += '#if(' + TYPEFIELD + ' == "d") { #';
html += ' ';
return proxy(kendo.template(html), { sizeFormatter: sizeFormatter } );
},
_itemTmpl: function() {
var that = this,
html = '';
html += '#if(' + TYPEFIELD + ' == "d") { #';
html += '
';
html += "#}else{#";
html += '
';
html += "#}#";
html += '${' + NAMEFIELD + '} ';
html += '#if(' + TYPEFIELD + ' == "f") { # ${this.sizeFormatter(' + SIZEFIELD + ')} #}#';
html += ' ';
return proxy(kendo.template(html), { sizeFormatter: sizeFormatter } );
},
path: function(value) {
var that = this,
path = that._path || "";
if (value !== undefined) {
that._path = value.replace(trimSlashesRegExp, "") + "/";
that.dataSource.read({ path: that._path });
return;
}
if (path) {
path = path.replace(trimSlashesRegExp, "");
}
return path === "/" || path === "" ? "" : (path + "/");
}
});
var SearchBox = Widget.extend({
init: function(element, options) {
var that = this;
options = options || {};
Widget.fn.init.call(that, element, options);
if (placeholderSupported) {
that.element.attr("placeholder", that.options.label);
}
that._wrapper();
that.element
.on("keydown" + SEARCHBOXNS, proxy(that._keydown, that))
.on("change" + SEARCHBOXNS, proxy(that._updateValue, that));
that.wrapper
.on(CLICK + SEARCHBOXNS, "a", proxy(that._click, that));
if (!placeholderSupported) {
that.element.on("focus" + SEARCHBOXNS, proxy(that._focus, that))
.on("blur" + SEARCHBOXNS, proxy(that._blur, that));
}
},
options: {
name: "SearchBox",
label: "Search",
value: ""
},
events: [ CHANGE ],
destroy: function() {
var that = this;
that.wrapper
.add(that.element)
.add(that.label)
.off(SEARCHBOXNS);
Widget.fn.destroy.call(that);
},
_keydown: function(e) {
if (e.keyCode === 13) {
this._updateValue();
}
},
_click: function(e) {
e.preventDefault();
this._updateValue();
},
_updateValue: function() {
var that = this,
value = that.element.val();
if (value !== that.value()) {
that.value(value);
that.trigger(CHANGE);
}
},
_blur: function() {
this._updateValue();
this._toggleLabel();
},
_toggleLabel: function() {
if (!placeholderSupported) {
this.label.toggle(!this.element.val());
}
},
_focus: function() {
this.label.hide();
},
_wrapper: function() {
var element = this.element,
wrapper = element.parents(".k-search-wrap");
element[0].style.width = "";
element.addClass("k-input");
if (!wrapper.length) {
wrapper = element.wrap($('
')).parent();
if (!placeholderSupported) {
$('' + this.options.label + ' ').insertBefore(element);
}
$('
')).parent();
}
overlay = wrapper.find(".k-breadcrumbs-wrap");
if (!overlay.length) {
overlay = $('
').appendTo(wrapper);
}
this.wrapper = wrapper;
this.overlay = overlay;
},
refresh: function() {
var html = "",
value = this.value(),
segments,
segment,
idx,
length;
if (value === undefined || !value.match(/^\//)) {
value = "/" + (value || "");
}
segments = value.split("/");
for (idx = 0, length = segments.length; idx < length; idx++) {
segment = segments[idx];
if (segment) {
if (!html) {
html += 'root ';
}
html += '' + segments[idx] + ' ';
html += '> ';
}
}
this.overlay.empty().append($(html));
this._adjustSectionWidth();
},
_adjustSectionWidth: function() {
var that = this,
wrapper = that.wrapper,
width = wrapper.width() - that.options.gap,
links = that.overlay.find("a"),
a;
links.each(function(index) {
a = $(this);
if (a.parent().width() > width) {
if (index == links.length - 1) {
a.width(width);
} else {
a.prev().addBack().hide();
}
}
});
},
value: function(val) {
if (val !== undefined) {
this._value = val.replace(/\/{2,}/g, "/");
this.refresh();
return;
}
return this._value;
},
_path: function(trail) {
return "/" + $.map(trail, function(b) {
return $(b).text();
}).join("/");
}
});
kendo.ui.plugin(FileBrowser);
kendo.ui.plugin(Breadcrumbs);
kendo.ui.plugin(SearchBox);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
Widget = kendo.ui.Widget,
FileBrowser = kendo.ui.FileBrowser,
isPlainObject = $.isPlainObject,
proxy = $.proxy,
extend = $.extend,
placeholderSupported = kendo.support.placeholder,
browser = kendo.support.browser,
isFunction = kendo.isFunction,
trimSlashesRegExp = /(^\/|\/$)/g,
CHANGE = "change",
APPLY = "apply",
ERROR = "error",
CLICK = "click",
NS = ".kendoImageBrowser",
NAMEFIELD = "name",
SIZEFIELD = "size",
TYPEFIELD = "type",
DEFAULTSORTORDER = { field: TYPEFIELD, dir: "asc" },
EMPTYTILE = kendo.template('${text} ';
html += '#if(' + TYPEFIELD + ' == "d") { #';
html += '
';
html += "#}else{#";
if (that.options.transport && that.options.transport.thumbnailUrl) {
html += '
';
} else {
html += '
';
}
html += "#}#";
html += '${' + NAMEFIELD + '} ';
html += '#if(' + TYPEFIELD + ' == "f") { # ${this.sizeFormatter(' + SIZEFIELD + ')} #}#';
html += ' ';
return proxy(kendo.template(html), { sizeFormatter: sizeFormatter } );
}
});
kendo.ui.plugin(ImageBrowser);
})(window.kendo.jQuery);
(function($,undefined) {
// Imports ================================================================
var kendo = window.kendo,
Class = kendo.Class,
Widget = kendo.ui.Widget,
os = kendo.support.mobileOS,
browser = kendo.support.browser,
extend = $.extend,
proxy = $.proxy,
deepExtend = kendo.deepExtend,
NS = ".kendoEditor",
keys = kendo.keys;
// options can be: template (as string), cssClass, title, defaultValue
var ToolTemplate = Class.extend({
init: function(options) {
this.options = options;
},
getHtml: function() {
var options = this.options;
return kendo.template(options.template, {useWithBlock:false})(options);
}
});
var EditorUtils = {
editorWrapperTemplate:
'',
buttonTemplate:
'#= data.title #
',
comboBoxTemplate:
']*>/i;
var pixelRe = /^\d+(\.\d*)?(px)?$/i;
var emptyPRe = /<\/p>/i;
var cssDeclaration = /([\w|\-]+)\s*:\s*([^;]+);?/i;
var sizzleAttr = /^sizzle-\d+/i;
var onerrorRe = /\s*onerror\s*=\s*(?:'|")?([^'">\s]*)(?:'|")?/i;
var div = document.createElement("div");
div.innerHTML = "
]*)>(.*)?<\/script>/ig, "$2<\/telerik:script>")
.replace(/]*)>/ig, function(match) {
return match.replace(onerrorRe, "");
})
.replace(/(<\/?img[^>]*>)[\r\n\v\f\t ]+/ig, "$1")
.replace(/^<(table|blockquote)/i, br + '<$1')
.replace(/<\/(table|blockquote)>$/i, '' + br);
},
_fillEmptyElements: function(body) {
// fills empty elements to allow them to be focused
$(body).find("p").each(function() {
var p = $(this);
if (/^\s*$/g.test(p.text()) && !p.find("img,input").length) {
var node = this;
while (node.firstChild && node.firstChild.nodeType != 3) {
node = node.firstChild;
}
if (node.nodeType == 1 && !dom.empty[dom.name(node)]) {
node.innerHTML = kendo.ui.editor.emptyElementContent;
}
}
});
},
_removeSystemElements: function(body) {
// removes persisted system elements
$(".k-paste-container", body).remove();
},
_resetOrderedLists: function(root){
// fix for IE9 OL bug -- https://connect.microsoft.com/IE/feedback/details/657695/ordered-list-numbering-changes-from-correct-to-0-0
var ols = root.getElementsByTagName("ol"), i, ol, originalStart;
for (i = 0; i < ols.length; i++) {
ol = ols[i];
originalStart = ol.getAttribute("start");
ol.setAttribute("start", 1);
if (originalStart) {
ol.setAttribute("start", originalStart);
} else {
ol.removeAttribute(originalStart);
}
}
},
htmlToDom: function(html, root) {
var browser = kendo.support.browser;
var msie = browser.msie;
var legacyIE = msie && browser.version < 9;
html = Serializer.toEditableHtml(html);
if (legacyIE) {
// Internet Explorer removes comments from the beginning of the html
html = "'); },
end: function () { result.push(''); },
skipEncoding: true
},
b: {
start: function () { result.push(''); },
end: function () { result.push(' '); }
},
i: {
start: function () { result.push(''); },
end: function () { result.push(' '); }
},
u: {
start: function () { result.push(''); },
end: function () { result.push(' '); }
},
iframe: {
start: function (node) { result.push(''); },
end: function () { result.push(''); }
},
font: {
start: function (node) {
result.push('');
},
end: function () {
result.push(' ');
}
}
};
function styleAttr(cssText) {
// In IE < 8 the style attribute does not return proper nodeValue
var trim = $.trim;
var css = trim(cssText).split(';');
var i, length = css.length;
var match;
var property, value;
for (i = 0, length = css.length; i < length; i++) {
if (!css[i].length) {
continue;
}
match = cssDeclaration.exec(css[i]);
// IE8 does not provide a value for 'inherit'
if (!match) {
continue;
}
property = trim(match[1].toLowerCase());
value = trim(match[2]);
if (property == "font-size-adjust" || property == "font-stretch") {
continue;
}
if (property.indexOf('color') >= 0) {
value = dom.toHex(value);
} else if (property.indexOf('font') >= 0) {
value = value.replace(quoteRe, "'");
} else if (/\burl\(/g.test(value)) {
value = value.replace(quoteRe, "");
}
result.push(property);
result.push(':');
result.push(value);
result.push(';');
}
}
function attr(node) {
var specifiedAttributes = [];
var attributes = node.attributes;
var attribute, i, l;
var name, value, specified;
if (dom.is(node, 'img')) {
var width = node.style.width,
height = node.style.height,
$node = $(node);
if (width && pixelRe.test(width)) {
$node.attr('width', parseInt(width, 10));
dom.unstyle(node, { width: undefined });
}
if (height && pixelRe.test(height)) {
$node.attr('height', parseInt(height, 10));
dom.unstyle(node, { height: undefined });
}
}
for (i = 0, l = attributes.length; i < l; i++) {
attribute = attributes[i];
name = attribute.nodeName;
value = attribute.nodeValue;
specified = attribute.specified;
// In IE < 8 the 'value' attribute is not returned as 'specified'. The same goes for type="text"
if (name == 'value' && 'value' in node && node.value) {
specified = true;
} else if (name == 'type' && value == 'text') {
specified = true;
} else if (name == "class" && !value) {
specified = false;
} else if (sizzleAttr.test(name)) {
specified = false;
} else if (name == 'complete') {
specified = false;
} else if (name == 'altHtml') {
specified = false;
} else if (name == 'start' && (dom.is(node, "ul") || dom.is(node, "ol"))) {
specified = false;
} else if (name.indexOf('_moz') >= 0) {
specified = false;
}
if (specified) {
specifiedAttributes.push(attribute);
}
}
if (!specifiedAttributes.length) {
return;
}
specifiedAttributes.sort(function (a, b) {
return a.nodeName > b.nodeName ? 1 : a.nodeName < b.nodeName ? -1 : 0;
});
for (i = 0, l = specifiedAttributes.length; i < l; i++) {
attribute = specifiedAttributes[i];
name = attribute.nodeName;
value = attribute.nodeValue;
if (name == "class" && value == "k-table") {
continue;
}
result.push(' ');
result.push(name);
result.push('="');
if (name == 'style') {
styleAttr(value || node.style.cssText);
} else if (name == 'src' || name == 'href') {
result.push(node.getAttribute(name, 2));
} else {
result.push(dom.fillAttrs[name] ? name : value);
}
result.push('"');
}
}
function children(node, skip, skipEncoding) {
for (var childNode = node.firstChild; childNode; childNode = childNode.nextSibling) {
child(childNode, skip, skipEncoding);
}
}
function text(node) {
return node.nodeValue.replace(/\ufeff/g, "");
}
function child(node, skip, skipEncoding) {
var nodeType = node.nodeType,
tagName, mapper,
parent, value, previous;
if (nodeType == 1) {
tagName = dom.name(node);
if (!tagName || dom.insignificant(node)) {
return;
}
if (dom.isInline(node) && node.childNodes.length == 1 && node.firstChild.nodeType == 3&& !text(node.firstChild)) {
return;
}
mapper = tagMap[tagName];
if (mapper) {
mapper.start(node);
children(node, false, mapper.skipEncoding);
mapper.end(node);
return;
}
result.push('<');
result.push(tagName);
attr(node);
if (dom.empty[tagName]) {
result.push(' />');
} else {
result.push('>');
children(node, skip || dom.is(node, 'pre'));
result.push('');
}
} else if (nodeType == 3) {
value = text(node);
if (!skip && supportsLeadingWhitespace) {
parent = node.parentNode;
previous = node.previousSibling;
if (!previous) {
previous = (dom.isInline(parent) ? parent : node).previousSibling;
}
if (!previous || previous.innerHTML === "" || dom.isBlock(previous)) {
value = value.replace(/^[\r\n\v\f\t ]+/, '');
}
value = value.replace(/ +/, ' ');
}
result.push(skipEncoding ? value : dom.encode(value, options));
} else if (nodeType == 4) {
result.push('');
} else if (nodeType == 8) {
if (node.data.indexOf('[CDATA[') < 0) {
result.push('');
} else {
result.push('');
}
}
}
function textOnly(root) {
var childrenCount = root.childNodes.length;
var textChild = childrenCount && root.firstChild.nodeType == 3;
return textChild && (childrenCount == 1 || (childrenCount == 2 && dom.insignificant(root.lastChild)));
}
if (textOnly(root)) {
return dom.encode(text(root.firstChild).replace(/[\r\n\v\f\t ]+/, ' '), options);
}
children(root);
result = result.join('');
// if serialized dom contains only whitespace elements, consider it empty (required field validation)
if (result.replace(brRe, "").replace(emptyPRe, "") === "") {
return "";
}
return result;
}
};
extend(Editor, {
Serializer: Serializer
});
})(window.kendo.jQuery);
(function($) {
// Imports ================================================================
var kendo = window.kendo,
Class = kendo.Class,
extend = $.extend,
Editor = kendo.ui.editor,
browser = kendo.support.browser,
dom = Editor.Dom,
findNodeIndex = dom.findNodeIndex,
isDataNode = dom.isDataNode,
findClosestAncestor = dom.findClosestAncestor,
getNodeLength = dom.getNodeLength,
normalize = dom.normalize;
var SelectionUtils = {
selectionFromWindow: function(window) {
if (!("getSelection" in window)) {
return new W3CSelection(window.document);
}
return window.getSelection();
},
selectionFromRange: function(range) {
var rangeDocument = RangeUtils.documentFromRange(range);
return SelectionUtils.selectionFromDocument(rangeDocument);
},
selectionFromDocument: function(document) {
return SelectionUtils.selectionFromWindow(dom.windowFromDocument(document));
}
};
var W3CRange = Class.extend({
init: function(doc) {
$.extend(this, {
ownerDocument: doc, /* not part of the spec; used when cloning ranges, traversing the dom and creating fragments */
startContainer: doc,
endContainer: doc,
commonAncestorContainer: doc,
startOffset: 0,
endOffset: 0,
collapsed: true
});
},
// Positioning Methods
setStart: function (node, offset) {
this.startContainer = node;
this.startOffset = offset;
updateRangeProperties(this);
fixIvalidRange(this, true);
},
setEnd: function (node, offset) {
this.endContainer = node;
this.endOffset = offset;
updateRangeProperties(this);
fixIvalidRange(this, false);
},
setStartBefore: function (node) {
this.setStart(node.parentNode, findNodeIndex(node));
},
setStartAfter: function (node) {
this.setStart(node.parentNode, findNodeIndex(node) + 1);
},
setEndBefore: function (node) {
this.setEnd(node.parentNode, findNodeIndex(node));
},
setEndAfter: function (node) {
this.setEnd(node.parentNode, findNodeIndex(node) + 1);
},
selectNode: function (node) {
this.setStartBefore(node);
this.setEndAfter(node);
},
selectNodeContents: function (node) {
this.setStart(node, 0);
this.setEnd(node, node[node.nodeType === 1 ? 'childNodes' : 'nodeValue'].length);
},
collapse: function (toStart) {
var that = this;
if (toStart) {
that.setEnd(that.startContainer, that.startOffset);
} else {
that.setStart(that.endContainer, that.endOffset);
}
},
// Editing Methods
deleteContents: function () {
var that = this,
range = that.cloneRange();
if (that.startContainer != that.commonAncestorContainer) {
that.setStartAfter(findClosestAncestor(that.commonAncestorContainer, that.startContainer));
}
that.collapse(true);
(function deleteSubtree(iterator) {
while (iterator.next()) {
if (iterator.hasPartialSubtree()) {
deleteSubtree(iterator.getSubtreeIterator());
} else {
iterator.remove();
}
}
})(new RangeIterator(range));
},
cloneContents: function () {
// clone subtree
var document = RangeUtils.documentFromRange(this);
return (function cloneSubtree(iterator) {
var node, frag = document.createDocumentFragment();
while (node = iterator.next()) {
node = node.cloneNode(!iterator.hasPartialSubtree());
if (iterator.hasPartialSubtree()) {
node.appendChild(cloneSubtree(iterator.getSubtreeIterator()));
}
frag.appendChild(node);
}
return frag;
})(new RangeIterator(this));
},
extractContents: function () {
var that = this,
range = that.cloneRange();
if (that.startContainer != that.commonAncestorContainer) {
that.setStartAfter(findClosestAncestor(that.commonAncestorContainer, that.startContainer));
}
that.collapse(true);
var document = RangeUtils.documentFromRange(that);
return (function extractSubtree(iterator) {
var node, frag = document.createDocumentFragment();
while (node = iterator.next()) {
if (iterator.hasPartialSubtree()) {
node = node.cloneNode(false);
node.appendChild(extractSubtree(iterator.getSubtreeIterator()));
} else {
iterator.remove(that.originalRange);
}
frag.appendChild(node);
}
return frag;
})(new RangeIterator(range));
},
insertNode: function (node) {
var that = this;
if (isDataNode(that.startContainer)) {
if (that.startOffset != that.startContainer.nodeValue.length) {
dom.splitDataNode(that.startContainer, that.startOffset);
}
dom.insertAfter(node, that.startContainer);
} else {
dom.insertAt(that.startContainer, node, that.startOffset);
}
that.setStart(that.startContainer, that.startOffset);
},
cloneRange: function () {
// fast copy
return $.extend(new W3CRange(this.ownerDocument), {
startContainer: this.startContainer,
endContainer: this.endContainer,
commonAncestorContainer: this.commonAncestorContainer,
startOffset: this.startOffset,
endOffset: this.endOffset,
collapsed: this.collapsed,
originalRange: this /* not part of the spec; used to update the original range when calling extractContents() on clones */
});
},
// used for debug purposes
toString: function () {
var startNodeName = this.startContainer.nodeName,
endNodeName = this.endContainer.nodeName;
return [startNodeName == "#text" ? this.startContainer.nodeValue : startNodeName, '(', this.startOffset, ') : ',
endNodeName == "#text" ? this.endContainer.nodeValue : endNodeName, '(', this.endOffset, ')'].join('');
}
});
/* can be used in Range.compareBoundaryPoints if we need it one day */
function compareBoundaries(start, end, startOffset, endOffset) {
if (start == end) {
return endOffset - startOffset;
}
// end is child of start
var container = end;
while (container && container.parentNode != start) {
container = container.parentNode;
}
if (container) {
return findNodeIndex(container) - startOffset;
}
// start is child of end
container = start;
while (container && container.parentNode != end) {
container = container.parentNode;
}
if (container) {
return endOffset - findNodeIndex(container) - 1;
}
// deep traversal
var root = dom.commonAncestor(start, end);
var startAncestor = start;
while (startAncestor && startAncestor.parentNode != root) {
startAncestor = startAncestor.parentNode;
}
if (!startAncestor) {
startAncestor = root;
}
var endAncestor = end;
while (endAncestor && endAncestor.parentNode != root) {
endAncestor = endAncestor.parentNode;
}
if (!endAncestor) {
endAncestor = root;
}
if (startAncestor == endAncestor) {
return 0;
}
return findNodeIndex(endAncestor) - findNodeIndex(startAncestor);
}
function fixIvalidRange(range, toStart) {
function isInvalidRange(range) {
try {
return compareBoundaries(range.startContainer, range.endContainer, range.startOffset, range.endOffset) < 0;
} catch (ex) {
// range was initially invalid (e.g. when cloned from invalid range) - it must be fixed
return true;
}
}
if (isInvalidRange(range)) {
if (toStart) {
range.commonAncestorContainer = range.endContainer = range.startContainer;
range.endOffset = range.startOffset;
} else {
range.commonAncestorContainer = range.startContainer = range.endContainer;
range.startOffset = range.endOffset;
}
range.collapsed = true;
}
}
function updateRangeProperties(range) {
range.collapsed = range.startContainer == range.endContainer && range.startOffset == range.endOffset;
var node = range.startContainer;
while (node && node != range.endContainer && !dom.isAncestorOf(node, range.endContainer)) {
node = node.parentNode;
}
range.commonAncestorContainer = node;
}
var RangeIterator = Class.extend({
init: function(range) {
$.extend(this, {
range: range,
_current: null,
_next: null,
_end: null
});
if (range.collapsed) {
return;
}
var root = range.commonAncestorContainer;
this._next = range.startContainer == root && !isDataNode(range.startContainer) ?
range.startContainer.childNodes[range.startOffset] :
findClosestAncestor(root, range.startContainer);
this._end = range.endContainer == root && !isDataNode(range.endContainer) ?
range.endContainer.childNodes[range.endOffset] :
findClosestAncestor(root, range.endContainer).nextSibling;
},
hasNext: function () {
return !!this._next;
},
next: function () {
var that = this,
current = that._current = that._next;
that._next = that._current && that._current.nextSibling != that._end ?
that._current.nextSibling : null;
if (isDataNode(that._current)) {
if (that.range.endContainer == that._current) {
current = current.cloneNode(true);
current.deleteData(that.range.endOffset, current.length - that.range.endOffset);
}
if (that.range.startContainer == that._current) {
current = current.cloneNode(true);
current.deleteData(0, that.range.startOffset);
}
}
return current;
},
traverse: function (callback) {
var that = this,
current;
function next() {
that._current = that._next;
that._next = that._current && that._current.nextSibling != that._end ? that._current.nextSibling : null;
return that._current;
}
while (current = next()) {
if (that.hasPartialSubtree()) {
that.getSubtreeIterator().traverse(callback);
} else {
callback(current);
}
}
return current;
},
remove: function (originalRange) {
var that = this,
inStartContainer = that.range.startContainer == that._current,
inEndContainer = that.range.endContainer == that._current,
start, end, delta;
if (isDataNode(that._current) && (inStartContainer || inEndContainer)) {
start = inStartContainer ? that.range.startOffset : 0;
end = inEndContainer ? that.range.endOffset : that._current.length;
delta = end - start;
if (originalRange && (inStartContainer || inEndContainer)) {
if (that._current == originalRange.startContainer && start <= originalRange.startOffset) {
originalRange.startOffset -= delta;
}
if (that._current == originalRange.endContainer && end <= originalRange.endOffset) {
originalRange.endOffset -= delta;
}
}
that._current.deleteData(start, delta);
} else {
var parent = that._current.parentNode;
if (originalRange && (that.range.startContainer == parent || that.range.endContainer == parent)) {
var nodeIndex = findNodeIndex(that._current);
if (parent == originalRange.startContainer && nodeIndex <= originalRange.startOffset) {
originalRange.startOffset -= 1;
}
if (parent == originalRange.endContainer && nodeIndex < originalRange.endOffset) {
originalRange.endOffset -= 1;
}
}
dom.remove(that._current);
}
},
hasPartialSubtree: function () {
return !isDataNode(this._current) &&
(dom.isAncestorOrSelf(this._current, this.range.startContainer) ||
dom.isAncestorOrSelf(this._current, this.range.endContainer));
},
getSubtreeIterator: function () {
var that = this,
subRange = that.range.cloneRange();
subRange.selectNodeContents(that._current);
if (dom.isAncestorOrSelf(that._current, that.range.startContainer)) {
subRange.setStart(that.range.startContainer, that.range.startOffset);
}
if (dom.isAncestorOrSelf(that._current, that.range.endContainer)) {
subRange.setEnd(that.range.endContainer, that.range.endOffset);
}
return new RangeIterator(subRange);
}
});
var W3CSelection = Class.extend({
init: function(doc) {
this.ownerDocument = doc;
this.rangeCount = 1;
},
addRange: function (range) {
var textRange = this.ownerDocument.body.createTextRange();
// end container should be adopted first in order to prevent selection with negative length
adoptContainer(textRange, range, false);
adoptContainer(textRange, range, true);
textRange.select();
},
removeAllRanges: function () {
var selection = this.ownerDocument.selection;
if (selection.type != "None") {
selection.empty();
}
},
getRangeAt: function () {
var textRange,
range = new W3CRange(this.ownerDocument),
selection = this.ownerDocument.selection,
element, commonAncestor;
try {
textRange = selection.createRange();
element = textRange.item ? textRange.item(0) : textRange.parentElement();
if (element.ownerDocument != this.ownerDocument) {
return range;
}
} catch (ex) {
return range;
}
if (selection.type == "Control") {
range.selectNode(textRange.item(0));
} else {
commonAncestor = textRangeContainer(textRange);
adoptEndPoint(textRange, range, commonAncestor, true);
adoptEndPoint(textRange, range, commonAncestor, false);
if (range.startContainer.nodeType == 9) {
range.setStart(range.endContainer, range.startOffset);
}
if (range.endContainer.nodeType == 9) {
range.setEnd(range.startContainer, range.endOffset);
}
if (textRange.compareEndPoints("StartToEnd", textRange) === 0) {
range.collapse(false);
}
var startContainer = range.startContainer,
endContainer = range.endContainer,
body = this.ownerDocument.body;
if (!range.collapsed && range.startOffset === 0 && range.endOffset == getNodeLength(range.endContainer) && // check for full body selection
!(startContainer == endContainer && isDataNode(startContainer) && startContainer.parentNode == body)) { // but not when single textnode is selected
var movedStart = false,
movedEnd = false;
while (findNodeIndex(startContainer) === 0 && startContainer == startContainer.parentNode.firstChild && startContainer != body) {
startContainer = startContainer.parentNode;
movedStart = true;
}
while (findNodeIndex(endContainer) == getNodeLength(endContainer.parentNode) - 1 && endContainer == endContainer.parentNode.lastChild && endContainer != body) {
endContainer = endContainer.parentNode;
movedEnd = true;
}
if (startContainer == body && endContainer == body && movedStart && movedEnd) {
range.setStart(startContainer, 0);
range.setEnd(endContainer, getNodeLength(body));
}
}
}
return range;
}
});
function textRangeContainer(textRange) {
var left = textRange.duplicate(),
right = textRange.duplicate();
left.collapse(true);
right.collapse(false);
return dom.commonAncestor(textRange.parentElement(), left.parentElement(), right.parentElement());
}
function adoptContainer(textRange, range, start) {
// find anchor node and offset
var container = range[start ? "startContainer" : "endContainer"],
offset = range[start ? "startOffset" : "endOffset"],
textOffset = 0,
isData = isDataNode(container),
anchorNode = isData ? container : container.childNodes[offset] || null,
anchorParent = isData ? container.parentNode : container,
doc = range.ownerDocument,
cursor = doc.body.createTextRange(),
cursorNode;
// visible data nodes need a text offset
if (container.nodeType == 3 || container.nodeType == 4) {
textOffset = offset;
}
if (!anchorParent) {
anchorParent = doc.body;
}
if (anchorParent.nodeName.toLowerCase() == "img") {
cursor.moveToElementText(anchorParent);
cursor.collapse(false);
textRange.setEndPoint(start ? "StartToStart" : "EndToStart", cursor);
} else {
// create a cursor element node to position range (since we can't select text nodes)
cursorNode = anchorParent.insertBefore(dom.create(doc, "a"), anchorNode);
cursor.moveToElementText(cursorNode);
dom.remove(cursorNode);
cursor[start ? "moveStart" : "moveEnd"]("character", textOffset);
cursor.collapse(false);
textRange.setEndPoint(start ? "StartToStart" : "EndToStart", cursor);
}
}
function adoptEndPoint(textRange, range, commonAncestor, start) {
var cursorNode = dom.create(range.ownerDocument, "a"),
cursor = textRange.duplicate(),
comparison = start ? "StartToStart" : "StartToEnd",
result, parent, target,
previous, next,
args, index,
appended = false;
cursorNode.innerHTML = "\ufeff";
cursor.collapse(start);
parent = cursor.parentElement();
if (!dom.isAncestorOrSelf(commonAncestor, parent)) {
parent = commonAncestor;
}
// detect range end points
// insert cursorNode within the textRange parent and move the cursor until it gets outside of the textRange
do {
if (appended) {
parent.insertBefore(cursorNode, cursorNode.previousSibling);
} else {
parent.appendChild(cursorNode);
appended = true;
}
cursor.moveToElementText(cursorNode);
} while ((result = cursor.compareEndPoints(comparison, textRange)) > 0 && cursorNode.previousSibling);
target = cursorNode.nextSibling;
if (result == -1 && isDataNode(target)) {
cursor.setEndPoint(start ? "EndToStart" : "EndToEnd", textRange);
dom.remove(cursorNode);
args = [target, cursor.text.length];
} else {
previous = !start && cursorNode.previousSibling;
next = start && cursorNode.nextSibling;
if (isDataNode(next)) {
args = [next, 0];
} else if (isDataNode(previous)) {
args = [previous, previous.length];
} else {
index = findNodeIndex(cursorNode);
if (parent.nextSibling && index == parent.childNodes.length - 1) {
args = [parent.nextSibling, 0];
} else {
args = [parent, index];
}
}
dom.remove(cursorNode);
}
range[start ? "setStart" : "setEnd"].apply(range, args);
}
var RangeEnumerator = Class.extend({
init: function(range) {
this.enumerate = function () {
var nodes = [];
function visit(node) {
if (dom.is(node, "img") || (node.nodeType == 3 && (!dom.isWhitespace(node) || node.nodeValue == "\ufeff"))) {
nodes.push(node);
} else {
node = node.firstChild;
while (node) {
visit(node);
node = node.nextSibling;
}
}
}
new RangeIterator(range).traverse(visit);
return nodes;
};
}
});
var RestorePoint = Class.extend({
init: function(range, body) {
var that = this;
that.range = range;
that.rootNode = RangeUtils.documentFromRange(range);
that.body = body || that.getEditable(range);
if (dom.name(that.body) != "body") {
that.rootNode = that.body;
}
that.html = that.body.innerHTML;
that.startContainer = that.nodeToPath(range.startContainer);
that.endContainer = that.nodeToPath(range.endContainer);
that.startOffset = that.offset(range.startContainer, range.startOffset);
that.endOffset = that.offset(range.endContainer, range.endOffset);
},
index: function(node) {
var result = 0,
lastType = node.nodeType;
while (node = node.previousSibling) {
var nodeType = node.nodeType;
if (nodeType != 3 || lastType != nodeType) {
result ++;
}
lastType = nodeType;
}
return result;
},
getEditable: function(range) {
var root = range.commonAncestorContainer;
while (root && (root.nodeType == 3 || root.attributes && !root.attributes.contentEditable)) {
root = root.parentNode;
}
return root;
},
restoreHtml: function() {
this.body.innerHTML = this.html;
},
offset: function(node, value) {
if (node.nodeType == 3) {
while ((node = node.previousSibling) && node.nodeType == 3) {
value += node.nodeValue.length;
}
}
return value;
},
nodeToPath: function(node) {
var path = [];
while (node != this.rootNode) {
path.push(this.index(node));
node = node.parentNode;
}
return path;
},
toRangePoint: function(range, start, path, denormalizedOffset) {
var node = this.rootNode,
length = path.length,
offset = denormalizedOffset;
while (length--) {
node = node.childNodes[path[length]];
}
while (node && node.nodeType == 3 && node.nodeValue.length < offset) {
offset -= node.nodeValue.length;
node = node.nextSibling;
}
if (node && offset >= 0) {
range[start ? 'setStart' : 'setEnd'](node, offset);
}
},
toRange: function () {
var that = this,
result = that.range.cloneRange();
that.toRangePoint(result, true, that.startContainer, that.startOffset);
that.toRangePoint(result, false, that.endContainer, that.endOffset);
return result;
}
});
var Marker = Class.extend({
init: function() {
this.caret = null;
},
addCaret: function (range) {
var that = this;
that.caret = dom.create(RangeUtils.documentFromRange(range), 'span', { className: 'k-marker' });
range.insertNode(that.caret);
range.selectNode(that.caret);
return that.caret;
},
removeCaret: function (range) {
var that = this,
previous = that.caret.previousSibling,
startOffset = 0;
if (previous) {
startOffset = isDataNode(previous) ? previous.nodeValue.length : findNodeIndex(previous);
}
var container = that.caret.parentNode;
var containerIndex = previous ? findNodeIndex(previous) : 0;
dom.remove(that.caret);
normalize(container);
var node = container.childNodes[containerIndex];
if (isDataNode(node)) {
range.setStart(node, startOffset);
} else if (node) {
var textNode = dom.lastTextNode(node);
if (textNode) {
range.setStart(textNode, textNode.nodeValue.length);
} else {
range[previous ? 'setStartAfter' : 'setStartBefore'](node);
}
} else {
if (!browser.msie && !container.innerHTML) {
container.innerHTML = ' tags
html = html.replace(/^ $/g, 'li>');
var block = this.isBlock(html);
editor.focus();
var range = editor.getRange();
range.deleteContents();
if (range.startContainer == editor.document) {
range.selectNodeContents(editor.body);
}
var marker = new Marker();
var caret = marker.addCaret(range);
var parent = this.splittableParent(block, caret);
var unwrap = false;
var splittable = parent != editor.body && !dom.is(parent, "td");
if (options.split && splittable && (block || dom.isInline(parent))) {
range.selectNode(caret);
editorNS.RangeUtils.split(range, parent, true);
unwrap = true;
}
var fragment = this.htmlToFragment(html);
if (fragment.firstChild && fragment.firstChild.className === "k-paste-container") {
var fragmentsHtml = [];
for (i = 0, l = fragment.childNodes.length; i < l; i++) {
fragmentsHtml.push(fragment.childNodes[i].innerHTML);
}
fragment = this.htmlToFragment(fragmentsHtml.join(']*>/i).test(html);
}
});
var MSWordFormatCleaner = Cleaner.extend({
init: function() {
this.replacements = [
/<\?xml[^>]*>/gi, '',
//g, '', /* comments */
/"/g, "'", /* encoded quotes (in attributes) */
/(?:]*)>(\s| )+]*>(\s| )*<\/tr>/gi, '',
/]*>(\s| )*<\/tbody>/gi, '',
/]*>(\s| )*<\/table>/gi, '',
/]*>)+\s*$/gi, '',
/mso-[^;"]*;?/ig, '', /* office-related CSS attributes */
/<(\/?)b(\s[^>]*)?>/ig, '<$1strong$2>',
/<(\/?)i(\s[^>]*)?>/ig, '<$1em$2>',
/ <\/o:p>/ig, ' ',
/<\/?(meta|link|style|o:|v:|x:)[^>]*>((?:.|\n)*?<\/(meta|link|style|o:|v:|x:)[^>]*>)?/ig, '', /* external references and namespaced tags */
/<\/o>/g, '',
/style=(["|'])\s*\1/g, '', /* empty style attributes */
/(]*>)?\n/g, function ($0, $1) { return $1 ? $0 : ' '; } /* phantom extra line feeds */
];
},
applicable: function(html) {
return (/class="?Mso|style="[^"]*mso-/i).test(html) || (/urn:schemas-microsoft-com:office/).test(html);
},
stripEmptyAnchors: function(html) {
return html.replace(/]*)>\s*<\/a>/ig, function(a, attributes) {
if (!attributes || attributes.indexOf("href") < 0) {
return "";
}
return a;
});
},
listType: function(html) {
var startingSymbol;
if (/^(]*texhtml[^>]*>)?]*(Symbol|Wingdings)[^>]*>/i.test(html)) {
startingSymbol = true;
}
html = html.replace(/<\/?\w+[^>]*>/g, '').replace(/ /g, '\u00a0');
if ((!startingSymbol && /^[\u2022\u00b7\u00a7\u00d8o]\u00a0+/.test(html)) ||
(startingSymbol && /^.\u00a0+/.test(html))) {
return 'ul';
}
if (/^\s*\w+[\.\)]\u00a0{2,}/.test(html)) {
return 'ol';
}
},
_convertToLi: function(p) {
var content;
if (p.childNodes.length == 1) {
content = p.firstChild.innerHTML.replace(/^\w+[\.\)]( )+ /, "");
} else {
dom.remove(p.firstChild);
// check for roman numerals
if (p.firstChild.nodeType == 3) {
if (/^[ivx]+\.$/i.test(p.firstChild.nodeValue)) {
dom.remove(p.firstChild);
}
}
if (/^( |\s)+$/i.test(p.firstChild.innerHTML)) {
dom.remove(p.firstChild);
}
content = p.innerHTML;
}
dom.remove(p);
return dom.create(document, 'li', { innerHTML: content });
},
lists: function(placeholder) {
var blockChildren = $(dom.blockElements.join(','), placeholder),
lastMargin = -1,
lastType,
name,
levels = {'ul':{}, 'ol':{}},
li = placeholder,
i, p, type, margin, list, key, child;
for (i = 0; i < blockChildren.length; i++) {
p = blockChildren[i];
type = this.listType(p.innerHTML);
name = dom.name(p);
if (name == "td") {
continue;
}
if (!type || name != 'p') {
if (!p.innerHTML) {
dom.remove(p);
} else {
levels = {'ul':{}, 'ol':{}};
li = placeholder;
lastMargin = -1;
}
continue;
}
margin = parseFloat(p.style.marginLeft || 0);
list = levels[type][margin];
if (margin > lastMargin || !list) {
list = dom.create(document, type);
if (li == placeholder) {
dom.insertBefore(list, p);
} else {
li.appendChild(list);
}
levels[type][margin] = list;
}
if (lastType != type) {
for (key in levels) {
for (child in levels[key]) {
if ($.contains(list, levels[key][child])) {
delete levels[key][child];
}
}
}
}
li = this._convertToLi(p);
list.appendChild(li);
lastMargin = margin;
lastType = type;
}
},
removeAttributes: function(element) {
var attributes = element.attributes,
i = attributes.length;
while (i--) {
if (dom.name(attributes[i]) != "colspan") {
element.removeAttributeNode(attributes[i]);
}
}
},
createColGroup: function(row) {
var cells = row.cells;
var table = $(row).closest("table");
var colgroup = table.children("colgroup");
if (cells.length < 2) {
return;
} else if (colgroup.length) {
cells = colgroup.children();
colgroup[0].parentNode.removeChild(colgroup[0]);
}
colgroup = $($.map(cells, function(cell) {
var width = cell.width;
if (width && parseInt(width, 10) !== 0) {
return kendo.format('(.*)<\/div>$/, '$1'
];
},
applicable: function(html) {
return (/class="?Apple-style-span|style="[^"]*-webkit-nbsp-mode/i).test(html);
}
});
extend(editorNS, {
Command: Command,
GenericCommand: GenericCommand,
InsertHtmlCommand: InsertHtmlCommand,
InsertHtmlTool: InsertHtmlTool,
UndoRedoStack: UndoRedoStack,
TypingHandler: TypingHandler,
SystemHandler: SystemHandler,
BackspaceHandler: BackspaceHandler,
Keyboard: Keyboard,
Clipboard: Clipboard,
Cleaner: Cleaner,
MSWordFormatCleaner: MSWordFormatCleaner,
WebkitFormatCleaner: WebkitFormatCleaner
});
registerTool("insertHtml", new InsertHtmlTool({template: new ToolTemplate({template: EditorUtils.dropDownListTemplate, title: "Insert HTML", initialValue: "Insert HTML"})}));
})(window.kendo.jQuery);
(function($) {
var kendo = window.kendo,
Class = kendo.Class,
Editor = kendo.ui.editor,
formats = kendo.ui.Editor.fn.options.formats,
EditorUtils = Editor.EditorUtils,
Tool = Editor.Tool,
ToolTemplate = Editor.ToolTemplate,
FormatTool = Editor.FormatTool,
dom = Editor.Dom,
RangeUtils = Editor.RangeUtils,
extend = $.extend,
registerTool = Editor.EditorUtils.registerTool,
registerFormat = Editor.EditorUtils.registerFormat,
KMARKER = "k-marker";
var InlineFormatFinder = Class.extend({
init: function(format) {
this.format = format;
},
numberOfSiblings: function(referenceNode) {
var textNodesCount = 0,
elementNodesCount = 0,
markerCount = 0,
parentNode = referenceNode.parentNode,
node;
for (node = parentNode.firstChild; node; node = node.nextSibling) {
if (node != referenceNode) {
if (node.className == KMARKER) {
markerCount++;
} else if (node.nodeType == 3) {
textNodesCount++;
} else {
elementNodesCount++;
}
}
}
if (markerCount > 1 && parentNode.firstChild.className == KMARKER && parentNode.lastChild.className == KMARKER) {
// full node selection
return 0;
} else {
return elementNodesCount + textNodesCount;
}
},
findSuitable: function (sourceNode, skip) {
if (!skip && this.numberOfSiblings(sourceNode) > 0) {
return null;
}
return dom.parentOfType(sourceNode, this.format[0].tags);
},
findFormat: function (sourceNode) {
var format = this.format,
attrEquals = dom.attrEquals,
i, len, node, tags, attributes;
for (i = 0, len = format.length; i < len; i++) {
node = sourceNode;
tags = format[i].tags;
attributes = format[i].attr;
if (node && dom.ofType(node, tags) && attrEquals(node, attributes)) {
return node;
}
while (node) {
node = dom.parentOfType(node, tags);
if (node && attrEquals(node, attributes)) {
return node;
}
}
}
return null;
},
isFormatted: function (nodes) {
var i, len;
for (i = 0, len = nodes.length; i < len; i++) {
if (this.findFormat(nodes[i])) {
return true;
}
}
return false;
}
});
var InlineFormatter = Class.extend({
init: function(format, values) {
this.finder = new InlineFormatFinder(format);
this.attributes = extend({}, format[0].attr, values);
this.tag = format[0].tags[0];
},
wrap: function(node) {
return dom.wrap(node, dom.create(node.ownerDocument, this.tag, this.attributes));
},
activate: function(range, nodes) {
if (this.finder.isFormatted(nodes)) {
this.split(range);
this.remove(nodes);
} else {
this.apply(nodes);
}
},
toggle: function (range) {
var nodes = RangeUtils.textNodes(range);
if (nodes.length > 0) {
this.activate(range, nodes);
}
},
apply: function (nodes) {
var formatNodes = [];
var i, l, node, formatNode;
for (i = 0, l = nodes.length; i < l; i++) {
node = nodes[i];
formatNode = this.finder.findSuitable(node);
if (formatNode) {
dom.attr(formatNode, this.attributes);
} else {
formatNode = this.wrap(node);
}
formatNodes.push(formatNode);
}
this.consolidate(formatNodes);
},
remove: function (nodes) {
var i, l, formatNode;
for (i = 0, l = nodes.length; i < l; i++) {
formatNode = this.finder.findFormat(nodes[i]);
if (formatNode) {
if (this.attributes && this.attributes.style) {
dom.unstyle(formatNode, this.attributes.style);
if (!formatNode.style.cssText && !formatNode.attributes["class"]) {
dom.unwrap(formatNode);
}
} else {
dom.unwrap(formatNode);
}
}
}
},
split: function (range) {
var nodes = RangeUtils.textNodes(range);
var l = nodes.length;
var i, formatNode;
if (l > 0) {
for (i = 0; i < l; i++) {
formatNode = this.finder.findFormat(nodes[i]);
if (formatNode) {
RangeUtils.split(range, formatNode, true);
}
}
}
},
consolidate: function (nodes) {
var node, last;
while (nodes.length > 1) {
node = nodes.pop();
last = nodes[nodes.length - 1];
if (node.previousSibling && node.previousSibling.className == KMARKER) {
last.appendChild(node.previousSibling);
}
if (node.tagName == last.tagName && node.previousSibling == last && node.style.cssText == last.style.cssText) {
while (node.firstChild) {
last.appendChild(node.firstChild);
}
dom.remove(node);
}
}
}
});
var GreedyInlineFormatFinder = InlineFormatFinder.extend({
init: function(format, greedyProperty) {
this.format = format;
this.greedyProperty = greedyProperty;
InlineFormatFinder.fn.init.call(this, format);
},
getInlineCssValue: function(node) {
var attributes = node.attributes;
var trim = $.trim;
var i, l, attribute, name, attributeValue, css, pair, cssIndex, len;
var propertyAndValue, property, value;
if (!attributes) {
return;
}
for (i = 0, l = attributes.length; i < l; i++) {
attribute = attributes[i];
name = attribute.nodeName;
attributeValue = attribute.nodeValue;
if (attribute.specified && name == "style") {
css = trim(attributeValue || node.style.cssText).split(";");
for (cssIndex = 0, len = css.length; cssIndex < len; cssIndex++) {
pair = css[cssIndex];
if (pair.length) {
propertyAndValue = pair.split(":");
property = trim(propertyAndValue[0].toLowerCase());
value = trim(propertyAndValue[1]);
if (property != this.greedyProperty) {
continue;
}
return property.indexOf("color") >= 0 ? dom.toHex(value) : value;
}
}
}
}
},
getFormatInner: function (node) {
var $node = $(dom.isDataNode(node) ? node.parentNode : node);
var parents = $node.parentsUntil("[contentEditable]").addBack().toArray().reverse();
var i, len, value;
for (i = 0, len = parents.length; i < len; i++) {
value = this.greedyProperty == "className" ? parents[i].className : this.getInlineCssValue(parents[i]);
if (value) {
return value;
}
}
return "inherit";
},
getFormat: function (nodes) {
var result = this.getFormatInner(nodes[0]), i, len;
for (i = 1, len = nodes.length; i < len; i++) {
if (result != this.getFormatInner(nodes[i])) {
return "";
}
}
return result;
},
isFormatted: function (nodes) {
return this.getFormat(nodes) !== "";
}
});
var GreedyInlineFormatter = InlineFormatter.extend({
init: function(format, values, greedyProperty) {
InlineFormatter.fn.init.call(this, format, values);
this.values = values;
this.finder = new GreedyInlineFormatFinder(format, greedyProperty);
if (greedyProperty) {
this.greedyProperty = kendo.toCamelCase(greedyProperty);
}
},
activate: function(range, nodes) {
var greedyProperty = this.greedyProperty;
var action = "apply";
this.split(range);
if (greedyProperty && this.values.style[greedyProperty] == "inherit") {
action = "remove";
}
this[action](nodes);
}
});
var InlineFormatTool = FormatTool.extend({
init: function(options) {
FormatTool.fn.init.call(this, extend(options, {
finder: new InlineFormatFinder(options.format),
formatter: function () { return new InlineFormatter(options.format); }
}));
}
});
var DelayedExecutionTool = Tool.extend({
update: function(ui, nodes) {
var list = ui.data(this.type);
list.close();
list.value(this.finder.getFormat(nodes));
}
});
var FontTool = DelayedExecutionTool.extend({
init: function(options) {
Tool.fn.init.call(this, options);
// IE has single selection hence we are using select box instead of combobox
this.type = (kendo.support.browser.msie || kendo.support.touch) ? "kendoDropDownList" : "kendoComboBox";
this.format = [{ tags: ["span"] }];
this.finder = new GreedyInlineFormatFinder(this.format, options.cssAttr);
},
command: function (commandArguments) {
var options = this.options,
format = this.format,
style = {};
return new Editor.FormatCommand(extend(commandArguments, {
formatter: function () {
style[options.domAttr] = commandArguments.value;
return new GreedyInlineFormatter(format, { style: style }, options.cssAttr);
}
}));
},
initialize: function (ui, initOptions) {
var editor = initOptions.editor,
options = this.options,
toolName = options.name,
dataSource,
defaultValue = [];
if (options.defaultValue) {
defaultValue = [{
text: editor.options.messages[options.defaultValue[0].text],
value: options.defaultValue[0].value
}];
}
dataSource = defaultValue.concat(options.items ? options.items : editor.options[toolName]);
ui[this.type]({
dataTextField: "text",
dataValueField: "value",
dataSource: dataSource,
change: function () {
Tool.exec(editor, toolName, this.value());
},
highlightFirst: false
});
ui.closest(".k-widget").removeClass("k-" + toolName).find("*").addBack().attr("unselectable", "on");
ui.data(this.type).value("inherit");
}
});
var ColorTool = Tool.extend({
init: function(options) {
Tool.fn.init.call(this, options);
this.format = [{ tags: ["span"] }];
this.finder = new GreedyInlineFormatFinder(this.format, options.cssAttr);
},
options: {
palette: "websafe"
},
update: function() {
this._widget.close();
},
command: function (commandArguments) {
var options = this.options,
format = this.format,
style = {};
return new Editor.FormatCommand(extend(commandArguments, {
formatter: function () {
style[options.domAttr] = commandArguments.value;
return new GreedyInlineFormatter(format, { style: style }, options.cssAttr);
}
}));
},
initialize: function(ui, initOptions) {
var editor = initOptions.editor,
toolName = this.name,
options = extend({}, ColorTool.fn.options, this.options),
palette = options.palette;
ui = this._widget = new kendo.ui.ColorPicker(ui, {
value: $.isArray(palette) ? palette[0] : "#000",
toolIcon: "k-" + options.name,
palette: palette,
change: function() {
var color = ui.value();
if (color) {
Tool.exec(editor, toolName, color);
}
editor.focus();
},
activate: function(e) {
e.preventDefault();
ui.trigger("change");
}
});
ui.wrapper
.attr({ title: initOptions.title, unselectable: "on" })
.find("*").attr("unselectable", "on");
}
});
extend(Editor, {
InlineFormatFinder: InlineFormatFinder,
InlineFormatter: InlineFormatter,
DelayedExecutionTool: DelayedExecutionTool,
GreedyInlineFormatFinder: GreedyInlineFormatFinder,
GreedyInlineFormatter: GreedyInlineFormatter,
InlineFormatTool: InlineFormatTool,
FontTool: FontTool,
ColorTool: ColorTool
});
registerFormat("bold", [ { tags: ["strong", "b"] }, { tags: ["span"], attr: { style: { fontWeight: "bold"}} } ]);
registerTool("bold", new InlineFormatTool({ key: "B", ctrl: true, format: formats.bold, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Bold"}) }));
registerFormat("italic", [ { tags: ["em", "i"] }, { tags: ["span"], attr: { style: { fontStyle: "italic"}} } ]);
registerTool("italic", new InlineFormatTool({ key: "I", ctrl: true, format: formats.italic, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Italic"})}));
registerFormat("underline", [ { tags: ["span"], attr: { style: { textDecoration: "underline"}} }, { tags: ["u"] } ]);
registerTool("underline", new InlineFormatTool({ key: "U", ctrl: true, format: formats.underline, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Underline"})}));
registerFormat("strikethrough", [ { tags: ["del", "strike"] }, { tags: ["span"], attr: { style: { textDecoration: "line-through"}} } ]);
registerTool("strikethrough", new InlineFormatTool({format: formats.strikethrough, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Strikethrough"})}));
registerFormat("superscript", [ { tags: ["sup"] } ]);
registerTool("superscript", new InlineFormatTool({format: formats.superscript, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Superscript"})}));
registerFormat("subscript", [ { tags: ["sub"] } ]);
registerTool("subscript", new InlineFormatTool({format: formats.subscript, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Subscript"})}));
registerTool("foreColor", new ColorTool({cssAttr:"color", domAttr:"color", name:"foreColor", template: new ToolTemplate({template: EditorUtils.colorPickerTemplate, title: "Color"})}));
registerTool("backColor", new ColorTool({cssAttr:"background-color", domAttr: "backgroundColor", name:"backColor", template: new ToolTemplate({template: EditorUtils.colorPickerTemplate, title: "Background Color"})}));
registerTool("fontName", new FontTool({cssAttr:"font-family", domAttr: "fontFamily", name:"fontName", defaultValue: [{ text: "fontNameInherit", value: "inherit" }], template: new ToolTemplate({template: EditorUtils.comboBoxTemplate, title: "Font Name"})}));
registerTool("fontSize", new FontTool({cssAttr:"font-size", domAttr:"fontSize", name:"fontSize", defaultValue: [{ text: "fontSizeInherit", value: "inherit" }], template: new ToolTemplate({template: EditorUtils.comboBoxTemplate, title: "Font Size"})}));
})(window.kendo.jQuery);
(function($) {
var kendo = window.kendo,
Class = kendo.Class,
extend = $.extend,
Editor = kendo.ui.editor,
formats = kendo.ui.Editor.fn.options.formats,
dom = Editor.Dom,
Command = Editor.Command,
ToolTemplate = Editor.ToolTemplate,
FormatTool = Editor.FormatTool,
EditorUtils = Editor.EditorUtils,
registerTool = EditorUtils.registerTool,
registerFormat = EditorUtils.registerFormat,
RangeUtils = Editor.RangeUtils;
var BlockFormatFinder = Class.extend({
init: function(format) {
this.format = format;
},
contains: function(node, children) {
var i, len, child;
for (i = 0, len = children.length; i < len; i++) {
child = children[i];
if (!child || !dom.isAncestorOrSelf(node, child)) {
return false;
}
}
return true;
},
findSuitable: function (nodes) {
var format = this.format,
suitable = [],
i, len, candidate;
for (i = 0, len = nodes.length; i < len; i++) {
for (var f = format.length - 1; f >= 0; f--) {
candidate = dom.ofType(nodes[i], format[f].tags) ? nodes[i] : dom.parentOfType(nodes[i], format[f].tags);
if (candidate) {
break;
}
}
if (!candidate || candidate.contentEditable === 'true') {
return [];
}
if ($.inArray(candidate, suitable) < 0) {
suitable.push(candidate);
}
}
for (i = 0, len = suitable.length; i < len; i++) {
if (this.contains(suitable[i], suitable)) {
return [suitable[i]];
}
}
return suitable;
},
findFormat: function (sourceNode) {
var format = this.format,
i, len, node, tags, attributes;
var editableParent = dom.editableParent(sourceNode);
for (i = 0, len = format.length; i < len; i++) {
node = sourceNode;
tags = format[i].tags;
attributes = format[i].attr;
while (node && dom.isAncestorOf(editableParent, node)) {
if (dom.ofType(node, tags) && dom.attrEquals(node, attributes)) {
return node;
}
node = node.parentNode;
}
}
return null;
},
getFormat: function (nodes) {
var that = this,
findFormat = function(node) {
return that.findFormat(dom.isDataNode(node) ? node.parentNode : node);
},
result = findFormat(nodes[0]),
i, len;
if (!result) {
return "";
}
for (i = 1, len = nodes.length; i < len; i++) {
if (result != findFormat(nodes[i])) {
return "";
}
}
return result.nodeName.toLowerCase();
},
isFormatted: function (nodes) {
for (var i = 0, len = nodes.length; i < len; i++) {
if (!this.findFormat(nodes[i])) {
return false;
}
}
return true;
}
});
var BlockFormatter = Class.extend({
init: function (format, values) {
this.format = format;
this.values = values;
this.finder = new BlockFormatFinder(format);
},
wrap: function(tag, attributes, nodes) {
var commonAncestor = nodes.length == 1 ? dom.blockParentOrBody(nodes[0]) : dom.commonAncestor.apply(null, nodes);
if (dom.isInline(commonAncestor)) {
commonAncestor = dom.blockParentOrBody(commonAncestor);
}
var ancestors = dom.significantChildNodes(commonAncestor),
position = dom.findNodeIndex(ancestors[0]),
wrapper = dom.create(commonAncestor.ownerDocument, tag, attributes),
i, ancestor;
for (i = 0; i < ancestors.length; i++) {
ancestor = ancestors[i];
if (dom.isBlock(ancestor)) {
dom.attr(ancestor, attributes);
if (wrapper.childNodes.length) {
dom.insertBefore(wrapper, ancestor);
wrapper = wrapper.cloneNode(false);
}
position = dom.findNodeIndex(ancestor) + 1;
continue;
}
wrapper.appendChild(ancestor);
}
if (wrapper.firstChild) {
dom.insertAt(commonAncestor, wrapper, position);
}
},
apply: function (nodes) {
var format, values = this.values;
function attributes(format) {
return extend({}, format && format.attr, values);
}
var images = dom.filter("img", nodes);
var imageFormat = EditorUtils.formatByName("img", this.format);
var imageAttributes = attributes(imageFormat);
$.each(images, function() {
dom.attr(this, imageAttributes);
});
// only images were selected, no need to wrap
if (images.length == nodes.length) {
return;
}
var nonImages = dom.filter("img", nodes, true);
var formatNodes = this.finder.findSuitable(nonImages);
if (formatNodes.length) {
for (var i = 0, len = formatNodes.length; i < len; i++) {
format = EditorUtils.formatByName(dom.name(formatNodes[i]), this.format);
dom.attr(formatNodes[i], attributes(format));
}
} else {
format = this.format[0];
this.wrap(format.tags[0], attributes(format), nonImages);
}
},
remove: function (nodes) {
var i, l, formatNode, namedFormat, name;
for (i = 0, l = nodes.length; i < l; i++) {
formatNode = this.finder.findFormat(nodes[i]);
if (formatNode) {
name = dom.name(formatNode);
if (name == "div" && !formatNode.getAttribute("class")) {
dom.unwrap(formatNode);
} else {
namedFormat = EditorUtils.formatByName(name, this.format);
if (namedFormat.attr.style) {
dom.unstyle(formatNode, namedFormat.attr.style);
}
if (namedFormat.attr.className) {
dom.removeClass(formatNode, namedFormat.attr.className);
}
}
}
}
},
toggle: function (range) {
var that = this,
nodes = RangeUtils.nodes(range);
if (that.finder.isFormatted(nodes)) {
that.remove(nodes);
} else {
that.apply(nodes);
}
}
});
var GreedyBlockFormatter = Class.extend({
init: function (format, values) {
var that = this;
that.format = format;
that.values = values;
that.finder = new BlockFormatFinder(format);
},
apply: function (nodes) {
var format = this.format;
var blocks = dom.blockParents(nodes);
var formatTag = format[0].tags[0];
var i, len, list, formatter, range;
var element;
var tagName;
if (blocks.length) {
for (i = 0, len = blocks.length; i < len; i++) {
tagName = dom.name(blocks[i]);
if (tagName == "li") {
list = blocks[i].parentNode;
formatter = new Editor.ListFormatter(list.nodeName.toLowerCase(), formatTag);
range = this.editor.createRange();
range.selectNode(blocks[i]);
formatter.toggle(range);
} else if (formatTag && (tagName == "td" || blocks[i].attributes.contentEditable)) {
new BlockFormatter(format, this.values).apply(blocks[i].childNodes);
} else {
element = dom.changeTag(blocks[i], formatTag);
dom.attr(element, format[0].attr);
}
}
} else {
new BlockFormatter(format, this.values).apply(nodes);
}
},
toggle: function (range) {
var nodes = RangeUtils.textNodes(range);
if (!nodes.length) {
range.selectNodeContents(range.commonAncestorContainer);
nodes = RangeUtils.textNodes(range);
if (!nodes.length) {
nodes = dom.significantChildNodes(range.commonAncestorContainer);
}
}
this.apply(nodes);
}
});
var FormatCommand = Command.extend({
init: function (options) {
options.formatter = options.formatter();
Command.fn.init.call(this, options);
}
});
var BlockFormatTool = FormatTool.extend({ init: function (options) {
FormatTool.fn.init.call(this, extend(options, {
finder: new BlockFormatFinder(options.format),
formatter: function () {
return new BlockFormatter(options.format);
}
}));
}
});
extend(Editor, {
BlockFormatFinder: BlockFormatFinder,
BlockFormatter: BlockFormatter,
GreedyBlockFormatter: GreedyBlockFormatter,
FormatCommand: FormatCommand,
BlockFormatTool: BlockFormatTool
});
var listElements = ["ul","ol","li"];
registerFormat("justifyLeft", [
{ tags: dom.nonListBlockElements, attr: { style: { textAlign: "left" }} },
{ tags: ["img"], attr: { style: { "float": "left", display: "", marginLeft: "", marginRight: "" }} },
{ tags: listElements, attr: { style: { textAlign: "left", listStylePosition: "" }} }
]);
registerTool("justifyLeft", new BlockFormatTool({
format: formats.justifyLeft,
template: new ToolTemplate({
template: EditorUtils.buttonTemplate,
title: "Justify Left"
})
}));
registerFormat("justifyCenter", [
{ tags: dom.nonListBlockElements, attr: { style: { textAlign: "center" }} },
{ tags: ["img"], attr: { style: { display: "block", marginLeft: "auto", marginRight: "auto", "float": "" }} },
{ tags: listElements, attr: { style: { textAlign: "center", listStylePosition: "inside" }} }
]);
registerTool("justifyCenter", new BlockFormatTool({
format: formats.justifyCenter,
template: new ToolTemplate({
template: EditorUtils.buttonTemplate,
title: "Justify Center"
})
}));
registerFormat("justifyRight", [
{ tags: dom.nonListBlockElements, attr: { style: { textAlign: "right" }} },
{ tags: ["img"], attr: { style: { "float": "right", display: "", marginLeft: "", marginRight: "" }} },
{ tags: listElements, attr: { style: { textAlign: "right", listStylePosition: "inside" }} }
]);
registerTool("justifyRight", new BlockFormatTool({
format: formats.justifyRight,
template: new ToolTemplate({
template: EditorUtils.buttonTemplate,
title: "Justify Right"
})
}));
registerFormat("justifyFull", [
{ tags: dom.nonListBlockElements, attr: { style: { textAlign: "justify" }} },
{ tags: ["img"], attr: { style: { display: "block", marginLeft: "auto", marginRight: "auto", "float": "" }} },
{ tags: listElements, attr: { style: { textAlign: "justify", listStylePosition: "" }} }
]);
registerTool("justifyFull", new BlockFormatTool({
format: formats.justifyFull,
template: new ToolTemplate({
template: EditorUtils.buttonTemplate,
title: "Justify Full"
})
}));
})(window.kendo.jQuery);
(function($) {
// Imports ================================================================
var kendo = window.kendo,
extend = $.extend,
editorNS = kendo.ui.editor,
dom = editorNS.Dom,
Command = editorNS.Command,
Tool = editorNS.Tool,
BlockFormatter = editorNS.BlockFormatter,
normalize = dom.normalize,
RangeUtils = editorNS.RangeUtils,
registerTool = editorNS.EditorUtils.registerTool;
var ParagraphCommand = Command.extend({
init: function(options) {
this.options = options;
Command.fn.init.call(this, options);
},
_insertMarker: function(doc, range) {
var marker = dom.create(doc, 'a'), container;
marker.className = "k-marker";
range.insertNode(marker);
if (!marker.parentNode) {
// inserting paragraph in Firefox full body range
container = range.commonAncestorContainer;
container.innerHTML = "";
container.appendChild(marker);
}
normalize(marker.parentNode);
return marker;
},
_moveFocus: function(range, next) {
if (dom.is(next, 'img')) {
range.setStartBefore(next);
} else {
range.selectNodeContents(next);
var textNode = RangeUtils.textNodes(range)[0];
if (textNode) {
if (dom.is(textNode, 'img')) {
range.setStartBefore(textNode);
} else {
range.selectNodeContents(textNode);
}
} else {
while (next.childNodes.length && !dom.is(next.firstChild, "br")) {
next = next.firstChild;
}
range.selectNodeContents(next);
}
}
},
shouldTrim: function(range) {
var blocks = 'p,h1,h2,h3,h4,h5,h6'.split(','),
startInBlock = dom.parentOfType(range.startContainer, blocks),
endInBlock = dom.parentOfType(range.endContainer, blocks);
return (startInBlock && !endInBlock) || (!startInBlock && endInBlock);
},
_blankAfter: function (node) {
while (node && (dom.isMarker(node) || dom.stripBom(node.nodeValue) === "")) {
node = node.nextSibling;
}
return !node;
},
exec: function () {
var range = this.getRange(),
doc = RangeUtils.documentFromRange(range),
parent, previous, next,
emptyParagraphContent = editorNS.emptyElementContent,
paragraph, marker, li, heading, rng,
shouldTrim = this.shouldTrim(range);
range.deleteContents();
marker = this._insertMarker(doc, range);
li = dom.closestEditableOfType(marker, ['li']);
heading = dom.closestEditableOfType(marker, 'h1,h2,h3,h4,h5,h6'.split(','));
if (li) {
// hitting 'enter' in empty li
if (dom.emptyNode(li)) {
paragraph = dom.create(doc, 'p');
if (li.nextSibling) {
rng = range.cloneRange();
rng.selectNode(li);
RangeUtils.split(rng, li.parentNode);
}
dom.insertAfter(paragraph, li.parentNode);
dom.remove(li.parentNode.childNodes.length == 1 ? li.parentNode : li);
paragraph.innerHTML = emptyParagraphContent;
next = paragraph;
}
} else if (heading && this._blankAfter(marker)) {
paragraph = dom.create(doc, 'p');
dom.insertAfter(paragraph, heading);
paragraph.innerHTML = emptyParagraphContent;
dom.remove(marker);
next = paragraph;
}
if (!next) {
if (!(li || heading)) {
new BlockFormatter([{ tags: ['p']}]).apply([marker]);
}
range.selectNode(marker);
parent = dom.parentOfType(marker, [li ? 'li' : heading ? dom.name(heading) : 'p']);
RangeUtils.split(range, parent, shouldTrim);
previous = parent.previousSibling;
if (dom.is(previous, 'li') && previous.firstChild && !dom.is(previous.firstChild, 'br')) {
previous = previous.firstChild;
}
next = parent.nextSibling;
if (dom.is(next, 'li') && next.firstChild && !dom.is(next.firstChild, 'br')) {
next = next.firstChild;
}
dom.remove(parent);
this.clean(previous);
this.clean(next, { links: true });
// normalize updates the caret display in Gecko
normalize(previous);
}
normalize(next);
this._moveFocus(range, next);
range.collapse(true);
dom.scrollTo(next);
RangeUtils.selectRange(range);
},
clean: function(node, options) {
var root = node;
if (node.firstChild && dom.is(node.firstChild, 'br')) {
dom.remove(node.firstChild);
}
if (dom.isDataNode(node) && !node.nodeValue) {
node = node.parentNode;
}
if (node) {
while (node.firstChild && node.firstChild.nodeType == 1) {
node = node.firstChild;
}
if (!dom.isEmpty(node) && /^\s*$/.test(node.innerHTML)) {
node.innerHTML = editorNS.emptyElementContent;
}
if (options && options.links) {
while (node != root) {
if (dom.is(node, "a") && dom.emptyNode(node)) {
dom.unwrap(node);
break;
}
node = node.parentNode;
}
}
}
}
});
var NewLineCommand = Command.extend({
init: function(options) {
this.options = options;
Command.fn.init.call(this, options);
},
exec: function () {
var range = this.getRange();
var br = dom.create(RangeUtils.documentFromRange(range), 'br');
var filler;
var browser = kendo.support.browser;
var oldIE = browser.msie && browser.version < 11;
range.deleteContents();
range.insertNode(br);
normalize(br.parentNode);
if (!oldIE && (!br.nextSibling || dom.isWhitespace(br.nextSibling))) {
// Gecko and WebKit cannot put the caret after only one br.
filler = br.cloneNode(true);
filler.className = 'k-br';
dom.insertAfter(filler, br);
}
range.setStartAfter(br);
range.collapse(true);
dom.scrollTo(br.nextSibling || br);
RangeUtils.selectRange(range);
}
});
extend(editorNS, {
ParagraphCommand: ParagraphCommand,
NewLineCommand: NewLineCommand
});
registerTool("insertLineBreak", new Tool({ key: 13, shift: true, command: NewLineCommand }));
registerTool("insertParagraph", new Tool({ key: 13, command: ParagraphCommand }));
})(window.kendo.jQuery);
(function($) {
// Imports ================================================================
var kendo = window.kendo,
Class = kendo.Class,
extend = $.extend,
Editor = kendo.ui.editor,
dom = Editor.Dom,
RangeUtils = Editor.RangeUtils,
EditorUtils = Editor.EditorUtils,
Command = Editor.Command,
ToolTemplate = Editor.ToolTemplate,
FormatTool = Editor.FormatTool,
BlockFormatFinder = Editor.BlockFormatFinder,
textNodes = RangeUtils.textNodes,
registerTool = Editor.EditorUtils.registerTool;
var ListFormatFinder = BlockFormatFinder.extend({
init: function(tag) {
this.tag = tag;
var tags = this.tags = [tag == 'ul' ? 'ol' : 'ul', tag];
BlockFormatFinder.fn.init.call(this, [{ tags: tags}]);
},
isFormatted: function (nodes) {
var formatNodes = [], formatNode;
for (var i = 0; i < nodes.length; i++) {
if ((formatNode = this.findFormat(nodes[i])) && dom.name(formatNode) == this.tag) {
formatNodes.push(formatNode);
}
}
if (formatNodes.length < 1) {
return false;
}
if (formatNodes.length != nodes.length) {
return false;
}
// check if sequential lists are selected
for (i = 0; i < formatNodes.length; i++) {
if (formatNodes[i].parentNode != formatNode.parentNode) {
break;
}
if (formatNodes[i] != formatNode) {
return false;
}
}
return true;
},
findSuitable: function (nodes) {
var candidate = dom.parentOfType(nodes[0], this.tags);
if (candidate && dom.name(candidate) == this.tag) {
return candidate;
}
return null;
}
});
var ListFormatter = Class.extend({
init: function(tag, unwrapTag) {
var that = this;
that.finder = new ListFormatFinder(tag);
that.tag = tag;
that.unwrapTag = unwrapTag;
},
isList: function(node) {
var name = dom.name(node);
return name == "ul" || name == "ol" || name == "dl";
},
wrap: function(list, nodes) {
var li = dom.create(list.ownerDocument, "li"),
i, node;
for (i = 0; i < nodes.length; i++) {
node = nodes[i];
if (dom.is(node, 'li')) {
list.appendChild(node);
continue;
}
if (this.isList(node)) {
while (node.firstChild) {
list.appendChild(node.firstChild);
}
continue;
}
if (dom.is(node, "td")) {
while (node.firstChild) {
li.appendChild(node.firstChild);
}
list.appendChild(li);
node.appendChild(list);
list = list.cloneNode(false);
li = li.cloneNode(false);
continue;
}
li.appendChild(node);
if (dom.isBlock(node)) {
list.appendChild(li);
dom.unwrap(node);
li = li.cloneNode(false);
}
}
if (li.firstChild) {
list.appendChild(li);
}
},
containsAny: function(parent, nodes) {
for (var i = 0; i < nodes.length; i++) {
if (dom.isAncestorOrSelf(parent, nodes[i])) {
return true;
}
}
return false;
},
suitable: function (candidate, nodes) {
if (candidate.className == "k-marker") {
var sibling = candidate.nextSibling;
if (sibling && dom.isBlock(sibling)) {
return false;
}
sibling = candidate.previousSibling;
if (sibling && dom.isBlock(sibling)) {
return false;
}
}
return this.containsAny(candidate, nodes) || dom.isInline(candidate) || candidate.nodeType == 3;
},
split: function (range) {
var nodes = textNodes(range),
start, end;
if (nodes.length) {
start = dom.parentOfType(nodes[0], ['li']);
end = dom.parentOfType(nodes[nodes.length - 1], ['li']);
range.setStartBefore(start);
range.setEndAfter(end);
for (var i = 0, l = nodes.length; i < l; i++) {
var formatNode = this.finder.findFormat(nodes[i]);
if (formatNode) {
var parents = $(formatNode).parents("ul,ol");
if (parents[0]) {
RangeUtils.split(range, parents.last()[0], true);
} else {
RangeUtils.split(range, formatNode, true);
}
}
}
}
},
merge: function(tag, formatNode) {
var prev = formatNode.previousSibling, next;
while (prev && (prev.className == "k-marker" || (prev.nodeType == 3 && dom.isWhitespace(prev)))) {
prev = prev.previousSibling;
}
// merge with previous list
if (prev && dom.name(prev) == tag) {
while(formatNode.firstChild) {
prev.appendChild(formatNode.firstChild);
}
dom.remove(formatNode);
formatNode = prev;
}
next = formatNode.nextSibling;
while (next && (next.className == "k-marker" || (next.nodeType == 3 && dom.isWhitespace(next)))) {
next = next.nextSibling;
}
// merge with next list
if (next && dom.name(next) == tag) {
while(formatNode.lastChild) {
next.insertBefore(formatNode.lastChild, next.firstChild);
}
dom.remove(formatNode);
}
},
breakable: function(node) {
return (
node != node.ownerDocument.body &&
!/table|tbody|tr|td/.test(dom.name(node)) &&
!node.attributes.contentEditable
);
},
applyOnSection: function (section, nodes) {
var tag = this.tag;
var commonAncestor = dom.closestSplittableParent(nodes);
var ancestors = [];
var formatNode = this.finder.findSuitable(nodes);
if (!formatNode) {
formatNode = new ListFormatFinder(tag == "ul" ? "ol" : "ul").findSuitable(nodes);
}
var childNodes;
if (/table|tbody/.test(dom.name(commonAncestor))) {
childNodes = $.map(nodes, function(node) {
return dom.parentOfType(node, ["td"]);
});
} else {
childNodes = dom.significantChildNodes(commonAncestor);
if ($.grep(childNodes, dom.isBlock).length) {
childNodes = $.grep(childNodes, $.proxy(function(node) {
return this.containsAny(node, nodes);
}, this));
}
if (!childNodes.length) {
childNodes = nodes;
}
}
function pushAncestor() {
ancestors.push(this);
}
for (var i = 0; i < childNodes.length; i++) {
var child = childNodes[i];
var suitable = (!formatNode || !dom.isAncestorOrSelf(formatNode, child)) && this.suitable(child, nodes);
if (!suitable) {
continue;
}
if (formatNode && this.isList(child)) {
// merging lists
$.each(child.childNodes, pushAncestor);
dom.remove(child);
} else {
ancestors.push(child);
}
}
if (ancestors.length == childNodes.length && this.breakable(commonAncestor)) {
ancestors = [commonAncestor];
}
if (!formatNode) {
formatNode = dom.create(commonAncestor.ownerDocument, tag);
dom.insertBefore(formatNode, ancestors[0]);
}
this.wrap(formatNode, ancestors);
if (!dom.is(formatNode, tag)) {
dom.changeTag(formatNode, tag);
}
this.merge(tag, formatNode);
},
apply: function (nodes) {
var i = 0,
sections = [],
lastSection,
lastNodes,
section;
// split nodes into sections that need to be different lists
do {
section = dom.closestEditable(nodes[i], ["td","body"]);
if (!lastSection || section != lastSection) {
if (lastSection) {
sections.push({
section: lastSection,
nodes: lastNodes
});
}
lastNodes = [nodes[i]];
lastSection = section;
} else {
lastNodes.push(nodes[i]);
}
i++;
} while (i < nodes.length);
sections.push({
section: lastSection,
nodes: lastNodes
});
for (i = 0; i < sections.length; i++) {
this.applyOnSection(sections[i].section, sections[i].nodes);
}
},
unwrap: function(ul) {
var fragment = ul.ownerDocument.createDocumentFragment(),
unwrapTag = this.unwrapTag,
parents,
li,
p,
child;
for (li = ul.firstChild; li; li = li.nextSibling) {
p = dom.create(ul.ownerDocument, unwrapTag || 'p');
while(li.firstChild) {
child = li.firstChild;
if (dom.isBlock(child)) {
if (p.firstChild) {
fragment.appendChild(p);
p = dom.create(ul.ownerDocument, unwrapTag || 'p');
}
fragment.appendChild(child);
} else {
p.appendChild(child);
}
}
if (p.firstChild) {
fragment.appendChild(p);
}
}
parents = $(ul).parents('ul,ol');
if (parents[0]) {
dom.insertAfter(fragment, parents.last()[0]);
parents.last().remove();
} else {
dom.insertAfter(fragment, ul);
}
dom.remove(ul);
},
remove: function (nodes) {
var formatNode;
for (var i = 0, l = nodes.length; i < l; i++) {
formatNode = this.finder.findFormat(nodes[i]);
if (formatNode) {
this.unwrap(formatNode);
}
}
},
toggle: function (range) {
var that = this,
nodes = textNodes(range),
ancestor = range.commonAncestorContainer;
if (!nodes.length) {
range.selectNodeContents(ancestor);
nodes = textNodes(range);
if (!nodes.length) {
var text = ancestor.ownerDocument.createTextNode("");
range.startContainer.appendChild(text);
nodes = [text];
range.selectNode(text.parentNode);
}
}
if (that.finder.isFormatted(nodes)) {
that.split(range);
that.remove(nodes);
} else {
that.apply(nodes);
}
}
});
var ListCommand = Command.extend({
init: function(options) {
options.formatter = new ListFormatter(options.tag);
Command.fn.init.call(this, options);
}
});
var ListTool = FormatTool.extend({
init: function(options) {
this.options = options;
FormatTool.fn.init.call(this, extend(options, {
finder: new ListFormatFinder(options.tag)
}));
},
command: function (commandArguments) {
return new ListCommand(extend(commandArguments, { tag: this.options.tag }));
}
});
extend(Editor, {
ListFormatFinder: ListFormatFinder,
ListFormatter: ListFormatter,
ListCommand: ListCommand,
ListTool: ListTool
});
registerTool("insertUnorderedList", new ListTool({tag:'ul', template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Insert unordered list"})}));
registerTool("insertOrderedList", new ListTool({tag:'ol', template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Insert ordered list"})}));
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
Class = kendo.Class,
extend = $.extend,
proxy = $.proxy,
Editor = kendo.ui.editor,
dom = Editor.Dom,
RangeUtils = Editor.RangeUtils,
EditorUtils = Editor.EditorUtils,
Command = Editor.Command,
Tool = Editor.Tool,
ToolTemplate = Editor.ToolTemplate,
InlineFormatter = Editor.InlineFormatter,
InlineFormatFinder = Editor.InlineFormatFinder,
textNodes = RangeUtils.textNodes,
registerTool = Editor.EditorUtils.registerTool;
var LinkFormatFinder = Class.extend({
findSuitable: function (sourceNode) {
return dom.parentOfType(sourceNode, ["a"]);
}
});
var LinkFormatter = Class.extend({
init: function() {
this.finder = new LinkFormatFinder();
},
apply: function (range, attributes) {
var nodes = textNodes(range);
var markers;
var doc;
var formatter;
var a;
var parent;
if (attributes.innerHTML) {
markers = RangeUtils.getMarkers(range);
doc = RangeUtils.documentFromRange(range);
range.deleteContents();
a = dom.create(doc, "a", attributes);
range.insertNode(a);
parent = a.parentNode;
if (dom.name(parent) == "a") {
dom.insertAfter(a, parent);
}
if (dom.emptyNode(parent)) {
dom.remove(parent);
}
if (markers.length > 1) {
dom.insertAfter(markers[markers.length - 1], a);
dom.insertAfter(markers[1], a);
dom[nodes.length > 0 ? "insertBefore" : "insertAfter"](markers[0], a);
}
} else {
formatter = new InlineFormatter([{ tags: ["a"]}], attributes);
formatter.finder = this.finder;
formatter.apply(nodes);
}
}
});
var UnlinkCommand = Command.extend({
init: function(options) {
options.formatter = /** @ignore */ {
toggle : function(range) {
new InlineFormatter([{ tags: ["a"]}]).remove(textNodes(range));
}
};
this.options = options;
Command.fn.init.call(this, options);
}
});
var LinkCommand = Command.extend({
init: function(options) {
var cmd = this;
cmd.options = options;
Command.fn.init.call(cmd, options);
cmd.formatter = new LinkFormatter();
if (!options.url) {
cmd.attributes = null;
cmd.async = true;
} else {
this.exec = function() {
this.formatter.apply(options.range, {
href: options.url,
innerHTML: options.text || options.url,
target: options.target
});
};
}
},
_dialogTemplate: function() {
return kendo.template(
'"
)({
messages: this.editor.options.messages
});
},
exec: function () {
var collapsed = this.getRange().collapsed;
var messages = this.editor.options.messages;
this._initialText = "";
this._range = this.lockRange(true);
var nodes = textNodes(this._range);
var a = nodes.length ? this.formatter.finder.findSuitable(nodes[0]) : null;
var img = nodes.length && dom.name(nodes[0]) == "img";
var dialog = this.createDialog(this._dialogTemplate(), {
title: messages.createLink,
close: proxy(this._close, this),
visible: false
});
dialog
.find(".k-dialog-insert").click(proxy(this._apply, this)).end()
.find(".k-dialog-close").click(proxy(this._close, this)).end()
.find(".k-edit-field input").keydown(proxy(this._keydown, this)).end()
.find("#k-editor-link-url").val(this.linkUrl(a)).end()
.find("#k-editor-link-text").val(this.linkText(nodes)).end()
.find("#k-editor-link-title").val(a ? a.title : "").end()
.find("#k-editor-link-target").attr("checked", a ? a.target == "_blank" : false).end()
.find(".k-editor-link-text-row").toggle(!img);
if (nodes.length > 0 && !collapsed) {
this._initialText = $("#k-editor-link-text", dialog).val();
}
this._dialog = dialog.data("kendoWindow").center().open();
$("#k-editor-link-url", dialog).focus().select();
},
_keydown: function (e) {
var keys = kendo.keys;
if (e.keyCode == keys.ENTER) {
this._apply(e);
} else if (e.keyCode == keys.ESC) {
this._close(e);
}
},
_apply: function (e) {
var element = this._dialog.element;
var href = $("#k-editor-link-url", element).val();
var title, text, target;
var textInput = $("#k-editor-link-text", element);
if (href && href != "http://") {
if (href.indexOf("@") > 0 && !/^(\w+:)|(\/\/)/i.test(href)) {
href = "mailto:" + href;
}
this.attributes = { href: href };
title = $("#k-editor-link-title", element).val();
if (title) {
this.attributes.title = title;
}
if (textInput.is(":visible")) {
text = textInput.val();
if (!text && !this._initialText) {
this.attributes.innerHTML = href;
} else if (text && (text !== this._initialText)) {
this.attributes.innerHTML = dom.stripBom(text);
}
}
target = $("#k-editor-link-target", element).is(":checked");
this.attributes.target = target ? "_blank" : null;
this.formatter.apply(this._range, this.attributes);
}
this._close(e);
if (this.change) {
this.change();
}
},
_close: function (e) {
e.preventDefault();
this._dialog.destroy();
dom.windowFromDocument(RangeUtils.documentFromRange(this._range)).focus();
this.releaseRange(this._range);
},
linkUrl: function(anchor) {
if (anchor) {
// IE < 8 returns absolute url if getAttribute is not used
return anchor.getAttribute("href", 2);
}
return "http://";
},
linkText: function (nodes) {
var text = "";
if (nodes.length == 1) {
text = nodes[0].nodeValue;
} else if (nodes.length) {
text = nodes[0].nodeValue + nodes[1].nodeValue;
}
return dom.stripBom(text || "");
},
redo: function () {
var range = this.lockRange(true);
this.formatter.apply(range, this.attributes);
this.releaseRange(range);
}
});
var UnlinkTool = Tool.extend({
init: function(options) {
this.options = options;
this.finder = new InlineFormatFinder([{tags:["a"]}]);
Tool.fn.init.call(this, $.extend(options, {command:UnlinkCommand}));
},
initialize: function(ui, options) {
Tool.fn.initialize.call(this, ui, options);
ui.addClass("k-state-disabled");
},
update: function (ui, nodes) {
ui.toggleClass("k-state-disabled", !this.finder.isFormatted(nodes))
.removeClass("k-state-hover");
}
});
extend(kendo.ui.editor, {
LinkFormatFinder: LinkFormatFinder,
LinkFormatter: LinkFormatter,
UnlinkCommand: UnlinkCommand,
LinkCommand: LinkCommand,
UnlinkTool: UnlinkTool
});
registerTool("createLink", new Tool({ key: "K", ctrl: true, command: LinkCommand, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Create Link"})}));
registerTool("unlink", new UnlinkTool({ key: "K", ctrl: true, shift: true, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Remove Link"})}));
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
extend = $.extend,
Editor = kendo.ui.editor,
EditorUtils = Editor.EditorUtils,
dom = Editor.Dom,
registerTool = EditorUtils.registerTool,
ToolTemplate = Editor.ToolTemplate,
RangeUtils = Editor.RangeUtils,
Command = Editor.Command,
LinkFormatter = Editor.LinkFormatter,
textNodes = RangeUtils.textNodes,
keys = kendo.keys,
KEDITORFILEURL = "#k-editor-file-url",
KEDITORFILETITLE = "#k-editor-file-title";
var FileCommand = Command.extend({
init: function(options) {
var that = this;
Command.fn.init.call(that, options);
that.formatter = new LinkFormatter();
that.async = true;
that.attributes = {};
},
insertFile: function(file, range) {
var attributes = this.attributes;
var doc = RangeUtils.documentFromRange(range);
if (attributes.href && attributes.href != "http://") {
if (!file) {
file = dom.create(doc, "a", {href: attributes.href});
file.innerHTML = attributes.innerHTML;
range.deleteContents();
range.insertNode(file);
if (!file.nextSibling) {
dom.insertAfter(doc.createTextNode("\ufeff"), file);
}
range.setStartAfter(file);
range.setEndAfter(file);
RangeUtils.selectRange(range);
return true;
} else {
dom.attr(file, attributes);
}
}
return false;
},
_dialogTemplate: function(showBrowser) {
return kendo.template(
''
)({
messages: this.editor.options.messages,
showBrowser: showBrowser
});
},
redo: function () {
var that = this,
range = that.lockRange();
this.formatter.apply(range, this.attributes);
that.releaseRange(range);
},
exec: function () {
var that = this,
range = that.lockRange(),
nodes = textNodes(range),
applied = false,
file = nodes.length ? this.formatter.finder.findSuitable(nodes[0]) : null,
dialog,
options = that.editor.options,
messages = options.messages,
fileBrowser = options.fileBrowser,
showBrowser = !!(kendo.ui.FileBrowser && fileBrowser && fileBrowser.transport && fileBrowser.transport.read !== undefined),
dialogOptions = {
title: messages.insertFile,
visible: false,
resizable: showBrowser
};
function apply(e) {
var element = dialog.element,
href = element.find(KEDITORFILEURL).val().replace(/ /g, "%20"),
innerHTML = element.find(KEDITORFILETITLE).val();
that.attributes = {
href: href,
innerHTML: innerHTML !== "" ? innerHTML : href
};
applied = that.insertFile(file, range);
close(e);
if (that.change) {
that.change();
}
}
function close(e) {
e.preventDefault();
dialog.destroy();
dom.windowFromDocument(RangeUtils.documentFromRange(range)).focus();
if (!applied) {
that.releaseRange(range);
}
}
function keyDown(e) {
if (e.keyCode == keys.ENTER) {
apply(e);
} else if (e.keyCode == keys.ESC) {
close(e);
}
}
dialogOptions.close = close;
if (showBrowser) {
dialogOptions.width = 750;
}
dialog = this.createDialog(that._dialogTemplate(showBrowser), dialogOptions)
.toggleClass("k-filebrowser-dialog", showBrowser)
.find(".k-dialog-insert").click(apply).end()
.find(".k-dialog-close").click(close).end()
.find(".k-edit-field input").keydown(keyDown).end()
// IE < 8 returns absolute url if getAttribute is not used
.find(KEDITORFILEURL).val(file ? file.getAttribute("href", 2) : "http://").end()
.find(KEDITORFILETITLE).val(file ? file.title : "").end()
.data("kendoWindow");
if (showBrowser) {
new kendo.ui.FileBrowser(
dialog.element.find(".k-filebrowser"),
extend({}, fileBrowser, {
change: function() {
dialog.element.find(KEDITORFILEURL).val(this.value());
},
apply: apply
})
);
}
dialog.center().open();
dialog.element.find(KEDITORFILEURL).focus().select();
}
});
kendo.ui.editor.FileCommand = FileCommand;
registerTool("insertFile", new Editor.Tool({ command: FileCommand, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Insert File" }) }));
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
extend = $.extend,
Editor = kendo.ui.editor,
EditorUtils = Editor.EditorUtils,
dom = Editor.Dom,
registerTool = EditorUtils.registerTool,
ToolTemplate = Editor.ToolTemplate,
RangeUtils = Editor.RangeUtils,
Command = Editor.Command,
keys = kendo.keys,
KEDITORIMAGEURL = "#k-editor-image-url",
KEDITORIMAGETITLE = "#k-editor-image-title",
KEDITORIMAGEWIDTH = "#k-editor-image-width",
KEDITORIMAGEHEIGHT = "#k-editor-image-height";
var ImageCommand = Command.extend({
init: function(options) {
var that = this;
Command.fn.init.call(that, options);
that.async = true;
that.attributes = {};
},
insertImage: function(img, range) {
var attributes = this.attributes;
var doc = RangeUtils.documentFromRange(range);
if (attributes.src && attributes.src != "http://") {
var removeIEAttributes = function() {
setTimeout(function(){
if (!attributes.width) {
img.removeAttribute("width");
}
if (!attributes.height) {
img.removeAttribute("height");
}
img.removeAttribute("complete");
});
};
if (!img) {
img = dom.create(doc, "img", attributes);
img.onload = img.onerror = function () {
removeIEAttributes();
};
range.deleteContents();
range.insertNode(img);
if (!img.nextSibling) {
dom.insertAfter(doc.createTextNode("\ufeff"), img);
}
removeIEAttributes();
range.setStartAfter(img);
range.setEndAfter(img);
RangeUtils.selectRange(range);
return true;
} else {
dom.attr(img, attributes);
removeIEAttributes();
}
}
return false;
},
_dialogTemplate: function(showBrowser) {
return kendo.template(
''
)({
messages: this.editor.options.messages,
showBrowser: showBrowser
});
},
redo: function () {
var that = this,
range = that.lockRange();
if (!that.insertImage(RangeUtils.image(range), range)) {
that.releaseRange(range);
}
},
exec: function () {
var that = this,
range = that.lockRange(),
applied = false,
img = RangeUtils.image(range),
imageWidth = img && img.getAttribute("width") || "",
imageHeight = img && img.getAttribute("height") || "",
dialog,
options = that.editor.options,
messages = options.messages,
imageBrowser = options.imageBrowser,
showBrowser = !!(kendo.ui.ImageBrowser && imageBrowser && imageBrowser.transport && imageBrowser.transport.read !== undefined),
dialogOptions = {
title: messages.insertImage,
visible: false,
resizable: showBrowser
};
function apply(e) {
var element = dialog.element,
w = parseInt(element.find(KEDITORIMAGEWIDTH).val(), 10),
h = parseInt(element.find(KEDITORIMAGEHEIGHT).val(), 10);
that.attributes = {
src: element.find(KEDITORIMAGEURL).val().replace(/ /g, "%20"),
alt: element.find(KEDITORIMAGETITLE).val()
};
that.attributes.width = null;
that.attributes.height = null;
if (!isNaN(w) && w > 0) {
that.attributes.width = w;
}
if (!isNaN(h) && h > 0) {
that.attributes.height = h;
}
applied = that.insertImage(img, range);
close(e);
if (that.change) {
that.change();
}
}
function close(e) {
e.preventDefault();
dialog.destroy();
dom.windowFromDocument(RangeUtils.documentFromRange(range)).focus();
if (!applied) {
that.releaseRange(range);
}
}
function keyDown(e) {
if (e.keyCode == keys.ENTER) {
apply(e);
} else if (e.keyCode == keys.ESC) {
close(e);
}
}
dialogOptions.close = close;
if (showBrowser) {
dialogOptions.width = 750;
}
dialog = this.createDialog(that._dialogTemplate(showBrowser), dialogOptions)
.toggleClass("k-filebrowser-dialog", showBrowser)
.find(".k-dialog-insert").click(apply).end()
.find(".k-dialog-close").click(close).end()
.find(".k-edit-field input").keydown(keyDown).end()
// IE < 8 returns absolute url if getAttribute is not used
.find(KEDITORIMAGEURL).val(img ? img.getAttribute("src", 2) : "http://").end()
.find(KEDITORIMAGETITLE).val(img ? img.alt : "").end()
.find(KEDITORIMAGEWIDTH).val(imageWidth).end()
.find(KEDITORIMAGEHEIGHT).val(imageHeight).end()
.data("kendoWindow");
if (showBrowser) {
new kendo.ui.ImageBrowser(
dialog.element.find(".k-imagebrowser"),
extend({}, imageBrowser, {
change: function() {
dialog.element.find(KEDITORIMAGEURL).val(this.value());
},
apply: apply
})
);
}
dialog.center().open();
dialog.element.find(KEDITORIMAGEURL).focus().select();
}
});
kendo.ui.editor.ImageCommand = ImageCommand;
registerTool("insertImage", new Editor.Tool({ command: ImageCommand, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Insert Image" }) }));
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
DropDownList = kendo.ui.DropDownList,
dom = kendo.ui.editor.Dom;
var SelectBox = DropDownList.extend({
init: function(element, options) {
var that = this;
DropDownList.fn.init.call(that, element, options);
// overlay drop-down with popout for snappier interaction
if (kendo.support.mobileOS.ios) {
this._initSelectOverlay();
this.bind("dataBound", $.proxy(this._initSelectOverlay, this));
}
that.value(that.options.title);
that.bind("open", function() {
if (that.options.autoSize) {
var list = that.list,
listWidth;
list.css({
whiteSpace: "nowrap",
width: "auto"
});
listWidth = list.width();
if (listWidth) {
listWidth += 20;
} else {
listWidth = that._listWidth;
}
list.css("width", listWidth + kendo.support.scrollbar());
that._listWidth = listWidth;
}
});
},
options: {
name: "SelectBox"
},
_initSelectOverlay: function() {
var selectBox = this;
var value = selectBox.value();
var view = this.dataSource.view();
var item;
var html = "";
var encode = kendo.htmlEncode;
for (var i = 0; i < view.length; i++) {
item = view[i];
html += "
";
}
var select = $("" + html + " ");
var wrapper = $(this.element).closest(".k-widget");
wrapper.next(".k-select-overlay").remove();
select.insertAfter(wrapper);
select.on("change", function() {
selectBox.value(this.value);
selectBox.trigger("change");
});
},
value: function(value) {
var that = this,
result = DropDownList.fn.value.call(that, value);
if (value === undefined) {
return result;
}
if (value !== DropDownList.fn.value.call(that)) {
that.text(that.options.title);
if (that._current) {
that._current.removeClass("k-state-selected");
}
that.current(null);
that._oldIndex = that.selectedIndex = -1;
}
},
decorate: function(body) {
var that = this,
dataSource = that.dataSource,
items = dataSource.data(),
i, tag, className, style;
if (body) {
that.list.css("background-color", dom.getEffectiveBackground($(body)));
}
for (i = 0; i < items.length; i++) {
tag = items[i].tag || "span";
className = items[i].className;
style = dom.inlineStyle(body, tag, { className : className });
style = style.replace(/"/g, "'");
items[i].style = style + ";display:inline-block";
}
dataSource.trigger("change");
}
});
kendo.ui.plugin(SelectBox);
kendo.ui.editor.SelectBox = SelectBox;
})(window.kendo.jQuery);
(function($, undefined) {
// Imports ================================================================
var kendo = window.kendo,
Class = kendo.Class,
extend = $.extend,
Editor = kendo.ui.editor,
dom = Editor.Dom,
EditorUtils = Editor.EditorUtils,
registerTool = EditorUtils.registerTool,
Command = Editor.Command,
Tool = Editor.Tool,
ToolTemplate = Editor.ToolTemplate,
RangeUtils = Editor.RangeUtils,
blockElements = dom.blockElements,
BlockFormatFinder = Editor.BlockFormatFinder,
BlockFormatter = Editor.BlockFormatter;
function indent(node, value) {
var isRtl = $(node).css("direction") == "rtl",
indentDirection = isRtl ? "Right" : "Left",
property = dom.name(node) != "td" ? "margin" + indentDirection : "padding" + indentDirection;
if (value === undefined) {
return node.style[property] || 0;
} else {
if (value > 0) {
node.style[property] = value + "px";
} else {
node.style[property] = "";
if (!node.style.cssText) {
node.removeAttribute("style");
}
}
}
}
var IndentFormatter = Class.extend({
init: function() {
this.finder = new BlockFormatFinder([{tags:dom.blockElements}]);
},
apply: function (nodes) {
var formatNodes = this.finder.findSuitable(nodes),
targets = [],
i, len, formatNode, parentList, sibling;
if (formatNodes.length) {
for (i = 0, len = formatNodes.length; i < len; i++) {
if (dom.is(formatNodes[i], "li")) {
if (!$(formatNodes[i]).index()) {
targets.push(formatNodes[i].parentNode);
} else if ($.inArray(formatNodes[i].parentNode, targets) < 0) {
targets.push(formatNodes[i]);
}
} else {
targets.push(formatNodes[i]);
}
}
while (targets.length) {
formatNode = targets.shift();
if (dom.is(formatNode, "li")) {
parentList = formatNode.parentNode;
sibling = $(formatNode).prev("li");
var siblingList = sibling.find("ul,ol").last();
var nestedList = $(formatNode).children("ul,ol")[0];
if (nestedList && sibling[0]) {
if (siblingList[0]) {
siblingList.append(formatNode);
siblingList.append($(nestedList).children());
dom.remove(nestedList);
} else {
sibling.append(nestedList);
nestedList.insertBefore(formatNode, nestedList.firstChild);
}
} else {
nestedList = sibling.children("ul,ol")[0];
if (!nestedList) {
nestedList = dom.create(formatNode.ownerDocument, dom.name(parentList));
sibling.append(nestedList);
}
while (formatNode && formatNode.parentNode == parentList) {
nestedList.appendChild(formatNode);
formatNode = targets.shift();
}
}
} else {
var marginLeft = parseInt(indent(formatNode), 10) + 30;
indent(formatNode, marginLeft);
for (var targetIndex = 0; targetIndex < targets.length; targetIndex++) {
if ($.contains(formatNode, targets[targetIndex])) {
targets.splice(targetIndex, 1);
}
}
}
}
} else {
var formatter = new BlockFormatter([{tags:["p"]}], {style:{marginLeft:30}});
formatter.apply(nodes);
}
},
remove: function(nodes) {
var formatNodes = this.finder.findSuitable(nodes),
targetNode, i, len, list, listParent, siblings,
formatNode, marginLeft;
for (i = 0, len = formatNodes.length; i < len; i++) {
formatNode = $(formatNodes[i]);
if (formatNode.is("li")) {
list = formatNode.parent();
listParent = list.parent();
// listParent will be ul or ol in case of invalid dom -
if (listParent.is("li,ul,ol") && !indent(list[0])) {
// skip already processed nodes
if (targetNode && $.contains(targetNode, listParent[0])) {
continue;
}
siblings = formatNode.nextAll("li");
if (siblings.length) {
$(list[0].cloneNode(false)).appendTo(formatNode).append(siblings);
}
if (listParent.is("li")) {
formatNode.insertAfter(listParent);
} else {
formatNode.appendTo(listParent);
}
if (!list.children("li").length) {
list.remove();
}
continue;
} else {
if (targetNode == list[0]) {
// removing format on sibling LI elements
continue;
}
targetNode = list[0];
}
} else {
targetNode = formatNodes[i];
}
marginLeft = parseInt(indent(targetNode), 10) - 30;
indent(targetNode, marginLeft);
}
}
});
var IndentCommand = Command.extend({
init: function(options) {
options.formatter = /** @ignore */ {
toggle : function(range) {
new IndentFormatter().apply(RangeUtils.nodes(range));
}
};
Command.fn.init.call(this, options);
}
});
var OutdentCommand = Command.extend({
init: function(options) {
options.formatter = {
toggle : function(range) {
new IndentFormatter().remove(RangeUtils.nodes(range));
}
};
Command.fn.init.call(this, options);
}
});
var OutdentTool = Tool.extend({
init: function(options) {
Tool.fn.init.call(this, options);
this.finder = new BlockFormatFinder([{tags:blockElements}]);
},
initialize: function(ui, options) {
Tool.fn.initialize.call(this, ui, options);
ui.addClass("k-state-disabled");
},
update: function (ui, nodes) {
var suitable = this.finder.findSuitable(nodes),
isOutdentable, listParentsCount, i, len;
for (i = 0, len = suitable.length; i < len; i++) {
isOutdentable = indent(suitable[i]);
if (!isOutdentable) {
listParentsCount = $(suitable[i]).parents("ul,ol").length;
isOutdentable = (dom.is(suitable[i], "li") && (listParentsCount > 1 || indent(suitable[i].parentNode))) ||
(dom.ofType(suitable[i], ["ul","ol"]) && listParentsCount > 0);
}
if (isOutdentable) {
ui.removeClass("k-state-disabled");
return;
}
}
ui.addClass("k-state-disabled").removeClass("k-state-hover");
}
});
extend(Editor, {
IndentFormatter: IndentFormatter,
IndentCommand: IndentCommand,
OutdentCommand: OutdentCommand,
OutdentTool: OutdentTool
});
registerTool("indent", new Tool({ command: IndentCommand, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Indent"}) }));
registerTool("outdent", new OutdentTool({ command: OutdentCommand, template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Outdent"})}));
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
extend = $.extend,
Editor = kendo.ui.editor,
EditorUtils = Editor.EditorUtils,
Command = Editor.Command,
Tool = Editor.Tool,
ToolTemplate = Editor.ToolTemplate;
var ViewHtmlCommand = Command.extend({
init: function(options) {
var cmd = this;
cmd.options = options;
Command.fn.init.call(cmd, options);
cmd.attributes = null;
cmd.async = true;
},
exec: function() {
var that = this,
editor = that.editor,
messages = editor.options.messages,
dialog = $(kendo.template(ViewHtmlCommand.template)(messages)).appendTo(document.body),
content = ViewHtmlCommand.indent(editor.value()),
textarea = ".k-editor-textarea";
function apply(e) {
editor.value(dialog.find(textarea).val());
close(e);
if (that.change) {
that.change();
}
editor.trigger("change");
}
function close(e) {
e.preventDefault();
dialog.data("kendoWindow").destroy();
editor.focus();
}
this.createDialog(dialog, {
title: messages.viewHtml,
close: close,
visible: false
})
.find(textarea).val(content).end()
.find(".k-dialog-update").click(apply).end()
.find(".k-dialog-close").click(close).end()
.data("kendoWindow").center().open();
dialog.find(textarea).focus();
}
});
extend(ViewHtmlCommand, {
template: "",
indent: function(content) {
return content.replace(/<\/(p|li|ul|ol|h[1-6]|table|tr|td|th)>/ig, "\n")
.replace(/<(ul|ol)([^>]*)>\n#:data.text# '
)
});
ui.addClass("k-decorated")
.closest(".k-widget")
.removeClass("k-" + toolName)
.find("*").addBack()
.attr("unselectable", "on");
},
getFormattingValue: function(items, nodes) {
for (var i = 0; i < items.length; i++) {
var item = items[i];
var tag = item.tag || item.context || "";
var className = item.className ? "."+item.className : "";
var selector = tag + className;
var element = $(nodes[0]).closest(selector)[0];
if (!element) {
continue;
}
if (nodes.length == 1) {
return item.value;
}
for (var n = 1; n < nodes.length; n++) {
if (!$(nodes[n]).closest(selector)[0]) {
break;
} else if (n == nodes.length - 1) {
return item.value;
}
}
}
return "";
},
update: function(ui, nodes) {
var selectBox = $(ui).data(this.type);
// necessary until formatBlock is deleted
if (!selectBox) {
return;
}
var dataSource = selectBox.dataSource,
items = dataSource.data(),
i, context,
ancestor = dom.commonAncestor.apply(null, nodes);
for (i = 0; i < items.length; i++) {
context = items[i].context;
items[i].visible = !context || !!$(ancestor).closest(context).length;
}
dataSource.filter([{ field: "visible", operator: "eq", value: true }]);
DelayedExecutionTool.fn.update.call(this, ui, nodes);
selectBox.value(this.getFormattingValue(dataSource.view(), nodes));
selectBox.wrapper.toggleClass("k-state-disabled", !dataSource.view().length);
}
});
var CleanFormatCommand = Command.extend({
exec: function() {
var range = this.lockRange(true);
var remove = this.options.remove || "strong,em,span".split(",");
RangeUtils.wrapSelectedElements(range);
var iterator = new Editor.RangeIterator(range);
iterator.traverse(function clean(node) {
if (!node || dom.isMarker(node)) {
return;
}
if (node.nodeType == 1 && !dom.insignificant(node)) {
for (var i = node.childNodes.length-1; i >= 0; i--) {
clean(node.childNodes[i]);
}
node.removeAttribute("style");
node.removeAttribute("class");
}
if (remove.indexOf(dom.name(node)) > -1) {
dom.unwrap(node);
}
});
this.releaseRange(range);
}
});
$.extend(Editor, {
FormattingTool: FormattingTool,
CleanFormatCommand: CleanFormatCommand
});
registerTool("formatting", new FormattingTool({ template: new ToolTemplate({ template: EditorUtils.dropDownListTemplate, title: "Format" }) }));
registerTool("cleanFormatting", new Tool({ command: CleanFormatCommand, template: new ToolTemplate({ template: EditorUtils.buttonTemplate, title: "Clean formatting" }) }));
})(window.kendo.jQuery);
(function($,undefined) {
var kendo = window.kendo;
var ui = kendo.ui;
var editorNS = ui.editor;
var Widget = ui.Widget;
var extend = $.extend;
var proxy = $.proxy;
var keys = kendo.keys;
var NS = ".kendoEditor";
var focusable = "a.k-tool:not(.k-state-disabled)," +
".k-widget.k-colorpicker,.k-selectbox,.k-dropdown,.k-combobox .k-input";
var Toolbar = Widget.extend({
init: function(element, options) {
var that = this;
options = extend({}, options, { name: "EditorToolbar" });
Widget.fn.init.call(that, element, options);
if (options.popup) {
that._initPopup();
}
},
events: [
"execute"
],
groups: {
basic: ["bold", "italic", "underline", "strikethrough"],
scripts: ["subscript", "superscript" ],
alignment: ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull" ],
links: ["insertImage", "insertFile", "createLink", "unlink"],
lists: ["insertUnorderedList", "insertOrderedList", "indent", "outdent"],
tables: [ "createTable", "addColumnLeft", "addColumnRight", "addRowAbove", "addRowBelow", "deleteRow", "deleteColumn" ],
advanced: [ "viewHtml", "cleanFormatting" ]
},
_initPopup: function() {
this.window = $(this.element)
.wrap("")
.parent()
.prepend(" " + Editor.emptyElementContent + " ";
var tableFormatFinder = new BlockFormatFinder([{tags:["table"]}]);
var TableCommand = InsertHtmlCommand.extend({
_tableHtml: function(rows, columns) {
rows = rows || 1;
columns = columns || 1;
return "" +
new Array(rows + 1).join("" + new Array(columns + 1).join(editableCell) + " ") +
"
";
},
postProcess: function(editor, range) {
var insertedTable = $("table[data-last]", editor.document).removeAttr("data-last");
range.selectNodeContents(insertedTable.find("td")[0]);
editor.selectRange(range);
},
exec: function() {
var options = this.options;
options.html = this._tableHtml(options.rows, options.columns);
options.postProcess = this.postProcess;
InsertHtmlCommand.fn.exec.call(this);
}
});
var PopupTool = Tool.extend({
initialize: function(ui, options) {
Tool.fn.initialize.call(this, ui, options);
var popup = $(this.options.popupTemplate).appendTo("body").kendoPopup({
anchor: ui,
copyAnchorStyles: false,
open: proxy(this._open, this),
activate: proxy(this._activate, this),
close: proxy(this._close, this)
}).data("kendoPopup");
ui.click(proxy(this._toggle, this))
.keydown(proxy(this._keydown, this));
this._editor = options.editor;
this._popup = popup;
},
popup: function() {
return this._popup;
},
_activate: $.noop,
_open: function() {
this._popup.options.anchor.addClass(ACTIVESTATE);
},
_close: function() {
this._popup.options.anchor.removeClass(ACTIVESTATE);
},
_keydown: function(e) {
var keys = kendo.keys;
var key = e.keyCode;
if (key == keys.DOWN && e.altKey) {
this._popup.open();
} else if (key == keys.ESC) {
this._popup.close();
}
},
_toggle: function(e) {
var button = $(e.target).closest(".k-tool");
if (!button.hasClass("k-state-disabled")) {
this.popup().toggle();
}
},
update: function(ui) {
this.popup().close();
ui.removeClass("k-state-hover");
},
destroy: function() {
this._popup.destroy();
}
});
var InsertTableTool = PopupTool.extend({
init: function(options) {
this.cols = 8;
this.rows = 6;
PopupTool.fn.init.call(this, $.extend(options, {
command: TableCommand,
popupTemplate:
""
}));
},
_activate: function() {
var that = this,
element = that._popup.element,
cells = element.find(".k-ct-cell"),
firstCell = cells.eq(0),
lastCell = cells.eq(cells.length - 1),
start = kendo.getOffset(firstCell),
end = kendo.getOffset(lastCell),
cols = that.cols,
rows = that.rows,
cellWidth, cellHeight;
end.left += lastCell[0].offsetWidth;
end.top += lastCell[0].offsetHeight;
cellWidth = (end.left - start.left) / cols;
cellHeight = (end.top - start.top) / rows;
function tableFromLocation(e) {
var w = $(window);
return {
row: Math.floor((e.clientY + w.scrollTop() - start.top) / cellHeight) + 1,
col: Math.floor((e.clientX + w.scrollLeft() - start.left) / cellWidth) + 1
};
}
element
.on("mousemove" + NS, function(e) {
that._setTableSize(tableFromLocation(e));
})
.on("mouseleave" + NS, function() {
that._setTableSize();
})
.on("mouseup" + NS, function(e) {
that._exec(tableFromLocation(e));
});
},
_valid: function(size) {
return size && size.row > 0 && size.col > 0 && size.row <= this.rows && size.col <= this.cols;
},
_exec: function(size) {
if (this._valid(size)) {
this._editor.exec("createTable", {
rows: size.row,
columns: size.col
});
this._popup.close();
}
},
_setTableSize: function(size) {
var element = this._popup.element;
var status = element.find(".k-status");
var cells = element.find(".k-ct-cell");
var rows = this.rows;
var cols = this.cols;
if (this._valid(size)) {
status.text(kendo.format("Create a {0} x {1} table", size.row, size.col));
cells.each(function(i) {
$(this).toggleClass(
SELECTEDSTATE,
i % cols < size.col && i / cols < size.row
);
});
} else {
status.text("Cancel");
cells.removeClass(SELECTEDSTATE);
}
},
_keydown: function(e) {
PopupTool.fn._keydown.call(this, e);
var keys = kendo.keys;
var key = e.keyCode;
var cells = this._popup.element.find(".k-ct-cell");
var focus = Math.max(cells.filter(".k-state-selected").last().index(), 0);
var selectedRows = Math.floor(focus / this.cols);
var selectedColumns = focus % this.cols;
var changed = false;
if (key == keys.DOWN && !e.altKey) {
changed = true;
selectedRows++;
} else if (key == keys.UP) {
changed = true;
selectedRows--;
} else if (key == keys.RIGHT) {
changed = true;
selectedColumns++;
} else if (key == keys.LEFT) {
changed = true;
selectedColumns--;
}
var tableSize = {
row: Math.max(1, Math.min(this.rows, selectedRows + 1)),
col: Math.max(1, Math.min(this.cols, selectedColumns + 1))
};
if (key == keys.ENTER) {
this._exec(tableSize);
} else {
this._setTableSize(tableSize);
}
if (changed) {
e.preventDefault();
e.stopImmediatePropagation();
}
},
_open: function() {
PopupTool.fn._open.call(this);
this.popup().element.find(".k-ct-cell").removeClass(SELECTEDSTATE);
},
_close: function() {
PopupTool.fn._close.call(this);
this.popup().element.off(NS);
},
update: function (ui, nodes) {
var isFormatted;
PopupTool.fn.update.call(this, ui);
isFormatted = tableFormatFinder.isFormatted(nodes);
ui.toggleClass("k-state-disabled", isFormatted);
}
});
var InsertRowCommand = Command.extend({
exec: function () {
var range = this.lockRange(true),
td = range.endContainer,
cellCount, row,
newRow;
while (dom.name(td) != "td") {
td = td.parentNode;
}
row = td.parentNode;
cellCount = row.children.length;
newRow = row.cloneNode(true);
for (var i = 0; i < row.cells.length; i++) {
newRow.cells[i].innerHTML = Editor.emptyElementContent;
}
if (this.options.position == "before") {
dom.insertBefore(newRow, row);
} else {
dom.insertAfter(newRow, row);
}
this.releaseRange(range);
}
});
var InsertColumnCommand = Command.extend({
exec: function () {
var range = this.lockRange(true),
td = dom.closest(range.endContainer, "td"),
table = dom.closest(td, "table"),
columnIndex,
i,
rows = table.rows,
cell,
newCell,
position = this.options.position;
columnIndex = dom.findNodeIndex(td);
for (i = 0; i < rows.length; i++) {
cell = rows[i].cells[columnIndex];
newCell = cell.cloneNode();
newCell.innerHTML = Editor.emptyElementContent;
if (position == "before") {
dom.insertBefore(newCell, cell);
} else {
dom.insertAfter(newCell, cell);
}
}
this.releaseRange(range);
}
});
var DeleteRowCommand = Command.extend({
exec: function () {
var range = this.lockRange(),
row = dom.closest(range.endContainer, "tr"),
table = dom.closest(row, "table"),
rowCount = table.rows.length,
focusElement;
if (rowCount == 1) {
focusElement = dom.next(table);
if (!focusElement || dom.insignificant(focusElement)) {
focusElement = dom.prev(table);
}
dom.remove(table);
} else {
dom.removeTextSiblings(row);
focusElement = dom.next(row) || dom.prev(row);
focusElement = focusElement.cells[0];
dom.remove(row);
}
if (focusElement) {
range.setStart(focusElement, 0);
range.collapse(true);
this.editor.selectRange(range);
}
}
});
var DeleteColumnCommand = Command.extend({
exec: function () {
var range = this.lockRange(),
td = dom.closest(range.endContainer, "td"),
table = dom.closest(td, "table"),
rows = table.rows,
columnIndex = dom.findNodeIndex(td, true),
columnCount = rows[0].cells.length,
focusElement, i;
if (columnCount == 1) {
focusElement = dom.next(table);
if (!focusElement || dom.insignificant(focusElement)) {
focusElement = dom.prev(table);
}
dom.remove(table);
} else {
dom.removeTextSiblings(td);
focusElement = dom.next(td) || dom.prev(td);
for (i = 0; i < rows.length; i++) {
dom.remove(rows[i].cells[columnIndex]);
}
}
if (focusElement) {
range.setStart(focusElement, 0);
range.collapse(true);
this.editor.selectRange(range);
}
}
});
var TableModificationTool = Tool.extend({
command: function (options) {
options = extend(options, this.options);
if (options.action == "delete") {
if (options.type == "row") {
return new DeleteRowCommand(options);
} else {
return new DeleteColumnCommand(options);
}
} else {
if (options.type == "row") {
return new InsertRowCommand(options);
} else {
return new InsertColumnCommand(options);
}
}
},
initialize: function(ui, options) {
Tool.fn.initialize.call(this, ui, options);
ui.addClass("k-state-disabled");
},
update: function(ui, nodes) {
var isFormatted = !tableFormatFinder.isFormatted(nodes);
ui.toggleClass("k-state-disabled", isFormatted);
}
});
extend(kendo.ui.editor, {
PopupTool: PopupTool,
TableCommand: TableCommand,
InsertTableTool: InsertTableTool,
TableModificationTool: TableModificationTool,
InsertRowCommand: InsertRowCommand,
InsertColumnCommand: InsertColumnCommand,
DeleteRowCommand: DeleteRowCommand,
DeleteColumnCommand: DeleteColumnCommand
});
registerTool("createTable", new InsertTableTool({ template: new ToolTemplate({template: EditorUtils.buttonTemplate, popup: true, title: "Create table"})}));
registerTool("addColumnLeft", new TableModificationTool({ type: "column", position: "before", template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Add column on the left"})}));
registerTool("addColumnRight", new TableModificationTool({ type: "column", template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Add column on the right"})}));
registerTool("addRowAbove", new TableModificationTool({ type: "row", position: "before", template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Add row above"})}));
registerTool("addRowBelow", new TableModificationTool({ type: "row", template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Add row below"})}));
registerTool("deleteRow", new TableModificationTool({ type: "row", action: "delete", template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Delete row"})}));
registerTool("deleteColumn", new TableModificationTool({ type: "column", action: "delete", template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Delete column"})}));
//registerTool("mergeCells", new Tool({ template: new ToolTemplate({template: EditorUtils.buttonTemplate, title: "Merge cells"})}));
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo;
var caret = kendo.caret;
var keys = kendo.keys;
var ui = kendo.ui;
var Widget = ui.Widget;
var ns = ".kendoMaskedTextBox";
var proxy = $.proxy;
var INPUT_EVENT_NAME = (kendo.support.propertyChangeEvent ? "propertychange" : "input") + ns;
var STATEDISABLED = "k-state-disabled";
var DISABLED = "disabled";
var READONLY = "readonly";
var CHANGE = "change";
var MaskedTextBox = Widget.extend({
init: function(element, options) {
var that = this;
var DOMElement;
Widget.fn.init.call(that, element, options);
that._rules = $.extend({}, that.rules, that.options.rules);
element = that.element;
DOMElement = element[0];
that.wrapper = element;
that._tokenize();
that._reset();
that.element
.addClass("k-textbox")
.attr("autocomplete", "off")
.on("focus" + ns, function() {
var value = DOMElement.value;
if (!value) {
DOMElement.value = that._old = that._emptyMask;
} else {
that._togglePrompt(true);
}
that._oldValue = value;
that._timeoutId = setTimeout(function() {
caret(element, 0, value ? that._maskLength : 0);
});
})
.on("focusout" + ns, function() {
var value = element.val();
clearTimeout(that._timeoutId);
DOMElement.value = that._old = "";
if (value !== that._emptyMask) {
DOMElement.value = that._old = value;
}
that._change();
that._togglePrompt();
});
var disabled = element.is("[disabled]");
if (disabled) {
that.enable(false);
} else {
that.readonly(element.is("[readonly]"));
}
that.value(that.options.value || element.val());
kendo.notify(that);
},
options: {
name: "MaskedTextBox",
promptChar: "_",
clearPromptChar: false,
culture: "",
rules: {},
value: "",
mask: ""
},
events: [
CHANGE
],
rules: {
"0": /\d/,
"9": /\d|\s/,
"#": /\d|\s|\+|\-/,
"L": /[a-zA-Z]/,
"?": /[a-zA-Z]|\s/,
"&": /\S/,
"C": /./,
"A": /[a-zA-Z0-9]/,
"a": /[a-zA-Z0-9]|\s/
},
setOptions: function(options) {
var that = this;
Widget.fn.setOptions.call(that, options);
that._rules = $.extend({}, that.rules, that.options.rules);
that._tokenize();
this._unbindInput();
this._bindInput();
that.value(that.element.val());
},
destroy: function() {
var that = this;
that.element.off(ns);
if (that._form) {
that._form.off("reset", that._resetHandler);
}
Widget.fn.destroy.call(that);
},
value: function(value) {
var element = this.element;
var emptyMask = this._emptyMask;
var options = this.options;
if (value === undefined) {
return this.element.val();
}
if (!emptyMask) {
element.val(value);
return;
}
value = this._unmask(value + "");
element.val(value ? emptyMask : "");
this._mask(0, this._maskLength, value);
value = element.val();
this._oldValue = value;
if (kendo._activeElement() !== element) {
if (value === emptyMask) {
element.val("");
} else {
this._togglePrompt();
}
}
},
_togglePrompt: function(show) {
var DOMElement = this.element[0];
var value = DOMElement.value;
if (this.options.clearPromptChar) {
if (!show) {
value = value.replace(new RegExp(this.options.promptChar, "g"), " ");
} else {
value = this._oldValue;
}
DOMElement.value = this._old = value;
}
},
readonly: function(readonly) {
this._editable({
readonly: readonly === undefined ? true : readonly,
disable: false
});
},
enable: function(enable) {
this._editable({
readonly: false,
disable: !(enable = enable === undefined ? true : enable)
});
},
_bindInput: function() {
var that = this;
if (that._maskLength) {
that.element
.on("keydown" + ns, proxy(that._keydown, that))
.on("keypress" + ns, proxy(that._keypress, that))
.on("paste" + ns, proxy(that._paste, that))
.on(INPUT_EVENT_NAME, proxy(that._propertyChange, that));
}
},
_unbindInput: function() {
this.element
.off("keydown" + ns)
.off("keypress" + ns)
.off("paste" + ns)
.off(INPUT_EVENT_NAME);
},
_editable: function(options) {
var that = this;
var element = that.element;
var disable = options.disable;
var readonly = options.readonly;
that._unbindInput();
if (!readonly && !disable) {
element.removeAttr(DISABLED)
.removeAttr(READONLY)
.removeClass(STATEDISABLED);
that._bindInput();
} else {
element.attr(DISABLED, disable)
.attr(READONLY, readonly)
.toggleClass(STATEDISABLED, disable);
}
},
_change: function() {
var that = this;
var value = that.value();
if (value !== that._oldValue) {
that._oldValue = value;
that.trigger(CHANGE);
that.element.trigger(CHANGE);
}
},
_propertyChange: function() {
var that = this;
var element = that.element[0];
var value = element.value;
var unmasked;
var start;
if (value !== that._old && !that._pasting) {
start = caret(element)[0];
unmasked = that._unmask(value.substring(start), start);
element.value = that._old = value.substring(0, start) + that._emptyMask.substring(start);
that._mask(start, start, unmasked);
caret(element, start);
}
},
_paste: function(e) {
var that = this;
var element = e.target;
var position = caret(element);
var start = position[0];
var end = position[1];
var unmasked = that._unmask(element.value.substring(end), end);
that._pasting = true;
setTimeout(function() {
var value = element.value;
var pasted = value.substring(start, caret(element)[0]);
element.value = that._old = value.substring(0, start) + that._emptyMask.substring(start);
that._mask(start, start, pasted);
start = caret(element)[0];
that._mask(start, start, unmasked);
caret(element, start);
that._pasting = false;
});
},
_reset: function() {
var that = this;
var element = that.element;
var formId = element.attr("form");
var form = formId ? $("#" + formId) : element.closest("form");
if (form[0]) {
that._resetHandler = function() {
setTimeout(function() {
that.value(element[0].value);
});
};
that._form = form.on("reset", that._resetHandler);
}
},
_keydown: function(e) {
var key = e.keyCode;
var element = this.element[0];
var selection = caret(element);
var start = selection[0];
var end = selection[1];
var placeholder;
var backward = key === keys.BACKSPACE;
if (backward || key === keys.DELETE) {
if (start === end) {
if (backward) {
start -= 1;
} else {
end += 1;
}
placeholder = this._find(start, backward);
}
if (placeholder !== undefined && placeholder !== start) {
if (backward) {
placeholder += 1;
}
caret(element, placeholder);
} else if (start > -1) {
this._mask(start, end, "", backward);
}
e.preventDefault();
} else if (key === keys.ENTER) {
this._change();
}
},
_keypress: function(e) {
if (e.which === 0 || e.ctrlKey || e.keyCode === keys.ENTER) {
return;
}
var character = String.fromCharCode(e.which);
var selection = caret(this.element);
this._mask(selection[0], selection[1], character);
if (e.keyCode === keys.BACKSPACE || character) {
e.preventDefault();
}
},
_find: function(idx, backward) {
var value = this.element.val() || this._emptyMask;
var step = 1;
if (backward === true) {
step = -1;
}
while (idx > -1 || idx <= this._maskLength) {
if (value.charAt(idx) !== this.tokens[idx]) {
return idx;
}
idx += step;
}
return -1;
},
_mask: function(start, end, value, backward) {
var element = this.element[0];
var current = element.value || this._emptyMask;
var empty = this.options.promptChar;
var valueLength;
var chrIdx = 0;
var unmasked;
var chr;
var idx;
start = this._find(start, backward);
if (start > end) {
end = start;
}
unmasked = this._unmask(current.substring(end), end);
value = this._unmask(value, start);
valueLength = value.length;
if (value) {
unmasked = unmasked.replace(new RegExp("^_{0," + valueLength + "}"), "");
}
value += unmasked;
current = current.split("");
chr = value.charAt(chrIdx);
while (start < this._maskLength) {
current[start] = chr || empty;
chr = value.charAt(++chrIdx);
if (idx === undefined && chrIdx > valueLength) {
idx = start;
}
start = this._find(start + 1);
}
element.value = this._old = current.join("");
if (kendo._activeElement() === element) {
if (idx === undefined) {
idx = this._maskLength;
}
caret(element, idx);
}
},
_unmask: function(value, idx) {
if (!value) {
return "";
}
value = (value + "").split("");
var chr;
var token;
var chrIdx = 0;
var tokenIdx = idx || 0;
var empty = this.options.promptChar;
var valueLength = value.length;
var tokensLength = this.tokens.length;
var result = "";
while (tokenIdx < tokensLength) {
chr = value[chrIdx];
token = this.tokens[tokenIdx];
if (chr === token || chr === empty) {
result += chr === empty ? empty : "";
chrIdx += 1;
tokenIdx += 1;
} else if (typeof token !== "string") {
if ((token.test && token.test(chr)) || ($.isFunction(token) && token(chr))) {
result += chr;
tokenIdx += 1;
}
chrIdx += 1;
} else {
tokenIdx += 1;
}
if (chrIdx >= valueLength) {
break;
}
}
return result;
},
_tokenize: function() {
var tokens = [];
var tokenIdx = 0;
var mask = this.options.mask || "";
var maskChars = mask.split("");
var length = maskChars.length;
var idx = 0;
var chr;
var rule;
var emptyMask = "";
var promptChar = this.options.promptChar;
var numberFormat = kendo.getCulture(this.options.culture).numberFormat;
var rules = this._rules;
for (; idx < length; idx++) {
chr = maskChars[idx];
rule = rules[chr];
if (rule) {
tokens[tokenIdx] = rule;
emptyMask += promptChar;
tokenIdx += 1;
} else {
if (chr === "." || chr === ",") {
chr = numberFormat[chr];
} else if (chr === "$") {
chr = numberFormat.currency.symbol;
} else if (chr === "\\") {
idx += 1;
chr = maskChars[idx];
}
chr = chr.split("");
for (var i = 0, l = chr.length; i < l; i++) {
tokens[tokenIdx] = chr[i];
emptyMask += chr[i];
tokenIdx += 1;
}
}
}
this.tokens = tokens;
this._emptyMask = emptyMask;
this._maskLength = emptyMask.length;
}
});
ui.plugin(MaskedTextBox);
})(window.kendo.jQuery);
/*jshint eqnull: true*/
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.ui,
Class = kendo.Class,
Widget = ui.Widget,
DataSource = kendo.data.DataSource,
toString = {}.toString,
identity = function(o) { return o; },
map = $.map,
extend = $.extend,
isFunction = kendo.isFunction,
CHANGE = "change",
ERROR = "error",
PROGRESS = "progress",
STATERESET = "stateReset",
DIV = "
",
NS = ".kendoPivotGrid",
ROW_TOTAL_KEY = "__row_total__",
DATABINDING = "dataBinding",
DATABOUND = "dataBound",
EXPANDMEMBER = "expandMember",
COLLAPSEMEMBER = "collapseMember",
STATE_EXPANDED = "k-i-arrow-s",
STATE_COLLAPSED = "k-i-arrow-e",
HEADER_TEMPLATE = "#: data.member.caption || data.member.name #",
DATACELL_TEMPLATE = '#: data.dataItem ? (data.dataItem.fmtValue || data.dataItem.value) : "" #',
LAYOUT_TABLE = '' +
'' +
'' +
'' +
' ' +
'' +
'
' +
' ' +
' ' +
'
';
function normalizeMembers(member) {
var descriptor = typeof member === "string" ? { name: member, expand: false } : member,
descriptors = toString.call(descriptor) === "[object Array]" ? descriptor : (descriptor !== undefined ? [descriptor] : []);
return map(descriptors, function(d) {
if (typeof d === "string") {
return { name: d, expand: false };
}
return { name: d.name, expand: d.expand };
});
}
function accumulateMembers(accumulator, tuples, level) {
var member;
var name;
var parentName;
for (var idx = 0; idx < tuples.length; idx++) {
member = tuples[idx].members[level];
name = member.name;
parentName = member.parentName || "";
if (member.children.length > 0) {
accumulator[name] = true;
accumulateMembers(accumulator, member.children, level);
} else if (!(parentName in accumulator)) {
accumulator[name] = false;
}
}
}
function descriptorsForAxes(tuples) {
var result = {};
if (tuples.length) {
var members = tuples[0].members || [];
for (var idx = 0; idx < members.length; idx++) {
if (!members[idx].measure) {
accumulateMembers(result, tuples, idx);
}
}
}
var descriptors = [];
for (var k in result) {
descriptors.push({ name: k, expand: result[k] });
}
return descriptors;
}
function addMissingPathMembers(members, axis) {
var tuples = axis.tuples || [];
var firstTuple = tuples[0];
if (firstTuple && members.length < firstTuple.members.length) {
var tupleMembers = firstTuple.members;
for (var idx = 0; idx < tupleMembers.length; idx++) {
if (tupleMembers[idx].measure) {
continue;
}
var found = false;
for (var j = 0; j < members.length; j++) {
if (members[j].name.indexOf(tupleMembers[idx].hierarchy) === 0) {
found = true;
break;
}
}
if (!found) {
members.push(tupleMembers[idx]);
}
}
}
}
function tupleToDescriptors(tuple) {
var result = [];
var members = tuple.members;
for (var idx = 0; idx < members.length; idx++) {
if (members[idx].measure) {
continue;
}
result.push({ name: members[idx].name, expand: members[idx].children.length > 0});
}
return result;
}
function descriptorsForMembers(axis, members, measures) {
axis = axis || {};
addMissingPathMembers(members, axis);
if (measures.length > 1) {
members.push({
name: "Measures",
measure: true,
children: normalizeMembers(measures)
});
}
var tupletoSearch = {
members: members
};
if (axis.tuples) {
var result = findExistingTuple(axis.tuples, tupletoSearch);
if (result.tuple) {
members = tupleToDescriptors(result.tuple);
}
}
return members;
}
function addDataCell(result, rowIndex, map, key, format) {
result[result.length] = {
ordinal: rowIndex,
value: map[key].aggregates,
fmtValue: format ? kendo.format(format, map[key].aggregates) : map[key].aggregates
};
var items = map[key].items;
for (var columnKey in items) {
result[result.length] = {
ordinal: rowIndex + items[columnKey].index + 1,
value: items[columnKey].aggregate,
fmtValue: format ? kendo.format(format, items[columnKey].aggregate) : items[columnKey].aggregate
};
}
}
var PivotCubeBuilder = Class.extend({
init: function(options) {
this.options = extend({}, this.options, options);
this.dimensions = this._normalizeDescriptors("field", this.options.dimensions);
this.measures = this._normalizeDescriptors("name", this.options.measures);
},
_normalizeDescriptors: function(keyField, descriptors) {
descriptors = descriptors || {};
var fields = {};
var field;
if (toString.call(descriptors) === "[object Array]") {
for (var idx = 0, length = descriptors.length; idx < length; idx++) {
field = descriptors[idx];
if (typeof field === "string") {
fields[field] = {};
} else if (field[keyField]) {
fields[field[keyField]] = field;
}
}
descriptors = fields;
}
return descriptors;
},
_asTuples: function(map, descriptors) {
var dimensionsSchema = this.dimensions || [];
var result = [];
var root;
var idx;
var length;
if (descriptors.length) {
root = { members: [] };
for (idx = 0, length = descriptors.length; idx < length; idx++) {
root.members[root.members.length] = {
children: [],
caption: (dimensionsSchema[descriptors[idx].name] || {}).caption || "All",
name: descriptors[idx].name,
levelName: descriptors[idx].name,
levelNum: "0",
hasChildren: true,
parentName: undefined,
hierarchy: descriptors[idx].name
};
}
result[result.length] = root;
}
for (var key in map) {
var tuple = { members: [] };
for (idx = 0, length = descriptors.length; idx < length; idx++) {
if (map[key].parentName.indexOf(descriptors[idx].name) === 0) {
tuple.members[tuple.members.length] = {
children: [],
caption: map[key].value,
name: map[key].name,
levelName: map[key].name,
levelNum: 1,
hasChildren: false,
parentName: descriptors[idx].name,
hierarchy: descriptors[idx].name
};
} else {
tuple.members[tuple.members.length] = {
children: [],
caption: (dimensionsSchema[descriptors[idx].name] || {}).caption || "All",
name: descriptors[idx].name,
levelName: descriptors[idx].name,
levelNum: "0",
hasChildren: true,
parentName: undefined,
hierarchy: descriptors[idx].name
};
}
}
result[result.length] = tuple;
}
return result;
},
_toDataArray: function(map, columns, measures) {
var format;
if (measures && measures.length) {
var measure = (this.measures || {})[measures[0]];
if (measure.format) {
format = measure.format;
}
}
var result = [];
var items;
var rowIndex = 0;
addDataCell(result, rowIndex, map, ROW_TOTAL_KEY, format);
rowIndex += columns.length;
for (var key in map) {
if (key === ROW_TOTAL_KEY) {
continue;
}
addDataCell(result, rowIndex, map, key, format);
rowIndex += columns.length;
}
return result;
},
_matchDescriptors: function(dataItem, descriptors, getters, idx) {
var descriptor;
var parts;
var parentField;
var expectedValue;
var parentGetter;
while (idx > 0) {
descriptor = descriptors[--idx];
parts = descriptor.name.split("&");
if (parts.length > 1) {
parentField = parts[0];
expectedValue = parts[1];
parentGetter = getters[parentField];
if (parentGetter(dataItem) != expectedValue) {
return false;
}
}
}
return true;
},
_isExpanded: function(descriptors) {
for (var idx = 0, length = descriptors.length; idx < length; idx++) {
if (descriptors[idx].expand) {
return true;
}
}
return false;
},
_processColumns: function(measureAggregator, descriptors, getters, columns, dataItem, rowTotal, state, updateColumn) {
var value;
var descriptor;
var name;
var column;
var totalItem;
for (var idx = 0; idx < descriptors.length; idx++) {
descriptor = descriptors[idx];
if (descriptor.expand) {
if (!this._matchDescriptors(dataItem, descriptors, getters, idx)) {
continue;
}
value = getters[descriptor.name](dataItem);
value = value !== undefined ? value.toString() : value;
name = descriptor.name + "&" + value;
column = columns[name] || {
index: state.columnIndex,
name: name,
parentName: descriptor.name,
value: value
};
totalItem = rowTotal.items[name] || {
aggregate: 0
};
rowTotal.items[name] = { index: column.index, aggregate: measureAggregator(dataItem, totalItem.aggregate) };
if (updateColumn) {
if (!columns[name]) {
state.columnIndex++;
}
columns[name] = column;
}
}
}
},
_measureAggregator: function(options) {
var measureDescriptors = options.measures || [];
var measure = (this.measures || {})[measureDescriptors[0]];
var measureAggregator;
if (measure) {
var measureGetter = kendo.getter(measure.field, true);
measureAggregator = function(data, state) {
return measure.aggregate(measureGetter(data), state);
};
} else {
measureAggregator = function() { return 1; };
}
return measureAggregator;
},
_buildGetters: function(descriptors) {
var result = {};
var descriptor;
var parts;
for (var idx = 0, length = descriptors.length; idx < length; idx++) {
descriptor = descriptors[idx];
parts = descriptor.name.split("&");
if (parts.length > 1) {
result[parts[0]] = kendo.getter(parts[0], true);
} else {
result[descriptor.name] = kendo.getter(descriptor.name, true);
}
}
return result;
},
process: function(data, options) {
data = data || [];
options = options || {};
var columnDescriptors = options.columns || [];
var rowDescriptors = options.rows || [];
var aggregatedData = {};
var columns = {};
var rows = {};
var rowValue;
var state = { columnIndex: 0 };
var measureAggregator = this._measureAggregator(options);
var columnGetters = this._buildGetters(columnDescriptors);
var rowGetters = this._buildGetters(rowDescriptors);
var processed = false;
if (columnDescriptors.length || rowDescriptors.length) {
var hasExpandedRows = this._isExpanded(rowDescriptors);
processed = true;
for (var idx = 0, length = data.length; idx < length; idx++) {
var rowTotal = aggregatedData[ROW_TOTAL_KEY] || {
items: {},
aggregates: 0
};
this._processColumns(measureAggregator, columnDescriptors, columnGetters, columns, data[idx], rowTotal, state, !hasExpandedRows);
rowTotal.aggregates = measureAggregator(data[idx], rowTotal.aggregates);
aggregatedData[ROW_TOTAL_KEY] = rowTotal;
for (var rowIdx = 0, rowLength = rowDescriptors.length; rowIdx < rowLength; rowIdx++) {
var rowDescriptor = rowDescriptors[rowIdx];
if (rowDescriptor.expand) {
if (!this._matchDescriptors(data[idx], rowDescriptors, rowGetters, rowIdx)) {
continue;
}
rowValue = rowGetters[rowDescriptor.name](data[idx]);
rowValue = rowValue !== undefined ? rowValue.toString() : rowValue;
rows[rowValue] = {
name: rowDescriptor.name + "&" + rowValue,
parentName: rowDescriptor.name,
value: rowValue
};
var value = aggregatedData[rowValue] || {
items: {},
aggregates: 0
};
this._processColumns(measureAggregator, columnDescriptors, columnGetters, columns, data[idx], value, state, true);
value.aggregates = measureAggregator(data[idx], value.aggregates);
aggregatedData[rowValue] = value;
}
}
}
}
if (processed && data.length) {
columns = this._asTuples(columns, columnDescriptors);
rows = this._asTuples(rows, rowDescriptors);
aggregatedData = this._toDataArray(aggregatedData, columns, options.measures);
} else {
aggregatedData = columns = rows = [];
}
return {
axes: {
columns: { tuples: columns },
rows: { tuples: rows }
},
data: aggregatedData
};
}
});
var PivotTransport = Class.extend({
init: function(options, transport) {
this.transport = transport;
this.options = transport.options || {};
if (!this.transport.discover) {
if (isFunction(options.discover)) {
this.discover = options.discover;
}
}
},
read: function(options) {
return this.transport.read(options);
},
update: function(options) {
return this.transport.update(options);
},
create: function(options) {
return this.transport.create(options);
},
destroy: function(options) {
return this.transport.destroy(options);
},
discover: function(options) {
if (this.transport.discover) {
return this.transport.discover(options);
}
options.success({});
},
catalog: function(val) {
var options = this.options || {};
if (val === undefined) {
return (options.connection || {}).catalog;
}
var connection = options.connection || {};
connection.catalog = val;
this.options.connection = connection;
$.extend(this.transport.options, { connection: connection });
},
cube: function(val) {
var options = this.options || {};
if (val === undefined) {
return (options.connection || {}).cube;
}
var connection = options.connection || {};
connection.cube = val;
this.options.connection = connection;
extend(true, this.transport.options, { connection: connection });
}
});
var PivotDataSource = DataSource.extend({
init: function(options) {
DataSource.fn.init.call(this, extend(true, {}, {
schema: {
axes: identity,
cubes: identity,
catalogs: identity,
measures: identity,
dimensions: identity,
hierarchies: identity,
levels: identity,
members: identity
}
}, options));
if (this.options.schema && this.options.schema.cube) {
this.cubeBuilder = new PivotCubeBuilder(this.options.schema.cube);
}
this.transport = new PivotTransport(this.options.transport || {}, this.transport);
this._columns = normalizeMembers(this.options.columns);
this._rows = normalizeMembers(this.options.rows);
var measures = this.options.measures || [];
var measuresAxis = "columns";
if (this.options.measures !== null && toString.call(this.options.measures) === "[object Object]") {
measures = this.options.measures.values || [];
measuresAxis = this.options.measures.axis || "columns";
}
this._measures = measures || [];
this._measuresAxis = measuresAxis;
this._axes = {};
},
options: {
serverSorting: true,
serverPaging: true,
serverFiltering: true,
serverGrouping: true,
serverAggregates: true
},
catalog: function(val) {
if (val === undefined) {
return this.transport.catalog();
}
this.transport.catalog(val);
this._mergeState({});// clears current state
this._axes = {};
this.data([]);
},
cube: function(val) {
if (val === undefined) {
return this.transport.cube();
}
this.transport.cube(val);
this._axes = {};
this._mergeState({});// clears current state
this.data([]);
},
axes: function() {
return this._axes;
},
columns: function(val) {
if (val === undefined) {
return this._columns;
}
this._clearAxesData = true;
this._columns = normalizeMembers(val);
this.query({
columns: val,
rows: this.rowsAxisDescriptors(),
measures: this.measures()
});
},
rows: function(val) {
if (val === undefined) {
return this._rows;
}
this._clearAxesData = true;
this._rows = normalizeMembers(val);
this.query({
columns: this.columnsAxisDescriptors(),
rows: val,
measures: this.measures()
});
},
measures: function(val) {
if (val === undefined) {
return this._measures;
}
this._clearAxesData = true;
this.query({
columns: this.columnsAxisDescriptors(),
rows: this.rowsAxisDescriptors(),
measures: val
});
},
measuresAxis: function() {
return this._measuresAxis || "columns";
},
_expandPath: function(path, axis) {
var origin = axis === "columns" ? "columns" : "rows";
var other = axis === "columns" ? "rows" : "columns";
var members = normalizeMembers(path);
var memberToExpand = members[members.length - 1].name;
this._lastExpanded = origin;
members = descriptorsForMembers(this.axes()[origin], members, this.measures());
for (var idx = 0; idx < members.length; idx++) {
if (members[idx].name === memberToExpand) {
if (members[idx].expand) {
return;
}
members[idx].expand = true;
} else {
members[idx].expand = false;
}
}
var descriptors = {};
descriptors[origin] = members;
descriptors[other] = this._descriptorsForAxis(other);
this._query(descriptors);
},
_descriptorsForAxis: function(axis) {
var axes = this.axes();
var descriptors = this[axis]() || [];
if (axes && axes[axis] && axes[axis].tuples && axes[axis].tuples[0]) {
descriptors = descriptorsForAxes(axes[axis].tuples || []);
}
return descriptors;
},
columnsAxisDescriptors: function() {
return this._descriptorsForAxis("columns");
},
rowsAxisDescriptors: function() {
return this._descriptorsForAxis("rows");
},
_process: function (data, e) {
this._view = data;
e = e || {};
e.items = e.items || this._view;
this.trigger(CHANGE, e);
},
_query: function(options) {
var that = this;
if (!options) {
this._clearAxesData = true;
}
that.query(extend({}, {
page: that.page(),
pageSize: that.pageSize(),
sort: that.sort(),
filter: that.filter(),
group: that.group(),
aggregate: that.aggregate(),
columns: this.columnsAxisDescriptors(),
rows: this.rowsAxisDescriptors(),
measures: this.measures()
}, options));
},
query: function(options) {
var state = this._mergeState(options);
if (this._data.length && this.cubeBuilder) {
this._params(state);
this._updateLocalData(this._pristineData);
} else {
this.read(state);
}
},
_mergeState: function(options) {
options = DataSource.fn._mergeState.call(this, options);
if (options !== undefined) {
this._measures = asArray(options.measures);
if (options.columns) {
options.columns = normalizeMembers(options.columns);
} else if (!options.columns) {
this._columns = [];
}
if (options.rows) {
options.rows = normalizeMembers(options.rows);
} else if (!options.rows) {
this._rows = [];
}
}
return options;
},
filter: function(val) {
if (val === undefined) {
return this._filter;
}
this._clearAxesData = true;
this._query({ filter: val, page: 1 });
},
expandColumn: function(path) {
this._expandPath(path, "columns");
},
expandRow: function(path) {
this._expandPath(path, "rows");
},
success: function(data) {
var originalData;
if (this.cubeBuilder) {
originalData = (this.reader.data(data) || []).slice(0);
}
DataSource.fn.success.call(this, data);
if (originalData) {
this._pristineData = originalData;
}
},
_processResult: function(data, axes) {
if (this.cubeBuilder) {
var processedData = this.cubeBuilder.process(data, this._requestData);
data = processedData.data;
axes = processedData.axes;
}
var tuples, resultAxis, measures, axisToSkip;
var columnDescriptors = this.columns().length;
var rowDescriptors = this.rows().length;
var hasColumnTuples = axes.columns && axes.columns.tuples;
if (!columnDescriptors && rowDescriptors && hasColumnTuples && (this._rowMeasures().length || !this.measures().length)) {
axes = {
columns: {},
rows: axes.columns
};
}
if (!columnDescriptors && !rowDescriptors && this.measuresAxis() === "rows" && hasColumnTuples) {
axes = {
columns: {},
rows: axes.columns
};
}
this._axes = {
columns: normalizeAxis(this._axes.columns),
rows: normalizeAxis(this._axes.rows)
};
axes = {
columns: normalizeAxis(axes.columns),
rows: normalizeAxis(axes.rows)
};
data = this._normalizeData(data, axes.columns.tuples.length, axes.rows.tuples.length);
if (this._lastExpanded == "rows") {
tuples = axes.columns.tuples;
measures = this._columnMeasures();
resultAxis = validateAxis(axes.columns, this._axes.columns, measures);
if (resultAxis) {
axisToSkip = "columns";
axes.columns = resultAxis;
adjustDataByColumn(tuples, resultAxis.tuples, axes.rows.tuples.length, measures, data);
data = this._normalizeData(data, membersCount(axes.columns.tuples, measures), axes.rows.tuples.length);
}
} else if (this._lastExpanded == "columns") {
tuples = axes.rows.tuples;
measures = this._rowMeasures();
resultAxis = validateAxis(axes.rows, this._axes.rows, measures);
if (resultAxis) {
axisToSkip = "rows";
axes.rows = resultAxis;
adjustDataByRow(tuples, resultAxis.tuples, axes.columns.tuples.length, measures, data);
data = this._normalizeData(data, membersCount(axes.rows.tuples, measures), axes.columns.tuples.length);
}
}
this._lastExpanded = null;
var result = this._mergeAxes(axes, data, axisToSkip);
this._axes = result.axes;
return result.data;
},
_readData: function(data) {
var axes = this.reader.axes(data);
var newData = this.reader.data(data);
return this._processResult(newData, axes);
},
_mergeAxes: function(sourceAxes, data, axisToSkip) {
var columnMeasures = this._columnMeasures();
var rowMeasures = this._rowMeasures();
var axes = this.axes();
var startIndex, tuples;
var newRowsLength = sourceAxes.rows.tuples.length;
var oldColumnsLength = membersCount(axes.columns.tuples, columnMeasures);
var newColumnsLength = sourceAxes.columns.tuples.length;
if (axisToSkip == "columns") {
newColumnsLength = oldColumnsLength;
tuples = sourceAxes.columns.tuples;
} else {
tuples = parseSource(sourceAxes.columns.tuples, columnMeasures);
data = prepareDataOnColumns(tuples, data);
}
var mergedColumns = mergeTuples(axes.columns.tuples, tuples, columnMeasures);
if (axisToSkip == "rows") {
newRowsLength = membersCount(sourceAxes.rows.tuples, rowMeasures);
tuples = sourceAxes.rows.tuples;
} else {
tuples = parseSource(sourceAxes.rows.tuples, rowMeasures);
data = prepareDataOnRows(tuples, data);
}
var mergedRows = mergeTuples(axes.rows.tuples, tuples, rowMeasures);
axes.columns.tuples = mergedColumns.tuples;
axes.rows.tuples = mergedRows.tuples;
if (oldColumnsLength !== membersCount(axes.columns.tuples, columnMeasures)) {
//columns are expanded
startIndex = mergedColumns.index + findDataIndex(mergedColumns.parsedRoot, mergedColumns.memberIndex, columnMeasures);
var offset = oldColumnsLength + newColumnsLength;
data = this._mergeColumnData(data, startIndex, newRowsLength, newColumnsLength, offset);
} else {
//rows are expanded
startIndex = mergedRows.index + findDataIndex(mergedRows.parsedRoot, mergedRows.memberIndex, rowMeasures);
data = this._mergeRowData(data, startIndex, newRowsLength, newColumnsLength);
}
return {
axes: axes,
data: data
};
},
_mergeColumnData: function(newData, columnIndex, rowsLength, columnsLength, offset) {
var data = this.data().toJSON();
var rowIndex, index, drop = 0, toAdd;
var columnMeasures = Math.max(this._columnMeasures().length, 1);
rowsLength = Math.max(rowsLength, 1);
if (data.length > 0) {
//if there is already data, drop the first new data item
drop = columnMeasures;
offset -= columnMeasures;
}
for (rowIndex = 0; rowIndex < rowsLength; rowIndex++) {
index = columnIndex + (rowIndex * offset);
toAdd = newData.splice(0, columnsLength);
toAdd.splice(0, drop);
[].splice.apply(data, [index, 0].concat(toAdd));
}
return data;
},
_mergeRowData: function(newData, rowIndex, rowsLength, columnsLength) {
var data = this.data().toJSON();
var idx, dataIndex, toAdd;
var rowMeasures = Math.max(this._rowMeasures().length, 1);
columnsLength = Math.max(columnsLength, 1);
if (data.length > 0) {
//if there is already data, drop the first new data item
rowsLength -= rowMeasures;
newData.splice(0, columnsLength * rowMeasures);
}
for (idx = 0; idx < rowsLength; idx++) {
toAdd = newData.splice(0, columnsLength);
dataIndex = (rowIndex * columnsLength) + (idx * columnsLength);
[].splice.apply(data, [dataIndex, 0].concat(toAdd));
}
return data;
},
_columnMeasures: function() {
var measures = this.measures();
var columnMeasures = [];
if (this.measuresAxis() === "columns") {
if (this.columns().length === 0) {
columnMeasures = measures;
} else if (measures.length > 1) {
columnMeasures = measures;
}
}
return columnMeasures;
},
_rowMeasures: function() {
var measures = this.measures();
var rowMeasures = [];
if (this.measuresAxis() === "rows") {
if (this.rows().length === 0) {
rowMeasures = measures;
} else if (measures.length > 1) {
rowMeasures = measures;
}
}
return rowMeasures;
},
_updateLocalData: function(data, state) {
if (this.cubeBuilder) {
if (state) {
this._requestData = state;
}
data = this._processResult(data);
}
this._data = this._observe(data);
this._ranges = [];
this._addRange(this._data);
this._total = this._data.length;
this._pristineTotal = this._total;
this._process(this._data);
},
data: function(value) {
var that = this;
if (value !== undefined) {
this._pristineData = value.slice(0);
this._updateLocalData(value, {
columns: this.columns(),
rows: this.rows(),
measures: this.measures()
});
} else {
return that._data;
}
},
_normalizeData: function(data, columns, rows) {
var cell, idx, length;
var axesLength = (columns || 1) * (rows || 1);
var result = new Array(axesLength);
if (data.length === axesLength) {
return data;
}
for (idx = 0, length = result.length; idx < length; idx++) {
result[idx] = { value: "", fmtValue: "", ordinal: idx };
}
for (idx = 0, length = data.length; idx < length; idx++) {
cell = data[idx];
result[cell.ordinal] = cell;
}
return result;
},
discover: function(options, converter) {
var that = this,
transport = that.transport;
return $.Deferred(function(deferred) {
transport.discover(extend({
success: function(response) {
response = that.reader.parse(response);
if (that._handleCustomErrors(response)) {
return;
}
if (converter) {
response = converter(response);
}
deferred.resolve(response);
},
error: function(response, status, error) {
deferred.reject(response);
that.error(response, status, error);
}
}, options));
}).promise().done(function() {
that.trigger("schemaChange");
});
},
schemaMeasures: function() {
var that = this;
return that.discover({
data: {
command: "schemaMeasures",
restrictions: {
catalogName: that.transport.catalog(),
cubeName: that.transport.cube()
}
}
}, function(response) {
return that.reader.measures(response);
});
},
schemaDimensions: function() {
var that = this;
return that.discover({
data: {
command: "schemaDimensions",
restrictions: {
catalogName: that.transport.catalog(),
cubeName: that.transport.cube()
}
}
}, function(response) {
return that.reader.dimensions(response);
});
},
schemaHierarchies: function(dimensionName) {
var that = this;
return that.discover({
data: {
command: "schemaHierarchies",
restrictions: {
catalogName: that.transport.catalog(),
cubeName: that.transport.cube(),
dimensionUniqueName: dimensionName
}
}
}, function(response) {
return that.reader.hierarchies(response);
});
},
schemaLevels: function(hierarchyName) {
var that = this;
return that.discover({
data: {
command: "schemaLevels",
restrictions: {
catalogName: that.transport.catalog(),
cubeName: that.transport.cube(),
hierarchyUniqueName: hierarchyName
}
}
}, function(response) {
return that.reader.levels(response);
});
},
schemaCubes: function() {
var that = this;
return that.discover({
data: {
command: "schemaCubes",
restrictions: {
catalogName: that.transport.catalog()
}
}
}, function(response) {
return that.reader.cubes(response);
});
},
schemaCatalogs: function() {
var that = this;
return that.discover({
data: {
command: "schemaCatalogs"
}
}, function(response) {
return that.reader.catalogs(response);
});
},
schemaMembers: function(restrictions) {
var that = this;
return that.discover({
data: {
command: "schemaMembers",
restrictions: extend({
catalogName: that.transport.catalog(),
cubeName: that.transport.cube()
}, restrictions)
}
}, function(response) {
return that.reader.members(response);
});
},
_params: function(data) {
if (this._clearAxesData) {
this._axes = {};
this._data = this._observe([]);
this._clearAxesData = false;
this.trigger(STATERESET);
}
var options = DataSource.fn._params.call(this, data);
options = extend({
measures: this.measures(),
measuresAxis: this.measuresAxis(),
columns: this.columns(),
rows: this.rows()
}, options);
if (this.cubeBuilder) {
this._requestData = options;
}
return options;
}
});
function validateAxis(newAxis, axis, measures) {
if (newAxis.tuples.length < membersCount(axis.tuples, measures)) {
return axis;
}
return;
}
function adjustDataByColumn(sourceTuples, targetTuples, rowsLength, measures, data) {
var columnIdx, rowIdx, dataIdx;
var columnsLength = sourceTuples.length;
var targetColumnsLength = membersCount(targetTuples, measures);
var measuresLength = measures.length || 1;
for (rowIdx = 0; rowIdx < rowsLength; rowIdx++) {
for (columnIdx = 0; columnIdx < columnsLength; columnIdx++) {
dataIdx = tupleIndex(sourceTuples[columnIdx], targetTuples) * measuresLength;
dataIdx += columnIdx % measuresLength;
data[rowIdx * columnsLength + columnIdx].ordinal = rowIdx * targetColumnsLength + dataIdx;
}
}
}
function adjustDataByRow(sourceTuples, targetTuples, columnsLength, measures, data) {
var columnIdx, rowIdx, dataIdx;
var rowsLength = sourceTuples.length;
var targetRowsLength = membersCount(targetTuples, measures);
var measuresLength = measures.length || 1;
for (rowIdx = 0; rowIdx < rowsLength; rowIdx++) {
dataIdx = tupleIndex(sourceTuples[rowIdx], targetTuples);
dataIdx *= measuresLength;
dataIdx += rowIdx % measuresLength;
for (columnIdx = 0; columnIdx < columnsLength; columnIdx++) {
data[rowIdx * columnsLength + columnIdx].ordinal = dataIdx * columnsLength + columnIdx;
}
}
}
function tupleIndex(tuple, collection) {
return findExistingTuple(collection, tuple).index;
}
function membersCount(tuples, measures) {
if (!tuples.length) {
return 0;
}
var queue = tuples.slice();
var current = queue.shift();
var idx, length, result = 1;
while (current) {
if (current.members) {
[].push.apply(queue, current.members);
} else if (current.children) {
if (!current.measure) {
result += current.children.length;
}
[].push.apply(queue, current.children);
}
current = queue.shift();
}
if (measures.length) {
result = result * measures.length;
}
return result;
}
function normalizeAxis(axis) {
if (!axis) {
axis = {
tuples: []
};
}
if (!axis.tuples) {
axis.tuples = [];
}
return axis;
}
function findDataIndex(tuple, memberIndex, measures) {
if (!tuple) {
return 0;
}
var counter = Math.max(measures.length, 1);
var tuples = tuple.members.slice(0, memberIndex);
var current = tuples.shift();
while (current) {
if (current.children) {
//is member
[].push.apply(tuples, current.children);
} else {
//is tuple
counter ++;
[].push.apply(tuples, current.members);
}
current = tuples.shift();
}
return counter;
}
function mergeTuples(target, source, measures) {
if (!source[0]) {
return {
parsedRoot: null,
tuples: target,
memberIndex: 0,
index: 0
};
}
var result = findExistingTuple(target, source[0]);
if (!result.tuple) {
return {
parsedRoot: null,
tuples: source,
memberIndex: 0,
index: 0
};
}
var targetMembers = result.tuple.members;
var sourceMembers = source[0].members;
var memberIndex = -1;
if (targetMembers.length !== sourceMembers.length) {
return {
parsedRoot: null,
tuples: source,
memberIndex: 0,
index: 0
};
}
for (var idx = 0, length = targetMembers.length; idx < length; idx++) {
if (!targetMembers[idx].measure && sourceMembers[idx].children[0]) {
if (memberIndex == -1 && sourceMembers[idx].children.length) {
memberIndex = idx;
}
targetMembers[idx].children = sourceMembers[idx].children;
}
}
measures = Math.max(measures.length, 1);
return {
parsedRoot: result.tuple,
index: result.index * measures,
memberIndex: memberIndex,
tuples: target
};
}
function equalTuples(first, second) {
var equal = true;
var idx, length;
first = first.members;
second = second.members;
for (idx = 0, length = first.length; idx < length; idx++) {
if (first[idx].measure || second[idx].measure) {
continue;
}
equal = equal && (first[idx].name === second[idx].name);
}
return equal;
}
function findExistingTuple(tuples, toFind) {
var idx, length, tuple, found, counter = 0;
var memberIndex, membersLength, member;
for (idx = 0, length = tuples.length; idx < length; idx++) {
tuple = tuples[idx];
if (equalTuples(tuple, toFind)) {
return {
tuple: tuple,
index: counter
};
}
counter ++;
for (memberIndex = 0, membersLength = tuple.members.length; memberIndex < membersLength; memberIndex++) {
member = tuple.members[memberIndex];
if (member.measure) {
//counter += member.children.length;
continue;
}
found = findExistingTuple(member.children, toFind);
counter += found.index;
if (found.tuple) {
return {
tuple: found.tuple,
index: counter
};
}
}
}
return {
index: counter
};
}
function addMembers(members, map) {
var member, i, len, path = "";
for (i = 0, len = members.length; i < len; i++) {
member = members[i];
path += member.name;
if (!map[path]) {
map[path] = member;
}
}
}
function findParentMember(tuple, map) {
var members = tuple.members;
var i, len, member, path = "";
var parentPath = "";
var parentMember;
for (i = 0, len = members.length; i < len; i++) {
member = members[i];
if (parentMember) {
if (map[path + member.name]) {
path += member.name;
parentMember = map[path];
continue;
} else if (map[path + member.parentName]) {
return map[path + member.parentName];
} else {
if (member.parentName) {
parentPath += member.parentName;
}
return map[parentPath];
}
}
path += member.name;
parentMember = map[member.parentName];
if (!parentMember) {
parentMember = map[path];
if (!parentMember) {
return null;
}
}
if (parentMember) {
parentPath += parentMember.name;
}
}
return parentMember;
}
function measurePosition(tuple, measures) {
if (measures.length === 0) {
return -1;
}
var measure = measures[0];
var members = tuple.members;
for (var idx = 0, len = members.length; idx < len; idx ++) {
if (members[idx].name == measure) {
return idx;
}
}
}
function normalizeMeasures(tuple, index) {
if (index < 0) {
return;
}
var member = {
name: "Measures",
measure: true,
children: [
$.extend({ members: [], dataIndex: tuple.dataIndex }, tuple.members[index])
]
};
tuple.members.splice(index, 1, member);
tuple.dataIndex = undefined;
}
function parseSource(tuples, measures) {
if (tuples.length < 1) {
return [];
}
var result = [];
var map = { };
var measureIndex = measurePosition(tuples[0], measures);
for (var i = 0; i < tuples.length; i++) {
var tuple = tuples[i];
//keep the old data index of the tuple
tuple.dataIndex = i;
normalizeMeasures(tuple, measureIndex);
var parentMember = findParentMember(tuple, map);
if (parentMember) {
if (measureIndex < 0 || !parentMember.measure) {
parentMember.children.push(tuple);
} else {
parentMember.children.push(tuple.members[measureIndex].children[0]);
}
} else {
result.push(tuple);
}
addMembers(tuple.members, map);
}
return result;
}
function prepareDataOnRows(tuples, data) {
if (!tuples || !tuples.length) {
return data;
}
var result = [];
var indices = buildDataIndices(tuples);
var rowsLength = indices.length;
var columnsLength = Math.max(data.length / rowsLength, 1);
var rowIndex, columnIndex, targetIndex, sourceIndex;
for (rowIndex = 0; rowIndex < rowsLength; rowIndex++) {
targetIndex = columnsLength * rowIndex;
sourceIndex = columnsLength * indices[rowIndex];
for (columnIndex = 0; columnIndex < columnsLength; columnIndex++) {
result[targetIndex + columnIndex] = data[sourceIndex + columnIndex];
}
}
return result;
}
function prepareDataOnColumns(tuples, data) {
if (!tuples || !tuples.length) {
return data;
}
var result = [];
var indices = buildDataIndices(tuples);
var columnsLength = indices.length;
var rowsLength = Math.max(data.length / columnsLength, 1);
var columnIndex, rowIndex, dataIndex;
for (rowIndex = 0; rowIndex < rowsLength; rowIndex++) {
dataIndex = columnsLength * rowIndex;
for (columnIndex = 0; columnIndex < columnsLength; columnIndex++) {
result[dataIndex + columnIndex] = data[indices[columnIndex] + dataIndex];
}
}
return result;
}
function buildDataIndices(tuples) {
tuples = tuples.slice();
var result = [];
var tuple = tuples.shift();
var idx, length, spliceIndex, children, member;
while (tuple) {
//required for multiple measures
if (tuple.dataIndex !== undefined) {
result.push(tuple.dataIndex);
}
spliceIndex = 0;
for (idx = 0, length = tuple.members.length; idx < length; idx++) {
member = tuple.members[idx];
children = member.children;
if (member.measure) {
[].splice.apply(tuples, [0, 0].concat(children));
} else {
[].splice.apply(tuples, [spliceIndex, 0].concat(children));
}
spliceIndex += children.length;
}
tuple = tuples.shift();
}
return result;
}
PivotDataSource.create = function(options) {
options = options && options.push ? { data: options } : options;
var dataSource = options || {},
data = dataSource.data;
dataSource.data = data;
if (!(dataSource instanceof PivotDataSource) && dataSource instanceof kendo.data.DataSource) {
throw new Error("Incorrect DataSource type. Only PivotDataSource instances are supported");
}
return dataSource instanceof PivotDataSource ? dataSource : new PivotDataSource(dataSource);
};
function transformDescriptors(members, mapFunction) {
var result = [];
for (var idx = 0; idx < members.length; idx++) {
result.push(mapFunction(members[idx]));
}
return result;
}
function baseHierarchyPath(memberName) {
var parts = memberName.split(".");
if (parts.length > 2) {
return parts[0] + "." + parts[1];
}
return memberName;
}
function trimSameHierarchyChildDescriptors(members) {
var result = members.slice(0);
for (var idx = 0; idx < members.length; idx++) {
var hierarchyName = baseHierarchyPath(members[idx].name);
var j = idx + 1;
while(j < result.length) {
if (result[j].name.indexOf(hierarchyName) === 0) {
result.splice(j, 1);
} else {
j++;
}
}
}
return result;
}
function trimSameHierarchyChildDescriptorsForName(members, memberName) {
var result = [];
for (var idx = 0; idx < members.length; idx++) {
var name = members[idx].name;
var hierarchyName = baseHierarchyPath(memberName);
if (memberName == name || name.indexOf(hierarchyName) !== 0) {
result.push(members[idx]);
}
}
return result;
}
function sameHierarchyDescriptors(members) {
var same = {};
for (var idx = 0; idx < members.length; idx++) {
var name = members[idx].name;
var hierarchyName = baseHierarchyPath(name);
for (var j = 0; j < members.length; j++) {
var memberName = members[j].name;
if (memberName.indexOf(hierarchyName) === 0 && memberName !== name) {
same[name] = members[idx];
}
}
}
var result = [];
for (var key in same) {
result.push(same[key]);
}
return result;
}
function expandMemberDescriptor(members, memberNames) {
return transformDescriptors(members, function(member) {
var name = member.name;
var found = false;
for (var idx = 0; idx < memberNames.length; idx++) {
if (name === memberNames[idx]) {
found = true;
break;
}
}
if (member.expand && found) {
name += ".Children";
}
return name;
});
}
function expandDescriptors(members) {
return transformDescriptors(members, function(member) {
var name = member.name;
if (member.expand) {
name += ".Children";
}
return name;
});
}
function convertMemberDescriptors(members) {
return transformDescriptors(members, function(member) {
return member.name;
});
}
function crossJoin(names) {
var result = "CROSSJOIN({";
var r;
if (names.length > 2) {
r = names.pop();
result += crossJoin(names);
} else {
result += names.shift();
r = names.pop();
}
result += "},{";
result += r;
result += "})";
return result;
}
function crossJoinCommand(members, measures) {
var tmp = members;
if (measures.length > 1) {
tmp.push("{" + measures.join(",") + "}");
}
return crossJoin(tmp);
}
function expandedMembers(members) {
var result = [];
for (var idx = 0; idx < members.length; idx++) {
if (members[idx].expand) {
result.push(members[idx]);
}
}
return result;
}
function serializeMembers(members, measures) {
var command = "";
members = members || [];
var memberNames = convertMemberDescriptors(trimSameHierarchyChildDescriptors(members));
var expandedColumns = expandedMembers(members);
if (memberNames.length > 1 || measures.length > 1) {
command += crossJoinCommand(memberNames, measures);
if (expandedColumns.length) {
var start = 0;
var idx;
var j;
var name;
var expandedMemberNames = [];
var sameHierarchyMembers = sameHierarchyDescriptors(members);
var generatedMembers = [];
for (idx = 0; idx < expandedColumns.length; idx++) {
for (j=start; j < expandedColumns.length; j++) {
name = expandedColumns[j].name;
var tmpMembers = trimSameHierarchyChildDescriptors(members);
if ($.inArray(expandedColumns[j], sameHierarchyMembers) > -1) {
tmpMembers = trimSameHierarchyChildDescriptorsForName(members, name);
}
var tmp = crossJoinCommand(expandMemberDescriptor(tmpMembers, expandedMemberNames.concat(name)), measures);
if ($.inArray(tmp, generatedMembers) == -1) {
command += ",";
command += tmp;
generatedMembers.push(tmp);
}
}
start++;
expandedMemberNames.push(expandedColumns[idx].name);
expandedMemberNames.shift();
}
}
} else {
if (expandedColumns.length) {
memberNames = memberNames.concat(expandDescriptors(members));
}
command += memberNames.join(",");
}
return command;
}
var filterFunctionFormats = {
contains: ", InStr({0}.CurrentMember.MEMBER_CAPTION,\"{1}\") > 0",
doesnotcontain: ", InStr({0}.CurrentMember.MEMBER_CAPTION,\"{1}\") = 0",
startswith: ", Left({0}.CurrentMember.MEMBER_CAPTION,Len(\"{1}\"))=\"{1}\"",
endswith: ", Right({0}.CurrentMember.MEMBER_CAPTION,Len(\"{1}\"))=\"{1}\"",
eq: ", {0}.CurrentMember.MEMBER_CAPTION = \"{1}\"",
neq: ", NOT {0}.CurrentMember.MEMBER_CAPTION = \"{1}\""
};
function serializeExpression(expression) {
var command = "";
var value = expression.value;
var field = expression.field;
var operator = expression.operator;
if (operator == "in") {
command += "{";
command += value;
command += "}";
} else {
command += "Filter(";
command += field + ".Children";
command += kendo.format(filterFunctionFormats[operator], field, value);
command += ")";
}
return command;
}
function serializeFilters(filter, cube) {
var command = "", current;
var filters = filter.filters;
var length = filters.length;
var idx;
for (idx = length - 1; idx >= 0; idx--) {
current = "SELECT (";
current += serializeExpression(filters[idx]);
current += ") ON 0";
if (idx == length - 1) {
current += " FROM [" + cube + "]";
command = current;
} else {
command = current + " FROM ( " + command + " )";
}
}
return command;
}
function serializeOptions(parentTagName, options, capitalize) {
var result = "";
if (options) {
result += "<" + parentTagName + ">";
var value;
for (var key in options) {
value = options[key] ;
if (capitalize) {
key = key.replace(/([A-Z]+(?=$|[A-Z][a-z])|[A-Z]?[a-z]+)/g, "$1_").toUpperCase().replace(/_$/, "");
}
result += "<" + key + ">" + value + "";
}
result += "";
} else {
result += "<" + parentTagName + "/>";
}
return result;
}
var xmlaDiscoverCommands = {
schemaCubes: "MDSCHEMA_CUBES",
schemaCatalogs: "DBSCHEMA_CATALOGS",
schemaMeasures: "MDSCHEMA_MEASURES",
schemaDimensions: "MDSCHEMA_DIMENSIONS",
schemaHierarchies: "MDSCHEMA_HIERARCHIES",
schemaLevels: "MDSCHEMA_LEVELS",
schemaMembers: "MDSCHEMA_MEMBERS"
};
var convertersMap = {
read: function(options, type) {
var command = '';
command += "SELECT NON EMPTY {";
var columns = options.columns || [];
var rows = options.rows || [];
var measures = options.measures || [];
var measuresRowAxis = options.measuresAxis === "rows";
if (!columns.length && rows.length && (!measures.length || (measures.length && measuresRowAxis))) {
columns = rows;
rows = [];
measuresRowAxis = false;
}
if (!columns.length && !rows.length) {
measuresRowAxis = false;
}
if (columns.length) {
command += serializeMembers(columns, !measuresRowAxis ? measures : []);
} else if (measures.length && !measuresRowAxis) {
command += measures.join(",");
}
command += "} DIMENSION PROPERTIES CHILDREN_CARDINALITY, PARENT_UNIQUE_NAME ON COLUMNS";
if (rows.length || (measuresRowAxis && measures.length > 1)) {
command += ", NON EMPTY {";
if (rows.length) {
command += serializeMembers(rows, measuresRowAxis ? measures : []);
} else {
command += measures.join(",");
}
command += "} DIMENSION PROPERTIES CHILDREN_CARDINALITY, PARENT_UNIQUE_NAME ON ROWS";
}
if (options.filter) {
command += " FROM ";
command += "(";
command += serializeFilters(options.filter, options.connection.cube);
command += ")";
} else {
command += " FROM [" + options.connection.cube + "]";
}
if (measures.length == 1 && columns.length) {
command += " WHERE (" + measures.join(",") + ")";
}
command += ' ' + options.connection.catalog + ' Multidimensional ';
command += "" + (xmlaDiscoverCommands[options.command] || options.command) + " ";
command += "" + serializeOptions("RestrictionList", options.restrictions, true) + " ";
if (options.connection && options.connection.catalog) {
options.properties = $.extend({}, {
Catalog: options.connection.catalog
}, options.properties);
}
command += "" + serializeOptions("PropertyList", options.properties) + " ";
command += ' ${data.name || data}' +
(this.options.enabled ?
'
' : "") + '
${data}
",
setting: "columns",
enabled: true,
messages: {
empty: "Drop Fields Here"
}
},
setDataSource: function(dataSource) {
this.dataSource.unbind(CHANGE, this._refreshHandler);
this.dataSource = this.options.dataSource = dataSource;
if (this.fieldMenu) {
this.fieldMenu.setDataSource(dataSource);
}
dataSource.first(CHANGE, this._refreshHandler);
this.refresh();
},
_sortable: function() {
var that = this;
if (that.options.enabled) {
this.sortable = this.element.kendoSortable({
connectWith: this.options.connectWith,
filter: ">:not(.k-empty)",
hint: that.options.hint,
cursor: "move",
change: function(e) {
var name = e.item.attr(kendo.attr("name"));
if (e.action == "receive") {
that.add(name);
} else if (e.action == "remove") {
that.remove(name);
} else if (e.action == "sort") {
that.move(name, e.newIndex);
}
}
}).data("kendoSortable");
}
},
_indexOf: function(name, items) {
var idx, length, index = -1;
for (idx = 0, length = items.length; idx < length; idx++) {
if (items[idx].name === name || items[idx] === name) {
index = idx;
break;
}
}
return index;
},
validate: function(data) {
var isMeasure = (data.type == 2 || "aggregator" in data);
if (isMeasure) {
return this.options.setting === "measures";
}
if (this.options.setting === "measures") {
return isMeasure;
}
var items = this.dataSource[this.options.setting]();
var name = data.defaultHierarchy || data.uniqueName;
if (this._indexOf(name, items) > -1) {
return false;
}
items = this.dataSource[this.options.setting === "columns" ? "rows" : "columns"]();
if (this._indexOf(name, items) > -1) {
return false;
}
return true;
},
add: function(name) {
var items = this.dataSource[this.options.setting]();
var idx = this._indexOf(name, items);
if (idx == -1) {
items.push(name);
this.dataSource[this.options.setting](items);
}
},
move: function(name, index) {
var items = this.dataSource[this.options.setting]();
var idx = this._indexOf(name, items);
if (idx > -1) {
items.splice(idx, 1);
items.splice(index, 0, name);
this.dataSource[this.options.setting](items);
}
},
remove: function(name) {
var items = this.dataSource[this.options.setting]();
var idx = this._indexOf(name, items);
if (idx > -1) {
items.splice(idx, 1);
this.dataSource[this.options.setting](items);
}
},
refresh: function() {
var items = this.dataSource[this.options.setting]();
var html = this.emptyTemplate(this.options.messages.empty);
if (items.length) {
html = kendo.render(this.template, items);
}
this.element.html(html);
},
destroy: function() {
Widget.fn.destroy.call(this);
this.dataSource.unbind(CHANGE, this._refreshHandler);
this.element.off(NS);
if (this.sortable) {
this.sortable.destroy();
}
if (this.fieldMenu) {
this.fieldMenu.destroy();
}
this.element = null;
this._refreshHandler = null;
}
});
var PivotGrid = Widget.extend({
init: function(element, options) {
var that = this;
var columnBuilder;
var rowBuilder;
Widget.fn.init.call(that, element, options);
that._dataSource();
that._bindConfigurator();
that._wrapper();
that._createLayout();
that._columnBuilder = columnBuilder = new ColumnBuilder();
that._rowBuilder = rowBuilder = new RowBuilder();
that._contentBuilder = new ContentBuilder();
that._templates();
that.columnsHeader
.add(that.rowsHeader)
.on("click", "span.k-icon", function() {
var button = $(this);
var builder = columnBuilder;
var action = "expandColumn";
var eventName;
var path = button.attr(kendo.attr("path"));
var eventArgs = {
axis: "columns",
path: $.parseJSON(path)
};
if (button.parent().is("td")) {
builder = rowBuilder;
action = "expandRow";
eventArgs.axis = "rows";
}
var expanded = button.hasClass(STATE_EXPANDED);
var metadata = builder.metadata[path];
var request = metadata.expanded === undefined;
eventName = expanded ? COLLAPSEMEMBER : EXPANDMEMBER;
if (that.trigger(eventName, eventArgs)) {
return;
}
builder.metadata[path].expanded = !expanded;
button.toggleClass(STATE_EXPANDED, !expanded)
.toggleClass(STATE_COLLAPSED, expanded);
if (!expanded && request) {
that.dataSource[action](eventArgs.path);
} else {
that.refresh();
}
});
that._scrollable();
if (that.options.autoBind) {
that.dataSource.fetch();
}
kendo.notify(that);
},
events: [
DATABINDING,
DATABOUND,
EXPANDMEMBER,
COLLAPSEMEMBER
],
options: {
name: "PivotGrid",
autoBind: true,
reorderable: true,
filterable: false,
height: null,
columnWidth: 100,
configurator: "",
columnHeaderTemplate: null,
rowHeaderTemplate: null,
dataCellTemplate: null,
messages: {
measureFields: "Drop Data Fields Here",
columnFields: "Drop Column Fields Here",
rowFields: "Drop Rows Fields Here"
}
},
_templates: function() {
var dataTemplate = this.options.dataCellTemplate;
var columnTemplate = this.options.columnHeaderTemplate;
var rowTemplate = this.options.rowHeaderTemplate;
this._columnBuilder.template = kendo.template(columnTemplate || HEADER_TEMPLATE, { useWithBlock: !!columnTemplate });
this._contentBuilder.template = kendo.template(dataTemplate || DATACELL_TEMPLATE, { useWithBlock: !!dataTemplate });
this._rowBuilder.template = kendo.template(rowTemplate || HEADER_TEMPLATE, { useWithBlock: !!rowTemplate });
},
_bindConfigurator: function() {
var configurator = this.options.configurator;
if (configurator) {
$(configurator).kendoPivotConfigurator("setDataSource", this.dataSource);
}
},
cellInfoByElement: function(element) {
element = $(element);
return this.cellInfo(element.index(), element.parent("tr").index());
},
cellInfo: function(columnIndex, rowIndex) {
var contentBuilder = this._contentBuilder;
var columnInfo = contentBuilder.columnIndexes[columnIndex || 0];
var rowInfo = contentBuilder.rowIndexes[rowIndex || 0];
var dataIndex;
if (!columnInfo || !rowInfo) {
return null;
}
dataIndex = (rowInfo.index * contentBuilder.rowLength) + columnInfo.index;
return {
columnTuple: columnInfo.tuple,
rowTuple: rowInfo.tuple,
measure: columnInfo.measure || rowInfo.measure,
dataItem: this.dataSource.view()[dataIndex]
};
},
setDataSource: function(dataSource) {
this.options.dataSource = dataSource;
this._dataSource();
if (this.measuresTarget) {
this.measuresTarget.setDataSource(dataSource);
}
if (this.rowsTarget) {
this.rowsTarget.setDataSource(dataSource);
}
if (this.columnsTarget) {
this.columnsTarget.setDataSource(dataSource);
}
this._bindConfigurator();
if (this.options.autoBind) {
dataSource.fetch();
}
},
setOptions: function(options) {
Widget.fn.setOptions.call(this, options);
this._templates();
},
_dataSource: function() {
var that = this;
var dataSource = that.options.dataSource;
dataSource = $.isArray(dataSource) ? { data: dataSource } : dataSource;
if (that.dataSource && this._refreshHandler) {
that.dataSource.unbind(CHANGE, that._refreshHandler)
.unbind(STATERESET, that._stateResetHandler)
.unbind(PROGRESS, that._progressHandler)
.unbind(ERROR, that._errorHandler);
} else {
that._refreshHandler = $.proxy(that.refresh, that);
that._progressHandler = $.proxy(that._requestStart, that);
that._stateResetHandler = $.proxy(that._stateReset, that);
that._errorHandler = $.proxy(that._error, that);
}
that.dataSource = kendo.data.PivotDataSource.create(dataSource)
.bind(CHANGE, that._refreshHandler)
.bind(PROGRESS, that._progressHandler)
.bind(STATERESET, that._stateResetHandler)
.bind(ERROR, that._errorHandler);
},
_error: function() {
this._progress(false);
},
_requestStart: function() {
this._progress(true);
},
_stateReset: function() {
this._columnBuilder.reset();
this._rowBuilder.reset();
},
_wrapper: function() {
this.wrapper = this.element.addClass("k-widget k-pivot");
},
_measureFields: function() {
this.measureFields = $(DIV).addClass("k-pivot-toolbar k-header k-settings-measures");
this.measuresTarget = this._createSettingTarget(this.measureFields, {
setting: "measures",
messages: {
empty: this.options.messages.measureFields
}
});
},
_createSettingTarget: function(element, options) {
var template = '${data.name || data}';
var icons = "";
if (options.filterable) {
icons += '' + icons + ' ';
}
template += ' ';
return new kendo.ui.PivotSettingTarget(element, $.extend({
template: template,
emptyTemplate: '${data} ',
enabled: this.options.reorderable,
dataSource: this.dataSource
}, options));
},
_initSettingTargets: function() {
this.columnsTarget = this._createSettingTarget(this.columnFields, {
connectWith: this.rowFields,
setting: "columns",
filterable: this.options.filterable,
messages: {
empty: this.options.messages.columnFields,
fieldMenu: this.options.messages.fieldMenu
}
});
this.rowsTarget = this._createSettingTarget(this.rowFields, {
connectWith: this.columnFields,
setting: "rows",
filterable: this.options.filterable,
messages: {
empty: this.options.messages.rowFields,
fieldMenu: this.options.messages.fieldMenu
}
});
},
_createLayout: function() {
var that = this;
var layoutTable = $(LAYOUT_TABLE);
var leftContainer = layoutTable.find(".k-pivot-rowheaders");
var rightContainer = layoutTable.find(".k-pivot-table");
var gridWrapper = $(DIV).addClass("k-grid k-widget");
that._measureFields();
that.columnFields = $(DIV).addClass("k-pivot-toolbar k-header k-settings-columns");
that.rowFields = $(DIV).addClass("k-pivot-toolbar k-header k-settings-rows");
that.columnsHeader = $('')
.wrap('');
that.columnsHeader.parent().css("padding-right", kendo.support.scrollbar());
that.rowsHeader = $('
');
that.content = $('
');
leftContainer.append(that.measureFields);
leftContainer.append(that.rowFields);
leftContainer.append(that.rowsHeader);
gridWrapper.append(that.columnsHeader.parent());
gridWrapper.append(that.content);
rightContainer.append(that.columnFields);
rightContainer.append(gridWrapper);
that.wrapper.append(layoutTable);
that.columnsHeaderTree = new kendo.dom.Tree(that.columnsHeader[0]);
that.rowsHeaderTree = new kendo.dom.Tree(that.rowsHeader[0]);
that.contentTree = new kendo.dom.Tree(that.content[0]);
that._initSettingTargets();
},
_progress: function(toggle) {
kendo.ui.progress(this.wrapper, toggle);
},
_resize: function() {
if (this.content[0].firstChild) {
this._setSectionsWidth();
this._setSectionsHeight();
this._setContentWidth();
this._setContentHeight();
}
},
_setSectionsWidth: function() {
var rowsHeader = this.rowsHeader;
var leftColumn = rowsHeader.parent(".k-pivot-rowheaders").width("auto");
var width;
width = Math.max(this.measureFields.outerWidth(), this.rowFields.outerWidth());
width = Math.max(rowsHeader.children("table").width(), width);
leftColumn.width(width);
},
_setSectionsHeight: function() {
var measureFieldsHeight = this.measureFields.height("auto").height();
var columnFieldsHeight = this.columnFields.height("auto").height();
var rowFieldsHeight = this.rowFields.height("auto").innerHeight();
var columnsHeight = this.columnsHeader.height("auto").innerHeight();
var padding = rowFieldsHeight - this.rowFields.height();
var firstRowHeight = columnFieldsHeight > measureFieldsHeight ? columnFieldsHeight : measureFieldsHeight;
var secondRowHeight = columnsHeight > rowFieldsHeight ? columnsHeight : rowFieldsHeight;
this.measureFields.height(firstRowHeight);
this.columnFields.height(firstRowHeight);
this.rowFields.height(secondRowHeight - padding);
this.columnsHeader.height(secondRowHeight);
},
_setContentWidth: function() {
var contentTable = this.content.children("table");
var contentWidth = this.content.width();
var rowLength = contentTable.children("colgroup").children().length;
var minWidth = 100;
var calculatedWidth = rowLength * this.options.columnWidth;
if (contentWidth < calculatedWidth) {
minWidth = Math.ceil((calculatedWidth / contentWidth) * 100);
}
contentTable.add(this.columnsHeader.children("table"))
.css("min-width", minWidth + "%");
},
_setContentHeight: function() {
var that = this;
var content = that.content;
var rowsHeader = that.rowsHeader;
var height = that.options.height;
var scrollbar = kendo.support.scrollbar();
var skipScrollbar = content[0].offsetHeight === content[0].clientHeight;
if (that.wrapper.is(":visible")) {
if (!height) {
if (skipScrollbar) {
scrollbar = 0;
}
rowsHeader.height(content.height() - scrollbar);
return;
}
height -= that.columnFields.outerHeight();
height -= that.columnsHeader.outerHeight();
if (height <= scrollbar * 2) { // do not set height if proper scrollbar cannot be displayed
height = scrollbar * 2 + 1;
}
content.height(height);
if (skipScrollbar) {
scrollbar = 0;
}
rowsHeader.height(height - scrollbar);
}
},
refresh: function() {
var that = this;
var dataSource = that.dataSource;
var axes = dataSource.axes();
var columns = (axes.columns || {}).tuples || [];
var rows = (axes.rows || {}).tuples || [];
var columnBuilder = that._columnBuilder;
var rowBuilder = that._rowBuilder;
var columnAxis = {};
var rowAxis = {};
if (that.trigger(DATABINDING, { action: "rebind" } )) {
return;
}
columnBuilder.measures = dataSource._columnMeasures();
that.columnsHeaderTree.render(columnBuilder.build(columns));
that.rowsHeaderTree.render(rowBuilder.build(rows));
columnAxis = {
indexes: columnBuilder._indexes,
measures: columnBuilder.measures,
metadata: columnBuilder.metadata
};
rowAxis = {
indexes: rowBuilder._indexes,
measures: dataSource._rowMeasures(),
metadata: rowBuilder.metadata
};
that.contentTree.render(that._contentBuilder.build(dataSource.view(), columnAxis, rowAxis));
that._resize();
if (that.touchScroller) {
that.touchScroller.contentResized();
} else {
var touchScroller = kendo.touchScroller(that.content);
if (touchScroller && touchScroller.movable) {
that.touchScroller = touchScroller;
touchScroller.movable.bind("change", function(e) {
that.columnsHeader.scrollLeft(-e.sender.x);
that.rowsHeader.scrollTop(-e.sender.y);
});
}
}
that._progress(false);
that.trigger(DATABOUND);
},
_scrollable: function() {
var that = this;
var columnsHeader = that.columnsHeader;
var rowsHeader = that.rowsHeader;
that.content.scroll(function() {
columnsHeader.scrollLeft(this.scrollLeft);
rowsHeader.scrollTop(this.scrollTop);
});
rowsHeader.bind("DOMMouseScroll" + NS + " mousewheel" + NS, $.proxy(that._wheelScroll, that));
},
_wheelScroll: function (e) {
if (e.ctrlKey) {
return;
}
var delta = kendo.wheelDeltaY(e);
var scrollTop = this.content.scrollTop();
if (delta) {
e.preventDefault();
//In Firefox DOMMouseScroll event cannot be canceled
$(e.currentTarget).one("wheel" + NS, false);
this.rowsHeader.scrollTop(scrollTop + (-delta));
this.content.scrollTop(scrollTop + (-delta));
}
}
});
var element = kendo.dom.element;
var htmlNode = kendo.dom.html;
var text = kendo.dom.text;
var createMetadata = function(levelNum, memberIdx) {
return {
maxChildren: 0,
children: 0,
maxMembers: 0,
members: 0,
measures: 1,
levelNum: levelNum,
parentMember: memberIdx !== 0
};
};
var buildPath = function(tuple, index) {
var path = [];
var idx = 0;
for(; idx <= index; idx++) {
path.push(tuple.members[idx].name);
}
return path;
};
var ColumnBuilder = Class.extend({
init: function(options) {
this.measures = 1;
this.metadata = {};
},
build: function(tuples) {
var tbody = this._tbody(tuples);
var colgroup = this._colGroup();
return [
element("table", null, [colgroup, tbody])
];
},
reset: function() {
this.metadata = {};
},
_colGroup: function() {
var length = this._rowLength();
var children = [];
var idx = 0;
for (; idx < length; idx++) {
children.push(element("col", null));
}
return element("colgroup", null, children);
},
_tbody: function(tuples) {
var root = tuples[0];
this.map = {};
this.rows = [];
this.rootTuple = root;
this._indexes = [];
if (root) {
this._buildRows(root, 0);
this._normalize();
} else {
this.rows.push(element("tr", null, [ element("th", null) ]));
}
return element("tbody", null, this.rows);
},
_normalize: function() {
var rows = this.rows;
var rowsLength = rows.length;
var rowIdx = 0;
var row;
var cellsLength;
var cellIdx;
var cells;
var cell;
for (; rowIdx < rowsLength; rowIdx++) {
row = rows[rowIdx];
if (row.rowspan === 1) {
continue;
}
cells = row.children;
cellIdx = 0;
cellsLength = cells.length;
for (; cellIdx < cellsLength; cellIdx++) {
cell = cells[cellIdx];
if (cell.tupleAll) {
cell.attr.rowspan = row.rowspan;
}
}
}
},
_rowIndex: function(row) {
var rows = this.rows;
var length = rows.length;
var idx = 0;
for(; idx < length; idx++) {
if (rows[idx] === row) {
break;
}
}
return idx;
},
_rowLength: function() {
var cells = this.rows[0] ? this.rows[0].children : [];
var length = cells.length;
var rowLength = 0;
var idx = 0;
if (length) {
for (; idx < length; idx++) {
rowLength += cells[idx].attr.colspan || 1;
}
}
if (!rowLength) {
rowLength = this.measures;
}
return rowLength;
},
_row: function(tuple, memberIdx, parentMember) {
var rootName = this.rootTuple.members[memberIdx].name;
var levelNum = tuple.members[memberIdx].levelNum;
var rowKey = rootName + levelNum;
var map = this.map;
var parentRow;
var children;
var row = map[rowKey];
if (!row) {
row = element("tr", null, []);
row.parentMember = parentMember;
row.colspan = 0;
row.rowspan = 1;
map[rowKey] = row;
parentRow = map[rootName + (Number(levelNum) - 1)];
if (parentRow) {
children = parentRow.children;
if (children[1] && children[1].attr.className.indexOf("k-alt") === -1) {
row.notFirst = true;
} else {
row.notFirst = parentRow.notFirst;
}
}
this.rows.splice(this._rowIndex(parentRow) + 1, 0, row);
} else {
row.notFirst = false;
if (!row.parentMember || row.parentMember !== parentMember) {
row.parentMember = parentMember;
row.colspan = 0;
}
}
return row;
},
_measures: function(measures, tuple, className) {
var map = this.map;
var row = map.measureRow;
var measure;
if (!row) {
row = element("tr", null, []);
map.measureRow = row;
this.rows.push(row);
}
for (var idx = 0, length = measures.length; idx < length; idx++) {
measure = measures[idx];
row.children.push(element("th", { className: "k-header" + (className || "") }, [this._content(measure, tuple)]));
}
return length;
},
_content: function(member, tuple) {
return htmlNode(this.template({
member: member,
tuple: tuple
}));
},
_cell: function(className, children) {
return element("th", { className: "k-header" + className }, children);
},
_buildRows: function(tuple, memberIdx, parentMember) {
var members = tuple.members;
var member = members[memberIdx];
var nextMember = members[memberIdx + 1];
var row, childRow, children, childrenLength;
var cell, allCell, cellAttr;
var cellChildren = [];
var path;
var idx = 0;
var colspan;
var metadata;
if (member.measure) {
this._measures(member.children, tuple);
return;
}
path = kendo.stringify(buildPath(tuple, memberIdx));
row = this._row(tuple, memberIdx, parentMember);
children = member.children;
childrenLength = children.length;
metadata = this.metadata[path];
if (!metadata) {
this.metadata[path] = metadata = createMetadata(Number(member.levelNum), memberIdx);
}
this._indexes.push({
path: path,
tuple: tuple
});
if (member.hasChildren) {
if (metadata.expanded === false) {
childrenLength = 0;
metadata.children = 0;
}
cellAttr = { className: "k-icon " + (childrenLength ? STATE_EXPANDED : STATE_COLLAPSED) };
cellAttr[kendo.attr("path")] = path;
cellChildren.push(element("span", cellAttr));
}
cellChildren.push(this._content(member, tuple));
cell = this._cell((row.notFirst ? " k-first" : ""), cellChildren);
row.children.push(cell);
row.colspan += 1;
if (childrenLength) {
allCell = this._cell(" k-alt", [this._content(member, tuple)]);
row.children.push(allCell);
for (; idx < childrenLength; idx++) {
childRow = this._buildRows(children[idx], memberIdx, member);
}
colspan = childRow.colspan;
cell.attr.colspan = colspan;
metadata.children = colspan;
metadata.members = 1;
row.colspan += colspan;
row.rowspan = childRow.rowspan + 1;
if (nextMember) {
if (nextMember.measure) {
colspan = this._measures(nextMember.children, tuple, " k-alt");
} else {
colspan = this._buildRows(tuple, memberIdx + 1).colspan;
}
allCell.attr.colspan = colspan;
colspan -= 1;
metadata.members += colspan;
row.colspan += colspan;
}
} else if (nextMember) {
if (nextMember.measure) {
colspan = this._measures(nextMember.children, tuple);
} else {
colspan = this._buildRows(tuple, memberIdx + 1).colspan;
}
metadata.members = colspan;
if (colspan > 1) {
cell.attr.colspan = colspan;
row.colspan += colspan - 1;
}
}
if (metadata.maxChildren < metadata.children) {
metadata.maxChildren = metadata.children;
}
if (metadata.maxMembers < metadata.members) {
metadata.maxMembers = metadata.members;
}
(allCell || cell).tupleAll = true;
return row;
}
});
var RowBuilder = Class.extend({
init: function(options) {
this.metadata = {};
},
build: function(tuples) {
var tbody = this._tbody(tuples);
var colgroup = this._colGroup();
return [
element("table", null, [colgroup, tbody])
];
},
reset: function() {
this.metadata = {};
},
_colGroup: function() {
var length = this.rows[0].children.length;
var children = [];
var idx = 0;
for (; idx < length; idx++) {
children.push(element("col", null));
}
return element("colgroup", null, children);
},
_tbody: function(tuples) {
var root = tuples[0];
this.rootTuple = root;
this.rows = [];
this.map = {};
this._indexes = [];
if (root) {
this._buildRows(root, 0);
this._normalize();
} else {
this.rows.push(element("tr", null, [ element("td", null) ]));
}
return element("tbody", null, this.rows);
},
_normalize: function() {
var rows = this.rows;
var rowsLength = rows.length;
var rowIdx = 0;
var members = this.rootTuple.members;
var firstMemberName = members[0].name;
var membersLength = members.length;
var memberIdx = 0;
var row;
var cell;
var maxColspan;
var map = this.map;
var allRow;
for (; rowIdx < rowsLength; rowIdx++) {
row = rows[rowIdx];
for (memberIdx = 0; memberIdx < membersLength; memberIdx++) {
maxColspan = this[members[memberIdx].name];
cell = row.colspan["dim" + memberIdx];
if (cell && cell.levelNum < maxColspan) {
cell.attr.colspan = (maxColspan - cell.levelNum) + 1;
}
}
}
row = map[firstMemberName];
allRow = map[firstMemberName + "all"];
if (row) {
row.children[0].attr.className = "k-first";
}
if (allRow) {
allRow.children[0].attr.className += " k-first";
}
},
_row: function(children) {
var row = element("tr", null, children);
row.rowspan = 1;
row.colspan = {};
this.rows.push(row);
return row;
},
_content: function(member, tuple) {
return htmlNode(this.template({
member: member,
tuple: tuple
}));
},
_buildRows: function(tuple, memberIdx) {
var map = this.map;
var path;
var members = tuple.members;
var member = members[memberIdx];
var nextMember = members[memberIdx + 1];
var children = member.children;
var childrenLength = children.length;
var levelNum = Number(member.levelNum) + 1;
var rootName = this.rootTuple.members[memberIdx].name;
var tuplePath = buildPath(tuple, memberIdx - 1).join("");
var parentName = tuplePath + (member.parentName || "");
var row = map[parentName + "all"] || map[parentName];
var childRow;
var allRow;
var metadata;
var expandIconAttr;
var cellChildren = [];
var allCell;
var cell;
var attr;
var idx;
if (!row || row.hasChild) {
row = this._row();
} else {
row.hasChild = true;
}
if (member.measure) {
attr = { className: row.allCell ? "k-grid-footer" : "" };
row.children.push(element("td", attr, [ this._content(children[0], tuple) ]));
row.rowspan = childrenLength;
for (idx = 1; idx < childrenLength; idx++) {
this._row([ element("td", attr, [ this._content(children[idx], tuple) ]) ]);
}
return row;
}
map[tuplePath + member.name] = row;
path = kendo.stringify(buildPath(tuple, memberIdx));
metadata = this.metadata[path];
if (!metadata) {
this.metadata[path] = metadata = createMetadata(levelNum - 1, memberIdx);
}
this._indexes.push({
path: path,
tuple: tuple
});
if (member.hasChildren) {
if (metadata.expanded === false) {
childrenLength = 0;
metadata.children = 0;
}
expandIconAttr = { className: "k-icon " + (childrenLength ? STATE_EXPANDED : STATE_COLLAPSED) };
expandIconAttr[kendo.attr("path")] = path;
cellChildren.push(element("span", expandIconAttr));
}
cellChildren.push(this._content(member, tuple));
cell = element("td", { className: row.allCell && !childrenLength ? "k-grid-footer" : "" }, cellChildren);
cell.levelNum = levelNum;
row.children.push(cell);
row.colspan["dim" + memberIdx] = cell;
if (!this[rootName] || this[rootName] < levelNum) {
this[rootName] = levelNum;
}
if (childrenLength) {
row.allCell = false;
row.hasChild = false;
for (idx = 0; idx < childrenLength; idx++) {
childRow = this._buildRows(children[idx], memberIdx);
if (row !== childRow) {
row.rowspan += childRow.rowspan;
}
}
if (row.rowspan > 1) {
cell.attr.rowspan = row.rowspan;
}
metadata.children = row.rowspan;
allCell = element("td", { className: "k-grid-footer" }, [this._content(member, tuple)]);
allCell.levelNum = levelNum;
allRow = this._row([ allCell ]);
allRow.colspan["dim" + memberIdx] = allCell;
allRow.allCell = true;
map[tuplePath + member.name + "all"] = allRow;
if (nextMember) {
childRow = this._buildRows(tuple, memberIdx + 1);
allCell.attr.rowspan = childRow.rowspan;
}
row.rowspan += allRow.rowspan;
metadata.members = allRow.rowspan;
} else if (nextMember) {
row.hasChild = false;
this._buildRows(tuple, memberIdx + 1);
(allCell || cell).attr.rowspan = row.rowspan;
metadata.members = row.rowspan;
}
if (metadata.maxChildren < metadata.children) {
metadata.maxChildren = metadata.children;
}
if (metadata.maxMembers < metadata.members) {
metadata.maxMembers = metadata.members;
}
return row;
}
});
var ContentBuilder = Class.extend({
init: function() {
this.columnAxis = {};
this.rowAxis = {};
},
build: function(data, columnAxis, rowAxis) {
var index = columnAxis.indexes[0];
var metadata = columnAxis.metadata[index ? index.path : undefined];
this.columnAxis = columnAxis;
this.rowAxis = rowAxis;
this.data = data;
this.rowLength = metadata ? metadata.maxChildren + metadata.maxMembers : columnAxis.measures.length || 1;
if (!this.rowLength) {
this.rowLength = 1;
}
var tbody = this._tbody();
var colgroup = this._colGroup();
return [
element("table", null, [colgroup, tbody])
];
},
_colGroup: function() {
var length = this.columnAxis.measures.length || 1;
var children = [];
var idx = 0;
if (this.rows[0]) {
length = this.rows[0].children.length;
}
for (; idx < length; idx++) {
children.push(element("col", null));
}
return element("colgroup", null, children);
},
_tbody: function() {
this.rows = [];
if (this.data[0]) {
this.columnIndexes = this._indexes(this.columnAxis);
this.rowIndexes = this._indexes(this.rowAxis);
this._buildRows();
} else {
this.rows.push(element("tr", null, [ element("td", null, [ text("") ]) ]));
}
return element("tbody", null, this.rows);
},
_indexes: function(axisInfo) {
var result = [];
var axisInfoMember;
var indexes = axisInfo.indexes;
var metadata = axisInfo.metadata;
var measures = axisInfo.measures;
var measuresLength = measures.length || 1;
var current;
var dataIdx = 0;
var firstEmpty = 0;
var idx = 0;
var length = indexes.length;
var measureIdx;
var children;
var skipChildren;
if (!length) {
for (measureIdx = 0; measureIdx < measuresLength; measureIdx++) {
result[measureIdx] = {
index: measureIdx,
measure: measures[measureIdx],
tuple: null
};
}
return result;
}
for (; idx < length; idx++) {
axisInfoMember = indexes[idx];
current = metadata[axisInfoMember.path];
children = current.children + current.members;
skipChildren = 0;
if (children) {
children -= measuresLength;
}
if (current.expanded === false && current.children !== current.maxChildren) {
skipChildren = current.maxChildren;
}
if (current.parentMember && current.levelNum === 0) {
children = -1;
}
if (children > -1) {
for (measureIdx = 0; measureIdx < measuresLength; measureIdx++) {
result[children + firstEmpty + measureIdx] = {
children: children,
index: dataIdx,
measure: measures[measureIdx],
tuple: axisInfoMember.tuple
};
dataIdx += 1;
}
while(result[firstEmpty] !== undefined) {
firstEmpty += 1;
}
}
dataIdx += skipChildren;
}
return result;
},
_buildRows: function() {
var rowIndexes = this.rowIndexes;
var length = rowIndexes.length;
var idx = 0;
for (; idx < length; idx++) {
this.rows.push(this._buildRow(rowIndexes[idx]));
}
},
_buildRow: function(rowInfo) {
var startIdx = rowInfo.index * this.rowLength;
var columnIndexes = this.columnIndexes;
var length = columnIndexes.length;
var columnInfo;
var cells = [];
var idx = 0;
var cellContent;
var attr;
for (; idx < length; idx++) {
columnInfo = columnIndexes[idx];
attr = {};
if (columnInfo.children) {
attr.className = "k-alt";
}
cellContent = this.template({
columnTuple: columnInfo.tuple,
rowTuple: rowInfo.tuple,
measure: columnInfo.measure || rowInfo.measure,
dataItem: this.data[startIdx + columnInfo.index]
});
cells.push(element("td", attr, [ htmlNode(cellContent) ]));
}
attr = {};
if (rowInfo.children) {
attr.className = "k-grid-footer";
}
return element("tr", attr, cells);
}
});
ui.plugin(PivotGrid);
})(window.kendo.jQuery);
/*jshint eqnull: true */
(function($, undefined){
var kendo = window.kendo,
ui = kendo.ui,
data = kendo.data,
extend = $.extend,
template = kendo.template,
isArray = $.isArray,
Widget = ui.Widget,
HierarchicalDataSource = data.HierarchicalDataSource,
proxy = $.proxy,
keys = kendo.keys,
NS = ".kendoTreeView",
SELECT = "select",
CHECK = "check",
NAVIGATE = "navigate",
EXPAND = "expand",
CHANGE = "change",
ERROR = "error",
CHECKED = "checked",
INDETERMINATE = "indeterminate",
COLLAPSE = "collapse",
DRAGSTART = "dragstart",
DRAG = "drag",
DROP = "drop",
DRAGEND = "dragend",
DATABOUND = "dataBound",
CLICK = "click",
VISIBILITY = "visibility",
UNDEFINED = "undefined",
KSTATEHOVER = "k-state-hover",
KTREEVIEW = "k-treeview",
VISIBLE = ":visible",
NODE = ".k-item",
STRING = "string",
ARIASELECTED = "aria-selected",
ARIADISABLED = "aria-disabled",
TreeView,
subGroup, nodeContents, nodeIcon,
spriteRe,
bindings = {
text: "dataTextField",
url: "dataUrlField",
spriteCssClass: "dataSpriteCssClassField",
imageUrl: "dataImageUrlField"
},
isDomElement = function (o){
return (
typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
o && typeof o === "object" && o.nodeType === 1 && typeof o.nodeName === STRING
);
};
function contentChild(filter) {
return function(node) {
var result = node.children(".k-animation-container");
if (!result.length) {
result = node;
}
return result.children(filter);
};
}
function templateNoWith(code) {
return kendo.template(code, { useWithBlock: false });
}
subGroup = contentChild(".k-group");
nodeContents = contentChild(".k-group,.k-content");
nodeIcon = function(node) {
return node.children("div").children(".k-icon");
};
function checkboxes(node) {
return node.find("> div .k-checkbox [type=checkbox]");
}
function insertAction(indexOffset) {
return function (nodeData, referenceNode) {
referenceNode = referenceNode.closest(NODE);
var group = referenceNode.parent(),
parentNode;
if (group.parent().is("li")) {
parentNode = group.parent();
}
return this._dataSourceMove(nodeData, group, parentNode, function (dataSource, model) {
return this._insert(dataSource.data(), model, referenceNode.index() + indexOffset);
});
};
}
spriteRe = /k-sprite/;
function moveContents(node, container) {
var tmp;
while (node && node.nodeName.toLowerCase() != "ul") {
tmp = node;
node = node.nextSibling;
if (tmp.nodeType == 3) {
tmp.nodeValue = $.trim(tmp.nodeValue);
}
if (spriteRe.test(tmp.className)) {
container.insertBefore(tmp, container.firstChild);
} else {
container.appendChild(tmp);
}
}
}
function updateNodeHtml(node) {
var wrapper = node.children("div"),
group = node.children("ul"),
toggleButton = wrapper.children(".k-icon"),
checkbox = node.children(":checkbox"),
innerWrapper = wrapper.children(".k-in");
if (node.hasClass("k-treeview")) {
return;
}
if (!wrapper.length) {
wrapper = $("
").prependTo(node);
}
if (!toggleButton.length && group.length) {
toggleButton = $("" +
"#= data.renderItems(data) #" +
" "
),
itemContent: templateNoWith(
"# var imageUrl = " + fieldAccessor("imageUrl") + "(data.item); #" +
"# var spriteCssClass = " + fieldAccessor("spriteCssClass") + "(data.item); #" +
"# if (imageUrl) { #" +
"" +
"# if (item.hasChildren) { #" +
"" +
"#= data.treeview.checkboxes.template(data) #" +
" " +
"# } #" +
"# var tag = url ? 'a' : 'span'; #" +
"# var textAttr = url ? ' href=\\'' + url + '\\'' : ''; #" +
"<#=tag# class='#= r.textClass(item) #'#= textAttr #>" +
"#= r.itemContent(data) #" +
"" +
"
"
),
item: templateNoWith(
"# var item = data.item, r = data.r; #" +
"" +
"#= r.itemElement(data) #" +
" "
),
loading: templateNoWith(
"
#: data.messages.loading #"
),
retry: templateNoWith(
"#: data.messages.requestFailed # " +
"#: data.messages.retry # "
)
};
},
items: function() {
return this.element.find(".k-item div:first-child");
},
setDataSource: function(dataSource) {
var options = this.options;
options.dataSource = dataSource;
this._dataSource();
this.dataSource.fetch();
},
_bindDataSource: function() {
this._refreshHandler = proxy(this.refresh, this);
this._errorHandler = proxy(this._error, this);
this.dataSource.bind(CHANGE, this._refreshHandler);
this.dataSource.bind(ERROR, this._errorHandler);
},
_unbindDataSource: function() {
var dataSource = this.dataSource;
if (dataSource) {
dataSource.unbind(CHANGE, this._refreshHandler);
dataSource.unbind(ERROR, this._errorHandler);
}
},
_dataSource: function(silentRead) {
var that = this,
options = that.options,
dataSource = options.dataSource;
function recursiveRead(data) {
for (var i = 0; i < data.length; i++) {
data[i]._initChildren();
data[i].children.fetch();
recursiveRead(data[i].children.view());
}
}
dataSource = isArray(dataSource) ? { data: dataSource } : dataSource;
that._unbindDataSource();
if (!dataSource.fields) {
dataSource.fields = [
{ field: "text" },
{ field: "url" },
{ field: "spriteCssClass" },
{ field: "imageUrl" }
];
}
that.dataSource = dataSource = HierarchicalDataSource.create(dataSource);
if (silentRead) {
dataSource.fetch();
recursiveRead(dataSource.view());
}
that._bindDataSource();
},
events: [
DRAGSTART,
DRAG,
DROP,
DRAGEND,
DATABOUND,
EXPAND,
COLLAPSE,
SELECT,
CHANGE,
NAVIGATE,
CHECK
],
options: {
name: "TreeView",
dataSource: {},
animation: {
expand: {
effects: "expand:vertical",
duration: 200
}, collapse: {
duration: 100
}
},
messages: {
loading: "Loading...",
requestFailed: "Request failed.",
retry: "Retry"
},
dragAndDrop: false,
checkboxes: false,
autoBind: true,
loadOnDemand: true,
template: "",
dataTextField: null
},
_accessors: function() {
var that = this,
options = that.options,
i, field, textField,
element = that.element;
for (i in bindings) {
field = options[bindings[i]];
textField = element.attr(kendo.attr(i + "-field"));
if (!field && textField) {
field = textField;
}
if (!field) {
field = i;
}
if (!isArray(field)) {
field = [field];
}
options[bindings[i]] = field;
}
},
// generates accessor function for a given field name, honoring the data*Field arrays
_fieldAccessor: function(fieldName) {
var fieldBindings = this.options[bindings[fieldName]],
count = fieldBindings.length,
result = "(function(item) {";
if (count === 0) {
result += "return item['" + fieldName + "'];";
} else {
result += "var levels = [" +
$.map(fieldBindings, function(x) {
return "function(d){ return " + kendo.expr(x) + "}";
}).join(",") + "];";
result += "return levels[Math.min(item.level(), " + count + "-1)](item)";
}
result += "})";
return result;
},
setOptions: function(options) {
Widget.fn.setOptions.call(this, options);
this._animation();
this._dragging();
this._templates();
},
_trigger: function (eventName, node) {
return this.trigger(eventName, {
node: node.closest(NODE)[0]
});
},
_setChecked: function(datasource, value) {
if (!datasource || !$.isFunction(datasource.view)) {
return;
}
for (var i = 0, nodes = datasource.view(); i < nodes.length; i++) {
nodes[i][CHECKED] = value;
if (nodes[i].children) {
this._setChecked(nodes[i].children, value);
}
}
},
_setIndeterminate: function(node) {
var group = subGroup(node),
siblings, length,
all = true,
i;
if (!group.length) {
return;
}
siblings = checkboxes(group.children());
length = siblings.length;
if (!length) {
return;
} else if (length > 1) {
for (i = 1; i < length; i++) {
if (siblings[i].checked != siblings[i-1].checked ||
siblings[i].indeterminate || siblings[i-1].indeterminate) {
all = false;
break;
}
}
} else {
all = !siblings[0].indeterminate;
}
return checkboxes(node)
.data(INDETERMINATE, !all)
.prop(INDETERMINATE, !all)
.prop(CHECKED, all && siblings[0].checked);
},
updateIndeterminate: function(node) {
// top-down update of inital indeterminate state for all nodes
node = node || this.wrapper;
var subnodes = subGroup(node).children();
var i;
var checkbox;
if (subnodes.length) {
for (i = 0; i < subnodes.length; i++) {
this.updateIndeterminate(subnodes.eq(i));
}
checkbox = this._setIndeterminate(node);
if (checkbox && checkbox.prop(CHECKED)) {
this.dataItem(node).checked = true;
}
}
},
_bubbleIndeterminate: function(node) {
// bottom-up setting of indeterminate state of parent nodes
if (!node.length) {
return;
}
var parentNode = this.parent(node),
checkbox;
if (parentNode.length) {
this._setIndeterminate(parentNode);
checkbox = parentNode.children("div").find(".k-checkbox :checkbox");
if (checkbox.prop(INDETERMINATE) === false) {
this.dataItem(parentNode).set(CHECKED, checkbox.prop(CHECKED));
} else {
this.dataItem(parentNode).checked = false;
}
this._bubbleIndeterminate(parentNode);
}
},
_checkboxChange: function(e) {
var checkbox = $(e.target);
var isChecked = checkbox.prop(CHECKED);
var node = checkbox.closest(NODE);
this.dataItem(node).set(CHECKED, isChecked);
this._trigger(CHECK, node);
},
_toggleButtonClick: function (e) {
this.toggle($(e.target).closest(NODE));
},
_mousedown: function(e) {
var node = $(e.currentTarget).closest(NODE);
this._clickTarget = node;
this.current(node);
},
_focusable: function (node) {
return node && node.length && node.is(":visible") && !node.find(".k-in:first").hasClass("k-state-disabled");
},
_focus: function() {
var current = this.select(),
clickTarget = this._clickTarget;
// suppress initial focus state on touch devices (until keyboard is used)
if (kendo.support.touch) {
return;
}
if (clickTarget && clickTarget.length) {
current = clickTarget;
}
if (!this._focusable(current)) {
current = this.current();
}
if (!this._focusable(current)) {
current = this._nextVisible($());
}
this.current(current);
},
focus: function() {
var wrapper = this.wrapper,
scrollContainer = wrapper[0],
containers = [],
offsets = [],
documentElement = document.documentElement,
i;
do {
scrollContainer = scrollContainer.parentNode;
if (scrollContainer.scrollHeight > scrollContainer.clientHeight) {
containers.push(scrollContainer);
offsets.push(scrollContainer.scrollTop);
}
} while (scrollContainer != documentElement);
wrapper.focus();
for (i = 0; i < containers.length; i++) {
containers[i].scrollTop = offsets[i];
}
},
_blur: function() {
this.current().find(".k-in:first").removeClass("k-state-focused");
},
_enabled: function(node) {
return !node.children("div").children(".k-in").hasClass("k-state-disabled");
},
parent: function(node) {
var wrapperRe = /\bk-treeview\b/,
itemRe = /\bk-item\b/,
result,
skipSelf;
if (typeof node == STRING) {
node = this.element.find(node);
}
if (!isDomElement(node)) {
node = node[0];
}
skipSelf = itemRe.test(node.className);
do {
node = node.parentNode;
if (itemRe.test(node.className)) {
if (skipSelf) {
result = node;
} else {
skipSelf = true;
}
}
} while (!wrapperRe.test(node.className) && !result);
return $(result);
},
_nextVisible: function(node) {
var that = this,
expanded = that._expanded(node),
result;
function nextParent(node) {
while (node.length && !node.next().length) {
node = that.parent(node);
}
if (node.next().length) {
return node.next();
} else {
return node;
}
}
if (!node.length || !node.is(":visible")) {
result = that.root.children().eq(0);
} else if (expanded) {
result = subGroup(node).children().first();
// expanded node with no children
if (!result.length) {
result = nextParent(node);
}
} else {
result = nextParent(node);
}
if (!that._enabled(result)) {
result = that._nextVisible(result);
}
return result;
},
_previousVisible: function(node) {
var that = this,
lastChild,
result;
if (!node.length || node.prev().length) {
if (node.length) {
result = node.prev();
} else {
result = that.root.children().last();
}
while (that._expanded(result)) {
lastChild = subGroup(result).children().last();
if (!lastChild.length) {
break;
}
result = lastChild;
}
} else {
result = that.parent(node) || node;
}
if (!that._enabled(result)) {
result = that._previousVisible(result);
}
return result;
},
_keydown: function(e) {
var that = this,
key = e.keyCode,
target,
focused = that.current(),
expanded = that._expanded(focused),
checkbox = focused.find(".k-checkbox:first :checkbox"),
rtl = kendo.support.isRtl(that.element);
if (e.target != e.currentTarget) {
return;
}
if ((!rtl && key == keys.RIGHT) || (rtl && key == keys.LEFT)) {
if (expanded) {
target = that._nextVisible(focused);
} else {
that.expand(focused);
}
} else if ((!rtl && key == keys.LEFT) || (rtl && key == keys.RIGHT)) {
if (expanded) {
that.collapse(focused);
} else {
target = that.parent(focused);
if (!that._enabled(target)) {
target = undefined;
}
}
} else if (key == keys.DOWN) {
target = that._nextVisible(focused);
} else if (key == keys.UP) {
target = that._previousVisible(focused);
} else if (key == keys.HOME) {
target = that._nextVisible($());
} else if (key == keys.END) {
target = that._previousVisible($());
} else if (key == keys.ENTER) {
if (!focused.find(".k-in:first").hasClass("k-state-selected")) {
if (!that._trigger(SELECT, focused)) {
that.select(focused);
}
}
} else if (key == keys.SPACEBAR && checkbox.length) {
checkbox.prop(CHECKED, !checkbox.prop(CHECKED))
.data(INDETERMINATE, false)
.prop(INDETERMINATE, false);
that._checkboxChange({ target: checkbox });
target = focused;
}
if (target) {
e.preventDefault();
if (focused[0] != target[0]) {
that._trigger(NAVIGATE, target);
that.current(target);
}
}
},
_click: function (e) {
var that = this,
node = $(e.currentTarget),
contents = nodeContents(node.closest(NODE)),
href = node.attr("href"),
shouldNavigate;
if (href) {
shouldNavigate = href == "#" || href.indexOf("#" + this.element.id + "-") >= 0;
} else {
shouldNavigate = contents.length && !contents.children().length;
}
if (shouldNavigate) {
e.preventDefault();
}
if (!node.hasClass(".k-state-selected") && !that._trigger(SELECT, node)) {
that.select(node);
}
},
_wrapper: function() {
var that = this,
element = that.element,
wrapper, root,
wrapperClasses = "k-widget k-treeview";
if (element.is("ul")) {
wrapper = element.wrap('
').parent();
root = element;
} else {
wrapper = element;
root = wrapper.children("ul").eq(0);
}
that.wrapper = wrapper.addClass(wrapperClasses);
that.root = root;
},
_group: function(item) {
var that = this,
firstLevel = item.hasClass(KTREEVIEW),
group = {
firstLevel: firstLevel,
expanded: firstLevel || that._expanded(item)
},
groupElement = item.children("ul");
groupElement
.addClass(that.templates.groupCssClass(group))
.css("display", group.expanded ? "" : "none");
that._nodes(groupElement, group);
},
_nodes: function(groupElement, groupData) {
var that = this,
nodes = groupElement.children("li"),
nodeData;
groupData = extend({ length: nodes.length }, groupData);
nodes.each(function(i, node) {
node = $(node);
nodeData = { index: i, expanded: that._expanded(node) };
updateNodeHtml(node);
that._updateNodeClasses(node, groupData, nodeData);
// iterate over child nodes
that._group(node);
});
},
_checkboxes: function() {
var options = this.options;
var checkboxes = options.checkboxes;
var defaultTemplate;
if (checkboxes) {
defaultTemplate = "
")
.css(VISIBILITY, "hidden")
.appendTo(treeview.element);
},
drag: function (e) {
var that = this,
treeview = that.treeview,
sourceNode = that.sourceNode,
dropTarget = that.dropTarget = $(kendo.eventTarget(e)),
statusClass, closestTree = dropTarget.closest(".k-treeview"),
hoveredItem, hoveredItemPos, itemHeight, itemTop, itemContent, delta,
insertOnTop, insertOnBottom, addChild;
if (!closestTree.length) {
// dragging node outside of treeview
statusClass = "k-denied";
that._removeTouchHover();
} else if ($.contains(sourceNode[0], dropTarget[0])) {
// dragging node within itself
statusClass = "k-denied";
} else {
// moving or reordering node
statusClass = "k-insert-middle";
hoveredItem = dropTarget.closest(".k-top,.k-mid,.k-bot");
if (hoveredItem.length) {
itemHeight = hoveredItem.outerHeight();
itemTop = kendo.getOffset(hoveredItem).top;
itemContent = dropTarget.closest(".k-in");
delta = itemHeight / (itemContent.length > 0 ? 4 : 2);
insertOnTop = e.y.location < (itemTop + delta);
insertOnBottom = (itemTop + itemHeight - delta) < e.y.location;
that._removeTouchHover();
addChild = itemContent.length && !insertOnTop && !insertOnBottom;
that.hovered = addChild ? closestTree : false;
that.dropHint.css(VISIBILITY, addChild ? "hidden" : "visible");
itemContent.toggleClass(KSTATEHOVER, addChild);
if (addChild) {
statusClass = "k-add";
} else {
hoveredItemPos = hoveredItem.position();
hoveredItemPos.top += insertOnTop ? 0 : itemHeight;
that.dropHint
.css(hoveredItemPos)
[insertOnTop ? "prependTo" : "appendTo"](dropTarget.closest(NODE).children("div:first"));
if (insertOnTop && hoveredItem.hasClass("k-top")) {
statusClass = "k-insert-top";
}
if (insertOnBottom && hoveredItem.hasClass("k-bot")) {
statusClass = "k-insert-bottom";
}
}
} else if (dropTarget[0] != that.dropHint[0]) {
if (closestTree[0] != treeview.element[0]) {
// moving node to different treeview without children
statusClass = "k-add";
} else {
statusClass = "k-denied";
}
}
}
treeview.trigger(DRAG, {
sourceNode: sourceNode[0],
dropTarget: dropTarget[0],
pageY: e.y.location,
pageX: e.x.location,
statusClass: statusClass.substring(2),
setStatusClass: function (value) {
statusClass = value;
}
});
if (statusClass.indexOf("k-insert") !== 0) {
that.dropHint.css(VISIBILITY, "hidden");
}
that._hintStatus(statusClass);
},
dragcancel: function() {
this.dropHint.remove();
},
dragend: function () {
var that = this,
treeview = that.treeview,
dropPosition = "over",
sourceNode = that.sourceNode,
destinationNode,
dropHint = that.dropHint,
dropTarget = that.dropTarget,
e, dropPrevented;
if (dropHint.css(VISIBILITY) == "visible") {
dropPosition = dropHint.prevAll(".k-in").length > 0 ? "after" : "before";
destinationNode = dropHint.closest(NODE);
} else if (dropTarget) {
destinationNode = dropTarget.closest(".k-treeview .k-item");
// moving node to root element
if (!destinationNode.length) {
destinationNode = dropTarget.closest(".k-treeview");
}
}
e = {
sourceNode: sourceNode[0],
destinationNode: destinationNode[0],
valid: that._hintStatus() != "k-denied",
setValid: function(newValid) {
this.valid = newValid;
},
dropTarget: dropTarget[0],
dropPosition: dropPosition
};
dropPrevented = treeview.trigger(DROP, e);
dropHint.remove();
that._removeTouchHover();
if (!e.valid || dropPrevented) {
that._draggable.dropped = e.valid;
return;
}
that._draggable.dropped = true;
function triggerDragEnd(sourceNode) {
treeview.updateIndeterminate();
treeview.trigger(DRAGEND, {
sourceNode: sourceNode && sourceNode[0],
destinationNode: destinationNode[0],
dropPosition: dropPosition
});
}
// perform reorder / move
// different handling is necessary because append might be async in remote bound tree
if (dropPosition == "over") {
treeview.append(sourceNode, destinationNode, triggerDragEnd);
} else {
if (dropPosition == "before") {
sourceNode = treeview.insertBefore(sourceNode, destinationNode);
} else if (dropPosition == "after") {
sourceNode = treeview.insertAfter(sourceNode, destinationNode);
}
triggerDragEnd(sourceNode);
}
},
destroy: function() {
this._draggable.destroy();
}
};
ui.plugin(TreeView);
})(window.kendo.jQuery);
/*jshint eqnull: true*/
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.ui,
MENU = "kendoContextMenu",
proxy = $.proxy,
NS = ".kendoPivotFieldMenu",
Widget = ui.Widget;
var PivotFieldMenu = Widget.extend({
init: function(element, options) {
Widget.fn.init.call(this, element, options);
this._dataSource();
this._layout();
kendo.notify(this);
},
events: [],
options: {
name: "PivotFieldMenu",
filter: null,
messages: {
info: "Show items with value that:",
filterFields: "Fields Filter",
filter: "Filter",
include: "Include Fields...",
title: "Fields to include",
clear: "Clear",
ok: "OK",
cancel: "Cancel",
operators: {
contains: "Contains",
doesnotcontain: "Does not contain",
startswith: "Starts with",
endswith: "Ends with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
_layout: function() {
var options = this.options;
this.wrapper = $(kendo.template(MENUTEMPLATE)({
ns: kendo.ns,
messages: options.messages
}));
this.menu = this.wrapper[MENU]({
filter: options.filter,
target: this.element,
orientation: "vertical",
showOn: "click",
closeOnClick: false,
open: proxy(this._menuOpen, this),
select: proxy(this._select, this),
copyAnchorStyles: false
}).data(MENU);
this._createWindow();
this._initFilterForm();
},
_initFilterForm: function() {
var filterForm = this.menu.element.find(".k-filter-item");
this._filterOperator = new kendo.ui.DropDownList(filterForm.find("select"));
this._filterValue = filterForm.find(".k-textbox");
filterForm
.on("click" + NS, ".k-button-filter", proxy(this._filter, this))
.on("click" + NS, ".k-button-clear", proxy(this._reset, this));
},
_setFilterForm: function(expression) {
var operator = "";
var value = "";
if (expression) {
operator = expression.operator;
value = expression.value;
}
this._filterOperator.value(operator);
this._filterValue.val(value);
},
_clearFilters: function(member) {
var filter = this.dataSource.filter() || {};
var expressions;
var idx = 0;
var length;
filter.filters = filter.filters || [];
expressions = findFilters(filter, member);
for (length = expressions.length; idx < length; idx++) {
filter.filters.splice(filter.filters.indexOf(expressions[idx]), 1);
}
return filter;
},
_filter: function() {
var that = this;
var value = that._filterValue.val();
if (!value) {
that.menu.close();
return;
}
var expression = {
field: that.currentMember,
operator: that._filterOperator.value(),
value: value
};
var filter = that._clearFilters(that.currentMember);
filter.filters.push(expression);
that.dataSource.filter(filter);
that.menu.close();
},
_reset: function() {
var that = this;
var filter = that._clearFilters(that.currentMember);
if (!filter.filters[0]) {
filter = {};
}
that.dataSource.filter(filter);
that._setFilterForm(null);
that.menu.close();
},
setDataSource: function(dataSource) {
this.options.dataSource = dataSource;
this._dataSource();
},
_dataSource: function() {
this.dataSource = kendo.data.PivotDataSource.create(this.options.dataSource);
},
_createWindow: function() {
var messages = this.options.messages;
this.includeWindow = $(kendo.template(WINDOWTEMPLATE)({
messages: messages
}))
.on("click" + NS, ".k-button-ok", proxy(this._applyIncludes, this))
.on("click" + NS, ".k-button-cancel", proxy(this._closeWindow, this));
this.includeWindow = new ui.Window(this.includeWindow, {
title: messages.title,
visible: false,
resizable: false,
open: proxy(this._windowOpen, this)
});
},
_applyIncludes: function(e) {
var checkedNodes = [];
var resultExpression;
var view = this.treeView.dataSource.view();
var rootChecked = view[0].checked;
var filter = this.dataSource.filter();
var existingExpression = findFilters(filter, this.currentMember, "in")[0];
checkedNodeIds(view, checkedNodes);
if (existingExpression) {
if (rootChecked) {
filter.filters.splice(filter.filters.indexOf(existingExpression), 1);
if (!filter.filters.length) {
filter = {};
}
} else {
existingExpression.value = checkedNodes.join(",");
}
resultExpression = filter;
}
if (checkedNodes.length) {
if (!resultExpression && !rootChecked) {
resultExpression = {
field: this.currentMember,
operator: "in",
value: checkedNodes.join(",")
};
if (filter) {
filter.filters.push(resultExpression);
resultExpression = filter;
}
}
}
if (resultExpression) {
this.dataSource.filter(resultExpression);
}
this._closeWindow(e);
},
_closeWindow: function(e) {
e.preventDefault();
this.includeWindow.close();
},
_treeViewDataSource: function() {
var that = this;
return kendo.data.HierarchicalDataSource.create({
schema: {
model: {
id: "uniqueName",
hasChildren: function(item) {
return parseInt(item.childrenCardinality, 10) > 0;
}
}
},
transport: {
read: function(options) {
var restrictions = {};
var node = that.treeView.dataSource.get(options.data.uniqueName);
var name = options.data.uniqueName;
if (!name) {
restrictions.levelUniqueName = that.currentMember + ".[(ALL)]";
} else {
restrictions.memberUniqueName = node.uniqueName.replace(/\&/g, "&");
restrictions.treeOp = 1;
}
that.dataSource
.schemaMembers(restrictions)
.done(function (data) {
checkNodes(that.dataSource.filter(), that.currentMember, data);
options.success(data);
})
.fail(options.error);
}
}
});
},
_createTreeView: function(element) {
var that = this;
that.treeView = new ui.TreeView(element, {
autoBind: false,
dataSource: that._treeViewDataSource(),
dataTextField: "name",
checkboxes: {
checkChildren: true
},
dataBound: function() {
ui.progress(that.includeWindow.element, false);
}
});
},
_menuOpen: function(e) {
if (!e.event) {
return;
}
var attr = kendo.attr("name");
var expression;
this.currentMember = $(e.event.target).closest("[" + attr + "]").attr(attr);
this._setFilterForm(findFilters(this.dataSource.filter(), this.currentMember)[0]);
},
_select: function(e) {
var item = $(e.item);
$(".k-pivot-filter-window").not(this.includeWindow.element).kendoWindow("close");
if (item.hasClass("k-include-item")) {
this.includeWindow.center().open();
}
},
_windowOpen: function() {
if (!this.treeView) {
this._createTreeView(this.includeWindow.element.find(".k-treeview"));
}
ui.progress(this.includeWindow.element, true);
this.treeView.dataSource.read();
},
destroy: function() {
Widget.fn.destroy.call(this);
if (this.menu) {
this.menu.destroy();
this.menu = null;
}
if (this.reeeView) {
this.treeView.destroy();
this.treeView = null;
}
if (this.includeWindow) {
this.includeWindow.destroy();
this.includeWindow = null;
}
this.wrapper = null;
this.element = null;
}
});
function findFilters(filter, member, operator) {
if (!filter) {
return [];
}
filter = filter.filters;
var idx = 0;
var result = [];
var length = filter.length;
var filterOperator;
for ( ; idx < length; idx++) {
filterOperator = filter[idx].operator;
if (((!operator && filterOperator !== "in") || (filterOperator === operator)) && filter[idx].field === member) {
result.push(filter[idx]);
}
}
return result;
}
function checkNodes(filter, member, nodes) {
var values, idx = 0, length = nodes.length;
filter = findFilters(filter, member, "in")[0];
if (!filter) {
for (; idx < length; idx++) {
nodes[idx].checked = true;
}
} else {
values = filter.value.split(",");
for (; idx < length; idx++) {
nodes[idx].checked = $.inArray(nodes[idx].uniqueName, values) >= 0;
}
}
}
function checkedNodeIds(nodes, checkedNodes) {
var idx, length = nodes.length;
for (idx = 0; idx < length; idx++) {
if (nodes[idx].checked && nodes[idx].level() !== 0) {
checkedNodes.push(nodes[idx].uniqueName);
}
if (nodes[idx].hasChildren) {
checkedNodeIds(nodes[idx].children.view(), checkedNodes);
}
}
}
var LABELMENUTEMPLATE =
'' +
'' +
'
';
var MENUTEMPLATE = '';
var WINDOWTEMPLATE = ' ');
}
allDayTableRows.push(td.join(""));
}
return $(
''
);
}
function times(rowLevels, rowCount) {
var rows = new Array(rowCount).join().split(",");
var rowHeaderRows = [];
var rowIndex;
for (var rowLevelIndex = 0; rowLevelIndex < rowLevels.length; rowLevelIndex++) {
var level = rowLevels[rowLevelIndex];
var rowspan = rowCount / level.length;
var className;
for (rowIndex = 0; rowIndex < level.length; rowIndex++) {
className = level[rowIndex].className || "";
if (level[rowIndex].allDay) {
className = "k-scheduler-times-all-day";
}
rows[rowspan * rowIndex] += '' + level[rowIndex].text + " ";
}
}
for (rowIndex = 0; rowIndex < rowCount; rowIndex++) {
rowHeaderRows.push(rows[rowIndex]);
}
if (rowCount < 1) {
return $();
}
return $('' + table(rowHeaderRows) + '
');
}
function content() {
return $(
''
);
}
var HINT = '';
kendo.ui.scheduler = {};
var ResourceView = kendo.Class.extend({
init: function(index) {
this._index = index;
this._timeSlotCollections = [];
this._daySlotCollections = [];
},
addTimeSlotCollection: function(startDate, endDate) {
return this._addCollection(startDate, endDate, this._timeSlotCollections);
},
addDaySlotCollection: function(startDate, endDate) {
return this._addCollection(startDate, endDate, this._daySlotCollections);
},
_addCollection: function(startDate, endDate, collections) {
var collection = new SlotCollection(startDate, endDate, this._index, collections.length);
collections.push(collection);
return collection;
},
timeSlotCollectionCount: function() {
return this._timeSlotCollections.length;
},
daySlotCollectionCount: function() {
return this._daySlotCollections.length;
},
daySlotByPosition: function(x, y) {
return this._slotByPosition(x, y, this._daySlotCollections);
},
timeSlotByPosition: function(x, y) {
return this._slotByPosition(x, y, this._timeSlotCollections);
},
_slotByPosition: function(x, y, collections) {
for (var collectionIndex = 0; collectionIndex < collections.length; collectionIndex++) {
var collection = collections[collectionIndex];
for (var slotIndex = 0; slotIndex < collection.count(); slotIndex++) {
var slot = collection.at(slotIndex);
if (x >= slot.offsetLeft && x < slot.offsetLeft + slot.clientWidth &&
y >= slot.offsetTop && y <= slot.offsetTop + slot.clientHeight) {
return slot;
}
}
}
},
refresh: function() {
var collectionIndex;
for (collectionIndex = 0; collectionIndex < this._daySlotCollections.length; collectionIndex++) {
this._daySlotCollections[collectionIndex].refresh();
}
for (collectionIndex = 0; collectionIndex < this._timeSlotCollections.length; collectionIndex++) {
this._timeSlotCollections[collectionIndex].refresh();
}
},
timeSlotRanges: function(startTime, endTime) {
var collections = this._timeSlotCollections;
var start = this._startSlot(startTime, collections);
if (!start.inRange && startTime >= start.slot.end) {
start = null;
}
var end = start;
if (startTime < endTime) {
end = this._endSlot(endTime, collections);
}
if (end && !end.inRange && endTime <= end.slot.start) {
end = null;
}
if (start === null && end === null) {
return [];
}
if (start === null) {
start = {
inRange: true,
slot: collections[end.slot.collectionIndex].first()
};
}
if (end === null) {
end = {
inRange: true,
slot: collections[start.slot.collectionIndex].last()
};
}
return this._continuousRange(TimeSlotRange, collections, start, end);
},
daySlotRanges: function(startTime, endTime, isAllDay) {
var collections = this._daySlotCollections;
var start = this._startSlot(startTime, collections, isAllDay);
if (!start.inRange && startTime >= start.slot.end) {
start = null;
}
var end = start;
if (startTime < endTime) {
end = this._endSlot(endTime, collections, isAllDay);
}
if (end && !end.inRange && endTime <= end.slot.start) {
end = null;
}
if (start === null && end === null) {
return [];
}
if (start === null) {
do {
startTime += kendo.date.MS_PER_DAY;
start = this._startSlot(startTime, collections, isAllDay);
} while (!start.inRange && startTime >= start.slot.end);
}
if (end === null) {
do {
endTime -= kendo.date.MS_PER_DAY;
end = this._endSlot(endTime, collections, isAllDay);
} while (!end.inRange && endTime <= end.slot.start);
}
return this._continuousRange(DaySlotRange, collections, start, end);
},
_continuousRange: function(range, collections, start, end) {
var startSlot = start.slot;
var endSlot = end.slot;
var startIndex = startSlot.collectionIndex;
var endIndex = endSlot.collectionIndex;
var ranges = [];
for (var collectionIndex = startIndex; collectionIndex <= endIndex; collectionIndex++) {
var collection = collections[collectionIndex];
var first = collection.first();
var last = collection.last();
var head = false;
var tail = false;
if (collectionIndex == startIndex) {
tail = !start.inRange;
}
if (collectionIndex == endIndex) {
head = !end.inRange;
}
if (first.start < startSlot.start) {
first = startSlot;
}
if (last.start > endSlot.start) {
last = endSlot;
}
if (startIndex < endIndex) {
if (collectionIndex == startIndex) {
head = true;
} else if (collectionIndex == endIndex) {
tail = true;
} else {
head = tail = true;
}
}
ranges.push(new range({
start: first,
end: last,
collection: collection,
head: head,
tail: tail
}));
}
return ranges;
},
slotRanges: function(event, isDay) {
var startTime = event.startTime || kendo.date.toUtcTime(event.start);
var endTime = event.endTime || kendo.date.toUtcTime(event.end);
if (isDay === undefined) {
isDay = event.isMultiDay();
}
if (isDay) {
return this.daySlotRanges(startTime, endTime, event.isAllDay);
}
return this.timeSlotRanges(startTime, endTime);
},
ranges: function(startTime, endTime, isDay, isAllDay) {
if (typeof startTime != "number") {
startTime = kendo.date.toUtcTime(startTime);
}
if (typeof endTime != "number") {
endTime = kendo.date.toUtcTime(endTime);
}
if (isDay) {
return this.daySlotRanges(startTime, endTime, isAllDay);
}
return this.timeSlotRanges(startTime, endTime);
},
_startCollection: function(date, collections) {
for (var collectionIndex = 0; collectionIndex < collections.length; collectionIndex++) {
var collection = collections[collectionIndex];
if (collection.startInRange(date)) {
return collection;
}
}
return null;
},
_endCollection: function(date, collections, isAllDay) {
for (var collectionIndex = 0; collectionIndex < collections.length; collectionIndex++) {
var collection = collections[collectionIndex];
if (collection.endInRange(date, isAllDay)) {
return collection;
}
}
return null;
},
_getCollections: function(isDay) {
return isDay ? this._daySlotCollections : this._timeSlotCollections;
},
continuousSlot: function(slot, reverse) {
var pad = reverse ? -1 : 1;
var collections = this._getCollections(slot.isDaySlot);
var collection = collections[slot.collectionIndex + pad];
return collection ? collection[reverse ? "last" : "first"]() : undefined;
},
firstSlot: function() {
var collections = this._getCollections(this.daySlotCollectionCount());
return collections[0].first();
},
lastSlot: function() {
var collections = this._getCollections(this.daySlotCollectionCount());
return collections[collections.length - 1].last();
},
upSlot: function(slot, keepCollection) {
var that = this;
var moveToDaySlot = function(isDaySlot, collectionIndex, index) {
var isFirstCell = index === 0;
if (!keepCollection && !isDaySlot && isFirstCell && that.daySlotCollectionCount()) {
return that._daySlotCollections[0].at(collectionIndex);
}
};
if (!this.timeSlotCollectionCount()) {
keepCollection = true;
}
return this._verticalSlot(slot, -1, moveToDaySlot);
},
downSlot: function(slot, keepCollection) {
var that = this;
var moveToTimeSlot = function(isDaySlot, collectionIndex, index) {
if (!keepCollection && isDaySlot && that.timeSlotCollectionCount()) {
return that._timeSlotCollections[index].at(0);
}
};
if (!this.timeSlotCollectionCount()) {
keepCollection = true;
}
return this._verticalSlot(slot, 1, moveToTimeSlot);
},
leftSlot: function(slot) {
return this._horizontalSlot(slot, -1);
},
rightSlot: function(slot) {
return this._horizontalSlot(slot, 1);
},
_horizontalSlot: function(slot, step) {
var index = slot.index;
var isDaySlot = slot.isDaySlot;
var collectionIndex = slot.collectionIndex;
var collections = this._getCollections(isDaySlot);
if (isDaySlot) {
index += step;
} else {
collectionIndex += step;
}
var collection = collections[collectionIndex];
return collection ? collection.at(index) : undefined;
},
_verticalSlot: function(slot, step, swapCollection) {
var index = slot.index;
var isDaySlot = slot.isDaySlot;
var collectionIndex = slot.collectionIndex;
var collections = this._getCollections(isDaySlot);
slot = swapCollection(isDaySlot, collectionIndex, index);
if (slot) {
return slot;
}
if (isDaySlot) {
collectionIndex += step;
} else {
index += step;
}
var collection = collections[collectionIndex];
return collection ? collection.at(index) : undefined;
},
_collection: function(index, multiday) {
var collections = multiday? this._daySlotCollections : this._timeSlotCollections;
return collections[index];
},
_startSlot: function(time, collections, isAllDay) {
var collection = this._startCollection(time, collections);
var inRange = true;
if (!collection) {
collection = collections[0];
inRange = false;
}
var slot = collection.slotByStartDate(time, isAllDay);
if (!slot) {
slot = collection.first();
inRange = false;
}
return {
slot: slot,
inRange: inRange
};
},
_endSlot: function(time, collections, isAllDay) {
var collection = this._endCollection(time, collections, isAllDay);
var inRange = true;
if (!collection) {
collection = collections[collections.length - 1];
inRange = false;
}
var slot = collection.slotByEndDate(time, isAllDay);
if (!slot) {
slot = collection.last();
inRange = false;
}
return {
slot: slot,
inRange: inRange
};
},
getSlotCollection: function(index, isDay) {
return this[isDay ? "getDaySlotCollection" : "getTimeSlotCollection"](index);
},
getTimeSlotCollection: function(index) {
return this._timeSlotCollections[index];
},
getDaySlotCollection: function(index) {
return this._daySlotCollections[index];
}
});
var SlotRange = kendo.Class.extend({
init: function(options) {
$.extend(this, options);
},
innerHeight: function() {
var collection = this.collection;
var startIndex = this.start.index;
var endIndex = this.end.index;
var result = 0;
for (var slotIndex = startIndex; slotIndex <= endIndex; slotIndex++) {
result += collection.at(slotIndex).offsetHeight;
}
return result;
},
events: function () {
return this.collection.events();
},
addEvent: function(event) {
this.events().push(event);
},
startSlot: function() {
if (this.start.offsetLeft > this.end.offsetLeft) {
return this.end;
}
return this.start;
},
endSlot: function() {
if (this.start.offsetLeft > this.end.offsetLeft) {
return this.start;
}
return this.end;
}
});
var TimeSlotRange = SlotRange.extend({
innerHeight: function() {
var collection = this.collection;
var startIndex = this.start.index;
var endIndex = this.end.index;
var result = 0;
for (var slotIndex = startIndex; slotIndex <= endIndex; slotIndex++) {
result += collection.at(slotIndex).offsetHeight;
}
return result;
},
outerRect: function(start, end, snap) {
return this._rect("offset", start, end, snap);
},
_rect: function(property, start, end, snap) {
var top;
var bottom;
var startSlot = this.start;
var endSlot = this.end;
if (typeof start != "number") {
start = kendo.date.toUtcTime(start);
}
if (typeof end != "number") {
end = kendo.date.toUtcTime(end);
}
if (snap) {
top = startSlot.offsetTop;
bottom = endSlot.offsetTop + endSlot[property + "Height"];
} else {
var startOffset = start - startSlot.start;
if (startOffset < 0) {
startOffset = 0;
}
var startSlotDuration = startSlot.end - startSlot.start;
top = startSlot.offsetTop + startSlot[property + "Height"] * startOffset / startSlotDuration;
var endOffset = endSlot.end - end;
if (endOffset < 0) {
endOffset = 0;
}
var endSlotDuration = endSlot.end - endSlot.start;
bottom = endSlot.offsetTop + endSlot[property + "Height"] - endSlot[property + "Height"] * endOffset / endSlotDuration;
}
return {
top: top,
bottom: bottom
};
},
innerRect: function(start, end, snap) {
return this._rect("client", start, end, snap);
}
});
var DaySlotRange = SlotRange.extend({
innerWidth: function() {
var collection = this.collection;
var startIndex = this.start.index;
var endIndex = this.end.index;
var result = 0;
var width = startIndex !== endIndex ? "offsetWidth" : "clientWidth";
for (var slotIndex = startIndex; slotIndex <= endIndex; slotIndex++) {
result += collection.at(slotIndex)[width];
}
return result;
}
});
var SlotCollection = kendo.Class.extend({
init: function(startDate, endDate, groupIndex, collectionIndex) {
this._slots = [];
this._events = [];
this._start = kendo.date.toUtcTime(startDate);
this._end = kendo.date.toUtcTime(endDate);
this._groupIndex = groupIndex;
this._collectionIndex = collectionIndex;
},
refresh: function() {
for (var slotIndex = 0; slotIndex < this._slots.length; slotIndex++) {
this._slots[slotIndex].refresh();
}
},
startInRange: function(date) {
return this._start <= date && date < this._end;
},
endInRange: function(date, isAllDay) {
var end = isAllDay ? date < this._end : date <= this._end;
return this._start <= date && end;
},
slotByStartDate: function(date) {
var time = date;
if (typeof time != "number") {
time = kendo.date.toUtcTime(date);
}
for (var slotIndex = 0; slotIndex < this._slots.length; slotIndex++) {
var slot = this._slots[slotIndex];
if (slot.startInRange(time)) {
return slot;
}
}
return null;
},
slotByEndDate: function(date, allday) {
var time = date;
if (typeof time != "number") {
time = kendo.date.toUtcTime(date);
}
if (allday) {
return this.slotByStartDate(date, false);
}
for (var slotIndex = 0; slotIndex < this._slots.length; slotIndex++) {
var slot = this._slots[slotIndex];
if (slot.endInRange(time)) {
return slot;
}
}
return null;
},
count: function() {
return this._slots.length;
},
events: function() {
return this._events;
},
addTimeSlot: function(element, start, end) {
var slot = new TimeSlot(element, start, end, this._groupIndex, this._collectionIndex, this._slots.length);
this._slots.push(slot);
},
addDaySlot: function(element, start, end, eventCount) {
var slot = new DaySlot(element, start, end, this._groupIndex, this._collectionIndex, this._slots.length, eventCount);
this._slots.push(slot);
},
first: function() {
return this._slots[0];
},
last: function() {
return this._slots[this._slots.length - 1];
},
at: function(index) {
return this._slots[index];
}
});
var Slot = kendo.Class.extend({
init: function(element, start, end, groupIndex, collectionIndex, index) {
this.element = element;
this.clientWidth = element.clientWidth;
this.clientHeight = element.clientHeight;
this.offsetWidth = element.offsetWidth;
this.offsetHeight = element.offsetHeight;
this.offsetTop = element.offsetTop;
this.offsetLeft = element.offsetLeft;
this.start = start;
this.end = end;
this.element = element;
this.groupIndex = groupIndex;
this.collectionIndex = collectionIndex;
this.index = index;
this.isDaySlot = false;
},
startDate: function() {
return kendo.timezone.toLocalDate(this.start);
},
endDate: function() {
return kendo.timezone.toLocalDate(this.end);
},
startInRange: function(date) {
return this.start <= date && date < this.end;
},
endInRange: function(date) {
return this.start < date && date <= this.end;
},
startOffset: function() {
return this.start;
},
endOffset: function() {
return this.end;
}
});
var TimeSlot = Slot.extend({
refresh: function() {
this.offsetTop = this.element.offsetTop;
},
offsetX: function(rtl, offset) {
if (rtl) {
return this.offsetLeft + offset;
} else {
return this.offsetLeft + offset;
}
},
startInRange: function(date) {
return this.start <= date && date < this.end;
},
endInRange: function(date) {
return this.start < date && date <= this.end;
},
startOffset: function(x, y, snap) {
if (snap) {
return this.start;
}
var offset = $(this.element).offset();
var difference = y - offset.top;
var duration = this.end - this.start;
var time = Math.floor(duration * ( difference / this.offsetHeight));
return this.start + time;
},
endOffset: function(x, y, snap) {
if (snap) {
return this.end;
}
var offset = $(this.element).offset();
var difference = y - offset.top;
var duration = this.end - this.start;
var time = Math.floor(duration * ( difference / this.offsetHeight));
return this.start + time;
}
});
var DaySlot = Slot.extend({
init: function(element, start, end, groupIndex, collectionIndex, index, eventCount) {
Slot.fn.init.apply(this, arguments);
this.eventCount = eventCount;
this.isDaySlot = true;
if (this.element.children.length) {
this.firstChildHeight = this.element.children[0].offsetHeight + 3;
this.firstChildTop = this.element.children[0].offsetTop;
} else {
this.firstChildHeight = 3;
this.firstChildTop = 0;
}
},
refresh: function() {
this.clientHeight = this.element.clientHeight;
this.offsetTop = this.element.offsetTop;
},
startDate: function() {
var date = new Date(this.start);
return kendo.timezone.apply(date, "Etc/UTC");
},
endDate: function() {
var date = new Date(this.end);
return kendo.timezone.apply(date, "Etc/UTC");
},
startInRange: function(date) {
return this.start <= date && date < this.end;
},
endInRange: function(date) {
return this.start < date && date <= this.end;
}
});
var scrollbarWidth;
function scrollbar() {
scrollbarWidth = scrollbarWidth ? scrollbarWidth : kendo.support.scrollbar();
return scrollbarWidth;
}
kendo.ui.SchedulerView = Widget.extend({
init: function(element, options) {
Widget.fn.init.call(this, element, options);
this._scrollbar = scrollbar();
this._isRtl = kendo.support.isRtl(element);
this._resizeHint = $();
this._moveHint = $();
this._cellId = kendo.guid();
this._resourcesForGroups();
this._selectedSlots = [];
},
_isMobile: function() {
var options = this.options;
return (options.mobile === true && kendo.support.mobileOS) || options.mobile === "phone" || options.mobile === "tablet";
},
_isMobilePhoneView: function() {
var options = this.options;
return (options.mobile === true && kendo.support.mobileOS && !kendo.support.mobileOS.tablet) || options.mobile === "phone";
},
_addResourceView: function() {
var resourceView = new ResourceView(this.groups.length);
this.groups.push(resourceView);
return resourceView;
},
dateForTitle: function() {
return kendo.format(this.options.selectedDateFormat, this.startDate(), this.endDate());
},
_changeGroup: function(selection, previous) {
var method = previous ? "prevGroupSlot" : "nextGroupSlot";
var slot = this[method](selection.start, selection.groupIndex, selection.isAllDay);
if (slot) {
selection.groupIndex += previous ? -1 : 1;
}
return slot;
},
_changeGroupContinuously: function() {
return null;
},
_changeViewPeriod: function() {
return false;
},
_horizontalSlots: function(selection, ranges, multiple, reverse) {
var method = reverse ? "leftSlot" : "rightSlot";
var startSlot = ranges[0].start;
var endSlot = ranges[ranges.length - 1].end;
var group = this.groups[selection.groupIndex];
if (!multiple) {
var slot = this._normalizeHorizontalSelection(selection, ranges, reverse);
if (slot) {
startSlot = endSlot = slot;
}
}
startSlot = group[method](startSlot);
endSlot = group[method](endSlot);
if (!multiple && !this._isVerticallyGrouped() && (!startSlot || !endSlot)) {
startSlot = endSlot = this._changeGroup(selection, reverse);
}
var continuousSlot;
if (!startSlot || !endSlot) {
continuousSlot = this._continuousSlot(selection, ranges, reverse);
continuousSlot = this._changeGroupContinuously(selection, continuousSlot, multiple, reverse);
if (continuousSlot) {
startSlot = endSlot = continuousSlot;
}
}
return {
startSlot: startSlot,
endSlot: endSlot
};
},
_verticalSlots: function(selection, ranges, multiple, reverse) {
var startSlot = ranges[0].start;
var endSlot = ranges[ranges.length - 1].end;
var group = this.groups[selection.groupIndex];
if (!multiple) {
var slot = this._normalizeVerticalSelection(selection, ranges, reverse);
if (slot) {
startSlot = endSlot = slot;
}
}
var method = reverse ? "upSlot" : "downSlot";
startSlot = group[method](startSlot, multiple);
endSlot = group[method](endSlot, multiple);
if (!multiple && this._isVerticallyGrouped() && (!startSlot || !endSlot)) {
startSlot = endSlot = this._changeGroup(selection, reverse);
}
return {
startSlot: startSlot,
endSlot: endSlot
};
},
_normalizeHorizontalSelection: function() {
return null;
},
_normalizeVerticalSelection: function(selection, ranges, reverse) {
var slot;
if (reverse) {
slot = ranges[0].start;
} else {
slot = ranges[ranges.length - 1].end;
}
return slot;
},
_continuousSlot: function() {
return null;
},
constrainSelection: function(selection) {
var group = this.groups[0];
var slot;
if (!this.inRange(selection)) {
slot = group.firstSlot();
selection.isAllDay = slot.isDaySlot;
selection.start = slot.startDate();
selection.end = slot.endDate();
} else {
if (!group.daySlotCollectionCount()) {
selection.isAllDay = false;
}
}
if (!this.groups[selection.groupIndex]) {
selection.groupIndex = 0;
}
},
move: function(selection, key, shift) {
var handled = false;
var group = this.groups[selection.groupIndex];
if (!group.timeSlotCollectionCount()) {
selection.isAllDay = true;
}
var ranges = group.ranges(selection.start, selection.end, selection.isAllDay, false);
var startSlot, endSlot, reverse, slots;
if (key === keys.DOWN || key === keys.UP) {
handled = true;
reverse = key === keys.UP;
this._updateDirection(selection, ranges, shift, reverse, true);
slots = this._verticalSlots(selection, ranges, shift, reverse);
if (!slots.startSlot && !shift && this._changeViewPeriod(selection, reverse, true)) {
return handled;
}
} else if (key === keys.LEFT || key === keys.RIGHT) {
handled = true;
reverse = key === keys.LEFT;
this._updateDirection(selection, ranges, shift, reverse, false);
slots = this._horizontalSlots(selection, ranges, shift, reverse);
if (!slots.startSlot && !shift && this._changeViewPeriod(selection, reverse, false)) {
return handled;
}
}
if (handled) {
startSlot = slots.startSlot;
endSlot = slots.endSlot;
if (shift) {
var backward = selection.backward;
if (backward && startSlot) {
selection.start = startSlot.startDate();
} else if (!backward && endSlot) {
selection.end = endSlot.endDate();
}
} else if (startSlot && endSlot) {
selection.isAllDay = startSlot.isDaySlot;
selection.start = startSlot.startDate();
selection.end = endSlot.endDate();
}
selection.events = [];
}
return handled;
},
moveToEventInGroup: function(group, slot, selectedEvents, prev) {
var events = group._continuousEvents || [];
var found, event;
var pad = prev ? -1 : 1;
var length = events.length;
var idx = prev ? length - 1 : 0;
while (idx < length && idx > -1) {
event = events[idx];
if ( (!prev && event.start.startDate() >= slot.startDate()) ||
(prev && event.start.startDate() <= slot.startDate()) ) {
if (selectedEvents.length) {
event = events[idx + pad];
}
if (event && $.inArray(event.uid, selectedEvents) === -1) {
found = !!event;
break;
}
}
idx += pad;
}
return event;
},
moveToEvent: function(selection, prev) {
var groupIndex = selection.groupIndex;
var group = this.groups[groupIndex];
var slot = group.ranges(selection.start, selection.end, selection.isAllDay, false)[0].start;
var length = this.groups.length;
var pad = prev ? -1 : 1;
var events = selection.events;
var event;
while (groupIndex < length && groupIndex > -1) {
event = this.moveToEventInGroup(group, slot, events, prev);
groupIndex += pad;
group = this.groups[groupIndex];
if (!group || event) {
break;
}
events = [];
if (prev) {
slot = group.lastSlot();
} else {
slot = group.firstSlot(true);
}
}
if (event) {
selection.events = [ event.uid ];
selection.start = event.start.startDate();
selection.end = event.end.endDate();
selection.isAllDay = event.start.isDaySlot;
selection.groupIndex = event.start.groupIndex;
}
return !!event;
},
current: function(candidate) {
if (candidate !== undefined) {
this._current = candidate;
this._scrollTo(candidate, this.content[0]);
} else {
return this._current;
}
},
select: function(selection) {
this.clearSelection();
if (!this._selectEvents(selection)) {
this._selectSlots(selection);
}
},
_selectSlots: function(selection) {
var isAllDay = selection.isAllDay;
var group = this.groups[selection.groupIndex];
if (!group.timeSlotCollectionCount()) {
isAllDay = true;
}
this._selectedSlots = [];
var ranges = group.ranges(selection.start, selection.end, isAllDay, false);
var element;
var slot;
for (var rangeIndex = 0; rangeIndex < ranges.length; rangeIndex++) {
var range = ranges[rangeIndex];
var collection = range.collection;
for (var slotIndex = range.start.index; slotIndex <= range.end.index; slotIndex++) {
slot = collection.at(slotIndex);
element = slot.element;
element.setAttribute("aria-selected", true);
addSelectedState(element);
this._selectedSlots.push({
start: slot.startDate(),
end: slot.endDate(),
element: element
});
}
}
if (selection.backward) {
element = ranges[0].start.element;
}
this.current(element);
},
_selectEvents: function(selection) {
var found = false;
var events = selection.events;
var groupEvents = this.groups[selection.groupIndex]._continuousEvents || [];
var idx, length = groupEvents.length;
if (!events[0] || !groupEvents[0]) {
return found;
}
var result = $();
selection.events = [];
for (idx = 0; idx < length; idx ++) {
if ($.inArray(groupEvents[idx].uid, events) > -1) {
result = result.add(groupEvents[idx].element);
selection.events.push(groupEvents[idx].uid);
}
}
if (result[0]) {
result.addClass("k-state-selected").attr("aria-selected", true);
this.current(result.last()[0]);
this._selectedSlots = [];
found = true;
}
return found;
},
inRange: function(options) {
var startDate = this.startDate();
var endDate = kendo.date.addDays(this.endDate(), 1);
var start = options.start;
var end = options.end;
return startDate <= start && start < endDate && startDate < end && end <= endDate;
},
_resourceValue: function(resource, item) {
if (resource.valuePrimitive) {
item = kendo.getter(resource.dataValueField)(item);
}
return item;
},
_resourceBySlot: function(slot) {
var resources = this.groupedResources;
var result = {};
if (resources.length) {
var resourceIndex = slot.groupIndex;
for (var idx = resources.length - 1; idx >=0; idx--) {
var resource = resources[idx];
var value = this._resourceValue(resource, resource.dataSource.view()[resourceIndex % resource.dataSource.total()]);
if (resource.multiple) {
value = [value];
}
var setter = kendo.setter(resource.field);
setter(result, value);
resourceIndex = Math.floor(resourceIndex / resource.dataSource.total());
}
}
return result;
},
_createResizeHint: function(left, top, width, height) {
return $(HINT).css({
left: left,
top: top,
width: width,
height: height
});
},
_removeResizeHint: function() {
this._resizeHint.remove();
this._resizeHint = $();
},
_removeMoveHint: function() {
this._moveHint.remove();
this._moveHint = $();
},
_scrollTo: function(element, container) {
var elementOffset = element.offsetTop,
elementOffsetDir = element.offsetHeight,
containerScroll = container.scrollTop,
containerOffsetDir = container.clientHeight,
bottomDistance = elementOffset + elementOffsetDir,
result = 0;
if (containerScroll > elementOffset) {
result = elementOffset;
} else if (bottomDistance > (containerScroll + containerOffsetDir)) {
if (elementOffsetDir <= containerOffsetDir) {
result = (bottomDistance - containerOffsetDir);
} else {
result = elementOffset;
}
} else {
result = containerScroll;
}
container.scrollTop = result;
},
_shouldInverseResourceColor: function(resource) {
var resourceColorIsDark = new Color(resource.color).isDark();
var currentColor = this.element.css("color");
var currentColorIsDark = new Color(currentColor).isDark();
return (resourceColorIsDark == currentColorIsDark);
},
_eventTmpl: function(template, wrapper) {
var options = this.options,
settings = $.extend({}, kendo.Template, options.templateSettings),
paramName = settings.paramName,
html = "",
type = typeof template,
state = { storage: {}, count: 0 };
if (type === "function") {
state.storage["tmpl" + state.count] = template;
html += "#=this.tmpl" + state.count + "(" + paramName + ")#";
state.count ++;
} else if (type === "string") {
html += template;
}
var tmpl = kendo.template(kendo.format(wrapper, html), settings);
if (state.count > 0) {
tmpl = $.proxy(tmpl, state.storage);
}
return tmpl;
},
eventResources: function(event) {
var resources = [],
options = this.options;
if (!options.resources) {
return resources;
}
for (var idx = 0; idx < options.resources.length; idx++) {
var resource = options.resources[idx];
var field = resource.field;
var eventResources = kendo.getter(field)(event);
if (!eventResources) {
continue;
}
if (!resource.multiple) {
eventResources = [eventResources];
}
var data = resource.dataSource.view();
for (var resourceIndex = 0; resourceIndex < eventResources.length; resourceIndex++) {
var eventResource = null;
var value = eventResources[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) {
eventResource = data[dataIndex];
break;
}
}
if (eventResource !== null) {
var resourceColor = kendo.getter(resource.dataColorField)(eventResource);
resources.push({
field: resource.field,
title: resource.title,
name: resource.name,
text: kendo.getter(resource.dataTextField)(eventResource),
value: value,
color: resourceColor
});
}
}
}
return resources;
},
createLayout: function(layout) {
var allDayIndex = -1;
if (!layout.rows) {
layout.rows = [];
}
for (var idx = 0; idx < layout.rows.length; idx++) {
if (layout.rows[idx].allDay) {
allDayIndex = idx;
break;
}
}
var allDaySlot = layout.rows[allDayIndex];
if (allDayIndex >= 0) {
layout.rows.splice(allDayIndex, 1);
}
var columnLevels = this.columnLevels = levels(layout, "columns");
var rowLevels = this.rowLevels = levels(layout, "rows");
this.table = $('');
var rowCount = rowLevels[rowLevels.length - 1].length;
this.table.append(this._topSection(columnLevels, allDaySlot, rowCount));
this.table.append(this._bottomSection(columnLevels, rowLevels, rowCount));
this.element.append(this.table);
this._scroller();
},
refreshLayout: function() {
var that = this,
toolbar = that.element.find(">.k-scheduler-toolbar"),
height = that.element.innerHeight(),
scrollbar = this._scrollbar,
headerHeight = 0,
paddingDirection = this._isRtl ? "left" : "right";
for (var idx = 0; idx < toolbar.length; idx++) {
height -= toolbar.eq(idx).outerHeight();
}
if (that.datesHeader) {
headerHeight = that.datesHeader.outerHeight();
}
if (that.timesHeader && that.timesHeader.outerHeight() > headerHeight) {
headerHeight = that.timesHeader.outerHeight();
}
if (that.datesHeader && that.timesHeader) {
var datesHeaderRows = that.datesHeader.find("table:first tr");
that.timesHeader.find("tr").height(function(index) {
$(this).height(datesHeaderRows.eq(index).height());
});
}
if (headerHeight) {
height -= headerHeight;
}
if (that.footer) {
height -= that.footer.outerHeight();
}
var isSchedulerHeightSet = function(el) {
var initialHeight, newHeight;
if (el[0].style.height) {
return true;
} else {
initialHeight = el.height();
}
el.height("auto");
newHeight = el.height();
if (initialHeight != newHeight) {
el.height("");
return true;
}
el.height("");
return false;
};
var contentDiv = that.content[0],
scrollbarWidth = !kendo.support.kineticScrollNeeded ? scrollbar : 0;
if (isSchedulerHeightSet(that.element)) { // set content height only if needed
if (height > scrollbar * 2) { // do not set height if proper scrollbar cannot be displayed
that.content.height(height);
} else {
that.content.height(scrollbar * 2 + 1);
}
that.times.height(contentDiv.clientHeight);
var timesTable = that.times.find("table");
if (timesTable.length) {
timesTable.height(that.content.find("table")[0].clientHeight);
}
}
if (contentDiv.offsetWidth - contentDiv.clientWidth > 0) {
that.table.addClass("k-scrollbar-v");
that.datesHeader.css("padding-" + paddingDirection, scrollbarWidth - parseInt(that.datesHeader.children().css("border-" + paddingDirection + "-width"), 10));
} else {
that.datesHeader.css("padding-" + paddingDirection, "");
}
if (contentDiv.offsetHeight - contentDiv.clientHeight > 0 || contentDiv.clientHeight > that.content.children(".k-scheduler-table").height()) {
that.table.addClass("k-scrollbar-h");
} else {
that.table.removeClass("k-scrollbar-h");
}
},
_topSection: function(columnLevels, allDaySlot, rowCount) {
this.timesHeader = timesHeader(columnLevels.length, allDaySlot, rowCount);
var columnCount = columnLevels[columnLevels.length - 1].length;
this.datesHeader = datesHeader(columnLevels, columnCount, allDaySlot);
return $("").append(this.timesHeader.add(this.datesHeader).wrap("").parent());
},
_bottomSection: function(columnLevels, rowLevels, rowCount) {
this.times = times(rowLevels, rowCount);
this.content = content(columnLevels[columnLevels.length - 1], rowLevels[rowLevels.length - 1]);
return $(" ").append(this.times.add(this.content).wrap("").parent());
},
_scroller: function() {
var that = this;
this.content.bind("scroll" + NS, function () {
that.datesHeader.find(">.k-scheduler-header-wrap").scrollLeft(this.scrollLeft);
that.times.scrollTop(this.scrollTop);
});
var touchScroller = kendo.touchScroller(this.content, {
avoidScrolling: function(e) {
return $(e.event.target).closest(".k-event.k-event-active").length > 0;
}
});
if (touchScroller && touchScroller.movable) {
this._touchScroller = touchScroller;
this.content = touchScroller.scrollElement;
touchScroller.movable.bind("change", function(e) {
that.datesHeader.find(">.k-scheduler-header-wrap").scrollLeft(-e.sender.x);
that.times.scrollTop(-e.sender.y);
});
}
},
_resourcesForGroups: function() {
var result = [];
var groups = this.options.group;
var resources = this.options.resources;
groups = groups && groups.resources ? groups.resources : [];
if (resources && groups.length) {
for (var idx = 0, length = resources.length; idx < length; idx++) {
for (var groupIdx = 0, groupLength = groups.length; groupIdx < groupLength; groupIdx++) {
if (resources[idx].name === groups[groupIdx]) {
result.push(resources[idx]);
}
}
}
}
this.groupedResources = result;
},
_createColumnsLayout: function(resources, inner) {
return createLayoutConfiguration("columns", resources, inner);
},
_groupOrientation: function() {
var groups = this.options.group;
return groups && groups.resources ? groups.orientation : "horizontal";
},
_isVerticallyGrouped: function() {
return this.groupedResources.length && this._groupOrientation() === "vertical";
},
_createRowsLayout: function(resources, inner) {
return createLayoutConfiguration("rows", resources, inner);
},
selectionByElement: function() {
return null;
},
clearSelection: function() {
this.content
.find(".k-state-selected")
.removeAttr("id")
.attr("aria-selected", false)
.removeClass("k-state-selected");
},
destroy: function() {
var that = this;
Widget.fn.destroy.call(this);
if (that.table) {
kendo.destroy(that.table);
that.table.remove();
}
that.groups = null;
that.table = null;
that.content = null;
that.times = null;
that.datesHeader = null;
that.timesHeader = null;
that.footer = null;
that._resizeHint = null;
that._moveHint = null;
},
calendarInfo: function() {
return kendo.getCulture().calendars.standard;
},
prevGroupSlot: function(date, groupIndex, isDay) {
var collection;
var group = this.groups[groupIndex];
var slot = group.ranges(date, date, isDay, false)[0].start;
if (groupIndex <= 0) {
return;
}
if (this._isVerticallyGrouped()) {
if (!group.timeSlotCollectionCount()) {
collection = group._collection(group.daySlotCollectionCount() - 1, true);
return collection.at(slot.index);
} else {
collection = group._collection(isDay ? slot.index : slot.collectionIndex, false);
return collection.last();
}
} else {
if (!group.timeSlotCollectionCount()) {
collection = group._collection(slot.collectionIndex, true);
return collection.last();
} else {
collection = group._collection(isDay ? 0 : group.timeSlotCollectionCount() - 1, isDay);
return isDay ? collection.last() : collection.at(slot.index);
}
}
},
nextGroupSlot: function(date, groupIndex, isDay) {
var collection;
var group = this.groups[groupIndex];
var slot = group.ranges(date, date, isDay, false)[0].start;
var daySlotCollectionCount;
if (groupIndex >= this.groups.length - 1) {
return;
}
if (this._isVerticallyGrouped()) {
if (!group.timeSlotCollectionCount()) {
collection = group._collection(0, true);
return collection.at(slot.index);
} else {
daySlotCollectionCount = group.daySlotCollectionCount();
collection = group._collection(daySlotCollectionCount ? 0 : slot.collectionIndex, daySlotCollectionCount);
return isDay ? collection.first() : collection.at(slot.collectionIndex);
}
} else {
if (!group.timeSlotCollectionCount()) {
collection = group._collection(slot.collectionIndex, true);
return collection.first();
} else {
collection = group._collection(0, isDay);
return isDay ? collection.first() : collection.at(slot.index);
}
}
}
});
function collidingEvents(elements, start, end) {
var idx,
index,
startIndex,
overlaps,
endIndex;
for (idx = elements.length-1; idx >= 0; idx--) {
index = rangeIndex(elements[idx]);
startIndex = index.start;
endIndex = index.end;
overlaps = startIndex <= start && endIndex >= start;
if (overlaps || (startIndex >= start && endIndex <= end) || (start <= startIndex && end >= startIndex)) {
if (startIndex < start) {
start = startIndex;
}
if (endIndex > end) {
end = endIndex;
}
}
}
return eventsForSlot(elements, start, end);
}
function rangeIndex(eventElement) {
return {
start: eventElement.start,
end: eventElement.end
};
}
function eventsForSlot(elements, slotStart, slotEnd) {
var events = [];
for (var idx = 0; idx < elements.length; idx++) {
var event = rangeIndex(elements[idx]);
if ((event.start < slotStart && event.end > slotStart) || (event.start >= slotStart && event.end <= slotEnd)) {
events.push(elements[idx]);
}
}
return events;
}
function createColumns(eventElements) {
return _createColumns(eventElements);
}
function createRows(eventElements) {
return _createColumns(eventElements);
}
var Color = function(value) {
var color = this,
formats = Color.formats,
re,
processor,
parts,
i,
channels;
if (arguments.length === 1) {
value = color.resolveColor(value);
for (i = 0; i < formats.length; i++) {
re = formats[i].re;
processor = formats[i].process;
parts = re.exec(value);
if (parts) {
channels = processor(parts);
color.r = channels[0];
color.g = channels[1];
color.b = channels[2];
}
}
} else {
color.r = arguments[0];
color.g = arguments[1];
color.b = arguments[2];
}
color.r = color.normalizeByte(color.r);
color.g = color.normalizeByte(color.g);
color.b = color.normalizeByte(color.b);
};
Color.prototype = {
resolveColor: function(value) {
value = value || "#000";
if (value.charAt(0) == "#") {
value = value.substr(1, 6);
}
value = value.replace(/ /g, "");
value = value.toLowerCase();
value = Color.namedColors[value] || value;
return value;
},
normalizeByte: function(value) {
return (value < 0 || isNaN(value)) ? 0 : ((value > 255) ? 255 : value);
},
percBrightness: function() {
var color = this;
return math.sqrt(0.241 * color.r * color.r + 0.691 * color.g * color.g + 0.068 * color.b * color.b);
},
isDark: function() {
var color = this;
var brightnessValue = color.percBrightness();
return brightnessValue < 180;
}
};
Color.formats = [{
re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
process: function(parts) {
return [
parseInt(parts[1], 10), parseInt(parts[2], 10), parseInt(parts[3], 10)
];
}
}, {
re: /^(\w{2})(\w{2})(\w{2})$/,
process: function(parts) {
return [
parseInt(parts[1], 16), parseInt(parts[2], 16), parseInt(parts[3], 16)
];
}
}, {
re: /^(\w{1})(\w{1})(\w{1})$/,
process: function(parts) {
return [
parseInt(parts[1] + parts[1], 16),
parseInt(parts[2] + parts[2], 16),
parseInt(parts[3] + parts[3], 16)
];
}
}
];
Color.namedColors = {
aqua: "00ffff", azure: "f0ffff", beige: "f5f5dc",
black: "000000", blue: "0000ff", brown: "a52a2a",
coral: "ff7f50", cyan: "00ffff", darkblue: "00008b",
darkcyan: "008b8b", darkgray: "a9a9a9", darkgreen: "006400",
darkorange: "ff8c00", darkred: "8b0000", dimgray: "696969",
fuchsia: "ff00ff", gold: "ffd700", goldenrod: "daa520",
gray: "808080", green: "008000", greenyellow: "adff2f",
indigo: "4b0082", ivory: "fffff0", khaki: "f0e68c",
lightblue: "add8e6", lightgrey: "d3d3d3", lightgreen: "90ee90",
lightpink: "ffb6c1", lightyellow: "ffffe0", lime: "00ff00",
limegreen: "32cd32", linen: "faf0e6", magenta: "ff00ff",
maroon: "800000", mediumblue: "0000cd", navy: "000080",
olive: "808000", orange: "ffa500", orangered: "ff4500",
orchid: "da70d6", pink: "ffc0cb", plum: "dda0dd",
purple: "800080", red: "ff0000", royalblue: "4169e1",
salmon: "fa8072", silver: "c0c0c0", skyblue: "87ceeb",
slateblue: "6a5acd", slategray: "708090", snow: "fffafa",
steelblue: "4682b4", tan: "d2b48c", teal: "008080",
tomato: "ff6347", turquoise: "40e0d0", violet: "ee82ee",
wheat: "f5deb3", white: "ffffff", whitesmoke: "f5f5f5",
yellow: "ffff00", yellowgreen: "9acd32"
};
function _createColumns(eventElements) {
var columns = [];
for (var idx = 0; idx < eventElements.length; idx++) {
var event = eventElements[idx];
var eventRange = rangeIndex(event);
var column = null;
for (var j = 0, columnLength = columns.length; j < columnLength; j++) {
var endOverlaps = eventRange.start > columns[j].end;
if (eventRange.start < columns[j].start || endOverlaps) {
column = columns[j];
if (column.end < eventRange.end) {
column.end = eventRange.end;
}
break;
}
}
if (!column) {
column = { start: eventRange.start, end: eventRange.end, events: [] };
columns.push(column);
}
column.events.push(event);
}
return columns;
}
function createLayoutConfiguration(name, resources, inner) {
var resource = resources[0];
if (resource) {
var configuration = [];
var data = resource.dataSource.view();
for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
var obj = {
text: kendo.htmlEncode(kendo.getter(resource.dataTextField)(data[dataIndex])),
className: "k-slot-cell"
};
obj[name] = createLayoutConfiguration(name, resources.slice(1), inner);
configuration.push(obj);
}
return configuration;
}
return inner;
}
function groupEqFilter(value) {
return function(item) {
if ($.isArray(item) || item instanceof kendo.data.ObservableArray) {
for (var idx = 0; idx < item.length; idx++) {
if (item[idx] == value) {
return true;
}
}
return false;
}
return item == value;
};
}
var selectedStateRegExp = /\s*k-state-selected/;
function addSelectedState(cell) {
cell.className = cell.className.replace(selectedStateRegExp, "") + " k-state-selected";
}
$.extend(ui.SchedulerView, {
createColumns: createColumns,
createRows: createRows,
rangeIndex: rangeIndex,
collidingEvents: collidingEvents,
groupEqFilter: groupEqFilter
});
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.ui,
setTime = kendo.date.setTime,
SchedulerView = ui.SchedulerView,
extend = $.extend,
proxy = $.proxy,
getDate = kendo.date.getDate,
MS_PER_MINUTE = kendo.date.MS_PER_MINUTE,
MS_PER_DAY = kendo.date.MS_PER_DAY,
getMilliseconds = kendo.date.getMilliseconds,
NS = ".kendoMultiDayView";
var DAY_VIEW_EVENT_TEMPLATE = kendo.template('' +
'
#:kendo.format("{0:t} - {1:t}", start, end)#
' +
'
${title}
' +
'
#=kendo.toString(date, 'ddd M/dd')# "),
ALLDAY_EVENT_WRAPPER_STRING = '' +
'
' +
'# if(data.tail || data.middle) {#' +
' ' +
'{0}' +
'
' +
'#if (showDelete) {#' +
' ' +
'#if(resizable && !singleDay && !data.tail && !data.middle){#' +
'
' +
'#}#' +
'#if(resizable && !singleDay && !data.head && !data.middle){#' +
'
' +
'#}#' +
'
' +
'
' +
'# if(data.isException()) {#' +
' ' +
'{0}' +
'
' +
'#if (showDelete) {#' +
' ' +
'
' +
'# if(data.tail || data.middle) {#' +
' ' +
'
' +
'# if(data.head || data.middle) {#' +
' ' +
'# if(resizable && !data.tail && !data.middle) {#' +
'
' +
'# } #' +
'# if(resizable && !data.head && !data.middle) {#' +
'
' +
'# } #' +
'
");
element.appendTo(this.times).css({
top: Math.round(ranges[0].innerRect(currentTime, new Date(currentTime.getTime() + 1), false).top)
});
}
}
},
_currentTime: function() {
var that = this;
var markerOptions = that.options.currentTimeMarker;
if (markerOptions !== false && markerOptions.updateInterval !== undefined) {
var updateInterval = markerOptions.updateInterval;
that._currentTimeMarkerUpdater();
that._currentTimeUpdateTimer = setInterval(proxy(this._currentTimeMarkerUpdater, that), updateInterval);
}
},
_updateResizeHint: function(event, groupIndex, startTime, endTime) {
var multiday = event.isMultiDay();
var group = this.groups[groupIndex];
var ranges = group.ranges(startTime, endTime, multiday, event.isAllDay);
this._removeResizeHint();
for (var rangeIndex = 0; rangeIndex < ranges.length; rangeIndex++) {
var range = ranges[rangeIndex];
var start = range.startSlot();
var width = start.offsetWidth;
var height = start.clientHeight;
var top = start.offsetTop;
if (multiday) {
width = range.innerWidth();
} else {
var rect = range.outerRect(startTime, endTime, this.options.snap);
top = rect.top;
height = rect.bottom - rect.top;
}
var hint = SchedulerView.fn._createResizeHint.call(this,
start.offsetLeft,
top,
width,
height
);
this._resizeHint = this._resizeHint.add(hint);
}
var format = "t";
var container = this.content;
if (multiday) {
format = "M/dd";
container = this.element.find(".k-scheduler-header-wrap:has(.k-scheduler-header-all-day) > div");
if (!container.length) {
container = this.content;
}
}
this._resizeHint.appendTo(container);
this._resizeHint.find(".k-label-top,.k-label-bottom").text("");
this._resizeHint.first().addClass("k-first").find(".k-label-top").text(kendo.toString(kendo.timezone.toLocalDate(startTime), format));
this._resizeHint.last().addClass("k-last").find(".k-label-bottom").text(kendo.toString(kendo.timezone.toLocalDate(endTime), format));
},
_updateMoveHint: function(event, groupIndex, distance) {
var multiday = event.isMultiDay();
var group = this.groups[groupIndex];
var start = kendo.date.toUtcTime(event.start) + distance;
var end = start + event.duration();
var ranges = group.ranges(start, end, multiday, event.isAllDay);
start = kendo.timezone.toLocalDate(start);
end = kendo.timezone.toLocalDate(end);
this._removeMoveHint();
if (!multiday && (getMilliseconds(end) === 0 || getMilliseconds(end) < getMilliseconds(this.startTime()))) {
if (ranges.length > 1) {
ranges.pop();
}
}
for (var rangeIndex = 0; rangeIndex < ranges.length; rangeIndex++) {
var range = ranges[rangeIndex];
var startSlot = range.start;
var hint = this._createEventElement(event.clone({ start: start, end: end }), !multiday);
hint.addClass("k-event-drag-hint");
var css = {
left: startSlot.offsetLeft + 2,
top: startSlot.offsetTop
};
if (this._isRtl) {
css.left = startSlot.clientWidth * 0.1 + startSlot.offsetLeft + 2;
}
if (multiday) {
css.width = range.innerWidth() - 4;
} else {
var rect = range.outerRect(start, end, this.options.snap);
css.top = rect.top;
css.height = rect.bottom - rect.top;
css.width = startSlot.clientWidth * 0.9 - 4;
}
hint.css(css);
this._moveHint = this._moveHint.add(hint);
}
var content = this.content;
if (multiday) {
content = this.element.find(".k-scheduler-header-wrap:has(.k-scheduler-header-all-day) > div");
if (!content.length) {
content = this.content;
}
}
this._moveHint.appendTo(content);
},
_slotByPosition: function(x, y) {
var slot;
var offset;
if (this._isVerticallyGrouped()) {
offset = this.content.offset();
y += this.content[0].scrollTop;
x += this.content[0].scrollLeft;
} else {
offset = this.element.find(".k-scheduler-header-wrap:has(.k-scheduler-header-all-day)").find(">div").offset();
}
if (offset) {
x -= offset.left;
y -= offset.top;
}
x = Math.ceil(x);
y = Math.ceil(y);
var group;
var groupIndex;
for (groupIndex = 0; groupIndex < this.groups.length; groupIndex++) {
group = this.groups[groupIndex];
slot = group.daySlotByPosition(x, y);
if (slot) {
return slot;
}
}
if (offset) {
x += offset.left;
y += offset.top;
}
offset = this.content.offset();
x -= offset.left;
y -= offset.top;
if (!this._isVerticallyGrouped()) {
y += this.content[0].scrollTop;
x += this.content[0].scrollLeft;
}
x = Math.ceil(x);
y = Math.ceil(y);
for (groupIndex = 0; groupIndex < this.groups.length; groupIndex++) {
group = this.groups[groupIndex];
slot = group.timeSlotByPosition(x, y);
if (slot) {
return slot;
}
}
return null;
},
_groupCount: function() {
var resources = this.groupedResources;
if (resources.length) {
if (this._groupOrientation() === "vertical") {
return this._rowCountForLevel(resources.length - 1);
} else {
return this._columnCountForLevel(resources.length) / this._columnOffsetForResource(resources.length);
}
}
return 1;
},
_columnCountInResourceView: function() {
var resources = this.groupedResources;
if (!resources.length || this._isVerticallyGrouped()) {
return this._columnCountForLevel(0);
}
return this._columnOffsetForResource(resources.length);
},
_timeSlotGroups: function(groupCount, columnCount) {
var interval = this._timeSlotInterval();
var tableRows = this.content.find("tr:not(.k-scheduler-header-all-day)");
tableRows.attr("role", "row");
var rowCount = tableRows.length;
if (this._isVerticallyGrouped()) {
rowCount = Math.floor(rowCount / groupCount);
}
for (var groupIndex = 0; groupIndex < groupCount; groupIndex++) {
var rowMultiplier = 0;
if (this._isVerticallyGrouped()) {
rowMultiplier = groupIndex;
}
var rowIndex = rowMultiplier * rowCount;
var time;
var cellMultiplier = 0;
if (!this._isVerticallyGrouped()) {
cellMultiplier = groupIndex;
}
while (rowIndex < (rowMultiplier + 1) * rowCount) {
var cells = tableRows[rowIndex].children;
var group = this.groups[groupIndex];
if (rowIndex % rowCount === 0) {
time = getMilliseconds(new Date(+this.startTime()));
}
for (var cellIndex = cellMultiplier * columnCount; cellIndex < (cellMultiplier + 1) * columnCount; cellIndex++) {
var cell = cells[cellIndex];
var collectionIndex = cellIndex % columnCount;
var collection = group.getTimeSlotCollection(collectionIndex);
var currentDate = this._dates[collectionIndex];
var currentTime = Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
var start = currentTime + time;
var end = start + interval;
cell.setAttribute("role", "gridcell");
cell.setAttribute("aria-selected", false);
collection.addTimeSlot(cell, start, end);
}
time += interval;
rowIndex ++;
}
}
},
_daySlotGroups: function(groupCount, columnCount) {
var tableRows;
if (this._isVerticallyGrouped()) {
tableRows = this.element.find(".k-scheduler-header-all-day");
} else {
tableRows = this.element.find(".k-scheduler-header-all-day tr");
}
tableRows.attr("role", "row");
for (var groupIndex = 0; groupIndex < groupCount; groupIndex++) {
var rowMultiplier = 0;
if (this._isVerticallyGrouped()) {
rowMultiplier = groupIndex;
}
var group = this.groups[groupIndex];
var collection = group.getDaySlotCollection(0);
var cells = tableRows[rowMultiplier].children;
var cellMultiplier = 0;
if (!this._isVerticallyGrouped()) {
cellMultiplier = groupIndex;
}
var cellCount = 0;
for (var cellIndex = cellMultiplier * columnCount; cellIndex < (cellMultiplier + 1) * columnCount; cellIndex++) {
var cell = cells[cellIndex];
if (cellIndex % columnCount === 0) {
cellCount = 0;
}
var start = this._dates[cellCount];
var currentTime = Date.UTC(start.getFullYear(), start.getMonth(), start.getDate());
cellCount ++;
cell.setAttribute("role", "gridcell");
cell.setAttribute("aria-selected", false);
collection.addDaySlot(cell, currentTime, currentTime + kendo.date.MS_PER_DAY);
}
}
},
_groups: function() {
var groupCount = this._groupCount();
var columnCount = this._columnCountInResourceView();
this.groups = [];
for (var idx = 0; idx < groupCount; idx++) {
var view = this._addResourceView(idx);
for (var columnIndex = 0; columnIndex < columnCount; columnIndex++) {
view.addTimeSlotCollection(this._dates[columnIndex], kendo.date.addDays(this._dates[columnIndex], 1));
}
if (this.options.allDaySlot) {
view.addDaySlotCollection(this._dates[0], kendo.date.addDays(this._dates[this._dates.length - 1], 1));
}
}
this._timeSlotGroups(groupCount, columnCount);
if (this.options.allDaySlot) {
this._daySlotGroups(groupCount, columnCount);
}
},
options: {
name: "MultiDayView",
selectedDateFormat: "{0:D}",
allDaySlot: true,
showWorkHours: false,
title: "",
startTime: kendo.date.today(),
endTime: kendo.date.today(),
minorTickCount: 2,
majorTick: 60,
majorTimeHeaderTemplate: "#=kendo.toString(date, 't')#",
minorTimeHeaderTemplate: " ",
slotTemplate: " ",
allDaySlotTemplate: " ",
eventTemplate: DAY_VIEW_EVENT_TEMPLATE,
allDayEventTemplate: DAY_VIEW_ALL_DAY_EVENT_TEMPLATE,
dateHeaderTemplate: DATA_HEADER_TEMPLATE,
editable: true,
workDayStart: new Date(1980, 1, 1, 8, 0, 0),
workDayEnd: new Date(1980, 1, 1, 17, 0, 0),
workWeekStart: 1,
workWeekEnd: 5,
footer: {
command: "workDay"
},
messages: {
allDay: "all day",
showFullDay: "Show full day",
showWorkDay: "Show business hours"
},
currentTimeMarker: {
updateInterval: 10000,
useLocalTimezone: true
}
},
events: ["remove", "add", "edit"],
_templates: function() {
var options = this.options,
settings = extend({}, kendo.Template, options.templateSettings);
this.eventTemplate = this._eventTmpl(options.eventTemplate, EVENT_WRAPPER_STRING);
this.allDayEventTemplate = this._eventTmpl(options.allDayEventTemplate, ALLDAY_EVENT_WRAPPER_STRING);
this.majorTimeHeaderTemplate = kendo.template(options.majorTimeHeaderTemplate, settings);
this.minorTimeHeaderTemplate = kendo.template(options.minorTimeHeaderTemplate, settings);
this.dateHeaderTemplate = kendo.template(options.dateHeaderTemplate, settings);
this.slotTemplate = kendo.template(options.slotTemplate, settings);
this.allDaySlotTemplate = kendo.template(options.allDaySlotTemplate, settings);
},
_editable: function() {
if (this.options.editable) {
if (this._isMobile()) {
this._touchEditable();
} else {
this._mouseEditable();
}
}
},
_mouseEditable: function() {
var that = this;
that.element.on("click" + NS, ".k-event a:has(.k-si-close)", function(e) {
that.trigger("remove", { uid: $(this).closest(".k-event").attr(kendo.attr("uid")) });
e.preventDefault();
});
if (that.options.editable.create !== false) {
that.element.on("dblclick" + NS, ".k-scheduler-content td", function(e) {
if (!$(this).parent().hasClass("k-scheduler-header-all-day")) {
var slot = that._slotByPosition(e.pageX, e.pageY);
if (slot) {
var resourceInfo = that._resourceBySlot(slot);
that.trigger("add", { eventInfo: extend({ start: slot.startDate(), end: slot.endDate() }, resourceInfo) });
}
e.preventDefault();
}
}).on("dblclick" + NS, ".k-scheduler-header-all-day td", function(e) {
var slot = that._slotByPosition(e.pageX, e.pageY);
if (slot) {
var resourceInfo = that._resourceBySlot(slot);
that.trigger("add", { eventInfo: extend({}, { isAllDay: true, start: kendo.date.getDate(slot.startDate()), end: kendo.date.getDate(slot.startDate()) }, resourceInfo) });
}
e.preventDefault();
});
}
if (that.options.editable.update !== false) {
that.element.on("dblclick" + NS, ".k-event", function(e) {
that.trigger("edit", { uid: $(this).closest(".k-event").attr(kendo.attr("uid")) });
e.preventDefault();
});
}
},
_touchEditable: function() {
var that = this;
if (that.options.editable.create !== false) {
that._addUserEvents = new kendo.UserEvents(that.element, {
filter: ".k-scheduler-content td",
tap: function(e) {
if (!$(e.target).parent().hasClass("k-scheduler-header-all-day")) {
var slot = that._slotByPosition(e.x.location, e.y.location);
if (slot) {
var resourceInfo = that._resourceBySlot(slot);
that.trigger("add", { eventInfo: extend({ start: slot.startDate(), end: slot.endDate() }, resourceInfo) });
}
e.preventDefault();
}
}
});
that._allDayUserEvents = new kendo.UserEvents(that.element, {
filter: ".k-scheduler-header-all-day td",
tap: function(e) {
var slot = that._slotByPosition(e.x.location, e.y.location);
if (slot) {
var resourceInfo = that._resourceBySlot(slot);
that.trigger("add", { eventInfo: extend({}, { isAllDay: true, start: kendo.date.getDate(slot.startDate()), end: kendo.date.getDate(slot.startDate()) }, resourceInfo) });
}
e.preventDefault();
}
});
}
if (that.options.editable.update !== false) {
that._editUserEvents = new kendo.UserEvents(that.element, {
filter: ".k-event",
tap: function(e) {
var eventElement = $(e.target).closest(".k-event");
if (!eventElement.hasClass("k-event-active")) {
that.trigger("edit", { uid: eventElement.attr(kendo.attr("uid")) });
}
e.preventDefault();
}
});
}
},
_layout: function(dates) {
var columns = [];
var rows = [];
var options = this.options;
var that = this;
for (var idx = 0; idx < dates.length; idx++) {
var column = {};
column.text = that.dateHeaderTemplate({ date: dates[idx] });
if (kendo.date.isToday(dates[idx])) {
column.className = "k-today";
}
columns.push(column);
}
var resources = this.groupedResources;
if (options.allDaySlot) {
rows.push({
text: options.messages.allDay, allDay: true,
cellContent: function(idx) {
var groupIndex = idx;
idx = resources.length && that._groupOrientation() !== "vertical" ? idx % dates.length : idx;
return that.allDaySlotTemplate({ date: dates[idx], resources: function() {
return that._resourceBySlot({ groupIndex: groupIndex });
}
});
}
});
}
this._forTimeRange(this.startTime(), this.endTime(), function(date, majorTick, middleRow, lastSlotRow) {
var template = majorTick ? that.majorTimeHeaderTemplate : that.minorTimeHeaderTemplate;
var row = {
text: template({ date: date }),
className: lastSlotRow ? "k-slot-cell" : ""
};
rows.push(row);
});
if (resources.length) {
if (this._groupOrientation() === "vertical") {
rows = this._createRowsLayout(resources, rows);
} else {
columns = this._createColumnsLayout(resources, columns);
}
}
return {
columns: columns,
rows: rows
};
},
_footer: function() {
var options = this.options;
if (options.footer !== false) {
var html = '";
this.footer = $(html).appendTo(this.element);
var that = this;
this.footer.on("click" + NS, ".k-scheduler-fullday", function(e) {
e.preventDefault();
that.trigger("navigate", { view: that.name || options.name, date: that.startDate(), isWorkDay: !options.showWorkHours });
});
}
},
_forTimeRange: function(min, max, action, after) {
min = toInvariantTime(min); //convert the date to 1/2/1980 and sets the time
max = toInvariantTime(max);
var that = this,
msMin = getMilliseconds(min),
msMax = getMilliseconds(max),
minorTickCount = that.options.minorTickCount,
msMajorInterval = that.options.majorTick * MS_PER_MINUTE,
msInterval = msMajorInterval / minorTickCount || 1,
start = new Date(+min),
startDay = start.getDate(),
msStart,
idx = 0, length,
html = "";
length = MS_PER_DAY / msInterval;
if (msMin != msMax) {
if (msMin > msMax) {
msMax += MS_PER_DAY;
}
length = ((msMax - msMin) / msInterval);
}
length = Math.round(length);
for (; idx < length; idx++) {
var majorTickDivider = idx % (msMajorInterval/msInterval),
isMajorTickRow = majorTickDivider === 0,
isMiddleRow = majorTickDivider < minorTickCount - 1,
isLastSlotRow = majorTickDivider === minorTickCount - 1;
html += action(start, isMajorTickRow, isMiddleRow, isLastSlotRow);
setTime(start, msInterval, false);
}
if (msMax) {
msStart = getMilliseconds(start);
if (startDay < start.getDate()) {
msStart += MS_PER_DAY;
}
if (msStart > msMax) {
start = new Date(+max);
}
}
if (after) {
html += after(start);
}
return html;
},
_content: function(dates) {
var that = this;
var options = that.options;
var start = that.startTime();
var end = this.endTime();
var groupsCount = 1;
var rowCount = 1;
var columnCount = dates.length;
var html = '';
var resources = this.groupedResources;
var slotTemplate = this.slotTemplate;
var allDaySlotTemplate = this.allDaySlotTemplate;
var isVerticalGroupped = false;
var allDayVerticalGroupRow;
if (resources.length) {
isVerticalGroupped = that._groupOrientation() === "vertical";
if (isVerticalGroupped) {
rowCount = this._rowCountForLevel(this.rowLevels.length - 2);
if (options.allDaySlot) {
allDayVerticalGroupRow = function (groupIndex) {
var result = ' ";
};
}
} else {
groupsCount = this._columnCountForLevel(this.columnLevels.length - 2);
}
}
html += '';
var appendRow = function(date, majorTick) {
var content = "";
var idx;
var length;
var classes = "";
var tmplDate;
var groupIdx = 0;
content = '';
var resources = function(groupIndex) {
return function() {
return that._resourceBySlot({ groupIndex: groupIndex });
};
};
for (; groupIdx < groupsCount; groupIdx++) {
for (idx = 0, length = columnCount; idx < length; idx++) {
classes = "";
if (kendo.date.isToday(dates[idx])) {
classes += "k-today";
}
if (kendo.date.getMilliseconds(date) < kendo.date.getMilliseconds(that.options.workDayStart) ||
kendo.date.getMilliseconds(date) >= kendo.date.getMilliseconds(that.options.workDayEnd) ||
!that._isWorkDay(dates[idx])) {
classes += " k-nonwork-hour";
}
content += '";
tmplDate = kendo.date.getDate(dates[idx]);
kendo.date.setTime(tmplDate, kendo.date.getMilliseconds(date));
content += slotTemplate({ date: tmplDate, resources: resources(isVerticalGroupped ? rowIdx : groupIdx) });
content += "";
}
}
content += "";
return content;
};
for (var rowIdx = 0; rowIdx < rowCount; rowIdx++) {
html += allDayVerticalGroupRow ? allDayVerticalGroupRow(rowIdx) : "";
html += this._forTimeRange(start, end, appendRow);
}
html += ' ';
this.content.find("table").append(html);
},
_isWorkDay: function(date) {
var day = date.getDay();
var workDays = this._workDays;
for (var i = 0; i < workDays.length; i++) {
if (workDays[i] === day) {
return true;
}
}
return false;
},
_render: function(dates) {
var that = this;
dates = dates || [];
this._dates = dates;
this._startDate = dates[0];
this._endDate = dates[(dates.length - 1) || 0];
this.createLayout(this._layout(dates));
this._content(dates);
this._footer();
this.refreshLayout();
var allDayHeader = this.element.find(".k-scheduler-header-all-day td");
if (allDayHeader.length) {
this._allDayHeaderHeight = allDayHeader.first()[0].clientHeight;
}
that.datesHeader.on("click" + NS, ".k-nav-day", function(e) {
var th = $(e.currentTarget).closest("th");
var offset = th.offset();
var slot = that._slotByPosition(offset.left, offset.top + th.outerHeight());
that.trigger("navigate", { view: "day", date: slot.startDate() });
});
},
startTime: function() {
var options = this.options;
return options.showWorkHours ? options.workDayStart : options.startTime;
},
endTime: function() {
var options = this.options;
return options.showWorkHours ? options.workDayEnd : options.endTime;
},
startDate: function() {
return this._startDate;
},
endDate: function() {
return this._endDate;
},
_end: function(isAllDay) {
var time = getMilliseconds(this.endTime()) || MS_PER_DAY;
if (isAllDay) {
time = 0;
}
return new Date(this._endDate.getTime() + time);
},
nextDate: function() {
return kendo.date.nextDay(this.endDate());
},
previousDate: function() {
return kendo.date.previousDay(this.startDate());
},
calculateDateRange: function() {
this._render([this.options.date]);
},
destroy: function() {
var that = this;
if (that._currentTimeUpdateTimer) {
clearInterval(that._currentTimeUpdateTimer);
}
if (that.datesHeader) {
that.datesHeader.off(NS);
}
if (that.element) {
that.element.off(NS);
}
if (that.footer) {
that.footer.remove();
}
SchedulerView.fn.destroy.call(this);
if (this._isMobile() && that.options.editable) {
if (that.options.editable.create !== false) {
that._addUserEvents.destroy();
that._allDayUserEvents.destroy();
}
if (that.options.editable.update !== false) {
that._editUserEvents.destroy();
}
}
},
inRange: function(options) {
var inRange = SchedulerView.fn.inRange.call(this, options);
var startTime = getMilliseconds(this.startTime());
var endTime = getMilliseconds(this.endTime()) || kendo.date.MS_PER_DAY;
var start = getMilliseconds(options.start);
var end = getMilliseconds(options.end) || kendo.date.MS_PER_DAY;
return inRange && startTime <= start && end <= endTime;
},
selectionByElement: function(cell) {
var offset = cell.offset();
return this._slotByPosition(offset.left, offset.top);
},
_timeSlotInterval: function() {
var options = this.options;
return (options.majorTick/options.minorTickCount) * MS_PER_MINUTE;
},
_timeSlotIndex: function(date) {
var options = this.options;
var eventStartTime = getMilliseconds(date);
var startTime = getMilliseconds(this.startTime());
var timeSlotInterval = ((options.majorTick/options.minorTickCount) * MS_PER_MINUTE);
return (eventStartTime - startTime) / (timeSlotInterval);
},
_slotIndex: function(date, multiday) {
if (multiday) {
return this._dateSlotIndex(date);
}
return this._timeSlotIndex(date);
},
_dateSlotIndex: function(date, overlaps) {
var idx;
var length;
var slots = this._dates || [];
var slotStart;
var slotEnd;
var offset = 1;
for (idx = 0, length = slots.length; idx < length; idx++) {
slotStart = kendo.date.getDate(slots[idx]);
slotEnd = new Date(kendo.date.getDate(slots[idx]).getTime() + MS_PER_DAY - (overlaps ? 0 : 1));
if (isInDateRange(date, slotStart, slotEnd)) {
return idx * offset;
}
}
return -1;
},
_positionAllDayEvent: function(element, slotRange) {
var slotWidth = slotRange.innerWidth();
var startIndex = slotRange.start.index;
var endIndex = slotRange.end.index;
var allDayEvents = SchedulerView.collidingEvents(slotRange.events(), startIndex, endIndex);
var currentColumnCount = this._headerColumnCount || 0;
var leftOffset = 2;
var rightOffset = startIndex !== endIndex ? 5 : 4;
var eventHeight = this._allDayHeaderHeight;
var start = slotRange.startSlot();
element
.css({
left: start.offsetLeft + leftOffset,
width: slotWidth - rightOffset
});
slotRange.addEvent({ slotIndex: startIndex, start: startIndex, end: endIndex, element: element });
allDayEvents.push({ slotIndex: startIndex, start: startIndex, end: endIndex, element: element });
var rows = SchedulerView.createRows(allDayEvents);
if (rows.length && rows.length > currentColumnCount) {
this._headerColumnCount = rows.length;
}
var top = slotRange.start.offsetTop;
for (var idx = 0, length = rows.length; idx < length; idx++) {
var rowEvents = rows[idx].events;
for (var j = 0, eventLength = rowEvents.length; j < eventLength; j++) {
$(rowEvents[j].element).css({
top: top + idx * eventHeight
});
}
}
},
_arrangeColumns: function(element, top, height, slotRange) {
var startSlot = slotRange.start;
element = { element: element, slotIndex: startSlot.index, start: top, end: top + height };
var columns,
slotWidth = startSlot.clientWidth,
eventRightOffset = slotWidth * 0.10,
columnEvents,
eventElements = slotRange.events(),
slotEvents = SchedulerView.collidingEvents(eventElements, element.start, element.end);
slotRange.addEvent(element);
slotEvents.push(element);
columns = SchedulerView.createColumns(slotEvents);
var columnWidth = (slotWidth - eventRightOffset) / columns.length;
for (var idx = 0, length = columns.length; idx < length; idx++) {
columnEvents = columns[idx].events;
for (var j = 0, eventLength = columnEvents.length; j < eventLength; j++) {
columnEvents[j].element[0].style.width = columnWidth - 4 + "px";
columnEvents[j].element[0].style.left = (this._isRtl ? eventRightOffset : 0) + startSlot.offsetLeft + idx * columnWidth + 2 + "px";
}
}
},
_positionEvent: function(event, element, slotRange) {
var start = event.startTime || event.start;
var end = event.endTime || event.end;
var rect = slotRange.innerRect(start, end, false);
var height = rect.bottom - rect.top - 2; /* two times border width */
if (height < 0) {
height = 0;
}
element.css( {
top: rect.top,
height: height
} );
this._arrangeColumns(element, rect.top, element[0].clientHeight, slotRange);
},
_createEventElement: function(event, isOneDayEvent, head, tail) {
var template = isOneDayEvent ? this.eventTemplate : this.allDayEventTemplate;
var options = this.options;
var editable = options.editable;
var isMobile = this._isMobile();
var showDelete = editable && editable.destroy !== false && !isMobile;
var resizable = editable && editable.resize !== false;
var startDate = getDate(this.startDate());
var endDate = getDate(this.endDate());
var startTime = getMilliseconds(this.startTime());
var endTime = getMilliseconds(this.endTime());
var eventStartTime = event._time("start");
var eventEndTime = event._time("end");
var middle;
if (startTime >= endTime) {
endTime = getMilliseconds(new Date(this.endTime().getTime() + MS_PER_DAY - 1));
}
if (!isOneDayEvent && !event.isAllDay) {
endDate = new Date(endDate.getTime() + MS_PER_DAY);
}
var eventStartDate = event.start;
var eventEndDate = event.end;
if (event.isAllDay) {
eventEndDate = getDate(event.end);
}
if ((!isInDateRange(getDate(eventStartDate), startDate, endDate) &&
!isInDateRange(eventEndDate, startDate, endDate)) ||
(isOneDayEvent && eventStartTime < startTime && eventEndTime > endTime)) {
middle = true;
} else if (getDate(eventStartDate) < startDate || (isOneDayEvent && eventStartTime < startTime)) {
tail = true;
} else if ((eventEndDate > endDate && !isOneDayEvent) || (isOneDayEvent && eventEndTime > endTime)) {
head = true;
}
var resources = this.eventResources(event);
if (event.startTime) {
eventStartDate = new Date(eventStartTime);
eventStartDate = kendo.timezone.apply(eventStartDate, "Etc/UTC");
}
if (event.endTime) {
eventEndDate = new Date(eventEndTime);
eventEndDate = kendo.timezone.apply(eventEndDate, "Etc/UTC");
}
var data = extend({}, {
ns: kendo.ns,
resizable: resizable,
showDelete: showDelete,
middle: middle,
head: head,
tail: tail,
singleDay: this._dates.length == 1,
resources: resources,
inverseColor: resources && resources[0] ? this._shouldInverseResourceColor(resources[0]) : false
}, event, {
start: eventStartDate,
end: eventEndDate
});
var element = $(template(data));
this.angular("compile", function(){
return {
elements: element,
data: [ { dataItem: data } ]
};
});
return element;
},
_isInTimeSlot: function(event) {
var slotStartTime = this.startTime(),
slotEndTime = this.endTime(),
startTime = event.startTime || event.start,
endTime = event.endTime || event.end;
if (getMilliseconds(slotEndTime) === getMilliseconds(kendo.date.getDate(slotEndTime))) {
slotEndTime = kendo.date.getDate(slotEndTime);
setTime(slotEndTime, MS_PER_DAY - 1);
}
if (event._date("end") > event._date("start")) {
endTime = +event._date("end") + (MS_PER_DAY - 1);
}
endTime = endTime - event._date("end");
startTime = startTime - event._date("start");
slotEndTime = getMilliseconds(slotEndTime);
slotStartTime = getMilliseconds(slotStartTime);
if(slotStartTime === startTime && startTime === endTime) {
return true;
}
var overlaps = startTime !== slotEndTime;
return isInTimeRange(startTime, slotStartTime, slotEndTime, overlaps) ||
isInTimeRange(endTime, slotStartTime, slotEndTime, overlaps) ||
isInTimeRange(slotStartTime, startTime, endTime) ||
isInTimeRange(slotEndTime, startTime, endTime);
},
_isInDateSlot: function(event) {
var groups = this.groups[0];
var slotStart = groups.firstSlot().start;
var slotEnd = groups.lastSlot().end - 1;
var startTime = kendo.date.toUtcTime(event.start);
var endTime = kendo.date.toUtcTime(event.end);
return (isInDateRange(startTime, slotStart, slotEnd) ||
isInDateRange(endTime, slotStart, slotEnd) ||
isInDateRange(slotStart, startTime, endTime) ||
isInDateRange(slotEnd, startTime, endTime)) &&
(!isInDateRange(endTime, slotStart, slotStart) || isInDateRange(endTime, startTime, startTime) || event.isAllDay );
},
_updateAllDayHeaderHeight: function(height) {
if (this._height !== height) {
this._height = height;
var allDaySlots = this.element.find(".k-scheduler-header-all-day td");
if (allDaySlots.length) {
allDaySlots.parent()
.add(this.element.find(".k-scheduler-times-all-day").parent())
.height(height);
for (var groupIndex = 0; groupIndex < this.groups.length; groupIndex++) {
this.groups[groupIndex].refresh();
}
}
}
},
_renderEvents: function(events, groupIndex) {
var allDayEventContainer = this.datesHeader.find(".k-scheduler-header-wrap > div");
var event;
var idx;
var length;
for (idx = 0, length = events.length; idx < length; idx++) {
event = events[idx];
if (this._isInDateSlot(event)) {
var isMultiDayEvent = event.isAllDay || event.end.getTime() - event.start.getTime() >= MS_PER_DAY;
var container = isMultiDayEvent && !this._isVerticallyGrouped() ? allDayEventContainer : this.content;
var element;
var ranges;
var group;
if (!isMultiDayEvent) {
if (this._isInTimeSlot(event)) {
group = this.groups[groupIndex];
if (!group._continuousEvents) {
group._continuousEvents = [];
}
ranges = group.slotRanges(event);
var rangeCount = ranges.length;
for (var rangeIndex = 0; rangeIndex < rangeCount; rangeIndex++) {
var range = ranges[rangeIndex];
var start = event.start;
var end = event.end;
if (rangeCount > 1) {
if (rangeIndex === 0) {
end = range.end.endDate();
} else if (rangeIndex == rangeCount - 1) {
start = range.start.startDate();
} else {
start = range.start.startDate();
end = range.end.endDate();
}
}
var occurrence = event.clone({ start: start, end: end, startTime: event.startTime, endTime: event.endTime });
if (this._isInTimeSlot(occurrence)) {
var head = range.head;
element = this._createEventElement(event, !isMultiDayEvent, head, range.tail);
element.appendTo(container);
this._positionEvent(occurrence, element, range);
addContinuousEvent(group, range, element, false);
}
}
}
} else if (this.options.allDaySlot) {
group = this.groups[groupIndex];
if (!group._continuousEvents) {
group._continuousEvents = [];
}
ranges = group.slotRanges(event);
if (ranges.length) {
element = this._createEventElement(event, !isMultiDayEvent);
this._positionAllDayEvent(element, ranges[0]);
addContinuousEvent(group, ranges[0], element, true);
element.appendTo(container);
}
}
}
}
},
render: function(events) {
this._headerColumnCount = 0;
this._groups();
this.element.find(".k-event").remove();
events = new kendo.data.Query(events)
.sort([{ field: "start", dir: "asc" },{ field: "end", dir: "desc" }])
.toArray();
var eventsByResource = [];
this._eventsByResource(events, this.groupedResources, eventsByResource);
var that = this;
var eventsPerDate = $.map(this._dates, function(date) {
return Math.max.apply(null,
$.map(eventsByResource, function(events) {
return $.grep(events, function(event) {
return event.isMultiDay() && isInDateRange(date, getDate(event.start), getDate(event.end));
}).length;
})
);
});
var height = Math.max.apply(null, eventsPerDate);
this._updateAllDayHeaderHeight((height + 1) * this._allDayHeaderHeight);
for (var groupIndex = 0; groupIndex < eventsByResource.length; groupIndex++) {
this._renderEvents(eventsByResource[groupIndex], groupIndex);
}
this.refreshLayout();
this.trigger("activate");
},
_eventsByResource: function(events, resources, result) {
var resource = resources[0];
if (resource) {
var view = resource.dataSource.view();
for (var itemIdx = 0; itemIdx < view.length; itemIdx++) {
var value = this._resourceValue(resource, view[itemIdx]);
var eventsFilteredByResource = new kendo.data.Query(events).filter({ field: resource.field, operator: SchedulerView.groupEqFilter(value) }).toArray();
if (resources.length > 1) {
this._eventsByResource(eventsFilteredByResource, resources.slice(1), result);
} else {
result.push(eventsFilteredByResource);
}
}
} else {
result.push(events);
}
},
_columnOffsetForResource: function(index) {
return this._columnCountForLevel(index) / this._columnCountForLevel(index - 1);
},
_columnCountForLevel: function(level) {
var columnLevel = this.columnLevels[level];
return columnLevel ? columnLevel.length : 0;
},
_rowCountForLevel: function(level) {
var rowLevel = this.rowLevels[level];
return rowLevel ? rowLevel.length : 0;
},
clearSelection: function() {
this.content.add(this.datesHeader)
.find(".k-state-selected")
.removeAttr("id")
.attr("aria-selected", false)
.removeClass("k-state-selected");
},
_updateDirection: function(selection, ranges, multiple, reverse, vertical) {
var isDaySlot = selection.isAllDay;
var startSlot = ranges[0].start;
var endSlot = ranges[ranges.length - 1].end;
if (multiple) {
if (vertical) {
if (!isDaySlot &&
startSlot.index === endSlot.index &&
startSlot.collectionIndex === endSlot.collectionIndex) {
selection.backward = reverse;
}
} else {
if ((isDaySlot && startSlot.index === endSlot.index) ||
(!isDaySlot && startSlot.collectionIndex === endSlot.collectionIndex)) {
selection.backward = reverse;
}
}
}
},
_changeViewPeriod: function(selection, reverse, vertical) {
if (!vertical) {
var date = reverse ? this.previousDate() : this.nextDate();
var start = selection.start;
var end = selection.end;
selection.start = new Date(date);
selection.end = new Date(date);
var endMilliseconds = selection.isAllDay ? MS_PER_DAY : getMilliseconds(end);
setTime(selection.start, getMilliseconds(start));
setTime(selection.end, endMilliseconds);
if (!this._isVerticallyGrouped()) {
selection.groupIndex = reverse ? this.groups.length - 1 : 0;
}
selection.events = [];
return true;
}
}
});
extend(true, ui, {
MultiDayView: MultiDayView,
DayView: MultiDayView.extend({
options: {
name: "DayView",
title: "Day"
},
name: "day"
}),
WeekView: MultiDayView.extend({
options: {
name: "WeekView",
title: "Week",
selectedDateFormat: "{0:D} - {1:D}"
},
name: "week",
calculateDateRange: function() {
var selectedDate = this.options.date,
start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
idx, length,
dates = [];
for (idx = 0, length = 7; idx < length; idx++) {
dates.push(start);
start = kendo.date.nextDay(start);
}
this._render(dates);
}
}),
WorkWeekView: MultiDayView.extend({
options: {
name: "WorkWeekView",
title: "Work Week",
selectedDateFormat: "{0:D} - {1:D}"
},
name: "workWeek",
nextDate: function() {
return kendo.date.dayOfWeek(kendo.date.nextDay(this.endDate()), this.options.workWeekStart, 1);
},
previousDate: function() {
return kendo.date.previousDay(this.startDate());
},
calculateDateRange: function() {
var selectedDate = this.options.date,
start = kendo.date.dayOfWeek(selectedDate, this.options.workWeekStart, -1),
end = kendo.date.dayOfWeek(start, this.options.workWeekEnd, 1),
dates = [];
while (start <= end) {
dates.push(start);
start = kendo.date.nextDay(start);
}
this._render(dates);
}
})
});
})(window.kendo.jQuery);
(function($){
var kendo = window.kendo,
ui = kendo.ui,
NS = ".kendoAgendaView";
var EVENT_WRAPPER_FORMAT = '' +
'# if (resources[0]) {#' +
'
' +
"# } #" +
"# if (data.isException()) { #" +
'
' +
'# } else if (data.isRecurring()) {#' +
'
' +
"# } #" +
'{0}' +
'#if (showDelete) {#' +
'
' +
'#}#' +
'
{1} ',
groups[idx].rowSpan,
this._groupTemplate({ value: groups[idx].text }),
groups[idx].className
));
}
}
if (taskIndex === 0) {
if (isPhoneView) {
headerCells.push(kendo.format(
'{0} ',
this._dateTemplate({ date: date })
));
tableRows.push('' : ">") + headerCells.join("") + " ");
} else {
tableRow.push(kendo.format(
'{1} ',
tasks.length,
this._dateTemplate({ date: date }),
taskGroupIndex == tasksGroups.length - 1 && !groups.length ? " k-last" : "",
!groups.length ? " k-first" : ""
));
}
}
if (task.head) {
task.format = "{0:t}";
} else if (task.tail) {
task.format = "{1:t}";
} else {
task.format = "{0:t}-{1:t}";
}
task.resources = this.eventResources(task);
tableRow.push(kendo.format(
'{0}{1}{2}
{3} ',
task.tail || task.middle ? '' : ">") + tableRow.join("") + " ");
}
}
return tableRows.join("");
},
render: function(events) {
var table = this.content.find("table").empty();
var groups = [];
if (events.length > 0) {
var resources = this.groupedResources;
if (resources.length) {
groups = this._createGroupConfiguration(events, resources, null);
this._renderGroups(groups, table, []);
} else {
groups = this._tasks(events);
table.append(this._renderTaskGroups(groups, []));
}
}
var items = this._eventsList = flattenTaskGroups(groups);
this._angularItems(table, items);
this.refreshLayout();
this.trigger("activate");
},
_angularItems: function(table, items) {
this.angular("compile", function(){
var data = [], elements = items.map(function(item){
data.push({ dataItem: item });
return table.find(".k-task[" + kendo.attr("uid") + "=" + item.uid + "]");
});
return { elements: elements, data: data };
});
},
_renderGroups: function(groups, table, parentGroups) {
for (var idx = 0, length = groups.length; idx < length; idx++) {
var parents = parentGroups.splice(0);
parents.push(groups[idx]);
if (groups[idx].groups) {
this._renderGroups(groups[idx].groups, table, parents);
} else {
table.append(this._renderTaskGroups(groups[idx].items, parents));
}
}
},
_createGroupConfiguration: function(events, resources, parent) {
var resource = resources[0];
var configuration = [];
var data = resource.dataSource.view();
var isPhoneView = this._isMobilePhoneView();
for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
var value = resourceValue(resource, data[dataIndex]);
var tmp = new kendo.data.Query(events).filter({ field: resource.field, operator: ui.SchedulerView.groupEqFilter(value) }).toArray();
if (tmp.length) {
var tasks = this._tasks(tmp);
var className = parent ? "" : " k-first";
if (dataIndex === data.length - 1 && (!parent || parent.className.indexOf("k-last") > -1)) {
className += " k-last";
}
var obj = {
text: kendo.getter(resource.dataTextField)(data[dataIndex]),
value: value,
rowSpan: 0,
className: className
};
if (resources.length > 1) {
obj.groups = this._createGroupConfiguration(tmp, resources.slice(1), obj);
if (parent) {
parent.rowSpan += obj.rowSpan;
}
} else {
obj.items = tasks;
var span = rowSpan(obj.items);
if (isPhoneView) {
span += obj.items.length;
}
obj.rowSpan = span;
if (parent) {
parent.rowSpan += span;
}
}
configuration.push(obj);
}
}
return configuration;
},
selectionByElement: function(cell) {
var index, event;
cell = $(cell);
if (cell.hasClass("k-scheduler-datecolumn")) {
return;
}
if (this._isMobile()) {
var parent = cell.parent();
index = parent.parent().children()
.filter(function() {
return $(this).children(":not(.k-scheduler-datecolumn)").length;
})
.index(parent);
} else {
index = cell.parent().index();
}
event = this._eventsList[index];
return {
index: index,
start: event.start,
end: event.end,
isAllDay: event.isAllDay,
uid: event.uid
};
},
select: function(selection) {
this.clearSelection();
var row = this.table
.find(".k-task")
.eq(selection.index)
.closest("tr")
.addClass("k-state-selected")
.attr("aria-selected", true)[0];
this.current(row);
},
move: function(selection, key) {
var handled = false;
var index = selection.index;
if (key == kendo.keys.UP) {
index --;
handled = true;
} else if (key == kendo.keys.DOWN) {
index ++;
handled = true;
}
if (handled) {
var event = this._eventsList[index];
if (event) {
selection.start = event.start;
selection.end = event.end;
selection.isAllDay = event.isAllDay;
selection.events = [ event.uid ];
selection.index = index;
}
}
return handled;
},
moveToEvent: function() {
return false;
},
constrainSelection: function(selection) {
var event = this._eventsList[0];
if (event) {
selection.start = event.start;
selection.end = event.end;
selection.isAllDay = event.isAllDay;
selection.events = [ event.uid ];
selection.index = 0;
}
},
isInRange: function() {
return true;
},
destroy: function(){
if (this.element) {
this.element.off(NS);
}
ui.SchedulerView.fn.destroy.call(this);
},
options: {
title: "Agenda",
name: "agenda",
editable: true,
selectedDateFormat: "{0:D}-{1:D}",
eventTemplate: "#:title#",
eventTimeTemplate: "#if(data.isAllDay) {#" +
'#=this.options.messages.allDay#' +
"#} else { #" +
'#=kendo.format(format, start, end)#' +
"# } #",
eventDateTemplate: '' +
'#=kendo.toString(date, "dd")#' +
' ' +
'' +
'#=kendo.toString(date,"dddd")#' +
' ' +
'' +
'#=kendo.toString(date, "y")#' +
' ',
eventGroupTemplate: '' +
'#=value#' +
' ',
messages: {
event: "Event",
date: "Date",
time: "Time",
allDay: "all day"
}
}
});
function rowSpan(tasks) {
var result = 0;
for (var idx = 0, length = tasks.length; idx < length; idx++) {
result += tasks[idx].items.length;
}
return result;
}
function resourceValue(resource, item) {
if (resource.valuePrimitive) {
item = kendo.getter(resource.dataValueField)(item);
}
return item;
}
function flattenTaskGroups(groups) {
var idx = 0,
length = groups.length,
item,
result = [];
for ( ; idx < length; idx ++) {
item = groups[idx];
if (item.groups) {
item = flattenGroup(item.groups);
result = result.concat(item);
} else {
result = result.concat(flattenGroup(item.items));
}
}
return result;
}
function flattenGroup(groups) {
var items = [].concat(groups),
item = items.shift(),
result = [],
push = [].push;
while (item) {
if (item.groups) {
push.apply(items, item.groups);
} else if (item.items) {
push.apply(items, item.items);
} else {
push.call(result, item);
}
item = items.shift();
}
return result;
}
})(window.kendo.jQuery);
(function($){
var kendo = window.kendo,
ui = kendo.ui,
SchedulerView = ui.SchedulerView,
NS = ".kendoMonthView",
extend = $.extend,
proxy = $.proxy,
getDate = kendo.date.getDate,
MS_PER_DAY = kendo.date.MS_PER_DAY,
NUMBER_OF_ROWS = 6,
NUMBER_OF_COLUMNS = 7,
DAY_TEMPLATE = kendo.template('#:kendo.toString(date, "dd")# '),
EVENT_WRAPPER_STRING = '' +
'
' +
'# if(data.tail || data.middle) {#' +
' ' +
'{0}' +
'
' +
'#if (showDelete) {#' +
' ' +
'# if(resizable && !data.tail && !data.middle) {#' +
'
' +
'#}#' +
'# if(resizable && !data.head && !data.middle) {#' +
'
' +
'#}#' +
'
...
'
);
ui.MonthView = SchedulerView.extend({
init: function(element, options) {
var that = this;
SchedulerView.fn.init.call(that, element, options);
that.title = that.options.title;
that.name = "month";
that._templates();
that._editable();
that._renderLayout(that.options.date);
that._groups();
},
_updateDirection: function(selection, ranges, multiple, reverse, vertical) {
if (multiple) {
var startSlot = ranges[0].start;
var endSlot = ranges[ranges.length - 1].end;
var isSameSlot = startSlot.index === endSlot.index;
var isSameCollection = startSlot.collectionIndex === endSlot.collectionIndex;
var updateDirection;
if (vertical) {
updateDirection = (isSameSlot && isSameCollection) || isSameCollection;
} else {
updateDirection = isSameSlot && isSameCollection;
}
if (updateDirection) {
selection.backward = reverse;
}
}
},
_changeViewPeriod: function(selection, reverse, vertical) {
var pad = vertical ? 7 : 1;
if (reverse) {
pad *= -1;
}
selection.start = kendo.date.addDays(selection.start, pad);
selection.end = kendo.date.addDays(selection.end, pad);
if (!vertical || (vertical && this._isVerticallyGrouped())) {
selection.groupIndex = reverse ? this.groups.length - 1 : 0;
}
selection.events = [];
return true;
},
_continuousSlot: function(selection, ranges, reverse) {
var index = selection.backward ? 0 : ranges.length - 1;
var group = this.groups[selection.groupIndex];
return group.continuousSlot(ranges[index].start, reverse);
},
_changeGroupContinuously: function(selection, continuousSlot, multiple, reverse) {
if (!multiple) {
var groupIndex = selection.groupIndex;
var lastGroupIndex = this.groups.length - 1;
var vertical = this._isVerticallyGrouped();
var group = this.groups[groupIndex];
if (!continuousSlot && vertical) {
continuousSlot = group[reverse ? "lastSlot" : "firstSlot"]();
groupIndex += (reverse ? -1 : 1);
} else if (continuousSlot && !vertical) {
groupIndex = reverse ? lastGroupIndex : 0;
}
if (groupIndex < 0 || groupIndex > lastGroupIndex) {
groupIndex = reverse ? lastGroupIndex : 0;
continuousSlot = null;
}
selection.groupIndex = groupIndex;
}
return continuousSlot;
},
_normalizeHorizontalSelection: function(selection, ranges, reverse) {
var slot;
if (reverse) {
slot = ranges[0].start;
} else {
slot = ranges[ranges.length - 1].end;
}
return slot;
},
_normalizeVerticalSelection: function(selection, ranges) {
var slot;
if (selection.backward) {
slot = ranges[0].start;
} else {
slot = ranges[ranges.length - 1].end;
}
return slot;
},
_templates: function() {
var options = this.options,
settings = extend({}, kendo.Template, options.templateSettings);
this.eventTemplate = this._eventTmpl(options.eventTemplate, EVENT_WRAPPER_STRING);
this.dayTemplate = kendo.template(options.dayTemplate, settings);
},
dateForTitle: function() {
return kendo.format(this.options.selectedDateFormat, this._firstDayOfMonth, this._lastDayOfMonth);
},
nextDate: function() {
return kendo.date.nextDay(this._lastDayOfMonth);
},
previousDate: function() {
return kendo.date.previousDay(this._firstDayOfMonth);
},
startDate: function() {
return this._startDate;
},
endDate: function() {
return this._endDate;
},
_renderLayout: function(date) {
var that = this;
this._firstDayOfMonth = kendo.date.firstDayOfMonth(date);
this._lastDayOfMonth = kendo.date.lastDayOfMonth(date);
this._startDate = firstVisibleMonthDay(date, this.calendarInfo());
this.createLayout(this._layout());
this._content();
this.refreshLayout();
this.content.on("click" + NS, ".k-nav-day,.k-more-events", function(e) {
var offset = $(e.currentTarget).offset();
var slot = that._slotByPosition(offset.left, offset.top);
e.preventDefault();
that.trigger("navigate", { view: "day", date: slot.startDate() });
});
},
_editable: function() {
if (this.options.editable && !this._isMobilePhoneView()) {
if (this._isMobile()) {
this._touchEditable();
} else {
this._mouseEditable();
}
}
},
_mouseEditable: function() {
var that = this;
that.element.on("click" + NS, ".k-scheduler-monthview .k-event a:has(.k-si-close)", function(e) {
that.trigger("remove", { uid: $(this).closest(".k-event").attr(kendo.attr("uid")) });
e.preventDefault();
});
if (that.options.editable.create !== false) {
that.element.on("dblclick" + NS, ".k-scheduler-monthview .k-scheduler-content td", function(e) {
var offset = $(e.currentTarget).offset();
var slot = that._slotByPosition(offset.left, offset.top);
if (slot) {
var resourceInfo = that._resourceBySlot(slot);
that.trigger("add", { eventInfo: extend({ isAllDay: true, start: slot.startDate(), end: slot.startDate() }, resourceInfo ) });
}
e.preventDefault();
});
}
if (that.options.editable.update !== false) {
that.element.on("dblclick" + NS, ".k-scheduler-monthview .k-event", function(e) {
that.trigger("edit", { uid: $(this).closest(".k-event").attr(kendo.attr("uid")) });
e.preventDefault();
});
}
},
_touchEditable: function() {
var that = this;
if (that.options.editable.create !== false) {
that._addUserEvents = new kendo.UserEvents(that.element, {
filter: ".k-scheduler-monthview .k-scheduler-content td",
tap: function(e) {
var offset = $(e.target).offset();
var slot = that._slotByPosition(offset.left, offset.top);
if (slot) {
var resourceInfo = that._resourceBySlot(slot);
that.trigger("add", { eventInfo: extend({ isAllDay: true, start: slot.startDate(), end: slot.startDate() }, resourceInfo ) });
}
e.preventDefault();
}
});
}
if (that.options.editable.update !== false) {
that._editUserEvents = new kendo.UserEvents(that.element, {
filter: ".k-scheduler-monthview .k-event",
tap: function(e) {
if ($(e.event.target).closest("a:has(.k-si-close)").length === 0) {
that.trigger("edit", { uid: $(e.target).closest(".k-event").attr(kendo.attr("uid")) });
e.preventDefault();
}
}
});
}
},
selectionByElement: function(cell) {
var offset = $(cell).offset();
return this._slotByPosition(offset.left, offset.top);
},
_columnCountForLevel: function(level) {
var columnLevel = this.columnLevels[level];
return columnLevel ? columnLevel.length : 0;
},
_rowCountForLevel: function(level) {
var rowLevel = this.rowLevels[level];
return rowLevel ? rowLevel.length : 0;
},
_content: function() {
var html = '';
var verticalGroupCount = 1;
var resources = this.groupedResources;
if (resources.length) {
if (this._isVerticallyGrouped()) {
verticalGroupCount = this._rowCountForLevel(resources.length - 1);
}
}
for (var verticalGroupIdx = 0; verticalGroupIdx < verticalGroupCount; verticalGroupIdx++) {
html += this._createCalendar(verticalGroupIdx);
}
html += " ";
this.content.find("table").html(html);
},
_createCalendar: function(verticalGroupIndex) {
var start = this.startDate();
var cellCount = NUMBER_OF_COLUMNS*NUMBER_OF_ROWS;
var cellsPerRow = NUMBER_OF_COLUMNS;
var weekStartDates = [start];
var html = '';
var horizontalGroupCount = 1;
var isVerticallyGrouped = this._isVerticallyGrouped();
var resources = this.groupedResources;
if (resources.length) {
if (!isVerticallyGrouped) {
horizontalGroupCount = this._columnCountForLevel(resources.length - 1);
}
}
this._slotIndices = {};
for (var rowIdx = 0, length = cellCount / cellsPerRow; rowIdx < length; rowIdx++) {
html += "";
weekStartDates.push(start);
var startIdx = rowIdx*cellsPerRow;
for (var groupIdx = 0; groupIdx < horizontalGroupCount; groupIdx++) {
html += this._createRow(start, startIdx, cellsPerRow, isVerticallyGrouped ? verticalGroupIndex : groupIdx);
}
start = kendo.date.addDays(start, cellsPerRow);
html += " ";
}
this._weekStartDates = weekStartDates;
this._endDate = kendo.date.previousDay(start);
return html;
},
_createRow: function(startDate, startIdx, cellsPerRow, groupIndex) {
var that = this;
var min = that._firstDayOfMonth;
var max = that._lastDayOfMonth;
var content = that.dayTemplate;
var classes = "";
var html = "";
var resources = function() {
return that._resourceBySlot({ groupIndex: groupIndex });
};
for (var cellIdx = 0; cellIdx < cellsPerRow; cellIdx++) {
classes = "";
if (kendo.date.isToday(startDate)) {
classes += "k-today";
}
if (!kendo.date.isInDateRange(startDate, min, max)) {
classes += " k-other-month";
}
html += " ", className: "k-hidden k-slot-cell" });
}
rows = this._createRowsLayout(resources, inner);
} else {
columns = this._createColumnsLayout(resources, columns);
}
}
return {
columns: columns,
rows: rows
};
},
_createEventElement: function(event) {
var options = this.options;
var editable = options.editable;
var isMobile = this._isMobile();
event.showDelete = editable && editable.destroy !== false && !isMobile;
event.resizable = editable && editable.resize !== false && !isMobile;
event.ns = kendo.ns;
event.resources = this.eventResources(event);
event.inverseColor = event.resources && event.resources[0] ? this._shouldInverseResourceColor(event.resources[0]) : false;
var element = $(this.eventTemplate(event));
this.angular("compile", function(){
return {
elements: element,
data: [ { dataItem: event } ]
};
});
return element;
},
_isInDateSlot: function(event) {
var groups = this.groups[0];
var slotStart = groups.firstSlot().start;
var slotEnd = groups.lastSlot().end - 1;
var startTime = kendo.date.toUtcTime(event.start);
var endTime = kendo.date.toUtcTime(event.end);
return (isInDateRange(startTime, slotStart, slotEnd) ||
isInDateRange(endTime, slotStart, slotEnd) ||
isInDateRange(slotStart, startTime, endTime) ||
isInDateRange(slotEnd, startTime, endTime)) &&
(!isInDateRange(endTime, slotStart, slotStart) || isInDateRange(endTime, startTime, startTime) || event.isAllDay );
},
_slotIndex: function(date) {
return this._slotIndices[getDate(date).getTime()];
},
_positionMobileEvent: function(slotRange, element, group) {
var startSlot = slotRange.start;
if (slotRange.start.offsetLeft > slotRange.end.offsetLeft) {
startSlot = slotRange.end;
}
var startIndex = slotRange.start.index;
var endIndex = startIndex;
var eventCount = 3;
var events = SchedulerView.collidingEvents(slotRange.events(), startIndex, endIndex);
events.push({element: element, start: startIndex, end: endIndex });
var rows = SchedulerView.createRows(events);
var slot = slotRange.collection.at(startIndex);
var container = slot.container;
if (!container) {
container = $(kendo.format('
',
startSlot.offsetTop + startSlot.firstChildTop + startSlot.firstChildHeight - 3 + "px",
startSlot.offsetLeft + "px",
startSlot.offsetWidth + "px"
));
slot.container = container;
this.content[0].appendChild(container[0]);
}
if (rows.length <= eventCount) {
slotRange.addEvent({element: element, start: startIndex, end: endIndex, groupIndex: startSlot.groupIndex });
group._continuousEvents.push({
element: element,
uid: element.attr(kendo.attr("uid")),
start: slotRange.start,
end: slotRange.end
});
container[0].appendChild(element[0]);
}
},
_positionEvent: function(slotRange, element, group) {
var eventHeight = this.options.eventHeight;
var startSlot = slotRange.start;
if (slotRange.start.offsetLeft > slotRange.end.offsetLeft) {
startSlot = slotRange.end;
}
var startIndex = slotRange.start.index;
var endIndex = slotRange.end.index;
var eventCount = startSlot.eventCount;
var events = SchedulerView.collidingEvents(slotRange.events(), startIndex, endIndex);
var rightOffset = startIndex !== endIndex ? 5 : 4;
events.push({element: element, start: startIndex, end: endIndex });
var rows = SchedulerView.createRows(events);
for (var idx = 0, length = Math.min(rows.length, eventCount); idx < length; idx++) {
var rowEvents = rows[idx].events;
var eventTop = startSlot.offsetTop + startSlot.firstChildHeight + idx * eventHeight + 3 * idx + "px";
for (var j = 0, eventLength = rowEvents.length; j < eventLength; j++) {
rowEvents[j].element[0].style.top = eventTop;
}
}
if (rows.length > eventCount) {
for (var slotIndex = startIndex; slotIndex <= endIndex; slotIndex++) {
var collection = slotRange.collection;
var slot = collection.at(slotIndex);
if (slot.more) {
return;
}
slot.more = $(MORE_BUTTON_TEMPLATE({
ns: kendo.ns,
start: slotIndex,
end: slotIndex,
width: slot.clientWidth - 2,
left: slot.offsetLeft + 2,
top: slot.offsetTop + slot.firstChildHeight + eventCount * eventHeight + 3 * eventCount
}));
this.content[0].appendChild(slot.more[0]);
}
} else {
slotRange.addEvent({element: element, start: startIndex, end: endIndex, groupIndex: startSlot.groupIndex });
element[0].style.width = slotRange.innerWidth() - rightOffset + "px";
element[0].style.left = startSlot.offsetLeft + 2 + "px";
element[0].style.height = eventHeight + "px";
group._continuousEvents.push({
element: element,
uid: element.attr(kendo.attr("uid")),
start: slotRange.start,
end: slotRange.end
});
this.content[0].appendChild(element[0]);
}
},
_slotByPosition: function(x, y) {
var offset = this.content.offset();
x -= offset.left;
y -= offset.top;
y += this.content[0].scrollTop;
x += this.content[0].scrollLeft;
x = Math.ceil(x);
y = Math.ceil(y);
for (var groupIndex = 0; groupIndex < this.groups.length; groupIndex++) {
var slot = this.groups[groupIndex].daySlotByPosition(x, y);
if (slot) {
return slot;
}
}
return null;
},
_createResizeHint: function(range) {
var left = range.startSlot().offsetLeft;
var top = range.start.offsetTop;
var width = range.innerWidth();
var height = range.start.clientHeight - 2;
var hint = SchedulerView.fn._createResizeHint.call(this, left, top, width, height);
hint.appendTo(this.content);
this._resizeHint = this._resizeHint.add(hint);
},
_updateResizeHint: function(event, groupIndex, startTime, endTime) {
this._removeResizeHint();
var group = this.groups[groupIndex];
var ranges = group.ranges(startTime, endTime, true, event.isAllDay);
for (var rangeIndex = 0; rangeIndex < ranges.length; rangeIndex++) {
this._createResizeHint(ranges[rangeIndex]);
}
this._resizeHint.find(".k-label-top,.k-label-bottom").text("");
this._resizeHint.first().addClass("k-first").find(".k-label-top").text(kendo.toString(kendo.timezone.toLocalDate(startTime), "M/dd"));
this._resizeHint.last().addClass("k-last").find(".k-label-bottom").text(kendo.toString(kendo.timezone.toLocalDate(endTime), "M/dd"));
},
_updateMoveHint: function(event, groupIndex, distance) {
var start = kendo.date.toUtcTime(event.start) + distance;
var end = start + event.duration();
var group = this.groups[groupIndex];
var ranges = group.ranges(start, end, true, event.isAllDay);
this._removeMoveHint();
for (var rangeIndex = 0; rangeIndex < ranges.length; rangeIndex++) {
var range = ranges[rangeIndex];
var startSlot = range.startSlot();
var endSlot = range.endSlot();
var hint = this._createEventElement(event.clone({ head: range.head, tail: range.tail }));
hint.css({
left: startSlot.offsetLeft + 2,
top: startSlot.offsetTop + startSlot.firstChildHeight,
height: this.options.eventHeight,
width: range.innerWidth() - (startSlot.index !== endSlot.index ? 5 : 4)
});
hint.addClass("k-event-drag-hint");
hint.appendTo(this.content);
this._moveHint = this._moveHint.add(hint);
}
},
_groups: function() {
var groupCount = this._groupCount();
var columnCount = NUMBER_OF_COLUMNS;
var rowCount = NUMBER_OF_ROWS;
this.groups = [];
for (var idx = 0; idx < groupCount; idx++) {
this._addResourceView(idx);
}
var tableRows = this.content[0].getElementsByTagName("tr");
for (var groupIndex = 0; groupIndex < groupCount; groupIndex++) {
var cellCount = 0;
var rowMultiplier = 0;
if (this._isVerticallyGrouped()) {
rowMultiplier = groupIndex;
}
for (var rowIndex = rowMultiplier*rowCount; rowIndex < (rowMultiplier+1) *rowCount; rowIndex++) {
var group = this.groups[groupIndex];
var collection = group.addDaySlotCollection(kendo.date.addDays(this.startDate(), cellCount), kendo.date.addDays(this.startDate(), cellCount + columnCount));
var tableRow = tableRows[rowIndex];
var cells = tableRow.children;
var cellMultiplier = 0;
tableRow.setAttribute("role", "row");
if (!this._isVerticallyGrouped()) {
cellMultiplier = groupIndex;
}
for (var cellIndex = cellMultiplier * columnCount; cellIndex < (cellMultiplier + 1) * columnCount; cellIndex++) {
var cell = cells[cellIndex];
var clientHeight = cell.clientHeight;
var firstChildHeight = cell.children.length ? cell.children[0].offsetHeight + 3 : 0;
var start = kendo.date.toUtcTime(kendo.date.addDays(this.startDate(), cellCount));
cellCount ++;
var eventCount = Math.floor((clientHeight - firstChildHeight - this.options.moreButtonHeight) / (this.options.eventHeight + 3)) ;// add space for the more button
cell.setAttribute("role", "gridcell");
cell.setAttribute("aria-selected", false);
collection.addDaySlot(cell, start, start + kendo.date.MS_PER_DAY, eventCount);
}
}
}
},
render: function(events) {
this.content.children(".k-event,.k-more-events,.k-events-container").remove();
this._groups();
events = new kendo.data.Query(events).sort([{ field: "start", dir: "asc" },{ field: "end", dir: "desc" }]).toArray();
var resources = this.groupedResources;
if (resources.length) {
this._renderGroups(events, resources, 0, 1);
} else {
this._renderEvents(events, 0);
}
this.refreshLayout();
this.trigger("activate");
},
_renderEvents: function(events, groupIndex) {
var event;
var idx;
var length;
var isMobilePhoneView = this._isMobilePhoneView();
for (idx = 0, length = events.length; idx < length; idx++) {
event = events[idx];
if (this._isInDateSlot(event)) {
var group = this.groups[groupIndex];
if (!group._continuousEvents) {
group._continuousEvents = [];
}
var ranges = group.slotRanges(event, true);
var rangeCount = ranges.length;
for (var rangeIndex = 0; rangeIndex < rangeCount; rangeIndex++) {
var range = ranges[rangeIndex];
var start = event.start;
var end = event.end;
if (rangeCount > 1) {
if (rangeIndex === 0) {
end = range.end.endDate();
} else if (rangeIndex == rangeCount - 1) {
start = range.start.startDate();
} else {
start = range.start.startDate();
end = range.end.endDate();
}
}
var occurrence = event.clone({ start: start, end: end, head: range.head, tail: range.tail });
if (isMobilePhoneView) {
this._positionMobileEvent(range, this._createEventElement(occurrence), group);
} else {
this._positionEvent(range, this._createEventElement(occurrence), group);
}
}
}
}
},
_renderGroups: function(events, resources, offset, columnLevel) {
var resource = resources[0];
if (resource) {
var view = resource.dataSource.view();
for (var itemIdx = 0; itemIdx < view.length; itemIdx++) {
var value = this._resourceValue(resource, view[itemIdx]);
var tmp = new kendo.data.Query(events).filter({ field: resource.field, operator: SchedulerView.groupEqFilter(value) }).toArray();
if (resources.length > 1) {
offset = this._renderGroups(tmp, resources.slice(1), offset++, columnLevel + 1);
} else {
this._renderEvents(tmp, offset++);
}
}
}
return offset;
},
_groupCount: function() {
var resources = this.groupedResources;
if (resources.length) {
if (this._isVerticallyGrouped()) {
return this._rowCountForLevel(resources.length - 1);
} else {
return this._columnCountForLevel(resources.length) / this._columnOffsetForResource(resources.length);
}
}
return 1;
},
_columnOffsetForResource: function(index) {
return this._columnCountForLevel(index) / this._columnCountForLevel(index - 1);
},
destroy: function(){
if (this.table) {
this.table.removeClass("k-scheduler-monthview");
}
if (this.content) {
this.content.off(NS);
}
if (this.element) {
this.element.off(NS);
}
SchedulerView.fn.destroy.call(this);
if (this._isMobile() && !this._isMobilePhoneView() && this.options.editable) {
if (this.options.editable.create !== false) {
this._addUserEvents.destroy();
}
if (this.options.editable.update !== false) {
this._editUserEvents.destroy();
}
}
},
events: ["remove", "add", "edit", "navigate"],
options: {
title: "Month",
name: "month",
eventHeight: 25,
moreButtonHeight: 13,
editable: true,
selectedDateFormat: "{0:y}",
dayTemplate: DAY_TEMPLATE,
eventTemplate: EVENT_TEMPLATE
}
});
function shiftArray(array, idx) {
return array.slice(idx).concat(array.slice(0, idx));
}
function firstVisibleMonthDay(date, calendarInfo) {
var firstDay = calendarInfo.firstDay,
firstVisibleDay = new Date(date.getFullYear(), date.getMonth(), 0, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
while (firstVisibleDay.getDay() != firstDay) {
kendo.date.setTime(firstVisibleDay, -1 * MS_PER_DAY);
}
return firstVisibleDay;
}
function isInDateRange(value, min, max) {
var msMin = min,
msMax = max,
msValue;
msValue = value;
return msValue >= msMin && msValue <= msMax;
}
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
timezone = kendo.timezone,
Class = kendo.Class,
ui = kendo.ui,
Widget = ui.Widget,
DropDownList = ui.DropDownList,
kendoDate = kendo.date,
setTime = kendoDate.setTime,
setDayOfWeek = kendoDate.setDayOfWeek,
adjustDST = kendoDate.adjustDST,
firstDayOfMonth = kendoDate.firstDayOfMonth,
getMilliseconds = kendoDate.getMilliseconds,
DAYS_IN_LEAPYEAR = [0,31,60,91,121,152,182,213,244,274,305,335,366],
DAYS_IN_YEAR = [0,31,59,90,120,151,181,212,243,273,304,334,365],
MONTHS = [31, 28, 30, 31, 30, 31, 30, 31, 30, 31, 30, 31],
WEEK_DAYS = {
0: "SU",
1: "MO",
2: "TU",
3: "WE",
4: "TH",
5: "FR",
6: "SA"
},
WEEK_DAYS_IDX = {
"SU": 0,
"MO": 1,
"TU": 2,
"WE": 3,
"TH": 4,
"FR": 5,
"SA": 6
},
DATE_FORMATS = [
"yyyy-MM-ddTHH:mm:ss.fffzzz",
"yyyy-MM-ddTHH:mm:sszzz",
"yyyy-MM-ddTHH:mm:ss",
"yyyy-MM-ddTHH:mm",
"yyyy-MM-ddTHH",
"yyyy-MM-dd",
"yyyyMMddTHHmmssfffzzz",
"yyyyMMddTHHmmsszzz",
"yyyyMMddTHHmmss",
"yyyyMMddTHHmm",
"yyyyMMddTHH",
"yyyyMMdd"
],
RULE_NAMES = ["months", "weeks", "yearDays", "monthDays", "weekDays", "hours", "minutes", "seconds"],
RULE_NAMES_LENGTH = RULE_NAMES.length,
RECURRENCE_DATE_FORMAT = "yyyyMMddTHHmmssZ",
limitation = {
months: function(date, end, rule) {
var monthRules = rule.months,
months = ruleValues(monthRules, date.getMonth() + 1),
changed = false;
if (months !== null) {
if (months.length) {
date.setMonth(months[0] - 1, 1);
} else {
date.setFullYear(date.getFullYear() + 1, monthRules[0] - 1, 1);
}
changed = true;
}
return changed;
},
monthDays: function(date, end, rule) {
var monthLength, month, days,
changed = false,
hours = date.getHours(),
normalize = function(monthDay) {
if (monthDay < 0) {
monthDay = monthLength + monthDay;
}
return monthDay;
};
while (date <= end) {
month = date.getMonth();
monthLength = getMonthLength(date);
days = ruleValues(rule.monthDays, date.getDate(), normalize);
if (days === null) {
return changed;
}
changed = true;
if (days.length) {
date.setMonth(month, days.sort(numberSortPredicate)[0]);
adjustDST(date, hours);
if (month === date.getMonth()) {
break;
}
} else {
date.setMonth(month + 1, 1);
}
}
return changed;
},
yearDays: function(date, end, rule) {
var year, yearDays,
changed = false,
hours = date.getHours(),
normalize = function(yearDay) {
if (yearDay < 0) {
yearDay = year + yearDay;
}
return yearDay;
};
while (date < end) {
year = leapYear(date) ? 366 : 365;
yearDays = ruleValues(rule.yearDays, dayInYear(date), normalize);
if (yearDays === null) {
return changed;
}
changed = true;
year = date.getFullYear();
if (yearDays.length) {
date.setFullYear(year, 0, yearDays.sort(numberSortPredicate)[0]);
adjustDST(date, hours);
break;
} else {
date.setFullYear(year + 1, 0, 1);
}
}
return changed;
},
weeks: function(date, end, rule) {
var weekStart = rule.weekStart,
year, weeks, day,
changed = false,
hours = date.getHours(),
normalize = function(week) {
if (week < 0) {
week = 53 + week;
}
return week;
};
while (date < end) {
weeks = ruleValues(rule.weeks, weekInYear(date, weekStart), normalize);
if (weeks === null) {
return changed;
}
changed = true;
year = date.getFullYear();
if (weeks.length) {
day = (weeks.sort(numberSortPredicate)[0] * 7) - 1;
date.setFullYear(year, 0, day);
setDayOfWeek(date, weekStart, -1);
adjustDST(date, hours);
break;
} else {
date.setFullYear(year + 1, 0, 1);
}
}
return changed;
},
weekDays: function(date, end, rule) {
var weekDays = rule.weekDays;
var weekStart = rule.weekStart;
var weekDayRules = ruleWeekValues(weekDays, date, weekStart);
var hours = date.getHours();
var weekDayRule, day;
if (weekDayRules === null) {
return false;
}
weekDayRule = weekDayRules[0];
if (!weekDayRule) {
weekDayRule = weekDays[0];
setDayOfWeek(date, weekStart);
}
day = weekDayRule.day;
if (weekDayRule.offset) {
while (date <= end && !isInWeek(date, weekDayRule, weekStart)) {
if (weekInMonth(date, weekStart) === numberOfWeeks(date, weekStart)) {
date.setMonth(date.getMonth() + 1, 1);
adjustDST(date, hours);
} else {
date.setDate(date.getDate() + 7);
adjustDST(date, hours);
setDayOfWeek(date, weekStart, -1);
}
}
}
if (date.getDay() !== day) {
setDayOfWeek(date, day);
}
return true;
},
hours: function(date, end, rule) {
var hourRules = rule.hours,
startTime = rule._startTime,
startHours = startTime.getHours(),
hours = ruleValues(hourRules, startHours),
changed = false;
if (hours !== null) {
changed = true;
date.setHours(startHours);
adjustDST(date, startHours);
if (hours.length) {
hours = hours[0];
date.setHours(hours);
} else {
hours = date.getHours();
date.setDate(date.getDate() + 1);
adjustDST(date, hours);
hours = hourRules[0];
date.setHours(hours);
adjustDST(date, hours);
}
if (rule.minutes) {
date.setMinutes(0);
}
startTime.setHours(hours, date.getMinutes());
}
return changed;
},
minutes: function(date, end, rule) {
var minuteRules = rule.minutes,
currentMinutes = date.getMinutes(),
minutes = ruleValues(minuteRules, currentMinutes),
hours = rule._startTime.getHours(),
changed = false;
if (minutes !== null) {
changed = true;
if (minutes.length) {
minutes = minutes[0];
} else {
hours += 1;
minutes = minuteRules[0];
}
if (rule.seconds) {
date.setSeconds(0);
}
date.setHours(hours, minutes);
hours = hours % 24;
adjustDST(date, hours);
rule._startTime.setHours(hours, minutes, date.getSeconds());
}
return changed;
},
seconds: function(date, end, rule) {
var secondRules = rule.seconds,
hours = rule._startTime.getHours(),
seconds = ruleValues(secondRules, date.getSeconds()),
minutes = date.getMinutes(),
changed = false;
if (seconds !== null) {
changed = true;
if (seconds.length) {
date.setSeconds(seconds[0]);
} else {
minutes += 1;
date.setMinutes(minutes, secondRules[0]);
if (minutes > 59) {
minutes = minutes % 60;
hours = (hours + 1) % 24;
}
}
rule._startTime.setHours(hours, minutes, date.getSeconds());
}
return changed;
}
},
BaseFrequency = Class.extend({
next: function(date, rule) {
var startTime = rule._startTime,
day = startTime.getDate(),
minutes, seconds;
if (rule.seconds) {
seconds = date.getSeconds() + 1;
date.setSeconds(seconds);
startTime.setSeconds(seconds);
startTime.setDate(day);
} else if (rule.minutes) {
minutes = date.getMinutes() + 1;
date.setMinutes(minutes);
startTime.setMinutes(minutes);
startTime.setDate(day);
} else {
return false;
}
return true;
},
normalize: function(options) {
var rule = options.rule;
if (options.idx === 4 && rule.hours) {
rule._startTime.setHours(0);
this._hour(options.date, rule);
}
},
limit: function(date, end, rule) {
var interval = rule.interval,
ruleName, firstRule,
modified,
idx, day;
while (date <= end) {
modified = firstRule = undefined;
day = date.getDate();
for (idx = 0; idx < RULE_NAMES_LENGTH; idx++) {
ruleName = RULE_NAMES[idx];
if (rule[ruleName]) {
modified = limitation[ruleName](date, end, rule);
if (firstRule !== undefined && modified) {
break;
} else {
firstRule = modified;
}
}
if (modified) {
this.normalize({ date: date, rule: rule, day: day, idx: idx });
}
}
if ((interval === 1 || !this.interval(rule, date)) && idx === RULE_NAMES_LENGTH) {
break;
}
}
},
interval: function (rule, current) {
var start = new Date(rule._startPeriod);
var date = new Date(current);
var hours = current.getHours();
var weekStart = rule.weekStart;
var interval = rule.interval;
var frequency = rule.freq;
var modified = false;
var excess = 0;
var month = 0;
var day = 1;
var diff;
var startTimeHours;
if (frequency === "hourly") {
diff = date.getTimezoneOffset() - start.getTimezoneOffset();
startTimeHours = rule._startTime.getHours();
date = date.getTime();
if (hours !== startTimeHours) {
date += (startTimeHours - hours) * kendoDate.MS_PER_HOUR;
}
date -= start;
if (diff) {
date -= diff * kendoDate.MS_PER_MINUTE;
}
diff = Math.floor(date / kendoDate.MS_PER_HOUR);
excess = intervalExcess(diff, interval);
if (excess !== 0) {
this._hour(current, rule, excess);
modified = true;
}
} else if (frequency === "daily") {
kendoDate.setTime(date, -start);
diff = Math.floor(date / kendoDate.MS_PER_DAY);
excess = intervalExcess(diff, interval);
if (excess !== 0) {
this._date(current, rule, excess);
modified = true;
}
} else if (frequency === "weekly") {
diff = (current.getFullYear() - start.getFullYear()) * 52;
excess = weekInYear(current, weekStart) - weekInYear(start, weekStart) + diff;
excess = intervalExcess(excess, interval);
if (excess !== 0) {
kendoDate.setDayOfWeek(current, rule.weekStart, -1);
current.setDate(current.getDate() + (excess * 7));
adjustDST(current, hours);
modified = true;
}
} else if (frequency === "monthly") {
diff = current.getFullYear() - start.getFullYear();
diff = current.getMonth() - start.getMonth() + (diff * 12);
excess = intervalExcess(diff, interval);
if (excess !== 0) {
day = rule._hasRuleValue ? 1 : current.getDate();
current.setFullYear(current.getFullYear(), current.getMonth() + excess, day);
adjustDST(current, hours);
modified = true;
}
} else if (frequency === "yearly") {
diff = current.getFullYear() - start.getFullYear();
excess = intervalExcess(diff, interval);
if (!rule.months) {
month = current.getMonth();
}
if (!rule.yearDays && !rule.monthDays && !rule.weekDays) {
day = current.getDate();
}
if (excess !== 0) {
current.setFullYear(current.getFullYear() + excess, month, day);
adjustDST(current, hours);
modified = true;
}
}
return modified;
},
_hour: function(date, rule, interval) {
var startTime = rule._startTime,
hours = startTime.getHours();
if (interval) {
hours += interval;
}
date.setHours(hours);
hours = hours % 24;
startTime.setHours(hours);
adjustDST(date, hours);
},
_date: function(date, rule, interval) {
var hours = date.getHours();
date.setDate(date.getDate() + interval);
if (!adjustDST(date, hours)) {
this._hour(date, rule);
}
}
}),
HourlyFrequency = BaseFrequency.extend({
next: function(date, rule) {
if (!BaseFrequency.fn.next(date, rule)) {
this._hour(date, rule, 1);
}
},
normalize: function(options) {
var rule = options.rule;
if (options.idx === 4) {
rule._startTime.setHours(0);
this._hour(options.date, rule);
}
}
}),
DailyFrequency = BaseFrequency.extend({
next: function(date, rule) {
if (!BaseFrequency.fn.next(date, rule)) {
this[rule.hours ? "_hour" : "_date"](date, rule, 1);
}
}
}),
WeeklyFrequency = DailyFrequency.extend({
setup: function(rule, eventStartDate) {
if (!rule.weekDays) {
rule.weekDays = [{
day: eventStartDate.getDay(),
offset: 0
}];
}
}
}),
MonthlyFrequency = BaseFrequency.extend({
next: function(date, rule) {
var day, hours;
if (!BaseFrequency.fn.next(date, rule)) {
if (rule.hours) {
this._hour(date, rule, 1);
} else if (rule.monthDays || rule.weekDays || rule.yearDays || rule.weeks) {
this._date(date, rule, 1);
} else {
day = date.getDate();
hours = date.getHours();
date.setMonth(date.getMonth() + 1);
adjustDST(date, hours);
while(date.getDate() !== day) {
date.setDate(day);
adjustDST(date, hours);
}
this._hour(date, rule);
}
}
},
normalize: function(options) {
var rule = options.rule,
date = options.date,
hours = date.getHours();
if (options.idx === 0 && !rule.monthDays && !rule.weekDays) {
date.setDate(options.day);
adjustDST(date, hours);
} else {
BaseFrequency.fn.normalize(options);
}
},
setup: function(rule, eventStartDate, date) {
if (!rule.monthDays && !rule.weekDays) {
date.setDate(eventStartDate.getDate());
}
}
}),
YearlyFrequency = MonthlyFrequency.extend({
next: function(date, rule) {
var day,
hours = date.getHours();
if (!BaseFrequency.fn.next(date, rule)) {
if (rule.hours) {
this._hour(date, rule, 1);
} else if (rule.monthDays || rule.weekDays || rule.yearDays || rule.weeks) {
this._date(date, rule, 1);
} else if (rule.months) {
day = date.getDate();
date.setMonth(date.getMonth() + 1);
adjustDST(date, hours);
while(date.getDate() !== day) {
date.setDate(day);
adjustDST(date, hours);
}
this._hour(date, rule);
} else {
date.setFullYear(date.getFullYear() + 1);
adjustDST(date, hours);
this._hour(date, rule);
}
}
},
setup: function() {}
}),
frequencies = {
"hourly" : new HourlyFrequency(),
"daily" : new DailyFrequency(),
"weekly" : new WeeklyFrequency(),
"monthly" : new MonthlyFrequency(),
"yearly" : new YearlyFrequency()
},
CLICK = "click";
function intervalExcess(diff, interval) {
var excess;
if (diff !== 0 && diff < interval) {
excess = interval - diff;
} else {
excess = diff % interval;
if (excess) {
excess = interval - excess;
}
}
return excess;
}
function dayInYear(date) {
var month = date.getMonth();
var days = leapYear(date) ? DAYS_IN_LEAPYEAR[month] : DAYS_IN_YEAR[month];
return days + date.getDate();
}
function weekInYear(date, weekStart){
var year, days;
date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
adjustDST(date, 0);
year = date.getFullYear();
if (weekStart !== undefined) {
setDayOfWeek(date, weekStart, -1);
date.setDate(date.getDate() + 4);
} else {
date.setDate(date.getDate() + (4 - (date.getDay() || 7)));
}
adjustDST(date, 0);
days = Math.floor((date.getTime() - new Date(year, 0, 1, -6)) / 86400000);
return 1 + Math.floor(days / 7);
}
function weekInMonth(date, weekStart) {
var firstWeekDay = firstDayOfMonth(date).getDay();
var firstWeekLength = 7 - (firstWeekDay + 7 - (weekStart || 7)) || 7;
if (firstWeekLength < 0) {
firstWeekLength += 7;
}
return Math.ceil((date.getDate() - firstWeekLength) / 7) + 1;
}
function normalizeDayIndex(weekDay, weekStart) {
return weekDay + (weekDay < weekStart ? 7 : 0);
}
function normalizeOffset(date, rule, weekStart) {
var offset = rule.offset;
if (!offset) {
return weekInMonth(date, weekStart);
}
var lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
var weeksInMonth = weekInMonth(lastDate, weekStart);
var day = normalizeDayIndex(rule.day, weekStart);
var skipFirst = day < normalizeDayIndex(new Date(date.getFullYear(), date.getMonth(), 1).getDay(), weekStart);
var skipLast = day > normalizeDayIndex(lastDate.getDay(), weekStart);
if (offset < 0) {
offset = weeksInMonth + (offset + 1 - (skipLast ? 1 : 0));
} else if (skipFirst) {
offset += 1;
}
weeksInMonth -= (skipLast ? 1 : 0);
if (offset < (skipFirst ? 1 : 0) || offset > weeksInMonth) {
return null;
}
return offset;
}
function numberOfWeeks(date, weekStart) {
return weekInMonth(new Date(date.getFullYear(), date.getMonth() + 1, 0), weekStart);
}
function isInWeek(date, rule, weekStart) {
return weekInMonth(date, weekStart) === normalizeOffset(date, rule, weekStart);
}
function ruleWeekValues(weekDays, date, weekStart) {
var currentDay = normalizeDayIndex(date.getDay(), weekStart);
var length = weekDays.length;
var ruleWeekOffset;
var weekDay, day;
var weekNumber;
var result = [];
var idx = 0;
for (;idx < length; idx++) {
weekDay = weekDays[idx];
weekNumber = weekInMonth(date, weekStart);
ruleWeekOffset = normalizeOffset(date, weekDay, weekStart);
if (ruleWeekOffset === null) {
continue;
}
if (weekNumber < ruleWeekOffset) {
result.push(weekDay);
} else if (weekNumber === ruleWeekOffset) {
day = normalizeDayIndex(weekDay.day, weekStart);
if (currentDay < day) {
result.push(weekDay);
} else if (currentDay === day) {
return null;
}
}
}
return result;
}
function ruleValues(rules, value, normalize) {
var idx = 0,
length = rules.length,
availableRules = [],
ruleValue;
for (; idx < length; idx++) {
ruleValue = rules[idx];
if (normalize) {
ruleValue = normalize(ruleValue);
}
if (value === ruleValue) {
return null;
} else if (value < ruleValue) {
availableRules.push(ruleValue);
}
}
return availableRules;
}
function parseArray(list, range) {
var idx = 0,
length = list.length,
value;
for (; idx < length; idx++) {
value = parseInt(list[idx], 10);
if (isNaN(value) || value < range.start || value > range.end || (value === 0 && range.start < 0)) {
return null;
}
list[idx] = value;
}
return list.sort(numberSortPredicate);
}
function parseWeekDayList(list) {
var idx = 0, length = list.length,
value, valueLength, day;
for (; idx < length; idx++) {
value = list[idx];
valueLength = value.length;
day = value.substring(valueLength - 2).toUpperCase();
day = WEEK_DAYS_IDX[day];
if (day === undefined) {
return null;
}
list[idx] = {
offset: parseInt(value.substring(0, valueLength - 2), 10) || 0,
day: day
};
}
return list;
}
function serializeWeekDayList(list) {
var idx = 0, length = list.length,
value, valueString, result = [];
for (; idx < length; idx++) {
value = list[idx];
if (typeof value === "string") {
valueString = value;
} else {
valueString = "" + WEEK_DAYS[value.day];
if (value.offset) {
valueString = value.offset + valueString;
}
}
result.push(valueString);
}
return result.toString();
}
function getMonthLength(date) {
var month = date.getMonth();
if (month === 1) {
if (new Date(date.getFullYear(), 1, 29).getMonth() === 1) {
return 29;
}
return 28;
}
return MONTHS[month];
}
function leapYear(year) {
year = year.getFullYear();
return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
}
function numberSortPredicate(a, b) {
return a - b;
}
function parseExceptions(exceptions, zone) {
var idx = 0, length, date,
dates = [];
if (exceptions) {
exceptions = exceptions.split(";");
length = exceptions.length;
for (; idx < length; idx++) {
date = parseUTCDate(exceptions[idx], zone);
if (date) {
dates.push(date);
}
}
}
return dates;
}
function isException(exceptions, date, zone) {
var dates = $.isArray(exceptions) ? exceptions : parseExceptions(exceptions, zone),
dateTime = date.getTime() - date.getMilliseconds(),
idx = 0, length = dates.length;
for (; idx < length; idx++) {
if (dates[idx].getTime() === dateTime) {
return true;
}
}
return false;
}
function toExceptionString(dates, zone) {
var idx = 0;
var length;
var date;
var result = [].concat(dates);
for (length = result.length; idx < length; idx++) {
date = result[idx];
date = kendo.timezone.convert(date, zone || date.getTimezoneOffset(), "Etc/UTC");
result[idx] = kendo.toString(date, RECURRENCE_DATE_FORMAT);
}
return result.join(";") + ";";
}
function startPeriodByFreq(start, rule) {
var date = new Date(start);
switch (rule.freq) {
case "yearly":
date.setFullYear(date.getFullYear(), 0, 1);
break;
case "monthly":
date.setFullYear(date.getFullYear(), date.getMonth(), 1);
break;
case "weekly":
setDayOfWeek(date, rule.weekStart, -1);
break;
default:
break;
}
if (rule.hours) {
date.setHours(0);
}
if (rule.minutes) {
date.setMinutes(0);
}
if (rule.seconds) {
date.setSeconds(0);
}
return date;
}
function endPeriodByFreq(start, rule) {
var date = new Date(start);
switch (rule.freq) {
case "yearly":
date.setFullYear(date.getFullYear(), 11, 31);
break;
case "monthly":
date.setFullYear(date.getFullYear(), date.getMonth() + 1, 0);
break;
case "weekly":
setDayOfWeek(date, rule.weekStart, -1);
date.setDate(date.getDate() + 6);
break;
default:
break;
}
if (rule.hours) {
date.setHours(23);
}
if (rule.minutes) {
date.setMinutes(59);
}
if (rule.seconds) {
date.setSeconds(59);
}
return date;
}
function normalizeEventsByPosition(events, start, rule) {
var periodEvents = events.slice(rule._startIdx);
var periodEventsLength = periodEvents.length;
var positions = rule.positions;
var list = [];
var position;
var event;
for (var idx = 0, length = positions.length; idx < length; idx++) {
position = positions[idx];
if (position < 0) {
position = periodEventsLength + position;
} else {
position -= 1; //convert to zero based index
}
event = periodEvents[position];
if (event && event.start >= start) {
list.push(event);
}
}
events = events.slice(0, rule._startIdx).concat(list);
rule._startIdx = events.length;
return events;
}
function expand(event, start, end, zone) {
var rule = parseRule(event.recurrenceRule, zone),
startTime, endTime, endDate,
hours, minutes, seconds,
durationMS, startPeriod, inPeriod,
ruleStart, ruleEnd,
useEventStart, freqName,
exceptionDates,
eventStartTime,
eventStartMS,
eventStart,
count, freq,
positions,
current,
events = [];
if (!rule) {
return [event];
}
positions = rule.positions;
current = positions ? 0 : 1;
ruleStart = rule.start;
ruleEnd = rule.end;
if (ruleStart || ruleEnd) {
event = event.clone({
start: ruleStart ? new Date(ruleStart.value[0]) : undefined,
end: ruleEnd ? new Date(ruleEnd.value[0]) : undefined
});
}
eventStart = event.start;
eventStartMS = eventStart.getTime();
eventStartTime = getMilliseconds(eventStart);
exceptionDates = parseExceptions(event.recurrenceException, zone);
if (!exceptionDates[0] && rule.exdates) {
exceptionDates = rule.exdates.value;
event.set("recurrenceException", toExceptionString(exceptionDates, zone));
}
startPeriod = start = new Date(start);
end = new Date(end);
freqName = rule.freq;
freq = frequencies[freqName];
count = rule.count;
if (rule.until && rule.until < end) {
end = new Date(rule.until);
}
useEventStart = freqName === "yearly" || freqName === "monthly" || freqName === "weekly";
if (start < eventStartMS || count || rule.interval > 1 || useEventStart) {
start = new Date(eventStartMS);
} else {
hours = start.getHours();
minutes = start.getMinutes();
seconds = start.getSeconds();
if (!rule.hours) {
hours = eventStart.getHours();
}
if (!rule.minutes) {
minutes = eventStart.getMinutes();
}
if (!rule.seconds) {
seconds = eventStart.getSeconds();
}
start.setHours(hours, minutes, seconds, eventStart.getMilliseconds());
}
rule._startPeriod = new Date(start);
if (positions) {
start = startPeriodByFreq(start, rule);
end = endPeriodByFreq(end, rule);
var diff = getMilliseconds(end) - getMilliseconds(start);
if (diff < 0) {
hours = start.getHours();
end.setHours(hours, start.getMinutes(), start.getSeconds(), start.getMilliseconds());
kendoDate.adjustDST(end, hours);
}
rule._startPeriod = new Date(start);
rule._endPeriod = endPeriodByFreq(start, rule);
rule._startIdx = 0;
}
durationMS = event.duration();
rule._startTime = startTime = kendoDate.toInvariantTime(start);
if (freq.setup) {
freq.setup(rule, eventStart, start);
}
freq.limit(start, end, rule);
while (start <= end) {
endDate = new Date(start);
setTime(endDate, durationMS);
inPeriod = start >= startPeriod || endDate > startPeriod;
if (inPeriod && !isException(exceptionDates, start, zone) || positions) {
startTime = kendoDate.toUtcTime(kendoDate.getDate(start)) + getMilliseconds(rule._startTime);
endTime = startTime + durationMS;
if (eventStartMS !== start.getTime() || eventStartTime !== getMilliseconds(rule._startTime)) {
events.push(event.toOccurrence({
start: new Date(start),
end: endDate,
startTime: startTime,
endTime: endTime
}));
} else {
event.startTime = startTime;
event.endTime = endTime;
events.push(event);
}
}
if (positions) {
freq.next(start, rule);
freq.limit(start, end, rule);
if (start > rule._endPeriod) {
events = normalizeEventsByPosition(events, eventStart, rule);
rule._endPeriod = endPeriodByFreq(start, rule);
current = events.length;
}
if (count && count === current) {
break;
}
} else {
if (count && count === current) {
break;
}
current++;
freq.next(start, rule);
freq.limit(start, end, rule);
}
}
return events;
}
function parseUTCDate(value, zone) {
value = kendo.parseDate(value, DATE_FORMATS); //Parse UTC to local time
if (value && zone) {
value = timezone.convert(value, value.getTimezoneOffset(), zone);
}
return value;
}
function parseDateRule(dateRule, zone) {
var pairs = dateRule.split(";");
var pair;
var property;
var value;
var tzid;
var valueIdx, valueLength;
for (var idx = 0, length = pairs.length; idx < length; idx++) {
pair = pairs[idx].split(":");
property = pair[0];
value = pair[1];
if (property.indexOf("TZID") !== -1) {
tzid = property.substring(property.indexOf("TZID")).split("=")[1];
}
if (value) {
value = value.split(",");
for (valueIdx = 0, valueLength = value.length; valueIdx < valueLength; valueIdx++) {
value[valueIdx] = parseUTCDate(value[valueIdx], tzid || zone);
}
}
}
if (value) {
return {
value: value,
tzid: tzid
};
}
}
function parseRule(recur, zone) {
var instance = {};
var splits, value;
var idx = 0, length;
var ruleValue = false;
var rule, part, parts;
var property, weekStart, weekDays;
var predicate = function(a, b) {
var day1 = a.day,
day2 = b.day;
if (day1 < weekStart) {
day1 += 7;
}
if (day2 < weekStart) {
day2 += 7;
}
return day1 - day2;
};
if (!recur) {
return null;
}
parts = recur.split("\n");
if (!parts[1] && (recur.indexOf("DTSTART") !== -1 || recur.indexOf("DTEND") !== -1 || recur.indexOf("EXDATE") !== -1)) {
parts = recur.split(" ");
}
for (idx = 0, length = parts.length; idx < length; idx++) {
part = parts[idx];
if (part.indexOf("DTSTART") !== -1) {
instance.start = parseDateRule(part, zone);
} else if (part.indexOf("DTEND") !== -1) {
instance.end = parseDateRule(part, zone);
} else if (part.indexOf("EXDATE") !== -1) {
instance.exdates = parseDateRule(part, zone);
} else if (part.indexOf("RRULE") !== -1) {
rule = part.substring(6);
} else { //improve this. support new row at the end of rule
rule = part;
}
}
rule = rule.split(";");
for (idx = 0, length = rule.length; idx < length; idx++) {
property = rule[idx];
splits = property.split("=");
value = $.trim(splits[1]).split(",");
switch ($.trim(splits[0]).toUpperCase()) {
case "FREQ":
instance.freq = value[0].toLowerCase();
break;
case "UNTIL":
instance.until = parseUTCDate(value[0], zone);
break;
case "COUNT":
instance.count = parseInt(value[0], 10);
break;
case "INTERVAL":
instance.interval = parseInt(value[0], 10);
break;
case "BYSECOND":
instance.seconds = parseArray(value, { start: 0, end: 60 });
ruleValue = true;
break;
case "BYMINUTE":
instance.minutes = parseArray(value, { start: 0, end: 59 });
ruleValue = true;
break;
case "BYHOUR":
instance.hours = parseArray(value, { start: 0, end: 23 });
ruleValue = true;
break;
case "BYMONTHDAY":
instance.monthDays = parseArray(value, { start: -31, end: 31 });
ruleValue = true;
break;
case "BYYEARDAY":
instance.yearDays = parseArray(value, { start: -366, end: 366 });
ruleValue = true;
break;
case "BYMONTH":
instance.months = parseArray(value, { start: 1, end: 12 });
ruleValue = true;
break;
case "BYDAY":
instance.weekDays = weekDays = parseWeekDayList(value);
ruleValue = true;
break;
case "BYWEEKNO":
instance.weeks = parseArray(value, { start: -53, end: 53 });
ruleValue = true;
break;
case "BYSETPOS":
instance.positions = parseArray(value, { start: -366, end: 366 });
break;
case "WKST":
instance.weekStart = weekStart = WEEK_DAYS_IDX[value[0]];
break;
}
}
if (instance.freq === undefined || (instance.count !== undefined && instance.until)) {
return null;
}
if (!instance.interval) {
instance.interval = 1;
}
if (weekStart === undefined) {
instance.weekStart = weekStart = kendo.culture().calendar.firstDay;
}
if (weekDays) {
instance.weekDays = weekDays.sort(predicate);
}
if (instance.positions && !ruleValue) {
instance.positions = null;
}
instance._hasRuleValue = ruleValue;
return instance;
}
function serializeDateRule(dateRule, zone) {
var value = dateRule.value;
var tzid = dateRule.tzid || "";
var length = value.length;
var idx = 0;
var val;
for (; idx < length; idx++) {
val = value[idx];
val = timezone.convert(val, tzid || zone || val.getTimezoneOffset(), "Etc/UTC");
value[idx] = kendo.toString(val, "yyyyMMddTHHmmssZ");
}
if (tzid) {
tzid = ";TZID=" + tzid;
}
return tzid + ":" + value.join(",") + " ";
}
function serialize(rule, zone) {
var weekStart = rule.weekStart;
var ruleString = "FREQ=" + rule.freq.toUpperCase();
var exdates = rule.exdates || "";
var start = rule.start || "";
var end = rule.end || "";
var until = rule.until;
if (rule.interval > 1) {
ruleString += ";INTERVAL=" + rule.interval;
}
if (rule.count) {
ruleString += ";COUNT=" + rule.count;
}
if (until) {
until = timezone.convert(until, zone || until.getTimezoneOffset(), "Etc/UTC");
ruleString += ";UNTIL=" + kendo.toString(until, "yyyyMMddTHHmmssZ");
}
if (rule.months) {
ruleString += ";BYMONTH=" + rule.months;
}
if (rule.weeks) {
ruleString += ";BYWEEKNO=" + rule.weeks;
}
if (rule.yearDays) {
ruleString += ";BYYEARDAY=" + rule.yearDays;
}
if (rule.monthDays) {
ruleString += ";BYMONTHDAY=" + rule.monthDays;
}
if (rule.weekDays) {
ruleString += ";BYDAY=" + serializeWeekDayList(rule.weekDays);
}
if (rule.hours) {
ruleString += ";BYHOUR=" + rule.hours;
}
if (rule.minutes) {
ruleString += ";BYMINUTE=" + rule.minutes;
}
if (rule.seconds) {
ruleString += ";BYSECOND=" + rule.seconds;
}
if (rule.positions) {
ruleString += ";BYSETPOS=" + rule.positions;
}
if (weekStart !== undefined) {
ruleString += ";WKST=" + WEEK_DAYS[weekStart];
}
if (start) {
start = "DTSTART" + serializeDateRule(start, zone);
}
if (end) {
end = "DTEND" + serializeDateRule(end, zone);
}
if (exdates) {
exdates = "EXDATE" + serializeDateRule(exdates, zone);
}
if (start || end || exdates) {
ruleString = start + end + exdates + "RRULE:" + ruleString;
}
return ruleString;
}
kendo.recurrence = {
rule: {
parse: parseRule,
serialize: serialize
},
expand: expand,
dayInYear: dayInYear,
weekInYear: weekInYear,
weekInMonth: weekInMonth,
numberOfWeeks: numberOfWeeks,
isException: isException,
toExceptionString: toExceptionString
};
var weekDayCheckBoxes = function(firstDay) {
var shortNames = kendo.culture().calendar.days.namesShort,
length = shortNames.length,
result = "",
idx = 0,
values = [];
for (; idx < length; idx++) {
values.push(idx);
}
shortNames = shortNames.slice(firstDay).concat(shortNames.slice(0, firstDay));
values = values.slice(firstDay).concat(values.slice(0, firstDay));
for (idx = 0; idx < length; idx++) {
result += '#:messages.repeatEvery#
' +
'
' +
'# } #' +
'# if (frequency === "weekly") { #' +
'#:messages.repeatOn#
' +
'#=weekDayCheckBoxes(firstWeekDay)#
' +
'# } else if (frequency === "monthly") { #' +
'#:messages.repeatOn#
' +
'' +
'# } else if (frequency === "yearly") { #' +
'#:messages.repeatOn#
' +
'' +
'# } #' +
'# if (frequency !== "never") { #' +
'#:end.label#
' +
'' +
'# } #'
);
var DAY_RULE = [
{ day: 0, offset: 0 },
{ day: 1, offset: 0 },
{ day: 2, offset: 0 },
{ day: 3, offset: 0 },
{ day: 4, offset: 0 },
{ day: 5, offset: 0 },
{ day: 6, offset: 0 }
];
var WEEKDAY_RULE = [
{ day: 1, offset: 0 },
{ day: 2, offset: 0 },
{ day: 3, offset: 0 },
{ day: 4, offset: 0 },
{ day: 5, offset: 0 }
];
var WEEKEND_RULE = [
{ day: 0, offset: 0 },
{ day: 6, offset: 0 }
];
var BaseRecurrenceEditor = Widget.extend({
init: function(element, options) {
var start;
var that = this;
var frequencies = options && options.frequencies;
Widget.fn.init.call(that, element, options);
that.wrapper = that.element;
options = that.options;
options.start = start = options.start || kendoDate.today();
if (frequencies) {
options.frequencies = frequencies;
}
if (typeof start === "string") {
options.start = kendo.parseDate(start, "yyyyMMddTHHmmss");
}
if (options.firstWeekDay === null) {
options.firstWeekDay = kendo.culture().calendar.firstDay;
}
that._namespace = "." + options.name;
},
options: {
value: "",
start: "",
timezone: "",
spinners: true,
firstWeekDay: null,
frequencies: [
"never",
"daily",
"weekly",
"monthly",
"yearly"
],
mobile: false,
messages: {
frequencies: {
never: "Never",
hourly: "Hourly",
daily: "Daily",
weekly: "Weekly",
monthly: "Monthly",
yearly: "Yearly"
},
hourly: {
repeatEvery: "Repeat every: ",
interval: " hour(s)"
},
daily: {
repeatEvery: "Repeat every: ",
interval: " day(s)"
},
weekly: {
interval: " week(s)",
repeatEvery: "Repeat every: ",
repeatOn: "Repeat on: "
},
monthly: {
repeatEvery: "Repeat every: ",
repeatOn: "Repeat on: ",
interval: " month(s)",
day: "Day "
},
yearly: {
repeatEvery: "Repeat every: ",
repeatOn: "Repeat on: ",
interval: " year(s)",
of: " of "
},
end: {
label: "End:",
mobileLabel: "Ends",
never: "Never",
after: "After ",
occurrence: " occurrence(s)",
on: "On "
},
offsetPositions: {
first: "first",
second: "second",
third: "third",
fourth: "fourth",
last: "last"
},
weekdays: {
day: "day",
weekday: "weekday",
weekend: "weekend day"
}
}
},
events: ["change"],
_initInterval: function() {
var that = this;
var rule = that._value;
that._container
.find(".k-recur-interval")
.kendoNumericTextBox({
spinners: that.options.spinners,
value: rule.interval || 1,
decimals: 0,
format: "#",
min: 1,
change: function() {
rule.interval = this.value();
that._trigger();
}
});
},
_weekDayRule: function(clear) {
var that = this;
var weekday = (that._weekDay.element || that._weekDay).val();
var offset = Number((that._weekDayOffset.element || that._weekDayOffset).val());
var weekDays = null;
var positions = null;
if (!clear) {
if (weekday === "day") {
weekDays = DAY_RULE;
positions = offset;
} else if (weekday === "weekday") {
weekDays = WEEKDAY_RULE;
positions = offset;
} else if (weekday === "weekend") {
weekDays = WEEKEND_RULE;
positions = offset;
} else {
weekDays = [{
offset: offset,
day: Number(weekday)
}];
}
}
that._value.weekDays = weekDays;
that._value.positions = positions;
},
_weekDayView: function() {
var that = this;
var weekDays = that._value.weekDays;
var positions = that._value.positions;
var weekDayOffsetWidget = that._weekDayOffset;
var weekDayOffset;
var weekDayValue;
var length;
var method;
if (weekDays) {
length = weekDays.length;
if (positions) {
if (length === 7) {
weekDayValue = "day";
weekDayOffset = positions;
} else if (length === 5) {
weekDayValue = "weekday";
weekDayOffset = positions;
} else if (length === 2) {
weekDayValue = "weekend";
weekDayOffset = positions;
}
}
if (!weekDayValue) {
weekDays = weekDays[0];
weekDayValue = weekDays.day;
weekDayOffset = weekDays.offset || "";
}
method = weekDayOffsetWidget.value ? "value" : "val";
weekDayOffsetWidget[method](weekDayOffset);
that._weekDay[method](weekDayValue);
}
},
_initWeekDay: function() {
var that = this, data;
var weekdayMessage = that.options.messages.weekdays;
var offsetMessage = that.options.messages.offsetPositions;
var weekDayInput = that._container.find(".k-recur-weekday");
var change = function() {
that._weekDayRule();
that._trigger();
};
if (weekDayInput[0]) {
that._weekDayOffset = new DropDownList(that._container.find(".k-recur-weekday-offset"), {
change: change,
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: offsetMessage.first, value: "1" },
{ text: offsetMessage.second, value: "2" },
{ text: offsetMessage.third, value: "3" },
{ text: offsetMessage.fourth, value: "4" },
{ text: offsetMessage.last, value: "-1" }
]
});
data = [
{ text: weekdayMessage.day, value: "day" },
{ text: weekdayMessage.weekday, value: "weekday" },
{ text: weekdayMessage.weekend, value: "weekend" }
];
that._weekDay = new DropDownList(weekDayInput, {
value: that.options.start.getDay(),
change: change,
dataTextField: "text",
dataValueField: "value",
dataSource: data.concat($.map(kendo.culture().calendar.days.names, function(dayName, idx) {
return {
text: dayName,
value: idx
};
}))
});
that._weekDayView();
}
},
_initWeekDays: function() {
var that = this;
var rule = that._value;
var weekDays = that._container.find(".k-recur-weekday-checkbox");
if (weekDays[0]) {
weekDays.on(CLICK + that._namespace, function() {
rule.weekDays = $.map(weekDays.filter(":checked"), function(checkbox) {
return {
day: Number(checkbox.value),
offset: 0
};
});
if (!that.options.mobile) {
that._trigger();
}
});
if (rule.weekDays) {
var idx, weekDay;
var i = 0, l = weekDays.length;
var length = rule.weekDays.length;
for (; i < l; i++) {
weekDay = weekDays[i];
for (idx = 0; idx < length; idx ++) {
if (weekDay.value == rule.weekDays[idx].day) {
weekDay.checked = true;
}
}
}
}
}
},
_initMonthDay: function() {
var that = this;
var rule = that._value;
var monthDayInput = that._container.find(".k-recur-monthday");
if (monthDayInput[0]) {
that._monthDay = new kendo.ui.NumericTextBox(monthDayInput, {
spinners: that.options.spinners,
min: 1,
max: 31,
decimals: 0,
format: "#",
value: rule.monthDays ? rule.monthDays[0] : that.options.start.getDate(),
change: function() {
var value = this.value();
rule.monthDays = value ? [value] : value;
that._trigger();
}
});
}
},
_initCount: function() {
var that = this,
input = that._container.find(".k-recur-count"),
rule = that._value;
that._count = input.kendoNumericTextBox({
spinners: that.options.spinners,
value: rule.count || 1,
decimals: 0,
format: "#",
min: 1,
change: function() {
rule.count = this.value();
that._trigger();
}
}).data("kendoNumericTextBox");
},
_initUntil: function() {
var that = this,
input = that._container.find(".k-recur-until"),
start = that.options.start,
rule = that._value,
until = rule.until;
that._until = input.kendoDatePicker({
min: until && until < start ? until : start,
value: until || start,
change: function() {
rule.until = this.value();
that._trigger();
}
}).data("kendoDatePicker");
},
_trigger: function() {
if (!this.options.mobile) {
this.trigger("change");
}
}
});
var RecurrenceEditor = BaseRecurrenceEditor.extend({
init: function(element, options) {
var that = this;
BaseRecurrenceEditor.fn.init.call(that, element, options);
that._initFrequency();
that._initContainer();
that.value(that.options.value);
},
options: {
name: "RecurrenceEditor"
},
events: [ "change" ],
destroy: function() {
var that = this;
that._frequency.destroy();
that._container.find("input[type=radio],input[type=checkbox]").off(CLICK + that._namespace);
kendo.destroy(that._container);
BaseRecurrenceEditor.fn.destroy.call(that);
},
value: function(value) {
var that = this,
timezone = that.options.timezone;
if (value === undefined) {
if (!that._value.freq) {
return "";
}
return serialize(that._value, timezone);
}
that._value = parseRule(value, timezone) || {};
that._frequency.value(that._value.freq || "");
that._initView(that._frequency.value());
},
_initContainer: function() {
var element = this.element,
container = $('
'),
editContainer = element.parent(".k-edit-field");
if (editContainer[0]) {
container.insertAfter(editContainer);
} else {
element.append(container);
}
this._container = container;
},
_initFrequency: function() {
var that = this,
options = that.options,
frequencies = options.frequencies,
messages = options.messages.frequencies,
ddl = $('#:headerTitle#
' +
'
' +
'
'
);
var RECURRENCE_REPEAT_PATTERN_TEMPLATE = kendo.template(
'# if (frequency !== "never") { #' +
'#:messages.repeatEvery#
' +
'
' +
'# } #' +
'# if (frequency === "weekly") { #' +
'#:messages.repeatOn#
' +
'#=weekDayCheckBoxes(firstWeekDay)#
' +
'# } else if (frequency === "monthly") { #' +
'#:messages.repeatBy#
' +
'
' +
'' +
'
#:messages.day#
' +
'
' +
'
' +
'
#:messages.every#
' +
'
' +
'
#:messages.day#
' +
'
' +
'
#:messages.repeatBy#
' +
'
' +
'' +
'
#:messages.day#
' +
'
' +
'
' +
'
#:messages.every#
' +
'
' +
'
#:messages.day#
' +
'
' +
'
#:messages.month#
' +
'
' +
'# } #'
);
var RECURRENCE_END_PATTERN_TEMPLATE = kendo.template(
'# if (endPattern === "count") { #' +
'#:messages.after#
' +
'
' +
'# } else if (endPattern === "until") { #' +
'#:messages.on#
' +
'
' +
'# } #'
);
var RECURRENCE_GROUP_BUTTON_TEMPLATE = kendo.template(
''
);
var MobileRecurrenceEditor = BaseRecurrenceEditor.extend({
init: function(element, options) {
var that = this;
BaseRecurrenceEditor.fn.init.call(that, element, options);
options = that.options;
that._optionTemplate = kendo.template('#:text# ');
that.value(options.value);
that._pane = options.pane;
that._initRepeatButton();
that._initRepeatEnd();
that._defaultValue = that._value;
},
options: {
name: "MobileRecurrenceEditor",
animations: {
left: "slide",
right: "slide:right"
},
mobile: true,
messages: {
cancel: "Cancel",
update: "Save",
endTitle: "Repeat ends",
repeatTitle: "Repeat pattern",
headerTitle: "Repeat event",
end: {
patterns: {
never: "Never",
after: "After...",
on: "On..."
},
never: "Never",
after: "End repeat after",
on: "End repeat on"
},
daily: {
interval: ""
},
hourly: {
interval: ""
},
weekly: {
interval: ""
},
monthly: {
interval: "",
repeatBy: "Repeat by: ",
dayOfMonth: "Day of the month",
dayOfWeek: "Day of the week",
repeatEvery: "Repeat every",
every: "Every",
day: "Day "
},
yearly: {
interval: "",
repeatBy: "Repeat by: ",
dayOfMonth: "Day of the month",
dayOfWeek: "Day of the week",
repeatEvery: "Repeat every: ",
every: "Every",
month: "Month",
day: "Day"
}
}
},
events: [ "change" ],
value: function(value) {
var that = this;
var timezone = that.options.timezone;
if (value === undefined) {
if (!that._value.freq) {
return "";
}
return serialize(that._value, timezone);
}
that._value = parseRule(value, timezone) || {};
},
destroy: function() {
this._destroyView();
kendo.destroy(this._endFields);
this._repeatButton.off(CLICK + this._namespace);
BaseRecurrenceEditor.fn.destroy.call(this);
},
_initRepeatButton: function() {
var that = this;
var freq = that.options.messages.frequencies[this._value.freq || "never"];
that._repeatButton = $('' + freq + ' ')
.on(CLICK + that._namespace, function(e) {
e.preventDefault();
that._createView("repeat");
that._pane.navigate("recurrence", that.options.animations.left);
});
that.element.append(that._repeatButton);
},
_initRepeatEnd: function() {
var that = this;
var endLabelField = $('' + that.options.messages.end.mobileLabel + '
').insertAfter(that.element.parent(".k-edit-field"));
var endEditField = $('')
.on(CLICK + that._namespace, function(e) {
e.preventDefault();
if (!that._value.freq) {
return;
}
that._createView("end");
that._pane.navigate("recurrence", that.options.animations.left);
})
.insertAfter(endLabelField);
that._endFields = endLabelField.add(endEditField).toggleClass("k-state-disabled", !that._value.freq);
that._endButton = endEditField.find(".k-scheduler-recur-end").text(that._endText());
},
_endText: function() {
var rule = this._value;
var messages = this.options.messages.end;
var text = messages.never;
if (rule.count) {
text = kendo.format("{0} {1}", messages.after, rule.count);
} else if (rule.until) {
text = kendo.format("{0} {1:d}", messages.on, rule.until);
}
return text;
},
_initFrequency: function() {
var that = this;
var frequencyMessages = that.options.messages.frequencies;
var html = RECURRENCE_GROUP_BUTTON_TEMPLATE({
dataSource: $.map(this.options.frequencies, function(frequency) {
return {
text: frequencyMessages[frequency],
value: frequency !== "never" ? frequency : ""
};
}),
value: that._value.freq || "",
ns: kendo.ns
});
that._view.element
.find(".k-recur-pattern")
.append(html)
.on(CLICK + that._namespace, ".k-scheduler-navigation li", function(e) {
var li = $(this);
e.preventDefault();
li.addClass("k-state-selected")
.siblings().removeClass("k-state-selected");
that._value = { freq: li.children("a").attr(kendo.attr("value")) };
that._initRepeatView();
});
},
_initEndNavigation: function() {
var that = this;
var endMessages = that.options.messages.end.patterns;
var rule = that._value;
var value = "";
if (rule.count) {
value = "count";
} else if (rule.until) {
value = "until";
}
var html = RECURRENCE_GROUP_BUTTON_TEMPLATE({
dataSource: [
{ text: endMessages.never, value: "" },
{ text: endMessages.after, value: "count" },
{ text: endMessages.on, value: "until" }
],
value: value,
ns: kendo.ns
});
that._view.element
.find(".k-recur-pattern")
.append(html)
.on(CLICK + that._namespace, ".k-scheduler-navigation li", function(e) {
var li = $(this);
var count = null;
var until = null;
e.preventDefault();
li.addClass("k-state-selected")
.siblings().removeClass("k-state-selected");
that._initEndView(li.children("a").attr(kendo.attr("value")));
if (that._count) {
count = that._count.value();
until = null;
} else if (that._until) {
count = null;
until = that._until.val ? kendo.parseDate(that._until.val(), "yyyy-MM-dd") : that._until.value();
}
rule.count = count;
rule.until = until;
});
},
_createView: function(viewType) {
var that = this;
var options = that.options;
var messages = options.messages;
var headerTitle = messages[viewType === "repeat" ? "repeatTitle" : "endTitle"];
var html = '';
return html;
},
showDialog: function(options) {
var html = kendo.format("';
var wrapper = this.element;
if (this.popup) {
this.popup.destroy();
}
var popup = this.popup = $(html).appendTo(wrapper)
.eq(0)
.on("click", ".k-button", function(e) {
e.preventDefault();
popup.close();
var buttonIndex = $(e.currentTarget).index();
options.buttons[buttonIndex].click();
})
.kendoWindow({
modal: true,
resizable: false,
draggable: false,
title: options.title,
visible: false,
close: function() {
this.destroy();
wrapper.focus();
}
})
.getKendoWindow();
popup.center().open();
},
_createPopupEditor: function(model) {
var that = this;
var editable = that.options.editable;
var html = '';
var container = this.container = $(html)
.appendTo(that.element).eq(0)
.kendoWindow(extend({
modal: true,
resizable: false,
draggable: true,
title: messages.editor.editorTitle,
visible: false,
close: function(e) {
if (e.userTriggered) {
if (that.trigger(CANCEL, { container: container, model: model })) {
e.preventDefault();
}
}
}
}, options));
var editableWidget = container.kendoEditable({
fields: editableFields,
model: model,
clearContainer: false,
validateOnBlur: true,
target: that.options.target
}).data("kendoEditable");
if (!that.trigger(EDIT, { container: container, model: model })) {
container.data("kendoWindow").center().open();
container.on(CLICK + NS, "a.k-scheduler-cancel", function(e) {
e.preventDefault();
e.stopPropagation();
that.trigger(CANCEL, { container: container, model: model });
});
container.on(CLICK + NS, "a.k-scheduler-update", function(e) {
e.preventDefault();
e.stopPropagation();
that.trigger("save", { container: container, model: model });
});
container.on(CLICK + NS, "a.k-scheduler-delete", function(e) {
e.preventDefault();
e.stopPropagation();
that.trigger(REMOVE, { container: container, model: model });
});
model.bind("change", that.toggleDateValidationHandler);
} else {
that.trigger(CANCEL, { container: container, model: model });
}
return editableWidget;
},
_initTimezoneEditor: function(model, activator) {
var that = this;
var container = that.container.find(".k-scheduler-timezones");
var checkbox = container.find(".k-timezone-toggle");
var endTimezoneRow = container.find(".k-edit-label:last").add(container.find(".k-edit-field:last"));
var saveButton = container.find(".k-scheduler-savetimezone");
var cancelButton = container.find(".k-scheduler-canceltimezone");
var timezonePopup = that._timezonePopup;
var startTimezoneChange = function(e) {
if (e.field === "startTimezone") {
var value = model.startTimezone;
checkbox.prop("disabled", !value);
if (!value) {
endTimezoneRow.hide();
model.set("endTimezone", "");
checkbox.prop("checked", false);
}
}
};
var wnd;
that._startTimezone = model.startTimezone;
that._endTimezone = model.endTimezone;
if (!timezonePopup) {
that._timezonePopup = timezonePopup = container.kendoWindow({
modal: true,
resizable: false,
draggable: true,
title: that.options.messages.editor.timezoneEditorTitle,
visible: false,
close: function(e) {
model.unbind("change", startTimezoneChange);
if (e.userTriggered) {
that._revertTimezones(model);
}
if (activator) {
activator.focus();
}
}
});
checkbox.click(function() {
endTimezoneRow.toggle(checkbox.prop("checked"));
model.set("endTimezone", "");
});
saveButton.click(function(e) {
e.preventDefault();
wnd.close();
});
cancelButton.click(function(e) {
e.preventDefault();
that._revertTimezones(model);
wnd.close();
});
model.bind("change", startTimezoneChange);
}
checkbox.prop("checked", model.endTimezone).prop("disabled", !model.startTimezone);
if (model.endTimezone) {
endTimezoneRow.show();
} else {
endTimezoneRow.hide();
}
wnd = timezonePopup.data("kendoWindow");
wnd.center().open();
}
});
var Scheduler = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
if (!that.options.views || !that.options.views.length) {
that.options.views = ["day", "week"];
}
that.resources = [];
that._initModel();
that._wrapper();
that._views();
that._toolbar();
that._dataSource();
that._resources();
that._resizeHandler = proxy(that.resize, that);
that.wrapper.on("mousedown" + NS + " selectstart" + NS, function(e) {
e.preventDefault();
});
if (that.options.editable && that.options.editable.resize !== false) {
that._resizable();
}
that._movable();
$(window).on("resize" + NS, that._resizeHandler);
if(that.options.messages && that.options.messages.recurrence) {
recurrence.options = that.options.messages.recurrence;
}
that._selectable();
that._ariaId = kendo.guid();
that._createEditor();
},
_isMobile: function() {
var options = this.options;
return (options.mobile === true && kendo.support.mobileOS) || options.mobile === "phone" || options.mobile === "tablet";
},
_isMobilePhoneView: function() {
var options = this.options;
return (options.mobile === true && kendo.support.mobileOS && !kendo.support.mobileOS.tablet) || options.mobile === "phone";
},
_selectable: function() {
var that = this,
wrapper = that.wrapper,
selectEvent = kendo.support.mobileOS ? "touchend" : "mousedown";
if (!that.options.selectable) {
return;
}
that._tabindex();
wrapper.on(selectEvent + NS, ".k-scheduler-header-all-day td, .k-scheduler-content td, .k-event", function(e) {
var which = e.which;
var button = e.button;
var browser = kendo.support.browser;
var isRight = which && which === 3 || button && button == 2;
if (kendo.support.mobileOS && e.isDefaultPrevented()) {
return;
}
if (!isRight) {
that._createSelection(e.currentTarget);
}
wrapper.focus();
if (browser.msie && browser.version < 9) {
setTimeout(function() {
wrapper.focus();
});
}
});
var mouseMoveHandler = $.proxy(that._mouseMove, that);
wrapper.on("mousedown" + NS, ".k-scheduler-header-all-day td, .k-scheduler-content td", function(e) {
var which = e.which;
var button = e.button;
var isRight = which && which === 3 || button && button == 2;
if (!isRight) {
wrapper.on("mousemove" + NS, ".k-scheduler-header-all-day td, .k-scheduler-content td", mouseMoveHandler);
}
});
wrapper.on("mouseup" + NS + " mouseleave" + NS, function() {
wrapper.off("mousemove" + NS, ".k-scheduler-header-all-day td, .k-scheduler-content td", mouseMoveHandler);
});
wrapper.on("focus" + NS, function() {
if (!that._selection) {
that._createSelection($(".k-scheduler-content").find("td:first"));
}
that._select();
});
wrapper.on("focusout" + NS, function() {
that.view().clearSelection();
that._ctrlKey = that._shiftKey = false;
});
wrapper.on("keydown" + NS, proxy(that._keydown, that));
wrapper.on("keyup" + NS, function(e) {
that._ctrlKey = e.ctrlKey;
that._shiftKey = e.shiftKey;
});
},
_select: function() {
var that = this;
var view = that.view();
var wrapper = that.wrapper;
var current = view.current();
var selection = that._selection;
if (current) {
current.removeAttribute("id");
current.removeAttribute("aria-label");
wrapper.removeAttr("aria-activedescendant");
}
view.select(selection);
current = view.current();
if (current && that._old !== current) {
var labelFormat;
var data = selection;
var events = that._selectedEvents();
var slots = view._selectedSlots;
if (events[0]) {
data = events[0] || selection;
labelFormat = kendo.format(that.options.messages.ariaEventLabel, data.title, data.start, data.start);
} else {
labelFormat = kendo.format(that.options.messages.ariaSlotLabel, data.start, data.end);
}
current.setAttribute("id", that._ariaId);
current.setAttribute("aria-label", labelFormat);
wrapper.attr("aria-activedescendant", that._ariaId);
that._old = current;
that.trigger("change", {
start: selection.start,
end: selection.end,
events: events,
slots: slots,
resources: view._resourceBySlot(selection)
});
}
},
_selectedEvents: function() {
var uids = this._selection.events;
var length = uids.length;
var idx = 0;
var event;
var events = [];
for (; idx < length; idx++) {
event = this.occurrenceByUid(uids[idx]);
if (event) {
events.push(event);
}
}
return events;
},
_mouseMove: function(e) {
var that = this;
clearTimeout(that._moveTimer);
that._moveTimer = setTimeout(function() {
var view = that.view();
var selection = that._selection;
if (selection) {
var slot = view.selectionByElement($(e.currentTarget));
if (slot && selection.groupIndex === slot.groupIndex) {
var startDate = slot.startDate();
var endDate = slot.endDate();
if (startDate >= selection.end) {
selection.backward = false;
} else if (endDate <= selection.start) {
selection.backward = true;
}
if (selection.backward) {
selection.start = startDate;
} else {
selection.end = endDate;
}
that._select();
}
}
}, 5);
},
_viewByIndex: function(index) {
var view, views = this.views;
for (view in views) {
if (!index) {
return view;
}
index--;
}
},
_keydown: function(e) {
var that = this,
key = e.keyCode,
view = that.view(),
editable = view.options.editable,
selection = that._selection,
shiftKey = e.shiftKey;
that._ctrlKey = e.ctrlKey;
that._shiftKey = e.shiftKey;
if (key === keys.TAB) {
if (view.moveToEvent(selection, shiftKey)) {
that._select();
e.preventDefault();
}
} else if (editable && key === keys.ENTER) {
// add/edit event
if (selection.events.length) {
if (editable.update !== false) {
that.editEvent(selection.events[0]);
}
} else if (editable.create !== false) {
if (selection.isAllDay) {
selection = $.extend({}, selection, {
end: kendo.date.addDays(selection.end, -1)
});
}
that.addEvent(extend({}, selection, view._resourceBySlot(selection)));
}
} else if (key === keys.DELETE && editable !== false && editable.destroy !== false) {
that.removeEvent(selection.events[0]);
} else if (key >= 49 && key <= 57) {
// switch to view 1-9
that.view(that._viewByIndex(key - 49));
} else if (view.move(selection, key, shiftKey)) {
if (view.inRange(selection)) {
that._select();
} else {
that.date(selection.start);
}
e.preventDefault();
}
that._adjustSelectedDate();
},
_createSelection: function(item) {
var uid, slot, selection;
if (!this._selection || (!this._ctrlKey && !this._shiftKey)) {
this._selection = {
events: [],
groupIndex: 0
};
}
item = $(item);
selection = this._selection;
uid = item.attr(kendo.attr("uid"));
slot = this.view().selectionByElement(item);
if (slot) {
selection.groupIndex = slot.groupIndex || 0;
}
if (uid) {
slot = getOccurrenceByUid(this._data, uid);
}
if (slot && slot.uid) {
uid = [slot.uid];
}
this._updateSelection(slot, uid);
this._adjustSelectedDate();
},
_updateSelection: function(dataItem, events) {
var selection = this._selection;
if (dataItem && selection) {
if (this._shiftKey && selection.start && selection.end) {
var backward = dataItem.end < selection.end,
view = this.view();
selection.end = dataItem.endDate ? dataItem.endDate() : dataItem.end;
if (backward && view._timeSlotInterval) {
kendo.date.setTime(selection.end, -view._timeSlotInterval());
}
} else {
selection.start = dataItem.startDate ? dataItem.startDate() : dataItem.start;
selection.end = dataItem.endDate ? dataItem.endDate() : dataItem.end;
}
if ("isDaySlot" in dataItem) {
selection.isAllDay = dataItem.isDaySlot;
} else {
selection.isAllDay = dataItem.isAllDay;
}
selection.index = dataItem.index;
if (this._ctrlKey) {
selection.events = selection.events.concat(events || []);
} else {
selection.events = events || [];
}
}
},
options: {
name: "Scheduler",
date: TODAY,
editable: true,
autoBind: true,
snap: true,
mobile: false,
timezone: "",
allDaySlot: true,
min: new Date(1900, 0, 1),
max: new Date(2099, 11, 31),
messages: {
today: "Today",
save: "Save",
cancel: "Cancel",
destroy: "Delete",
deleteWindowTitle: "Delete event",
ariaSlotLabel: "Selected from {0:t} to {1:t}",
ariaEventLabel: "{0} on {1:D} at {2:t}",
views: {
day: "Day",
week: "Week",
workWeek: "Work Week",
agenda: "Agenda",
month: "Month"
},
recurrenceMessages: {
deleteWindowTitle: "Delete Recurring Item",
deleteWindowOccurrence: "Delete current occurrence",
deleteWindowSeries: "Delete the series",
editWindowTitle: "Edit Recurring Item",
editWindowOccurrence: "Edit current occurrence",
editWindowSeries: "Edit the series"
},
editor: {
title: "Title",
start: "Start",
end: "End",
allDayEvent: "All day event",
description: "Description",
repeat: "Repeat",
timezone: " ",
startTimezone: "Start timezone",
endTimezone: "End timezone",
separateTimezones: "Use separate start and end time zones",
timezoneEditorTitle: "Timezones",
timezoneEditorButton: "Time zone",
timezoneTitle: "Time zones",
noTimezone: "No timezone",
editorTitle: "Event"
}
},
height: null,
width: null,
resources: [],
group: {
resources: [],
direction: "horizontal"
},
views: [],
selectable: false
},
events: [
REMOVE,
EDIT,
CANCEL,
SAVE,
"add",
"dataBinding",
"dataBound",
"moveStart",
"move",
"moveEnd",
"resizeStart",
"resize",
"resizeEnd",
"navigate",
"change"
],
destroy: function() {
var that = this,
element;
Widget.fn.destroy.call(that);
if (that.dataSource) {
that.dataSource.unbind(CHANGE, that._refreshHandler);
that.dataSource.unbind("progress", that._progressHandler);
that.dataSource.unbind("error", that._errorHandler);
}
if (that.calendar) {
that.calendar.destroy();
that.popup.destroy();
}
if (that.view()) {
that.view().destroy();
}
if (that._editor) {
that._editor.destroy();
}
if (this._moveDraggable) {
this._moveDraggable.destroy();
}
if (this._resizeDraggable) {
this._resizeDraggable.destroy();
}
element = that.element
.add(that.wrapper)
.add(that.toolbar)
.add(that.popup);
element.off(NS);
clearTimeout(that._moveTimer);
that._model = null;
that.toolbar = null;
that.element = null;
$(window).off("resize" + NS, that._resizeHandler);
kendo.destroy(that.wrapper);
},
setDataSource: function(dataSource) {
this.options.dataSource = dataSource;
this._dataSource();
if (this.options.autoBind) {
dataSource.fetch();
}
},
items: function() {
return this.wrapper.find(".k-event, .k-task");
},
_movable: function() {
var startSlot;
var endSlot;
var startTime;
var endTime;
var event;
var that = this;
var isMobile = that._isMobile();
var movable = that.options.editable && that.options.editable.move !== false;
var resizable = that.options.editable && that.options.editable.resize !== false;
if (movable || (resizable && isMobile)) {
that._moveDraggable = new kendo.ui.Draggable(that.element, {
distance: 0,
filter: ".k-event",
ignore: ".k-resize-handle",
holdToDrag: isMobile
});
if (movable) {
that._moveDraggable.bind("dragstart", function(e) {
var view = that.view();
var eventElement = e.currentTarget;
if (!view.options.editable || view.options.editable.move === false) {
e.preventDefault();
return;
}
if (isMobile && !eventElement.hasClass("k-event-active")) {
that.element.find(".k-event-active").removeClass("k-event-active");
e.preventDefault();
return;
}
event = that.occurrenceByUid(eventElement.attr(kendo.attr("uid")));
startSlot = view._slotByPosition(e.x.location, e.y.location);
startTime = startSlot.startOffset(e.x.location, e.y.location, that.options.snap);
endSlot = startSlot;
if (!startSlot || that.trigger("moveStart", { event: event })) {
e.preventDefault();
}
})
.bind("drag", function(e) {
var view = that.view();
var slot = view._slotByPosition(e.x.location, e.y.location);
if (!slot) {
return;
}
endTime = slot.startOffset(e.x.location, e.y.location, that.options.snap);
var distance = endTime - startTime;
view._updateMoveHint(event, slot.groupIndex, distance);
var range = moveEventRange(event, distance);
if (!that.trigger("move", {
event: event,
slot: { element: slot.element, start: slot.startDate(), end: slot.endDate() },
resources: view._resourceBySlot(slot),
start: range.start,
end: range.end
})) {
endSlot = slot;
} else {
view._updateMoveHint(event, slot.groupIndex, distance);
}
})
.bind("dragend", function(e) {
that.view()._removeMoveHint();
var distance = endTime - startTime;
var range = moveEventRange(event, distance);
var start = range.start;
var end = range.end;
var endResources = that.view()._resourceBySlot(endSlot);
var startResources = that.view()._resourceBySlot(startSlot);
var prevented = that.trigger("moveEnd", {
event: event,
slot: { element: endSlot.element, start: endSlot.startDate(), end: endSlot.endDate() },
start: start,
end: end,
resources: endResources
});
if (!prevented && (event.start.getTime() != start.getTime() ||
event.end.getTime() != end.getTime() || kendo.stringify(endResources) != kendo.stringify(startResources))) {
that._updateEvent(null, event, $.extend({ start: start, end: end }, endResources));
}
e.currentTarget.removeClass("k-event-active");
this.cancelHold();
})
.bind("dragcancel", function() {
that.view()._removeMoveHint();
this.cancelHold();
});
}
if (isMobile) {
that._moveDraggable.bind("hold", function(e) {
if (that.element.find(".k-scheduler-monthview").length) {
e.preventDefault();
}
that.element.find(".k-event-active").removeClass("k-event-active");
e.currentTarget.addClass("k-event-active");
});
that._moveDraggable.userEvents.bind("press", function(e) {
e.preventDefault();
});
}
}
},
_resizable: function() {
var startTime;
var endTime;
var event;
var slot;
var that = this;
function direction(handle) {
var directions = {
"k-resize-e": "east",
"k-resize-w": "west",
"k-resize-n": "north",
"k-resize-s": "south"
};
for (var key in directions) {
if (handle.hasClass(key)) {
return directions[key];
}
}
}
that._resizeDraggable = new kendo.ui.Draggable(that.element, {
distance: 0,
filter: ".k-resize-handle",
dragstart: function(e) {
var dragHandle = $(e.currentTarget);
var eventElement = dragHandle.closest(".k-event");
var uid = eventElement.attr(kendo.attr("uid"));
event = that.occurrenceByUid(uid);
slot = that.view()._slotByPosition(e.x.location, e.y.location);
if (that.trigger("resizeStart", { event: event })) {
e.preventDefault();
}
startTime = kendo.date.toUtcTime(event.start);
endTime = kendo.date.toUtcTime(event.end);
},
drag: function(e) {
if (!slot) {
return;
}
var dragHandle = $(e.currentTarget);
var dir = direction(dragHandle);
var view = that.view();
var currentSlot = view._slotByPosition(e.x.location, e.y.location);
if (!currentSlot || slot.groupIndex != currentSlot.groupIndex) {
return;
}
slot = currentSlot;
var originalStart = startTime;
var originalEnd = endTime;
if (dir == "south") {
if (!slot.isDaySlot && slot.end - kendo.date.toUtcTime(event.start) >= view._timeSlotInterval()) {
if (event.isAllDay) {
endTime = slot.startOffset(e.x.location, e.y.location, that.options.snap);
} else {
endTime = slot.endOffset(e.x.location, e.y.location, that.options.snap);
}
}
} else if (dir == "north") {
if (!slot.isDaySlot && kendo.date.toUtcTime(event.end) - slot.start >= view._timeSlotInterval()) {
startTime = slot.startOffset(e.x.location, e.y.location, that.options.snap);
}
} else if (dir == "east") {
if (slot.isDaySlot && kendo.date.toUtcTime(kendo.date.getDate(slot.endDate())) >= kendo.date.toUtcTime(kendo.date.getDate(event.start))) {
if (event.isAllDay) {
endTime = slot.startOffset(e.x.location, e.y.location, that.options.snap);
} else {
endTime = slot.endOffset(e.x.location, e.y.location, that.options.snap);
}
}
} else if (dir == "west") {
if (slot.isDaySlot && kendo.date.toUtcTime(kendo.date.getDate(event.end)) >= kendo.date.toUtcTime(kendo.date.getDate(slot.startDate()))) {
startTime = slot.startOffset(e.x.location, e.y.location, that.options.snap);
}
}
if (!that.trigger("resize", {
event: event,
slot: { element: slot.element, start: slot.startDate(), end: slot.endDate() },
start: kendo.timezone.toLocalDate(startTime),
end: kendo.timezone.toLocalDate(endTime),
resources: view._resourceBySlot(slot)
})) {
view._updateResizeHint(event, slot.groupIndex, startTime, endTime);
} else {
startTime = originalStart;
endTime = originalEnd;
}
},
dragend: function(e) {
var dragHandle = $(e.currentTarget);
var start = new Date(event.start.getTime());
var end = new Date(event.end.getTime());
var dir = direction(dragHandle);
that.view()._removeResizeHint();
if (dir == "south") {
end = kendo.timezone.toLocalDate(endTime);
} else if (dir == "north") {
start = kendo.timezone.toLocalDate(startTime);
} else if (dir == "east") {
end = kendo.date.getDate(kendo.timezone.toLocalDate(endTime));
} else if (dir == "west") {
start = new Date(kendo.timezone.toLocalDate(startTime));
start.setHours(0);
start.setMinutes(0);
}
var prevented = that.trigger("resizeEnd", {
event: event,
slot: { element: slot.element, start: slot.startDate(), end: slot.endDate() },
start: start,
end: end,
resources: that.view()._resourceBySlot(slot)
});
if (!prevented && end.getTime() >= start.getTime()) {
if (event.start.getTime() != start.getTime() || event.end.getTime() != end.getTime()) {
that._updateEvent(dir, event, { start: start, end: end });
}
}
slot = null;
event = null;
},
dragcancel: function() {
that.view()._removeResizeHint();
slot = null;
event = null;
}
});
},
_updateEvent: function(dir, event, eventInfo) {
var that = this;
var updateEvent = function(event, callback) {
try {
that._preventRefresh = true;
event.update(eventInfo);
that._convertDates(event);
} finally {
that._preventRefresh = false;
}
if (!that.trigger(SAVE, { event: event })) {
if (callback) {
callback();
}
that._updateSelection(event);
that.dataSource.sync();
}
};
var recurrenceHead = function(event) {
if (event.recurrenceRule) {
return that.dataSource.getByUid(event.uid);
} else {
return that.dataSource.get(event.recurrenceId);
}
};
var updateSeries = function() {
var head = recurrenceHead(event);
if (dir == "south" || dir == "north") {
if (eventInfo.start) {
var start = kendo.date.getDate(head.start);
kendo.date.setTime(start, getMilliseconds(eventInfo.start));
eventInfo.start = start;
}
if (eventInfo.end) {
var end = kendo.date.getDate(head.end);
kendo.date.setTime(end, getMilliseconds(eventInfo.end));
eventInfo.end = end;
}
}
that.dataSource._removeExceptions(head);
updateEvent(head);
};
var updateOccurrence = function() {
var head = recurrenceHead(event);
var callback = function() {
that._convertDates(head);
};
var exception = head.toOccurrence({ start: event.start, end: event.end });
updateEvent(that.dataSource.add(exception), callback);
};
var recurrenceMessages = that.options.messages.recurrenceMessages;
if (event.recurrenceRule || event.isOccurrence()) {
that.showDialog({
model: event,
title: recurrenceMessages.editWindowTitle,
text: recurrenceMessages.editRecurring ? recurrenceMessages.editRecurring : EDITRECURRING,
buttons: [
{ text: recurrenceMessages.editWindowOccurrence, click: updateOccurrence },
{ text: recurrenceMessages.editWindowSeries, click: updateSeries }
]
});
} else {
updateEvent(that.dataSource.getByUid(event.uid));
}
},
_modelForContainer: function(container) {
container = $(container).closest("[" + kendo.attr("uid") + "]");
return this.dataSource.getByUid(container.attr(kendo.attr("uid")));
},
showDialog: function(options) {
this._editor.showDialog(options);
},
focus: function() {
this.wrapper.focus();
},
_confirmation: function(callback, model) {
var editable = this.options.editable;
if (editable === true || editable.confirmation !== false) {
var messages = this.options.messages;
var text = typeof editable.confirmation === STRING ? editable.confirmation : DELETECONFIRM;
var buttons = [
{ name: "destroy", text: messages.destroy, click: function() { callback(); } }
];
if (!(this._isMobile() && kendo.mobile.ui.Pane)) {
buttons.push({ name: "canceledit", text: messages.cancel, click: function() { callback(true); } });
}
this.showDialog({
model: model,
text: text,
title: messages.deleteWindowTitle,
buttons: buttons
});
} else {
callback();
}
},
addEvent: function(eventInfo) {
var editable = this._editor.editable;
var dataSource = this.dataSource;
var event;
eventInfo = eventInfo || {};
var prevented = this.trigger("add", { event: eventInfo });
if (!prevented && ((editable && editable.end()) || !editable)) {
this.cancelEvent();
if (eventInfo && eventInfo.toJSON) {
eventInfo = eventInfo.toJSON();
}
event = dataSource.add(eventInfo);
if (event) {
this.cancelEvent();
this._editEvent(event);
}
}
},
saveEvent: function() {
var editor = this._editor;
if (!editor) {
return;
}
var editable = editor.editable;
var container = editor.container;
var model = this._modelForContainer(container);
if (container && editable && editable.end() &&
!this.trigger(SAVE, { container: container, event: model } )) {
if (model.isRecurrenceHead()) {
this.dataSource._removeExceptions(model);
}
if (!model.dirty && !model.isOccurrence()) {
this._convertDates(model, "remove");
}
this.dataSource.sync();
}
},
cancelEvent: function() {
var editor = this._editor;
var container = editor.container;
var model;
if (container) {
model = this._modelForContainer(container);
if (model && model.isOccurrence()) {
this._convertDates(model, "remove");
this._convertDates(this.dataSource.get(model.recurrenceId), "remove");
}
this.dataSource.cancelChanges(model);
//TODO: handle the cancel in UI
editor.close();
}
},
editEvent: function(uid) {
var model = typeof uid == "string" ? this.occurrenceByUid(uid) : uid;
if (!model) {
return;
}
this.cancelEvent();
if (model.isRecurring()) {
this._editRecurringDialog(model);
} else {
this._editEvent(model);
}
},
_editEvent: function(model) {
this._createPopupEditor(model);
},
_editRecurringDialog: function(model) {
var that = this;
var editOccurrence = function() {
if (model.isException()) {
that._editEvent(model);
} else {
that.addEvent(model);
}
};
var editSeries = function() {
if (model.recurrenceId) {
model = that.dataSource.get(model.recurrenceId);
}
that._editEvent(model);
};
var recurrenceMessages = that.options.messages.recurrenceMessages;
that.showDialog({
model: model,
title: recurrenceMessages.editWindowTitle,
text: recurrenceMessages.editRecurring ? recurrenceMessages.editRecurring : EDITRECURRING,
buttons: [
{ text: recurrenceMessages.editWindowOccurrence, click: editOccurrence },
{ text: recurrenceMessages.editWindowSeries, click: editSeries }
]
});
},
_createButton: function(command) {
var template = command.template || COMMANDBUTTONTMPL,
commandName = typeof command === STRING ? command : command.name || command.text,
options = { className: "k-scheduler-" + (commandName || "").replace(/\s/g, ""), text: commandName, attr: "" };
if (!commandName && !(isPlainObject(command) && command.template)) {
throw new Error("Custom commands should have name specified");
}
if (isPlainObject(command)) {
if (command.className) {
command.className += " " + options.className;
}
if (commandName === "edit" && isPlainObject(command.text)) {
command = extend(true, {}, command);
command.text = command.text.edit;
}
options = extend(true, options, defaultCommands[commandName], command);
} else {
options = extend(true, options, defaultCommands[commandName]);
}
return kendo.template(template)(options);
},
_convertDates: function(model, method) {
var timezone = this.dataSource.reader.timezone;
var startTimezone = model.startTimezone;
var endTimezone = model.endTimezone;
var start = model.start;
var end = model.start;
method = method || "apply";
startTimezone = startTimezone || endTimezone;
endTimezone = endTimezone || startTimezone;
if (startTimezone) {
if (timezone) {
if (method === "apply") {
start = kendo.timezone.convert(model.start, timezone, startTimezone);
end = kendo.timezone.convert(model.end, timezone, endTimezone);
} else {
start = kendo.timezone.convert(model.start, startTimezone, timezone);
end = kendo.timezone.convert(model.end, endTimezone, timezone);
}
} else {
start = kendo.timezone[method](model.start, startTimezone);
end = kendo.timezone[method](model.end, endTimezone);
}
model._set("start", start);
model._set("end", end);
}
},
_createEditor: function() {
var that = this;
var editor;
if (this._isMobile() && kendo.mobile.ui.Pane) {
editor = that._editor = new MobileEditor(this.wrapper, extend({}, this.options, {
target: this,
timezone: that.dataSource.reader.timezone,
resources: that.resources,
createButton: proxy(this._createButton, this)
}));
} else {
editor = that._editor = new PopupEditor(this.wrapper, extend({}, this.options, {
target: this,
createButton: proxy(this._createButton, this),
timezone: that.dataSource.reader.timezone,
resources: that.resources
}));
}
editor.bind("cancel", function(e) {
if (that.trigger("cancel", { container: e.container, event: e.model })) {
e.preventDefault();
return;
}
that.cancelEvent();
that.focus();
});
editor.bind("edit", function(e) {
if (that.trigger(EDIT, { container: e.container, event: e.model })) {
e.preventDefault();
}
});
editor.bind("save", function() {
that.saveEvent();
});
editor.bind("remove", function(e) {
that.removeEvent(e.model);
});
},
_createPopupEditor: function(model) {
var editor = this._editor;
if (!model.isNew() || model.isOccurrence()) {
if (model.isOccurrence()) {
this._convertDates(model.recurrenceId ? this.dataSource.get(model.recurrenceId) : model);
}
this._convertDates(model);
}
this.editable = editor.editEvent(model);
},
removeEvent: function(uid) {
var that = this,
model = typeof uid == "string" ? that.occurrenceByUid(uid) : uid;
if (!model) {
return;
}
if (model.isRecurring()) {
that._deleteRecurringDialog(model);
} else {
that._confirmation(function(cancel) {
if (!cancel) {
that._removeEvent(model);
}
}, model);
}
},
occurrenceByUid: function(uid) {
var occurrence = this.dataSource.getByUid(uid);
if (!occurrence) {
occurrence = getOccurrenceByUid(this._data, uid);
}
return occurrence;
},
occurrencesInRange: function(start, end) {
return new kendo.data.Query(this._data).filter({
logic: "or",
filters: [
{
logic: "and",
filters: [
{ field: "start", operator: "gte", value: start },
{ field: "end", operator: "gte", value: start },
{ field: "start", operator: "lt", value: end }
]
},
{
logic: "and",
filters: [
{ field: "start", operator: "lte", value: start },
{ field: "end", operator: "gt", value: start }
]
}
]
}).toArray();
},
_removeEvent: function(model) {
if (!this.trigger(REMOVE, { event: model })) {
if (this.dataSource.remove(model)) {
this.dataSource.sync();
}
}
},
_deleteRecurringDialog: function(model) {
var that = this;
var currentModel = model;
var deleteOccurrence = function() {
var occurrence = currentModel.recurrenceId ? currentModel : currentModel.toOccurrence();
var head = that.dataSource.get(occurrence.recurrenceId);
that._convertDates(head);
that._removeEvent(occurrence);
};
var deleteSeries = function() {
if (currentModel.recurrenceId) {
currentModel = that.dataSource.get(currentModel.recurrenceId);
}
that._removeEvent(currentModel);
};
var recurrenceMessages = that.options.messages.recurrenceMessages;
that.showDialog({
model: model,
title: recurrenceMessages.deleteWindowTitle,
text: recurrenceMessages.deleteRecurring ? recurrenceMessages.deleteRecurring : DELETERECURRING,
buttons: [
{ text: recurrenceMessages.deleteWindowOccurrence, click: deleteOccurrence },
{ text: recurrenceMessages.deleteWindowSeries, click: deleteSeries }
]
});
},
_unbindView: function(view) {
view.destroy();
},
_bindView: function(view) {
var that = this;
if (that.options.editable) {
if (that._viewRemoveHandler) {
view.unbind(REMOVE, that._viewRemoveHandler);
}
that._viewRemoveHandler = function(e) {
that.removeEvent(e.uid);
};
view.bind(REMOVE, that._viewRemoveHandler);
if (that._viewAddHandler) {
view.unbind(ADD, that._viewAddHandler);
}
that._viewAddHandler = function(e) {
that.addEvent(e.eventInfo);
};
view.bind(ADD, this._viewAddHandler);
if (that._viewEditHandler) {
view.unbind(EDIT, that._viewEditHandler);
}
that._viewEditHandler = function(e) {
that.editEvent(e.uid);
};
view.bind(EDIT, this._viewEditHandler);
}
if (that._viewNavigateHandler) {
view.unbind("navigate", that._viewNavigateHandler);
}
that._viewNavigateHandler = function(e) {
if (e.view) {
var switchWorkDay = "isWorkDay" in e;
var action = switchWorkDay ? "changeWorkDay" : "changeView";
if (!that.trigger("navigate", { view: e.view, isWorkDay: e.isWorkDay, action: action, date: e.date })) {
if (switchWorkDay) {
that._workDayMode = e.isWorkDay;
}
that._selectView(e.view);
that.date(e.date);
}
}
};
view.bind("navigate", that._viewNavigateHandler);
if (that._viewActivateHandler) {
view.unbind("activate", that._viewActivateHandler);
}
that._viewActivateHandler = function() {
var view = this;
if (that._selection) {
view.constrainSelection(that._selection);
that._select();
that._adjustSelectedDate();
}
};
view.bind("activate", that._viewActivateHandler);
},
_selectView: function(name) {
var that = this;
if (name && that.views[name]) {
if (that._selectedView) {
that._unbindView(that._selectedView);
}
that._selectedView = that._renderView(name);
that._selectedViewName = name;
that.toolbar
.find(".k-scheduler-views li")
.removeClass("k-state-selected")
.end()
.find(".k-view-" + name.replace(/\./g, "\\.").toLowerCase())
.addClass("k-state-selected");
}
},
view: function(name) {
var that = this;
if (name) {
that._selectView(name);
that.rebind();
return;
}
return that._selectedView;
},
_renderView: function(name) {
var view = this._initializeView(name);
this._bindView(view);
this._model.set("formattedDate", view.dateForTitle());
return view;
},
resize: function(force) {
var size = this.getSize();
var currentSize = this._size;
var view = this.view();
if (!view || !view.groups) {
return;
}
if (force || !currentSize || size.width !== currentSize.width || size.height !== currentSize.height) {
this.refresh({ action: "resize" });
this._size = size;
}
},
_adjustSelectedDate: function() {
var date = this._model.selectedDate,
selection = this._selection,
start = selection.start;
if (start && !kendo.date.isInDateRange(date, getDate(start), getDate(selection.end))) {
date.setFullYear(start.getFullYear(), start.getMonth(), start.getDate());
}
},
_initializeView: function(name) {
var view = this.views[name];
if (view) {
var isSettings = isPlainObject(view),
type = view.type;
if (typeof type === STRING) {
type = kendo.getter(view.type)(window);
}
if (type) {
view = new type(this.wrapper, trimOptions(extend(true, {}, this.options, isSettings ? view : {}, { resources: this.resources, date: this.date(), showWorkHours: this._workDayMode })));
} else {
throw new Error("There is no such view");
}
}
return view;
},
_views: function() {
var views = this.options.views;
var view;
var defaultView;
var selected;
var isSettings;
var name;
var type;
var idx;
var length;
this.views = {};
for (idx = 0, length = views.length; idx < length; idx++) {
var hasType = false;
view = views[idx];
isSettings = isPlainObject(view);
if (isSettings) {
type = name = view.type ? view.type : view;
if (typeof type !== STRING) {
name = view.title;
hasType = true;
}
} else {
type = name = view;
}
defaultView = defaultViews[name];
if (defaultView && !hasType) {
view.type = defaultView.type;
defaultView.title = this.options.messages.views[name];
if (defaultView.type === "day") {
defaultView.messages = { allDay: this.options.messages.allDay };
} else if (defaultView.type === "agenda") {
defaultView.messages = {
event: this.options.messages.event,
date: this.options.messages.date,
time: this.options.messages.time
};
}
}
view = extend({ title: name }, defaultView, isSettings ? view : {});
if (name) {
this.views[name] = view;
if (!selected || view.selected) {
selected = name;
}
}
}
if (selected) {
this._selectedViewName = selected; // toolbar is not rendered yet
}
},
rebind: function() {
this.dataSource.fetch();
},
_dataSource: function() {
var that = this,
options = that.options,
dataSource = options.dataSource;
dataSource = isArray(dataSource) ? { data: dataSource } : dataSource;
if (options.timezone && !(dataSource instanceof SchedulerDataSource)) {
dataSource = extend(true, dataSource, { schema: { timezone: options.timezone } });
} else if(dataSource instanceof SchedulerDataSource) {
options.timezone = dataSource.schema ? dataSource.schema.timezone : "";
}
if (that.dataSource && that._refreshHandler) {
that.dataSource
.unbind(CHANGE, that._refreshHandler)
.unbind("progress", that._progressHandler)
.unbind("error", that._errorHandler);
} else {
that._refreshHandler = proxy(that.refresh, that);
that._progressHandler = proxy(that._requestStart, that);
that._errorHandler = proxy(that._error, that);
}
that.dataSource = kendo.data.SchedulerDataSource.create(dataSource)
.bind(CHANGE, that._refreshHandler)
.bind("progress", that._progressHandler)
.bind("error", that._errorHandler);
that.options.dataSource = that.dataSource;
},
_error: function() {
this._progress(false);
},
_requestStart: function() {
this._progress(true);
},
_progress: function(toggle) {
var element = this.element.find(".k-scheduler-content");
kendo.ui.progress(element, toggle);
},
_resources: function() {
var that = this;
var resources = that.options.resources;
for (var idx = 0; idx < resources.length; idx++) {
var resource = resources[idx];
var field = resource.field;
var dataSource = resource.dataSource;
if (!field || !dataSource) {
throw new Error('The "field" and "dataSource" options of the scheduler resource are mandatory.');
}
that.resources.push({
field: field,
name: resource.name || field,
title: resource.title || field,
dataTextField: resource.dataTextField || "text",
dataValueField: resource.dataValueField || "value",
dataColorField: resource.dataColorField || "color",
valuePrimitive: resource.valuePrimitive != null ? resource.valuePrimitive : true,
multiple: resource.multiple || false,
dataSource: kendo.data.DataSource.create(dataSource)
});
}
var promises = $.map(that.resources, function(resource) {
return resource.dataSource.fetch();
});
$.when.apply(null, promises)
.then(function() {
if (that.options.autoBind) {
that.view(that._selectedViewName);
} else {
that._selectView(that._selectedViewName);
}
});
},
_initModel: function() {
var that = this;
that._model = kendo.observable({
selectedDate: new Date(this.options.date),
formattedDate: ""
});
that._model.bind("change", function(e) {
if (e.field === "selectedDate") {
that.view(that._selectedViewName);
}
});
},
_wrapper: function() {
var that = this;
var options = that.options;
var height = options.height;
var width = options.width;
that.wrapper = that.element
.addClass("k-widget k-scheduler k-floatwrap")
.attr("role", "grid")
.attr("aria-multiselectable", true);
if (that._isMobile()) {
that.wrapper.addClass("k-scheduler-mobile");
}
if (that._isMobilePhoneView()) {
that.wrapper.addClass("k-scheduler-phone");
}
if (height) {
that.wrapper.height(height);
}
if (width) {
that.wrapper.width(width);
}
},
date: function(value) {
if (value != null && getDate(value) >= getDate(this.options.min) && getDate(value) <= getDate(this.options.max)) {
this._model.set("selectedDate", value);
}
return getDate(this._model.get("selectedDate"));
},
_toolbar: function() {
var that = this;
var options = that.options;
var template = this._isMobilePhoneView() ? MOBILETOOLBARTEMPLATE : TOOLBARTEMPLATE;
var toolbar = $(template({
messages: options.messages,
ns: kendo.ns,
views: that.views
}));
that.wrapper.append(toolbar);
that.toolbar = toolbar;
kendo.bind(that.toolbar, that._model);
toolbar.on(CLICK + NS, ".k-scheduler-navigation li", function(e) {
var li = $(this);
var date = new Date(that.date());
var action = "";
e.preventDefault();
if (li.hasClass("k-nav-today")) {
action = "today";
date = new Date();
} else if (li.hasClass("k-nav-next")) {
action = "next";
date = that.view().nextDate();
} else if (li.hasClass("k-nav-prev")) {
action = "previous";
date = that.view().previousDate();
} else if (li.hasClass("k-nav-current") && !that._isMobilePhoneView()) {
that._showCalendar();
return; // TODO: Not good - refactor
}
if (!that.trigger("navigate", { view: that._selectedViewName, action: action, date: date })) {
that.date(date);
}
});
toolbar.on(CLICK + NS, ".k-scheduler-views li", function(e) {
e.preventDefault();
var name = $(this).attr(kendo.attr("name"));
if (!that.trigger("navigate", { view: name, action: "changeView", date: that.date() })) {
that.view(name);
}
});
toolbar.find("li").hover(function(){
$(this).addClass("k-state-hover");
}, function(){
$(this).removeClass("k-state-hover");
});
},
_showCalendar: function() {
var that = this,
target = that.toolbar.find(".k-nav-current"),
html = $('');
if (!that.popup) {
that.popup = new Popup(html, {
anchor: target,
activate: function() {
if (!that.calendar) {
that.calendar = new Calendar(this.element.find(".k-scheduler-calendar"),
{
change: function() {
var date = this.value();
if (!that.trigger("navigate", { view: that._selectedViewName, action: "changeDate", date: date })) {
that.date(date);
that.popup.close();
}
},
min: that.options.min,
max: that.options.max
});
}
that.calendar.value(that.date());
},
copyAnchorStyles: false
});
}
that.popup.open();
},
refresh: function(e) {
var that = this;
var view = this.view();
this._progress(false);
this.angular("cleanup", function(){
return { elements: that.items() };
});
e = e || {};
if (!view) {
return;
}
if (e && e.action === "itemchange" && (this._editor.editable || this._preventRefresh)) { // skip rebinding if editing is in progress
return;
}
if (this.trigger("dataBinding", { action: e.action || "rebind", index: e.index, items: e.items })) {
return;
}
if (!(e && e.action === "resize") && this._editor) {
this._editor.close();
}
this._data = this.dataSource.expand(view.startDate(), view.endDate());
view.render(this._data);
this.trigger("dataBound");
},
slotByPosition: function(x, y) {
var view = this.view();
if(!view._slotByPosition) {
return null;
}
var slot = view._slotByPosition(x, y);
if(!slot) {
return null;
}
return {
startDate: slot.startDate(),
endDate: slot.endDate(),
groupIndex: slot.groupIndex,
element: slot.element,
isDaySlot: slot.isDaySlot
};
},
slotByElement: function(element) {
var offset = $(element).offset();
return this.slotByPosition(offset.left, offset.top);
},
resourcesBySlot: function(slot) {
return this.view()._resourceBySlot(slot);
}
});
var defaultViews = {
day: {
type: "kendo.ui.DayView"
},
week: {
type: "kendo.ui.WeekView"
},
workWeek: {
type: "kendo.ui.WorkWeekView"
},
agenda: {
type: "kendo.ui.AgendaView"
},
month: {
type: "kendo.ui.MonthView"
}
};
ui.plugin(Scheduler);
var TimezoneEditor = Widget.extend({
init: function(element, options) {
var that = this,
zones = kendo.timezone.windows_zones;
if (!zones || !kendo.timezone.zones_titles) {
throw new Error('kendo.timezones.min.js is not included.');
}
Widget.fn.init.call(that, element, options);
that.wrapper = that.element;
that._zonesQuery = new kendo.data.Query(zones);
that._zoneTitleId = kendo.guid();
that._zoneTitlePicker();
that._zonePicker();
that.value(that.options.value);
},
options: {
name: "TimezoneEditor",
value: "",
optionLabel: "No timezone"
},
events: [ "change" ],
_zoneTitlePicker: function() {
var that = this,
zoneTitle = $('#=name# ');
var ZONEOPTIONTEMPLATE = kendo.template('#=territory# ');
var MobileTimezoneEditor = Widget.extend({
init: function(element, options) {
var that = this,
zones = kendo.timezone.windows_zones;
if (!zones || !kendo.timezone.zones_titles) {
throw new Error('kendo.timezones.min.js is not included.');
}
Widget.fn.init.call(that, element, options);
that.wrapper = that.element;
that._zonesQuery = new kendo.data.Query(zones);
that._zoneTitlePicker();
that._zonePicker();
that.value(that.options.value);
},
options: {
name: "MobileTimezoneEditor",
optionLabel: "No timezone",
value: ""
},
events: [ "change" ],
_bindZones: function(value) {
var data = value ? this._filter(value) : [];
this._zone.html(this._options(data, ZONEOPTIONTEMPLATE));
},
_filter: function(value) {
return this._zonesQuery.filter({ field: "other_zone", operator: "eq", value: value }).data;
},
_options: function(data, template, optionLabel) {
var idx = 0;
var html = "";
var length = data.length;
if (optionLabel) {
html += template({ other_zone: "", name: optionLabel });
}
for (; idx < length; idx++) {
html += template(data[idx]);
}
return html;
},
_zoneTitlePicker: function() {
var that = this;
var options = that._options(kendo.timezone.zones_titles, ZONETITLEOPTIONTEMPLATE, that.options.optionLabel);
that._zoneTitle = $('' + options + ' ')
.appendTo(that.wrapper)
.change(function() {
var value = this.value;
var zone = that._zone;
that._bindZones(value);
if (value && zone[0].children.length > 1) {
zone.show();
} else {
zone.hide();
}
that._value = zone[0].value;
that.trigger("change");
});
},
_zonePicker: function() {
var that = this;
that._zone = $('
");
this.header = element.find(DOT + listStyles.gridHeaderWrap);
this.content = element.find(DOT + listStyles.gridContent);
},
_header: function() {
var domTree = this.headerTree;
var colgroup;
var thead;
var table;
colgroup = kendoDomElement("colgroup", null, this._cols());
thead = kendoDomElement("thead", { "role": "rowgroup" }, [kendoDomElement("tr", { "role": "row" }, this._ths())]);
table = kendoDomElement("table", {
"style": { "min-width": this.options.listWidth + "px" },
"role": "grid"
}, [colgroup, thead]);
domTree.render([table]);
},
_render: function(tasks) {
var colgroup;
var tbody;
var table;
this.levels = [{ field: null, value: 0 }];
colgroup = kendoDomElement("colgroup", null, this._cols());
tbody = kendoDomElement("tbody", { "role": "rowgroup" }, this._trs(tasks));
table = kendoDomElement("table", {
"style": { "min-width": this.options.listWidth + "px" },
"tabIndex": 0,
"role": "treegrid"
}, [colgroup, tbody]);
this.contentTree.render([table]);
this.trigger("render");
},
_ths: function() {
var columns = this.columns;
var column;
var attr;
var ths = [];
for (var i = 0, length = columns.length; i < length; i++) {
column = columns[i];
attr = {
"data-field": column.field,
"data-title": column.title, className: GanttList.styles.header,
"role": "columnheader"
};
ths.push(kendoDomElement("th", attr, [kendoTextElement(column.title)]));
}
return ths;
},
_cols: function() {
var columns = this.columns;
var column;
var style;
var width;
var cols = [];
for (var i = 0, length = columns.length; i < length; i++) {
column = columns[i];
width = column.width;
if (width && parseInt(width, 10) !== 0) {
style = { style: { width: typeof width === STRING ? width : width + "px" } };
} else {
style = null;
}
cols.push(kendoDomElement("col", style, []));
}
return cols;
},
_trs: function(tasks) {
var task;
var rows = [];
var attr;
var className = [];
var level;
var listStyles = GanttList.styles;
for (var i = 0, length = tasks.length; i < length; i++) {
task = tasks[i];
level = this._levels({
idx: task.parentId,
id: task.id,
summary: task.summary
});
attr = {
"data-uid": task.uid,
"data-level": level,
"role": "row"
};
if (task.summary) {
attr["aria-expanded"] = task.expanded;
}
if (i % 2 !== 0) {
className.push(listStyles.alt);
}
if (task.summary) {
className.push(listStyles.group);
}
if (className.length) {
attr.className = className.join(" ");
}
rows.push(this._tds({
task: task,
attr: attr,
level: level
}));
className = [];
}
return rows;
},
_tds: function(options) {
var children = [];
var columns = this.columns;
var column;
for (var i = 0, l = columns.length; i < l; i++) {
column = columns[i];
children.push(this._td({ task: options.task, column: column, level: options.level }));
}
return kendoDomElement("tr", options.attr, children);
},
_td: function(options) {
var children = [];
var listStyles = GanttList.styles;
var task = options.task;
var column = options.column;
var value = task.get(column.field);
var formatedValue = column.format ? kendo.format(column.format, value) : value;
if (column.field === "title") {
children = createPlaceholders({ level: options.level, className: listStyles.iconPlaceHolder });
children.push(kendoDomElement("span", {
className: listStyles.icon + " " + (task.summary ? (task.expanded ? listStyles.iconCollapse : listStyles.iconExpand)
: listStyles.iconHidden)
}));
}
children.push(kendoDomElement("span", null, [kendoTextElement(formatedValue)]));
return kendoDomElement("td", { "role": "gridcell" }, children);
},
_levels: function(options) {
var levels = this.levels;
var level;
var summary = options.summary;
var idx = options.idx;
var id = options.id;
for (var i = 0, length = levels.length; i < length; i++) {
level = levels[i];
if (level.field == idx) {
if (summary) {
levels.push({ field: id, value: level.value + 1 });
}
return level.value;
}
}
},
_sortable: function() {
var columns = this.columns;
var column;
var sortableInstance;
var cells = this.header.find("th");
var cell;
for (var idx = 0, length = cells.length; idx < length; idx++) {
column = columns[idx];
if (column.sortable) {
cell = cells.eq(idx);
sortableInstance = cell.data("kendoColumnSorter");
if (sortableInstance) {
sortableInstance.destroy();
}
cell.attr("data-" + kendo.ns + "field", column.field)
.kendoColumnSorter({ dataSource: this.dataSource });
}
}
cells = null;
},
_selectable: function() {
var that = this;
var selectable = this.options.selectable;
if (selectable) {
this.content
.on(CLICK + NS, "tr", function(e) {
var element = $(this);
if (!e.ctrlKey) {
that.select(element);
} else {
that.clearSelection();
}
});
}
},
select: function(value) {
var element = this.content.find(value);
var selectedClassName = GanttList.styles.selected;
if (element.length) {
element
.siblings(DOT + selectedClassName)
.removeClass(selectedClassName)
.attr("aria-selected", false)
.end()
.addClass(selectedClassName)
.attr("aria-selected", true);
this.trigger("change");
return;
}
return this.content.find(DOT + selectedClassName);
},
clearSelection: function() {
var selected = this.select();
if (selected.length) {
selected.removeClass(GanttList.styles.selected);
this.trigger("change");
}
},
_setDataSource: function(dataSource) {
this.dataSource = dataSource;
},
_editable: function() {
var that = this;
var listStyles = GanttList.styles;
var iconSelector = "span." + listStyles.icon + ":not(" + listStyles.iconHidden +")";
var finishEdit = function() {
if (that.editable && that.editable.end()) {
that._closeCell();
}
};
var mousedown = function(e) {
var currentTarget = $(e.currentTarget);
if (!currentTarget.hasClass(listStyles.editCell)) {
blurActiveElement();
}
};
if (this.options.editable !== true) {
return;
}
this._startEditHandler = function(e) {
var td = e.currentTarget ? $(e.currentTarget) : e;
var column = that._columnFromElement(td);
if (that.editable) {
return;
}
if (column.editable) {
that._editCell({ cell: td, column: column });
}
};
that.content
.on("focusin" + NS, function() {
clearTimeout(that.timer);
that.timer = null;
})
.on("focusout" + NS, function() {
that.timer = setTimeout(finishEdit, 1);
})
.on("keydown" + NS, function(e) {
var key = e.keyCode;
var cell;
var model;
switch (key) {
case keys.ENTER:
blurActiveElement();
finishEdit();
break;
case keys.ESC:
cell = that._editableContainer;
model = that._modelFromElement(cell);
if (!that.trigger("cancel", { model: model, cell: cell })) {
that._closeCell(true);
}
break;
}
});
if (!mobileOS) {
that.content
.on("mousedown" + NS, "td", function(e) {
mousedown(e);
})
.on("dblclick" + NS, "td", function(e) {
if (!$(e.target).is(iconSelector)) {
that._startEditHandler(e);
}
});
} else {
that.touch = that.content
.kendoTouch({
filter: "td",
touchstart: function(e) {
mousedown(e.touch);
},
doubletap: function(e) {
if (!$(e.touch.initialTouch).is(iconSelector)) {
that._startEditHandler(e.touch);
}
}
}).data("kendoTouch");
}
},
_editCell: function(options) {
var listStyles = GanttList.styles;
var cell = options.cell;
var column = options.column;
var model = this._modelFromElement(cell);
var modelCopy = this.dataSource._createNewModel(model.toJSON());
var field = modelCopy.fields[column.field] || modelCopy[column.field];
var validation = field.validation;
var DATATYPE = kendo.attr("type");
var BINDING = kendo.attr("bind");
var attr = {
"name": column.field,
"required": field.validation ?
field.validation.required === true : false
};
var editor;
this._editableContent = cell.children().detach();
this._editableContainer = cell;
cell.data("modelCopy", modelCopy);
if ((field.type === "date" || $.type(field) === "date") &&
/H|m|s|F|g|u/.test(column.format)) {
attr[BINDING] = "value:" + column.field;
attr[DATATYPE] = "date";
editor = function(container, options) {
$('");
this.content.append(milestone);
milestoneWidth = milestone[0].getBoundingClientRect().width;
milestone.remove();
return milestoneWidth;
},
_renderTask: function(task, position) {
var taskWrapper;
var taskElement;
var editable = this.options.editable;
var progressHandleLeft;
var taskLeft = position.left;
var styles = GanttView.styles;
var wrapClassName = styles.taskWrap;
if (task.summary) {
taskElement = this._renderSummary(task, position);
} else if (task.isMilestone()) {
taskElement = this._renderMilestone(task, position);
wrapClassName += " " + styles.taskMilestoneWrap;
} else {
taskElement = this._renderSingleTask(task, position);
}
taskWrapper = kendoDomElement("div", { className: wrapClassName, style: { left: taskLeft + "px" } }, [
taskElement
]);
if (editable) {
taskWrapper.children.push(kendoDomElement("div", { className: styles.taskDot + " " + styles.taskDotStart }));
taskWrapper.children.push(kendoDomElement("div", { className: styles.taskDot + " " + styles.taskDotEnd }));
}
if (!task.summary && !task.isMilestone() && editable) {
progressHandleLeft = Math.round(position.width * task.percentComplete);
taskWrapper.children.push(kendoDomElement("div", { className: styles.taskDragHandle, style: { left: progressHandleLeft + "px" } }));
}
return taskWrapper;
},
_renderSingleTask: function(task, position) {
var styles = GanttView.styles;
var progressWidth = Math.round(position.width * task.percentComplete);
var content = kendoDomElement("div", { className: styles.taskContent }, [
kendoDomElement("div", { className: styles.taskTemplate }, [
kendoTextElement(task.title)
])
]);
if (this.options.editable) {
content.children.push(kendoDomElement("span", { className: styles.taskActions }, [
kendoDomElement("a", { className: styles.link + " " + styles.taskDelete, href: "#" }, [
kendoDomElement("span", { className: styles.icon + " " + styles.iconDelete })
])
]));
content.children.push(kendoDomElement("span", { className: styles.taskResizeHandle + " " + styles.taskResizeHandleWest }));
content.children.push(kendoDomElement("span", { className: styles.taskResizeHandle + " " + styles.taskResizeHandleEast }));
}
var element = kendoDomElement("div", { className: styles.task + " " + styles.taskSingle, "data-uid": task.uid, style: { width: Math.max((position.width - 2), 0) + "px" } }, [
kendoDomElement("div", { className: styles.taskComplete, style: { width: progressWidth + "px" } }),
content
]);
return element;
},
_renderMilestone: function(task, position) {
var styles = GanttView.styles;
var element = kendoDomElement("div", { className: styles.task + " " + styles.taskMilestone, "data-uid": task.uid });
return element;
},
_renderSummary: function(task, position) {
var styles = GanttView.styles;
var progressWidth = Math.round(position.width * task.percentComplete);
var element = kendoDomElement("div", { className: styles.task + " " + styles.taskSummary, "data-uid": task.uid, style: { width: position.width + "px" } }, [
kendoDomElement("div", { className: styles.taskSummaryProgress, style: { width: progressWidth + "px" } }, [
kendoDomElement("div", { className: styles.taskSummaryComplete, style: { width: position.width + "px" } })
])
]);
return element;
},
_taskPosition: function(task) {
var round = Math.round;
var startLeft = round(this._offset(task.start));
var endLeft = round(this._offset(task.end));
return { left: startLeft, width: endLeft - startLeft };
},
_offset: function(date) {
var slots = this._timeSlots();
var slot;
var startOffset;
var slotDuration;
var slotOffset;
var startIndex = this._slotIndex("start", date);
slot = slots[startIndex];
if (slot.end < date) {
return slot.offsetLeft + slot.offsetWidth;
}
if (slot.start > date) {
return slot.offsetLeft;
}
startOffset = date - slot.start;
slotDuration = slot.end - slot.start;
slotOffset = (startOffset / slotDuration) * slot.offsetWidth;
return slot.offsetLeft + slotOffset;
},
_slotIndex: function(field, value) {
var slots = this._timeSlots();
var startIdx = 0;
var endIdx = slots.length - 1;
var middle;
do {
middle = Math.ceil((endIdx + startIdx) / 2);
if (slots[middle][field] < value) {
startIdx = middle;
} else {
if (middle === endIdx) {
middle--;
}
endIdx = middle;
}
} while (startIdx !== endIdx);
return startIdx;
},
_timeByPosition: function(x, snap, snapToEnd) {
var slot = this._slotByPosition(x);
if (snap) {
return snapToEnd ? slot.end : slot.start;
}
var offsetLeft = x - (this.content.offset().left - this.content.scrollLeft());
var duration = slot.end - slot.start;
var slotOffset = duration * ((offsetLeft - slot.offsetLeft) / slot.offsetWidth);
return new Date(slot.start.getTime() + slotOffset);
},
_slotByPosition: function(x) {
var offsetLeft = x - (this.content.offset().left - this.content.scrollLeft());
var slotIndex = this._slotIndex("offsetLeft", offsetLeft);
return this._timeSlots()[slotIndex];
},
_renderDependencies: function(dependencies) {
var elements = [];
var tree = this._dependencyTree;
for (var i = 0, l = dependencies.length; i < l; i++) {
elements.push.apply(elements, this._renderDependency(dependencies[i]));
}
tree.render(elements);
},
_renderDependency: function(dependency) {
var predecessor = this._taskCoordinates[dependency.predecessorId];
var successor = this._taskCoordinates[dependency.successorId];
var elements;
var method;
if (!predecessor || !successor) {
return [];
}
method = "_render" + ["FF", "FS", "SF", "SS"][dependency.type];
elements = this[method](predecessor, successor);
for (var i = 0, length = elements.length; i < length; i++) {
elements[i].attr["data-uid"] = dependency.uid;
}
return elements;
},
_renderFF: function(from, to) {
var lines = this._dependencyFF(from, to, false);
lines[lines.length - 1].children[0] = this._arrow(true);
return lines;
},
_renderSS: function(from, to) {
var lines = this._dependencyFF(to, from, true);
lines[0].children[0] = this._arrow(false);
return lines.reverse();
},
_renderFS: function(from, to) {
var lines = this._dependencyFS(from, to, false);
lines[lines.length - 1].children[0] = this._arrow(false);
return lines;
},
_renderSF: function(from, to) {
var lines = this._dependencyFS(to, from, true);
lines[0].children[0] = this._arrow(true);
return lines.reverse();
},
_dependencyFF: function(from, to, reverse) {
var that = this;
var lines = [];
var left = 0;
var top = 0;
var width = 0;
var height = 0;
var dir = reverse ? "start" : "end";
var delta;
var overlap = 2;
var arrowOverlap = 1;
var rowHeight = this._rowHeight;
var minLineWidth = 10;
var fromTop = from.rowIndex * rowHeight + Math.floor(rowHeight / 2) - 1;
var toTop = to.rowIndex * rowHeight + Math.floor(rowHeight / 2) - 1;
var styles = GanttView.styles;
var addHorizontal = function() {
lines.push(that._line(styles.line + " " + styles.lineHorizontal, { left: left + "px", top: top + "px", width: width + "px" }));
};
var addVertical = function() {
lines.push(that._line(styles.line + " " + styles.lineVertical, { left: left + "px", top: top + "px", height: height + "px" }));
};
left = from[dir];
top = fromTop;
width = minLineWidth;
delta = to[dir] - from[dir];
if ((delta) > 0 !== reverse) {
width = Math.abs(delta) + minLineWidth;
}
if (reverse) {
left -= width;
width -= arrowOverlap;
addHorizontal();
} else {
addHorizontal();
left += width - overlap;
}
if (toTop < top) {
height = top - toTop;
height += overlap;
top = toTop;
addVertical();
} else {
height = toTop - top;
height += overlap;
addVertical();
top += (height - overlap);
}
width = Math.abs(left - to[dir]);
if (!reverse) {
width -= arrowOverlap;
left -= width;
}
addHorizontal();
return lines;
},
_dependencyFS: function(from, to, reverse) {
var that = this;
var lines = [];
var left = 0;
var top = 0;
var width = 0;
var height = 0;
var rowHeight = this._rowHeight;
var minLineHeight = Math.floor(rowHeight / 2);
var minLineWidth = 10;
var minDistance = 2 * minLineWidth;
var delta = to.start - from.end;
var overlap = 2;
var arrowOverlap = 1;
var fromTop = from.rowIndex * rowHeight + Math.floor(rowHeight / 2) - 1;
var toTop = to.rowIndex * rowHeight + Math.floor(rowHeight / 2) - 1;
var styles = GanttView.styles;
var addHorizontal = function() {
lines.push(that._line(styles.line + " " + styles.lineHorizontal, { left: left + "px", top: top + "px", width: width + "px" }));
};
var addVertical = function() {
lines.push(that._line(styles.line + " " + styles.lineVertical, { left: left + "px", top: top + "px", height: height + "px" }));
};
left = from.end;
top = fromTop;
width = minLineWidth;
if (reverse) {
left += arrowOverlap;
if (delta > minDistance) {
width = delta - (minLineWidth - overlap);
}
width -= arrowOverlap;
}
addHorizontal();
left += width - overlap;
if ((delta) <= minDistance) {
height = reverse ? Math.abs(toTop - fromTop) - minLineHeight : minLineHeight;
if (toTop < fromTop) {
top -= height;
height += overlap;
addVertical();
} else {
addVertical();
top += height;
}
width = (from.end - to.start) + minDistance;
if (width < minLineWidth) {
width = minLineWidth;
}
left -= width - overlap;
addHorizontal();
}
if (toTop < fromTop) {
height = top - toTop;
top = toTop;
height += overlap;
addVertical();
} else {
height = toTop - top;
addVertical();
top += height;
}
width = to.start - left;
if (!reverse) {
width -= arrowOverlap;
}
addHorizontal();
return lines;
},
_line: function(className, styles) {
return kendoDomElement("div", { className: className, style: styles });
},
_arrow: function(direction) {
return kendoDomElement("span", { className: direction ? GanttView.styles.arrowWest : GanttView.styles.arrowEast });
},
_colgroup: function() {
var slots = this._timeSlots();
var count = slots.length;
var cols = [];
for (var i = 0; i < count; i++) {
for (var j = 0, length = slots[i].span; j < length; j++) {
cols.push(kendoDomElement("col"));
}
}
return kendoDomElement("colgroup", null, cols);
},
_createDragHint: function(element) {
this._dragHint = element
.clone()
.addClass(GanttView.styles.dragHint)
.css("cursor", "move");
element
.parent()
.append(this._dragHint);
},
_updateDragHint: function(start) {
var left = this._offset(start);
this._dragHint
.css({
"left": left
});
},
_removeDragHint: function() {
this._dragHint.remove();
this._dragHint = null;
},
_createResizeHint: function(task) {
var styles = GanttView.styles;
var taskTop = this._taskCoordinates[task.id].rowIndex * this._rowHeight;
var tooltipHeight;
var tooltipTop;
this._resizeHint = $(RESIZE_HINT({ styles: styles })).css({
"top": 0,
"height": this._contentHeight
});
this.content.append(this._resizeHint);
this._resizeTooltip = $(RESIZE_TOOLTIP_TEMPLATE({ styles: styles, start: task.start, end: task.end }))
.css({
"top": 0,
"left": 0
});
this.content.append(this._resizeTooltip);
this._resizeTooltipWidth = this._resizeTooltip.outerWidth();
tooltipHeight = this._resizeTooltip.outerHeight();
tooltipTop = taskTop - tooltipHeight;
if (tooltipTop < 0) {
tooltipTop = taskTop + this._rowHeight;
}
this._resizeTooltipTop = tooltipTop;
},
_updateResizeHint: function(start, end, resizeStart) {
var left = this._offset(start);
var right = this._offset(end);
var width = right - left;
var tooltipLeft = resizeStart ? left : right;
var tablesWidth = this._tableWidth - 17;
var tooltipWidth = this._resizeTooltipWidth;
this._resizeHint
.css({
"left": left,
"width": width
});
if (this._resizeTooltip) {
this._resizeTooltip.remove();
}
tooltipLeft -= Math.round(tooltipWidth / 2);
if (tooltipLeft < 0) {
tooltipLeft = 0;
} else if (tooltipLeft + tooltipWidth > tablesWidth) {
tooltipLeft = tablesWidth - tooltipWidth;
}
this._resizeTooltip = $(RESIZE_TOOLTIP_TEMPLATE({ styles: GanttView.styles, start: start, end: end }))
.css({
"top": this._resizeTooltipTop,
"left": tooltipLeft,
"min-width": tooltipWidth
});
this.content.append(this._resizeTooltip);
},
_removeResizeHint: function() {
this._resizeHint.remove();
this._resizeHint = null;
this._resizeTooltip.remove();
this._resizeTooltip = null;
},
_updatePercentCompleteTooltip: function(top, left, text) {
this._removePercentCompleteTooltip();
var tooltip = this._percentCompleteResizeTooltip = $(PERCENT_RESIZE_TOOLTIP_TEMPLATE({ styles: GanttView.styles, text: text }))
.appendTo(this.element);
var tooltipMiddle = Math.round(tooltip.outerWidth() / 2);
var arrow = tooltip.find(DOT + GanttView.styles.callout);
var arrowHeight = Math.round(arrow.outerWidth() / 2);
tooltip.css({
"top": top - (tooltip.outerHeight() + arrowHeight),
"left": left - tooltipMiddle
});
arrow.css("left", tooltipMiddle - arrowHeight);
},
_removePercentCompleteTooltip: function() {
if (this._percentCompleteResizeTooltip) {
this._percentCompleteResizeTooltip.remove();
}
this._percentCompleteResizeTooltip = null;
},
_updateDependencyDragHint: function(from, to, useVML) {
this._removeDependencyDragHint();
if (useVML) {
this._creteVmlDependencyDragHint(from, to);
} else {
this._creteDependencyDragHint(from, to);
}
},
_creteDependencyDragHint: function(from, to) {
var styles = GanttView.styles;
var deltaX = to.x - from.x;
var deltaY = to.y - from.y;
var width = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
var angle = Math.atan(deltaY / deltaX);
if (deltaX < 0) {
angle += Math.PI;
}
$("
")
.css({
"top": from.y,
"left": from.x,
"width": width,
"transform-origin": "0% 0",
"-ms-transform-origin": "0% 0",
"-webkit-transform-origin": "0% 0",
"transform": "rotate(" + angle + "rad)",
"-ms-transform": "rotate(" + angle + "rad)",
"-webkit-transform": "rotate(" + angle + "rad)"
})
.appendTo(this.content);
},
_creteVmlDependencyDragHint: function(from, to) {
var hint = $("
")
.appendTo(this.content);
// IE8 Bug
hint[0].outerHTML = hint[0].outerHTML;
},
_removeDependencyDragHint: function() {
this.content.find(DOT + GanttView.styles.dependencyHint).remove();
},
_scrollTo: function(element) {
var elementLeft = element.offset().left;
var elementWidth = element.width();
var elementRight = elementLeft + elementWidth;
var row = element.closest("tr");
var rowTop = row.offset().top;
var rowHeight = row.height();
var rowBottom = rowTop + rowHeight;
var content = this.content;
var contentOffset = content.offset();
var contentTop = contentOffset.top;
var contentHeight = content.height();
var contentBottom = contentTop + contentHeight;
var contentLeft = contentOffset.left;
var contentWidth = content.width();
var contentRight = contentLeft + contentWidth;
var scrollbarWidth = kendo.support.scrollbar();
if (rowTop < contentTop) {
content.scrollTop(content.scrollTop() + (rowTop - contentTop));
} else if (rowBottom > contentBottom) {
content.scrollTop(content.scrollTop() + (rowBottom + scrollbarWidth - contentBottom));
}
if (elementLeft < contentLeft && elementWidth > contentWidth && elementRight < contentRight ||
elementRight > contentRight && elementWidth < contentWidth) {
content.scrollLeft(content.scrollLeft() + (elementRight + scrollbarWidth - contentRight));
} else if (elementRight > contentRight && elementWidth > contentWidth && elementLeft > contentLeft ||
elementLeft < contentLeft && elementWidth < contentWidth) {
content.scrollLeft(content.scrollLeft() + (elementLeft - contentLeft));
}
},
_timeSlots: function() {
return this._slots[this._slots.length - 1];
},
_headers: function(columnLevels) {
var rows = [];
var level;
var headers;
var column;
var headerText;
var styles = GanttView.styles;
for (var levelIndex = 0, levelCount = columnLevels.length; levelIndex < levelCount; levelIndex++) {
level = columnLevels[levelIndex];
headers = [];
for (var columnIndex = 0, columnCount = level.length; columnIndex < columnCount; columnIndex++) {
column = level[columnIndex];
headerText = kendoTextElement(column.text);
headers.push(kendoDomElement("th", { colspan: column.span, className: styles.header + (column.isNonWorking ? (" " + styles.nonWorking) : "") }, [headerText]));
}
rows.push(kendoDomElement("tr", null, headers));
}
return rows;
},
_hours: function(start, end) {
var slotEnd;
var slots = [];
var options = this.options;
var workDayStart = options.workDayStart.getHours();
var workDayEnd = options.workDayEnd.getHours();
var isWorkHour;
var hours;
var hourSpan = options.hourSpan;
start = new Date(start);
end = new Date(end);
while (start < end) {
slotEnd = new Date(start);
hours = slotEnd.getHours();
isWorkHour = hours >= workDayStart && hours < workDayEnd;
slotEnd.setHours(slotEnd.getHours() + hourSpan);
if (hours == slotEnd.getHours()) {
// Chrome DTS Fix
slotEnd.setHours(slotEnd.getHours() + 2 * hourSpan);
}
if (!options.showWorkHours || isWorkHour) {
slots.push({
start: start,
end: slotEnd,
isNonWorking: !isWorkHour,
span: 1
});
}
start = slotEnd;
}
return slots;
},
_days: function(start, end) {
var slotEnd;
var slots = [];
var isWorkDay;
start = new Date(start);
end = new Date(end);
while (start < end) {
slotEnd = kendo.date.nextDay(start);
isWorkDay = this._isWorkDay(start);
if (!this.options.showWorkDays || isWorkDay) {
slots.push({
start: start,
end: slotEnd,
isNonWorking: !isWorkDay,
span: 1
});
}
start = slotEnd;
}
return slots;
},
_weeks: function(start, end) {
var slotEnd;
var slots = [];
var firstDay = this.calendarInfo().firstDay;
var daySlots;
var span;
start = new Date(start);
end = new Date(end);
while (start < end) {
slotEnd = kendo.date.dayOfWeek(kendo.date.addDays(start, 1), firstDay, 1);
if (slotEnd > end) {
slotEnd = end;
}
daySlots = this._days(start, slotEnd);
span = daySlots.length;
if (span > 0) {
slots.push({
start: daySlots[0].start,
end: daySlots[span - 1].end,
span: span
});
}
start = slotEnd;
}
return slots;
},
_months: function(start, end) {
var slotEnd;
var slots = [];
var daySlots;
var span;
start = new Date(start);
end = new Date(end);
while (start < end) {
slotEnd = new Date(start);
slotEnd.setMonth(slotEnd.getMonth() + 1);
daySlots = this._days(start, slotEnd);
span = daySlots.length;
if (span > 0) {
slots.push({
start: daySlots[0].start,
end: daySlots[span - 1].end,
span: span
});
}
start = slotEnd;
}
return slots;
},
_slotHeaders: function(slots, template) {
var columns = [];
var slot;
for (var i = 0, l = slots.length; i < l; i++) {
slot = slots[i];
columns.push({
text: template(slot),
isNonWorking: !!slot.isNonWorking,
span: slot.span
});
}
return columns;
},
_isWorkDay: function(date) {
var day = date.getDay();
var workDays = this._workDays;
for (var i = 0, l = workDays.length; i < l; i++) {
if (workDays[i] === day) {
return true;
}
}
return false;
},
calendarInfo: function() {
return kendo.getCulture().calendars.standard;
}
});
extend(true, GanttView, { styles: viewStyles });
kendo.ui.GanttDayView = GanttView.extend({
name: "day",
options: {
timeHeaderTemplate: TIME_HEADER_TEMPLATE,
dayHeaderTemplate: DAY_HEADER_TEMPLATE
},
range: function(range) {
this.start = kendo.date.getDate(range.start);
this.end = kendo.date.getDate(range.end);
if (kendo.date.getMilliseconds(range.end) > 0 || this.end.getTime() === this.start.getTime()) {
this.end = kendo.date.addDays(this.end, 1);
}
},
_createSlots: function() {
var daySlots;
var daySlot;
var hourSlots;
var hours;
var slots = [];
daySlots = this._days(this.start, this.end);
hourSlots = [];
for (var i = 0, l = daySlots.length; i < l; i++) {
daySlot = daySlots[i];
hours = this._hours(daySlot.start, daySlot.end);
daySlot.span = hours.length;
hourSlots.push.apply(hourSlots, hours);
}
slots.push(daySlots);
slots.push(hourSlots);
return slots;
},
_layout: function() {
var rows = [];
var options = this.options;
rows.push(this._slotHeaders(this._slots[0], kendo.template(options.dayHeaderTemplate)));
rows.push(this._slotHeaders(this._slots[1], kendo.template(options.timeHeaderTemplate)));
return rows;
}
});
kendo.ui.GanttWeekView = GanttView.extend({
name: "week",
options: {
dayHeaderTemplate: DAY_HEADER_TEMPLATE,
weekHeaderTemplate: WEEK_HEADER_TEMPLATE
},
range: function(range) {
var calendarInfo = this.calendarInfo();
var firstDay = calendarInfo.firstDay;
this.start = kendo.date.getDate(kendo.date.dayOfWeek(range.start, firstDay, -1));
this.end = kendo.date.getDate(kendo.date.dayOfWeek(range.end, firstDay, 1));
},
_createSlots: function() {
var slots = [];
slots.push(this._weeks(this.start, this.end));
slots.push(this._days(this.start, this.end));
return slots;
},
_layout: function() {
var rows = [];
var options = this.options;
rows.push(this._slotHeaders(this._slots[0], kendo.template(options.weekHeaderTemplate)));
rows.push(this._slotHeaders(this._slots[1], kendo.template(options.dayHeaderTemplate)));
return rows;
}
});
kendo.ui.GanttMonthView = GanttView.extend({
name: "month",
options: {
weekHeaderTemplate: WEEK_HEADER_TEMPLATE,
monthHeaderTemplate: MONTH_HEADER_TEMPLATE
},
range: function(range) {
this.start = kendo.date.firstDayOfMonth(range.start);
this.end = kendo.date.addDays(kendo.date.getDate(kendo.date.lastDayOfMonth(range.end)), 1);
},
_createSlots: function() {
var slots = [];
slots.push(this._months(this.start, this.end));
slots.push(this._weeks(this.start, this.end));
return slots;
},
_layout: function() {
var rows = [];
var options = this.options;
rows.push(this._slotHeaders(this._slots[0], kendo.template(options.monthHeaderTemplate)));
rows.push(this._slotHeaders(this._slots[1], kendo.template(options.weekHeaderTemplate)));
return rows;
}
});
var timelineStyles = {
wrapper: "k-timeline k-grid k-widget",
gridHeader: "k-grid-header",
gridHeaderWrap: "k-grid-header-wrap",
gridContent: "k-grid-content",
gridContentWrap: "k-grid-content",
tasksWrapper: "k-gantt-tables",
dependenciesWrapper: "k-gantt-dependencies",
task: "k-task",
line: "k-line",
taskResizeHandle: "k-resize-handle",
taskResizeHandleWest: "k-resize-w",
taskDragHandle: "k-task-draghandle",
taskComplete: "k-task-complete",
taskDelete: "k-task-delete",
taskWrapActive: "k-task-wrap-active",
taskWrap: "k-task-wrap",
taskDot: "k-task-dot",
taskDotStart: "k-task-start",
taskDotEnd: "k-task-end",
hovered: "k-state-hover",
selected: "k-state-selected",
origin: "k-origin"
};
var GanttTimeline = kendo.ui.GanttTimeline = Widget.extend({
init: function(element, options) {
Widget.fn.init.call(this, element, options);
if (!this.options.views || !this.options.views.length) {
this.options.views = ["day", "week", "month"];
}
this._wrapper();
this._domTrees();
this._views();
this._selectable();
this._draggable();
this._resizable();
this._percentResizeDraggable();
this._createDependencyDraggable();
this._attachEvents();
},
options: {
name: "GanttTimeline",
messages: {
views: {
day: "Day",
week: "Week",
month: "Month"
}
},
snap: true,
selectable: true,
editable: true
},
destroy: function() {
Widget.fn.destroy.call(this);
this._unbindView(this._selectedView);
if (this._moveDraggable) {
this._moveDraggable.destroy();
}
if (this._resizeDraggable) {
this._resizeDraggable.destroy();
}
if (this._percentDraggable) {
this._percentDraggable.destroy();
}
if (this._dependencyDraggable) {
this._dependencyDraggable.destroy();
}
this._headerTree = null;
this._taskTree = null;
this._dependencyTree = null;
this.wrapper.off(NS);
kendo.destroy(this.wrapper);
},
_wrapper: function() {
var styles = GanttTimeline.styles;
this.wrapper = this.element
.addClass(styles.wrapper)
.append("")
.append("
");
},
_domTrees: function() {
var styles = GanttTimeline.styles;
var tree = kendo.dom.Tree;
var wrapper = this.wrapper;
this._headerTree = new tree(wrapper.find(DOT + styles.gridHeaderWrap)[0]);
this._taskTree = new tree(wrapper.find(DOT + styles.tasksWrapper)[0]);
this._dependencyTree = new tree(wrapper.find(DOT + styles.dependenciesWrapper)[0]);
},
_views: function() {
var views = this.options.views;
var view;
var isSettings;
var name;
var defaultView;
var selected;
this.views = {};
for (var i = 0, l = views.length; i < l; i++) {
view = views[i];
isSettings = isPlainObject(view);
if (isSettings && view.selectable === false) {
continue;
}
name = isSettings ? view.type : view;
defaultView = defaultViews[name];
if (defaultView) {
view = extend({ title: this.options.messages.views[name] }, isSettings ? view : {}, defaultView);
this.views[name] = view;
if (!selected || view.selected) {
selected = name;
}
}
}
if (selected) {
this._selectedViewName = selected;
}
},
view: function(name) {
if (name) {
this._selectView(name);
this.trigger("navigate", { view: name, action: "changeView" });
}
return this._selectedView;
},
_selectView: function(name) {
if (name && this.views[name]) {
if (this._selectedView) {
this._unbindView(this._selectedView);
}
this._selectedView = this._initializeView(name);
this._selectedViewName = name;
}
},
_viewByIndex: function(index) {
var view;
var views = this.views;
for (view in views) {
if (!index) {
return view;
}
index--;
}
},
_initializeView: function(name) {
var view = this.views[name];
if (view) {
var type = view.type;
if (typeof type === "string") {
type = kendo.getter(view.type)(window);
}
if (type) {
view = new type(this.wrapper, trimOptions(extend(true, {
headerTree: this._headerTree,
taskTree: this._taskTree,
dependencyTree: this._dependencyTree
}, view, this.options)));
} else {
throw new Error("There is no such view");
}
}
return view;
},
_unbindView: function(view) {
if (view) {
view.destroy();
}
},
_range: function(tasks) {
var startOrder = {
field: "start",
dir: "asc"
};
var endOrder = {
field: "end",
dir: "desc"
};
if (!tasks || !tasks.length) {
return { start: new Date(), end: new Date() };
}
var start = new Query(tasks).sort(startOrder).toArray()[0].start || new Date();
var end = new Query(tasks).sort(endOrder).toArray()[0].end || new Date();
return {
start: start,
end: end
};
},
_render: function(tasks) {
var view = this.view();
var range = this._range(tasks);
this._tasks = tasks;
view.range(range);
view.renderLayout();
view.render(tasks);
},
_renderDependencies: function(dependencies) {
this.view()._renderDependencies(dependencies);
},
_taskByUid: function(uid) {
var tasks = this._tasks;
var length = tasks.length;
var task;
for (var i = 0; i < length; i++) {
task = tasks[i];
if (task.uid === uid) {
return task;
}
}
},
_draggable: function() {
var that = this;
var element;
var task;
var currentStart;
var startOffset;
var snap = this.options.snap;
var dragInProgress;
var styles = GanttTimeline.styles;
var cleanUp = function() {
that.view()._removeDragHint();
if (element) {
element.css("opacity", 1);
}
element = null;
task = null;
dragInProgress = false;
};
if (this.options.editable !== true) {
return;
}
this._moveDraggable = new kendo.ui.Draggable(this.wrapper, {
distance: 0,
filter: DOT + styles.task,
holdToDrag: kendo.support.mobileOS,
ignore: DOT + styles.taskResizeHandle
});
this._moveDraggable
.bind("dragstart", function(e) {
var view = that.view();
element = e.currentTarget.parent();
task = that._taskByUid(e.currentTarget.attr("data-uid"));
if (that.trigger("moveStart", { task: task })) {
e.preventDefault();
return;
}
currentStart = task.start;
startOffset = view._timeByPosition(e.x.location, snap) - currentStart;
view._createDragHint(element);
element.css("opacity", 0.5);
dragInProgress = true;
})
.bind("drag", kendo.throttle(function(e) {
if (!dragInProgress) {
return;
}
var view = that.view();
var date = new Date(view._timeByPosition(e.x.location, snap) - startOffset);
if (!that.trigger("move", { task: task, start: date })) {
currentStart = date;
view._updateDragHint(currentStart);
}
}, 15))
.bind("dragend", function(e) {
that.trigger("moveEnd", { task: task, start: currentStart });
cleanUp();
})
.bind("dragcancel", function(e) {
cleanUp();
})
.userEvents.bind("select", function(e) {
blurActiveElement();
});
},
_resizable: function() {
var that = this;
var element;
var task;
var currentStart;
var currentEnd;
var resizeStart;
var snap = this.options.snap;
var dragInProgress;
var styles = GanttTimeline.styles;
var cleanUp = function() {
that.view()._removeResizeHint();
element = null;
task = null;
dragInProgress = false;
};
if (this.options.editable !== true) {
return;
}
this._resizeDraggable = new kendo.ui.Draggable(this.wrapper, {
distance: 0,
filter: DOT + styles.taskResizeHandle,
holdToDrag: false
});
this._resizeDraggable
.bind("dragstart", function(e) {
resizeStart = e.currentTarget.hasClass(styles.taskResizeHandleWest);
element = e.currentTarget.closest(DOT + styles.task);
task = that._taskByUid(element.attr("data-uid"));
if (that.trigger("resizeStart", { task: task })) {
e.preventDefault();
return;
}
currentStart = task.start;
currentEnd = task.end;
that.view()._createResizeHint(task);
dragInProgress = true;
})
.bind("drag", kendo.throttle(function(e) {
if (!dragInProgress) {
return;
}
var view = that.view();
var date = view._timeByPosition(e.x.location, snap, !resizeStart);
if (resizeStart) {
if (date < currentEnd) {
currentStart = date;
} else {
currentStart = currentEnd;
}
} else {
if (date > currentStart) {
currentEnd = date;
} else {
currentEnd = currentStart;
}
}
if (!that.trigger("resize", { task: task, start: currentStart, end: currentEnd })) {
view._updateResizeHint(currentStart, currentEnd, resizeStart);
}
}, 15))
.bind("dragend", function(e) {
var date = resizeStart ? currentStart : currentEnd;
that.trigger("resizeEnd", { task: task, resizeStart: resizeStart, start: currentStart, end: currentEnd });
cleanUp();
})
.bind("dragcancel", function(e) {
cleanUp();
})
.userEvents.bind("select", function(e) {
blurActiveElement();
});
},
_percentResizeDraggable: function() {
var that = this;
var task;
var taskElement;
var taskElementOffset;
var timelineOffset;
var originalPercentWidth;
var maxPercentWidth;
var currentPercentComplete;
var tooltipTop;
var tooltipLeft;
var dragInProgress;
var styles = GanttTimeline.styles;
var cleanUp = function() {
that.view()._removePercentCompleteTooltip();
taskElement = null;
task = null;
dragInProgress = false;
};
var updateElement = function(width) {
taskElement
.find(DOT + styles.taskComplete)
.width(width)
.end()
.siblings(DOT + styles.taskDragHandle)
.css("left", width);
};
if (this.options.editable !== true) {
return;
}
this._percentDraggable = new kendo.ui.Draggable(this.wrapper, {
distance: 0,
filter: DOT + styles.taskDragHandle,
holdToDrag: false
});
this._percentDraggable
.bind("dragstart", function(e) {
taskElement = e.currentTarget.siblings(DOT + styles.task);
task = that._taskByUid(taskElement.attr("data-uid"));
currentPercentComplete = task.percentComplete;
taskElementOffset = taskElement.offset();
timelineOffset = this.element.offset();
originalPercentWidth = taskElement.find(DOT + styles.taskComplete).width();
maxPercentWidth = taskElement.outerWidth();
dragInProgress = true;
})
.bind("drag", kendo.throttle(function(e) {
if (!dragInProgress) {
return;
}
var currentWidth = Math.max(0, Math.min(maxPercentWidth, originalPercentWidth + e.x.initialDelta));
currentPercentComplete = Math.round((currentWidth / maxPercentWidth) * 100);
updateElement(currentWidth);
tooltipTop = taskElementOffset.top - timelineOffset.top;
tooltipLeft = taskElementOffset.left + currentWidth - timelineOffset.left;
that.view()._updatePercentCompleteTooltip(tooltipTop, tooltipLeft, currentPercentComplete);
}, 15))
.bind("dragend", function(e) {
that.trigger("percentResizeEnd", { task: task, percentComplete: currentPercentComplete / 100 });
cleanUp();
})
.bind("dragcancel", function(e) {
updateElement(originalPercentWidth);
cleanUp();
})
.userEvents.bind("select", function(e) {
blurActiveElement();
});
},
_createDependencyDraggable: function() {
var that = this;
var originalHandle;
var hoveredHandle = $();
var hoveredTask = $();
var dragInProgress;
var startX;
var startY;
var content;
var contentOffset;
var useVML = kendo.support.browser.msie && kendo.support.browser.version < 9;
var styles = GanttTimeline.styles;
var cleanUp = function() {
originalHandle
.css("display", "")
.removeClass(styles.hovered);
originalHandle.parent().removeClass(styles.origin);
originalHandle = null;
toggleHandles(false);
hoveredTask = $();
hoveredHandle = $();
that.view()._removeDependencyDragHint();
dragInProgress = false;
};
var toggleHandles = function(value) {
if (!hoveredTask.hasClass(styles.origin)) {
hoveredTask.find(DOT + styles.taskDot).css("display", value ? "block" : "");
hoveredHandle.toggleClass(styles.hovered, value);
}
};
if (this.options.editable !== true) {
return;
}
if (useVML && document.namespaces) {
document.namespaces.add("kvml", "urn:schemas-microsoft-com:vml", "#default#VML");
}
this._dependencyDraggable = new kendo.ui.Draggable(this.wrapper, {
distance: 0,
filter: DOT + styles.taskDot,
holdToDrag: false
});
this._dependencyDraggable
.bind("dragstart", function(e) {
originalHandle = e.currentTarget
.css("display", "block")
.addClass(styles.hovered);
originalHandle.parent().addClass(styles.origin);
var elementOffset = originalHandle.offset();
content = that.view().content;
contentOffset = content.offset();
startX = Math.round(elementOffset.left + content.scrollLeft() - contentOffset.left + (originalHandle.outerHeight() / 2));
startY = Math.round(elementOffset.top + content.scrollTop() - contentOffset.top + (originalHandle.outerWidth() / 2));
dragInProgress = true;
})
.bind("drag", kendo.throttle(function(e) {
if (!dragInProgress) {
return;
}
var target = $(kendo.elementUnderCursor(e));
var currentX = e.x.location + content.scrollLeft() - contentOffset.left;
var currentY = e.y.location + content.scrollTop() - contentOffset.top;
that.view()._updateDependencyDragHint({ x: startX, y: startY }, { x: currentX, y: currentY }, useVML);
toggleHandles(false);
hoveredHandle = (target.hasClass(styles.taskDot)) ? target : $();
hoveredTask = target.closest(DOT + styles.taskWrap);
toggleHandles(true);
}, 15))
.bind("dragend", function(e) {
if (hoveredHandle.length) {
var fromStart = originalHandle.hasClass(styles.taskDotStart);
var toStart = hoveredHandle.hasClass(styles.taskDotStart);
var type = fromStart ? (toStart ? 3 : 2) : (toStart ? 1 : 0);
var predecessor = that._taskByUid(originalHandle.siblings(DOT + styles.task).attr("data-uid"));
var successor = that._taskByUid(hoveredHandle.siblings(DOT + styles.task).attr("data-uid"));
if (predecessor !== successor) {
that.trigger("dependencyDragEnd", { type: type, predecessor: predecessor, successor: successor });
}
}
cleanUp();
})
.bind("dragcancel", function(e) {
cleanUp();
})
.userEvents.bind("select", function(e) {
blurActiveElement();
});
},
_selectable: function() {
var that = this;
var styles = GanttTimeline.styles;
if (this.options.selectable) {
this.wrapper
.on(CLICK + NS, DOT + styles.task, function(e) {
e.stopPropagation();
if (!e.ctrlKey) {
that.trigger("select", { uid: $(this).attr("data-uid") });
} else {
that.trigger("clear");
}
})
.on(CLICK + NS, DOT + styles.tasksWrapper, function(e) {
if (that.selectDependency().length > 0) {
that.clearSelection();
} else {
that.trigger("clear");
}
})
.on(CLICK + NS, DOT + styles.line, function(e) {
e.stopPropagation();
that.selectDependency(this);
});
}
},
select: function(value) {
var element = this.wrapper.find(value);
var styles = GanttTimeline.styles;
if (element.length) {
this.clearSelection();
element.addClass(styles.selected);
if (kendo.support.mobileOS) {
element.parent().addClass(styles.taskWrapActive);
}
return;
}
return this.wrapper.find(DOT + styles.task + DOT + styles.selected);
},
selectDependency: function(value) {
var element = this.wrapper.find(value);
var uid;
var styles = GanttTimeline.styles;
if (element.length) {
this.clearSelection();
this.trigger("clear");
uid = $(element).attr("data-uid");
this.wrapper.find(DOT + styles.line + "[data-uid='" + uid + "']").addClass(styles.selected);
return;
}
return this.wrapper.find(DOT + styles.line + DOT + styles.selected);
},
clearSelection: function() {
var styles = GanttTimeline.styles;
this.wrapper
.find(DOT + styles.selected)
.removeClass(styles.selected);
if (kendo.support.mobileOS) {
this.wrapper
.find(DOT + styles.taskWrapActive)
.removeClass(styles.taskWrapActive);
}
},
_attachEvents: function() {
var that = this;
var styles = GanttTimeline.styles;
if (this.options.editable === true) {
this._tabindex();
this.wrapper
.on(CLICK + NS, DOT + styles.taskDelete, function(e) {
that.trigger("removeTask", { uid: $(this).closest(DOT + styles.task).attr("data-uid") });
e.stopPropagation();
e.preventDefault();
})
.on(KEYDOWN + NS, function(e) {
var selectedDependency;
if (e.keyCode === keys.DELETE) {
selectedDependency = that.selectDependency();
if (selectedDependency.length) {
that.trigger("removeDependency", { uid: selectedDependency.attr("data-uid") });
that.clearSelection();
}
}
});
}
}
});
extend(true, GanttTimeline, { styles: timelineStyles });
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo;
var browser = kendo.support.browser;
var Observable = kendo.Observable;
var Widget = kendo.ui.Widget;
var DataSource = kendo.data.DataSource;
var Query = kendo.data.Query;
var isArray = $.isArray;
var proxy = $.proxy;
var extend = $.extend;
var map = $.map;
var keys = kendo.keys;
var NS = ".kendoGantt";
var TABINDEX = "tabIndex";
var CLICK = "click";
var WIDTH = "width";
var DIRECTIONS = {
"down": {
origin: "bottom center",
position: "top center"
},
"up": {
origin: "top center",
position: "bottom center"
}
};
var ARIA_DESCENDANT = "aria-activedescendant";
var ACTIVE_CELL = "gantt_active_cell";
var ACTIVE_OPTION = "action-option-focused";
var DOT = ".";
var HEADER_TEMPLATE = kendo.template('');
var TASK_DROPDOWN_TEMPLATE = kendo.template('');
var FOOTER_TEMPLATE = kendo.template('');
var ganttStyles = {
wrapper: "k-widget k-gantt",
listWrapper: "k-gantt-layout k-gantt-treelist",
list: "k-gantt-treelist",
timelineWrapper: "k-gantt-layout k-gantt-timeline",
timeline: "k-gantt-timeline",
splitBarWrapper: "k-splitbar k-state-default k-splitbar-horizontal k-splitbar-draggable-horizontal k-gantt-layout",
splitBar: "k-splitbar",
splitBarHover: "k-splitbar-horizontal-hover",
popupWrapper: "k-list-container",
popupList: "k-list k-reset",
resizeHandle: "k-resize-handle",
icon: "k-icon",
item: "k-item",
line: "k-line",
hovered: "k-state-hover",
selected: "k-state-selected",
focused: "k-state-focused",
gridHeader: "k-grid-header",
gridHeaderWrap: "k-grid-header-wrap",
gridContent: "k-grid-content",
toolbar: {
headerWrapper: "k-floatwrap k-header k-gantt-toolbar",
footerWrapper: "k-floatwrap k-header k-gantt-toolbar",
toolbar: "k-gantt-toolbar",
views: "k-gantt-views",
viewsWrapper: "k-reset k-header k-gantt-views",
actions: "k-gantt-actions",
button: "k-button k-button-icontext",
iconPlus: "k-icon k-i-plus",
viewButtonDefault: "k-state-default",
viewButton: "k-view",
link: "k-link"
}
};
function selector(uid) {
return "[" + kendo.attr("uid") + (uid ? "='" + uid + "']" : "]");
}
function trimOptions(options) {
delete options.name;
delete options.prefix;
delete options.remove;
delete options.edit;
delete options.add;
delete options.navigate;
return options;
}
function dateCompareValidator(input) {
if (input.filter("[name=end], [name=start]").length) {
var container = input.closest("td.k-edit-cell");
var editable = container.data("kendoEditable");
var field = input.attr("name");
var picker = kendo.widgetInstance(input, kendo.ui);
var model = editable ? editable.options.model : null;
var dates = {};
if (!model) {
return true;
}
dates.start = model.start;
dates.end = model.end;
dates[field] = picker ? picker.value() : kendo.parseDate(input.value());
return dates.start <= dates.end;
}
return true;
}
function focusTable(table, direct) {
var wrapper = table.parents('[' + kendo.attr("role") + '="gantt"]');
var scrollPositions = [];
var parents = scrollableParents(wrapper);
table.attr(TABINDEX, 0);
if (direct) {
parents.each(function(index, parent) {
scrollPositions[index] = $(parent).scrollTop();
});
}
try {
//The setActive method does not cause the document to scroll to the active object in the current page
table[0].setActive();
} catch (e) {
table[0].focus();
}
if (direct) {
parents.each(function(index, parent) {
$(parent).scrollTop(scrollPositions[index]);
});
}
}
function scrollableParents(element) {
return $(element).parentsUntil("body")
.filter(function(index, element) {
var computedStyle = kendo.getComputedStyles(element, ["overflow"]);
return computedStyle.overflow != "visible";
})
.add(window);
}
var TaskDropDown = Observable.extend({
init: function(element, options) {
Observable.fn.init.call(this);
this.element = element;
this.options = extend(true, {}, this.options, options);
this._popup();
},
options: {
direction: "down",
navigatable: false
},
_current: function(method) {
var ganttStyles = Gantt.styles;
var current = this.list
.find(DOT + ganttStyles.focused);
var sibling = current[method]();
if (sibling.length) {
current
.removeClass(ganttStyles.focused)
.removeAttr("id");
sibling
.addClass(ganttStyles.focused)
.attr("id", ACTIVE_OPTION);
this.list.find("ul")
.removeAttr(ARIA_DESCENDANT)
.attr(ARIA_DESCENDANT, ACTIVE_OPTION);
}
},
_popup: function() {
var that = this;
var ganttStyles = Gantt.styles;
var itemSelector = "li" + DOT + ganttStyles.item;
var actions = this.options.messages.actions;
var navigatable = this.options.navigatable;
this.list = $(TASK_DROPDOWN_TEMPLATE({
styles: ganttStyles,
actions: [
{
data: "add",
text: actions.addChild
},
{
data: "insert-before",
text: actions.insertBefore
},
{
data: "insert-after",
text: actions.insertAfter
}
]
}));
this.element.append(this.list);
this.popup = new kendo.ui.Popup(this.list,
extend({
anchor: this.element,
open: function(e) {
that._adjustListWidth();
},
animation: this.options.animation
}, DIRECTIONS[this.options.direction])
);
this.element
.on(CLICK + NS, "button", function(e) {
var target = $(this);
var action = target.attr(kendo.attr("action"));
e.preventDefault();
if (action) {
that.trigger("command", { type: action });
} else {
that.popup.open();
if (navigatable) {
that.list
.find("li:first")
.addClass(ganttStyles.focused)
.attr("id", ACTIVE_OPTION)
.end()
.find("ul")
.attr({
TABINDEX: 0,
"aria-activedescendant": ACTIVE_OPTION
})
.focus();
}
}
});
this.list
.find(itemSelector)
.hover(function() {
$(this).addClass(ganttStyles.hovered);
}, function() {
$(this).removeClass(ganttStyles.hovered);
})
.end()
.on(CLICK + NS, itemSelector, function(e) {
that.trigger("command", { type: $(this).attr(kendo.attr("action")) });
that.popup.close();
});
if (navigatable) {
this.popup
.bind("close", function() {
that.list
.find(itemSelector)
.removeClass(ganttStyles.focused)
.end()
.find("ul")
.attr(TABINDEX, 0);
that.element
.parents('[' + kendo.attr("role") + '="gantt"]')
.find(DOT + ganttStyles.gridContent + " > table:first")
.focus();
});
this.list
.find("ul")
.on("keydown" + NS, function(e) {
var key = e.keyCode;
switch (key) {
case keys.UP:
e.preventDefault();
that._current("prev");
break;
case keys.DOWN:
e.preventDefault();
that._current("next");
break;
case keys.ENTER:
that.list
.find(DOT + ganttStyles.focused)
.click();
break;
case keys.ESC:
e.preventDefault();
that.popup.close();
break;
}
});
}
},
_adjustListWidth: function() {
var list = this.list;
var width = list[0].style.width;
var wrapper = this.element;
var computedStyle;
var computedWidth;
if (!list.data(WIDTH) && width) {
return;
}
computedStyle = window.getComputedStyle ? window.getComputedStyle(wrapper[0], null) : 0;
computedWidth = computedStyle ? parseFloat(computedStyle.width) : wrapper.outerWidth();
if (computedStyle && (browser.mozilla || browser.msie)) { // getComputedStyle returns different box in FF and IE.
computedWidth += parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight) + parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
}
if (list.css("box-sizing") !== "border-box") {
width = computedWidth - (list.outerWidth() - list.width());
} else {
width = computedWidth;
}
list.css({
fontFamily: wrapper.css("font-family"),
width: width
})
.data(WIDTH, width);
},
destroy: function() {
this.popup.destroy();
this.element.off(NS);
this.list.off(NS);
this.unbind();
}
});
var createDataSource = function(type, name) {
return function(options) {
options = isArray(dataSource) ? { data: options } : options;
var dataSource = options || {};
var data = dataSource.data;
dataSource.data = data;
if (!(dataSource instanceof type) && dataSource instanceof DataSource) {
throw new Error("Incorrect DataSource type. Only " + name + " instances are supported");
}
return dataSource instanceof type ? dataSource : new type(dataSource);
};
};
var GanttDependency = kendo.data.Model.define({
id: "id",
fields: {
id: { type: "number" },
predecessorId: { type: "number" },
successorId: { type: "number" },
type: { type: "number" }
}
});
var GanttDependencyDataSource = DataSource.extend({
init: function(options) {
DataSource.fn.init.call(this, extend(true, {}, {
schema: {
modelBase: GanttDependency,
model: GanttDependency
}
}, options));
},
successors: function(id) {
return this._dependencies("predecessorId", id);
},
predecessors: function(id) {
return this._dependencies("successorId", id);
},
dependencies: function(id) {
var predecessors = this.predecessors(id);
var successors = this.successors(id);
predecessors.push.apply(predecessors, successors);
return predecessors;
},
_dependencies: function(field, id) {
var data = this.view();
var filter = {
field: field,
operator: "eq",
value: id
};
data = new Query(data).filter(filter).toArray();
return data;
}
});
GanttDependencyDataSource.create = createDataSource(GanttDependencyDataSource, "GanttDependencyDataSource");
var GanttTask = kendo.data.Model.define({
duration: function() {
var end = this.end;
var start = this.start;
return end - start;
},
isMilestone: function() {
return this.duration() === 0;
},
_offset: function(value) {
var field = ["start", "end"];
var newValue;
for (var i = 0; i < field.length; i++) {
newValue = new Date(this.get(field[i]).getTime() + value);
this.set(field[i], newValue);
}
},
id: "id",
fields: {
id: { type: "number" },
parentId: { type: "number", defaultValue: null, validation: { required: true } },
orderId: { type: "number", validation: { required: true } },
title: { type: "string", defaultValue: "" },
start: {
type: "date", validation: {
required: true,
dateCompare: dateCompareValidator,
message: "Start date should be before or equal to the end date"
}
},
end: {
type: "date", validation: {
required: true,
dateCompare: dateCompareValidator,
message: "End date should be after or equal to the start date"
}
},
percentComplete: { type: "number", validation: { required: true, min:0, max: 1, step: 0.01 } },
summary: { type: "boolean" },
expanded: { type: "boolean", defaultValue: true }
}
});
var GanttDataSource = DataSource.extend({
init: function(options) {
DataSource.fn.init.call(this, extend(true, {}, {
schema: {
modelBase: GanttTask,
model: GanttTask
}
}, options));
},
remove: function(task) {
var parentId = task.get("parentId");
task = DataSource.fn.remove.call(this, task);
this._childRemoved(parentId, task.get("orderId"));
return task;
},
add: function(task) {
if (!task) {
return;
}
task = this._toGanttTask(task);
return this.insert(this.taskSiblings(task).length, task);
},
insert: function(index, task) {
if (!task) {
return;
}
task = this._toGanttTask(task);
task.set("orderId", index);
task = DataSource.fn.insert.call(this, index, task);
this._reorderSiblings(task, this.taskSiblings(task).length - 1);
this._resolveSummaryFields(this.taskParent(task));
return task;
},
taskChildren: function(task) {
var data = this.view();
var filter = {
field: "parentId",
operator: "eq",
value: null
};
var order = this._sort || {
field: "orderId",
dir: "asc"
};
var taskId;
if (!!task) {
taskId = task.get("id");
if (taskId === undefined || taskId === null) {
return [];
}
filter.value = taskId;
}
data = new Query(data).filter(filter).sort(order).toArray();
return data;
},
taskAllChildren: function(task) {
var data = [];
var that = this;
var callback = function(task) {
var tasks = that.taskChildren(task);
data.push.apply(data, tasks);
map(tasks, callback);
};
if (!!task) {
callback(task);
} else {
data = this.view();
}
return data;
},
taskSiblings: function(task) {
if (!task) {
return null;
}
var parent = this.taskParent(task);
return this.taskChildren(parent);
},
taskParent: function(task) {
if (!task || task.get("parentId") === null) {
return null;
}
return this.get(task.parentId);
},
taskLevel: function(task) {
var level = 0;
var parent = this.taskParent(task);
while (parent !== null) {
level += 1;
parent = this.taskParent(parent);
}
return level;
},
taskTree: function(task) {
var data = [];
var current;
var tasks = this.taskChildren(task);
for (var i = 0, l = tasks.length; i < l; i++) {
current = tasks[i];
data.push(current);
if (current.get("expanded")) {
var children = this.taskTree(current);
data.push.apply(data, children);
}
}
return data;
},
update: function(task, taskInfo) {
var that = this;
var oldValue;
var offsetChildren = function(parentTask, offset) {
var children = that.taskAllChildren(parentTask);
for (var i = 0, l = children.length; i < l; i++) {
children[i]._offset(offset);
}
};
var modelChangeHandler = function(e) {
var field = e.field;
var model = e.sender;
switch (field) {
case "start":
that._resolveSummaryStart(that.taskParent(model));
offsetChildren(model, model.get(field).getTime() - oldValue.getTime());
break;
case "end":
that._resolveSummaryEnd(that.taskParent(model));
break;
case "percentComplete":
that._resolveSummaryPercentComplete(that.taskParent(model));
break;
case "orderId":
that._reorderSiblings(model, oldValue);
break;
}
};
if (taskInfo.parentId !== undefined) {
oldValue = task.get("parentId");
if (oldValue !== taskInfo.parentId) {
task.set("parentId", taskInfo.parentId);
that._childRemoved(oldValue, task.get("orderId"));
task.set("orderId", that.taskSiblings(task).length - 1);
that._resolveSummaryFields(that.taskParent(task));
}
delete taskInfo.parentId;
}
task.bind("change", modelChangeHandler);
for (var field in taskInfo) {
oldValue = task.get(field);
task.set(field, taskInfo[field]);
}
task.unbind("change", modelChangeHandler);
},
_resolveSummaryFields: function(summary) {
if (!summary) {
return;
}
this._updateSummary(summary);
if (!this.taskChildren(summary).length) {
return;
}
this._resolveSummaryStart(summary);
this._resolveSummaryEnd(summary);
this._resolveSummaryPercentComplete(summary);
},
_resolveSummaryStart: function(summary) {
var that = this;
var getSummaryStart = function(parentTask) {
var children = that.taskChildren(parentTask);
var min = children[0].start.getTime();
var currentMin;
for (var i = 1, l = children.length; i < l; i++) {
currentMin = children[i].start.getTime();
if (currentMin < min) {
min = currentMin;
}
}
return new Date(min);
};
this._updateSummaryRecursive(summary, "start", getSummaryStart);
},
_resolveSummaryEnd: function(summary) {
var that = this;
var getSummaryEnd = function(parentTask) {
var children = that.taskChildren(parentTask);
var max = children[0].end.getTime();
var currentMax;
for (var i = 1, l = children.length; i < l; i++) {
currentMax = children[i].end.getTime();
if (currentMax > max) {
max = currentMax;
}
}
return new Date(max);
};
this._updateSummaryRecursive(summary, "end", getSummaryEnd);
},
_resolveSummaryPercentComplete: function(summary) {
var that = this;
var getSummaryPercentComplete = function(parentTask) {
var children = that.taskChildren(parentTask);
var percentComplete = new Query(children).aggregate([{
field: "percentComplete",
aggregate: "average"
}]);
return percentComplete.percentComplete.average;
};
this._updateSummaryRecursive(summary, "percentComplete", getSummaryPercentComplete);
},
_updateSummaryRecursive: function(summary, field, callback) {
if (!summary) {
return;
}
var value = callback(summary);
summary.set(field, value);
var parent = this.taskParent(summary);
if (parent) {
this._updateSummaryRecursive(parent, field, callback);
}
},
_childRemoved: function(parentId, index) {
var parent = parentId === null ? null : this.get(parentId);
var children = this.taskChildren(parent);
for (var i = index, l = children.length; i < l; i++) {
children[i].set("orderId", i);
}
this._resolveSummaryFields(parent);
},
_reorderSiblings: function(task, oldOrderId) {
var orderId = task.get("orderId");
var direction = orderId > oldOrderId;
var startIndex = direction ? oldOrderId : orderId;
var endIndex = direction ? orderId : oldOrderId;
var newIndex = direction ? startIndex : startIndex + 1;
var siblings = this.taskSiblings(task);
endIndex = Math.min(endIndex, siblings.length - 1);
for (var i = startIndex; i <= endIndex; i++) {
if (siblings[i] === task) {
continue;
}
siblings[i].set("orderId", newIndex);
newIndex += 1;
}
},
_updateSummary: function(task) {
if (task !== null) {
var childCount = this.taskChildren(task).length;
task.set("summary", childCount > 0);
}
},
_toGanttTask: function(task) {
if (!(task instanceof GanttTask)) {
var taskInfo = task;
task = this._createNewModel();
task.accept(taskInfo);
}
return task;
}
});
GanttDataSource.create = createDataSource(GanttDataSource, "GanttDataSource");
extend(true, kendo.data, {
GanttDataSource: GanttDataSource,
GanttTask: GanttTask,
GanttDependencyDataSource: GanttDependencyDataSource,
GanttDependency: GanttDependency
});
var Gantt = Widget.extend({
init: function(element, options) {
if (isArray(options)) {
options = { dataSource: options };
}
Widget.fn.init.call(this, element, options);
this._wrapper();
this._timeline();
this._toolbar();
this._footer();
this._adjustDimensions();
// Prevent extra refresh from setting the view
this._preventRefresh = true;
this.view(this.timeline._selectedViewName);
this._preventRefresh = false;
this._dataSource();
this._dropDowns();
this._list();
this._dependencies();
this._resizable();
this._scrollable();
this._dataBind();
this._attachEvents();
kendo.notify(this);
},
events: [
"dataBinding",
"dataBound",
"add",
"edit",
"remove",
"cancel",
"save",
"change",
"navigate",
"moveStart",
"move",
"moveEnd",
"resizeStart",
"resize",
"resizeEnd"
],
options: {
name: "Gantt",
autoBind: true,
navigatable: false,
selectable: true,
editable: true,
columns: [],
views: [],
dataSource: {},
dependencies: {},
messages: {
views: {
day: "Day",
week: "Week",
month: "Month"
},
actions: {
append: "Add Task",
addChild: "Add Child",
insertBefore: "Add Above",
insertAfter: "Add Below"
}
},
showWorkHours: true,
showWorkDays: true,
workDayStart: new Date(1980, 1, 1, 8, 0, 0),
workDayEnd: new Date(1980, 1, 1, 17, 0, 0),
workWeekStart: 1,
workWeekEnd: 5,
hourSpan: 1,
snap: true,
height: 600,
listWidth: "30%"
},
select: function(value) {
var list = this.list;
if (!value) {
return list.select();
}
list.select(value);
return;
},
clearSelection: function() {
this.list.clearSelection();
},
destroy: function() {
Widget.fn.destroy.call(this);
if (this.timeline) {
this.timeline.unbind();
this.timeline.destroy();
}
if (this.list) {
this.list.unbind();
this.list.destroy();
}
if (this.footerDropDown) {
this.footerDropDown.destroy();
}
if (this.headerDropDown) {
this.headerDropDown.destroy();
}
if (this._resizeDraggable) {
this._resizeDraggable.destroy();
}
this.toolbar.off(NS);
$(window).off("resize" + NS, this._resizeHandler);
$(this.wrapper).off(NS);
this.toolbar = null;
this.footer = null;
},
_attachEvents: function() {
this._resizeHandler = proxy(this.resize, this);
$(window).on("resize" + NS, this._resizeHandler);
},
_wrapper: function() {
var ganttStyles = Gantt.styles;
var splitBarHandleClassName = [ganttStyles.icon, ganttStyles.resizeHandle].join(" ");
var options = this.options;
var height = options.height;
var width = options.width;
this.wrapper = this.element
.addClass(ganttStyles.wrapper)
.append("
")
.append("
")
.append("
");
this.wrapper.find(DOT + ganttStyles.list).width(options.listWidth);
if (height) {
this.wrapper.height(height);
}
if (width) {
this.wrapper.width(width);
}
},
_toolbar: function() {
var that = this;
var ganttStyles = Gantt.styles;
var viewsSelector = DOT + ganttStyles.toolbar.views + " > li";
var hoveredClassName = ganttStyles.hovered;
var toolbar = $(HEADER_TEMPLATE({
ns: kendo.ns,
views: this.timeline.views,
styles: Gantt.styles.toolbar,
action: {
data: "add",
title: this.options.messages.actions.append
},
editable: this.options.editable
}));
this.wrapper.prepend(toolbar);
this.toolbar = toolbar;
toolbar
.on(CLICK + NS, viewsSelector, function(e) {
e.preventDefault();
var name = $(this).attr(kendo.attr("name"));
if (!that.trigger("navigate", { view: name })) {
that.view(name);
}
});
this.wrapper
.find(DOT + ganttStyles.toolbar.toolbar + " li")
.hover(function() {
$(this).addClass(hoveredClassName);
}, function() {
$(this).removeClass(hoveredClassName);
});
},
_footer: function() {
if (this.options.editable !== true) {
return;
}
var footer = $(FOOTER_TEMPLATE({
styles: Gantt.styles.toolbar,
action: {
data: "add",
title: this.options.messages.actions.append
}
}));
this.wrapper.append(footer);
this.footer = footer;
},
_adjustDimensions: function() {
var element = this.element;
var ganttStyles = Gantt.styles;
var listSelector = DOT + ganttStyles.list;
var timelineSelector = DOT + ganttStyles.timeline;
var splitBarSelector = DOT + ganttStyles.splitBar;
var toolbarHeight = this.toolbar.outerHeight();
var footerHeight = this.footer ? this.footer.outerHeight() : 0;
var totalHeight = element.height();
var totalWidth = element.width();
var splitBarWidth = element.find(splitBarSelector).outerWidth();
var treeListWidth = element.find(listSelector).outerWidth();
element
.children([listSelector, timelineSelector, splitBarSelector].join(","))
.height(totalHeight - (toolbarHeight + footerHeight))
.end()
.children(timelineSelector)
.width(totalWidth - (splitBarWidth + treeListWidth));
},
_scrollTo: function(value) {
var view = this.timeline.view();
var attr = kendo.attr("uid");
var id = typeof value === "string" ? value :
value.closest("tr" + selector()).attr(attr);
var scrollTarget = view.content.find(selector(id));
if (scrollTarget.length !== 0) {
view._scrollTo(scrollTarget);
}
},
_dropDowns: function() {
var that = this;
var actionsSelector = DOT + Gantt.styles.toolbar.actions;
var actionMessages = this.options.messages.actions;
var dataSource = this.dataSource;
var timeline = this.timeline;
var handler = function(e) {
var type = e.type;
var orderId;
var task = dataSource._createNewModel();
var selected = that.dataItem(that.select());
var parent = dataSource.taskParent(selected);
var firstSlot = timeline.view()._timeSlots()[0];
var target = type === "add" ? selected : parent;
task.set("title", "New task");
if (target) {
task.set("parentId", target.get("id"));
task.set("start", target.get("start"));
task.set("end", target.get("end"));
} else {
task.set("start", firstSlot.start);
task.set("end", firstSlot.end);
}
if (type !== "add") {
orderId = selected.get("orderId");
orderId = type === "insert-before" ? orderId : orderId + 1;
}
that._createTask(task, orderId);
};
if (this.options.editable !== true) {
return;
}
this.footerDropDown = new TaskDropDown(this.footer.children(actionsSelector).eq(0), {
messages: {
actions: actionMessages
},
direction: "up",
animation: {
open: {
effects: "slideIn:up"
}
},
navigatable: that.options.navigatable
});
this.headerDropDown = new TaskDropDown(this.toolbar.children(actionsSelector).eq(0), {
messages: {
actions: actionMessages
},
navigatable: that.options.navigatable
});
this.footerDropDown.bind("command", handler);
this.headerDropDown.bind("command", handler);
},
_list: function() {
var that = this;
var navigatable = that.options.navigatable;
var ganttStyles = Gantt.styles;
var listWrapper = this.wrapper.find(DOT + ganttStyles.list);
var element = listWrapper.find("> div");
var toggleButtons = this.wrapper.find(DOT + ganttStyles.toolbar.actions + " > button");
var options = {
columns: this.options.columns || [],
dataSource: this.dataSource,
selectable: this.options.selectable,
editable: this.options.editable,
listWidth: listWrapper.outerWidth()
};
var restoreFocus = function() {
if (navigatable) {
that._current(that._cachedCurrent);
focusTable(that.list.content.find("table"), true);
}
delete that._cachedCurrent;
};
this.list = new kendo.ui.GanttList(element, options);
this.list
.bind("render", function() {
that._navigatable();
}, true)
.bind("edit", function(e) {
that._cachedCurrent = e.cell;
if (that.trigger("edit", { task: e.model, container: e.cell })) {
e.preventDefault();
}
})
.bind("cancel", function(e) {
if (that.trigger("cancel", { task: e.model, container: e.cell })) {
e.preventDefault();
}
restoreFocus();
})
.bind("update", function(e) {
that._updateTask(e.task, e.updateInfo);
restoreFocus();
})
.bind("change", function() {
that.trigger("change");
var selection = that.list.select();
if (selection.length) {
toggleButtons.removeAttr("data-action", "add");
that.timeline.select("[data-uid='" + selection.attr("data-uid") + "']");
} else {
toggleButtons.attr("data-action", "add");
that.timeline.clearSelection();
}
});
},
_timeline: function() {
var that = this;
var ganttStyles = Gantt.styles;
var options = trimOptions(extend(true, {}, this.options));
var element = this.wrapper.find(DOT + ganttStyles.timeline + " > div");
this.timeline = new kendo.ui.GanttTimeline(element, options);
this.timeline
.bind("navigate", function(e) {
that.toolbar
.find(DOT + ganttStyles.toolbar.views +" > li")
.removeClass(ganttStyles.selected)
.end()
.find(DOT + ganttStyles.toolbar.viewButton + "-" + e.view.replace(/\./g, "\\.").toLowerCase())
.addClass(ganttStyles.selected);
that.refresh();
})
.bind("moveStart", function(e) {
if (that.trigger("moveStart", { task: e.task })) {
e.preventDefault();
}
})
.bind("move", function(e) {
var task = e.task;
var start = e.start;
var end = new Date(start.getTime() + task.duration());
if (that.trigger("move", { task: task, start: start, end: end })) {
e.preventDefault();
}
})
.bind("moveEnd", function(e) {
var task = e.task;
var start = e.start;
var end = new Date(start.getTime() + task.duration());
if (!that.trigger("moveEnd", { task: task, start: start, end: end })) {
that._updateTask(that.dataSource.getByUid(task.uid), {
start: start,
end: end
});
}
})
.bind("resizeStart", function(e) {
if (that.trigger("resizeStart", { task: e.task })) {
e.preventDefault();
}
})
.bind("resize", function(e) {
if (that.trigger("resize", { task: e.task, start: e.start, end: e.end })) {
e.preventDefault();
}
})
.bind("resizeEnd", function(e) {
var task = e.task;
var updateInfo = {};
if (e.resizeStart) {
updateInfo.start = e.start;
} else {
updateInfo.end = e.end;
}
if (!that.trigger("resizeEnd", { task: task, start: e.start, end: e.end })) {
that._updateTask(that.dataSource.getByUid(task.uid), updateInfo);
}
})
.bind("percentResizeEnd", function(e) {
that._updateTask(that.dataSource.getByUid(e.task.uid), { percentComplete: e.percentComplete });
})
.bind("dependencyDragEnd", function(e) {
var dependency = that.dependencies._createNewModel({
type: e.type,
predecessorId: e.predecessor.id,
successorId: e.successor.id
});
that._createDependency(dependency);
})
.bind("select", function(e) {
that.select("[data-uid='" + e.uid + "']");
})
.bind("clear", function(e) {
that.clearSelection();
})
.bind("removeTask", function(e) {
that.removeTask(that.dataSource.getByUid(e.uid));
})
.bind("removeDependency", function(e) {
that.removeDependency(that.dependencies.getByUid(e.uid));
});
},
_dataSource: function() {
var options = this.options;
var dataSource = options.dataSource;
dataSource = isArray(dataSource) ? { data: dataSource } : dataSource;
if (this.dataSource && this._refreshHandler) {
this.dataSource
.unbind("change", this._refreshHandler)
.unbind("progress", this._progressHandler)
.unbind("error", this._errorHandler);
} else {
this._refreshHandler = proxy(this.refresh, this);
this._progressHandler = proxy(this._requestStart, this);
this._errorHandler = proxy(this._error, this);
}
this.dataSource = kendo.data.GanttDataSource.create(dataSource)
.bind("change", this._refreshHandler)
.bind("progress", this._progressHandler)
.bind("error", this._errorHandler);
},
_dependencies: function() {
var dependencies = this.options.dependencies || {};
var dataSource = isArray(dependencies) ? { data: dependencies } : dependencies;
if (this.dependencies && this._dependencyRefreshHandler) {
this.dependencies
.unbind("change", this._dependencyRefreshHandler)
.unbind("error", this._dependencyErrorHandler);
} else {
this._dependencyRefreshHandler = proxy(this.refreshDependencies, this);
this._dependencyErrorHandler = proxy(this._error, this);
}
this.dependencies = kendo.data.GanttDependencyDataSource.create(dataSource)
.bind("change", this._dependencyRefreshHandler)
.bind("error", this._dependencyErrorHandler);
},
view: function(type) {
return this.timeline.view(type);
},
dataItem: function(value) {
if (!value) {
return null;
}
var list = this.list;
var element = list.content.find(value);
return list._modelFromElement(element);
},
setDataSource: function(dataSource) {
this.options.dataSource = dataSource;
this._dataSource();
this.list._setDataSource(this.dataSource);
if (this.options.autoBind) {
dataSource.fetch();
}
},
setDependenciesDataSource: function(dependencies) {
this.options.dependencies = dependencies;
this._dependencies();
if (this.options.autoBind) {
dependencies.fetch();
}
},
items: function() {
return this.wrapper.children(".k-task");
},
_updateTask: function(task, updateInfo) {
if (!this.trigger("save", { task: task, values: updateInfo })) {
this._preventRefresh = true;
this.dataSource.update(task, updateInfo);
this._syncDataSource();
}
},
removeTask: function(uid) {
var task = typeof uid === "string" ? this.dataSource.getByUid(uid) : uid;
if (!task) {
return;
}
var dependencies = this.dependencies.dependencies(task.id);
if (!this.trigger("remove", {
task: task,
dependencies: dependencies
})) {
this._removeTaskDependencies(task, dependencies);
this._preventRefresh = true;
if (this.dataSource.remove(task)) {
this._syncDataSource();
}
this._preventRefresh = false;
}
},
_createTask: function(task, index) {
if (!this.trigger("add", {
task: task,
dependency: null
})) {
var dataSource = this.dataSource;
this._preventRefresh = true;
if (index === undefined) {
dataSource.add(task);
} else {
dataSource.insert(index, task);
}
this._scrollToUid = task.uid;
this._syncDataSource();
}
},
_createDependency: function(dependency) {
if (!this.trigger("add", {
task: null,
dependency: dependency
})) {
this._preventDependencyRefresh = true;
this.dependencies.add(dependency);
this._preventDependencyRefresh = false;
this.dependencies.sync();
}
},
removeDependency: function(uid) {
var dependency = typeof uid === "string" ? this.dependencies.getByUid(uid) : uid;
if (!this.trigger("remove", {
task: null,
dependencies: [dependency]
})) {
if (this.dependencies.remove(dependency)) {
this.dependencies.sync();
}
}
},
_removeTaskDependencies: function(task, dependencies) {
this._preventDependencyRefresh = true;
for (var i = 0, length = dependencies.length; i < length; i++) {
this.dependencies.remove(dependencies[i]);
}
this._preventDependencyRefresh = false;
this.dependencies.sync();
},
refresh: function(e) {
if (this._preventRefresh || this.list.editable) {
return;
}
this._progress(false);
var dataSource = this.dataSource;
var taskTree = dataSource.taskTree();
var scrollToUid = this._scrollToUid;
var current;
var cachedUid;
var cachedIndex = -1;
if (this.current) {
cachedUid = this.current.closest("tr").attr(kendo.attr("uid"));
cachedIndex = this.current.index();
}
if (this.trigger("dataBinding")) {
return;
}
this.clearSelection();
this.list._render(taskTree);
this.timeline._render(taskTree);
this.timeline._renderDependencies(this.dependencies.view());
if (scrollToUid) {
this._scrollTo(scrollToUid);
this.select(selector(scrollToUid));
}
if ((scrollToUid || cachedUid) && cachedIndex >= 0) {
current = this.list.content
.find("tr" + selector((scrollToUid || cachedUid)) + " > td:eq(" + cachedIndex + ")");
this._current(current);
}
this._scrollToUid = null;
this.trigger("dataBound");
},
refreshDependencies: function(e) {
if (this._preventDependencyRefresh) {
return;
}
if (this.trigger("dataBinding")) {
return;
}
this.timeline._renderDependencies(this.dependencies.view());
this.trigger("dataBound");
},
_syncDataSource: function() {
this._preventRefresh = false;
this._requestStart();
this.dataSource.sync();
},
_requestStart: function() {
this._progress(true);
},
_error: function() {
this._progress(false);
},
_progress: function(toggle) {
kendo.ui.progress(this.element, toggle);
},
_resizable: function() {
var wrapper = this.wrapper;
var ganttStyles = Gantt.styles;
var contentSelector = DOT + ganttStyles.gridContent;
var treeListWrapper = wrapper.find(DOT + ganttStyles.list);
var timelineWrapper = wrapper.find(DOT + ganttStyles.timeline);
var treeListWidth;
var timelineWidth;
var timelineScroll;
this._resizeDraggable = wrapper
.find(DOT + ganttStyles.splitBar)
.height(treeListWrapper.height())
.hover(function (e) {
$(this).addClass(ganttStyles.splitBarHover);
}, function (e) {
$(this).removeClass(ganttStyles.splitBarHover);
})
.end()
.kendoResizable({
orientation: "horizontal",
handle: DOT + ganttStyles.splitBar,
"start": function (e) {
treeListWidth = treeListWrapper.width();
timelineWidth = timelineWrapper.width();
timelineScroll = timelineWrapper.find(contentSelector).scrollLeft();
},
"resize": function(e) {
var delta = e.x.initialDelta;
if (treeListWidth + delta < 0 || timelineWidth - delta < 0) {
return;
}
treeListWrapper.width(treeListWidth + delta);
timelineWrapper.width(timelineWidth - delta);
timelineWrapper.find(contentSelector).scrollLeft(timelineScroll + delta);
}
}).data("kendoResizable");
},
_scrollable: function() {
var ganttStyles = Gantt.styles;
var contentSelector = DOT + ganttStyles.gridContent;
var headerSelector = DOT + ganttStyles.gridHeaderWrap;
var timelineWrapper = this.timeline.element;
var treeListWrapper = this.list.element;
timelineWrapper.find(contentSelector).on("scroll", function(e) {
timelineWrapper.find(headerSelector).scrollLeft(this.scrollLeft);
treeListWrapper.find(contentSelector).scrollTop(this.scrollTop);
});
treeListWrapper.find(contentSelector)
.on("scroll", function(e) {
treeListWrapper.find(headerSelector).scrollLeft(this.scrollLeft);
})
.on("DOMMouseScroll" + NS + " mousewheel" + NS, function(e) {
var content = timelineWrapper.find(contentSelector);
var scrollTop = content.scrollTop();
var delta = kendo.wheelDeltaY(e);
if (delta) {
e.preventDefault();
//In Firefox DOMMouseScroll event cannot be canceled
$(e.currentTarget).one("wheel" + NS, false);
content.scrollTop(scrollTop + (-delta));
}
});
},
_navigatable: function() {
var that = this;
var navigatable = this.options.navigatable;
var editable = this.options.editable;
var headerTable = this.list.header.find("table");
var contentTable = this.list.content.find("table");
var ganttStyles = Gantt.styles;
var timelineContent = this.timeline.element.find(DOT + ganttStyles.gridContent);
var tables = headerTable.add(contentTable);
var attr = selector();
var cellIndex;
var expandState = {
collapse: false,
expand: true
};
var scroll = function(reverse) {
var width = that.timeline.view()._timeSlots()[0].offsetWidth;
timelineContent.scrollLeft(timelineContent.scrollLeft() + (reverse ? -width : width));
};
var moveVertical = function(method) {
var parent = that.current.parent("tr" + selector());
var index = that.current.index();
var subling = parent[method]();
if (that.select().length !== 0) {
that.clearSelection();
}
if (subling.length !== 0) {
that._current(subling.children("td:eq(" + index + ")"));
that._scrollTo(that.current);
} else {
if (that.current.is("td") && method == "prev") {
focusTable(headerTable);
} else if (that.current.is("th") && method == "next") {
focusTable(contentTable);
}
}
};
var moveHorizontal = function(method) {
var subling = that.current[method]();
if (subling.length !== 0) {
that._current(subling);
cellIndex = that.current.index();
}
};
var toggleExpandedState = function(value) {
var model = that.dataItem(that.current);
if (model.summary && model.expanded !== value) {
model.set("expanded", value);
}
};
var deleteAction = function() {
if (!that.options.editable || that.list.editable) {
return;
}
var selectedTask = that.select();
var uid = kendo.attr("uid");
if (selectedTask.length) {
that.removeTask(selectedTask.attr(uid));
}
};
$(this.wrapper)
.on("mousedown" + NS, "tr" + attr + ", div" + attr + ":not(" + DOT + ganttStyles.line + ")", function(e) {
var currentTarget = $(e.currentTarget);
var isInput = $(e.target).is(":button,a,:input,a>.k-icon,textarea,span.k-icon,span.k-link,.k-input,.k-multiselect-wrap");
var current;
if (e.ctrlKey) {
return;
}
if (navigatable) {
if (currentTarget.is("tr")) {
current = $(e.target).closest("td");
} else {
current = that.list
.content.find("tr" + selector(currentTarget.attr(kendo.attr("uid"))) + " > td:first");
}
that._current(current);
}
if ((navigatable || editable) && !isInput) {
setTimeout(function() {
focusTable(that.list.content.find("table"), true);
}, 2);
}
});
if (navigatable !== true) {
contentTable
.on("keydown" + NS, function(e) {
if (e.keyCode == keys.DELETE) {
deleteAction();
}
});
return;
}
tables
.on("focus" + NS, function(e) {
var selector = this === contentTable.get(0) ? "td" : "th";
var table = $(this);
var selection = that.select();
var current = that.current || $((selection.length ? selection : this))
.find(selector + ":eq(" + (cellIndex || 0) + ")");
that._current(current);
})
.on("blur" + NS, function() {
that._current();
if (this == headerTable) {
$(this).attr(TABINDEX, -1);
}
})
.on("keydown" + NS, function(e) {
var key = e.keyCode;
var isCell;
if (!that.current) {
return;
}
isCell = that.current.is("td");
switch (key) {
case keys.RIGHT:
e.preventDefault();
if (e.altKey) {
scroll();
} else if (e.ctrlKey) {
toggleExpandedState(expandState.expand);
} else {
moveHorizontal("next");
}
break;
case keys.LEFT:
e.preventDefault();
if (e.altKey) {
scroll(true);
} else if (e.ctrlKey) {
toggleExpandedState(expandState.collapse);
} else {
moveHorizontal("prev");
}
break;
case keys.UP:
e.preventDefault();
moveVertical("prev");
break;
case keys.DOWN:
e.preventDefault();
moveVertical("next");
break;
case keys.SPACEBAR:
e.preventDefault();
if (isCell) {
that.select(that.current.closest("tr"));
}
break;
case keys.ENTER:
e.preventDefault();
if (isCell) {
if (that.options.editable) {
that._cachedCurrent = that.current;
that.list._startEditHandler(that.current);
/* Stop the event propagation so that the list widget won't close its editor immediately */
e.stopPropagation();
}
} else {
/* Sort */
that.current
.children("a.k-link")
.click();
}
break;
case keys.ESC:
e.stopPropagation();
break;
case keys.DELETE:
if (isCell) {
deleteAction();
}
break;
default:
if (key >= 49 && key <= 57) {
that.view(that.timeline._viewByIndex(key - 49));
}
break;
}
});
},
_current: function(element) {
var ganttStyles = Gantt.styles;
var activeElement;
if (this.current && this.current.length) {
this.current
.removeClass(ganttStyles.focused)
.removeAttr("id");
}
if (element && element.length) {
this.current = element
.addClass(ganttStyles.focused)
.attr("id", ACTIVE_CELL);
activeElement = $(kendo._activeElement());
if (activeElement.is("table") && this.wrapper.find(activeElement).length > 0) {
activeElement
.removeAttr(ARIA_DESCENDANT)
.attr(ARIA_DESCENDANT, ACTIVE_CELL);
}
} else {
this.current = null;
}
},
_dataBind: function() {
var that = this;
if (that.options.autoBind) {
this._preventRefresh = true;
this._preventDependencyRefresh = true;
var promises = $.map([this.dataSource, this.dependencies], function(dataSource) {
return dataSource.fetch();
});
$.when.apply(null, promises)
.done(function() {
that._preventRefresh = false;
that._preventDependencyRefresh = false;
that.refresh();
});
}
},
_resize: function() {
this._adjustDimensions();
this.timeline.view()._adjustHeight();
this.list._adjustHeight();
}
});
kendo.ui.plugin(Gantt);
extend(true, Gantt, { styles: ganttStyles });
})(window.kendo.jQuery);
/*jshint eqnull: true*/
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
ns = ".kendoPivotConfigurator",
HOVEREVENTS = "mouseenter" + ns + " mouseleave" + ns,
SETTING_CONTAINER_TEMPLATE = kendo.template('
' +
'
');
function settingTargetFromNode(node) {
var target = $(node).closest(".k-pivot-setting");
if (target.length) {
return target.data("kendoPivotSettingTarget");
}
return null;
}
var PivotConfigurator = Widget.extend({
init: function(element, options) {
Widget.fn.init.call(this, element, options);
this.element.addClass("k-widget k-fieldselector k-alt k-edit-form-container");
this._dataSource();
this._layout();
this.refresh();
kendo.notify(this);
},
events: [],
options: {
name: "PivotConfigurator",
filterable: false,
messages: {
measures: "Drop Data Fields Here",
columns: "Drop Column Fields Here",
rows: "Drop Rows Fields Here",
measuresLabel: "Measures",
columnsLabel: "Columns",
rowsLabel: "Rows",
fieldsLabel: "Fields"
}
},
_dataSource: function() {
if (this.dataSource && this._refreshHandler) {
this.dataSource.unbind("change", this._refreshHandler);
} else {
this._refreshHandler = $.proxy(this.refresh, this);
}
this.dataSource = kendo.data.PivotDataSource.create(this.options.dataSource);
this.dataSource.bind("change", this._refreshHandler);
},
setDataSource: function(dataSource) {
this.options.dataSource = dataSource;
this._dataSource();
if (this.measures) {
this.measures.setDataSource(dataSource);
}
if (this.rows) {
this.rows.setDataSource(dataSource);
}
if (this.columns) {
this.columns.setDataSource(dataSource);
}
this.refresh();
},
_treeViewDataSource: function() {
var that = this;
return kendo.data.HierarchicalDataSource.create({
schema: {
model: {
id: "uniqueName",
hasChildren: function(item) {
return !("hierarchyUniqueName" in item) && !("aggregator" in item);
}
}
},
transport: {
read: function(options) {
var promise;
if ($.isEmptyObject(options.data)) {
promise = that.dataSource.schemaDimensions();
} else {
//Hack to get the actual node as the HierarchicalDataSource does not support passing it
var node = that.treeView.dataSource.get(options.data.uniqueName);
if (node.type == 2) { //measure
promise = that.dataSource.schemaMeasures();
} else if (node.dimensionUniqueName) { // hierarchy
promise = that.dataSource.schemaLevels(options.data.uniqueName);
} else { // dimension
promise = that.dataSource.schemaHierarchies(options.data.uniqueName);
}
}
promise.done(options.success)
.fail(options.error);
}
}
});
},
_layout: function() {
this.form = $('
').appendTo(this.element);
this._fields();
this._targets();
},
_fields: function() {
var container = $('
').appendTo(this.form);
var that = this;
this.treeView = $("
").appendTo(container)
.kendoTreeView({
dataTextField: "name",
dragAndDrop: true,
autoBind: false,
dataSource: this._treeViewDataSource(),
dragstart: function(e) {
var dataItem = this.dataItem(e.sourceNode);
if ((!dataItem.hasChildren && !dataItem.aggregator) || (dataItem.type == 2)) {
e.preventDefault();
}
},
drag: function(e) {
var status = "k-denied";
var setting = settingTargetFromNode(e.dropTarget);
if (setting && setting.validate(this.dataItem(e.sourceNode))) {
status = "k-add";
}
e.setStatusClass(status);
},
drop: function(e) {
e.preventDefault();
var setting = settingTargetFromNode(e.dropTarget);
var node = this.dataItem(e.sourceNode);
if (setting && setting.validate(node)) {
setting.add(node.defaultHierarchy || node.uniqueName);
}
}
})
.data("kendoTreeView");
},
_createTarget: function(element, options) {
var filter = options.filterable ? '
' : '';
return new kendo.ui.PivotSettingTarget(element, $.extend({
dataSource: this.dataSource,
hint: function(element) {
var wrapper = $('
');
wrapper.find(".k-list").append(element.clone());
return wrapper;
},
template: '',
emptyTemplate: '
${data} '
}, options));
},
_targets: function() {
var container = $('
').appendTo(this.form);
var columnsContainer = $(SETTING_CONTAINER_TEMPLATE({ name: this.options.messages.columnsLabel, icon: "k-i-vbars" })).appendTo(container);
var columns = $('
').appendTo(columnsContainer.last());
var rowsContainer = $(SETTING_CONTAINER_TEMPLATE({ name: this.options.messages.rowsLabel, icon: "k-i-hbars" })).appendTo(container);
var rows = $('
').appendTo(rowsContainer.last());
var measuresContainer = $(SETTING_CONTAINER_TEMPLATE({ name: this.options.messages.measuresLabel, icon: "k-i-sum"})).appendTo(container);
var measures = $('
').appendTo(measuresContainer.last());
this.columns = this._createTarget(columns, {
filterable: this.options.filterable,
connectWith: rows,
messages: {
empty: this.options.messages.columns,
fieldMenu: this.options.messages.fieldMenu
}
});
this.rows = this._createTarget(rows, {
filterable: this.options.filterable,
setting: "rows",
connectWith: columns,
messages: {
empty: this.options.messages.rows,
fieldMenu: this.options.messages.fieldMenu
}
});
this.measures = this._createTarget(measures, {
setting: "measures",
messages: {
empty: this.options.messages.measures
}
});
columns
.add(rows)
.add(measures)
.on(HOVEREVENTS, ".k-item:not(.k-empty)", this._toggleHover);
},
_toggleHover: function(e) {
$(e.currentTarget).toggleClass("k-state-hover", e.type === "mouseenter");
},
refresh: function() {
var dataSource = this.dataSource;
if (this._cube !== dataSource.cube() || this._catalog !== dataSource.catalog()) {
this.treeView.dataSource.fetch();
}
this._catalog = this.dataSource.catalog();
this._cube = this.dataSource.cube();
},
destroy: function() {
Widget.fn.destroy.call(this);
this.dataSource.unbind("change", this._refreshHandler);
this.form.find(".k-list").off(ns);
this.rows.destroy();
this.columns.destroy();
this.measures.destroy();
this.treeView.destroy();
this.element = null;
this._refreshHandler = null;
}
});
ui.plugin(PivotConfigurator);
})(window.kendo.jQuery);
(function ($, angular, undefined) {
"use strict";
if (!angular) {
return;
}
/*jshint eqnull:true,loopfunc:true,-W052,-W028 */
var module = angular.module('kendo.directives', []);
var $parse, $timeout, $compile, $log;
function withoutTimeout(f) {
var save = $timeout;
try {
$timeout = function(f){ return f(); };
return f();
} finally {
$timeout = save;
}
}
var OPTIONS_NOW;
var createDataSource = (function() {
var types = {
TreeView : 'HierarchicalDataSource',
Scheduler : 'SchedulerDataSource',
PanelBar : '$PLAIN',
Menu : "$PLAIN",
ContextMenu : "$PLAIN"
};
var toDataSource = function(dataSource, type) {
if (type == '$PLAIN') {
return dataSource;
}
return kendo.data[type].create(dataSource);
};
return function(scope, element, role, source) {
var type = types[role] || 'DataSource';
var ds = toDataSource(scope.$eval(source), type);
// not recursive -- this triggers when the whole data source changed
scope.$watch(source, function(mew, old){
if (mew !== old) {
var ds = toDataSource(mew, type);
var widget = kendoWidgetInstance(element);
if (widget && typeof widget.setDataSource == "function") {
widget.setDataSource(ds);
}
}
});
return ds;
};
}());
var ignoredAttributes = {
kDataSource : true,
kOptions : true,
kRebind : true,
kNgModel : true,
kNgDelay : true
};
function addOption(scope, options, name, value) {
options[name] = angular.copy(scope.$eval(value));
if (options[name] === undefined && value.match(/^\w*$/)) {
$log.warn(name + ' attribute resolved to undefined. Maybe you meant to use a string literal like: \'' + value + '\'?');
}
}
function createWidget(scope, element, attrs, widget, origAttr) {
var role = widget.replace(/^kendo/, '');
var options = angular.extend({}, scope.$eval(attrs.kOptions || attrs.options));
var ctor = $(element)[widget];
if (!ctor) {
window.console.error("Could not find: " + widget);
return null;
}
var widgetOptions = ctor.widget.prototype.options;
var widgetEvents = ctor.widget.prototype.events;
$.each(attrs, function(name, value) {
if (name === "source" || name === "kDataSource") {
return;
}
var dataName = "data" + name.charAt(0).toUpperCase() + name.slice(1);
if (name.indexOf("on") === 0) { // let's search for such event.
var eventKey = name.replace(/^on./, function(prefix) {
return prefix.charAt(2).toLowerCase();
});
if (widgetEvents.indexOf(eventKey) > -1) {
options[eventKey] = value;
}
} // don't elsif here - there are on* options
if (widgetOptions.hasOwnProperty(dataName)) {
addOption(scope, options, dataName, value);
} else if (widgetOptions.hasOwnProperty(name) && name != "name") { // `name` must be forbidden. XXX: other names to ignore here?
addOption(scope, options, name, value);
} else if (!ignoredAttributes[name]) {
var match = name.match(/^k(On)?([A-Z].*)/);
if (match) {
var optionName = match[2].charAt(0).toLowerCase() + match[2].slice(1);
if (match[1] && name != "kOnLabel" // XXX: k-on-label can be used on MobileSwitch :-\
) {
options[optionName] = value;
} else {
if (name == "kOnLabel") {
optionName = "onLabel"; // XXX: that's awful.
}
addOption(scope, options, optionName, value);
}
}
}
});
// parse the datasource attribute
var dataSource = attrs.kDataSource || attrs.source;
if (dataSource) {
options.dataSource = createDataSource(scope, element, role, dataSource);
}
// deepExtend in kendo.core (used in Editor) will fail with stack
// overflow if we don't put it in an array :-\
options.$angular = [ scope ];
if (element.is("select")) {
(function(options){
if (options.length > 0) {
var first = $(options[0]);
if (!/\S/.test(first.text()) && /^\?/.test(first.val())) {
first.remove();
}
}
}(element[0].options));
}
var object = ctor.call(element, OPTIONS_NOW = options).data(widget);
exposeWidget(object, scope, attrs, widget, origAttr);
scope.$emit("kendoWidgetCreated", object);
return object;
}
function exposeWidget(widget, scope, attrs, kendoWidget, origAttr) {
if (attrs[origAttr]) {
// expose the widget object
var set = $parse(attrs[origAttr]).assign;
if (set) {
// set the value of the expression to the kendo widget object to expose its api
set(scope, widget);
} else {
throw new Error(origAttr + ' attribute used but expression in it is not assignable: ' + attrs[kendoWidget]);
}
}
}
module.factory('directiveFactory', ['$timeout', '$parse', '$compile', '$log', function(timeout, parse, compile, log) {
$timeout = timeout;
$parse = parse;
$compile = compile;
$log = log;
var KENDO_COUNT = 0;
var RENDERED = false;
var create = function(role, origAttr) {
return {
// Parse the directive for attributes and classes
restrict: "AC",
require: [ "?ngModel", "^?form" ],
scope: false,
transclude: true,
controller: [ '$scope', '$attrs', '$element', '$transclude', function($scope, $attrs, $element, $transclude) {
// Make the element's contents available to the kendo widget to allow creating some widgets from existing elements.
$transclude($scope, function(clone){
$element.append(clone);
});
}],
link: function(scope, element, attrs, controllers) {
var ngModel = controllers[0];
var ngForm = controllers[1];
// we must remove data-kendo-widget-name attribute because
// it breaks kendo.widgetInstance; can generate all kinds
// of funny issues like
//
// https://github.com/kendo-labs/angular-kendo/issues/167
//
// but we still keep the attribute without the
// `data-` prefix, so k-rebind would work.
var roleattr = role.replace(/([A-Z])/g, "-$1");
$(element).attr(roleattr, $(element).attr("data-" + roleattr));
$(element)[0].removeAttribute("data-" + roleattr);
++KENDO_COUNT;
var kNgDelay = attrs.kNgDelay;
$timeout(function createIt() {
if (kNgDelay) {
return (function(){
var unregister = scope.$watch(kNgDelay, function(newValue, oldValue){
if (newValue !== oldValue) {
unregister();
kNgDelay = null;
$timeout(createIt); // XXX: won't work without `timeout` ;-\
}
});
})();
}
// if k-rebind attribute is provided, rebind the kendo widget when
// the watched value changes
if (attrs.kRebind) {
var originalElement = attrs.$kendoOrigElement || $(element)[0].cloneNode(true);
// watch for changes on the expression passed in the k-rebind attribute
var unregister = scope.$watch(attrs.kRebind, function(newValue, oldValue) {
if (newValue !== oldValue) {
unregister(); // this watcher will be re-added if we compile again!
/****************************************************************
// XXX: this is a gross hack that might not even work with all
// widgets. we need to destroy the current widget and get its
// wrapper element out of the DOM, then make the original element
// visible so we can initialize a new widget on it.
//
// kRebind is probably impossible to get right at the moment.
****************************************************************/
var _wrapper = $(widget.wrapper)[0];
var _element = $(widget.element)[0];
widget.destroy();
widget = null;
if (_wrapper && _element) {
_wrapper.parentNode.replaceChild(_element, _wrapper);
var clone = originalElement.cloneNode(true);
$(element).replaceWith(clone);
element = $(clone);
}
$compile(element)(scope);
}
}, true); // watch for object equality. Use native or simple values.
}
var widget = createWidget(scope, element, attrs, role, origAttr);
setupBindings();
var prev_destroy = null;
function setupBindings() {
var isFormField = /^(input|select|textarea)$/i.test(element[0].tagName);
function formValue(element) {
if (/checkbox|radio/i.test(element.attr("type"))) {
return element.prop("checked");
}
return element.val();
}
function value() {
return isFormField ? formValue(element) : widget.value();
}
// Cleanup after ourselves
if (prev_destroy) {
prev_destroy();
}
prev_destroy = scope.$on("$destroy", function() {
if (widget) {
if (widget.element) {
widget = kendoWidgetInstance(widget.element);
if (widget) {
widget.destroy();
}
}
widget = null;
}
});
// 2 way binding: ngModel <-> widget.value()
OUT: if (ngModel) {
if (!widget.value) {
break OUT;
}
// Angular will invoke $render when the view needs to be updated with the view value.
ngModel.$render = function() {
// Update the widget with the view value.
// delaying with setTimout for cases where the datasource is set thereafter.
// https://github.com/kendo-labs/angular-kendo/issues/304
var val = ngModel.$viewValue;
if (val === undefined) {
val = ngModel.$modelValue;
}
setTimeout(function(){
if (widget) { // might have been destroyed in between. :-(
widget.value(val);
}
}, 0);
};
// Some widgets trigger "change" on the input field
// and this would result in two events sent (#135)
var haveChangeOnElement = false;
if (isFormField) {
element.on("change", function(){
haveChangeOnElement = true;
});
}
var onChange = function(pristine){
return function(){
var formPristine;
if (haveChangeOnElement) {
return;
}
haveChangeOnElement = false;
if (pristine && ngForm) {
formPristine = ngForm.$pristine;
}
ngModel.$setViewValue(value());
if (pristine) {
ngModel.$setPristine();
if (formPristine) {
ngForm.$setPristine();
}
}
digest(scope);
};
};
widget.first("change", onChange(false));
widget.first("dataBound", onChange(true));
var currentVal = value();
// if the model value is undefined, then we set the widget value to match ( == null/undefined )
if (currentVal != ngModel.$viewValue) {
if (!ngModel.$isEmpty(ngModel.$viewValue)) {
widget.value(ngModel.$viewValue);
} else if (currentVal != null && currentVal !== "" && currentVal != ngModel.$viewValue) {
ngModel.$setViewValue(currentVal);
}
}
ngModel.$setPristine();
}
// kNgModel is used for the "logical" value
OUT2: if (attrs.kNgModel) {
if (typeof widget.value != "function") {
$log.warn("k-ng-model specified on a widget that does not have the value() method: " + (widget.options.name));
break OUT2;
}
var getter = $parse(attrs.kNgModel);
var setter = getter.assign;
var updating = false;
widget.value(getter(scope));
// keep in sync
scope.$watch(attrs.kNgModel, function(newValue, oldValue){
if (updating) {
return;
}
if (newValue === oldValue) {
return;
}
widget.value(newValue);
});
widget.first("change", function(){
updating = true;
scope.$apply(function(){
setter(scope, widget.value());
});
updating = false;
});
}
}
// mutation observers — propagate the original
// element's class to the widget wrapper.
(function(){
if (!(window.MutationObserver && widget.wrapper)) {
return;
}
var prevClassList = [].slice.call($(element)[0].classList);
var mo = new MutationObserver(function(changes){
suspend(); // make sure we don't trigger a loop
if (!widget) {
return;
}
changes.forEach(function(chg){
var w = $(widget.wrapper)[0];
switch (chg.attributeName) {
case "class":
// sync classes to the wrapper element
var currClassList = [].slice.call(chg.target.classList);
currClassList.forEach(function(cls){
if (prevClassList.indexOf(cls) < 0) {
w.classList.add(cls);
if (widget instanceof kendo.ui.ComboBox) { // https://github.com/kendo-labs/angular-kendo/issues/356
widget.input[0].classList.add(cls);
}
}
});
prevClassList.forEach(function(cls){
if (currClassList.indexOf(cls) < 0) {
w.classList.remove(cls);
if (widget instanceof kendo.ui.ComboBox) { // https://github.com/kendo-labs/angular-kendo/issues/356
widget.input[0].classList.remove(cls);
}
}
});
prevClassList = currClassList;
break;
case "disabled":
if (typeof widget.enable == "function") {
widget.enable(!$(chg.target).attr("disabled"));
}
break;
case "readonly":
if (typeof widget.readonly == "function") {
widget.readonly(!!$(chg.target).attr("readonly"));
}
break;
}
});
resume();
});
function suspend() {
mo.disconnect();
}
function resume() {
mo.observe($(element)[0], { attributes: true });
}
resume();
widget.first("destroy", suspend);
})();
--KENDO_COUNT;
if (KENDO_COUNT === 0) {
if (!RENDERED) {
RENDERED = true;
scope.$emit("kendoRendered");
$("form").each(function(){
var form = $(this).controller("form");
if (form) {
form.$setPristine();
}
});
}
}
});
}
};
};
return {
create: create
};
}]);
var TAGNAMES = {
Editor : "textarea",
NumericTextBox : "input",
DatePicker : "input",
DateTimePicker : "input",
TimePicker : "input",
AutoComplete : "input",
ColorPicker : "input",
MaskedTextBox : "input",
MultiSelect : "input",
Upload : "input",
Validator : "form",
Button : "button",
ListView : "ul",
TreeView : "ul",
Menu : "ul",
ContextMenu : "ul"
};
function createDirectives(klass, isMobile) {
function make(directiveName, widgetName) {
module.directive(directiveName, [
"directiveFactory",
function(directiveFactory) {
return directiveFactory.create(widgetName, directiveName);
}
]);
}
var name = isMobile ? "Mobile" : "";
name += klass.fn.options.name;
var className = name;
var shortcut = "kendo" + name.charAt(0) + name.substr(1).toLowerCase();
name = "kendo" + name;
// here name should be like kendoMobileListView so kendo-mobile-list-view works,
// and shortcut like kendoMobilelistview, for kendo-mobilelistview
make(name, name);
if (shortcut != name) {
make(shortcut, name);
}
//
-type directives
var dashed = name.replace(/([A-Z])/g, "-$1");
module.directive(shortcut, function(){
return {
restrict : "E",
replace : true,
template : function(element, attributes) {
var tag = TAGNAMES[className] || "div";
return "<" + tag + " " + dashed + ">" + element.html() + "";
}
};
});
}
(function(){
function doAll(isMobile) {
return function(namespace) {
angular.forEach(namespace, function(value) {
if (value.fn && value.fn.options && value.fn.options.name && (/^[A-Z]/).test(value.fn.options.name)) {
createDirectives(value, isMobile);
}
});
};
}
angular.forEach([ kendo.ui, kendo.dataviz && kendo.dataviz.ui ], doAll(false));
angular.forEach([ kendo.mobile && kendo.mobile.ui ], doAll(true));
})();
/* -----[ utils ]----- */
function kendoWidgetInstance(el) {
el = $(el);
return kendo.widgetInstance(el, kendo.ui) ||
kendo.widgetInstance(el, kendo.mobile.ui) ||
kendo.widgetInstance(el, kendo.dataviz.ui);
}
function digest(scope, func) {
var root = scope.$root || scope;
var isDigesting = /^\$(digest|apply)$/.test(root.$$phase);
if (func) {
if (isDigesting) {
func();
} else {
scope.$apply(func);
}
} else if (!isDigesting) {
scope.$digest();
}
}
function destroyScope(scope, el) {
scope.$destroy();
if (el) {
// prevent leaks. https://github.com/kendo-labs/angular-kendo/issues/237
$(el)
.removeData("$scope")
.removeData("$isolateScope")
.removeData("$isolateScopeNoTemplate")
.removeClass("ng-scope");
}
}
var pendingPatches = [];
// defadvice will patch a class' method with another function. That
// function will be called in a context containing `next` (to call
// the next method) and `object` (a reference to the original
// object).
function defadvice(klass, methodName, func) {
if ($.isArray(klass)) {
return angular.forEach(klass, function(klass){
defadvice(klass, methodName, func);
});
}
if (typeof klass == "string") {
var a = klass.split(".");
var x = kendo;
while (x && a.length > 0) {
x = x[a.shift()];
}
if (!x) {
pendingPatches.push([ klass, methodName, func ]);
return false;
}
klass = x.prototype;
}
var origMethod = klass[methodName];
klass[methodName] = function() {
var self = this, args = arguments;
return func.apply({
self: self,
next: function() {
return origMethod.apply(self, arguments.length > 0 ? arguments : args);
}
}, args);
};
return true;
}
defadvice(kendo.ui, "plugin", function(klass, register, prefix){
this.next();
pendingPatches = $.grep(pendingPatches, function(args){
return !defadvice.apply(null, args);
});
createDirectives(klass, prefix == "Mobile");
});
/* -----[ Customize widgets for Angular ]----- */
defadvice([ "ui.Widget", "mobile.ui.Widget" ], "angular", function(cmd, arg){
var self = this.self;
if (cmd == "init") {
// `arg` here should be the widget options.
// the Chart doesn't send the options to Widget::init in constructor
// hence the OPTIONS_NOW hack (initialized in createWidget).
if (!arg && OPTIONS_NOW) {
arg = OPTIONS_NOW;
}
OPTIONS_NOW = null;
if (arg && arg.$angular) {
self.$angular_scope = arg.$angular[0];
self.$angular_init(self.element, arg);
}
return;
}
var scope = self.$angular_scope || angular.element(self.element).scope();
if (scope && $compile) {
withoutTimeout(function(){
var x = arg(), elements = x.elements, data = x.data;
if (elements.length > 0) {
switch (cmd) {
case "cleanup":
angular.forEach(elements, function(el){
var itemScope = angular.element(el).scope();
if (itemScope && itemScope !== scope) {
destroyScope(itemScope, el);
}
});
break;
case "compile":
angular.forEach(elements, function(el, i){
var itemScope;
if (x.scopeFrom) {
itemScope = angular.element(x.scopeFrom).scope();
} else {
var vars = data && data[i];
if (vars !== undefined) {
itemScope = $.extend(scope.$new(), vars);
}
}
$compile(el)(itemScope || scope);
});
digest(scope);
break;
}
}
});
}
});
// All event handlers that are strings are compiled the Angular way.
defadvice("ui.Widget", "$angular_init", function(element, options) {
var self = this.self;
if (options && !$.isArray(options)) {
var scope = self.$angular_scope;
for (var i = self.events.length; --i >= 0;) {
var event = self.events[i];
var handler = options[event];
if (handler && typeof handler == "string") {
options[event] = self.$angular_makeEventHandler(event, scope, handler);
}
}
}
});
// most handers will only contain a kendoEvent in the scope.
defadvice("ui.Widget", "$angular_makeEventHandler", function(event, scope, handler){
handler = $parse(handler);
return function(e) {
digest(scope, function() {
handler(scope, { kendoEvent: e });
});
};
});
// for the Grid and ListView we add `data` and `selected` too.
defadvice([ "ui.Grid", "ui.ListView", "ui.TreeView" ], "$angular_makeEventHandler", function(event, scope, handler){
if (event != "change") {
return this.next();
}
handler = $parse(handler);
return function(ev) {
var widget = ev.sender;
var options = widget.options;
var cell, multiple, locals = { kendoEvent: ev }, elems, items, columns, colIdx;
if (angular.isString(options.selectable)) {
cell = options.selectable.indexOf('cell') !== -1;
multiple = options.selectable.indexOf('multiple') !== -1;
}
elems = locals.selected = this.select();
items = locals.data = [];
columns = locals.columns = [];
for (var i = 0; i < elems.length; i++) {
var item = cell ? elems[i].parentNode : elems[i];
var dataItem = widget.dataItem(item);
if (cell) {
if (angular.element.inArray(dataItem, items) < 0) {
items.push(dataItem);
}
colIdx = angular.element(elems[i]).index();
if (angular.element.inArray(colIdx, columns) < 0 ) {
columns.push(colIdx);
}
} else {
items.push(dataItem);
}
}
if (!multiple) {
locals.dataItem = locals.data = items[0];
locals.selected = elems[0];
}
digest(scope, function() {
handler(scope, locals);
});
};
});
// If no `template` is supplied for Grid columns, provide an Angular
// template. The reason is that in this way AngularJS will take
// care to update the view as the data in scope changes.
defadvice("ui.Grid", "$angular_init", function(element, options){
this.next();
if (options.columns) {
var settings = $.extend({}, kendo.Template, options.templateSettings);
angular.forEach(options.columns, function(col){
if (col.field && !col.template && !col.format && !col.values && (col.encoded === undefined || col.encoded)) {
col.template = "#: " +
kendo.expr(col.field, settings.paramName) + "# ";
}
});
}
});
{
// mobile/ButtonGroup does not have a "value" method, but looks
// like it would be useful. We provide it here.
defadvice("mobile.ui.ButtonGroup", "value", function(mew){
var self = this.self;
if (mew != null) {
self.select(self.element.children("li.km-button").eq(mew));
self.trigger("change");
self.trigger("select", { index: self.selectedIndex });
}
return self.selectedIndex;
});
defadvice("mobile.ui.ButtonGroup", "_select", function(){
this.next();
this.self.trigger("change");
});
}
})(window.kendo.jQuery, window.angular);
(function ($, undefined) {
// Imports ================================================================
var doc = document,
kendo = window.kendo,
dataviz = kendo.dataviz = {},
Class = kendo.Class,
template = kendo.template,
map = $.map,
noop = $.noop,
indexOf = $.inArray,
trim = $.trim,
math = Math,
deepExtend = kendo.deepExtend;
var renderTemplate = function(definition) {
return template(definition, { useWithBlock: false, paramName: "d" });
};
var CSS_PREFIX = "k-";
// Constants ==============================================================
var ANIMATION_STEP = 10,
AXIS_LABEL_CLICK = "axisLabelClick",
BASELINE_MARKER_SIZE = 1,
BLACK = "#000",
BOTTOM = "bottom",
CENTER = "center",
COORD_PRECISION = 3,
CLIP = "clip",
CIRCLE = "circle",
CROSS = "cross",
DEFAULT_FONT = "12px sans-serif",
DEFAULT_HEIGHT = 400,
DEFAULT_PRECISION = 6,
DEFAULT_WIDTH = 600,
DEG_TO_RAD = math.PI / 180,
FADEIN = "fadeIn",
FORMAT_REGEX = /\{\d+:?/,
HEIGHT = "height",
ID_PREFIX = "k",
ID_POOL_SIZE = 1000,
ID_START = 10000,
COORDINATE_LIMIT = 100000,
INITIAL_ANIMATION_DURATION = 600,
INSIDE = "inside",
LEFT = "left",
LINEAR = "linear",
MAX_VALUE = Number.MAX_VALUE,
MIN_VALUE = -Number.MAX_VALUE,
NONE = "none",
NOTE_CLICK = "noteClick",
NOTE_HOVER = "noteHover",
OUTSIDE = "outside",
RADIAL = "radial",
RIGHT = "right",
SWING = "swing",
TOP = "top",
TRIANGLE = "triangle",
UNDEFINED = "undefined",
UPPERCASE_REGEX = /([A-Z])/g,
WIDTH = "width",
WHITE = "#fff",
X = "x",
Y = "y",
ZERO_THRESHOLD = 0.2;
function getSpacing(value, defaultSpacing) {
var spacing = { top: 0, right: 0, bottom: 0, left: 0 };
defaultSpacing = defaultSpacing || 0;
if (typeof(value) === "number") {
spacing[TOP] = spacing[RIGHT] = spacing[BOTTOM] = spacing[LEFT] = value;
} else {
spacing[TOP] = value[TOP] || defaultSpacing;
spacing[RIGHT] = value[RIGHT] || defaultSpacing;
spacing[BOTTOM] = value[BOTTOM] || defaultSpacing;
spacing[LEFT] = value[LEFT] || defaultSpacing;
}
return spacing;
}
// Geometric primitives ===================================================
// MERGE WITH DIAGRAM MATH
var Matrix = Class.extend({
init: function (a, b, c, d, e, f) {
this.a = a || 0;
this.b = b || 0;
this.c = c || 0;
this.d = d || 0;
this.e = e || 0;
this.f = f || 0;
},
times: function (m) {
return new Matrix(
this.a * m.a + this.c * m.b,
this.b * m.a + this.d * m.b,
this.a * m.c + this.c * m.d,
this.b * m.c + this.d * m.d,
this.a * m.e + this.c * m.f + this.e,
this.b * m.e + this.d * m.f + this.f
);
}
});
// TODO: Backport method names
deepExtend(Matrix, {
translate: function (x, y) {
var m = new Matrix();
m.a = 1;
m.b = 0;
m.c = 0;
m.d = 1;
m.e = x;
m.f = y;
return m;
},
unit: function () {
return new Matrix(1, 0, 0, 1, 0, 0);
},
rotate: function (angle, x, y) {
var m = new Matrix();
m.a = math.cos(angle * DEG_TO_RAD);
m.b = math.sin(angle * DEG_TO_RAD);
m.c = -m.b;
m.d = m.a;
m.e = (x - x * m.a + y * m.b) || 0;
m.f = (y - y * m.a - x * m.b) || 0;
return m;
},
scale: function (scaleX, scaleY) {
var m = new Matrix();
m.a = scaleX;
m.b = 0;
m.c = 0;
m.d = scaleY;
m.e = 0;
m.f = 0;
return m;
}
});
kendo.dataviz.Matrix = Matrix;
// TODO: Rename to Point?
var Point2D = function(x, y) {
var point = this;
if (!(point instanceof Point2D)) {
return new Point2D(x, y);
}
point.x = x || 0;
point.y = y || 0;
};
Point2D.fn = Point2D.prototype = {
clone: function() {
var point = this;
return new Point2D(point.x, point.y);
},
equals: function(point) {
return point && point.x === this.x && point.y === this.y;
},
rotate: function(center, degrees) {
var point = this,
theta = degrees * DEG_TO_RAD,
cosT = math.cos(theta),
sinT = math.sin(theta),
cx = center.x,
cy = center.y,
x = point.x,
y = point.y;
point.x = round(
cx + (x - cx) * cosT + (y - cy) * sinT,
COORD_PRECISION
);
point.y = round(
cy + (y - cy) * cosT - (x - cx) * sinT,
COORD_PRECISION
);
return point;
},
multiply: function(a) {
var point = this;
point.x *= a;
point.y *= a;
return point;
},
distanceTo: function(point) {
var dx = this.x - point.x,
dy = this.y - point.y;
return math.sqrt(dx * dx + dy * dy);
},
transform: function(mx) {
var x = this.x,
y = this.y;
this.x = mx.a * x + mx.c * y + mx.e;
this.y = mx.b * x + mx.d * y + mx.f;
return this;
}
};
// Clock-wise, 0 points left
Point2D.onCircle = function(c, a, r) {
a *= DEG_TO_RAD;
return new Point2D(
c.x - r * math.cos(a),
c.y - r * math.sin(a)
);
};
var Box2D = function(x1, y1, x2, y2) {
var box = this;
if (!(box instanceof Box2D)) {
return new Box2D(x1, y1, x2, y2);
}
box.x1 = x1 || 0;
box.x2 = x2 || 0;
box.y1 = y1 || 0;
box.y2 = y2 || 0;
};
Box2D.fn = Box2D.prototype = {
width: function() {
return this.x2 - this.x1;
},
height: function() {
return this.y2 - this.y1;
},
translate: function(dx, dy) {
var box = this;
box.x1 += dx;
box.x2 += dx;
box.y1 += dy;
box.y2 += dy;
return box;
},
// TODO: Accept point!
move: function(x, y) {
var box = this,
height = box.height(),
width = box.width();
if (defined(x)) {
box.x1 = x;
box.x2 = box.x1 + width;
}
if (defined(y)) {
box.y1 = y;
box.y2 = box.y1 + height;
}
return box;
},
wrap: function(targetBox) {
var box = this;
box.x1 = math.min(box.x1, targetBox.x1);
box.y1 = math.min(box.y1, targetBox.y1);
box.x2 = math.max(box.x2, targetBox.x2);
box.y2 = math.max(box.y2, targetBox.y2);
return box;
},
wrapPoint: function(point) {
this.wrap(new Box2D(point.x, point.y, point.x, point.y));
return this;
},
snapTo: function(targetBox, axis) {
var box = this;
if (axis == X || !axis) {
box.x1 = targetBox.x1;
box.x2 = targetBox.x2;
}
if (axis == Y || !axis) {
box.y1 = targetBox.y1;
box.y2 = targetBox.y2;
}
return box;
},
alignTo: function(targetBox, anchor) {
var box = this,
height = box.height(),
width = box.width(),
axis = anchor == TOP || anchor == BOTTOM ? Y : X,
offset = axis == Y ? height : width;
if (anchor === CENTER) {
var targetCenter = targetBox.center();
var center = box.center();
box.x1 += targetCenter.x - center.x;
box.y1 += targetCenter.y - center.y;
} else if (anchor === TOP || anchor === LEFT) {
box[axis + 1] = targetBox[axis + 1] - offset;
} else {
box[axis + 1] = targetBox[axis + 2];
}
box.x2 = box.x1 + width;
box.y2 = box.y1 + height;
return box;
},
shrink: function(dw, dh) {
var box = this;
box.x2 -= dw;
box.y2 -= dh;
return box;
},
expand: function(dw, dh) {
this.shrink(-dw, -dh);
return this;
},
pad: function(padding) {
var box = this,
spacing = getSpacing(padding);
box.x1 -= spacing.left;
box.x2 += spacing.right;
box.y1 -= spacing.top;
box.y2 += spacing.bottom;
return box;
},
unpad: function(padding) {
var box = this,
spacing = getSpacing(padding);
spacing.left = -spacing.left;
spacing.top = -spacing.top;
spacing.right = -spacing.right;
spacing.bottom = -spacing.bottom;
return box.pad(spacing);
},
clone: function() {
var box = this;
return new Box2D(box.x1, box.y1, box.x2, box.y2);
},
center: function() {
var box = this;
return new Point2D(
box.x1 + box.width() / 2,
box.y1 + box.height() / 2
);
},
containsPoint: function(point) {
var box = this;
return point.x >= box.x1 && point.x <= box.x2 &&
point.y >= box.y1 && point.y <= box.y2;
},
points: function() {
var box = this;
return [
new Point2D(box.x1, box.y1),
new Point2D(box.x2, box.y1),
new Point2D(box.x2, box.y2),
new Point2D(box.x1, box.y2)
];
},
getHash: function() {
var box = this;
return [box.x1, box.y1, box.x2, box.y2].join(",");
},
overlaps: function(box) {
return !(box.y2 < this.y1 || this.y2 < box.y1 || box.x2 < this.x1 || this.x2 < box.x1);
},
rotate: function(rotation) {
var box = this;
var width = box.width();
var height = box.height();
var center = box.center();
var cx = center.x;
var cy = center.y;
var r1 = rotatePoint(0, 0, cx, cy, rotation);
var r2 = rotatePoint(width, 0, cx, cy, rotation);
var r3 = rotatePoint(width, height, cx, cy, rotation);
var r4 = rotatePoint(0, height, cx, cy, rotation);
width = math.max(r1.x, r2.x, r3.x, r4.x) - math.min(r1.x, r2.x, r3.x, r4.x);
height = math.max(r1.y, r2.y, r3.y, r4.y) - math.min(r1.y, r2.y, r3.y, r4.y);
box.x2 = box.x1 + width;
box.y2 = box.y1 + height;
return box;
}
};
var Ring = Class.extend({
init: function(center, innerRadius, radius, startAngle, angle) {
var ring = this;
ring.c = center;
ring.ir = innerRadius;
ring.r = radius;
ring.startAngle = startAngle;
ring.angle = angle;
},
clone: function() {
var r = this;
return new Ring(r.c, r.ir, r.r, r.startAngle, r.angle);
},
// TODO: Rename to midAngle
middle: function() {
return this.startAngle + this.angle / 2;
},
// TODO: Sounds like a getter
radius: function(newRadius, innerRadius) {
var that = this;
if (innerRadius) {
that.ir = newRadius;
} else {
that.r = newRadius;
}
return that;
},
// TODO: Remove and replace with Point2D.onCircle
point: function(angle, innerRadius) {
var ring = this,
radianAngle = angle * DEG_TO_RAD,
ax = math.cos(radianAngle),
ay = math.sin(radianAngle),
radius = innerRadius ? ring.ir : ring.r,
x = round(ring.c.x - (ax * radius), COORD_PRECISION),
y = round(ring.c.y - (ay * radius), COORD_PRECISION);
return new Point2D(x, y);
},
adjacentBox: function(distance, width, height) {
var sector = this.clone().expand(distance),
midAndle = sector.middle(),
midPoint = sector.point(midAndle),
hw = width / 2,
hh = height / 2,
x = midPoint.x - hw,
y = midPoint.y - hh,
sa = math.sin(midAndle * DEG_TO_RAD),
ca = math.cos(midAndle * DEG_TO_RAD);
if (math.abs(sa) < 0.9) {
x += hw * -ca / math.abs(ca);
}
if (math.abs(ca) < 0.9) {
y += hh * -sa / math.abs(sa);
}
return new Box2D(x, y, x + width, y + height);
},
containsPoint: function(p) {
var ring = this,
c = ring.c,
ir = ring.ir,
r = ring.r,
startAngle = ring.startAngle,
endAngle = ring.startAngle + ring.angle,
dx = p.x - c.x,
dy = p.y - c.y,
vector = new Point2D(dx, dy),
startPoint = ring.point(startAngle),
startVector = new Point2D(startPoint.x - c.x, startPoint.y - c.y),
endPoint = ring.point(endAngle),
endVector = new Point2D(endPoint.x - c.x, endPoint.y - c.y),
dist = round(dx * dx + dy *dy, COORD_PRECISION);
return (startVector.equals(vector) || clockwise(startVector, vector)) &&
!clockwise(endVector, vector) &&
dist >= ir * ir && dist <= r * r;
},
getBBox: function() {
var ring = this,
box = new Box2D(MAX_VALUE, MAX_VALUE, MIN_VALUE, MIN_VALUE),
sa = round(ring.startAngle % 360),
ea = round((sa + ring.angle) % 360),
innerRadius = ring.ir,
allAngles = [0, 90, 180, 270, sa, ea].sort(numericComparer),
saIndex = indexOf(sa, allAngles),
eaIndex = indexOf(ea, allAngles),
angles,
i,
point;
if (sa == ea) {
angles = allAngles;
} else {
if (saIndex < eaIndex) {
angles = allAngles.slice(saIndex, eaIndex + 1);
} else {
angles = [].concat(
allAngles.slice(0, eaIndex + 1),
allAngles.slice(saIndex, allAngles.length)
);
}
}
for (i = 0; i < angles.length; i++) {
point = ring.point(angles[i]);
box.wrapPoint(point);
box.wrapPoint(point, innerRadius);
}
if (!innerRadius) {
box.wrapPoint(ring.c);
}
return box;
},
expand: function(value) {
this.r += value;
return this;
}
});
// TODO: Remove, looks like an alias
var Sector = Ring.extend({
init: function(center, radius, startAngle, angle) {
Ring.fn.init.call(this, center, 0, radius, startAngle, angle);
},
expand: function(value) {
return Ring.fn.expand.call(this, value);
},
clone: function() {
var sector = this;
return new Sector(sector.c, sector.r, sector.startAngle, sector.angle);
},
radius: function(newRadius) {
return Ring.fn.radius.call(this, newRadius);
},
point: function(angle) {
return Ring.fn.point.call(this, angle);
}
});
var Pin = Class.extend({
init: function(options) {
deepExtend(this, {
height: 40,
rotation: 90,
radius: 10,
arcAngle: 10
}, options);
}
});
// View-Model primitives ==================================================
var ChartElement = Class.extend({
init: function(options) {
var element = this;
element.children = [];
element.options = deepExtend({}, element.options, options);
element.id = element.options.id;
},
reflow: function(targetBox) {
var element = this,
children = element.children,
box,
i,
currentChild;
for (i = 0; i < children.length; i++) {
currentChild = children[i];
currentChild.reflow(targetBox);
box = box ? box.wrap(currentChild.box) : currentChild.box.clone();
}
element.box = box || targetBox;
},
getViewElements: function(view) {
var element = this,
modelId = element.modelId,
viewElements = [],
root,
children = element.children,
i,
child,
childrenCount = children.length;
for (i = 0; i < childrenCount; i++) {
child = children[i];
if (!child.discoverable) {
child.options = child.options || {};
child.modelId = modelId;
}
viewElements.push.apply(
viewElements, child.getViewElements(view));
}
if (element.discoverable) {
root = element.getRoot();
if (root) {
root.modelMap[modelId] = element;
}
}
return viewElements;
},
enableDiscovery: function() {
var element = this;
element.modelId = uniqueId();
element.discoverable = true;
},
destroy: function() {
var element = this,
children = element.children,
root = element.getRoot(),
modelId = element.modelId,
id = element.id,
pool = IDPool.current,
i;
if (id) {
pool.free(id);
}
if (modelId) {
pool.free(modelId);
if (root && root.modelMap[modelId]) {
root.modelMap[modelId] = undefined;
}
}
for (i = 0; i < children.length; i++) {
children[i].destroy();
}
},
getRoot: function() {
var parent = this.parent;
return parent ? parent.getRoot() : null;
},
translateChildren: function(dx, dy) {
var element = this,
children = element.children,
childrenCount = children.length,
i;
for (i = 0; i < childrenCount; i++) {
children[i].box.translate(dx, dy);
}
},
append: function() {
var element = this,
i,
length = arguments.length;
append(element.children, arguments);
for (i = 0; i < length; i++) {
arguments[i].parent = element;
}
}
});
var RootElement = ChartElement.extend({
init: function(options) {
var root = this;
// Logical tree ID to element map
root.modelMap = {};
ChartElement.fn.init.call(root, options);
},
options: {
width: DEFAULT_WIDTH,
height: DEFAULT_HEIGHT,
background: WHITE,
border: {
color: BLACK,
width: 0
},
margin: getSpacing(5),
zIndex: -2
},
reflow: function() {
var root = this,
options = root.options,
children = root.children,
currentBox = new Box2D(0, 0, options.width, options.height);
root.box = currentBox.unpad(options.margin);
for (var i = 0; i < children.length; i++) {
children[i].reflow(currentBox);
currentBox = boxDiff(currentBox, children[i].box);
}
},
getViewElements: function(view) {
var root = this,
options = root.options,
border = options.border || {},
box = root.box.clone().pad(options.margin).unpad(border.width),
elements = [
view.createRect(box, {
stroke: border.width ? border.color : "",
strokeWidth: border.width,
dashType: border.dashType,
fill: options.background,
fillOpacity: options.opacity,
zIndex: options.zIndex })
];
return elements.concat(
ChartElement.fn.getViewElements.call(root, view)
);
},
getRoot: function() {
return this;
}
});
var BoxElement = ChartElement.extend({
options: {
align: LEFT,
vAlign: TOP,
margin: {},
padding: {},
border: {
color: BLACK,
width: 0
},
background: "",
shrinkToFit: false,
width: 0,
height: 0,
visible: true
},
reflow: function(targetBox) {
var element = this,
box,
contentBox,
options = element.options,
width = options.width,
height = options.height,
hasSetSize = width && height,
shrinkToFit = options.shrinkToFit,
margin = getSpacing(options.margin),
padding = getSpacing(options.padding),
borderWidth = options.border.width,
children = element.children,
i, item;
function reflowPaddingBox() {
element.align(targetBox, X, options.align);
element.align(targetBox, Y, options.vAlign);
element.paddingBox = box.clone().unpad(margin).unpad(borderWidth);
}
contentBox = targetBox.clone();
if (hasSetSize) {
contentBox.x2 = contentBox.x1 + width;
contentBox.y2 = contentBox.y1 + height;
}
if (shrinkToFit) {
contentBox.unpad(margin).unpad(borderWidth).unpad(padding);
}
ChartElement.fn.reflow.call(element, contentBox);
if (hasSetSize) {
box = element.box = Box2D(0, 0, width, height);
} else {
box = element.box;
}
if (shrinkToFit && hasSetSize) {
reflowPaddingBox();
contentBox = element.contentBox = element.paddingBox.clone().unpad(padding);
} else {
contentBox = element.contentBox = box.clone();
box.pad(padding).pad(borderWidth).pad(margin);
reflowPaddingBox();
}
element.translateChildren(
box.x1 - contentBox.x1 + margin.left + borderWidth + padding.left,
box.y1 - contentBox.y1 + margin.top + borderWidth + padding.top);
for (i = 0; i < children.length; i++) {
item = children[i];
item.reflow(item.box);
}
},
align: function(targetBox, axis, alignment) {
var element = this,
box = element.box,
c1 = axis + 1,
c2 = axis + 2,
sizeFunc = axis === X ? WIDTH : HEIGHT,
size = box[sizeFunc]();
if (inArray(alignment, [LEFT, TOP])) {
box[c1] = targetBox[c1];
box[c2] = box[c1] + size;
} else if (inArray(alignment, [RIGHT, BOTTOM])) {
box[c2] = targetBox[c2];
box[c1] = box[c2] - size;
} else if (alignment == CENTER) {
box[c1] = targetBox[c1] + (targetBox[sizeFunc]() - size) / 2;
box[c2] = box[c1] + size;
}
},
hasBox: function() {
var options = this.options;
return options.border.width || options.background;
},
getViewElements: function(view, renderOptions) {
var boxElement = this,
options = boxElement.options,
elements = [];
if (!options.visible) {
return [];
}
if (boxElement.hasBox()) {
elements.push(
view.createRect(
boxElement.paddingBox,
deepExtend(boxElement.elementStyle(), renderOptions)
)
);
}
return elements.concat(
ChartElement.fn.getViewElements.call(boxElement, view)
);
},
elementStyle: function() {
var boxElement = this,
options = boxElement.options,
border = options.border || {};
return {
id: this.id,
stroke: border.width ? border.color : "",
strokeWidth: border.width,
dashType: border.dashType,
strokeOpacity: valueOrDefault(border.opacity, options.opacity),
fill: options.background,
fillOpacity: options.opacity,
animation: options.animation,
zIndex: options.zIndex,
cursor: options.cursor,
data: { modelId: boxElement.modelId }
};
}
});
var Text = ChartElement.extend({
init: function(content, options) {
var text = this;
ChartElement.fn.init.call(text, options);
text.content = content;
// Calculate size
text.reflow(Box2D());
},
options: {
font: DEFAULT_FONT,
color: BLACK,
align: LEFT,
vAlign: ""
},
reflow: function(targetBox) {
var text = this,
options = text.options,
size,
margin;
size = options.size =
measureText(text.content, { font: options.font });
text.baseline = size.baseline;
text.box = Box2D(targetBox.x1, targetBox.y1,
targetBox.x1 + size.width, targetBox.y1 + size.height);
},
getViewElements: function(view) {
var text = this,
options = text.options;
ChartElement.fn.getViewElements.call(this, view);
return [
view.createText(text.content,
deepExtend({}, options, {
id: text.id,
x: text.box.x1, y: text.box.y1,
baseline: text.baseline,
data: { modelId: text.modelId }
})
)
];
}
});
var FloatElement = ChartElement.extend({
init: function(options) {
ChartElement.fn.init.call(this, options);
this._initDirection();
},
_initDirection: function() {
var options = this.options;
if (options.vertical) {
this.groupAxis = X;
this.elementAxis = Y;
this.groupSizeField = WIDTH;
this.elementSizeField = HEIGHT;
this.groupSpacing = options.spacing;
this.elementSpacing = options.vSpacing;
} else {
this.groupAxis = Y;
this.elementAxis = X;
this.groupSizeField = HEIGHT;
this.elementSizeField = WIDTH;
this.groupSpacing = options.vSpacing;
this.elementSpacing = options.spacing;
}
},
options: {
vertical: true,
wrap: true,
vSpacing: 0,
spacing: 0
},
reflow: function(targetBox) {
this.box = targetBox.clone();
this.reflowChildren();
},
reflowChildren: function() {
var floatElement = this;
var box = floatElement.box;
var options = floatElement.options;
var elementSpacing = floatElement.elementSpacing;
var groupSpacing = floatElement.groupSpacing;
var elementAxis = floatElement.elementAxis;
var groupAxis = floatElement.groupAxis;
var elementSizeField = floatElement.elementSizeField;
var groupSizeField = floatElement.groupSizeField;
var groupOptions = floatElement.groupOptions();
var groups = groupOptions.groups;
var groupsCount = groups.length;
var groupsStart = box[groupAxis + 1] +
floatElement.alignStart(groupOptions.groupsSize, box[groupSizeField]());
var groupStart = groupsStart;
var elementStart;
var groupElementStart;
var group;
var groupElements;
var groupElementsCount;
var idx;
var groupIdx;
var element;
var elementBox;
var elementSize;
if (groupsCount) {
for (groupIdx = 0; groupIdx < groupsCount; groupIdx++) {
group = groups[groupIdx];
groupElements = group.groupElements;
groupElementsCount = groupElements.length;
elementStart = box[elementAxis + 1];
for (idx = 0; idx < groupElementsCount; idx++) {
element = groupElements[idx];
elementSize = floatElement.elementSize(element);
groupElementStart = groupStart +
floatElement.alignStart(elementSize[groupSizeField], group.groupSize);
elementBox = Box2D();
elementBox[groupAxis + 1] = groupElementStart;
elementBox[groupAxis + 2] = groupElementStart + elementSize[groupSizeField];
elementBox[elementAxis + 1] = elementStart;
elementBox[elementAxis + 2] = elementStart + elementSize[elementSizeField];
element.reflow(elementBox);
elementStart += elementSize[elementSizeField] + floatElement.elementSpacing;
}
groupStart += group.groupSize + floatElement.groupSpacing;
}
box[groupAxis + 1] = groupsStart;
box[groupAxis + 2] = groupsStart + groupOptions.groupsSize;
box[elementAxis + 2] = box[elementAxis + 1] + groupOptions.maxGroupElementsSize;
}
},
alignStart: function(size, maxSize) {
var start = 0;
var align = this.options.align;
if (align == RIGHT || align == BOTTOM) {
start = maxSize - size;
} else if (align == CENTER){
start = (maxSize - size) / 2;
}
return start;
},
groupOptions: function() {
var floatElement = this;
var box = floatElement.box;
var children = floatElement.children;
var childrenCount = children.length;
var elementSizeField = this.elementSizeField;
var groupSizeField = this.groupSizeField;
var elementSpacing = this.elementSpacing;
var groupSpacing = this.groupSpacing;
var maxSize = round(box[elementSizeField]());
var idx = 0;
var groupSize = 0;
var elementSize;
var element;
var groupElementsSize = 0;
var groupsSize = 0;
var groups = [];
var groupElements = [];
var maxGroupElementsSize = 0;
for (idx = 0; idx < childrenCount; idx++) {
element = children[idx];
if (!element.box) {
element.reflow(box);
}
elementSize = this.elementSize(element);
if (floatElement.options.wrap && round(groupElementsSize + elementSpacing + elementSize[elementSizeField]) > maxSize) {
groups.push({
groupElements: groupElements,
groupSize: groupSize,
groupElementsSize: groupElementsSize
});
maxGroupElementsSize = math.max(maxGroupElementsSize, groupElementsSize);
groupsSize += groupSpacing + groupSize;
groupSize = 0;
groupElementsSize = 0;
groupElements = [];
}
groupSize = math.max(groupSize, elementSize[groupSizeField]);
if (groupElementsSize > 0) {
groupElementsSize += elementSpacing;
}
groupElementsSize += elementSize[elementSizeField];
groupElements.push(element);
}
groups.push({
groupElements: groupElements,
groupSize: groupSize,
groupElementsSize: groupElementsSize
});
maxGroupElementsSize = math.max(maxGroupElementsSize, groupElementsSize);
groupsSize += groupSize;
return {
groups: groups,
groupsSize: groupsSize,
maxGroupElementsSize: maxGroupElementsSize
};
},
elementSize: function(element) {
return {
width: element.box.width(),
height: element.box.height()
};
}
});
var TextBox = BoxElement.extend({
ROWS_SPLIT_REGEX: /\n|\\n/m,
init: function(content, options) {
var textbox = this;
textbox.content = content;
BoxElement.fn.init.call(textbox, options);
textbox._initContainer();
textbox.reflow(Box2D());
},
_initContainer: function() {
var textbox = this;
var options = textbox.options;
var id = options.id;
var rows = (textbox.content + "").split(textbox.ROWS_SPLIT_REGEX);
var floatElement = new FloatElement({vertical: true, align: options.align, wrap: false});
var textOptions = deepExtend({ }, options);
var hasBox = textbox.hasBox();
var text;
var rowIdx;
textbox.container = floatElement;
textbox.append(floatElement);
for (rowIdx = 0; rowIdx < rows.length; rowIdx++) {
text = new Text(trim(rows[rowIdx]), textOptions);
if (hasBox || (id && rowIdx > 0)) {
text.id = uniqueId();
}
floatElement.append(text);
}
},
reflow: function(targetBox) {
var textbox = this;
var options = textbox.options;
var align = options.align;
var rotation = options.rotation;
textbox.container.options.align = align;
BoxElement.fn.reflow.call(textbox, targetBox);
if (rotation) {
var margin = options.margin;
var box = textbox.box.unpad(margin);
textbox.normalBox = box.clone();
box.rotate(rotation);
box.pad(margin);
textbox.align(targetBox, X, align);
textbox.align(targetBox, Y, options.vAlign);
}
},
getViewElements: function(view, renderOptions) {
var textbox = this;
var options = textbox.options;
var boxOptions = deepExtend(textbox.elementStyle(), renderOptions);
var elements = [];
var zIndex = boxOptions.zIndex;
var matrix;
var element;
if (!options.visible) {
return [];
}
if (textbox.hasBox()) {
elements.push(
view.createRect(textbox.paddingBox, boxOptions)
);
}
if (options.rotation) {
matrix = textbox.rotationMatrix();
}
element = view.createTextBox({
matrix: matrix,
zIndex: zIndex
});
element.children = elements.concat(ChartElement.fn.getViewElements.call(textbox, view));
return [element];
},
rotationMatrix: function() {
var textbox = this;
var options = textbox.options;
var normalBox = textbox.normalBox;
var center = normalBox.center();
var cx = center.x;
var cy = center.y;
var boxCenter = textbox.box.center();
var offsetX = boxCenter.x - cx;
var offsetY = boxCenter.y - cy;
var matrix = Matrix.translate(offsetX, offsetY)
.times(Matrix.rotate(options.rotation, cx, cy));
return matrix;
}
});
var Title = ChartElement.extend({
init: function(options) {
var title = this;
ChartElement.fn.init.call(title, options);
options = title.options;
title.append(
new TextBox(options.text, deepExtend({}, options, {
vAlign: options.position
}))
);
},
options: {
color: BLACK,
position: TOP,
align: CENTER,
margin: getSpacing(5),
padding: getSpacing(5)
},
reflow: function(targetBox) {
var title = this;
ChartElement.fn.reflow.call(title, targetBox);
title.box.snapTo(targetBox, X);
}
});
Title.buildTitle = function(options, parent, defaultOptions) {
var title;
if (typeof options === "string") {
options = { text: options };
}
options = deepExtend({ visible: true }, defaultOptions, options);
if (options && options.visible && options.text) {
title = new Title(options);
parent.append(title);
}
return title;
};
var AxisLabel = TextBox.extend({
init: function(value, text, index, dataItem, options) {
var label = this;
label.text = text;
label.value = value;
label.index = index;
label.dataItem = dataItem;
TextBox.fn.init.call(label, text,
deepExtend({ id: uniqueId() }, options)
);
label.enableDiscovery();
},
click: function(widget, e) {
var label = this;
widget.trigger(AXIS_LABEL_CLICK, {
element: $(e.target),
value: label.value,
text: label.text,
index: label.index,
dataItem: label.dataItem,
axis: label.parent.options
});
}
});
function createAxisTick(view, options, tickOptions) {
var tickX = options.tickX,
tickY = options.tickY,
position = options.position,
start, end;
if (options.vertical) {
start = Point2D(tickX, position);
end = Point2D(tickX + tickOptions.size, position);
} else {
start = Point2D(position, tickY);
end = Point2D(position, tickY + tickOptions.size);
}
return view.createLine(
start.x, start.y,
end.x, end.y, {
strokeWidth: tickOptions.width,
stroke: tickOptions.color,
align: options._alignLines
});
}
function createAxisGridLine(view, options, gridLine) {
var lineStart = options.lineStart,
lineEnd = options.lineEnd,
position = options.position,
start, end;
if (options.vertical) {
start = Point2D(lineStart, position);
end = Point2D(lineEnd, position);
} else {
start = Point2D(position, lineStart);
end = Point2D(position, lineEnd);
}
return view.createLine(
start.x, start.y,
end.x, end.y, {
data: { modelId: options.modelId },
strokeWidth: gridLine.width,
stroke: gridLine.color,
dashType: gridLine.dashType,
zIndex: -1
});
}
var Axis = ChartElement.extend({
init: function(options) {
var axis = this;
ChartElement.fn.init.call(axis, options);
if (!axis.options.visible) {
axis.options = deepExtend({}, axis.options, {
labels: {
visible: false
},
line: {
visible: false
},
margin: 0,
majorTickSize: 0,
minorTickSize: 0
});
}
axis.options.minorTicks = deepExtend({}, {
color: axis.options.line.color,
width: axis.options.line.width,
visible: axis.options.minorTickType != NONE
}, axis.options.minorTicks, {
size: axis.options.minorTickSize,
align: axis.options.minorTickType
});
axis.options.majorTicks = deepExtend({}, {
color: axis.options.line.color,
width: axis.options.line.width,
visible: axis.options.majorTickType != NONE
}, axis.options.majorTicks, {
size: axis.options.majorTickSize,
align: axis.options.majorTickType
});
axis.createLabels();
axis.createTitle();
axis.createNotes();
},
options: {
labels: {
visible: true,
rotation: 0,
mirror: false,
step: 1,
skip: 0
},
line: {
width: 1,
color: BLACK,
visible: true
},
title: {
visible: true,
position: CENTER
},
majorTicks: {
align: OUTSIDE,
size: 4,
skip: 0,
step: 1
},
minorTicks: {
align: OUTSIDE,
size: 3,
skip: 0,
step: 1
},
axisCrossingValue: 0,
majorTickType: OUTSIDE,
minorTickType: NONE,
majorGridLines: {
skip: 0,
step: 1
},
minorGridLines: {
visible: false,
width: 1,
color: BLACK,
skip: 0,
step: 1
},
// TODO: Move to line or labels options
margin: 5,
visible: true,
reverse: false,
justified: true,
notes: {
label: {
text: ""
}
},
_alignLines: true
},
// abstract labelsCount(): Number
// abstract createAxisLabel(index, options): AxisLabel
createLabels: function() {
var axis = this,
options = axis.options,
align = options.vertical ? RIGHT : CENTER,
labelOptions = deepExtend({ }, options.labels, {
align: align, zIndex: options.zIndex,
modelId: axis.modelId
}),
step = labelOptions.step;
axis.labels = [];
if (labelOptions.visible) {
var labelsCount = axis.labelsCount(),
label,
i;
for (i = labelOptions.skip; i < labelsCount; i += step) {
label = axis.createAxisLabel(i, labelOptions);
if (label) {
axis.append(label);
axis.labels.push(label);
}
}
}
},
// TODO: Redundant - labels are child elements
destroy: function() {
var axis = this,
labels = axis.labels,
i;
for (i = 0; i < labels.length; i++) {
labels[i].destroy();
}
ChartElement.fn.destroy.call(axis);
},
lineBox: function() {
var axis = this,
options = axis.options,
box = axis.box,
vertical = options.vertical,
labels = axis.labels,
labelSize = vertical ? HEIGHT : WIDTH,
justified = options.justified,
mirror = options.labels.mirror,
axisX = mirror ? box.x1 : box.x2,
axisY = mirror ? box.y2 : box.y1,
startMargin = 0,
endMargin = options.line.width;
if (justified && labels.length > 1) {
startMargin = labels[0].box[labelSize]() / 2;
endMargin = last(labels).box[labelSize]() / 2;
}
return vertical ?
Box2D(axisX, box.y1 + startMargin, axisX, box.y2 - endMargin) :
Box2D(box.x1 + startMargin, axisY, box.x2 - endMargin, axisY);
},
createTitle: function() {
var axis = this,
options = axis.options,
titleOptions = deepExtend({
rotation: options.vertical ? -90 : 0,
text: "",
zIndex: 1
}, options.title),
title;
if (titleOptions.visible && titleOptions.text) {
title = new TextBox(titleOptions.text, titleOptions);
axis.append(title);
axis.title = title;
}
},
createNotes: function() {
var axis = this,
options = axis.options,
notes = options.notes,
items = notes.data || [],
noteTemplate, i, text, item, note;
axis.notes = [];
for (i = 0; i < items.length; i++) {
item = deepExtend({}, notes, items[i]);
item.value = axis.parseNoteValue(item.value);
note = new Note(item.value, item.label.text, null, null, null, item);
if (note.options.visible) {
if (defined(note.options.position)) {
if (options.vertical && !inArray(note.options.position, [LEFT, RIGHT])) {
note.options.position = options.reverse ? LEFT : RIGHT;
} else if (!options.vertical && !inArray(note.options.position, [TOP, BOTTOM])) {
note.options.position = options.reverse ? BOTTOM : TOP;
}
} else {
if (options.vertical) {
note.options.position = options.reverse ? LEFT : RIGHT;
} else {
note.options.position = options.reverse ? BOTTOM : TOP;
}
}
axis.append(note);
axis.notes.push(note);
}
}
},
parseNoteValue: function(value) {
return value;
},
renderTicks: function(view) {
var axis = this,
ticks = [],
options = axis.options,
lineBox = axis.lineBox(),
mirror = options.labels.mirror,
majorUnit = options.majorTicks.visible ? options.majorUnit : 0,
tickLineOptions= {
_alignLines: options._alignLines,
vertical: options.vertical
},
start, end;
function render(tickPositions, tickOptions) {
var i, count = tickPositions.length;
if (tickOptions.visible) {
for (i = tickOptions.skip; i < count; i += tickOptions.step) {
if (i % tickOptions.skipUnit === 0) {
continue;
}
tickLineOptions.tickX = mirror ? lineBox.x2 : lineBox.x2 - tickOptions.size;
tickLineOptions.tickY = mirror ? lineBox.y1 - tickOptions.size : lineBox.y1;
tickLineOptions.position = tickPositions[i];
ticks.push(createAxisTick(view, tickLineOptions, tickOptions));
}
}
}
render(axis.getMajorTickPositions(), options.majorTicks);
render(axis.getMinorTickPositions(), deepExtend({}, {
skipUnit: majorUnit / options.minorUnit
}, options.minorTicks));
return ticks;
},
renderLine: function(view) {
var axis = this,
options = axis.options,
line = options.line,
lineBox = axis.lineBox(),
lineOptions,
elements = [];
if (line.width > 0 && line.visible) {
lineOptions = {
strokeWidth: line.width,
stroke: line.color,
dashType: line.dashType,
zIndex: line.zIndex,
align: options._alignLines
};
elements.push(view.createLine(
lineBox.x1, lineBox.y1, lineBox.x2, lineBox.y2,
lineOptions));
append(elements, axis.renderTicks(view));
}
return elements;
},
getViewElements: function(view) {
var axis = this,
elements = ChartElement.fn.getViewElements.call(axis, view);
append(elements, axis.renderLine(view));
append(elements, axis.renderPlotBands(view));
append(elements, axis.renderBackground(view));
return elements;
},
getActualTickSize: function () {
var axis = this,
options = axis.options,
tickSize = 0;
if (options.majorTicks.visible && options.minorTicks.visible) {
tickSize = math.max(options.majorTicks.size, options.minorTicks.size);
} else if (options.majorTicks.visible) {
tickSize = options.majorTicks.size;
} else if (options.minorTicks.visible) {
tickSize = options.minorTicks.size;
}
return tickSize;
},
renderBackground: function(view) {
var axis = this,
options = axis.options,
background = options.background,
box = axis.box,
elements = [];
if (background) {
elements.push(
view.createRect(box, {
fill: background, zIndex: -1
})
);
}
return elements;
},
renderPlotBands: function(view) {
var axis = this,
options = axis.options,
plotBands = options.plotBands || [],
vertical = options.vertical,
result = [],
plotArea = axis.plotArea,
slotX, slotY, from, to;
if (plotBands.length) {
result = map(plotBands, function(item) {
from = valueOrDefault(item.from, MIN_VALUE);
to = valueOrDefault(item.to, MAX_VALUE);
if (vertical) {
slotX = plotArea.axisX.lineBox();
slotY = axis.getSlot(item.from, item.to, true);
} else {
slotX = axis.getSlot(item.from, item.to, true);
slotY = plotArea.axisY.lineBox();
}
return view.createRect(
Box2D(slotX.x1, slotY.y1, slotX.x2, slotY.y2),
{ fill: item.color, fillOpacity: item.opacity, zIndex: -1 });
});
}
return result;
},
renderGridLines: function(view, altAxis) {
var axis = this,
items = [],
options = axis.options,
axisLineVisible = altAxis.options.line.visible,
majorGridLines = options.majorGridLines,
majorUnit = majorGridLines.visible ? options.majorUnit : 0,
vertical = options.vertical,
lineBox = altAxis.lineBox(),
linePos = lineBox[vertical ? "y1" : "x1"],
lineOptions = {
lineStart: lineBox[vertical ? "x1" : "y1"],
lineEnd: lineBox[vertical ? "x2" : "y2"],
vertical: vertical,
modelId: axis.plotArea.modelId
},
pos, majorTicks = [];
function render(tickPositions, gridLine) {
var count = tickPositions.length,
i;
if (gridLine.visible) {
for (i = gridLine.skip; i < count; i += gridLine.step) {
pos = round(tickPositions[i]);
if (!inArray(pos, majorTicks)) {
if (i % gridLine.skipUnit !== 0 && (!axisLineVisible || linePos !== pos)) {
lineOptions.position = pos;
items.push(createAxisGridLine(view, lineOptions, gridLine));
majorTicks.push(pos);
}
}
}
}
}
render(axis.getMajorTickPositions(), options.majorGridLines);
render(axis.getMinorTickPositions(), deepExtend({}, {
skipUnit: majorUnit / options.minorUnit
}, options.minorGridLines));
return items;
},
reflow: function(box) {
var axis = this,
options = axis.options,
vertical = options.vertical,
labels = axis.labels,
count = labels.length,
space = axis.getActualTickSize() + options.margin,
maxLabelHeight = 0,
maxLabelWidth = 0,
title = axis.title,
label, i;
for (i = 0; i < count; i++) {
label = labels[i];
maxLabelHeight = math.max(maxLabelHeight, label.box.height());
maxLabelWidth = math.max(maxLabelWidth, label.box.width());
}
if (title) {
if (vertical) {
maxLabelWidth += title.box.width();
} else {
maxLabelHeight += title.box.height();
}
}
if (vertical) {
axis.box = Box2D(
box.x1, box.y1,
box.x1 + maxLabelWidth + space, box.y2
);
} else {
axis.box = Box2D(
box.x1, box.y1,
box.x2, box.y1 + maxLabelHeight + space
);
}
axis.arrangeTitle();
axis.arrangeLabels();
axis.arrangeNotes();
},
arrangeLabels: function() {
var axis = this,
options = axis.options,
labels = axis.labels,
labelsBetweenTicks = !options.justified,
vertical = options.vertical,
lineBox = axis.lineBox(),
mirror = options.labels.mirror,
tickPositions = axis.getMajorTickPositions(),
labelOffset = axis.getActualTickSize() + options.margin,
labelBox, labelY, i;
for (i = 0; i < labels.length; i++) {
var label = labels[i],
tickIx = label.index,
labelSize = vertical ? label.box.height() : label.box.width(),
labelPos = tickPositions[tickIx] - (labelSize / 2),
firstTickPosition, nextTickPosition, middle, labelX;
if (vertical) {
if (labelsBetweenTicks) {
firstTickPosition = tickPositions[tickIx];
nextTickPosition = tickPositions[tickIx + 1];
middle = firstTickPosition + (nextTickPosition - firstTickPosition) / 2;
labelPos = middle - (labelSize / 2);
}
labelX = lineBox.x2;
if (mirror) {
labelX += labelOffset;
} else {
labelX -= labelOffset + label.box.width();
}
labelBox = label.box.move(labelX, labelPos);
} else {
if (labelsBetweenTicks) {
firstTickPosition = tickPositions[tickIx];
nextTickPosition = tickPositions[tickIx + 1];
} else {
firstTickPosition = labelPos;
nextTickPosition = labelPos + labelSize;
}
labelY = lineBox.y1;
if (mirror) {
labelY -= labelOffset + label.box.height();
} else {
labelY += labelOffset;
}
labelBox = Box2D(firstTickPosition, labelY,
nextTickPosition, labelY + label.box.height());
}
label.reflow(labelBox);
}
},
arrangeTitle: function() {
var axis = this,
options = axis.options,
mirror = options.labels.mirror,
vertical = options.vertical,
title = axis.title;
if (title) {
if (vertical) {
title.options.align = mirror ? RIGHT : LEFT;
title.options.vAlign = title.options.position;
} else {
title.options.align = title.options.position;
title.options.vAlign = mirror ? TOP : BOTTOM;
}
title.reflow(axis.box);
}
},
arrangeNotes: function() {
var axis = this,
i, item, slot, value;
for (i = 0; i < axis.notes.length; i++) {
item = axis.notes[i];
value = item.options.value;
if (defined(value)) {
if (axis.shouldRenderNote(value)) {
item.show();
} else {
item.hide();
}
slot = axis.getSlot(value);
} else {
item.hide();
}
item.reflow(slot || axis.lineBox());
}
},
alignTo: function(secondAxis) {
var axis = this,
lineBox = secondAxis.lineBox(),
vertical = axis.options.vertical,
pos = vertical ? Y : X;
axis.box.snapTo(lineBox, pos);
if (vertical) {
axis.box.shrink(0, axis.lineBox().height() - lineBox.height());
} else {
axis.box.shrink(axis.lineBox().width() - lineBox.width(), 0);
}
axis.box[pos + 1] -= axis.lineBox()[pos + 1] - lineBox[pos + 1];
axis.box[pos + 2] -= axis.lineBox()[pos + 2] - lineBox[pos + 2];
},
axisLabelText: function(value, dataItem, options) {
var text = value;
if (options.template) {
var tmpl = template(options.template);
text = tmpl({ value: value, dataItem: dataItem, format: options.format, culture: options.culture });
} else if (options.format) {
if (options.format.match(FORMAT_REGEX)) {
text = kendo.format(options.format, value);
} else {
text = kendo.toString(value, options.format, options.culture);
}
}
return text;
}
});
var Note = BoxElement.extend({
init: function(value, text, dataItem, category, series, options) {
var note = this;
BoxElement.fn.init.call(note, options);
note.enableDiscovery();
note.value = value;
note.text = text;
note.dataItem = dataItem;
note.category = category;
note.series = series;
note.render();
},
options: {
icon: {
zIndex: 1,
visible: true,
type: CIRCLE
},
label: {
zIndex: 2,
position: INSIDE,
visible: true,
align: CENTER,
vAlign: CENTER
},
line: {
visible: true,
zIndex: 2
},
visible: true,
position: TOP
},
hide: function() {
this.options.visible = false;
},
show: function() {
this.options.visible = true;
},
render: function() {
var note = this,
options = note.options,
label = options.label,
text = note.text,
icon = options.icon,
size = icon.size,
dataModelId = { data: { modelId: note.modelId } },
box = Box2D(),
marker, width, height, noteTemplate;
if (options.visible) {
if (defined(label) && label.visible) {
if (label.template) {
noteTemplate = template(label.template);
text = noteTemplate({
dataItem: note.dataItem,
category: note.category,
value: note.value,
text: text,
series: note.series
});
} else if (label.format) {
text = autoFormat(label.format, text);
}
note.label = new TextBox(text, deepExtend({}, label, dataModelId));
note.append(note.label);
if (label.position === INSIDE) {
if (icon.type === CIRCLE) {
size = math.max(note.label.box.width(), note.label.box.height());
} else {
width = note.label.box.width();
height = note.label.box.height();
}
box.wrap(note.label.box);
}
}
icon.width = width || size;
icon.height = height || size;
marker = new ShapeElement(deepExtend({}, icon, dataModelId));
note.marker = marker;
note.append(marker);
marker.reflow(Box2D());
note.wrapperBox = box.wrap(marker.box);
}
},
reflow: function(targetBox) {
var note = this,
options = note.options,
center = targetBox.center(),
wrapperBox = note.wrapperBox,
length = options.line.length,
position = options.position,
label = note.label,
marker = note.marker,
lineStart, box, contentBox;
if (options.visible) {
if (inArray(position, [LEFT, RIGHT])) {
if (position === LEFT) {
contentBox = wrapperBox.alignTo(targetBox, position).translate(-length, targetBox.center().y - wrapperBox.center().y);
if (options.line.visible) {
lineStart = Point2D(math.floor(targetBox.x1), center.y);
note.linePoints = [
lineStart,
Point2D(math.floor(contentBox.x2), center.y)
];
box = contentBox.clone().wrapPoint(lineStart);
}
} else {
contentBox = wrapperBox.alignTo(targetBox, position).translate(length, targetBox.center().y - wrapperBox.center().y);
if (options.line.visible) {
lineStart = Point2D(math.floor(targetBox.x2), center.y);
note.linePoints = [
lineStart,
Point2D(math.floor(contentBox.x1), center.y)
];
box = contentBox.clone().wrapPoint(lineStart);
}
}
} else {
if (position === BOTTOM) {
contentBox = wrapperBox.alignTo(targetBox, position).translate(targetBox.center().x - wrapperBox.center().x, length);
if (options.line.visible) {
lineStart = Point2D(math.floor(center.x), math.floor(targetBox.y2));
note.linePoints = [
lineStart,
Point2D(math.floor(center.x), math.floor(contentBox.y1))
];
box = contentBox.clone().wrapPoint(lineStart);
}
} else {
contentBox = wrapperBox.alignTo(targetBox, position).translate(targetBox.center().x - wrapperBox.center().x, -length);
if (options.line.visible) {
lineStart = Point2D(math.floor(center.x), math.floor(targetBox.y1));
note.linePoints = [
lineStart,
Point2D(math.floor(center.x), math.floor(contentBox.y2))
];
box = contentBox.clone().wrapPoint(lineStart);
}
}
}
if (marker) {
marker.reflow(contentBox);
}
if (label) {
label.reflow(contentBox);
if (marker) {
if (options.label.position === OUTSIDE) {
label.box.alignTo(marker.box, position);
}
label.reflow(label.box);
}
}
note.contentBox = contentBox;
note.box = box || contentBox;
}
},
getViewElements: function(view) {
var note = this,
elements = BoxElement.fn.getViewElements.call(note, view),
group = view.createGroup({
data: { modelId: note.modelId },
zIndex: 1
});
if (note.options.visible) {
append(elements, note.createLine(view));
}
group.children = elements;
return [ group ];
},
createLine: function(view) {
var note = this,
line = note.options.line;
return [
view.createPolyline(note.linePoints, false, {
stroke: line.color,
strokeWidth: line.width,
dashType: line.dashType,
zIndex: line.zIndex
})
];
},
click: function(widget, e) {
var args = this.eventArgs(e);
if (!widget.trigger(NOTE_CLICK, args)) {
e.preventDefault();
}
},
hover: function(widget, e) {
var args = this.eventArgs(e);
if (!widget.trigger(NOTE_HOVER, args)) {
e.preventDefault();
}
},
leave: function(widget) {
widget._unsetActivePoint();
},
eventArgs: function(e) {
var note = this,
options = note.options;
return {
element: $(e.target),
text: defined(options.label) ? options.label.text : "",
dataItem: note.dataItem,
series: note.series,
value: note.value,
category: note.category
};
}
});
var ShapeElement = BoxElement.extend({
options: {
type: CIRCLE,
align: CENTER,
vAlign: CENTER
},
getViewElements: function(view, renderOptions) {
var marker = this,
options = marker.options,
type = options.type,
rotation = options.rotation,
box = marker.paddingBox,
element,
elementOptions,
center = box.center(),
halfWidth = box.width() / 2,
points,
i;
// Make sure that this element will be added in the model map.
ChartElement.fn.getViewElements.call(this, view);
if ((renderOptions || {}).visible !== true) {
if (!options.visible || !marker.hasBox()) {
return [];
}
}
elementOptions = deepExtend(marker.elementStyle(), renderOptions);
if (type === CIRCLE) {
element = view.createCircle(Point2D(
round(box.x1 + halfWidth, COORD_PRECISION),
round(box.y1 + box.height() / 2, COORD_PRECISION)
), halfWidth, elementOptions);
} else if (type === TRIANGLE) {
points = [
Point2D(box.x1 + halfWidth, box.y1),
Point2D(box.x1, box.y2),
Point2D(box.x2, box.y2)
];
} else if (type === CROSS) {
element = view.createGroup({
zIndex: elementOptions.zIndex
});
element.children.push(view.createPolyline(
[Point2D(box.x1, box.y1), Point2D(box.x2, box.y2)], true, elementOptions
));
element.children.push(view.createPolyline(
[Point2D(box.x1, box.y2), Point2D(box.x2, box.y1)], true, elementOptions
));
} else {
points = box.points();
}
if (points) {
if (rotation) {
for (i = 0; i < points.length; i++) {
points[i].rotate(center, rotation);
}
}
element = view.createPolyline(
points, true, elementOptions
);
}
return [ element ];
}
});
var PinElement = BoxElement.extend({
init: function(options) {
var pin = this;
BoxElement.fn.init.call(pin, options);
pin.createTextBox();
},
options: {
arcAngle: 300,
border: {
width: 1,
color: "red"
},
label: {
zIndex: 2,
margin: getSpacing(2),
border: {
width: 1,
color: "green"
}
}
},
createTextBox: function() {
var pin = this,
options = pin.options,
textBox = new TextBox(options.code, options.label);
pin.append(textBox);
pin.textBox = textBox;
},
reflow: function(targetBox) {
var pin = this,
textBox = pin.textBox;
pin.box = Box2D(0, 0, textBox.box.height(), textBox.box.height() * 1.5);
BoxElement.fn.reflow.call(pin, targetBox);
},
getViewElements: function(view) {
var pin = this,
options = pin.options,
center = pin.box.center(),
element = view.createPin(new Pin({
origin: new Point2D(center.x, center.y),
radius: pin.textBox.box.height() / 2,
height: pin.textBox.box.height() * 1.5,
rotation: 0,
arcAngle: options.arcAngle
}), deepExtend({}, {
fill: "red",
zIndex: 1,
kur: 1,
id: "111"
}, options)),
elements = [ element ];
append(elements, BoxElement.fn.getViewElements.call(pin, view));
return elements;
}
});
var NumericAxis = Axis.extend({
init: function(seriesMin, seriesMax, options) {
var axis = this,
defaultOptions = axis.initDefaults(seriesMin, seriesMax, options);
Axis.fn.init.call(axis, defaultOptions);
},
startValue: function() {
return 0;
},
options: {
type: "numeric",
min: 0,
max: 1,
vertical: true,
majorGridLines: {
visible: true,
width: 1,
color: BLACK
},
zIndex: 1
},
initDefaults: function(seriesMin, seriesMax, options) {
var axis = this,
narrowRange = options.narrowRange,
autoMin = axis.autoAxisMin(seriesMin, seriesMax, narrowRange),
autoMax = axis.autoAxisMax(seriesMin, seriesMax, narrowRange),
majorUnit = autoMajorUnit(autoMin, autoMax),
autoOptions = {
majorUnit: majorUnit
},
userSetLimits;
if (options.roundToMajorUnit !== false) {
if (autoMin < 0 && remainderClose(autoMin, majorUnit, 1/3)) {
autoMin -= majorUnit;
}
if (autoMax > 0 && remainderClose(autoMax, majorUnit, 1/3)) {
autoMax += majorUnit;
}
}
autoOptions.min = floor(autoMin, majorUnit);
autoOptions.max = ceil(autoMax, majorUnit);
if (options) {
userSetLimits = defined(options.min) || defined(options.max);
if (userSetLimits) {
if (options.min === options.max) {
if (options.min > 0) {
options.min = 0;
} else {
options.max = 1;
}
}
}
if (options.majorUnit) {
autoOptions.min = floor(autoOptions.min, options.majorUnit);
autoOptions.max = ceil(autoOptions.max, options.majorUnit);
} else if (userSetLimits) {
options = deepExtend(autoOptions, options);
// Determine an auto major unit after min/max have been set
autoOptions.majorUnit = autoMajorUnit(options.min, options.max);
}
}
autoOptions.minorUnit = (options.majorUnit || autoOptions.majorUnit) / 5;
return deepExtend(autoOptions, options);
},
range: function() {
var options = this.options;
return { min: options.min, max: options.max };
},
autoAxisMax: function(min, max, narrow) {
var axisMax,
diff;
if (!min && !max) {
return 1;
}
if (min <= 0 && max <= 0) {
max = min == max ? 0 : max;
diff = math.abs((max - min) / max);
if(!narrow && diff > ZERO_THRESHOLD) {
return 0;
}
axisMax = math.min(0, max - ((min - max) / 2));
} else {
min = min == max ? 0 : min;
axisMax = max;
}
return axisMax;
},
autoAxisMin: function(min, max, narrow) {
var axisMin,
diff;
if (!min && !max) {
return 0;
}
if (min >= 0 && max >= 0) {
min = min == max ? 0 : min;
diff = (max - min) / max;
if(!narrow && diff > ZERO_THRESHOLD) {
return 0;
}
axisMin = math.max(0, min - ((max - min) / 2));
} else {
max = min == max ? 0 : max;
axisMin = min;
}
return axisMin;
},
getDivisions: function(stepValue) {
if (stepValue === 0) {
return 1;
}
var options = this.options,
range = options.max - options.min;
return math.floor(round(range / stepValue, COORD_PRECISION)) + 1;
},
getTickPositions: function(unit, skipUnit) {
var axis = this,
options = axis.options,
vertical = options.vertical,
reverse = options.reverse,
lineBox = axis.lineBox(),
lineSize = vertical ? lineBox.height() : lineBox.width(),
range = options.max - options.min,
scale = lineSize / range,
step = unit * scale,
skipStep = 0,
divisions = axis.getDivisions(unit),
dir = (vertical ? -1 : 1) * (reverse ? -1 : 1),
startEdge = dir === 1 ? 1 : 2,
pos = lineBox[(vertical ? Y : X) + startEdge],
positions = [],
i;
if (skipUnit) {
skipStep = skipUnit / unit;
}
for (i = 0; i < divisions; i++) {
if (i % skipStep !== 0) {
positions.push(round(pos, COORD_PRECISION));
}
pos = pos + step * dir;
}
return positions;
},
getMajorTickPositions: function() {
var axis = this;
return axis.getTickPositions(axis.options.majorUnit);
},
getMinorTickPositions: function() {
var axis = this;
return axis.getTickPositions(axis.options.minorUnit);
},
getSlot: function(a, b, limit) {
var axis = this,
options = axis.options,
reverse = options.reverse,
vertical = options.vertical,
valueAxis = vertical ? Y : X,
lineBox = axis.lineBox(),
lineStart = lineBox[valueAxis + (reverse ? 2 : 1)],
lineSize = vertical ? lineBox.height() : lineBox.width(),
dir = reverse ? -1 : 1,
step = dir * (lineSize / (options.max - options.min)),
p1,
p2,
slotBox = new Box2D(lineBox.x1, lineBox.y1, lineBox.x1, lineBox.y1);
if (!defined(a)) {
a = b || 0;
}
if (!defined(b)) {
b = a || 0;
}
if (limit) {
a = math.max(math.min(a, options.max), options.min);
b = math.max(math.min(b, options.max), options.min);
}
if (vertical) {
p1 = options.max - math.max(a, b);
p2 = options.max - math.min(a, b);
} else {
p1 = math.min(a, b) - options.min;
p2 = math.max(a, b) - options.min;
}
slotBox[valueAxis + 1] = math.max(math.min(lineStart + step * (reverse ? p2 : p1), COORDINATE_LIMIT), -COORDINATE_LIMIT);
slotBox[valueAxis + 2] = math.max(math.min(lineStart + step * (reverse ? p1 : p2), COORDINATE_LIMIT), -COORDINATE_LIMIT);
return slotBox;
},
getValue: function(point) {
var axis = this,
options = axis.options,
reverse = options.reverse,
vertical = options.vertical,
max = options.max * 1,
min = options.min * 1,
valueAxis = vertical ? Y : X,
lineBox = axis.lineBox(),
lineStart = lineBox[valueAxis + (reverse ? 2 : 1)],
lineSize = vertical ? lineBox.height() : lineBox.width(),
dir = reverse ? -1 : 1,
offset = dir * (point[valueAxis] - lineStart),
step = (max - min) / lineSize,
valueOffset = offset * step,
value;
if (offset < 0 || offset > lineSize) {
return null;
}
value = vertical ?
max - valueOffset :
min + valueOffset;
return round(value, DEFAULT_PRECISION);
},
translateRange: function(delta) {
var axis = this,
options = axis.options,
lineBox = axis.lineBox(),
vertical = options.vertical,
reverse = options.reverse,
size = vertical ? lineBox.height() : lineBox.width(),
range = options.max - options.min,
scale = size / range,
offset = round(delta / scale, DEFAULT_PRECISION);
if ((vertical || reverse) && !(vertical && reverse )) {
offset = -offset;
}
return {
min: options.min + offset,
max: options.max + offset
};
},
scaleRange: function(delta) {
var axis = this,
options = axis.options,
offset = -delta * options.majorUnit;
return {
min: options.min - offset,
max: options.max + offset
};
},
labelsCount: function() {
return this.getDivisions(this.options.majorUnit);
},
createAxisLabel: function(index, labelOptions) {
var axis = this,
options = axis.options,
value = round(options.min + (index * options.majorUnit), DEFAULT_PRECISION),
text = axis.axisLabelText(value, null, labelOptions);
return new AxisLabel(value, text, index, null, labelOptions);
},
shouldRenderNote: function(value) {
var range = this.range();
return range.min <= value && value <= range.max;
}
});
var LogarithmicAxis = Axis.extend({
init: function(seriesMin, seriesMax, options) {
this.options = this._initOptions(seriesMin, seriesMax, options);
Axis.fn.init.call(this, options);
},
startValue: function() {
return this.options.min;
},
options: {
type: "log",
majorUnit: 10,
minorUnit: 1,
axisCrossingValue: 1,
vertical: true,
majorGridLines: {
visible: true,
width: 1,
color: BLACK
},
zIndex: 1
},
getSlot: function(a, b, limit) {
var axis = this,
options = axis.options,
reverse = options.reverse,
vertical = options.vertical,
valueAxis = vertical ? Y : X,
lineBox = axis.lineBox(),
lineStart = lineBox[valueAxis + (reverse ? 2 : 1)],
lineSize = vertical ? lineBox.height() : lineBox.width(),
dir = reverse ? -1 : 1,
base = options.majorUnit,
logMin = axis.logMin,
logMax = axis.logMax,
step = dir * (lineSize / (logMax - logMin)),
p1, p2,
slotBox = new Box2D(lineBox.x1, lineBox.y1, lineBox.x1, lineBox.y1);
if (!defined(a)) {
a = b || 1;
}
if (!defined(b)) {
b = a || 1;
}
if(a <= 0 || b <= 0) {
return;
}
if (limit) {
a = math.max(math.min(a, options.max), options.min);
b = math.max(math.min(b, options.max), options.min);
}
a = log(a, base);
b = log(b, base);
if (vertical) {
p1 = logMax - math.max(a, b);
p2 = logMax - math.min(a, b);
} else {
p1 = math.min(a, b) - logMin;
p2 = math.max(a, b) - logMin;
}
slotBox[valueAxis + 1] = lineStart + step * (reverse ? p2 : p1);
slotBox[valueAxis + 2] = lineStart + step * (reverse ? p1 : p2);
return slotBox;
},
getValue: function(point) {
var axis = this,
options = axis.options,
reverse = options.reverse,
vertical = options.vertical,
lineBox = axis.lineBox(),
base = options.majorUnit,
logMin = axis.logMin,
logMax = axis.logMax,
dir = vertical === reverse ? 1 : -1,
startEdge = dir === 1 ? 1 : 2,
lineSize = vertical ? lineBox.height() : lineBox.width(),
step = ((logMax - logMin) / lineSize),
valueAxis = vertical ? Y : X,
lineStart = lineBox[valueAxis + startEdge],
offset = dir * (point[valueAxis] - lineStart),
valueOffset = offset * step,
value;
if (offset < 0 || offset > lineSize) {
return null;
}
value = logMin + valueOffset;
return round(math.pow(base, value), DEFAULT_PRECISION);
},
range: function() {
var options = this.options;
return { min: options.min, max: options.max };
},
scaleRange: function(delta) {
var axis = this,
options = axis.options,
base = options.majorUnit,
offset = -delta;
return {
min: math.pow(base, axis.logMin - offset),
max: math.pow(base, axis.logMax + offset)
};
},
translateRange: function(delta) {
var axis = this,
options = axis.options,
base = options.majorUnit,
lineBox = axis.lineBox(),
vertical = options.vertical,
reverse = options.reverse,
size = vertical ? lineBox.height() : lineBox.width(),
logMin = axis.logMin,
logMax = axis.logMax,
scale = size / (axis.logMax - axis.logMin),
offset = round(delta / scale, DEFAULT_PRECISION);
if ((vertical || reverse) && !(vertical && reverse )) {
offset = -offset;
}
return {
min: math.pow(base, axis.logMin + offset),
max: math.pow(base, axis.logMax + offset)
};
},
labelsCount: function() {
var axis = this,
floorMax = math.floor(axis.logMax),
count = math.floor(floorMax - axis.logMin) + 1;
return count;
},
getMajorTickPositions: function() {
var axis = this,
ticks = [];
axis.traverseMajorTicksPositions(function(position) {
ticks.push(position);
}, {step: 1, skip: 0});
return ticks;
},
renderTicks: function(view) {
var axis = this,
ticks = [],
options = axis.options,
lineBox = axis.lineBox(),
mirror = options.labels.mirror,
majorTicks = options.majorTicks,
minorTicks = options.minorTicks,
tickLineOptions= {
_alignLines: options._alignLines,
vertical: options.vertical
},
start, end;
function render(tickPosition, tickOptions) {
tickLineOptions.tickX = mirror ? lineBox.x2 : lineBox.x2 - tickOptions.size;
tickLineOptions.tickY = mirror ? lineBox.y1 - tickOptions.size : lineBox.y1;
tickLineOptions.position = tickPosition;
ticks.push(createAxisTick(view, tickLineOptions, tickOptions));
}
if (majorTicks.visible) {
axis.traverseMajorTicksPositions(render, majorTicks);
}
if (minorTicks.visible) {
axis.traverseMinorTicksPositions(render, minorTicks);
}
return ticks;
},
renderGridLines: function(view, altAxis) {
var axis = this,
items = [],
options = axis.options,
axisLineVisible = altAxis.options.line.visible,//check
majorGridLines = options.majorGridLines,
minorGridLines = options.minorGridLines,
vertical = options.vertical,
lineBox = altAxis.lineBox(),
lineOptions = {
lineStart: lineBox[vertical ? "x1" : "y1"],
lineEnd: lineBox[vertical ? "x2" : "y2"],
vertical: vertical,
modelId: axis.plotArea.modelId
},
pos, majorTicks = [];
function render(tickPosition, gridLine) {
if (!inArray(tickPosition, majorTicks)) {
lineOptions.position = tickPosition;
items.push(createAxisGridLine(view, lineOptions, gridLine));
majorTicks.push(tickPosition);
}
}
if (majorGridLines.visible) {
axis.traverseMajorTicksPositions(render, majorGridLines);
}
if (minorGridLines.visible) {
axis.traverseMinorTicksPositions(render, minorGridLines);
}
return items;
},
traverseMajorTicksPositions: function(callback, tickOptions) {
var axis = this,
lineOptions = axis._lineOptions(),
lineStart = lineOptions.lineStart,
step = lineOptions.step,
logMin = axis.logMin,
logMax = axis.logMax,
power,
position;
for (power = math.ceil(logMin) + tickOptions.skip; power <= logMax; power+= tickOptions.step) {
position = round(lineStart + step * (power - logMin), DEFAULT_PRECISION);
callback(position, tickOptions);
}
},
traverseMinorTicksPositions: function(callback, tickOptions) {
var axis = this,
options = axis.options,
lineOptions = axis._lineOptions(),
lineStart = lineOptions.lineStart,
lineStep = lineOptions.step,
base = options.majorUnit,
logMin = axis.logMin,
logMax = axis.logMax,
start = math.floor(logMin),
max = options.max,
min = options.min,
minorUnit = options.minorUnit,
power,
value,
position,
minorOptions;
for (power = start; power < logMax; power++) {
minorOptions = axis._minorIntervalOptions(power);
for(var idx = tickOptions.skip; idx < minorUnit; idx+= tickOptions.step) {
value = minorOptions.value + idx * minorOptions.minorStep;
if (value > max) {
break;
}
if (value >= min) {
position = round(lineStart + lineStep * (log(value, base) - logMin), DEFAULT_PRECISION);
callback(position, tickOptions);
}
}
}
},
createAxisLabel: function(index, labelOptions) {
var axis = this,
options = axis.options,
power = math.ceil(axis.logMin + index),
value = Math.pow(options.majorUnit, power),
text = axis.axisLabelText(value, null, labelOptions);
return new AxisLabel(value, text, index, null, labelOptions);
},
shouldRenderNote: function(value) {
var range = this.range();
return range.min <= value && value <= range.max;
},
_throwNegativeValuesError: function() {
throw new Error("Non positive values cannot be used for a logarithmic axis");
},
_initOptions: function(seriesMin, seriesMax, options) {
var axis = this,
axisOptions = deepExtend({}, axis.options, {min: seriesMin, max: seriesMax}, options),
min = axisOptions.min,
max = axisOptions.max,
base = axisOptions.majorUnit,
logMaxRemainder;
if (axisOptions.axisCrossingValue <= 0) {
axis._throwNegativeValuesError();
}
if (!defined(options.max)) {
logMaxRemainder = round(log(max, base), DEFAULT_PRECISION) % 1;
if (max <= 0) {
max = base;
} else if (logMaxRemainder !== 0 && (logMaxRemainder < 0.3 || logMaxRemainder > 0.9)) {
max = math.pow(base, log(max, base) + 0.2);
} else {
max = math.pow(base, math.ceil(log(max, base)));
}
} else if (options.max <= 0) {
axis._throwNegativeValuesError();
}
if (!defined(options.min)) {
if (min <= 0) {
min = max <= 1 ? math.pow(base, -2) : 1;
} else if (!options.narrowRange) {
min = math.pow(base, math.floor(log(min, base)));
}
} else if (options.min <= 0) {
axis._throwNegativeValuesError();
}
axis.logMin = round(log(min, base), DEFAULT_PRECISION);
axis.logMax = round(log(max, base), DEFAULT_PRECISION);
axisOptions.max = max;
axisOptions.min = min;
axisOptions.minorUnit = options.minorUnit || round(base - 1, DEFAULT_PRECISION);
return axisOptions;
},
_minorIntervalOptions: function(power) {
var base = this.options.majorUnit,
value = math.pow(base, power),
nextValue = math.pow(base, power + 1),
difference = nextValue - value,
minorStep = difference / this.options.minorUnit;
return {
value: value,
minorStep: minorStep
};
},
_lineOptions: function() {
var axis = this,
options = axis.options,
reverse = options.reverse,
vertical = options.vertical,
valueAxis = vertical ? Y : X,
lineBox = axis.lineBox(),
dir = vertical === reverse ? 1 : -1,
startEdge = dir === 1 ? 1 : 2,
lineSize = vertical ? lineBox.height() : lineBox.width(),
step = dir * (lineSize / (axis.logMax - axis.logMin)),
lineStart = lineBox[valueAxis + startEdge];
return {
step: step,
lineStart: lineStart,
lineBox: lineBox
};
}
});
// View base classes ======================================================
var ViewElement = Class.extend({
init: function(options) {
var element = this;
element.children = [];
element.options = deepExtend({}, element.options, options);
},
render: function() {
return this.template(this);
},
renderContent: function() {
var element = this,
output = "",
sortedChildren = element.sortChildren(),
childrenCount = sortedChildren.length,
i;
for (i = 0; i < childrenCount; i++) {
output += sortedChildren[i].render();
}
return output;
},
sortChildren: function() {
var element = this,
children = element.children,
length,
i;
for (i = 0, length = children.length; i < length; i++) {
children[i]._childIndex = i;
}
return children.slice(0).sort(element.compareChildren);
},
refresh: $.noop,
destroy: function() {
var element = this,
id = element.options.id,
children = element.children,
length,
i;
if (id) {
IDPool.current.free(id);
}
for (i = 0, length = children.length; i < length; i++) {
children[i].destroy();
}
},
compareChildren: function(a, b) {
var aValue = a.options.zIndex || 0,
bValue = b.options.zIndex || 0;
if (aValue !== bValue) {
return aValue - bValue;
}
return a._childIndex - b._childIndex;
},
renderId: function() {
var element = this,
result = "";
if (element.options.id) {
result = element.renderAttr("id", element.options.id);
}
return result;
},
renderAttr: function (name, value) {
return defined(value) ? " " + name + "='" + value + "' " : "";
},
renderDataAttributes: function() {
var element = this,
data = element.options.data,
key, attr, output = "";
for (key in data) {
attr = "data-" + key.replace(UPPERCASE_REGEX, "-$1").toLowerCase();
output += element.renderAttr(attr, data[key]);
}
return output;
},
renderCursor: function() {
var options = this.options,
result = "";
if (defined(options.cursor) && options.cursor.style) {
result += "cursor: " + options.cursor.style + ";";
}
return result;
}
});
var ViewBase = ViewElement.extend({
init: function(options) {
var view = this;
ViewElement.fn.init.call(view, options);
view.definitions = {};
view.decorators = [];
view.animations = [];
},
destroy: function() {
var view = this,
animations = view.animations,
viewElement = view._viewElement;
ViewElement.fn.destroy.call(this);
while (animations.length > 0) {
animations.shift().destroy();
}
if (viewElement) {
view._freeIds(viewElement);
view._viewElement = null;
}
},
_freeIds: function(domElement) {
$("[id]", domElement).each(function() {
IDPool.current.free($(this).attr("id"));
});
},
replace: function(model) {
var view = this,
element = getElement(model.id);
if (element) {
element.parentNode.replaceChild(
view.renderElement(model.getViewElements(view)[0]),
element
);
}
},
load: function(model) {
var view = this;
view.children = model.getViewElements(view);
},
renderDefinitions: function() {
var definitions = this.definitions,
definitionId,
output = "";
for (definitionId in definitions) {
if (definitions.hasOwnProperty(definitionId)) {
output += definitions[definitionId].render();
}
}
return output;
},
decorate: function(element) {
var decorators = this.decorators,
i,
length = decorators.length,
currentDecorator;
for (i = 0; i < length; i++) {
currentDecorator = decorators[i];
this._decorateChildren(currentDecorator, element);
element = currentDecorator.decorate.call(currentDecorator, element);
}
return element;
},
_decorateChildren: function(decorator, element) {
var view = this,
children = element.children,
i,
length = children.length;
for (i = 0; i < length; i++) {
view._decorateChildren(decorator, children[i]);
children[i] = decorator.decorate.call(decorator, children[i]);
}
},
setupAnimations: function() {
for (var i = 0; i < this.animations.length; i++) {
this.animations[i].setup();
}
},
playAnimations: function() {
for (var i = 0; i < this.animations.length; i++) {
this.animations[i].play();
}
},
buildGradient: function(options) {
var view = this,
cache = view._gradientCache,
hashCode,
overlay,
definition;
if (!cache) {
cache = view._gradientCache = [];
}
if (options) {
hashCode = getHash(options);
overlay = cache[hashCode];
definition = dataviz.Gradients[options.gradient];
if (!overlay && definition) {
overlay = deepExtend({ id: uniqueId() }, definition, options);
cache[hashCode] = overlay;
}
}
return overlay;
},
setDefaults: function(options) {
var viewOptions = this.options;
options = options || {};
if (!defined(options.inline)) {
options.inline = viewOptions.inline;
}
if (!defined(options.align)) {
options.align = viewOptions.align;
}
return options;
}
});
dataviz.Gradients = {
glass: {
type: LINEAR,
rotation: 0,
stops: [{
offset: 0,
color: WHITE,
opacity: 0
}, {
offset: 0.25,
color: WHITE,
opacity: 0.3
}, {
offset: 1,
color: WHITE,
opacity: 0
}]
},
sharpBevel: {
type: RADIAL,
stops: [{
offset: 0,
color: WHITE,
opacity: 0.55
}, {
offset: 0.65,
color: WHITE,
opacity: 0
}, {
offset: 0.95,
color: WHITE,
opacity: 0.25
}]
},
roundedBevel: {
type: RADIAL,
stops: [{
offset: 0.33,
color: WHITE,
opacity: 0.06
}, {
offset: 0.83,
color: WHITE,
opacity: 0.2
}, {
offset: 0.95,
color: WHITE,
opacity: 0
}]
},
roundedGlass: {
type: RADIAL,
supportVML: false,
stops: [{
offset: 0,
color: WHITE,
opacity: 0
}, {
offset: 0.5,
color: WHITE,
opacity: 0.3
}, {
offset: 0.99,
color: WHITE,
opacity: 0
}]
},
sharpGlass: {
type: RADIAL,
supportVML: false,
stops: [{
offset: 0,
color: WHITE,
opacity: 0.2
}, {
offset: 0.15,
color: WHITE,
opacity: 0.15
}, {
offset: 0.17,
color: WHITE,
opacity: 0.35
}, {
offset: 0.85,
color: WHITE,
opacity: 0.05
}, {
offset: 0.87,
color: WHITE,
opacity: 0.15
}, {
offset: 0.99,
color: WHITE,
opacity: 0
}]
}
};
// Animations =============================================================
var ElementAnimation = Class.extend({
init: function(element, options) {
var anim = this;
anim.options = deepExtend({}, anim.options, options);
anim.element = element;
},
options: {
duration: INITIAL_ANIMATION_DURATION,
easing: SWING
},
play: function() {
var anim = this,
options = anim.options,
element = anim.element,
elementId = element.options.id,
domElement,
delay = options.delay || 0,
start = +new Date() + delay,
duration = options.duration,
finish = start + duration,
easing = $.easing[options.easing],
wallTime,
time,
pos,
easingPos;
setTimeout(function() {
var loop = function() {
if (anim._stopped) {
return;
}
wallTime = +new Date();
time = math.min(wallTime - start, duration);
pos = time / duration;
easingPos = easing(pos, time, 0, 1, duration);
anim.step(easingPos);
if (!domElement || detached(domElement)) {
domElement = getElement(elementId);
}
element.refresh(domElement);
if (wallTime < finish) {
dataviz.requestFrame(loop);
} else {
anim.destroy();
}
};
loop();
}, delay);
},
abort: function() {
this._stopped = true;
},
destroy: function() {
this.abort();
},
setup: noop,
step: noop
});
var FadeAnimation = ElementAnimation.extend({
options: {
duration: 200,
easing: LINEAR
},
setup: function() {
var anim = this,
options = anim.element.options;
anim.targetFillOpacity = options.fillOpacity;
anim.targetStrokeOpacity = options.strokeOpacity;
options.fillOpacity = options.strokeOpacity = 0;
},
step: function(pos) {
var anim = this,
options = anim.element.options;
options.fillOpacity = pos * anim.targetFillOpacity;
options.strokeOpacity = pos * anim.targetStrokeOpacity;
}
});
var ExpandAnimation = ElementAnimation.extend({
options: {
size: 0,
easing: LINEAR
},
setup: function() {
var points = this.element.points;
points[1].x = points[2].x = points[0].x;
},
step: function(pos) {
var options = this.options,
size = interpolateValue(0, options.size, pos),
points = this.element.points;
// Expands rectangle to the right
points[1].x = points[2].x = points[0].x + size;
},
destroy: function() {
ElementAnimation.fn.destroy.call(this);
// Unwrap all child elements
this.element.destroy();
}
});
var RotationAnimation = ElementAnimation.extend({
options: {
easing: LINEAR,
duration: 900
},
setup: function() {
var anim = this,
element = anim.element,
elementOptions = element.options,
options = anim.options,
center = options.center,
start, end;
if (elementOptions.rotation) {
start = options.startAngle;
end = elementOptions.rotation[0];
options.duration = math.max((math.abs(start - end) / options.speed) * 1000, 1);
anim.endState = end;
elementOptions.rotation = [
start,
center.x,
center.y
];
}
},
step: function(pos) {
var anim = this,
element = anim.element;
if (element.options.rotation) {
element.options.rotation[0] = interpolateValue(anim.options.startAngle, anim.endState, pos);
}
}
});
var BarAnimation = ElementAnimation.extend({
options: {
easing: SWING
},
setup: function() {
var anim = this,
element = anim.element,
points = element.points,
options = element.options,
axis = options.vertical ? Y : X,
stackBase = options.stackBase,
aboveAxis = options.aboveAxis,
startPosition,
endState = anim.endState = {
top: points[0].y,
right: points[1].x,
bottom: points[3].y,
left: points[0].x
};
if (axis === Y) {
startPosition = valueOrDefault(stackBase,
endState[aboveAxis ? BOTTOM : TOP]);
} else {
startPosition = valueOrDefault(stackBase,
endState[aboveAxis ? LEFT : RIGHT]);
}
anim.startPosition = startPosition;
updateArray(points, axis, startPosition);
},
step: function(pos) {
var anim = this,
startPosition = anim.startPosition,
endState = anim.endState,
element = anim.element,
points = element.points;
if (element.options.vertical) {
points[0].y = points[1].y =
interpolateValue(startPosition, endState.top, pos);
points[2].y = points[3].y =
interpolateValue(startPosition, endState.bottom, pos);
} else {
points[0].x = points[3].x =
interpolateValue(startPosition, endState.left, pos);
points[1].x = points[2].x =
interpolateValue(startPosition, endState.right, pos);
}
}
});
var BarIndicatorAnimatin = ElementAnimation.extend({
options: {
easing: SWING,
duration: 1000
},
setup: function() {
var anim = this,
element = anim.element,
points = element.points,
options = element.options.animation,
vertical = options.vertical,
reverse = options.reverse,
axis = anim.axis = vertical ? "y" : "x",
start, end, pos,
endPosition = anim.options.endPosition,
initialState = anim.initialState = {
top: points[0].y,
right: points[1].x,
bottom: points[3].y,
left: points[0].x
},
initial = !defined(anim.options.endPosition);
if (vertical) {
pos = reverse ? "y2" : "y1";
start = initialState[initial && !reverse ? BOTTOM : TOP];
end = initial ? initialState[reverse ? BOTTOM : TOP] : endPosition[pos];
} else {
pos = reverse ? "x1" : "x2";
start = initialState[initial && !reverse ? LEFT : RIGHT];
end = initial ? initialState[reverse ? LEFT : RIGHT] : endPosition[pos];
}
anim.start = start;
anim.end = end;
if (initial) {
updateArray(points, axis, anim.start);
} else if (options.speed) {
anim.options.duration = math.max((math.abs(anim.start - anim.end) / options.speed) * 1000, 1);
}
},
step: function(pos) {
var anim = this,
start = anim.start,
end = anim.end,
element = anim.element,
points = element.points,
axis = anim.axis;
if (element.options.animation.vertical) {
points[0][axis] = points[1][axis] =
interpolateValue(start, end, pos);
} else {
points[1][axis] = points[2][axis] =
interpolateValue(start, end, pos);
}
}
});
var ArrowAnimation = ElementAnimation.extend({
options: {
easing: SWING,
duration: 1000
},
setup: function() {
var anim = this,
element = anim.element,
points = element.points,
options = element.options.animation,
vertical = options.vertical,
reverse = options.reverse,
axis = vertical ? "y" : "x",
startPos = axis + (reverse ? "1" : "2"),
endPos = axis + (reverse ? "2" : "1"),
startPosition = options.startPosition[vertical ? startPos : endPos],
halfSize = options.size / 2,
count = points.length,
initial = !defined(anim.options.endPosition),
padding = halfSize,
point,
end,
i;
anim.axis = axis;
anim.endPositions = [];
anim.startPositions = [];
if (!initial) {
startPosition = points[1][axis];
end = anim.options.endPosition[vertical ? endPos : startPos];
if (options.speed) {
anim.options.duration = math.max((math.abs(startPosition - end) / options.speed) * 1000, 1);
}
}
for (i = 0; i < count; i++) {
point = deepExtend({}, points[i]);
if (initial) {
anim.endPositions[i] = point[axis];
points[i][axis] = startPosition - padding;
} else {
anim.endPositions[i] = end - padding;
}
anim.startPositions[i] = points[i][axis];
padding -= halfSize;
}
},
step: function(pos) {
var anim = this,
startPositions = anim.startPositions,
endPositions = anim.endPositions,
element = anim.element,
points = element.points,
axis = anim.axis,
count = points.length,
i;
for (i = 0; i < count; i++) {
points[i][axis] = interpolateValue(startPositions[i], endPositions[i], pos);
}
}
});
function animationDecorator(animationName, animationType) {
return Class.extend({
init: function(view) {
this.view = view;
},
decorate: function(element) {
var decorator = this,
view = decorator.view,
animation = element.options.animation,
animationObject;
if (animation && animation.type === animationName && view.options.transitions) {
animationObject = element._animation = new animationType(element, animation);
view.animations.push(animationObject);
}
return element;
}
});
}
var FadeAnimationDecorator = animationDecorator(FADEIN, FadeAnimation);
// Helper functions========================================================
var Color = function(value) {
var color = this,
formats = Color.formats,
re,
processor,
parts,
i,
channels;
if (arguments.length === 1) {
value = color.resolveColor(value);
for (i = 0; i < formats.length; i++) {
re = formats[i].re;
processor = formats[i].process;
parts = re.exec(value);
if (parts) {
channels = processor(parts);
color.r = channels[0];
color.g = channels[1];
color.b = channels[2];
}
}
} else {
color.r = arguments[0];
color.g = arguments[1];
color.b = arguments[2];
}
color.r = color.normalizeByte(color.r);
color.g = color.normalizeByte(color.g);
color.b = color.normalizeByte(color.b);
};
Color.prototype = {
toHex: function() {
var color = this,
pad = color.padDigit,
r = color.r.toString(16),
g = color.g.toString(16),
b = color.b.toString(16);
return "#" + pad(r) + pad(g) + pad(b);
},
resolveColor: function(value) {
value = value || BLACK;
if (value.charAt(0) == "#") {
value = value.substr(1, 6);
}
value = value.replace(/ /g, "");
value = value.toLowerCase();
value = Color.namedColors[value] || value;
return value;
},
normalizeByte: function(value) {
return (value < 0 || isNaN(value)) ? 0 : ((value > 255) ? 255 : value);
},
padDigit: function(value) {
return (value.length === 1) ? "0" + value : value;
},
brightness: function(value) {
var color = this,
round = math.round;
color.r = round(color.normalizeByte(color.r * value));
color.g = round(color.normalizeByte(color.g * value));
color.b = round(color.normalizeByte(color.b * value));
return color;
},
percBrightness: function() {
var color = this;
return math.sqrt(0.241 * color.r * color.r + 0.691 * color.g * color.g + 0.068 * color.b * color.b);
}
};
Color.formats = [{
re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
process: function(parts) {
return [
parseInt(parts[1], 10), parseInt(parts[2], 10), parseInt(parts[3], 10)
];
}
}, {
re: /^(\w{2})(\w{2})(\w{2})$/,
process: function(parts) {
return [
parseInt(parts[1], 16), parseInt(parts[2], 16), parseInt(parts[3], 16)
];
}
}, {
re: /^(\w{1})(\w{1})(\w{1})$/,
process: function(parts) {
return [
parseInt(parts[1] + parts[1], 16),
parseInt(parts[2] + parts[2], 16),
parseInt(parts[3] + parts[3], 16)
];
}
}
];
Color.namedColors = {
aqua: "00ffff", azure: "f0ffff", beige: "f5f5dc",
black: "000000", blue: "0000ff", brown: "a52a2a",
coral: "ff7f50", cyan: "00ffff", darkblue: "00008b",
darkcyan: "008b8b", darkgray: "a9a9a9", darkgreen: "006400",
darkorange: "ff8c00", darkred: "8b0000", dimgray: "696969",
fuchsia: "ff00ff", gold: "ffd700", goldenrod: "daa520",
gray: "808080", green: "008000", greenyellow: "adff2f",
indigo: "4b0082", ivory: "fffff0", khaki: "f0e68c",
lightblue: "add8e6", lightgrey: "d3d3d3", lightgreen: "90ee90",
lightpink: "ffb6c1", lightyellow: "ffffe0", lime: "00ff00",
limegreen: "32cd32", linen: "faf0e6", magenta: "ff00ff",
maroon: "800000", mediumblue: "0000cd", navy: "000080",
olive: "808000", orange: "ffa500", orangered: "ff4500",
orchid: "da70d6", pink: "ffc0cb", plum: "dda0dd",
purple: "800080", red: "ff0000", royalblue: "4169e1",
salmon: "fa8072", silver: "c0c0c0", skyblue: "87ceeb",
slateblue: "6a5acd", slategray: "708090", snow: "fffafa",
steelblue: "4682b4", tan: "d2b48c", teal: "008080",
tomato: "ff6347", turquoise: "40e0d0", violet: "ee82ee",
wheat: "f5deb3", white: "ffffff", whitesmoke: "f5f5f5",
yellow: "ffff00", yellowgreen: "9acd32"
};
var IDPool = Class.extend({
init: function(size, prefix, start) {
this._pool = [];
this._freed = {};
this._size = size;
this._id = start;
this._prefix = prefix;
},
alloc: function() {
var that = this,
pool = that._pool,
id;
if (pool.length > 0) {
id = pool.pop();
delete that._freed[id];
} else {
id = that._prefix + that._id++;
}
return id;
},
free: function(id) {
var that = this,
pool = that._pool,
freed = that._freed;
if (pool.length < that._size && !freed[id]) {
pool.push(id);
freed[id] = true;
}
}
});
IDPool.current = new IDPool(ID_POOL_SIZE, ID_PREFIX, ID_START);
var LRUCache = Class.extend({
init: function(size) {
this._size = size;
this._length = 0;
this._map = {};
},
put: function(key, value) {
var lru = this,
map = lru._map,
entry = { key: key, value: value };
map[key] = entry;
if (!lru._head) {
lru._head = lru._tail = entry;
} else {
lru._tail.newer = entry;
entry.older = lru._tail;
lru._tail = entry;
}
if (lru._length >= lru._size) {
map[lru._head.key] = null;
lru._head = lru._head.newer;
lru._head.older = null;
} else {
lru._length++;
}
},
get: function(key) {
var lru = this,
entry = lru._map[key];
if (entry) {
if (entry === lru._head && entry !== lru._tail) {
lru._head = entry.newer;
lru._head.older = null;
}
if (entry !== lru._tail) {
if (entry.older) {
entry.older.newer = entry.newer;
entry.newer.older = entry.older;
}
entry.older = lru._tail;
entry.newer = null;
lru._tail.newer = entry;
lru._tail = entry;
}
return entry.value;
}
}
});
var ViewFactory = function() {
this._views = [];
};
ViewFactory.prototype = {
register: function(name, type, order) {
var views = this._views,
defaultView = views[0],
entry = {
name: name,
type: type,
order: order
};
if (!defaultView || order < defaultView.order) {
views.unshift(entry);
} else {
views.push(entry);
}
},
create: function(options, preferred) {
var views = this._views,
match = views[0];
if (preferred) {
preferred = preferred.toLowerCase();
for (var i = 0; i < views.length; i++) {
if (views[i].name === preferred) {
match = views[i];
break;
}
}
}
if (match) {
return new match.type(options);
}
kendo.logToConsole(
"Warning: KendoUI DataViz cannot render. Possible causes:\n" +
"- The browser does not support SVG, VML and Canvas. User agent: " + navigator.userAgent + "\n" +
"- The kendo.dataviz.(svg|vml|canvas).js scripts are not loaded");
}
};
ViewFactory.current = new ViewFactory();
var ExportMixin = {
svg: function() {
if (dataviz.SVGView) {
var model = this._getModel(),
view = new dataviz.SVGView(deepExtend({ encodeText: true }, model.options));
view.load(model);
return view.render();
} else {
throw new Error("Unable to create SVGView. Check that kendo.dataviz.svg.js is loaded.");
}
},
imageDataURL: function() {
if (dataviz.CanvasView) {
if (dataviz.supportsCanvas()) {
var model = this._getModel(),
container = document.createElement("div"),
view = new dataviz.CanvasView(model.options);
view.load(model);
return view.renderTo(container).toDataURL();
} else {
kendo.logToConsole(
"Warning: Unable to generate image. The browser does not support Canvas.\n" +
"User agent: " + navigator.userAgent);
return null;
}
} else {
throw new Error("Unable to create CanvasView. Check that kendo.dataviz.canvas.js is loaded.");
}
}
};
var TextMetrics = Class.extend({
init: function() {
this._cache = new LRUCache(1000);
},
measure: function(text, style) {
var styleHash = getHash(style),
cacheKey = text + styleHash,
cachedResult = this._cache.get(cacheKey);
if (cachedResult) {
return cachedResult;
}
var size = {
width: 0,
height: 0,
baseline: 0
};
var measureBox = this._measureBox,
baselineMarker = this._baselineMarker.cloneNode(false);
for (var styleKey in style) {
measureBox.style[styleKey] = style[styleKey];
}
measureBox.innerHTML = text;
measureBox.appendChild(baselineMarker);
doc.body.appendChild(measureBox);
if ((text + "").length) {
size = {
width: measureBox.offsetWidth - BASELINE_MARKER_SIZE,
height: measureBox.offsetHeight,
baseline: baselineMarker.offsetTop + BASELINE_MARKER_SIZE
};
}
this._cache.put(cacheKey, size);
measureBox.parentNode.removeChild(measureBox);
return size;
}
});
TextMetrics.fn._baselineMarker =
$("
")[0];
TextMetrics.fn._measureBox =
$("
")[0];
TextMetrics.current = new TextMetrics();
function measureText(text, style) {
return TextMetrics.current.measure(text, style);
}
function autoMajorUnit(min, max) {
var diff = round(max - min, DEFAULT_PRECISION - 1);
if (diff === 0) {
if (max === 0) {
return 0.1;
}
diff = math.abs(max);
}
var scale = math.pow(10, math.floor(math.log(diff) / math.log(10))),
relativeValue = round((diff / scale), DEFAULT_PRECISION),
scaleMultiplier = 1;
if (relativeValue < 1.904762) {
scaleMultiplier = 0.2;
} else if (relativeValue < 4.761904) {
scaleMultiplier = 0.5;
} else if (relativeValue < 9.523809) {
scaleMultiplier = 1;
} else {
scaleMultiplier = 2;
}
return round(scale * scaleMultiplier, DEFAULT_PRECISION);
}
function getHash(object) {
var hash = [];
for (var key in object) {
hash.push(key + object[key]);
}
return hash.sort().join(" ");
}
function uniqueId() {
return IDPool.current.alloc();
}
// TODO: Replace with Point2D.rotate
function rotatePoint(x, y, cx, cy, angle) {
var theta = angle * DEG_TO_RAD;
return new Point2D(
cx + (x - cx) * math.cos(theta) + (y - cy) * math.sin(theta),
cy - (x - cx) * math.sin(theta) + (y - cy) * math.cos(theta)
);
}
function boxDiff(r, s) {
if (r.x1 == s.x1 && r.y1 == s.y1 && r.x2 == s.x2 && r.y2 == s.y2) {
return s;
}
var a = math.min(r.x1, s.x1),
b = math.max(r.x1, s.x1),
c = math.min(r.x2, s.x2),
d = math.max(r.x2, s.x2),
e = math.min(r.y1, s.y1),
f = math.max(r.y1, s.y1),
g = math.min(r.y2, s.y2),
h = math.max(r.y2, s.y2),
result = [];
// X = intersection, 0-7 = possible difference areas
// h +-+-+-+
// . |5|6|7|
// g +-+-+-+
// . |3|X|4|
// f +-+-+-+
// . |0|1|2|
// e +-+-+-+
// . a b c d
// we'll always have rectangles 1, 3, 4 and 6
result[0] = Box2D(b, e, c, f);
result[1] = Box2D(a, f, b, g);
result[2] = Box2D(c, f, d, g);
result[3] = Box2D(b, g, c, h);
// decide which corners
if ( r.x1 == a && r.y1 == e || s.x1 == a && s.y1 == e )
{ // corners 0 and 7
result[4] = Box2D(a, e, b, f);
result[5] = Box2D(c, g, d, h);
}
else
{ // corners 2 and 5
result[4] = Box2D(c, e, d, f);
result[5] = Box2D(a, g, b, h);
}
return $.grep(result, function(box) {
return box.height() > 0 && box.width() > 0;
})[0];
}
function supportsSVG() {
return doc.implementation.hasFeature(
"http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1");
}
function supportsCanvas() {
return !!doc.createElement("canvas").getContext;
}
var requestFrameFn =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
setTimeout(callback, ANIMATION_STEP);
};
dataviz.requestFrame = function(callback, delay) {
return requestFrameFn(callback, delay);
};
function inArray(value, array) {
return indexOf(value, array) != -1;
}
function last(array) {
return array[array.length - 1];
}
function append(first, second) {
first.push.apply(first, second);
}
function ceil(value, step) {
return round(math.ceil(value / step) * step, DEFAULT_PRECISION);
}
function floor(value, step) {
return round(math.floor(value / step) * step, DEFAULT_PRECISION);
}
function round(value, precision) {
var power = math.pow(10, precision || 0);
return math.round(value * power) / power;
}
function log(y, x) {
return math.log(y) / math.log(x);
}
function remainderClose(value, divisor, ratio) {
var remainder = round(math.abs(value % divisor), DEFAULT_PRECISION),
threshold = divisor * (1 - ratio);
return remainder === 0 || remainder > threshold;
}
function interpolateValue(start, end, progress) {
return round(start + (end - start) * progress, COORD_PRECISION);
}
function defined(value) {
return typeof value !== UNDEFINED;
}
function valueOrDefault(value, defaultValue) {
return defined(value) ? value : defaultValue;
}
function numericComparer(a, b) {
return a - b;
}
function updateArray(arr, prop, value) {
var i,
length = arr.length;
for(i = 0; i < length; i++) {
arr[i][prop] = value;
}
}
function autoFormat(format, value) {
if (format.match(FORMAT_REGEX)) {
return kendo.format.apply(this, arguments);
}
return kendo.toString(value, format);
}
function getElement(modelId) {
return doc.getElementById(modelId);
}
function detached(element) {
var parent = element.parentNode;
while(parent && parent.parentNode) {
parent = parent.parentNode;
}
return parent !== doc;
}
function clockwise(v1, v2) {
// True if v2 is clockwise of v1
// assuming angles grow in clock-wise direction
// (as in the pie and radar charts)
return -v1.x * v2.y + v1.y * v2.x < 0;
}
function dateComparer(a, b) {
if (a && b) {
return a.getTime() - b.getTime();
}
return 0;
}
var CurveProcessor = function(closed){
this.closed = closed;
};
CurveProcessor.prototype = CurveProcessor.fn = {
WEIGHT: 0.333,
EXTREMUM_ALLOWED_DEVIATION: 0.01,
process: function(dataPoints) {
var that = this,
closed = that.closed,
points = dataPoints.slice(0),
length = points.length,
curve = [],
p0,p1,p2,
controlPoints,
initialControlPoint,
lastControlPoint,
tangent;
if (length > 2) {
that.removeDuplicates(0, points);
length = points.length;
}
if (length < 2 || (length == 2 && points[0].equals(points[1]))) {
return curve;
}
p0 = points[0]; p1 = points[1]; p2 = points[2];
curve.push(p0);
while (p0.equals(points[length - 1])) {
closed = true;
points.pop();
length--;
}
if (length == 2) {
tangent = that.tangent(p0,p1, X,Y);
curve.push(that.firstControlPoint(tangent, p0, p1, X, Y),
that.secondControlPoint(tangent, p0, p1, X, Y),
p1);
return curve;
}
if (closed) {
p0 = points[length - 1]; p1 = points[0]; p2 = points[1];
controlPoints = that.controlPoints(p0, p1, p2);
initialControlPoint = controlPoints[1];
lastControlPoint = controlPoints[0];
} else {
tangent = that.tangent(p0, p1, X,Y);
initialControlPoint = that.firstControlPoint(tangent, p0, p1, X, Y);
}
curve.push(initialControlPoint);
for (var idx = 0; idx <= length - 3; idx++) {
that.removeDuplicates(idx, points);
length = points.length;
if (idx + 3 <= length) {
p0 = points[idx]; p1 = points[idx + 1]; p2 = points[idx + 2];
controlPoints = that.controlPoints(p0,p1,p2);
curve.push(controlPoints[0], p1, controlPoints[1]);
}
}
if (closed) {
p0 = points[length - 2]; p1 = points[length - 1]; p2 = points[0];
controlPoints = that.controlPoints(p0, p1, p2);
curve.push(controlPoints[0], p1, controlPoints[1], lastControlPoint, p2);
} else {
tangent = that.tangent(p1, p2, X, Y);
curve.push(that.secondControlPoint(tangent, p1, p2, X, Y), p2);
}
return curve;
},
removeDuplicates: function(idx, points) {
while (points[idx].equals(points[idx + 1]) || points[idx + 1].equals(points[idx + 2])) {
points.splice(idx + 1, 1);
}
},
invertAxis: function(p0,p1,p2){
var that = this,
fn, y2,
invertAxis = false;
if(p0.x === p1.x){
invertAxis = true;
} else if (p1.x === p2.x) {
if ((p1.y < p2.y && p0.y <= p1.y) || (p2.y < p1.y && p1.y <= p0.y)) {
invertAxis = true;
}
} else {
fn = that.lineFunction(p0,p1);
y2 = that.calculateFunction(fn, p2.x);
if (!(p0.y <= p1.y && p2.y <= y2) &&
!(p1.y <= p0.y && p2.y >= y2)) {
invertAxis = true;
}
}
return invertAxis;
},
isLine: function(p0,p1,p2) {
var that = this,
fn = that.lineFunction(p0,p1),
y2 = that.calculateFunction(fn, p2.x);
return (p0.x == p1.x && p1.x == p2.x) || round(y2,1) === round(p2.y,1);
},
lineFunction: function(p1, p2) {
var a = (p2.y - p1.y) / (p2.x - p1.x),
b = p1.y - a * p1.x;
return [b,a];
},
controlPoints: function(p0,p1,p2) {
var that = this,
xField = X,
yField = Y,
restrict = false,
switchOrientation = false,
tangent,
monotonic,
firstControlPoint,
secondControlPoint,
allowedDeviation = that.EXTREMUM_ALLOWED_DEVIATION;
if (that.isLine(p0,p1,p2)) {
tangent = that.tangent(p0,p1, X,Y);
} else {
monotonic = {
x: that.isMonotonicByField(p0,p1,p2,X),
y: that.isMonotonicByField(p0,p1,p2,Y)
};
if (monotonic.x && monotonic.y) {
tangent = that.tangent(p0,p2, X, Y);
restrict = true;
} else {
if (that.invertAxis(p0,p1,p2)) {
xField = Y;
yField = X;
}
if (monotonic[xField]) {
tangent = 0;
} else {
var sign;
if ((p2[yField] < p0[yField] && p0[yField] <= p1[yField]) ||
(p0[yField] < p2[yField] && p1[yField] <= p0[yField])) {
sign = that.sign((p2[yField] - p0[yField]) * (p1[xField] - p0[xField]));
} else {
sign = -that.sign((p2[xField] - p0[xField]) * (p1[yField] - p0[yField]));
}
tangent = allowedDeviation * sign;
switchOrientation = true;
}
}
}
secondControlPoint = that.secondControlPoint(tangent, p0, p1, xField, yField);
if (switchOrientation) {
var oldXField = xField;
xField = yField;
yField = oldXField;
}
firstControlPoint = that.firstControlPoint(tangent, p1, p2, xField, yField);
if (restrict) {
that.restrictControlPoint(p0, p1, secondControlPoint, tangent);
that.restrictControlPoint(p1, p2, firstControlPoint, tangent);
}
return [secondControlPoint, firstControlPoint];
},
sign: function(x){
return x <= 0 ? -1 : 1;
},
restrictControlPoint: function(p1,p2, cp, tangent) {
if (p1.y < p2.y) {
if (p2.y < cp.y) {
cp.x = p1.x + (p2.y - p1.y) / tangent;
cp.y = p2.y;
} else if (cp.y < p1.y) {
cp.x = p2.x - (p2.y - p1.y) / tangent;
cp.y = p1.y;
}
} else {
if (cp.y < p2.y) {
cp.x = p1.x - (p1.y - p2.y) / tangent;
cp.y = p2.y;
} else if (p1.y < cp.y) {
cp.x = p2.x + (p1.y - p2.y) / tangent;
cp.y = p1.y;
}
}
},
tangent: function(p0,p1, xField, yField) {
var tangent,
x = p1[xField] - p0[xField],
y = p1[yField] - p0[yField];
if (x === 0) {
tangent = 0;
} else {
tangent = y/x;
}
return tangent;
},
isMonotonicByField: function(p0,p1,p2,field) {
return (p2[field] > p1[field] && p1[field] > p0[field]) ||
(p2[field] < p1[field] && p1[field] < p0[field]);
},
firstControlPoint: function(tangent, p0,p3, xField, yField) {
var that = this,
t1 = p0[xField],
t2 = p3[xField],
distance = (t2 - t1) * that.WEIGHT;
return that.point(t1 + distance, p0[yField] + distance * tangent, xField, yField);
},
secondControlPoint: function(tangent, p0,p3, xField, yField) {
var that = this,
t1 = p0[xField],
t2 = p3[xField],
distance = (t2 - t1) * that.WEIGHT;
return that.point(t2 - distance, p3[yField] - distance * tangent, xField, yField);
},
point: function (xValue, yValue, xField, yField) {
var controlPoint = Point2D();
controlPoint[xField] = xValue;
controlPoint[yField] = yValue;
return controlPoint;
},
calculateFunction: function(fn,x) {
var result = 0,
length = fn.length;
for (var i = 0; i < length; i++) {
result += Math.pow(x,i) * fn[i];
}
return result;
}
};
function limitValue(value, min, max) {
return math.max(math.min(value, max), min);
}
function mwDelta(e) {
var origEvent = e.originalEvent,
delta = 0;
if (origEvent.wheelDelta) {
delta = -origEvent.wheelDelta / 120;
delta = delta > 0 ? math.ceil(delta) : math.floor(delta);
}
if (origEvent.detail) {
delta = round(origEvent.detail / 3);
}
return delta;
}
function decodeEntities(text) {
if (!text || !text.indexOf || text.indexOf("&") < 0) {
return text;
} else {
var element = decodeEntities._element;
element.innerHTML = text;
return element.textContent || element.innerText;
}
}
decodeEntities._element = document.createElement("span");
// Exports ================================================================
deepExtend(kendo.dataviz, {
init: function(element) {
kendo.init(element, kendo.dataviz.ui);
},
ui: {
roles: {},
themes: {},
views: [],
plugin: function(widget) {
kendo.ui.plugin(widget, dataviz.ui);
}
},
AXIS_LABEL_CLICK: AXIS_LABEL_CLICK,
COORD_PRECISION: COORD_PRECISION,
DEFAULT_PRECISION: DEFAULT_PRECISION,
DEFAULT_WIDTH: DEFAULT_WIDTH,
DEFAULT_HEIGHT: DEFAULT_HEIGHT,
DEFAULT_FONT: DEFAULT_FONT,
INITIAL_ANIMATION_DURATION: INITIAL_ANIMATION_DURATION,
NOTE_CLICK: NOTE_CLICK,
NOTE_HOVER: NOTE_HOVER,
CLIP: CLIP,
DASH_ARRAYS: {
dot: [1.5, 3.5],
dash: [4, 3.5],
longdash: [8, 3.5],
dashdot: [3.5, 3.5, 1.5, 3.5],
longdashdot: [8, 3.5, 1.5, 3.5],
longdashdotdot: [8, 3.5, 1.5, 3.5, 1.5, 3.5]
},
Axis: Axis,
AxisLabel: AxisLabel,
Box2D: Box2D,
BoxElement: BoxElement,
ChartElement: ChartElement,
Color: Color,
CurveProcessor: CurveProcessor,
ElementAnimation:ElementAnimation,
ExpandAnimation: ExpandAnimation,
ExportMixin: ExportMixin,
ArrowAnimation: ArrowAnimation,
BarAnimation: BarAnimation,
BarIndicatorAnimatin: BarIndicatorAnimatin,
FadeAnimation: FadeAnimation,
FadeAnimationDecorator: FadeAnimationDecorator,
FloatElement: FloatElement,
IDPool: IDPool,
LogarithmicAxis: LogarithmicAxis,
LRUCache: LRUCache,
Matrix: Matrix,
Note: Note,
NumericAxis: NumericAxis,
Point2D: Point2D,
PinElement: PinElement,
Ring: Ring,
Pin: Pin,
RootElement: RootElement,
RotationAnimation: RotationAnimation,
Sector: Sector,
ShapeElement: ShapeElement,
Text: Text,
TextMetrics: TextMetrics,
TextBox: TextBox,
Title: Title,
ViewBase: ViewBase,
ViewElement: ViewElement,
ViewFactory: ViewFactory,
animationDecorator: animationDecorator,
append: append,
autoFormat: autoFormat,
autoMajorUnit: autoMajorUnit,
boxDiff: boxDiff,
defined: defined,
dateComparer: dateComparer,
decodeEntities: decodeEntities,
getElement: getElement,
getSpacing: getSpacing,
inArray: inArray,
interpolateValue: interpolateValue,
last: last,
limitValue: limitValue,
measureText: measureText,
mwDelta: mwDelta,
rotatePoint: rotatePoint,
round: round,
ceil: ceil,
floor: floor,
supportsCanvas: supportsCanvas,
supportsSVG: supportsSVG,
renderTemplate: renderTemplate,
uniqueId: uniqueId,
valueOrDefault: valueOrDefault
});
})(window.kendo.jQuery);
(function () {
// Imports ================================================================
var kendo = window.kendo,
ui = kendo.dataviz.ui,
deepExtend = kendo.deepExtend;
// Constants ==============================================================
var BAR_GAP = 1.5,
BAR_SPACING = 0.4,
BLACK = "#000",
SANS = "Arial,Helvetica,sans-serif",
SANS11 = "11px " + SANS,
SANS12 = "12px " + SANS,
SANS16 = "16px " + SANS,
WHITE = "#fff";
var chartBaseTheme = {
title: {
font: SANS16
},
legend: {
labels: {
font: SANS12
}
},
seriesDefaults: {
visible: true,
labels: {
font: SANS11
},
donut: {
margin: 1
},
line: {
width: 2
},
vericalLine: {
width: 2
},
scatterLine: {
width: 1
},
area: {
opacity: 0.4,
markers: {
visible: false,
size: 6
},
highlight: {
markers: {
border: {
color: "#fff",
opacity: 1,
width: 1
}
}
},
line: {
opacity: 1,
width: 0
}
},
verticalArea: {
opacity: 0.4,
markers: {
visible: false,
size: 6
},
line: {
opacity: 1,
width: 0
}
},
radarLine: {
width: 2,
markers: {
visible: false
}
},
radarArea: {
opacity: 0.5,
markers: {
visible: false,
size: 6
},
line: {
opacity: 1,
width: 0
}
},
candlestick: {
line: {
width: 1,
color: BLACK
},
border: {
width: 1,
_brightness: 0.8
},
gap: 1,
spacing: 0.3,
downColor: WHITE,
highlight: {
line: {
width: 2
},
border: {
width: 2,
opacity: 1
}
}
},
ohlc: {
line: {
width: 1
},
gap: 1,
spacing: 0.3,
highlight: {
line: {
width: 3,
opacity: 1
}
}
},
bubble: {
opacity: 0.6,
border: {
width: 0
},
labels: {
background: "transparent"
}
},
bar: {
gap: BAR_GAP,
spacing: BAR_SPACING
},
column: {
gap: BAR_GAP,
spacing: BAR_SPACING
},
rangeColumn: {
gap: BAR_GAP,
spacing: BAR_SPACING
},
rangeBar: {
gap: BAR_GAP,
spacing: BAR_SPACING
},
waterfall: {
gap: 0.5,
spacing: BAR_SPACING,
line: {
width: 1,
color: BLACK
}
},
horizontalWaterfall: {
gap: 0.5,
spacing: BAR_SPACING,
line: {
width: 1,
color: BLACK
}
},
bullet: {
gap: BAR_GAP,
spacing: BAR_SPACING,
target: {
color: "#ff0000"
}
},
verticalBullet: {
gap: BAR_GAP,
spacing: BAR_SPACING,
target: {
color: "#ff0000"
}
},
boxPlot: {
outliersField: "",
meanField: "",
whiskers: {
width: 1,
color: BLACK
},
mean: {
width: 1,
color: BLACK
},
median: {
width: 1,
color: BLACK
},
border: {
width: 1,
_brightness: 0.8
},
gap: 1,
spacing: 0.3,
downColor: WHITE,
highlight: {
whiskers: {
width: 2
},
mean: {
width: 2
},
median: {
width: 2
},
border: {
width: 2,
opacity: 1
}
}
},
funnel: {
labels: {
color:"",
background: ""
}
},
notes: {
icon: {
size: 7,
border: {
width: 1
}
},
label: {
padding: 3,
font: SANS12
},
line: {
length: 10,
width: 1
},
visible: true
}
},
categoryAxis: {
majorGridLines: {
visible: true
}
},
axisDefaults: {
labels: {
font: SANS12
},
title: {
font: SANS16,
margin: 5
},
crosshair: {
tooltip: {
font: SANS12
}
},
notes: {
icon: {
size: 7,
border: {
width: 1
}
},
label: {
padding: 3,
font: SANS12
},
line: {
length: 10,
width: 1
},
visible: true
}
},
tooltip: {
font: SANS12
},
navigator: {
pane: {
height: 90,
margin: {
top: 10
}
}
}
};
var gaugeBaseTheme = {
scale: {
labels: {
font: SANS12
}
}
};
var diagramBaseTheme = {
shapeDefaults: {
hover: {
opacity: 0.2
},
stroke: {
width: 0
}
},
editable: {
resize: {
handles: {
width: 7,
height: 7
}
},
rotate: {
thumb: {
width: 14
}
},
handles: {
type: "rectangle"
}
},
selectable: {
stroke: {
width: 1,
dashType: "dot"
}
},
connectionDefaults: {
stroke: {
width: 2
},
selection: {
handles: {
width: 8,
height: 8
}
}
}
};
var themes = ui.themes,
registerTheme = ui.registerTheme = function(themeName, options) {
var result = {};
// Apply base theme
result.chart = deepExtend({}, chartBaseTheme, options.chart);
result.gauge = deepExtend({}, gaugeBaseTheme, options.gauge);
result.diagram = deepExtend({}, diagramBaseTheme, options.diagram);
result.treeMap = deepExtend({}, options.treeMap);
// Copy the line/area chart settings for their vertical counterparts
var defaults = result.chart.seriesDefaults;
defaults.verticalLine = deepExtend({}, defaults.line);
defaults.verticalArea = deepExtend({}, defaults.area);
defaults.polarArea = deepExtend({}, defaults.radarArea);
defaults.polarLine = deepExtend({}, defaults.radarLine);
themes[themeName] = result;
};
registerTheme("black", {
chart: {
title: {
color: WHITE
},
legend: {
labels: {
color: WHITE
},
inactiveItems: {
labels: {
color: "#919191"
},
markers: {
color: "#919191"
}
}
},
seriesDefaults: {
labels: {
color: WHITE
},
errorBars: {
color: WHITE
},
notes: {
icon: {
background: "#3b3b3b",
border: {
color: "#8e8e8e"
}
},
label: {
color: WHITE
},
line: {
color: "#8e8e8e"
}
},
pie: {
overlay: {
gradient: "sharpBevel"
}
},
donut: {
overlay: {
gradient: "sharpGlass"
}
},
line: {
markers: {
background: "#3d3d3d"
}
},
scatter: {
markers: {
background: "#3d3d3d"
}
},
scatterLine: {
markers: {
background: "#3d3d3d"
}
},
waterfall: {
line: {
color: "#8e8e8e"
}
},
horizontalWaterfall: {
line: {
color: "#8e8e8e"
}
},
candlestick: {
downColor: "#555",
line: {
color: WHITE
},
border: {
_brightness: 1.5,
opacity: 1
},
highlight: {
border: {
color: WHITE,
opacity: 0.2
}
}
},
ohlc: {
line: {
color: WHITE
}
}
},
chartArea: {
background: "#3d3d3d"
},
seriesColors: ["#0081da", "#3aafff", "#99c900", "#ffeb3d", "#b20753", "#ff4195"],
axisDefaults: {
line: {
color: "#8e8e8e"
},
labels: {
color: WHITE
},
majorGridLines: {
color: "#545454"
},
minorGridLines: {
color: "#454545"
},
title: {
color: WHITE
},
crosshair: {
color: "#8e8e8e"
},
notes: {
icon: {
background: "#3b3b3b",
border: {
color: "#8e8e8e"
}
},
label: {
color: WHITE
},
line: {
color: "#8e8e8e"
}
}
}
},
gauge: {
pointer: {
color: "#0070e4"
},
scale: {
rangePlaceholderColor: "#1d1d1d",
labels: {
color: WHITE
},
minorTicks: {
color: WHITE
},
majorTicks: {
color: WHITE
},
line: {
color: WHITE
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#0066cc"
},
connectorDefaults: {
fill: {
color: WHITE
},
stroke: {
color: "#384049"
},
hover: {
fill: {
color: "#3d3d3d"
},
stroke: {
color: "#efefef"
}
}
},
content: {
color: WHITE
}
},
editable: {
resize: {
handles: {
fill: {
color: "#3d3d3d"
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: WHITE
}
}
}
},
rotate: {
thumb: {
stroke: {
color: WHITE
},
fill: {
color: WHITE
}
}
}
},
selectable: {
stroke: {
color: WHITE
}
},
connectionDefaults: {
stroke: {
color: WHITE
},
content: {
color: WHITE
},
selection: {
handles: {
fill: {
color: "#3d3d3d"
},
stroke: {
color: "#efefef"
}
}
}
}
},
treeMap: {
colors: [
["#0081da", "#314b5c"],
["#3aafff", "#3c5464"],
["#99c900", "#4f5931"],
["#ffeb3d", "#64603d"],
["#b20753", "#543241"],
["#ff4195", "#643e4f"]]
}
});
registerTheme("blueopal", {
chart: {
title: {
color: "#293135"
},
legend: {
labels: {
color: "#293135"
},
inactiveItems: {
labels: {
color: "#27A5BA"
},
markers: {
color: "#27A5BA"
}
}
},
seriesDefaults: {
labels: {
color: BLACK,
background: WHITE,
opacity: 0.5
},
errorBars: {
color: "#293135"
},
candlestick: {
downColor: "#c4d0d5",
line: {
color: "#9aabb2"
}
},
waterfall: {
line: {
color: "#9aabb2"
}
},
horizontalWaterfall: {
line: {
color: "#9aabb2"
}
},
notes: {
icon: {
background: "transparent",
border: {
color: "#9aabb2"
}
},
label: {
color: "#293135"
},
line: {
color: "#9aabb2"
}
}
},
seriesColors: ["#0069a5", "#0098ee", "#7bd2f6", "#ffb800", "#ff8517", "#e34a00"],
axisDefaults: {
line: {
color: "#9aabb2"
},
labels: {
color: "#293135"
},
majorGridLines: {
color: "#c4d0d5"
},
minorGridLines: {
color: "#edf1f2"
},
title: {
color: "#293135"
},
crosshair: {
color: "#9aabb2"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#9aabb2"
}
},
label: {
color: "#293135"
},
line: {
color: "#9aabb2"
}
}
}
},
gauge: {
pointer: {
color: "#005c83"
},
scale: {
rangePlaceholderColor: "#daecf4",
labels: {
color: "#293135"
},
minorTicks: {
color: "#293135"
},
majorTicks: {
color: "#293135"
},
line: {
color: "#293135"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#7ec6e3"
},
connectorDefaults: {
fill: {
color: "#003f59"
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: "#003f59"
}
}
},
content: {
color: "#293135"
}
},
editable: {
resize: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#003f59"
},
hover: {
fill: {
color: "#003f59"
},
stroke: {
color: "#003f59"
}
}
}
},
rotate: {
thumb: {
stroke: {
color: "#003f59"
},
fill: {
color: "#003f59"
}
}
}
},
selectable: {
stroke: {
color: "#003f59"
}
},
connectionDefaults: {
stroke: {
color: "#003f59"
},
content: {
color: "#293135"
},
selection: {
handles: {
fill: {
color: "#3d3d3d"
},
stroke: {
color: "#efefef"
}
}
}
}
},
treeMap: {
colors: [
["#0069a5", "#bad7e7"],
["#0098ee", "#b9e0f5"],
["#7bd2f6", "#ceeaf6"],
["#ffb800", "#e6e3c4"],
["#ff8517", "#e4d8c8"],
["#e34a00", "#ddccc2"]
]
}
});
registerTheme("highcontrast", {
chart: {
title: {
color: "#ffffff"
},
legend: {
labels: {
color: "#ffffff"
},
inactiveItems: {
labels: {
color: "#66465B"
},
markers: {
color: "#66465B"
}
}
},
seriesDefaults: {
labels: {
color: "#ffffff"
},
errorBars: {
color: "#ffffff"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#ffffff"
}
},
label: {
color: "#ffffff"
},
line: {
color: "#ffffff"
}
},
pie: {
overlay: {
gradient: "sharpGlass"
}
},
donut: {
overlay: {
gradient: "sharpGlass"
}
},
line: {
markers: {
background: "#2c232b"
}
},
scatter: {
markers: {
background: "#2c232b"
}
},
scatterLine: {
markers: {
background: "#2c232b"
}
},
area: {
opacity: 0.5
},
waterfall: {
line: {
color: "#ffffff"
}
},
horizontalWaterfall: {
line: {
color: "#ffffff"
}
},
candlestick: {
downColor: "#664e62",
line: {
color: "#ffffff"
},
border: {
_brightness: 1.5,
opacity: 1
},
highlight: {
border: {
color: "#ffffff",
opacity: 1
}
}
},
ohlc: {
line: {
color: "#ffffff"
}
}
},
chartArea: {
background: "#2c232b"
},
seriesColors: ["#a7008f", "#ffb800", "#3aafff", "#99c900", "#b20753", "#ff4195"],
axisDefaults: {
line: {
color: "#ffffff"
},
labels: {
color: "#ffffff"
},
majorGridLines: {
color: "#664e62"
},
minorGridLines: {
color: "#4f394b"
},
title: {
color: "#ffffff"
},
crosshair: {
color: "#ffffff"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#ffffff"
}
},
label: {
color: "#ffffff"
},
line: {
color: "#ffffff"
}
}
}
},
gauge: {
pointer: {
color: "#a7008f"
},
scale: {
rangePlaceholderColor: "#2c232b",
labels: {
color: "#ffffff"
},
minorTicks: {
color: "#2c232b"
},
majorTicks: {
color: "#664e62"
},
line: {
color: "#ffffff"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#a7018f"
},
connectorDefaults: {
fill: {
color: WHITE
},
stroke: {
color: "#2c232b"
},
hover: {
fill: {
color: "#2c232b"
},
stroke: {
color: WHITE
}
}
},
content: {
color: WHITE
}
},
editable: {
resize: {
handles: {
fill: {
color: "#2c232b"
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: WHITE
}
}
}
},
rotate: {
thumb: {
stroke: {
color: WHITE
},
fill: {
color: WHITE
}
}
}
},
selectable: {
stroke: {
color: WHITE
}
},
connectionDefaults: {
stroke: {
color: WHITE
},
content: {
color: WHITE
},
selection: {
handles: {
fill: {
color: "#2c232b"
},
stroke: {
color: WHITE
}
}
}
}
},
treeMap: {
colors: [
["#a7008f", "#451c3f"],
["#ffb800", "#564122"],
["#3aafff", "#2f3f55"],
["#99c900", "#424422"],
["#b20753", "#471d33"],
["#ff4195", "#562940"]
]
}
});
registerTheme("default", {
chart: {
title: {
color: "#8e8e8e"
},
legend: {
labels: {
color: "#232323"
},
inactiveItems: {
labels: {
color: "#919191"
},
markers: {
color: "#919191"
}
}
},
seriesDefaults: {
labels: {
color: BLACK,
background: WHITE,
opacity: 0.5
},
errorBars: {
color: "#232323"
},
candlestick: {
downColor: "#dedede",
line: {
color: "#8d8d8d"
}
},
waterfall: {
line: {
color: "#8e8e8e"
}
},
horizontalWaterfall: {
line: {
color: "#8e8e8e"
}
},
notes: {
icon: {
background: "transparent",
border: {
color: "#8e8e8e"
}
},
label: {
color: "#232323"
},
line: {
color: "#8e8e8e"
}
}
},
seriesColors: ["#ff6800", "#a0a700", "#ff8d00", "#678900", "#ffb53c", "#396000"],
axisDefaults: {
line: {
color: "#8e8e8e"
},
labels: {
color: "#232323"
},
minorGridLines: {
color: "#f0f0f0"
},
majorGridLines: {
color: "#dfdfdf"
},
title: {
color: "#232323"
},
crosshair: {
color: "#8e8e8e"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#8e8e8e"
}
},
label: {
color: "#232323"
},
line: {
color: "#8e8e8e"
}
}
}
},
gauge: {
pointer: {
color: "#ea7001"
},
scale: {
rangePlaceholderColor: "#dedede",
labels: {
color: "#2e2e2e"
},
minorTicks: {
color: "#2e2e2e"
},
majorTicks: {
color: "#2e2e2e"
},
line: {
color: "#2e2e2e"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#e15613"
},
connectorDefaults: {
fill: {
color: "#282828"
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: "#282828"
}
}
},
content: {
color: "#2e2e2e"
}
},
editable: {
resize: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#282828"
},
hover: {
fill: {
color: "#282828"
},
stroke: {
color: "#282828"
}
}
}
},
rotate: {
thumb: {
stroke: {
color: "#282828"
},
fill: {
color: "#282828"
}
}
}
},
selectable: {
stroke: {
color: "#a7018f"
}
},
connectionDefaults: {
stroke: {
color: "#282828"
},
content: {
color: "#2e2e2e"
},
selection: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#282828"
}
}
}
}
},
treeMap: {
colors: [
["#ff6800", "#edcfba"],
["#a0a700", "#dadcba"],
["#ff8d00", "#edd7ba"],
["#678900", "#cfd6ba"],
["#ffb53c", "#eddfc6"],
["#396000", "#c6ceba"]
]
}
});
registerTheme("silver", {
chart: {
title: {
color: "#4e5968"
},
legend: {
labels: {
color: "#4e5968"
},
inactiveItems: {
labels: {
color: "#B1BCC8"
},
markers: {
color: "#B1BCC8"
}
}
},
seriesDefaults: {
labels: {
color: "#293135",
background: "#eaeaec",
opacity: 0.5
},
errorBars: {
color: "#4e5968"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#4e5968"
}
},
label: {
color: "#4e5968"
},
line: {
color: "#4e5968"
}
},
line: {
markers: {
background: "#eaeaec"
}
},
scatter: {
markers: {
background: "#eaeaec"
}
},
scatterLine: {
markers: {
background: "#eaeaec"
}
},
pie: {
connectors: {
color: "#A6B1C0"
}
},
donut: {
connectors: {
color: "#A6B1C0"
}
},
waterfall: {
line: {
color: "#a6b1c0"
}
},
horizontalWaterfall: {
line: {
color: "#a6b1c0"
}
},
candlestick: {
downColor: "#a6afbe"
}
},
chartArea: {
background: "#eaeaec"
},
seriesColors: ["#007bc3", "#76b800", "#ffae00", "#ef4c00", "#a419b7", "#430B62"],
axisDefaults: {
line: {
color: "#a6b1c0"
},
labels: {
color: "#4e5968"
},
majorGridLines: {
color: "#dcdcdf"
},
minorGridLines: {
color: "#eeeeef"
},
title: {
color: "#4e5968"
},
crosshair: {
color: "#a6b1c0"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#4e5968"
}
},
label: {
color: "#4e5968"
},
line: {
color: "#4e5968"
}
}
}
},
gauge: {
pointer: {
color: "#0879c0"
},
scale: {
rangePlaceholderColor: "#f3f3f4",
labels: {
color: "#515967"
},
minorTicks: {
color: "#515967"
},
majorTicks: {
color: "#515967"
},
line: {
color: "#515967"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#1c82c2"
},
connectorDefaults: {
fill: {
color: "#515967"
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: "#282828"
}
}
},
content: {
color: "#515967"
}
},
editable: {
resize: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#515967"
},
hover: {
fill: {
color: "#515967"
},
stroke: {
color: "#515967"
}
}
}
},
rotate: {
thumb: {
stroke: {
color: "#515967"
},
fill: {
color: "#515967"
}
}
}
},
selectable: {
stroke: {
color: "#515967"
}
},
connectionDefaults: {
stroke: {
color: "#515967"
},
content: {
color: "#515967"
},
selection: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#515967"
}
}
}
}
},
treeMap: {
colors: [
["#007bc3", "#c2dbea"],
["#76b800", "#dae7c3"],
["#ffae00", "#f5e5c3"],
["#ef4c00", "#f2d2c3"],
["#a419b7", "#e3c7e8"],
["#430b62", "#d0c5d7"]
]
}
});
registerTheme("metro", {
chart: {
title: {
color: "#777777"
},
legend: {
labels: {
color: "#777777"
},
inactiveItems: {
labels: {
color: "#CBCBCB"
},
markers: {
color: "#CBCBCB"
}
}
},
seriesDefaults: {
labels: {
color: BLACK
},
errorBars: {
color: "#777777"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#777777"
}
},
label: {
color: "#777777"
},
line: {
color: "#777777"
}
},
candlestick: {
downColor: "#c7c7c7",
line: {
color: "#787878"
}
},
waterfall: {
line: {
color: "#c7c7c7"
}
},
horizontalWaterfall: {
line: {
color: "#c7c7c7"
}
},
overlay: {
gradient: "none"
},
border: {
_brightness: 1
}
},
seriesColors: ["#8ebc00", "#309b46", "#25a0da", "#ff6900", "#e61e26", "#d8e404", "#16aba9", "#7e51a1", "#313131", "#ed1691"],
axisDefaults: {
line: {
color: "#c7c7c7"
},
labels: {
color: "#777777"
},
minorGridLines: {
color: "#c7c7c7"
},
majorGridLines: {
color: "#c7c7c7"
},
title: {
color: "#777777"
},
crosshair: {
color: "#c7c7c7"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#777777"
}
},
label: {
color: "#777777"
},
line: {
color: "#777777"
}
}
}
},
gauge: {
pointer: {
color: "#8ebc00"
},
scale: {
rangePlaceholderColor: "#e6e6e6",
labels: {
color: "#777"
},
minorTicks: {
color: "#777"
},
majorTicks: {
color: "#777"
},
line: {
color: "#777"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#8ebc00"
},
connectorDefaults: {
fill: {
color: BLACK
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: BLACK
}
}
},
content: {
color: "#777"
}
},
editable: {
resize: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#787878"
},
hover: {
fill: {
color: "#787878"
},
stroke: {
color: "#787878"
}
}
}
},
rotate: {
thumb: {
stroke: {
color: "#787878"
},
fill: {
color: "#787878"
}
}
}
},
selectable: {
stroke: {
color: "#515967"
}
},
connectionDefaults: {
stroke: {
color: "#787878"
},
content: {
color: "#777"
},
selection: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#787878"
}
}
}
}
},
treeMap: {
colors: [
["#8ebc00", "#e8f2cc"],
["#309b46", "#d6ebda"],
["#25a0da", "#d3ecf8"],
["#ff6900", "#ffe1cc"],
["#e61e26", "#fad2d4"],
["#d8e404", "#f7facd"],
["#16aba9", "#d0eeee"],
["#7e51a1", "#e5dcec"],
["#313131", "#d6d6d6"],
["#ed1691", "#fbd0e9"]
]
}
});
registerTheme("metroblack", {
chart: {
title: {
color: "#ffffff"
},
legend: {
labels: {
color: "#ffffff"
},
inactiveItems: {
labels: {
color: "#797979"
},
markers: {
color: "#797979"
}
}
},
seriesDefaults: {
border: {
_brightness: 1
},
labels: {
color: "#ffffff"
},
errorBars: {
color: "#ffffff"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#cecece"
}
},
label: {
color: "#ffffff"
},
line: {
color: "#cecece"
}
},
line: {
markers: {
background: "#0e0e0e"
}
},
bubble: {
opacity: 0.6
},
scatter: {
markers: {
background: "#0e0e0e"
}
},
scatterLine: {
markers: {
background: "#0e0e0e"
}
},
candlestick: {
downColor: "#828282",
line: {
color: "#ffffff"
}
},
waterfall: {
line: {
color: "#cecece"
}
},
horizontalWaterfall: {
line: {
color: "#cecece"
}
},
overlay: {
gradient: "none"
}
},
chartArea: {
background: "#0e0e0e"
},
seriesColors: ["#00aba9", "#309b46", "#8ebc00", "#ff6900", "#e61e26", "#d8e404", "#25a0da", "#7e51a1", "#313131", "#ed1691"],
axisDefaults: {
line: {
color: "#cecece"
},
labels: {
color: "#ffffff"
},
minorGridLines: {
color: "#2d2d2d"
},
majorGridLines: {
color: "#333333"
},
title: {
color: "#ffffff"
},
crosshair: {
color: "#cecece"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#cecece"
}
},
label: {
color: "#ffffff"
},
line: {
color: "#cecece"
}
}
}
},
gauge: {
pointer: {
color: "#00aba9"
},
scale: {
rangePlaceholderColor: "#2d2d2d",
labels: {
color: "#ffffff"
},
minorTicks: {
color: "#333333"
},
majorTicks: {
color: "#cecece"
},
line: {
color: "#cecece"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#00aba9"
},
connectorDefaults: {
fill: {
color: WHITE
},
stroke: {
color: "#0e0e0e"
},
hover: {
fill: {
color: "#0e0e0e"
},
stroke: {
color: WHITE
}
}
},
content: {
color: WHITE
}
},
editable: {
resize: {
handles: {
fill: {
color: "#0e0e0e"
},
stroke: {
color: "#787878"
},
hover: {
fill: {
color: "#787878"
},
stroke: {
color: "#787878"
}
}
}
},
rotate: {
thumb: {
stroke: {
color: WHITE
},
fill: {
color: WHITE
}
}
}
},
selectable: {
stroke: {
color: "#787878"
}
},
connectionDefaults: {
stroke: {
color: WHITE
},
content: {
color: WHITE
},
selection: {
handles: {
fill: {
color: "#0e0e0e"
},
stroke: {
color: WHITE
}
}
}
}
},
treeMap: {
colors: [
["#00aba9", "#0b2d2d"],
["#309b46", "#152a19"],
["#8ebc00", "#28310b"],
["#ff6900", "#3e200b"],
["#e61e26", "#391113"],
["#d8e404", "#36390c"],
["#25a0da", "#132b37"],
["#7e51a1", "#241b2b"],
["#313131", "#151515"],
["#ed1691", "#3b1028"]
]
}
});
registerTheme("moonlight", {
chart: {
title: {
color: "#ffffff"
},
legend: {
labels: {
color: "#ffffff"
},
inactiveItems: {
labels: {
color: "#A1A7AB"
},
markers: {
color: "#A1A7AB"
}
}
},
seriesDefaults: {
labels: {
color: "#ffffff"
},
errorBars: {
color: "#ffffff"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#8c909e"
}
},
label: {
color: "#ffffff"
},
line: {
color: "#8c909e"
}
},
pie: {
overlay: {
gradient: "sharpBevel"
}
},
donut: {
overlay: {
gradient: "sharpGlass"
}
},
line: {
markers: {
background: "#212a33"
}
},
bubble: {
opacity: 0.6
},
scatter: {
markers: {
background: "#212a33"
}
},
scatterLine: {
markers: {
background: "#212a33"
}
},
area: {
opacity: 0.3
},
candlestick: {
downColor: "#757d87",
line: {
color: "#ea9d06"
},
border: {
_brightness: 1.5,
opacity: 1
},
highlight: {
border: {
color: WHITE,
opacity: 0.2
}
}
},
waterfall: {
line: {
color: "#8c909e"
}
},
horizontalWaterfall: {
line: {
color: "#8c909e"
}
},
ohlc: {
line: {
color: "#ea9d06"
}
}
},
chartArea: {
background: "#212a33"
},
seriesColors: ["#ffca08", "#ff710f", "#ed2e24", "#ff9f03", "#e13c02", "#a00201"],
axisDefaults: {
line: {
color: "#8c909e"
},
minorTicks: {
color: "#8c909e"
},
majorTicks: {
color: "#8c909e"
},
labels: {
color: "#ffffff"
},
majorGridLines: {
color: "#3e424d"
},
minorGridLines: {
color: "#2f3640"
},
title: {
color: "#ffffff"
},
crosshair: {
color: "#8c909e"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#8c909e"
}
},
label: {
color: "#ffffff"
},
line: {
color: "#8c909e"
}
}
}
},
gauge: {
pointer: {
color: "#f4af03"
},
scale: {
rangePlaceholderColor: "#2f3640",
labels: {
color: WHITE
},
minorTicks: {
color: "#8c909e"
},
majorTicks: {
color: "#8c909e"
},
line: {
color: "#8c909e"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#f3ae03"
},
connectorDefaults: {
fill: {
color: WHITE
},
stroke: {
color: "#414550"
},
hover: {
fill: {
color: "#414550"
},
stroke: {
color: WHITE
}
}
},
content: {
color: WHITE
}
},
editable: {
resize: {
handles: {
fill: {
color: "#414550"
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: WHITE
}
}
}
},
rotate: {
thumb: {
stroke: {
color: WHITE
},
fill: {
color: WHITE
}
}
}
},
selectable: {
stroke: {
color: WHITE
}
},
connectionDefaults: {
stroke: {
color: WHITE
},
content: {
color: WHITE
},
selection: {
handles: {
fill: {
color: "#414550"
},
stroke: {
color: WHITE
}
}
}
}
},
treeMap: {
colors: [
["#ffca08", "#4e4b2b"],
["#ff710f", "#4e392d"],
["#ed2e24", "#4b2c31"],
["#ff9f03", "#4e422a"],
["#e13c02", "#482e2a"],
["#a00201", "#3b232a"]
]
}
});
registerTheme("uniform", {
chart: {
title: {
color: "#686868"
},
legend: {
labels: {
color: "#686868"
},
inactiveItems: {
labels: {
color: "#B6B6B6"
},
markers: {
color: "#B6B6B6"
}
}
},
seriesDefaults: {
labels: {
color: "#686868"
},
errorBars: {
color: "#686868"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#9e9e9e"
}
},
label: {
color: "#686868"
},
line: {
color: "#9e9e9e"
}
},
pie: {
overlay: {
gradient: "sharpBevel"
}
},
donut: {
overlay: {
gradient: "sharpGlass"
}
},
line: {
markers: {
background: "#ffffff"
}
},
bubble: {
opacity: 0.6
},
scatter: {
markers: {
background: "#ffffff"
}
},
scatterLine: {
markers: {
background: "#ffffff"
}
},
area: {
opacity: 0.3
},
candlestick: {
downColor: "#cccccc",
line: {
color: "#cccccc"
},
border: {
_brightness: 1.5,
opacity: 1
},
highlight: {
border: {
color: "#cccccc",
opacity: 0.2
}
}
},
waterfall: {
line: {
color: "#9e9e9e"
}
},
horizontalWaterfall: {
line: {
color: "#9e9e9e"
}
},
ohlc: {
line: {
color: "#cccccc"
}
}
},
chartArea: {
background: "#ffffff"
},
seriesColors: ["#527aa3", "#6f91b3", "#8ca7c2", "#a8bdd1", "#c5d3e0", "#e2e9f0"],
axisDefaults: {
line: {
color: "#9e9e9e"
},
minorTicks: {
color: "#aaaaaa"
},
majorTicks: {
color: "#888888"
},
labels: {
color: "#686868"
},
majorGridLines: {
color: "#dadada"
},
minorGridLines: {
color: "#e7e7e7"
},
title: {
color: "#686868"
},
crosshair: {
color: "#9e9e9e"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#9e9e9e"
}
},
label: {
color: "#686868"
},
line: {
color: "#9e9e9e"
}
}
}
},
gauge: {
pointer: {
color: "#527aa3"
},
scale: {
rangePlaceholderColor: "#e7e7e7",
labels: {
color: "#686868"
},
minorTicks: {
color: "#aaaaaa"
},
majorTicks: {
color: "#888888"
},
line: {
color: "#9e9e9e"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#d1d1d1"
},
connectorDefaults: {
fill: {
color: "#686868"
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: "#686868"
}
}
},
content: {
color: "#686868"
}
},
editable: {
resize: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#686868"
},
hover: {
fill: {
color: "#686868"
},
stroke: {
color: "#686868"
}
}
}
},
rotate: {
thumb: {
stroke: {
color: "#686868"
},
fill: {
color: "#686868"
}
}
}
},
selectable: {
stroke: {
color: "#686868"
}
},
connectionDefaults: {
stroke: {
color: "#686868"
},
content: {
color: "#686868"
},
selection: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#686868"
}
}
}
}
},
treeMap: {
colors: [
["#527aa3", "#d0d8e1"],
["#6f91b3", "#d6dde4"],
["#8ca7c2", "#dce1e7"],
["#a8bdd1", "#e2e6ea"],
["#c5d3e0", "#e7eaed"],
["#e2e9f0", "#edeff0"]
]
}
});
registerTheme("bootstrap", {
chart: {
title: {
color: "#333333"
},
legend: {
labels: {
color: "#333333"
},
inactiveItems: {
labels: {
color: "#999999"
},
markers: {
color: "#9A9A9A"
}
}
},
seriesDefaults: {
labels: {
color: "#333333"
},
overlay: {
gradient: "none"
},
errorBars: {
color: "#343434"
},
notes: {
icon: {
background: "#000000",
border: {
color: "#000000"
}
},
label: {
color: "#333333"
},
line: {
color: "#000000"
}
},
pie: {
overlay: {
gradient: "none"
}
},
donut: {
overlay: {
gradient: "none"
}
},
line: {
markers: {
background: "#ffffff"
}
},
bubble: {
opacity: 0.6
},
scatter: {
markers: {
background: "#ffffff"
}
},
scatterLine: {
markers: {
background: "#ffffff"
}
},
area: {
opacity: 0.8
},
candlestick: {
downColor: "#d0d0d0",
line: {
color: "#333333"
},
border: {
_brightness: 1.5,
opacity: 1
},
highlight: {
border: {
color: "#b8b8b8",
opacity: 0.2
}
}
},
waterfall: {
line: {
color: "#cccccc"
}
},
horizontalWaterfall: {
line: {
color: "#cccccc"
}
},
ohlc: {
line: {
color: "#333333"
}
}
},
chartArea: {
background: "#ffffff"
},
seriesColors: ["#428bca", "#5bc0de", "#5cb85c", "#f2b661", "#e67d4a", "#da3b36"],
axisDefaults: {
line: {
color: "#cccccc"
},
minorTicks: {
color: "#ebebeb"
},
majorTicks: {
color: "#cccccc"
},
labels: {
color: "#333333"
},
majorGridLines: {
color: "#cccccc"
},
minorGridLines: {
color: "#ebebeb"
},
title: {
color: "#333333"
},
crosshair: {
color: "#000000"
},
notes: {
icon: {
background: "#000000",
border: {
color: "#000000"
}
},
label: {
color: "#ffffff"
},
line: {
color: "#000000"
}
}
}
},
gauge: {
pointer: {
color: "#428bca"
},
scale: {
rangePlaceholderColor: "#cccccc",
labels: {
color: "#333333"
},
minorTicks: {
color: "#ebebeb"
},
majorTicks: {
color: "#cccccc"
},
line: {
color: "#cccccc"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#428bca"
},
connectorDefaults: {
fill: {
color: "#333333"
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: "#333333"
}
}
},
content: {
color: "#333333"
}
},
editable: {
resize: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#333333"
},
hover: {
fill: {
color: "#333333"
},
stroke: {
color: "#333333"
}
}
}
},
rotate: {
thumb: {
stroke: {
color: "#333333"
},
fill: {
color: "#333333"
}
}
}
},
selectable: {
stroke: {
color: "#333333"
}
},
connectionDefaults: {
stroke: {
color: "#c4c4c4"
},
content: {
color: "#333333"
},
selection: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#333333"
}
},
stroke: {
color: "#333333"
}
}
}
},
treeMap: {
colors: [
["#428bca", "#d1e0ec"],
["#5bc0de", "#d6eaf0"],
["#5cb85c", "#d6e9d6"],
["#5cb85c", "#f4e8d7"],
["#e67d4a", "#f2ddd3"],
["#da3b36", "#f0d0cf"]
]
}
});
registerTheme("flat", {
chart: {
title: {
color: "#4c5356"
},
legend: {
labels: {
color: "#4c5356"
},
inactiveItems: {
labels: {
color: "#CBCBCB"
},
markers: {
color: "#CBCBCB"
}
}
},
seriesDefaults: {
labels: {
color: "#4c5356"
},
errorBars: {
color: "#4c5356"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#cdcdcd"
}
},
label: {
color: "#4c5356"
},
line: {
color: "#cdcdcd"
}
},
candlestick: {
downColor: "#c7c7c7",
line: {
color: "#787878"
}
},
area: {
opacity: 0.9
},
waterfall: {
line: {
color: "#cdcdcd"
}
},
horizontalWaterfall: {
line: {
color: "#cdcdcd"
}
},
overlay: {
gradient: "none"
},
border: {
_brightness: 1
}
},
seriesColors: ["#10c4b2", "#ff7663", "#ffb74f", "#a2df53", "#1c9ec4", "#ff63a5", "#1cc47b"],
axisDefaults: {
line: {
color: "#cdcdcd"
},
labels: {
color: "#4c5356"
},
minorGridLines: {
color: "#cdcdcd"
},
majorGridLines: {
color: "#cdcdcd"
},
title: {
color: "#4c5356"
},
crosshair: {
color: "#cdcdcd"
},
notes: {
icon: {
background: "transparent",
border: {
color: "#cdcdcd"
}
},
label: {
color: "#4c5356"
},
line: {
color: "#cdcdcd"
}
}
}
},
gauge: {
pointer: {
color: "#10c4b2"
},
scale: {
rangePlaceholderColor: "#cdcdcd",
labels: {
color: "#4c5356"
},
minorTicks: {
color: "#4c5356"
},
majorTicks: {
color: "#4c5356"
},
line: {
color: "#4c5356"
}
}
},
diagram: {
shapeDefaults: {
fill: {
color: "#10c4b2"
},
connectorDefaults: {
fill: {
color: "#363940"
},
stroke: {
color: WHITE
},
hover: {
fill: {
color: WHITE
},
stroke: {
color: "#363940"
}
}
},
content: {
color: "#4c5356"
}
},
editable: {
resize: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#363940"
},
hover: {
fill: {
color: "#363940"
},
stroke: {
color: "#363940"
}
}
}
},
rotate: {
thumb: {
stroke: {
color: "#363940"
},
fill: {
color: "#363940"
}
}
}
},
selectable: {
stroke: {
color: "#363940"
}
},
connectionDefaults: {
stroke: {
color: "#cdcdcd"
},
content: {
color: "#4c5356"
},
selection: {
handles: {
fill: {
color: WHITE
},
stroke: {
color: "#363940"
}
},
stroke: {
color: "#363940"
}
}
}
},
treeMap: {
colors: [
["#10c4b2", "#cff3f0"],
["#ff7663", "#ffe4e0"],
["#ffb74f", "#fff1dc"],
["#a2df53", "#ecf9dd"],
["#1c9ec4", "#d2ecf3"],
["#ff63a5", "#ffe0ed"],
["#1cc47b", "#d2f3e5"]
]
}
});
})(window.kendo.jQuery);
(function () {
// Imports ================================================================
var $ = jQuery,
doc = document,
math = Math,
kendo = window.kendo,
Class = kendo.Class,
dataviz = kendo.dataviz,
Box2D = dataviz.Box2D,
ExpandAnimation = dataviz.ExpandAnimation,
Point2D = dataviz.Point2D,
ViewBase = dataviz.ViewBase,
ViewElement = dataviz.ViewElement,
deepExtend = kendo.deepExtend,
defined = dataviz.defined,
round = dataviz.round,
renderTemplate = dataviz.renderTemplate,
rotatePoint = dataviz.rotatePoint,
uniqueId = dataviz.uniqueId;
// Constants ==============================================================
var BUTT = "butt",
CLIP = dataviz.CLIP,
COORD_PRECISION = dataviz.COORD_PRECISION,
DASH_ARRAYS = dataviz.DASH_ARRAYS,
DEFAULT_WIDTH = dataviz.DEFAULT_WIDTH,
DEFAULT_HEIGHT = dataviz.DEFAULT_HEIGHT,
DEFAULT_FONT = dataviz.DEFAULT_FONT,
NONE = "none",
RADIAL = "radial",
SOLID = "solid",
SQUARE = "square",
SVG_NS = "http://www.w3.org/2000/svg",
TRANSPARENT = "transparent",
UNDEFINED = "undefined";
// View ===================================================================
var SVGView = ViewBase.extend({
init: function(options) {
var view = this;
ViewBase.fn.init.call(view, options);
view.decorators.push(
new SVGOverlayDecorator(view),
new SVGGradientDecorator(view)
);
if (dataviz.ui.Chart) {
view.decorators.push(
new dataviz.BarAnimationDecorator(view),
new dataviz.PieAnimationDecorator(view),
new dataviz.BubbleAnimationDecorator(view)
);
}
view.decorators.push(
new SVGClipAnimationDecorator(view),
new dataviz.FadeAnimationDecorator(view)
);
if (dataviz.Gauge) {
view.decorators.push(
new dataviz.RadialPointerAnimationDecorator(view),
new dataviz.ArrowPointerAnimationDecorator(view),
new dataviz.BarIndicatorAnimationDecorator(view)
);
}
view.defsId = uniqueId();
view.template = SVGView.template;
view.display = view.options.inline ? "inline" : "block";
if (!view.template) {
view.template = SVGView.template = renderTemplate(
"" +
"" +
"#= d.renderDefinitions() #" +
"#= d.renderContent() # "
);
}
},
options: {
width: DEFAULT_WIDTH,
height: DEFAULT_HEIGHT,
encodeText: false
},
renderTo: function(container) {
var view = this,
viewElement;
view.setupAnimations();
dataviz.renderSVG(container, view.render());
viewElement = container.firstElementChild;
view.alignToScreen(viewElement);
view.playAnimations();
view._viewElement = viewElement;
return viewElement;
},
renderDefinitions: function() {
var view = this,
id = view.defsId,
output = ViewBase.fn.renderDefinitions.call(view);
return "" + output + " ";
},
renderElement: function(element) {
var view = this,
container = doc.createElement("div"),
defsCurrent = doc.getElementById(view.defsId),
defsElement,
domElement;
dataviz.renderSVG(container,
"" +
"" +
view.renderDefinitions() +
element.render() +
" "
);
defsElement = container.firstElementChild.firstChild;
domElement = container.firstElementChild.lastChild;
if (defsCurrent && defsCurrent.textContent !== defsElement.textContent) {
defsCurrent.parentNode.replaceChild(defsElement, defsCurrent);
}
return domElement;
},
createGroup: function(options) {
return this.decorate(
new SVGGroup(options)
);
},
createClipPath: function(id, box) {
var view = this,
clipPath = view.definitions[id],
children = [view.createRect(box, {})];
if(!clipPath) {
clipPath = new SVGClipPath({id: id});
clipPath.children = children;
view.definitions[id] = clipPath;
} else {
clipPath.children = children;
clipPath.refresh();
}
return clipPath;
},
createText: function(content, options) {
return this.decorate(
new SVGText(content, deepExtend({ encode: this.options.encodeText }, options))
);
},
createTextBox: function(options) {
return this.decorate(
new SVGTextBox(options)
);
},
createRect: function(box, style) {
return this.decorate(
new SVGLine(box.points(), true, this.setDefaults(style))
);
},
createCubicCurve: function(points, options, areaPoints){
return this.decorate(
new SVGCubicCurve(points, options, areaPoints)
);
},
// TODO: Refactor to (p1, p2, options)
createLine: function(x1, y1, x2, y2, options) {
return this.decorate(
new SVGLine([new Point2D(x1, y1),
new Point2D(x2, y2)], false, this.setDefaults(options))
);
},
createMultiLine: function(elements, options){
return this.decorate(
new SVGMultiLine(elements, false, this.setDefaults(options))
);
},
createPolyline: function(points, closed, options) {
return this.decorate(
new SVGLine(points, closed, this.setDefaults(options))
);
},
createCircle: function(center, radius, options) {
return this.decorate(
new SVGCircle(center, radius, options)
);
},
createSector: function(sector, options) {
return this.decorate(
new SVGSector(sector, options)
);
},
createRing: function(ring, options) {
return this.decorate(
new SVGRing(ring, options)
);
},
createPin: function(pin, options) {
return this.decorate(
new SVGPin(pin, options)
);
},
createGradient: function(options) {
if (options.type === RADIAL) {
if (defined(options.ir)){
return new SVGDonutGradient(options);
} else {
return new SVGRadialGradient(options);
}
} else {
return new SVGLinearGradient(options);
}
},
alignToScreen: function(element) {
var ctm;
try {
ctm = element.getScreenCTM ? element.getScreenCTM() : null;
} catch (e) { }
if (ctm) {
var left = - ctm.e % 1,
top = - ctm.f % 1,
style = element.style;
if (left !== 0 || top !== 0) {
style.left = left + "px";
style.top = top + "px";
}
}
}
});
var SVGViewElement = ViewElement.extend({
renderClipPath: function () {
var element = this,
id = element.options.clipPathId,
clipPath = "";
if (id) {
clipPath = element.renderAttr("clip-path", "url(" + baseUrl() +"#" + id + ")");
}
return clipPath;
}
});
var SVGText = SVGViewElement.extend({
init: function(content, options) {
var text = this;
SVGViewElement.fn.init.call(text, options);
text.content = content;
text.template = SVGText.template;
if (!text.template) {
text.template = SVGText.template = renderTemplate(
"" +
"#= d.renderContent() # "
);
}
},
options: {
x: 0,
y: 0,
baseline: 0,
font: DEFAULT_FONT,
size: {
width: 0,
height: 0
},
fillOpacity: 1,
cursor: {}
},
refresh: function(domElement) {
var options = this.options;
$(domElement).attr({
"fill-opacity": options.fillOpacity
});
},
clone: function() {
var text = this;
return new SVGText(text.content, deepExtend({}, text.options));
},
renderContent: function() {
var content = this.content;
if (this.options.encode) {
content = dataviz.decodeEntities(content);
content = kendo.htmlEncode(content);
}
return content;
}
});
var SVGTextBox = SVGViewElement.extend({
init: function(options) {
var textbox = this;
ViewElement.fn.init.call(textbox, options);
textbox.template = SVGTextBox.template;
if (!textbox.template) {
textbox.template = SVGTextBox.template =
renderTemplate(
"#if (d.options.matrix) {#" +
"" +
"#= d.renderContent() # " +
"#} else {#" +
"#=d.renderContent() #" +
"#}#"
);
}
},
renderRotation: function() {
var matrix = this.options.matrix,
values = [matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f];
return "transform='matrix(" + values.join(",") + ")'";
}
});
var SVGPath = SVGViewElement.extend({
init: function(options) {
var path = this;
SVGViewElement.fn.init.call(path, options);
path.template = SVGPath.template;
if (!path.template) {
path.template = SVGPath.template = renderTemplate(
"" +
"#= d.renderContent() #"
);
}
}
});
var SVGClipPath = ViewElement.extend({
init: function(options) {
var clip = this;
ViewElement.fn.init.call(clip, options);
clip.template = SVGClipPath.template;
if (!clip.template) {
clip.template = SVGClipPath.template =
renderTemplate("" +
"#= d.renderContent() #");
}
},
refresh: function() {
var element = doc.getElementById(this.options.id);
if (element) {
$(element).children().attr("d", this.children[0].renderPoints());
}
}
});
var SVGGradient = ViewElement.extend({
init: function(options) {
var gradient = this;
ViewElement.fn.init.call(gradient, options);
},
options: {
id: ""
},
renderStops: function() {
var gradient = this,
stops = gradient.options.stops,
stopTemplate = gradient.stopTemplate,
i,
length = stops.length,
currentStop,
output = '';
for (i = 0; i < length; i++) {
currentStop = stops[i];
output += stopTemplate(currentStop);
}
return output;
}
});
var SVGLinearGradient = SVGGradient.extend({
init: function(options) {
var gradient = this;
SVGGradient.fn.init.call(gradient, options);
gradient.template = SVGLinearGradient.template;
gradient.stopTemplate = SVGLinearGradient.stopTemplate;
if (!gradient.template) {
gradient.template = SVGLinearGradient.template = renderTemplate(
" " +
"#= d.renderStops() #" +
" "
);
gradient.stopTemplate = SVGLinearGradient.stopTemplate = renderTemplate(
"" +
"#= d.renderStops() #" +
" "
);
gradient.stopTemplate = SVGRadialGradient.stopTemplate = renderTemplate(
"" +
"#= d.renderStops() #" +
" "
);
gradient.stopTemplate = SVGDonutGradient.stopTemplate = renderTemplate(
"" +
"{4:d} " +
"Open: {0:C} High: {1:C} Low: {2:C} Close: {3:C}
"
},
highlight: {
opacity: 1,
border: {
width: 1,
opacity: 1
},
line: {
width: 1,
opacity: 1
}
},
notes: {
visible: true,
label: {}
}
},
reflow: function(box) {
var point = this,
options = point.options,
chart = point.owner,
value = point.value,
valueAxis = chart.seriesValueAxis(options),
points = [], mid, ocSlot, lhSlot;
ocSlot = valueAxis.getSlot(value.open, value.close);
lhSlot = valueAxis.getSlot(value.low, value.high);
ocSlot.x1 = lhSlot.x1 = box.x1;
ocSlot.x2 = lhSlot.x2 = box.x2;
point.realBody = ocSlot;
mid = lhSlot.center().x;
points.push([ Point2D(mid, lhSlot.y1), Point2D(mid, ocSlot.y1) ]);
points.push([ Point2D(mid, ocSlot.y2), Point2D(mid, lhSlot.y2) ]);
point.lowHighLinePoints = points;
point.box = lhSlot.clone().wrap(ocSlot);
if (!point._rendered) {
point._rendered = true;
point.createNote();
}
point.reflowNote();
},
reflowNote: function() {
var point = this;
if (point.note) {
point.note.reflow(point.box);
}
},
getViewElements: function(view) {
var point = this,
options = point.options,
elements = [],
border = options.border.width > 0 ? {
stroke: point.getBorderColor(),
strokeWidth: options.border.width,
dashType: options.border.dashType,
strokeOpacity: valueOrDefault(options.border.opacity, options.opacity)
} : {},
rectStyle = deepExtend({
fill: options.color,
fillOpacity: options.opacity
}, border),
lineStyle = {
strokeOpacity: valueOrDefault(options.line.opacity, options.opacity),
strokeWidth: options.line.width,
stroke: options.line.color || options.color,
dashType: options.line.dashType,
strokeLineCap: "butt"
};
if (options.overlay) {
rectStyle.overlay = deepExtend({
rotation: 0
}, options.overlay);
}
elements.push(view.createRect(point.realBody, rectStyle));
elements.push(view.createPolyline(point.lowHighLinePoints[0], false, lineStyle));
elements.push(view.createPolyline(point.lowHighLinePoints[1], false, lineStyle));
elements.push(point.createOverlayRect(view, options));
append(elements,
ChartElement.fn.getViewElements.call(point, view)
);
return elements;
},
getBorderColor: function() {
var point = this,
options = point.options,
border = options.border,
borderColor = border.color;
if (!defined(borderColor)) {
borderColor =
new Color(options.color).brightness(border._brightness).toHex();
}
return borderColor;
},
createOverlayRect: function(view) {
var point = this;
return view.createRect(point.box, {
data: { modelId: point.modelId },
fill: "#fff",
id: point.id,
fillOpacity: 0
});
},
highlightOverlay: function(view, options) {
var point = this,
pointOptions = point.options,
highlight = pointOptions.highlight,
border = highlight.border,
borderColor = point.getBorderColor(),
line = highlight.line,
data = { data: { modelId: point.modelId } },
rectStyle = deepExtend({}, data, options, {
stroke: borderColor,
strokeOpacity: border.opacity,
strokeWidth: border.width
}),
lineStyle = deepExtend({}, data, {
stroke: line.color || borderColor,
strokeWidth: line.width,
strokeOpacity: line.opacity,
strokeLineCap: "butt"
}),
group = view.createGroup();
group.children.push(view.createRect(point.realBody, rectStyle));
group.children.push(view.createPolyline(point.lowHighLinePoints[0], false, lineStyle));
group.children.push(view.createPolyline(point.lowHighLinePoints[1], false, lineStyle));
return group;
},
tooltipAnchor: function() {
var point = this,
box = point.box,
clipBox = point.owner.pane.clipBox() || box;
return new Point2D(box.x2 + TOOLTIP_OFFSET, math.max(box.y1, clipBox.y1) + TOOLTIP_OFFSET);
},
formatValue: function(format) {
var point = this;
return point.owner.formatPointValue(point, format);
}
});
deepExtend(Candlestick.fn, PointEventsMixin);
deepExtend(Candlestick.fn, NoteMixin);
var CandlestickChart = CategoricalChart.extend({
options: {},
reflowCategories: function(categorySlots) {
var chart = this,
children = chart.children,
childrenLength = children.length,
i;
for (i = 0; i < childrenLength; i++) {
children[i].reflow(categorySlots[i]);
}
},
addValue: function(data, fields) {
var chart = this;
var categoryIx = fields.categoryIx;
var category = fields.category;
var series = fields.series;
var seriesIx = fields.seriesIx;
var options = chart.options;
var value = data.valueFields;
var children = chart.children;
var pointColor = data.fields.color || series.color;
var valueParts = chart.splitValue(value);
var hasValue = areNumbers(valueParts);
var categoryPoints = chart.categoryPoints[categoryIx];
var dataItem = series.data[categoryIx];
var point, cluster;
if (!categoryPoints) {
chart.categoryPoints[categoryIx] = categoryPoints = [];
}
if (hasValue) {
if (series.type == CANDLESTICK) {
if (value.open > value.close) {
pointColor = data.fields.downColor || series.downColor || series.color;
}
}
point = chart.createPoint(
data, deepExtend(fields, { series: { color: pointColor } })
);
}
cluster = children[categoryIx];
if (!cluster) {
cluster = new ClusterLayout({
vertical: options.invertAxes,
gap: options.gap,
spacing: options.spacing
});
chart.append(cluster);
}
if (point) {
chart.updateRange(value, fields);
cluster.append(point);
point.categoryIx = categoryIx;
point.category = category;
point.series = series;
point.seriesIx = seriesIx;
point.owner = chart;
point.dataItem = dataItem;
point.noteText = data.fields.noteText;
}
chart.points.push(point);
categoryPoints.push(point);
},
pointType: function() {
return Candlestick;
},
createPoint: function(data, fields) {
var chart = this;
var categoryIx = fields.categoryIx;
var category = fields.category;
var series = fields.series;
var seriesIx = fields.seriesIx;
var value = data.valueFields;
var pointOptions = deepExtend({}, series);
var pointType = chart.pointType();
pointOptions = chart.evalPointOptions(
pointOptions, value, category, categoryIx, series, seriesIx
);
return new pointType(value, pointOptions);
},
splitValue: function(value) {
return [value.low, value.open, value.close, value.high];
},
updateRange: function(value, fields) {
var chart = this,
axisName = fields.series.axis,
axisRange = chart.valueAxisRanges[axisName],
parts = chart.splitValue(value);
axisRange = chart.valueAxisRanges[axisName] =
axisRange || { min: MAX_VALUE, max: MIN_VALUE };
axisRange = chart.valueAxisRanges[axisName] = {
min: math.min.apply(math, parts.concat([axisRange.min])),
max: math.max.apply(math, parts.concat([axisRange.max]))
};
},
formatPointValue: function(point, format) {
var value = point.value;
return autoFormat(format,
value.open, value.high,
value.low, value.close, point.category
);
},
getViewElements: function(view) {
var chart = this,
elements = ChartElement.fn.getViewElements.call(chart, view),
group = view.createGroup({
animation: {
type: CLIP
}
}),
highlightGroup = view.createGroup({
id: chart.id
});
group.children = elements;
highlightGroup.children = [group];
return [highlightGroup];
}
});
var OHLCPoint = Candlestick.extend({
reflow: function(box) {
var point = this,
options = point.options,
chart = point.owner,
value = point.value,
valueAxis = chart.seriesValueAxis(options),
oPoints = [], cPoints = [], lhPoints = [],
mid, oSlot, cSlot, lhSlot;
lhSlot = valueAxis.getSlot(value.low, value.high);
oSlot = valueAxis.getSlot(value.open, value.open);
cSlot = valueAxis.getSlot(value.close, value.close);
oSlot.x1 = cSlot.x1 = lhSlot.x1 = box.x1;
oSlot.x2 = cSlot.x2 = lhSlot.x2 = box.x2;
mid = lhSlot.center().x;
oPoints.push(Point2D(oSlot.x1, oSlot.y1));
oPoints.push(Point2D(mid, oSlot.y1));
cPoints.push(Point2D(mid, cSlot.y1));
cPoints.push(Point2D(cSlot.x2, cSlot.y1));
lhPoints.push(Point2D(mid, lhSlot.y1));
lhPoints.push(Point2D(mid, lhSlot.y2));
point.oPoints = oPoints;
point.cPoints = cPoints;
point.lhPoints = lhPoints;
point.box = lhSlot.clone().wrap(oSlot.clone().wrap(cSlot));
point.reflowNote();
},
getViewElements: function(view) {
var point = this,
options = point.options,
elements = [],
lineOptions = options.line,
lineStyle = {
strokeOpacity: lineOptions.opacity || options.opacity,
zIndex: -1,
strokeWidth: lineOptions.width,
stroke: options.color || lineOptions.color,
dashType: lineOptions.dashType
};
elements.push(point.createOverlayRect(view, options));
elements.push(view.createPolyline(point.oPoints, true, lineStyle));
elements.push(view.createPolyline(point.cPoints, true, lineStyle));
elements.push(view.createPolyline(point.lhPoints, true, lineStyle));
append(elements,
ChartElement.fn.getViewElements.call(point, view)
);
return elements;
},
highlightOverlay: function(view) {
var point = this,
pointOptions = point.options,
highlight = pointOptions.highlight,
data = { data: { modelId: pointOptions.modelId } },
lineStyle = deepExtend(data, {
strokeWidth: highlight.line.width,
strokeOpacity: highlight.line.opacity,
stroke: highlight.line.color || point.color
}),
group = view.createGroup();
group.children.push(view.createPolyline(point.oPoints, true, lineStyle));
group.children.push(view.createPolyline(point.cPoints, true, lineStyle));
group.children.push(view.createPolyline(point.lhPoints, true, lineStyle));
return group;
}
});
var OHLCChart = CandlestickChart.extend({
pointType: function() {
return OHLCPoint;
}
});
var BoxPlotChart = CandlestickChart.extend({
addValue: function(data, fields) {
var chart = this;
var categoryIx = fields.categoryIx;
var category = fields.category;
var series = fields.series;
var seriesIx = fields.seriesIx;
var options = chart.options;
var children = chart.children;
var pointColor = data.fields.color || series.color;
var value = data.valueFields;
var valueParts = chart.splitValue(value);
var hasValue = areNumbers(valueParts);
var categoryPoints = chart.categoryPoints[categoryIx];
var dataItem = series.data[categoryIx];
var point, cluster;
if (!categoryPoints) {
chart.categoryPoints[categoryIx] = categoryPoints = [];
}
if (hasValue) {
point = chart.createPoint(
data, deepExtend(fields, { series: { color: pointColor } })
);
}
cluster = children[categoryIx];
if (!cluster) {
cluster = new ClusterLayout({
vertical: options.invertAxes,
gap: options.gap,
spacing: options.spacing
});
chart.append(cluster);
}
if (point) {
chart.updateRange(value, fields);
cluster.append(point);
point.categoryIx = categoryIx;
point.category = category;
point.series = series;
point.seriesIx = seriesIx;
point.owner = chart;
point.dataItem = dataItem;
}
chart.points.push(point);
categoryPoints.push(point);
},
pointType: function() {
return BoxPlot;
},
splitValue: function(value) {
return [
value.lower, value.q1, value.median,
value.q3, value.upper
];
},
updateRange: function(value, fields) {
var chart = this,
axisName = fields.series.axis,
axisRange = chart.valueAxisRanges[axisName],
parts = chart.splitValue(value).concat(
chart.filterOutliers(value.outliers));
if (defined(value.mean)) {
parts = parts.concat(value.mean);
}
axisRange = chart.valueAxisRanges[axisName] =
axisRange || { min: MAX_VALUE, max: MIN_VALUE };
axisRange = chart.valueAxisRanges[axisName] = {
min: math.min.apply(math, parts.concat([axisRange.min])),
max: math.max.apply(math, parts.concat([axisRange.max]))
};
},
formatPointValue: function(point, format) {
var value = point.value;
return autoFormat(format,
value.lower, value.q1, value.median,
value.q3, value.upper, value.mean, point.category
);
},
filterOutliers: function(items) {
var length = (items || []).length,
result = [],
i, item;
for (i = 0; i < length; i++) {
item = items[i];
if (defined(item)) {
appendIfNotNull(result, item);
}
}
return result;
}
});
var BoxPlot = Candlestick.extend({
init: function(value, options) {
var point = this;
ChartElement.fn.init.call(point, options);
point.value = value;
point.id = uniqueId();
point.enableDiscovery();
point.createNote();
},
options: {
border: {
_brightness: 0.8
},
line: {
width: 2
},
mean: {
width: 2,
dashType: "dash"
},
overlay: {
gradient: GLASS
},
tooltip: {
format: "" +
"{6:d} " +
"Lower: {0:C} Q1: {1:C} Median: {2:C} Mean: {5:C} Q3: {3:C} Upper: {4:C}
"
},
highlight: {
opacity: 1,
border: {
width: 1,
opacity: 1
},
line: {
width: 1,
opacity: 1
}
},
notes: {
visible: true,
label: {}
},
outliers: {
visible: true,
size: LINE_MARKER_SIZE,
type: CROSS,
background: WHITE,
border: {
width: 2,
opacity: 1
},
opacity: 0
},
extremes: {
visible: true,
size: LINE_MARKER_SIZE,
type: CIRCLE,
background: WHITE,
border: {
width: 2,
opacity: 1
},
opacity: 0
}
},
reflow: function(box) {
var point = this,
options = point.options,
chart = point.owner,
value = point.value,
valueAxis = chart.seriesValueAxis(options),
points = [], mid, whiskerSlot, boxSlot, medianSlot, meanSlot;
boxSlot = valueAxis.getSlot(value.q1, value.q3);
point.boxSlot = boxSlot;
whiskerSlot = valueAxis.getSlot(value.lower, value.upper);
medianSlot = valueAxis.getSlot(value.median);
boxSlot.x1 = whiskerSlot.x1 = box.x1;
boxSlot.x2 = whiskerSlot.x2 = box.x2;
if (value.mean) {
meanSlot = valueAxis.getSlot(value.mean);
point.meanPoints = [ Point2D(box.x1, meanSlot.y1), Point2D(box.x2, meanSlot.y1) ];
}
mid = whiskerSlot.center().x;
points.push([
[ Point2D(mid - 5, whiskerSlot.y1), Point2D(mid + 5, whiskerSlot.y1) ],
[ Point2D(mid, whiskerSlot.y1), Point2D(mid, boxSlot.y1) ]
]);
points.push([
[ Point2D(mid - 5, whiskerSlot.y2), Point2D(mid + 5, whiskerSlot.y2) ],
[ Point2D(mid, boxSlot.y2), Point2D(mid, whiskerSlot.y2) ]
]);
point.whiskerPoints = points;
point.medianPoints = [ Point2D(box.x1, medianSlot.y1), Point2D(box.x2, medianSlot.y1) ];
point.box = whiskerSlot.clone().wrap(boxSlot);
point.createOutliers();
point.reflowNote();
},
createOutliers: function() {
var point = this,
options = point.options,
markers = options.markers || {},
value = point.value,
outliers = value.outliers || [],
valueAxis = point.owner.seriesValueAxis(options),
outerFence = math.abs(value.q3 - value.q1) * 3,
markersBorder, markerBox, element, outlierValue, i;
point.outliers = [];
for (i = 0; i < outliers.length; i++) {
outlierValue = outliers[i];
if (outlierValue < value.q3 + outerFence && outlierValue > value.q1 - outerFence) {
markers = options.outliers;
} else {
markers = options.extremes;
}
markersBorder = deepExtend({}, markers.border);
if (!defined(markersBorder.color)) {
if (defined(point.options.color)) {
markersBorder.color = point.options.color;
} else {
markersBorder.color =
new Color(markers.background).brightness(BAR_BORDER_BRIGHTNESS).toHex();
}
}
element = new ShapeElement({
id: point.id,
type: markers.type,
width: markers.size,
height: markers.size,
rotation: markers.rotation,
background: markers.background,
border: markersBorder,
opacity: markers.opacity
});
markerBox = valueAxis.getSlot(outlierValue).move(point.box.center().x);
point.box = point.box.wrap(markerBox);
element.reflow(markerBox);
point.outliers.push(element);
}
},
getViewElements: function(view) {
var point = this,
group = view.createGroup({
animation: {
type: CLIP
}
}),
elements = point.render(view, point.options);
append(elements,
ChartElement.fn.getViewElements.call(point, view)
);
group.children = elements;
return [ group ];
},
render: function(view, renderOptions) {
var point = this,
elements = [],
i, element;
elements.push(point.createBody(view, renderOptions));
elements.push(point.createWhisker(view, point.whiskerPoints[0], renderOptions));
elements.push(point.createWhisker(view, point.whiskerPoints[1], renderOptions));
elements.push(point.createMedian(view, renderOptions));
if (point.meanPoints) {
elements.push(point.createMean(view, renderOptions));
}
elements.push(point.createOverlayRect(view, renderOptions));
if (point.outliers.length) {
for (i = 0; i < point.outliers.length; i++) {
element = point.outliers[i];
elements.push(element.getViewElements(view)[0]);
}
}
return elements;
},
createWhisker: function(view, points, options) {
return view.createMultiLine(points, {
strokeOpacity: valueOrDefault(options.line.opacity, options.opacity),
strokeWidth: options.line.width,
stroke: options.line.color || options.color,
dashType: options.line.dashType,
strokeLineCap: "butt",
data: { data: { modelId: this.modelId } }
});
},
createMedian: function(view) {
var point = this,
options = point.options;
return view.createPolyline(point.medianPoints, false, {
strokeOpacity: valueOrDefault(options.median.opacity, options.opacity),
strokeWidth: options.median.width,
stroke: options.median.color || options.color,
dashType: options.median.dashType,
strokeLineCap: "butt",
data: { data: { modelId: this.modelId } }
});
},
createBody: function(view, options) {
var point = this,
border = options.border.width > 0 ? {
stroke: options.color || point.getBorderColor(),
strokeWidth: options.border.width,
dashType: options.border.dashType,
strokeOpacity: valueOrDefault(options.border.opacity, options.opacity)
} : {},
body = deepExtend({
fill: options.color,
fillOpacity: options.opacity,
data: { data: { modelId: this.modelId } }
}, border);
if (options.overlay) {
body.overlay = deepExtend({
rotation: 0
}, options.overlay);
}
return view.createRect(point.boxSlot, body);
},
createMean: function(view) {
var point = this,
options = point.options;
return view.createPolyline(point.meanPoints, false, {
strokeOpacity: valueOrDefault(options.mean.opacity, options.opacity),
strokeWidth: options.mean.width,
stroke: options.mean.color || options.color,
dashType: options.mean.dashType,
strokeLineCap: "butt",
data: { data: { modelId: this.modelId } }
});
},
highlightOverlay: function(view) {
var point = this,
group = view.createGroup();
group.children = point.render(view, deepExtend({},
point.options.highlight, {
border: {
color: point.getBorderColor()
}
}));
return group;
}
});
deepExtend(BoxPlot.fn, PointEventsMixin);
// TODO: Rename to Segment?
var PieSegment = ChartElement.extend({
init: function(value, sector, options) {
var segment = this;
segment.value = value;
segment.sector = sector;
ChartElement.fn.init.call(segment, options);
segment.id = uniqueId();
segment.enableDiscovery();
},
options: {
color: WHITE,
overlay: {
gradient: ROUNDED_BEVEL
},
border: {
width: 0.5
},
labels: {
visible: false,
distance: 35,
font: DEFAULT_FONT,
margin: getSpacing(0.5),
align: CIRCLE,
zIndex: 1,
position: OUTSIDE_END
},
animation: {
type: PIE
},
highlight: {
visible: true,
border: {
width: 1
}
},
visible: true
},
render: function() {
var segment = this,
options = segment.options,
labels = options.labels,
labelText = segment.value,
labelTemplate;
if (segment._rendered || segment.visible === false) {
return;
} else {
segment._rendered = true;
}
if (labels.template) {
labelTemplate = template(labels.template);
labelText = labelTemplate({
dataItem: segment.dataItem,
category: segment.category,
value: segment.value,
series: segment.series,
percentage: segment.percentage
});
} else if (labels.format) {
labelText = autoFormat(labels.format, labelText);
}
if (labels.visible && labelText) {
segment.label = new TextBox(labelText, deepExtend({}, labels, {
id: uniqueId(),
align: CENTER,
vAlign: "",
animation: {
type: FADEIN,
delay: segment.animationDelay
}
}));
segment.append(segment.label);
}
},
reflow: function(targetBox) {
var segment = this;
segment.render();
segment.box = targetBox;
segment.reflowLabel();
},
reflowLabel: function() {
var segment = this,
sector = segment.sector.clone(),
options = segment.options,
label = segment.label,
labelsOptions = options.labels,
labelsDistance = labelsOptions.distance,
angle = sector.middle(),
lp, x1, labelWidth, labelHeight;
if (label) {
labelHeight = label.box.height();
labelWidth = label.box.width();
if (labelsOptions.position == CENTER) {
sector.r = math.abs((sector.r - labelHeight) / 2) + labelHeight;
lp = sector.point(angle);
label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
} else if (labelsOptions.position == INSIDE_END) {
sector.r = sector.r - labelHeight / 2;
lp = sector.point(angle);
label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
} else {
lp = sector.clone().expand(labelsDistance).point(angle);
if (lp.x >= sector.c.x) {
x1 = lp.x + labelWidth;
label.orientation = RIGHT;
} else {
x1 = lp.x - labelWidth;
label.orientation = LEFT;
}
label.reflow(Box2D(x1, lp.y - labelHeight, lp.x, lp.y));
}
}
},
getViewElements: function(view) {
var segment = this,
sector = segment.sector,
options = segment.options,
borderOptions = options.border || {},
border = borderOptions.width > 0 ? {
stroke: borderOptions.color,
strokeWidth: borderOptions.width,
strokeOpacity: borderOptions.opacity,
dashType: borderOptions.dashType
} : {},
elements = [],
overlay = options.overlay;
if (overlay) {
overlay = deepExtend({}, options.overlay, {
r: sector.r,
ir: sector.ir,
cx: sector.c.x,
cy: sector.c.y,
bbox: sector.getBBox()
});
}
if (segment.value) {
elements.push(segment.createSegment(view, sector, deepExtend({
id: segment.id,
fill: options.color,
overlay: overlay,
fillOpacity: options.opacity,
strokeOpacity: options.opacity,
animation: deepExtend(options.animation, {
delay: segment.animationDelay
}),
data: { modelId: segment.modelId },
zIndex: options.zIndex,
singleSegment: (segment.options.data || []).length === 1
}, border)));
}
append(elements,
ChartElement.fn.getViewElements.call(segment, view)
);
return elements;
},
createSegment: function(view, sector, options) {
if (options.singleSegment) {
return view.createCircle(sector.c, sector.r, options);
} else {
return view.createSector(sector, options);
}
},
highlightOverlay: function(view, options) {
var segment = this,
highlight = segment.options.highlight || {},
border = highlight.border || {},
outlineId = segment.id + OUTLINE_SUFFIX,
element;
options = deepExtend({}, options, { id: outlineId });
if (segment.value !== 0) {
element = segment.createSegment(view, segment.sector, deepExtend({}, options, {
fill: highlight.color,
fillOpacity: highlight.opacity,
strokeOpacity: border.opacity,
strokeWidth: border.width,
stroke: border.color,
id: null,
data: { modelId: segment.modelId }
}));
}
return element;
},
tooltipAnchor: function(width, height) {
var point = this,
box = point.sector.adjacentBox(TOOLTIP_OFFSET, width, height);
return new Point2D(box.x1, box.y1);
},
formatValue: function(format) {
var point = this;
return point.owner.formatPointValue(point, format);
}
});
deepExtend(PieSegment.fn, PointEventsMixin);
var PieChartMixin = {
createLegendItem: function(value, point) {
var chart = this,
legendOptions = chart.options.legend || {},
labelsOptions = legendOptions.labels || {},
inactiveItems = legendOptions.inactiveItems || {},
inactiveItemsLabels = inactiveItems.labels || {},
text, labelTemplate, markerColor, itemLabelOptions,
pointVisible;
if (point && point.visibleInLegend !== false) {
pointVisible = point.visible !== false;
text = point.category || "";
labelTemplate = pointVisible ? labelsOptions.template :
(inactiveItemsLabels.template || labelsOptions.template);
if (labelTemplate) {
text = template(labelTemplate)({
text: text,
series: point.series,
dataItem: point.dataItem,
percentage: point.percentage,
value: value
});
}
if (pointVisible) {
itemLabelOptions = {};
markerColor = (point.series || {}).color;
} else {
itemLabelOptions = {
color: inactiveItemsLabels.color,
font: inactiveItemsLabels.font
};
markerColor = (inactiveItems.markers || {}).color;
}
if (text) {
chart.legendItems.push({
pointIndex: point.index,
text: text,
series: point.series,
markerColor: markerColor,
labels: itemLabelOptions
});
}
}
}
};
var PieChart = ChartElement.extend({
init: function(plotArea, options) {
var chart = this;
ChartElement.fn.init.call(chart, options);
chart.plotArea = plotArea;
chart.points = [];
chart.legendItems = [];
chart.render();
},
options: {
startAngle: 90,
connectors: {
width: 1,
color: "#939393",
padding: 4
},
inactiveItems: {
markers: {},
labels: {}
}
},
render: function() {
var chart = this;
chart.traverseDataPoints(proxy(chart.addValue, chart));
},
traverseDataPoints: function(callback) {
var chart = this,
options = chart.options,
colors = chart.plotArea.options.seriesColors || [],
colorsCount = colors.length,
series = options.series,
seriesCount = series.length,
overlayId = uniqueId(),
currentSeries, pointData, fields, seriesIx,
angle, data, anglePerValue, value, plotValue, explode,
total, currentAngle, i, pointIx = 0;
for (seriesIx = 0; seriesIx < seriesCount; seriesIx++) {
currentSeries = series[seriesIx];
data = currentSeries.data;
total = seriesTotal(currentSeries);
anglePerValue = 360 / total;
if (defined(currentSeries.startAngle)) {
currentAngle = currentSeries.startAngle;
} else {
currentAngle = options.startAngle;
}
if (seriesIx != seriesCount - 1) {
if (currentSeries.labels.position == OUTSIDE_END) {
currentSeries.labels.position = CENTER;
}
}
for (i = 0; i < data.length; i++) {
pointData = SeriesBinder.current.bindPoint(currentSeries, i);
value = pointData.valueFields.value;
plotValue = math.abs(value);
fields = pointData.fields;
angle = round(plotValue * anglePerValue, DEFAULT_PRECISION);
explode = data.length != 1 && !!fields.explode;
if (!isFn(currentSeries.color)) {
currentSeries.color = fields.color || colors[i % colorsCount];
}
callback(value, new Ring(null, 0, 0, currentAngle, angle), {
owner: chart,
category: fields.category || "",
index: pointIx,
series: currentSeries,
seriesIx: seriesIx,
dataItem: data[i],
percentage: plotValue / total,
explode: explode,
visibleInLegend: fields.visibleInLegend,
visible: fields.visible,
overlay: {
id: overlayId + seriesIx
},
zIndex: seriesCount - seriesIx,
animationDelay: chart.animationDelay(i, seriesIx, seriesCount)
});
if (pointData.fields.visible !== false) {
currentAngle += angle;
}
pointIx++;
}
pointIx = 0;
}
},
evalSegmentOptions: function(options, value, fields) {
var series = fields.series;
evalOptions(options, {
value: value,
series: series,
dataItem: fields.dataItem,
category: fields.category,
percentage: fields.percentage
}, { defaults: series._defaults, excluded: ["data"] });
},
addValue: function(value, sector, fields) {
var chart = this,
segment;
chart.createLegendItem(value, fields);
if (fields.visible === false) {
return;
}
var segmentOptions = deepExtend({}, fields.series, { index: fields.index });
chart.evalSegmentOptions(segmentOptions, value, fields);
segment = new PieSegment(value, sector, segmentOptions);
extend(segment, fields);
chart.append(segment);
chart.points.push(segment);
},
reflow: function(targetBox) {
var chart = this,
options = chart.options,
box = targetBox.clone(),
space = 5,
minWidth = math.min(box.width(), box.height()),
halfMinWidth = minWidth / 2,
defaultPadding = minWidth - minWidth * 0.85,
padding = valueOrDefault(options.padding, defaultPadding),
newBox = Box2D(box.x1, box.y1,
box.x1 + minWidth, box.y1 + minWidth),
newBoxCenter = newBox.center(),
seriesConfigs = chart.seriesConfigs || [],
boxCenter = box.center(),
points = chart.points,
count = points.length,
seriesCount = options.series.length,
leftSideLabels = [],
rightSideLabels = [],
seriesConfig, seriesIndex, label,
segment, sector, r, i, c;
padding = padding > halfMinWidth - space ? halfMinWidth - space : padding;
newBox.translate(boxCenter.x - newBoxCenter.x, boxCenter.y - newBoxCenter.y);
r = halfMinWidth - padding;
c = Point2D(
r + newBox.x1 + padding,
r + newBox.y1 + padding
);
for (i = 0; i < count; i++) {
segment = points[i];
sector = segment.sector;
sector.r = r;
sector.c = c;
seriesIndex = segment.seriesIx;
if (seriesConfigs.length) {
seriesConfig = seriesConfigs[seriesIndex];
sector.ir = seriesConfig.ir;
sector.r = seriesConfig.r;
}
if (seriesIndex == seriesCount - 1 && segment.explode) {
sector.c = sector.clone().radius(sector.r * 0.15).point(sector.middle());
}
segment.reflow(newBox);
label = segment.label;
if (label) {
if (label.options.position === OUTSIDE_END) {
if (seriesIndex == seriesCount - 1) {
if (label.orientation === RIGHT) {
rightSideLabels.push(label);
} else {
leftSideLabels.push(label);
}
}
}
}
}
if (leftSideLabels.length > 0) {
leftSideLabels.sort(chart.labelComparator(true));
chart.leftLabelsReflow(leftSideLabels);
}
if (rightSideLabels.length > 0) {
rightSideLabels.sort(chart.labelComparator(false));
chart.rightLabelsReflow(rightSideLabels);
}
chart.box = newBox;
},
leftLabelsReflow: function(labels) {
var chart = this,
distances = chart.distanceBetweenLabels(labels);
chart.distributeLabels(distances, labels);
},
rightLabelsReflow: function(labels) {
var chart = this,
distances = chart.distanceBetweenLabels(labels);
chart.distributeLabels(distances, labels);
},
distanceBetweenLabels: function(labels) {
var chart = this,
points = chart.points,
segment = points[points.length - 1],
sector = segment.sector,
firstBox = labels[0].box,
count = labels.length - 1,
lr = sector.r + segment.options.labels.distance,
distances = [],
secondBox, distance, i;
distance = round(firstBox.y1 - (sector.c.y - lr - firstBox.height() - firstBox.height() / 2));
distances.push(distance);
for (i = 0; i < count; i++) {
firstBox = labels[i].box;
secondBox = labels[i + 1].box;
distance = round(secondBox.y1 - firstBox.y2);
distances.push(distance);
}
distance = round(sector.c.y + lr - labels[count].box.y2 - labels[count].box.height() / 2);
distances.push(distance);
return distances;
},
distributeLabels: function(distances, labels) {
var chart = this,
count = distances.length,
remaining, left, right, i;
for (i = 0; i < count; i++) {
left = right = i;
remaining = -distances[i];
while (remaining > 0 && (left >= 0 || right < count)) {
remaining = chart._takeDistance(distances, i, --left, remaining);
remaining = chart._takeDistance(distances, i, ++right, remaining);
}
}
chart.reflowLabels(distances, labels);
},
_takeDistance: function(distances, anchor, position, amount) {
if (distances[position] > 0) {
var available = math.min(distances[position], amount);
amount -= available;
distances[position] -= available;
distances[anchor] += available;
}
return amount;
},
reflowLabels: function(distances, labels) {
var chart = this,
points = chart.points,
segment = points[points.length - 1],
sector = segment.sector,
labelsCount = labels.length,
labelOptions = segment.options.labels,
labelDistance = labelOptions.distance,
boxY = sector.c.y - (sector.r + labelDistance) - labels[0].box.height(),
label, boxX, box, i;
distances[0] += 2;
for (i = 0; i < labelsCount; i++) {
label = labels[i];
boxY += distances[i];
box = label.box;
boxX = chart.hAlignLabel(
box.x2,
sector.clone().expand(labelDistance),
boxY,
boxY + box.height(),
label.orientation == RIGHT);
if (label.orientation == RIGHT) {
if (labelOptions.align !== CIRCLE) {
boxX = sector.r + sector.c.x + labelDistance;
}
label.reflow(Box2D(boxX + box.width(), boxY,
boxX, boxY));
} else {
if (labelOptions.align !== CIRCLE) {
boxX = sector.c.x - sector.r - labelDistance;
}
label.reflow(Box2D(boxX - box.width(), boxY,
boxX, boxY));
}
boxY += box.height();
}
},
getViewElements: function(view) {
var chart = this,
options = chart.options,
connectors = options.connectors,
points = chart.points,
connectorLine,
lines = [],
count = points.length,
space = 4,
sector, angle, connectorPoints, segment,
seriesIx, label, i;
for (i = 0; i < count; i++) {
segment = points[i];
sector = segment.sector;
angle = sector.middle();
label = segment.label;
seriesIx = { seriesId: segment.seriesIx };
if (label) {
connectorPoints = [];
if (label.options.position === OUTSIDE_END && segment.value !== 0) {
var box = label.box,
centerPoint = sector.c,
start = sector.point(angle),
middle = Point2D(box.x1, box.center().y),
sr, end, crossing;
start = sector.clone().expand(connectors.padding).point(angle);
connectorPoints.push(start);
// TODO: Extract into a method to remove duplication
if (label.orientation == RIGHT) {
end = Point2D(box.x1 - connectors.padding, box.center().y);
crossing = intersection(centerPoint, start, middle, end);
middle = Point2D(end.x - space, end.y);
crossing = crossing || middle;
crossing.x = math.min(crossing.x, middle.x);
if (chart.pointInCircle(crossing, sector.c, sector.r + space) ||
crossing.x < sector.c.x) {
sr = sector.c.x + sector.r + space;
if (segment.options.labels.align !== COLUMN) {
if (sr < middle.x) {
connectorPoints.push(Point2D(sr, start.y));
} else {
connectorPoints.push(Point2D(start.x + space * 2, start.y));
}
} else {
connectorPoints.push(Point2D(sr, start.y));
}
connectorPoints.push(Point2D(middle.x, end.y));
} else {
crossing.y = end.y;
connectorPoints.push(crossing);
}
} else {
end = Point2D(box.x2 + connectors.padding, box.center().y);
crossing = intersection(centerPoint, start, middle, end);
middle = Point2D(end.x + space, end.y);
crossing = crossing || middle;
crossing.x = math.max(crossing.x, middle.x);
if (chart.pointInCircle(crossing, sector.c, sector.r + space) ||
crossing.x > sector.c.x) {
sr = sector.c.x - sector.r - space;
if (segment.options.labels.align !== COLUMN) {
if (sr > middle.x) {
connectorPoints.push(Point2D(sr, start.y));
} else {
connectorPoints.push(Point2D(start.x - space * 2, start.y));
}
} else {
connectorPoints.push(Point2D(sr, start.y));
}
connectorPoints.push(Point2D(middle.x, end.y));
} else {
crossing.y = end.y;
connectorPoints.push(crossing);
}
}
connectorPoints.push(end);
connectorLine = view.createPolyline(connectorPoints, false, {
id: uniqueId(),
stroke: connectors.color,
strokeWidth: connectors.width,
animation: {
type: FADEIN,
delay: segment.animationDelay
},
data: { modelId: segment.modelId }
});
lines.push(connectorLine);
}
}
}
append(lines,
ChartElement.fn.getViewElements.call(chart, view));
return lines;
},
labelComparator: function (reverse) {
reverse = (reverse) ? -1 : 1;
return function(a, b) {
a = (a.parent.sector.middle() + 270) % 360;
b = (b.parent.sector.middle() + 270) % 360;
return (a - b) * reverse;
};
},
hAlignLabel: function(originalX, sector, y1, y2, direction) {
var cx = sector.c.x,
cy = sector.c.y,
r = sector.r,
t = math.min(math.abs(cy - y1), math.abs(cy - y2));
if (t > r) {
return originalX;
} else {
return cx + math.sqrt((r * r) - (t * t)) * (direction ? 1 : -1);
}
},
pointInCircle: function(point, c, r) {
return sqr(c.x - point.x) + sqr(c.y - point.y) < sqr(r);
},
formatPointValue: function(point, format) {
return autoFormat(format, point.value);
},
animationDelay: function(categoryIndex) {
return categoryIndex * PIE_SECTOR_ANIM_DELAY;
}
});
deepExtend(PieChart.fn, PieChartMixin);
var DonutSegment = PieSegment.extend({
options: {
overlay: {
gradient: ROUNDED_GLASS
},
labels: {
position: CENTER
},
animation: {
type: PIE
}
},
reflowLabel: function() {
var segment = this,
sector = segment.sector.clone(),
options = segment.options,
label = segment.label,
labelsOptions = options.labels,
lp,
angle = sector.middle(),
labelHeight;
if (label) {
labelHeight = label.box.height();
if (labelsOptions.position == CENTER) {
sector.r -= (sector.r - sector.ir) / 2;
lp = sector.point(angle);
label.reflow(new Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
} else {
PieSegment.fn.reflowLabel.call(segment);
}
}
},
createSegment: function(view, sector, options) {
return view.createRing(sector, options);
}
});
deepExtend(DonutSegment.fn, PointEventsMixin);
var DonutChart = PieChart.extend({
options: {
startAngle: 90,
connectors: {
width: 1,
color: "#939393",
padding: 4
}
},
addValue: function(value, sector, fields) {
var chart = this,
segment;
chart.createLegendItem(value, fields);
if (!value || fields.visible === false) {
return;
}
var segmentOptions = deepExtend({}, fields.series, { index: fields.index });
chart.evalSegmentOptions(segmentOptions, value, fields);
segment = new DonutSegment(value, sector, segmentOptions);
extend(segment, fields);
chart.append(segment);
chart.points.push(segment);
},
reflow: function(targetBox) {
var chart = this,
options = chart.options,
box = targetBox.clone(),
space = 5,
minWidth = math.min(box.width(), box.height()),
halfMinWidth = minWidth / 2,
defaultPadding = minWidth - minWidth * 0.85,
padding = valueOrDefault(options.padding, defaultPadding),
series = options.series,
currentSeries,
seriesCount = series.length,
seriesWithoutSize = 0,
holeSize, totalSize, size,
margin = 0, i, r, ir = 0,
currentSize = 0;
chart.seriesConfigs = [];
padding = padding > halfMinWidth - space ? halfMinWidth - space : padding;
totalSize = halfMinWidth - padding;
for (i = 0; i < seriesCount; i++) {
currentSeries = series[i];
if (i === 0) {
if (defined(currentSeries.holeSize)) {
holeSize = currentSeries.holeSize;
totalSize -= currentSeries.holeSize;
}
}
if (defined(currentSeries.size)) {
totalSize -= currentSeries.size;
} else {
seriesWithoutSize++;
}
if (defined(currentSeries.margin) && i != seriesCount - 1) {
totalSize -= currentSeries.margin;
}
}
if (!defined(holeSize)) {
currentSize = (halfMinWidth - padding) / (seriesCount + 0.75);
holeSize = currentSize * 0.75;
totalSize -= holeSize;
}
ir = holeSize;
for (i = 0; i < seriesCount; i++) {
currentSeries = series[i];
size = valueOrDefault(currentSeries.size, totalSize / seriesWithoutSize);
ir += margin;
r = ir + size;
chart.seriesConfigs.push({ ir: ir, r: r });
margin = currentSeries.margin || 0;
ir = r;
}
PieChart.fn.reflow.call(chart, targetBox);
},
animationDelay: function(categoryIndex, seriesIndex, seriesCount) {
return categoryIndex * DONUT_SECTOR_ANIM_DELAY +
(INITIAL_ANIMATION_DURATION * (seriesIndex + 1) / (seriesCount + 1));
}
});
var WaterfallChart = BarChart.extend({
render: function() {
BarChart.fn.render.call(this);
this.createSegments();
},
traverseDataPoints: function(callback) {
var series = this.options.series;
var categories = this.categoryAxis.options.categories || [];
var totalCategories = categoriesCount(series);
var isVertical = !this.options.invertAxes;
for (var seriesIx = 0; seriesIx < series.length; seriesIx++) {
var currentSeries = series[seriesIx];
var total = 0;
var runningTotal = 0;
for (var categoryIx = 0; categoryIx < totalCategories; categoryIx++) {
var data = SeriesBinder.current.bindPoint(currentSeries, categoryIx);
var value = data.valueFields.value;
var summary = data.fields.summary;
var from = total;
var to;
if (summary) {
if (summary.toLowerCase() === "total") {
data.valueFields.value = total;
from = 0;
to = total;
} else {
data.valueFields.value = runningTotal;
to = from - runningTotal;
runningTotal = 0;
}
} else if (isNumber(value)) {
runningTotal += value;
total += value;
to = total;
}
callback(data, {
category: categories[categoryIx],
categoryIx: categoryIx,
series: currentSeries,
seriesIx: seriesIx,
total: total,
runningTotal: runningTotal,
from: from,
to: to,
isVertical: isVertical
});
}
}
},
updateRange: function(value, fields) {
BarChart.fn.updateRange.call(this, { value: fields.to }, fields);
},
aboveAxis: function(point) {
return point.value >= 0;
},
plotRange: function(point) {
return [point.from, point.to];
},
createSegments: function() {
var series = this.options.series;
var seriesPoints = this.seriesPoints;
var segments = this.segments = [];
for (var seriesIx = 0; seriesIx < series.length; seriesIx++) {
var currentSeries = series[seriesIx];
var points = seriesPoints[seriesIx];
if (points) {
var prevPoint;
for (var pointIx = 0; pointIx < points.length; pointIx++) {
var point = points[pointIx];
if (point && prevPoint) {
var segment = new WaterfallSegment(prevPoint, point, currentSeries);
segments.push(segment);
this.append(segment);
}
prevPoint = point;
}
}
}
}
});
var WaterfallSegment = ChartElement.extend({
init: function(from, to, series) {
var segment = this;
ChartElement.fn.init.call(segment);
segment.from = from;
segment.to = to;
segment.series = series;
segment.id = uniqueId();
},
options: {
animation: {
type: FADEIN,
delay: INITIAL_ANIMATION_DURATION
}
},
linePoints: function() {
var points = [];
var from = this.from;
var fromBox = from.box;
var toBox = this.to.box;
if (from.isVertical) {
var y = from.aboveAxis ? fromBox.y1 : fromBox.y2;
points.push(
Point2D(fromBox.x1, y),
Point2D(toBox.x2, y)
);
} else {
var x = from.aboveAxis ? fromBox.x2 : fromBox.x1;
points.push(
Point2D(x, fromBox.y1),
Point2D(x, toBox.y2)
);
}
return points;
},
getViewElements: function(view) {
var segment = this,
options = segment.options,
series = segment.series;
ChartElement.fn.getViewElements.call(segment, view);
var line = series.line || {};
return [
view.createPolyline(segment.linePoints(), false, {
id: segment.id,
animation: options.animation,
stroke: line.color,
strokeWidth: line.width,
strokeOpacity: line.opacity,
fill: "",
dashType: line.dashType
})
];
}
});
var Pane = BoxElement.extend({
init: function(options) {
var pane = this;
BoxElement.fn.init.call(pane, options);
options = pane.options;
pane.id = uniqueId();
pane.createTitle();
pane.content = new ChartElement();
pane.chartContainer = new ChartContainer({}, pane);
pane.append(pane.content);
pane.axes = [];
pane.charts = [];
},
options: {
zIndex: -1,
shrinkToFit: true,
title: {
align: LEFT
},
visible: true
},
createTitle: function() {
var pane = this;
var titleOptions = pane.options.title;
if (typeof titleOptions === OBJECT) {
titleOptions = deepExtend({}, titleOptions, {
align: titleOptions.position,
position: TOP
});
}
pane.title = Title.buildTitle(titleOptions, pane, Pane.fn.options.title);
},
appendAxis: function(axis) {
var pane = this;
pane.content.append(axis);
pane.axes.push(axis);
axis.pane = pane;
},
appendChart: function(chart) {
var pane = this;
if (pane.chartContainer.parent !== pane.content) {
pane.content.append(pane.chartContainer);
}
pane.charts.push(chart);
pane.chartContainer.append(chart);
chart.pane = pane;
},
empty: function() {
var pane = this,
plotArea = pane.parent,
i;
if (plotArea) {
for (i = 0; i < pane.axes.length; i++) {
plotArea.removeAxis(pane.axes[i]);
}
for (i = 0; i < pane.charts.length; i++) {
plotArea.removeChart(pane.charts[i]);
}
}
pane.axes = [];
pane.charts = [];
pane.content.destroy();
pane.content.children = [];
pane.chartContainer.children = [];
},
reflow: function(targetBox) {
var pane = this;
// Content (such as charts) is rendered, but excluded from reflows
if (last(pane.children) === pane.content) {
pane.children.pop();
}
BoxElement.fn.reflow.call(pane, targetBox);
if (pane.title) {
pane.contentBox.y1 += pane.title.box.height();
}
},
getViewElements: function(view) {
var pane = this,
elements = BoxElement.fn.getViewElements.call(pane, view),
group = view.createGroup({
id: pane.id
}),
result = [];
group.children = elements.concat(
pane.renderGridLines(view),
pane.content.getViewElements(view)
);
pane.view = view;
if (pane.options.visible) {
result = [group];
}
return result;
},
renderGridLines: function(view) {
var pane = this,
axes = pane.axes,
allAxes = axes.concat(pane.parent.axes),
vGridLines = [],
hGridLines = [],
gridLines, i, j, axis,
vertical, altAxis;
for (i = 0; i < axes.length; i++) {
axis = axes[i];
vertical = axis.options.vertical;
gridLines = vertical ? vGridLines : hGridLines;
for (j = 0; j < allAxes.length; j++) {
if (gridLines.length === 0) {
altAxis = allAxes[j];
if (vertical !== altAxis.options.vertical) {
append(gridLines, axis.renderGridLines(view, altAxis, axis));
}
}
}
}
return vGridLines.concat(hGridLines);
},
refresh: function() {
var pane = this,
view = pane.view;
if (view) {
view.replace(pane);
}
},
clipBox: function() {
return this.chartContainer.clipBox;
}
});
var ChartContainer = ChartElement.extend({
init: function(options, pane) {
var container = this;
ChartElement.fn.init.call(container, options);
container.pane = pane;
},
shouldClip: function () {
var container = this,
children = container.children,
length = children.length,
i;
for (i = 0; i < length; i++) {
if (children[i].options.clip === true) {
return true;
}
}
return false;
},
_clipBox: function() {
var container = this,
pane = container.pane,
axes = pane.axes,
length = axes.length,
clipBox = pane.box.clone(),
axisValueField, idx,
lineBox, axis;
for (idx = 0; idx < length; idx++) {
axis = axes[idx];
axisValueField = axis.options.vertical ? Y : X;
lineBox = axis.lineBox();
clipBox[axisValueField + 1] = lineBox[axisValueField + 1];
clipBox[axisValueField + 2] = lineBox[axisValueField + 2];
}
return clipBox;
},
getViewElements: function (view) {
var container = this,
shouldClip = container.shouldClip(),
clipPathId,
labels = [],
group,
result;
if (shouldClip) {
container.clipBox = container._clipBox();
container.clipPathId = container.clipPathId || uniqueId();
clipPathId = container.clipPathId;
view.createClipPath(container.clipPathId, container.clipBox);
labels = container.labelViewElements(view);
}
container.id = uniqueId();
group = view.createGroup({
id: container.id,
clipPathId: clipPathId
});
group.children = group.children.concat(ChartElement.fn.getViewElements.call(container, view));
result = [group].concat(labels);
return result;
},
labelViewElements: function(view) {
var container = this,
charts = container.children,
elements = [],
clipBox = container.clipBox,
points, point,
i, j, length;
for (i = 0; i < charts.length; i++) {
points = charts[i].points || {};
length = points.length;
for (j = 0; j < length; j++) {
point = points[j];
if (point && point.label && point.label.options.visible) {
if (point.box.overlaps(clipBox)) {
if (point.label.alignToClipBox) {
point.label.alignToClipBox(clipBox);
}
point.label.modelId = point.modelId;
append(elements, point.label.getViewElements(view));
}
point.label.options.visible = false;
}
}
}
return elements;
},
destroy: function() {
ChartElement.fn.destroy.call(this);
delete this.parent;
}
});
var PlotAreaBase = ChartElement.extend({
init: function(series, options) {
var plotArea = this;
ChartElement.fn.init.call(plotArea, options);
plotArea.series = series;
plotArea.initSeries();
plotArea.charts = [];
plotArea.options.legend.items = [];
plotArea.axes = [];
plotArea.crosshairs = [];
plotArea.id = uniqueId();
plotArea.enableDiscovery();
plotArea.createPanes();
plotArea.render();
plotArea.createCrosshairs();
},
options: {
series: [],
plotArea: {
margin: {}
},
background: "",
border: {
color: BLACK,
width: 0
},
legend: {
inactiveItems: {
labels: {
color: "#919191"
},
markers: {
color: "#919191"
}
}
}
},
initSeries: function() {
var series = this.series,
i, currentSeries;
for (i = 0; i < series.length; i++) {
currentSeries = series[i];
currentSeries.index = i;
}
},
createPanes: function() {
var plotArea = this,
panes = [],
paneOptions = plotArea.options.panes || [],
i,
panesLength = math.max(paneOptions.length, 1),
currentPane;
for (i = 0; i < panesLength; i++) {
currentPane = new Pane(paneOptions[i]);
currentPane.paneIndex = i;
panes.push(currentPane);
plotArea.append(currentPane);
}
plotArea.panes = panes;
},
destroy: function() {
var plotArea = this,
charts = plotArea.charts,
axes = plotArea.axes,
crosshairs = plotArea.crosshairs,
i;
for (i = 0; i < charts.length; i++) {
charts[i].destroy();
}
for (i = 0; i < axes.length; i++) {
axes[i].destroy();
}
for (i = 0; i < crosshairs.length; i++) {
crosshairs[i].destroy();
}
ChartElement.fn.destroy.call(plotArea);
},
createCrosshairs: function(panes) {
var plotArea = this,
i, j, pane, axis, currentCrosshair;
panes = panes || plotArea.panes;
for (i = 0; i < panes.length; i++) {
pane = panes[i];
for (j = 0; j < pane.axes.length; j++) {
axis = pane.axes[j];
if (axis.options.crosshair && axis.options.crosshair.visible) {
currentCrosshair = new Crosshair(axis, axis.options.crosshair);
plotArea.crosshairs.push(currentCrosshair);
pane.content.append(currentCrosshair);
}
}
}
},
removeCrosshairs: function(pane) {
var plotArea = this,
crosshairs = plotArea.crosshairs,
axes = pane.axes,
i, j;
for (i = crosshairs.length - 1; i >= 0; i--) {
for (j = 0; j < axes.length; j++) {
if (crosshairs[i].axis === axes[j]) {
crosshairs.splice(i, 1);
break;
}
}
}
},
findPane: function(name) {
var plotArea = this,
panes = plotArea.panes,
i, matchingPane;
for (i = 0; i < panes.length; i++) {
if (panes[i].options.name === name) {
matchingPane = panes[i];
break;
}
}
return matchingPane || panes[0];
},
findPointPane: function(point) {
var plotArea = this,
panes = plotArea.panes,
i, matchingPane;
for (i = 0; i < panes.length; i++) {
if (panes[i].box.containsPoint(point)) {
matchingPane = panes[i];
break;
}
}
return matchingPane;
},
appendAxis: function(axis) {
var plotArea = this,
pane = plotArea.findPane(axis.options.pane);
pane.appendAxis(axis);
plotArea.axes.push(axis);
axis.plotArea = plotArea;
},
removeAxis: function(axisToRemove) {
var plotArea = this,
i, axis,
filteredAxes = [];
for (i = 0; i < plotArea.axes.length; i++) {
axis = plotArea.axes[i];
if (axisToRemove !== axis) {
filteredAxes.push(axis);
} else {
axis.destroy();
}
}
plotArea.axes = filteredAxes;
},
appendChart: function(chart, pane) {
var plotArea = this;
plotArea.charts.push(chart);
if (pane) {
pane.appendChart(chart);
} else {
plotArea.append(chart);
}
},
removeChart: function(chartToRemove) {
var plotArea = this,
i, chart,
filteredCharts = [];
for (i = 0; i < plotArea.charts.length; i++) {
chart = plotArea.charts[i];
if (chart !== chartToRemove) {
filteredCharts.push(chart);
} else {
chart.destroy();
}
}
plotArea.charts = filteredCharts;
},
addToLegend: function(series) {
var count = series.length,
data = [],
i, currentSeries, text,
legend = this.options.legend,
labels = legend.labels || {},
inactiveItems = legend.inactiveItems || {},
inactiveItemsLabels = inactiveItems.labels || {},
color, itemLabelOptions, markerColor,
defaults, seriesVisible, labelTemplate;
for (i = 0; i < count; i++) {
currentSeries = series[i];
seriesVisible = currentSeries.visible !== false;
if (currentSeries.visibleInLegend === false) {
continue;
}
text = currentSeries.name || "";
labelTemplate = seriesVisible ? labels.template :
(inactiveItemsLabels.template || labels.template);
if (labelTemplate) {
text = template(labelTemplate)({
text: text,
series: currentSeries
});
}
color = currentSeries.color;
defaults = currentSeries._defaults;
if (isFn(color) && defaults) {
color = defaults.color;
}
if (seriesVisible) {
itemLabelOptions = {};
markerColor = color;
} else {
itemLabelOptions = {
color: inactiveItemsLabels.color,
font: inactiveItemsLabels.font
};
markerColor = inactiveItems.markers.color;
}
if (text) {
data.push({
text: text,
labels: itemLabelOptions,
markerColor: markerColor,
series: currentSeries,
active: seriesVisible
});
}
}
append(legend.items, data);
},
groupAxes: function(panes) {
var xAxes = [],
yAxes = [],
paneAxes, axis, paneIx, axisIx;
for (paneIx = 0; paneIx < panes.length; paneIx++) {
paneAxes = panes[paneIx].axes;
for (axisIx = 0; axisIx < paneAxes.length; axisIx++) {
axis = paneAxes[axisIx];
if (axis.options.vertical) {
yAxes.push(axis);
} else {
xAxes.push(axis);
}
}
}
return { x: xAxes, y: yAxes, any: xAxes.concat(yAxes) };
},
groupSeriesByPane: function() {
var plotArea = this,
series = plotArea.series,
seriesByPane = {},
i, pane, currentSeries;
for (i = 0; i < series.length; i++) {
currentSeries = series[i];
pane = plotArea.seriesPaneName(currentSeries);
if (seriesByPane[pane]) {
seriesByPane[pane].push(currentSeries);
} else {
seriesByPane[pane] = [currentSeries];
}
}
return seriesByPane;
},
filterVisibleSeries: function(series) {
var i, currentSeries,
result = [];
for (i = 0; i < series.length; i++) {
currentSeries = series[i];
if (currentSeries.visible !== false) {
result.push(currentSeries);
}
}
return result;
},
reflow: function(targetBox) {
var plotArea = this,
options = plotArea.options.plotArea,
panes = plotArea.panes,
margin = getSpacing(options.margin);
plotArea.box = targetBox.clone().unpad(margin);
plotArea.reflowPanes();
plotArea.reflowAxes(panes);
plotArea.reflowCharts(panes);
},
redraw: function(panes) {
var plotArea = this,
i;
panes = [].concat(panes);
this.initSeries();
for (i = 0; i < panes.length; i++) {
plotArea.removeCrosshairs(panes[i]);
panes[i].empty();
}
plotArea.render(panes);
plotArea.reflowAxes(plotArea.panes);
plotArea.reflowCharts(panes);
plotArea.createCrosshairs(panes);
for (i = 0; i < panes.length; i++) {
panes[i].refresh();
}
},
axisCrossingValues: function(axis, crossingAxes) {
var options = axis.options,
crossingValues = [].concat(
options.axisCrossingValues || options.axisCrossingValue
),
valuesToAdd = crossingAxes.length - crossingValues.length,
defaultValue = crossingValues[0] || 0,
i;
for (i = 0; i < valuesToAdd; i++) {
crossingValues.push(defaultValue);
}
return crossingValues;
},
alignAxisTo: function(axis, targetAxis, crossingValue, targetCrossingValue) {
var slot = axis.getSlot(crossingValue, crossingValue, true),
slotEdge = axis.options.reverse ? 2 : 1,
targetSlot = targetAxis.getSlot(targetCrossingValue, targetCrossingValue, true),
targetEdge = targetAxis.options.reverse ? 2 : 1,
axisBox = axis.box.translate(
targetSlot[X + targetEdge] - slot[X + slotEdge],
targetSlot[Y + targetEdge] - slot[Y + slotEdge]
);
if (axis.pane !== targetAxis.pane) {
axisBox.translate(0, axis.pane.box.y1 - targetAxis.pane.box.y1);
}
axis.reflow(axisBox);
},
alignAxes: function(xAxes, yAxes) {
var plotArea = this,
xAnchor = xAxes[0],
yAnchor = yAxes[0],
xAnchorCrossings = plotArea.axisCrossingValues(xAnchor, yAxes),
yAnchorCrossings = plotArea.axisCrossingValues(yAnchor, xAxes),
leftAnchors = {},
rightAnchors = {},
topAnchors = {},
bottomAnchors = {},
pane, paneId, axis, i;
for (i = 0; i < yAxes.length; i++) {
axis = yAxes[i];
pane = axis.pane;
paneId = pane.id;
plotArea.alignAxisTo(axis, xAnchor, yAnchorCrossings[i], xAnchorCrossings[i]);
if (axis.options._overlap) {
continue;
}
if (round(axis.lineBox().x1) === round(xAnchor.lineBox().x1)) {
if (leftAnchors[paneId]) {
axis.reflow(axis.box
.alignTo(leftAnchors[paneId].box, LEFT)
.translate(-axis.options.margin, 0)
);
}
leftAnchors[paneId] = axis;
}
if (round(axis.lineBox().x2) === round(xAnchor.lineBox().x2)) {
if (!axis._mirrored) {
axis.options.labels.mirror = !axis.options.labels.mirror;
axis._mirrored = true;
}
plotArea.alignAxisTo(axis, xAnchor, yAnchorCrossings[i], xAnchorCrossings[i]);
if (rightAnchors[paneId]) {
axis.reflow(axis.box
.alignTo(rightAnchors[paneId].box, RIGHT)
.translate(axis.options.margin, 0)
);
}
rightAnchors[paneId] = axis;
}
if (i !== 0 && yAnchor.pane === axis.pane) {
axis.alignTo(yAnchor);
}
}
for (i = 0; i < xAxes.length; i++) {
axis = xAxes[i];
pane = axis.pane;
paneId = pane.id;
plotArea.alignAxisTo(axis, yAnchor, xAnchorCrossings[i], yAnchorCrossings[i]);
if (axis.options._overlap) {
continue;
}
if (round(axis.lineBox().y1) === round(yAnchor.lineBox().y1)) {
if (!axis._mirrored) {
axis.options.labels.mirror = !axis.options.labels.mirror;
axis._mirrored = true;
}
plotArea.alignAxisTo(axis, yAnchor, xAnchorCrossings[i], yAnchorCrossings[i]);
if (topAnchors[paneId]) {
axis.reflow(axis.box
.alignTo(topAnchors[paneId].box, TOP)
.translate(0, -axis.options.margin)
);
}
topAnchors[paneId] = axis;
}
if (round(axis.lineBox().y2, COORD_PRECISION) === round(yAnchor.lineBox().y2, COORD_PRECISION)) {
if (bottomAnchors[paneId]) {
axis.reflow(axis.box
.alignTo(bottomAnchors[paneId].box, BOTTOM)
.translate(0, axis.options.margin)
);
}
bottomAnchors[paneId] = axis;
}
if (i !== 0) {
axis.alignTo(xAnchor);
}
}
},
shrinkAxisWidth: function(panes) {
var plotArea = this,
axes = plotArea.groupAxes(panes).any,
axisBox = axisGroupBox(axes),
overflowX = 0,
i, currentPane, currentAxis;
for (i = 0; i < panes.length; i++) {
currentPane = panes[i];
if (currentPane.axes.length > 0) {
overflowX = math.max(
overflowX,
axisBox.width() - currentPane.contentBox.width()
);
}
}
for (i = 0; i < axes.length; i++) {
currentAxis = axes[i];
if (!currentAxis.options.vertical) {
currentAxis.reflow(currentAxis.box.shrink(overflowX, 0));
}
}
},
shrinkAxisHeight: function(panes) {
var i, currentPane, axes,
overflowY, j, currentAxis;
for (i = 0; i < panes.length; i++) {
currentPane = panes[i];
axes = currentPane.axes;
overflowY = math.max(
0,
axisGroupBox(axes).height() - currentPane.contentBox.height()
);
for (j = 0; j < axes.length; j++) {
currentAxis = axes[j];
if (currentAxis.options.vertical) {
currentAxis.reflow(
currentAxis.box.shrink(0, overflowY)
);
}
}
}
},
fitAxes: function(panes) {
var plotArea = this,
axes = plotArea.groupAxes(panes).any,
offsetX = 0,
paneAxes, paneBox, axisBox, offsetY,
currentPane, currentAxis, i, j;
for (i = 0; i < panes.length; i++) {
currentPane = panes[i];
paneAxes = currentPane.axes;
paneBox = currentPane.contentBox;
if (paneAxes.length > 0) {
axisBox = axisGroupBox(paneAxes);
// OffsetX is calculated and applied globally
offsetX = math.max(offsetX, paneBox.x1 - axisBox.x1);
// OffsetY is calculated and applied per pane
offsetY = math.max(paneBox.y1 - axisBox.y1, paneBox.y2 - axisBox.y2);
for (j = 0; j < paneAxes.length; j++) {
currentAxis = paneAxes[j];
currentAxis.reflow(
currentAxis.box.translate(0, offsetY)
);
}
}
}
for (i = 0; i < axes.length; i++) {
currentAxis = axes[i];
currentAxis.reflow(
currentAxis.box.translate(offsetX, 0)
);
}
},
reflowAxes: function(panes) {
var plotArea = this,
i,
axes = plotArea.groupAxes(panes);
for (i = 0; i < panes.length; i++) {
plotArea.reflowPaneAxes(panes[i]);
}
if (axes.x.length > 0 && axes.y.length > 0) {
plotArea.alignAxes(axes.x, axes.y);
plotArea.shrinkAxisWidth(panes);
plotArea.alignAxes(axes.x, axes.y);
plotArea.shrinkAxisHeight(panes);
plotArea.alignAxes(axes.x, axes.y);
plotArea.fitAxes(panes);
}
},
reflowPaneAxes: function(pane) {
var axes = pane.axes,
i,
length = axes.length;
if (length > 0) {
for (i = 0; i < length; i++) {
axes[i].reflow(pane.contentBox);
}
}
},
reflowCharts: function(panes) {
var plotArea = this,
charts = plotArea.charts,
count = charts.length,
box = plotArea.box,
chartPane, i;
for (i = 0; i < count; i++) {
chartPane = charts[i].pane;
if (!chartPane || inArray(chartPane, panes)) {
charts[i].reflow(box);
}
}
},
reflowPanes: function() {
var plotArea = this,
box = plotArea.box,
panes = plotArea.panes,
panesLength = panes.length,
i, currentPane, paneBox,
remainingHeight = box.height(),
remainingPanes = panesLength,
autoHeightPanes = 0,
top = box.y1,
height, percents;
for (i = 0; i < panesLength; i++) {
currentPane = panes[i];
height = currentPane.options.height;
currentPane.options.width = box.width();
if (!currentPane.options.height) {
autoHeightPanes++;
} else {
if (height.indexOf && height.indexOf("%")) {
percents = parseInt(height, 10) / 100;
currentPane.options.height = percents * box.height();
}
currentPane.reflow(box.clone());
remainingHeight -= currentPane.options.height;
}
}
for (i = 0; i < panesLength; i++) {
currentPane = panes[i];
if (!currentPane.options.height) {
currentPane.options.height = remainingHeight / autoHeightPanes;
}
}
for (i = 0; i < panesLength; i++) {
currentPane = panes[i];
paneBox = box
.clone()
.move(box.x1, top);
currentPane.reflow(paneBox);
remainingPanes--;
top += currentPane.options.height;
}
},
backgroundBox: function() {
var plotArea = this,
axes = plotArea.axes,
axesCount = axes.length,
lineBox, box, i, j, axisA, axisB;
for (i = 0; i < axesCount; i++) {
axisA = axes[i];
for (j = 0; j < axesCount; j++) {
axisB = axes[j];
if (axisA.options.vertical !== axisB.options.vertical) {
lineBox = axisA.lineBox().clone().wrap(axisB.lineBox());
if (!box) {
box = lineBox;
} else {
box = box.wrap(lineBox);
}
}
}
}
return box || plotArea.box;
},
getViewElements: function(view) {
var plotArea = this,
bgBox = plotArea.backgroundBox(),
options = plotArea.options,
userOptions = options.plotArea,
border = userOptions.border || {},
elements = ChartElement.fn.getViewElements.call(plotArea, view);
append(elements, [
view.createRect(bgBox, {
fill: userOptions.background,
fillOpacity: userOptions.opacity,
zIndex: -2,
strokeWidth: 0.1
}),
view.createRect(bgBox, {
id: plotArea.id,
data: { modelId: plotArea.modelId },
stroke: border.width ? border.color : "",
strokeWidth: border.width,
fill: WHITE,
fillOpacity: 0,
zIndex: -1,
dashType: border.dashType
})
]);
return elements;
},
pointsByCategoryIndex: function(categoryIndex) {
var charts = this.charts,
result = [],
i, j, points, point, chart;
if (categoryIndex !== null) {
for (i = 0; i < charts.length; i++) {
chart = charts[i];
if (chart.pane.options.name === "_navigator") {
continue;
}
points = charts[i].categoryPoints[categoryIndex];
if (points && points.length) {
for (j = 0; j < points.length; j++) {
point = points[j];
if (point && defined(point.value) && point.value !== null) {
result.push(point);
}
}
}
}
}
return result;
},
pointsBySeriesIndex: function(seriesIndex) {
var charts = this.charts,
result = [],
points, point, i, j, chart;
for (i = 0; i < charts.length; i++) {
chart = charts[i];
points = chart.points;
for (j = 0; j < points.length; j++) {
point = points[j];
if (point && point.options.index === seriesIndex) {
result.push(point);
}
}
}
return result;
},
paneByPoint: function(point) {
var plotArea = this,
panes = plotArea.panes,
pane, i;
for (i = 0; i < panes.length; i++) {
pane = panes[i];
if (pane.box.containsPoint(point)) {
return pane;
}
}
}
});
var CategoricalPlotArea = PlotAreaBase.extend({
init: function(series, options) {
var plotArea = this;
plotArea.namedCategoryAxes = {};
plotArea.namedValueAxes = {};
plotArea.valueAxisRangeTracker = new AxisGroupRangeTracker();
if (series.length > 0) {
plotArea.invertAxes = inArray(
series[0].type, [BAR, BULLET, VERTICAL_LINE, VERTICAL_AREA, RANGE_BAR, HORIZONTAL_WATERFALL]
);
for (var i = 0; i < series.length; i++) {
var stack = series[i].stack;
if (stack && stack.type === "100%") {
plotArea.stack100 = true;
break;
}
}
}
PlotAreaBase.fn.init.call(plotArea, series, options);
},
options: {
categoryAxis: {
categories: []
},
valueAxis: {}
},
render: function(panes) {
var plotArea = this;
panes = panes || plotArea.panes;
plotArea.createCategoryAxes(panes);
plotArea.aggregateCategories(panes);
plotArea.createCharts(panes);
plotArea.createValueAxes(panes);
},
removeAxis: function(axis) {
var plotArea = this,
axisName = axis.options.name;
PlotAreaBase.fn.removeAxis.call(plotArea, axis);
if (axis instanceof CategoryAxis) {
delete plotArea.namedCategoryAxes[axisName];
} else {
plotArea.valueAxisRangeTracker.reset(axisName);
delete plotArea.namedValueAxes[axisName];
}
if (axis === plotArea.categoryAxis) {
delete plotArea.categoryAxis;
}
if (axis === plotArea.valueAxis) {
delete plotArea.valueAxis;
}
},
createCharts: function(panes) {
var plotArea = this,
seriesByPane = plotArea.groupSeriesByPane(),
i, pane, paneSeries, filteredSeries;
for (i = 0; i < panes.length; i++) {
pane = panes[i];
paneSeries = seriesByPane[pane.options.name || "default"] || [];
plotArea.addToLegend(paneSeries);
filteredSeries = plotArea.filterVisibleSeries(paneSeries);
if (!filteredSeries) {
continue;
}
plotArea.createAreaChart(
filterSeriesByType(filteredSeries, [AREA, VERTICAL_AREA]),
pane
);
plotArea.createBarChart(
filterSeriesByType(filteredSeries, [COLUMN, BAR]),
pane
);
plotArea.createRangeBarChart(
filterSeriesByType(filteredSeries, [RANGE_COLUMN, RANGE_BAR]),
pane
);
plotArea.createBulletChart(
filterSeriesByType(filteredSeries, [BULLET, VERTICAL_BULLET]),
pane
);
plotArea.createLineChart(
filterSeriesByType(filteredSeries, [LINE, VERTICAL_LINE]),
pane
);
plotArea.createCandlestickChart(
filterSeriesByType(filteredSeries, CANDLESTICK),
pane
);
plotArea.createBoxPlotChart(
filterSeriesByType(filteredSeries, BOX_PLOT),
pane
);
plotArea.createOHLCChart(
filterSeriesByType(filteredSeries, OHLC),
pane
);
plotArea.createWaterfallChart(
filterSeriesByType(filteredSeries, [WATERFALL, HORIZONTAL_WATERFALL]),
pane
);
}
},
aggregateCategories: function(panes) {
var plotArea = this,
series = plotArea.srcSeries || plotArea.series,
processedSeries = [],
i, currentSeries,
categoryAxis, axisPane, dateAxis;
for (i = 0; i < series.length; i++) {
currentSeries = series[i];
categoryAxis = plotArea.seriesCategoryAxis(currentSeries);
axisPane = plotArea.findPane(categoryAxis.options.pane);
dateAxis = equalsIgnoreCase(categoryAxis.options.type, DATE);
if ((dateAxis || currentSeries.categoryField) && inArray(axisPane, panes)) {
currentSeries = plotArea.aggregateSeries(currentSeries, categoryAxis);
}
processedSeries.push(currentSeries);
}
plotArea.srcSeries = series;
plotArea.series = processedSeries;
},
aggregateSeries: function(series, categoryAxis) {
var axisOptions = categoryAxis.options,
dateAxis = equalsIgnoreCase(categoryAxis.options.type, DATE),
categories = axisOptions.categories,
srcCategories = axisOptions.srcCategories || categories,
srcData = series.data,
srcPoints = [],
range = categoryAxis.range(),
result = deepExtend({}, series),
aggregatorSeries = deepExtend({}, series),
i, category, categoryIx,
data,
aggregator,
getFn = getField;
result.data = data = [];
if (dateAxis) {
getFn = getDateField;
}
for (i = 0; i < srcData.length; i++) {
if (series.categoryField) {
category = getFn(series.categoryField, srcData[i]);
} else {
category = srcCategories[i];
}
categoryIx = categoryAxis.categoryIndex(category, range);
if (categoryIx > -1) {
srcPoints[categoryIx] = srcPoints[categoryIx] || [];
srcPoints[categoryIx].push(i);
}
}
aggregator = new SeriesAggregator(
aggregatorSeries, SeriesBinder.current, DefaultAggregates.current
);
for (i = 0; i < categories.length; i++) {
data[i] = aggregator.aggregatePoints(
srcPoints[i], categories[i]
);
}
return result;
},
appendChart: function(chart, pane) {
var plotArea = this,
series = chart.options.series,
categoryAxis = plotArea.seriesCategoryAxis(series[0]),
categories = categoryAxis.options.categories,
categoriesToAdd = math.max(0, categoriesCount(series) - categories.length);
while (categoriesToAdd--) {
categories.push("");
}
plotArea.valueAxisRangeTracker.update(chart.valueAxisRanges);
PlotAreaBase.fn.appendChart.call(plotArea, chart, pane);
},
// TODO: Refactor, optionally use series.pane option
seriesPaneName: function(series) {
var plotArea = this,
options = plotArea.options,
axisName = series.axis,
axisOptions = [].concat(options.valueAxis),
axis = $.grep(axisOptions, function(a) { return a.name === axisName; })[0],
panes = options.panes || [{}],
defaultPaneName = (panes[0] || {}).name || "default",
paneName = (axis || {}).pane || defaultPaneName;
return paneName;
},
seriesCategoryAxis: function(series) {
var plotArea = this,
axisName = series.categoryAxis,
axis = axisName ?
plotArea.namedCategoryAxes[axisName] :
plotArea.categoryAxis;
if (!axis) {
throw new Error("Unable to locate category axis with name " + axisName);
}
return axis;
},
stackableChartOptions: function(firstSeries, pane) {
var stack = firstSeries.stack,
isStacked100 = stack && stack.type === "100%",
clip;
if (defined(pane.options.clip)) {
clip = pane.options.clip;
} else if (isStacked100){
clip = false;
}
return {
isStacked: stack,
isStacked100: isStacked100,
clip: clip
};
},
createBarChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
firstSeries = series[0],
barChart = new BarChart(plotArea, extend({
series: series,
invertAxes: plotArea.invertAxes,
gap: firstSeries.gap,
spacing: firstSeries.spacing
}, plotArea.stackableChartOptions(firstSeries, pane)));
plotArea.appendChart(barChart, pane);
},
createRangeBarChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
firstSeries = series[0],
rangeColumnChart = new RangeBarChart(plotArea, {
series: series,
invertAxes: plotArea.invertAxes,
gap: firstSeries.gap,
spacing: firstSeries.spacing
});
plotArea.appendChart(rangeColumnChart, pane);
},
createBulletChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
firstSeries = series[0],
bulletChart = new BulletChart(plotArea, {
series: series,
invertAxes: plotArea.invertAxes,
gap: firstSeries.gap,
spacing: firstSeries.spacing,
clip: pane.options.clip
});
plotArea.appendChart(bulletChart, pane);
},
createLineChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
firstSeries = series[0],
lineChart = new LineChart(plotArea, extend({
invertAxes: plotArea.invertAxes,
series: series
}, plotArea.stackableChartOptions(firstSeries, pane)));
plotArea.appendChart(lineChart, pane);
},
createAreaChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
firstSeries = series[0],
areaChart = new AreaChart(plotArea, extend({
invertAxes: plotArea.invertAxes,
series: series
}, plotArea.stackableChartOptions(firstSeries, pane)));
plotArea.appendChart(areaChart, pane);
},
createOHLCChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
firstSeries = series[0],
chart = new OHLCChart(plotArea, {
invertAxes: plotArea.invertAxes,
gap: firstSeries.gap,
series: series,
spacing: firstSeries.spacing,
clip: pane.options.clip
});
plotArea.appendChart(chart, pane);
},
createCandlestickChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
firstSeries = series[0],
chart = new CandlestickChart(plotArea, {
invertAxes: plotArea.invertAxes,
gap: firstSeries.gap,
series: series,
spacing: firstSeries.spacing,
clip: pane.options.clip
});
plotArea.appendChart(chart, pane);
},
createBoxPlotChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
firstSeries = series[0],
chart = new BoxPlotChart(plotArea, {
invertAxes: plotArea.invertAxes,
gap: firstSeries.gap,
series: series,
spacing: firstSeries.spacing,
clip: pane.options.clip
});
plotArea.appendChart(chart, pane);
},
createWaterfallChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
firstSeries = series[0],
waterfallChart = new WaterfallChart(plotArea, {
series: series,
invertAxes: plotArea.invertAxes,
gap: firstSeries.gap,
spacing: firstSeries.spacing
});
plotArea.appendChart(waterfallChart, pane);
},
axisRequiresRounding: function(categoryAxisName, categoryAxisIndex) {
var plotArea = this,
centeredSeries = filterSeriesByType(plotArea.series, EQUALLY_SPACED_SERIES),
seriesIx,
seriesAxis;
for (seriesIx = 0; seriesIx < centeredSeries.length; seriesIx++) {
seriesAxis = centeredSeries[seriesIx].categoryAxis || "";
if (seriesAxis === categoryAxisName || (!seriesAxis && categoryAxisIndex === 0)) {
return true;
}
}
},
createCategoryAxes: function(panes) {
var plotArea = this,
invertAxes = plotArea.invertAxes,
definitions = [].concat(plotArea.options.categoryAxis),
i, axisOptions, axisPane,
categories, type, name,
categoryAxis, axes = [],
primaryAxis;
for (i = 0; i < definitions.length; i++) {
axisOptions = definitions[i];
axisPane = plotArea.findPane(axisOptions.pane);
if (inArray(axisPane, panes)) {
name = axisOptions.name;
categories = axisOptions.categories || [];
type = axisOptions.type || "";
axisOptions = deepExtend({
vertical: invertAxes,
axisCrossingValue: invertAxes ? MAX_VALUE : 0
}, axisOptions);
if (!defined(axisOptions.justified)) {
axisOptions.justified = plotArea.isJustified();
}
if (plotArea.axisRequiresRounding(name, i)) {
axisOptions.justified = false;
axisOptions.roundToBaseUnit = true;
}
if (isDateAxis(axisOptions, categories[0])) {
categoryAxis = new DateCategoryAxis(axisOptions);
} else {
categoryAxis = new CategoryAxis(axisOptions);
}
if (name) {
if (plotArea.namedCategoryAxes[name]) {
throw new Error(
"Category axis with name " + name + " is already defined"
);
}
plotArea.namedCategoryAxes[name] = categoryAxis;
}
categoryAxis.axisIndex = i;
axes.push(categoryAxis);
plotArea.appendAxis(categoryAxis);
}
}
primaryAxis = plotArea.categoryAxis || axes[0];
plotArea.categoryAxis = primaryAxis;
if (invertAxes) {
plotArea.axisY = primaryAxis;
} else {
plotArea.axisX = primaryAxis;
}
},
isJustified: function() {
var plotArea = this,
series = plotArea.series,
i, currentSeries;
for (i = 0; i < series.length; i++) {
currentSeries = series[i];
if (!inArray(currentSeries.type, [AREA, VERTICAL_AREA])) {
return false;
}
}
return true;
},
createValueAxes: function(panes) {
var plotArea = this,
tracker = plotArea.valueAxisRangeTracker,
defaultRange = tracker.query(),
definitions = [].concat(plotArea.options.valueAxis),
invertAxes = plotArea.invertAxes,
baseOptions = { vertical: !invertAxes },
axisOptions, axisPane, valueAxis,
primaryAxis, axes = [], range,
axisType, defaultAxisRange,
name, i;
if (plotArea.stack100) {
baseOptions.roundToMajorUnit = false;
baseOptions.labels = { format: "P0" };
}
for (i = 0; i < definitions.length; i++) {
axisOptions = definitions[i];
axisPane = plotArea.findPane(axisOptions.pane);
if (inArray(axisPane, panes)) {
name = axisOptions.name;
defaultAxisRange = equalsIgnoreCase(axisOptions.type, LOGARITHMIC) ? {min: 0.1, max: 1} : { min: 0, max: 1 };
range = tracker.query(name) || defaultRange || defaultAxisRange;
if (i === 0 && range && defaultRange) {
range.min = math.min(range.min, defaultRange.min);
range.max = math.max(range.max, defaultRange.max);
}
if (equalsIgnoreCase(axisOptions.type, LOGARITHMIC)) {
axisType = LogarithmicAxis;
} else {
axisType = NumericAxis;
}
valueAxis = new axisType(range.min, range.max,
deepExtend({}, baseOptions, axisOptions)
);
if (name) {
if (plotArea.namedValueAxes[name]) {
throw new Error(
"Value axis with name " + name + " is already defined"
);
}
plotArea.namedValueAxes[name] = valueAxis;
}
valueAxis.axisIndex = i;
axes.push(valueAxis);
plotArea.appendAxis(valueAxis);
}
}
primaryAxis = plotArea.valueAxis || axes[0];
plotArea.valueAxis = primaryAxis;
if (invertAxes) {
plotArea.axisX = primaryAxis;
} else {
plotArea.axisY = primaryAxis;
}
},
click: function(chart, e) {
var plotArea = this,
coords = chart._eventCoordinates(e),
point = new Point2D(coords.x, coords.y),
pane = plotArea.pointPane(point),
allAxes,
i,
axis,
categories = [],
values = [];
if (!pane) {
return;
}
allAxes = pane.axes;
for (i = 0; i < allAxes.length; i++) {
axis = allAxes[i];
if (axis.getValue) {
appendIfNotNull(values, axis.getValue(point));
} else {
appendIfNotNull(categories, axis.getCategory(point));
}
}
if (categories.length === 0) {
appendIfNotNull(
categories, plotArea.categoryAxis.getCategory(point)
);
}
if (categories.length > 0 && values.length > 0) {
chart.trigger(PLOT_AREA_CLICK, {
element: $(e.target),
originalEvent: e,
category: singleItemOrArray(categories),
value: singleItemOrArray(values)
});
}
},
pointPane: function(point) {
var plotArea = this,
panes = plotArea.panes,
currentPane,
i;
for (i = 0; i < panes.length; i++) {
currentPane = panes[i];
if (currentPane.contentBox.containsPoint(point)) {
return currentPane;
}
}
}
});
var AxisGroupRangeTracker = Class.extend({
init: function() {
var tracker = this;
tracker.axisRanges = {};
},
update: function(chartAxisRanges) {
var tracker = this,
axisRanges = tracker.axisRanges,
range,
chartRange,
axisName;
for (axisName in chartAxisRanges) {
range = axisRanges[axisName];
chartRange = chartAxisRanges[axisName];
axisRanges[axisName] = range =
range || { min: MAX_VALUE, max: MIN_VALUE };
range.min = math.min(range.min, chartRange.min);
range.max = math.max(range.max, chartRange.max);
}
},
reset: function(axisName) {
this.axisRanges[axisName] = undefined;
},
query: function(axisName) {
return this.axisRanges[axisName];
}
});
var XYPlotArea = PlotAreaBase.extend({
init: function(series, options) {
var plotArea = this;
plotArea.namedXAxes = {};
plotArea.namedYAxes = {};
plotArea.xAxisRangeTracker = new AxisGroupRangeTracker();
plotArea.yAxisRangeTracker = new AxisGroupRangeTracker();
PlotAreaBase.fn.init.call(plotArea, series, options);
},
options: {
xAxis: {},
yAxis: {}
},
render: function(panes) {
var plotArea = this,
seriesByPane = plotArea.groupSeriesByPane(),
i, pane, paneSeries, filteredSeries;
panes = panes || plotArea.panes;
for (i = 0; i < panes.length; i++) {
pane = panes[i];
paneSeries = seriesByPane[pane.options.name || "default"] || [];
plotArea.addToLegend(paneSeries);
filteredSeries = plotArea.filterVisibleSeries(paneSeries);
if (!filteredSeries) {
continue;
}
plotArea.createScatterChart(
filterSeriesByType(filteredSeries, SCATTER),
pane
);
plotArea.createScatterLineChart(
filterSeriesByType(filteredSeries, SCATTER_LINE),
pane
);
plotArea.createBubbleChart(
filterSeriesByType(filteredSeries, BUBBLE),
pane
);
}
plotArea.createAxes(panes);
},
appendChart: function(chart, pane) {
var plotArea = this;
plotArea.xAxisRangeTracker.update(chart.xAxisRanges);
plotArea.yAxisRangeTracker.update(chart.yAxisRanges);
PlotAreaBase.fn.appendChart.call(plotArea, chart, pane);
},
removeAxis: function(axis) {
var plotArea = this,
axisName = axis.options.name;
PlotAreaBase.fn.removeAxis.call(plotArea, axis);
if (axis.options.vertical) {
plotArea.yAxisRangeTracker.reset(axisName);
delete plotArea.namedYAxes[axisName];
} else {
plotArea.xAxisRangeTracker.reset(axisName);
delete plotArea.namedXAxes[axisName];
}
if (axis === plotArea.axisX) {
delete plotArea.axisX;
}
if (axis === plotArea.axisY) {
delete plotArea.axisY;
}
},
// TODO: Refactor, optionally use series.pane option
seriesPaneName: function(series) {
var plotArea = this,
options = plotArea.options,
xAxisName = series.xAxis,
xAxisOptions = [].concat(options.xAxis),
xAxis = $.grep(xAxisOptions, function(a) { return a.name === xAxisName; })[0],
yAxisName = series.yAxis,
yAxisOptions = [].concat(options.yAxis),
yAxis = $.grep(yAxisOptions, function(a) { return a.name === yAxisName; })[0],
panes = options.panes || [{}],
defaultPaneName = panes[0].name || "default",
paneName = (xAxis || {}).pane || (yAxis || {}).pane || defaultPaneName;
return paneName;
},
createScatterChart: function(series, pane) {
var plotArea = this;
if (series.length > 0) {
plotArea.appendChart(
new ScatterChart(plotArea, { series: series, clip: pane.options.clip }),
pane
);
}
},
createScatterLineChart: function(series, pane) {
var plotArea = this;
if (series.length > 0) {
plotArea.appendChart(
new ScatterLineChart(plotArea, { series: series, clip: pane.options.clip }),
pane
);
}
},
createBubbleChart: function(series, pane) {
var plotArea = this;
if (series.length > 0) {
plotArea.appendChart(
new BubbleChart(plotArea, { series: series, clip: pane.options.clip }),
pane
);
}
},
createXYAxis: function(options, vertical, axisIndex) {
var plotArea = this,
axisName = options.name,
namedAxes = vertical ? plotArea.namedYAxes : plotArea.namedXAxes,
tracker = vertical ? plotArea.yAxisRangeTracker : plotArea.xAxisRangeTracker,
axisOptions = deepExtend({}, options, { vertical: vertical }),
isLog = equalsIgnoreCase(axisOptions.type, LOGARITHMIC),
defaultRange = tracker.query(),
defaultAxisRange = isLog ? {min: 0.1, max: 1} : { min: 0, max: 1 },
range = tracker.query(axisName) || defaultRange || defaultAxisRange,
axis,
axisType,
seriesIx,
series = plotArea.series,
currentSeries,
seriesAxisName,
firstPointValue,
typeSamples = [axisOptions.min, axisOptions.max],
inferredDate,
i;
for (seriesIx = 0; seriesIx < series.length; seriesIx++) {
currentSeries = series[seriesIx];
seriesAxisName = currentSeries[vertical ? "yAxis" : "xAxis"];
if ((seriesAxisName == axisOptions.name) || (axisIndex === 0 && !seriesAxisName)) {
firstPointValue = SeriesBinder.current.bindPoint(currentSeries, 0).valueFields;
typeSamples.push(firstPointValue[vertical ? "y" : "x"]);
break;
}
}
if (axisIndex === 0 && defaultRange) {
range.min = math.min(range.min, defaultRange.min);
range.max = math.max(range.max, defaultRange.max);
}
for (i = 0; i < typeSamples.length; i++) {
if (typeSamples[i] instanceof Date) {
inferredDate = true;
break;
}
}
if (equalsIgnoreCase(axisOptions.type, DATE) || (!axisOptions.type && inferredDate)) {
axisType = DateValueAxis;
} else if (isLog){
axisType = LogarithmicAxis;
} else {
axisType = NumericAxis;
}
axis = new axisType(range.min, range.max, axisOptions);
if (axisName) {
if (namedAxes[axisName]) {
throw new Error(
(vertical ? "Y" : "X") +
" axis with name " + axisName + " is already defined"
);
}
namedAxes[axisName] = axis;
}
plotArea.appendAxis(axis);
return axis;
},
createAxes: function(panes) {
var plotArea = this,
options = plotArea.options,
axisPane,
xAxesOptions = [].concat(options.xAxis),
xAxes = [],
yAxesOptions = [].concat(options.yAxis),
yAxes = [];
each(xAxesOptions, function(i) {
axisPane = plotArea.findPane(this.pane);
if (inArray(axisPane, panes)) {
xAxes.push(plotArea.createXYAxis(this, false, i));
}
});
each(yAxesOptions, function(i) {
axisPane = plotArea.findPane(this.pane);
if (inArray(axisPane, panes)) {
yAxes.push(plotArea.createXYAxis(this, true, i));
}
});
plotArea.axisX = plotArea.axisX || xAxes[0];
plotArea.axisY = plotArea.axisY || yAxes[0];
},
click: function(chart, e) {
var plotArea = this,
coords = chart._eventCoordinates(e),
point = new Point2D(coords.x, coords.y),
allAxes = plotArea.axes,
i,
length = allAxes.length,
axis,
xValues = [],
yValues = [],
currentValue,
values;
for (i = 0; i < length; i++) {
axis = allAxes[i];
values = axis.options.vertical ? yValues : xValues;
currentValue = axis.getValue(point);
if (currentValue !== null) {
values.push(currentValue);
}
}
if (xValues.length > 0 && yValues.length > 0) {
chart.trigger(PLOT_AREA_CLICK, {
element: $(e.target),
originalEvent: e,
x: singleItemOrArray(xValues),
y: singleItemOrArray(yValues)
});
}
}
});
var PiePlotArea = PlotAreaBase.extend({
render: function() {
var plotArea = this,
series = plotArea.series;
plotArea.createPieChart(series);
},
createPieChart: function(series) {
var plotArea = this,
firstSeries = series[0],
pieChart = new PieChart(plotArea, {
series: series,
padding: firstSeries.padding,
startAngle: firstSeries.startAngle,
connectors: firstSeries.connectors,
legend: plotArea.options.legend
});
plotArea.appendChart(pieChart);
},
appendChart: function(chart, pane) {
PlotAreaBase.fn.appendChart.call(this, chart, pane);
append(this.options.legend.items, chart.legendItems);
}
});
var DonutPlotArea = PiePlotArea.extend({
render: function() {
var plotArea = this,
series = plotArea.series;
plotArea.createDonutChart(series);
},
createDonutChart: function(series) {
var plotArea = this,
firstSeries = series[0],
donutChart = new DonutChart(plotArea, {
series: series,
padding: firstSeries.padding,
connectors: firstSeries.connectors,
legend: plotArea.options.legend
});
plotArea.appendChart(donutChart);
}
});
var PieAnimation = ElementAnimation.extend({
options: {
easing: "easeOutElastic",
duration: INITIAL_ANIMATION_DURATION
},
setup: function() {
var element = this.element,
sector = element.config,
startRadius;
if (element.options.singleSegment) {
sector = element;
}
this.endRadius = sector.r;
startRadius = this.startRadius = sector.ir || 0;
sector.r = startRadius;
},
step: function(pos) {
var animation = this,
element = animation.element,
endRadius = animation.endRadius,
sector = element.config,
startRadius = animation.startRadius;
if (element.options.singleSegment) {
sector = element;
}
sector.r = interpolateValue(startRadius, endRadius, pos);
}
});
var BubbleAnimation = ElementAnimation.extend({
options: {
easing: "easeOutElastic",
duration: INITIAL_ANIMATION_DURATION
},
setup: function() {
var circle = this.element;
circle.endRadius = circle.radius;
circle.radius = 0;
},
step: function(pos) {
var circle = this.element,
endRadius = circle.endRadius;
circle.radius = interpolateValue(0, endRadius, pos);
}
});
var BarAnimationDecorator = animationDecorator(BAR, BarAnimation),
PieAnimationDecorator = animationDecorator(PIE, PieAnimation),
BubbleAnimationDecorator = animationDecorator(BUBBLE, BubbleAnimation);
var Highlight = Class.extend({
init: function(view, viewElement) {
var highlight = this;
highlight.view = view;
highlight.viewElement = viewElement;
highlight._overlays = [];
},
options: {
fill: WHITE,
fillOpacity: 0.2,
stroke: WHITE,
strokeWidth: 1,
strokeOpacity: 0.2
},
show: function(points) {
var highlight = this,
view = highlight.view,
container,
overlay,
overlays = highlight._overlays,
overlayElement, i, point,
pointOptions;
highlight.hide();
highlight._points = points = [].concat(points);
for (i = 0; i < points.length; i++) {
point = points[i];
if (point) {
pointOptions = point.options;
if (!pointOptions || (pointOptions.highlight || {}).visible) {
if (point.highlightOverlay && point.visible !== false) {
overlay = point.highlightOverlay(view, highlight.options);
if (overlay) {
overlayElement = view.renderElement(overlay);
overlays.push(overlayElement);
if (point.owner && point.owner.id) {
container = getElement(point.owner.id);
}
(container || highlight.viewElement).appendChild(overlayElement);
}
}
if (point.toggleHighlight) {
point.toggleHighlight(view);
}
}
}
}
},
hide: function() {
var highlight = this,
points = highlight._points,
overlays = highlight._overlays,
overlay, i, point, pointOptions;
while (overlays.length) {
overlay = highlight._overlays.pop();
if (overlay.parentNode) {
overlay.parentNode.removeChild(overlay);
}
}
if (points) {
for (i = 0; i < points.length; i++) {
point = points[i];
if (point) {
pointOptions = point.options;
if (!pointOptions || (pointOptions.highlight || {}).visible) {
if (point.toggleHighlight) {
point.toggleHighlight(highlight.view);
}
}
}
}
}
highlight._points = [];
},
isOverlay: function(element) {
var overlays = this._overlays;
for (var i = 0; i < overlays.length; i++) {
var current = overlays[i];
if (element == current || $.contains(current, element)) {
return true;
}
}
return false;
}
});
var BaseTooltip = Class.extend({
init: function(chartElement, options) {
var tooltip = this;
tooltip.options = deepExtend({}, tooltip.options, options);
tooltip.chartElement = chartElement;
tooltip.template = BaseTooltip.template;
if (!tooltip.template) {
tooltip.template = BaseTooltip.template = renderTemplate(
"" +
"
"
);
}
tooltip.element = $(tooltip.template(tooltip.options));
tooltip.move = proxy(tooltip.move, tooltip);
tooltip._mouseleave = proxy(tooltip._mouseleave, tooltip);
},
destroy: function() {
this._clearShowTimeout();
if (this.element) {
this.element.off(MOUSELEAVE_NS).remove();
this.element = null;
}
},
options: {
border: {
width: 1
},
opacity: 1,
animation: {
duration: TOOLTIP_ANIMATION_DURATION
}
},
move: function() {
var tooltip = this,
options = tooltip.options,
element = tooltip.element,
offset;
if (!tooltip.anchor) {
return;
}
offset = tooltip._offset();
if (!tooltip.visible) {
element.css({ top: offset.top, left: offset.left });
}
tooltip._ensureElement(document.body);
element
.stop(true, true)
.show()
.animate({
left: offset.left,
top: offset.top
}, options.animation.duration);
tooltip.visible = true;
},
_clearShowTimeout: function() {
if (this.showTimeout) {
clearTimeout(this.showTimeout);
this.showTimeout = null;
}
},
_padding: function() {
if (!this._chartPadding) {
var chartElement = this.chartElement;
this._chartPadding = {
top: parseInt(chartElement.css("paddingTop"), 10),
left: parseInt(chartElement.css("paddingLeft"), 10)
};
}
return this._chartPadding;
},
_offset: function() {
var tooltip = this,
size = tooltip._measure(),
anchor = tooltip.anchor,
chartPadding = tooltip._padding(),
chartOffset = tooltip.chartElement.offset(),
top = round(anchor.y + chartPadding.top + chartOffset.top),
left = round(anchor.x + chartPadding.left + chartOffset.left),
zoomLevel = kendo.support.zoomLevel(),
viewport = $(window),
scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0,
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || 0;
top += tooltip._fit(top - scrollTop, size.height, viewport.outerHeight() / zoomLevel);
left += tooltip._fit(left - scrollLeft, size.width, viewport.outerWidth() / zoomLevel);
return {
top: top,
left: left
};
},
setStyle: function(options, point) {
var background = options.background;
var border = options.border.color;
if (point) {
var pointColor = point.color || point.options.color;
background = valueOrDefault(background, pointColor);
border = valueOrDefault(border, pointColor);
}
if (!defined(options.color)) {
var brightness = new Color(background).percBrightness();
this.element.toggleClass(
CSS_PREFIX + TOOLTIP_INVERSE,
brightness > 180
);
}
this.element.css({
backgroundColor: background,
borderColor: border,
font: options.font,
color: options.color,
opacity: options.opacity,
borderWidth: options.border.width
});
},
show: function() {
this._clearShowTimeout();
this.showTimeout = setTimeout(this.move, TOOLTIP_SHOW_DELAY);
},
hide: function() {
var tooltip = this;
clearTimeout(tooltip.showTimeout);
tooltip._hideElement();
if (tooltip.visible) {
tooltip.point = null;
tooltip.visible = false;
tooltip.index = null;
}
},
_measure: function() {
this._ensureElement();
var size = {
width: this.element.outerWidth(),
height: this.element.outerHeight()
};
return size;
},
_ensureElement: function() {
if (this.element) {
this.element
.appendTo(document.body)
.on(MOUSELEAVE_NS, this._mouseleave);
}
},
_mouseleave: function(e) {
var target = e.relatedTarget;
var chart = this.chartElement[0];
if (target && target !== chart && !$.contains(chart, target)) {
this.hide();
}
},
_hideElement: function() {
if (this.element) {
this.element.fadeOut({
always: function(){
$(this).off(MOUSELEAVE_NS).remove();
}
});
}
},
_pointContent: function(point) {
var tooltip = this,
options = deepExtend({}, tooltip.options, point.options.tooltip),
content, tooltipTemplate;
if (defined(point.value)) {
content = point.value.toString();
}
if (options.template) {
tooltipTemplate = template(options.template);
content = tooltipTemplate({
value: point.value,
category: point.category,
series: point.series,
dataItem: point.dataItem,
percentage: point.percentage,
runningTotal: point.runningTotal,
total: point.total,
low: point.low,
high: point.high,
xLow: point.xLow,
xHigh: point.xHigh,
yLow: point.yLow,
yHigh: point.yHigh
});
} else if (options.format) {
content = point.formatValue(options.format);
}
return content;
},
_pointAnchor: function(point) {
var size = this._measure();
return point.tooltipAnchor(size.width, size.height);
},
_fit: function(offset, size, viewPortSize) {
var output = 0;
if (offset + size > viewPortSize) {
output = viewPortSize - (offset + size);
}
if (offset < 0) {
output = -offset;
}
return output;
}
});
var Tooltip = BaseTooltip.extend({
show: function(point) {
var tooltip = this,
options = deepExtend({}, tooltip.options, point.options.tooltip);
if (!point) {
return;
}
tooltip.element.html(tooltip._pointContent(point));
tooltip.anchor = tooltip._pointAnchor(point);
if (tooltip.anchor) {
tooltip.setStyle(options, point);
BaseTooltip.fn.show.call(tooltip, point);
} else {
tooltip.hide();
}
}
});
var SharedTooltip = BaseTooltip.extend({
init: function(element, plotArea, options) {
var tooltip = this;
BaseTooltip.fn.init.call(tooltip, element, options);
tooltip.plotArea = plotArea;
},
options: {
sharedTemplate:
"" +
"#= categoryText # " +
"# for(var i = 0; i < points.length; i++) { #" +
"# var point = points[i]; #" +
"" +
"# if(point.series.name) { # " +
" #= point.series.name #: " +
"# } #" +
"#= content(point) # " +
" " +
"# } #" +
"
",
categoryFormat: "{0:d}"
},
showAt: function(points, coords) {
var tooltip = this,
options = tooltip.options,
plotArea = tooltip.plotArea,
axis = plotArea.categoryAxis,
index = axis.pointCategoryIndex(coords),
category = axis.getCategory(coords),
slot = axis.getSlot(index),
content;
points = $.grep(points, function(p) {
var tooltip = p.series.tooltip,
excluded = tooltip && tooltip.visible === false;
return !excluded;
});
if (points.length > 0) {
content = tooltip._content(points, category);
tooltip.element.html(content);
tooltip.anchor = tooltip._slotAnchor(coords, slot);
tooltip.setStyle(options, points[0]);
BaseTooltip.fn.show.call(tooltip);
}
},
_slotAnchor: function(point, slot) {
var tooltip = this,
plotArea = tooltip.plotArea,
axis = plotArea.categoryAxis,
anchor,
size = this._measure(),
hCenter = point.y - size.height / 2;
if (axis.options.vertical) {
anchor = Point2D(point.x, hCenter);
} else {
anchor = Point2D(slot.center().x, hCenter);
}
return anchor;
},
_content: function(points, category) {
var tooltip = this,
template,
content;
template = kendo.template(tooltip.options.sharedTemplate);
content = template({
points: points,
category: category,
categoryText: autoFormat(tooltip.options.categoryFormat, category),
content: tooltip._pointContent
});
return content;
}
});
var Crosshair = ChartElement.extend({
init: function(axis, options) {
var crosshair = this;
ChartElement.fn.init.call(crosshair, options);
crosshair.axis = axis;
if (!crosshair.id) {
crosshair.id = uniqueId();
}
crosshair._visible = false;
crosshair.stickyMode = axis instanceof CategoryAxis;
crosshair.enableDiscovery();
},
options: {
color: BLACK,
width: 1,
zIndex: -1,
tooltip: {
visible: false
}
},
repaint: function() {
var crosshair = this,
element = crosshair.element;
crosshair.getViewElements(crosshair._view);
element = crosshair.element;
element.refresh(getElement(crosshair.id));
},
showAt: function(point) {
var crosshair = this;
crosshair._visible = true;
crosshair.point = point;
crosshair.repaint();
if (crosshair.options.tooltip.visible) {
if (!crosshair.tooltip) {
crosshair.tooltip = new CrosshairTooltip(
crosshair,
deepExtend({}, crosshair.options.tooltip, { stickyMode: crosshair.stickyMode })
);
}
crosshair.tooltip.showAt(point);
}
},
hide: function() {
var crosshair = this;
if (crosshair._visible) {
crosshair._visible = false;
crosshair.repaint();
if (crosshair.tooltip) {
crosshair.tooltip.hide();
}
}
},
linePoints: function() {
var crosshair = this,
axis = crosshair.axis,
vertical = axis.options.vertical,
box = crosshair.getBox(),
point = crosshair.point,
dim = vertical ? Y : X,
slot, lineStart, lineEnd;
lineStart = Point2D(box.x1, box.y1);
if (vertical) {
lineEnd = Point2D(box.x2, box.y1);
} else {
lineEnd = Point2D(box.x1, box.y2);
}
if (point) {
if (crosshair.stickyMode) {
slot = axis.getSlot(axis.pointCategoryIndex(point));
lineStart[dim] = lineEnd[dim] = slot.center()[dim];
} else {
lineStart[dim] = lineEnd[dim] = point[dim];
}
}
crosshair.box = box;
return [lineStart, lineEnd];
},
getBox: function() {
var crosshair = this,
axis = crosshair.axis,
axes = axis.pane.axes,
length = axes.length,
vertical = axis.options.vertical,
box = axis.lineBox().clone(),
dim = vertical ? X : Y,
axisLineBox, currentAxis, i;
for (i = 0; i < length; i++) {
currentAxis = axes[i];
if (currentAxis.options.vertical != vertical) {
if (!axisLineBox) {
axisLineBox = currentAxis.lineBox().clone();
} else {
axisLineBox.wrap(currentAxis.lineBox());
}
}
}
box[dim + 1] = axisLineBox[dim + 1];
box[dim + 2] = axisLineBox[dim + 2];
return box;
},
getViewElements: function(view) {
var crosshair = this,
options = crosshair.options,
elements = [];
crosshair.points = crosshair.linePoints();
crosshair.element = view.createPolyline(crosshair.points, false, {
data: { modelId: crosshair.modelId },
id: crosshair.id,
stroke: options.color,
strokeWidth: options.width,
strokeOpacity: options.opacity,
dashType: options.dashType,
zIndex: options.zIndex,
visible: crosshair._visible
});
elements.push(crosshair.element);
crosshair._view = view;
append(elements, ChartElement.fn.getViewElements.call(crosshair, view));
return elements;
},
destroy: function() {
var crosshair = this;
if (crosshair.tooltip) {
crosshair.tooltip.destroy();
}
ChartElement.fn.destroy.call(crosshair);
}
});
var CrosshairTooltip = BaseTooltip.extend({
init: function(crosshair, options) {
var tooltip = this,
chartElement = crosshair.axis.getRoot().parent.element;
tooltip.crosshair = crosshair;
BaseTooltip.fn.init.call(tooltip, chartElement, deepExtend({},
tooltip.options, {
background: crosshair.axis.plotArea.options.seriesColors[0]
},
options));
tooltip.setStyle(tooltip.options);
},
options: {
padding: 10
},
showAt: function(point) {
var tooltip = this,
element = tooltip.element;
tooltip.point = point;
tooltip.element.html(tooltip.content(point));
tooltip.anchor = tooltip.getAnchor();
tooltip.move();
},
move: function() {
var tooltip = this,
element = tooltip.element,
offset = tooltip._offset();
tooltip._ensureElement();
element.css({ top: offset.top, left: offset.left }).show();
},
content: function(point) {
var tooltip = this,
options = tooltip.options,
axis = tooltip.crosshair.axis,
axisOptions = axis.options,
content, value, tooltipTemplate;
value = content = axis[options.stickyMode ? "getCategory" : "getValue"](point);
if (options.template) {
tooltipTemplate = template(options.template);
content = tooltipTemplate({
value: value
});
} else if (options.format) {
content = autoFormat(options.format, value);
} else {
if (axisOptions.type === DATE) {
content = autoFormat(axisOptions.labels.dateFormats[axisOptions.baseUnit], value);
}
}
return content;
},
getAnchor: function() {
var tooltip = this,
options = tooltip.options,
position = options.position,
vertical = tooltip.crosshair.axis.options.vertical,
points = tooltip.crosshair.points,
fPoint = points[0],
sPoint = points[1],
size = this._measure(),
halfWidth = size.width / 2,
halfHeight = size.height / 2,
padding = options.padding,
x, y;
if (vertical) {
if (position === LEFT) {
x = fPoint.x - size.width - padding;
y = fPoint.y - halfHeight;
} else {
x = sPoint.x + padding;
y = sPoint.y - halfHeight;
}
} else {
if (position === BOTTOM) {
x = sPoint.x - halfWidth;
y = sPoint.y + padding;
} else {
x = fPoint.x - halfWidth;
y = fPoint.y - size.height - padding;
}
}
return Point2D(x, y);
},
hide: function() {
this.element.hide();
this.point = null;
},
destroy: function() {
BaseTooltip.fn.destroy.call(this);
this.point = null;
}
});
var Aggregates = {
min: function(values) {
var min = MAX_VALUE,
i,
length = values.length,
n;
for (i = 0; i < length; i++) {
n = values[i];
if (isNumber(n)) {
min = math.min(min, n);
}
}
return min === MAX_VALUE ? values[0] : min;
},
max: function(values) {
var max = MIN_VALUE,
i,
length = values.length,
n;
for (i = 0; i < length; i++) {
n = values[i];
if (isNumber(n)) {
max = math.max(max, n);
}
}
return max === MIN_VALUE ? values[0] : max;
},
sum: function(values) {
var length = values.length,
sum = 0,
i,
n;
for (i = 0; i < length; i++) {
n = values[i];
if (isNumber(n)) {
sum += n;
}
}
return sum;
},
count: function(values) {
var length = values.length,
count = 0,
i,
val;
for (i = 0; i < length; i++) {
val = values[i];
if (val !== null && defined(val)) {
count++;
}
}
return count;
},
avg: function(values) {
var result = values[0],
count = countNumbers(values);
if (count > 0) {
result = Aggregates.sum(values) / count;
}
return result;
},
first: function(values) {
var length = values.length,
i,
val;
for (i = 0; i < length; i++) {
val = values[i];
if (val !== null && defined(val)) {
return val;
}
}
return values[0];
}
};
function DefaultAggregates() {
this._defaults = {};
}
DefaultAggregates.prototype = {
register: function(seriesTypes, aggregates) {
for (var i = 0; i < seriesTypes.length; i++) {
this._defaults[seriesTypes[i]] = aggregates;
}
},
query: function(seriesType) {
return this._defaults[seriesType];
}
};
DefaultAggregates.current = new DefaultAggregates();
var Selection = Observable.extend({
init: function(chart, categoryAxis, options) {
var that = this,
chartElement = chart.element,
categoryAxisLineBox = categoryAxis.lineBox(),
valueAxis = that.getValueAxis(categoryAxis),
valueAxisLineBox = valueAxis.lineBox(),
selectorPrefix = "." + CSS_PREFIX,
wrapper, padding;
Observable.fn.init.call(that);
that.options = deepExtend({}, that.options, options);
options = that.options;
that.chart = chart;
that.chartElement = chartElement;
that.categoryAxis = categoryAxis;
that._dateAxis = that.categoryAxis instanceof DateCategoryAxis;
that.valueAxis = valueAxis;
if (that._dateAxis) {
deepExtend(options, {
min: toDate(options.min),
max: toDate(options.max),
from: toDate(options.from),
to: toDate(options.to)
});
}
that.template = Selection.template;
if (!that.template) {
that.template = Selection.template = renderTemplate(
""
);
}
padding = {
left: parseInt(chartElement.css("paddingLeft"), 10),
right: parseInt(chartElement.css("paddingTop"), 10)
};
that.options = deepExtend({}, {
width: categoryAxisLineBox.width(),
height: valueAxisLineBox.height(),
padding: padding,
offset: {
left: valueAxisLineBox.x2 + padding.left,
top: valueAxisLineBox.y1 + padding.right
},
from: options.min,
to: options.max
}, options);
if (that.options.visible) {
that.wrapper = wrapper = $(that.template(that.options)).appendTo(chartElement);
that.selection = wrapper.find(selectorPrefix + "selection");
that.leftMask = wrapper.find(selectorPrefix + "mask").first();
that.rightMask = wrapper.find(selectorPrefix + "mask").last();
that.leftHandle = wrapper.find(selectorPrefix + "leftHandle");
that.rightHandle = wrapper.find(selectorPrefix + "rightHandle");
that.options.selection = {
border: {
left: parseFloat(that.selection.css("border-left-width"), 10),
right: parseFloat(that.selection.css("border-right-width"), 10)
}
};
that.leftHandle.css("top", (that.selection.height() - that.leftHandle.height()) / 2);
that.rightHandle.css("top", (that.selection.height() - that.rightHandle.height()) / 2);
that.set(that._index(options.from), that._index(options.to));
that.bind(that.events, that.options);
that.wrapper[0].style.cssText = that.wrapper[0].style.cssText;
that.wrapper.on(MOUSEWHEEL_NS, proxy(that._mousewheel, that));
if (kendo.UserEvents) {
that.userEvents = new kendo.UserEvents(that.wrapper, {
global: true,
stopPropagation: true,
multiTouch: true,
start: proxy(that._start, that),
move: proxy(that._move, that),
end: proxy(that._end, that),
tap: proxy(that._tap, that),
gesturestart: proxy(that._gesturechange, that),
gesturechange: proxy(that._gesturechange, that)
});
} else {
that.leftHandle.add(that.rightHandle).removeClass(CSS_PREFIX + "handle");
}
}
},
events: [
SELECT_START,
SELECT,
SELECT_END
],
options: {
visible: true,
mousewheel: {
zoom: BOTH
},
min: MIN_VALUE,
max: MAX_VALUE
},
destroy: function() {
var that = this,
userEvents = that.userEvents;
if (userEvents) {
userEvents.destroy();
}
},
_rangeEventArgs: function(range) {
var that = this;
return {
axis: that.categoryAxis.options,
from: that._value(range.from),
to: that._value(range.to)
};
},
_start: function(e) {
var that = this,
options = that.options,
target = $(e.event.target),
args;
if (that._state || !target) {
return;
}
that.chart._unsetActivePoint();
that._state = {
moveTarget: target.parents(".k-handle").add(target).first(),
startLocation: e.x ? e.x.location : 0,
range: {
from: that._index(options.from),
to: that._index(options.to)
}
};
args = that._rangeEventArgs({
from: that._index(options.from),
to: that._index(options.to)
});
if (that.trigger(SELECT_START, args)) {
that.userEvents.cancel();
that._state = null;
}
},
_move: function(e) {
if (!this._state) {
return;
}
var that = this,
state = that._state,
options = that.options,
categories = that.categoryAxis.options.categories,
from = that._index(options.from),
to = that._index(options.to),
min = that._index(options.min),
max = that._index(options.max),
delta = state.startLocation - e.x.location,
range = state.range,
oldRange = { from: range.from, to: range.to },
span = range.to - range.from,
target = state.moveTarget,
scale = that.wrapper.width() / (categories.length - 1),
offset = math.round(delta / scale);
if (!target) {
return;
}
e.preventDefault();
if (target.is(".k-selection, .k-selection-bg")) {
range.from = math.min(
math.max(min, from - offset),
max - span
);
range.to = math.min(
range.from + span,
max
);
} else if (target.is(".k-leftHandle")) {
range.from = math.min(
math.max(min, from - offset),
max - 1
);
range.to = math.max(range.from + 1, range.to);
} else if (target.is(".k-rightHandle")) {
range.to = math.min(
math.max(min + 1, to - offset),
max
);
range.from = math.min(range.to - 1, range.from);
}
if (range.from !== oldRange.from || range.to !== oldRange.to) {
that.move(range.from, range.to);
that.trigger(SELECT, that._rangeEventArgs(range));
}
},
_end: function() {
var that = this,
range = that._state.range;
delete that._state;
that.set(range.from, range.to);
that.trigger(SELECT_END, that._rangeEventArgs(range));
},
_gesturechange: function(e) {
if (!this._state) {
return;
}
var that = this,
chart = that.chart,
state = that._state,
options = that.options,
categoryAxis = that.categoryAxis,
range = state.range,
p0 = chart._toModelCoordinates(e.touches[0].x.location).x,
p1 = chart._toModelCoordinates(e.touches[1].x.location).x,
left = math.min(p0, p1),
right = math.max(p0, p1);
e.preventDefault();
state.moveTarget = null;
range.from =
categoryAxis.pointCategoryIndex(new dataviz.Point2D(left)) ||
options.min;
range.to =
categoryAxis.pointCategoryIndex(new dataviz.Point2D(right)) ||
options.max;
that.move(range.from, range.to);
},
_tap: function(e) {
var that = this,
options = that.options,
coords = that.chart._eventCoordinates(e),
categoryAxis = that.categoryAxis,
categoryIx = categoryAxis.pointCategoryIndex(
new dataviz.Point2D(coords.x, categoryAxis.box.y1)
),
from = that._index(options.from),
to = that._index(options.to),
min = that._index(options.min),
max = that._index(options.max),
span = to - from,
mid = from + span / 2,
offset = math.round(mid - categoryIx),
range = {},
rightClick = e.event.which === 3;
if (that._state || rightClick) {
return;
}
e.preventDefault();
that.chart._unsetActivePoint();
if (!categoryAxis.options.justified) {
offset--;
}
range.from = math.min(
math.max(min, from - offset),
max - span
);
range.to = math.min(range.from + span, max);
that._start(e);
if (that._state) {
that._state.range = range;
that.trigger(SELECT, that._rangeEventArgs(range));
that._end();
}
},
_mousewheel: function(e) {
var that = this,
options = that.options,
delta = mwDelta(e);
that._start({ event: { target: that.selection } });
if (that._state) {
var range = that._state.range;
e.preventDefault();
e.stopPropagation();
if (math.abs(delta) > 1) {
delta *= ZOOM_ACCELERATION;
}
if (options.mousewheel.reverse) {
delta *= -1;
}
if (that.expand(delta)) {
that.trigger(SELECT, {
axis: that.categoryAxis.options,
delta: delta,
originalEvent: e,
from: that._value(range.from),
to: that._value(range.to)
});
}
if (that._mwTimeout) {
clearTimeout(that._mwTimeout);
}
that._mwTimeout = setTimeout(function() {
that._end();
}, MOUSEWHEEL_DELAY);
}
},
_index: function(value) {
var that = this,
categoryAxis = that.categoryAxis,
categories = categoryAxis.options.categories,
index = value;
if (value instanceof Date) {
index = lteDateIndex(value, categories);
if (!categoryAxis.options.justified && value > last(categories)) {
index += 1;
}
}
return index;
},
_value: function(index) {
var that = this,
categoryAxis = this.categoryAxis,
categories = categoryAxis.options.categories,
value = index;
if (that._dateAxis) {
if (index > categories.length - 1) {
value = that.options.max;
} else {
value = categories[index];
}
}
return value;
},
_slot: function(value) {
var that = this,
categoryAxis = this.categoryAxis;
return categoryAxis.getSlot(that._index(value));
},
move: function(from, to) {
var that = this,
options = that.options,
offset = options.offset,
padding = options.padding,
border = options.selection.border,
leftMaskWidth,
rightMaskWidth,
box,
distance;
box = that._slot(from);
leftMaskWidth = round(box.x1 - offset.left + padding.left);
that.leftMask.width(leftMaskWidth);
that.selection.css("left", leftMaskWidth);
box = that._slot(to);
rightMaskWidth = round(options.width - (box.x1 - offset.left + padding.left));
that.rightMask.width(rightMaskWidth);
distance = options.width - rightMaskWidth;
if (distance != options.width) {
distance += border.right;
}
that.rightMask.css("left", distance);
that.selection.width(math.max(
options.width - (leftMaskWidth + rightMaskWidth) - border.right,
0
));
},
set: function(from, to) {
var that = this,
options = that.options,
min = that._index(options.min),
max = that._index(options.max);
from = limitValue(that._index(from), min, max);
to = limitValue(that._index(to), from + 1, max);
if (options.visible) {
that.move(from, to);
}
options.from = that._value(from);
options.to = that._value(to);
},
expand: function(delta) {
var that = this,
options = that.options,
min = that._index(options.min),
max = that._index(options.max),
zDir = options.mousewheel.zoom,
from = that._index(options.from),
to = that._index(options.to),
range = { from: from, to: to },
oldRange = deepExtend({}, range);
if (that._state) {
range = that._state.range;
}
if (zDir !== RIGHT) {
range.from = limitValue(
limitValue(from - delta, 0, to - 1),
min, max
);
}
if (zDir !== LEFT) {
range.to = limitValue(
limitValue(to + delta, range.from + 1, max),
min,
max
);
}
if (range.from !== oldRange.from || range.to !== oldRange.to) {
that.set(range.from, range.to);
return true;
}
},
getValueAxis: function(categoryAxis) {
var axes = categoryAxis.pane.axes,
axesCount = axes.length,
i, axis;
for (i = 0; i < axesCount; i++) {
axis = axes[i];
if (axis.options.vertical !== categoryAxis.options.vertical) {
return axis;
}
}
}
});
var SeriesAggregator = function(series, binder, defaultAggregates) {
var sa = this,
canonicalFields = binder.canonicalFields(series),
valueFields = binder.valueFields(series),
sourceFields = binder.sourceFields(series, canonicalFields),
seriesFields = sa._seriesFields = [],
defaults = defaultAggregates.query(series.type),
rootAggregate = series.aggregate || defaults,
i;
sa._series = series;
sa._binder = binder;
for (i = 0; i < canonicalFields.length; i++) {
var field = canonicalFields[i],
fieldAggregate;
if (typeof rootAggregate === OBJECT) {
fieldAggregate = rootAggregate[field];
} else if (i === 0 || inArray(field, valueFields)) {
fieldAggregate = rootAggregate;
} else {
break;
}
if (fieldAggregate) {
seriesFields.push({
canonicalName: field,
name: sourceFields[i],
transform: isFn(fieldAggregate) ?
fieldAggregate : Aggregates[fieldAggregate]
});
}
}
};
SeriesAggregator.prototype = {
aggregatePoints: function(srcPoints, group) {
var sa = this,
data = sa._bindPoints(srcPoints || []),
series = sa._series,
seriesFields = sa._seriesFields,
i,
field,
srcValues,
value,
firstDataItem = data.dataItems[0],
result = {};
if (firstDataItem && !isNumber(firstDataItem) && !isArray(firstDataItem)) {
var fn = function() {};
fn.prototype = firstDataItem;
result = new fn();
}
for (i = 0; i < seriesFields.length; i++) {
field = seriesFields[i];
srcValues = sa._bindField(data.values, field.canonicalName);
value = field.transform(srcValues, series, data.dataItems, group);
if (value !== null && typeof value === OBJECT && !defined(value.length)) {
result = value;
break;
} else {
if (defined(value)) {
ensureTree(field.name, result);
kendo.setter(field.name)(result, value);
}
}
}
return result;
},
_bindPoints: function(points) {
var sa = this,
binder = sa._binder,
series = sa._series,
values = [],
dataItems = [],
i,
pointIx;
for (i = 0; i < points.length; i++) {
pointIx = points[i];
values.push(binder.bindPoint(series, pointIx));
dataItems.push(series.data[pointIx]);
}
return {
values: values,
dataItems: dataItems
};
},
_bindField: function(data, field) {
var values = [],
count = data.length,
i, item, value, valueFields;
for (i = 0; i < count; i++) {
item = data[i];
valueFields = item.valueFields;
if (defined(valueFields[field])) {
value = valueFields[field];
} else {
value = item.fields[field];
}
values.push(value);
}
return values;
}
};
function sparseArrayMin(arr) {
return sparseArrayLimits(arr).min;
}
function sparseArrayMax(arr) {
return sparseArrayLimits(arr).max;
}
function sparseArrayLimits(arr) {
var min = MAX_VALUE,
max = MIN_VALUE,
i,
length = arr.length,
n;
for (i = 0; i < length; i++) {
n = arr[i];
if (n !== null && isFinite(n)) {
min = math.min(min, n);
max = math.max(max, n);
}
}
return {
min: min === MAX_VALUE ? undefined : min,
max: max === MIN_VALUE ? undefined : max
};
}
function intersection(a1, a2, b1, b2) {
var result,
ua_t = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x),
u_b = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y),
ua;
if (u_b !== 0) {
ua = (ua_t / u_b);
result = new Point2D(
a1.x + ua * (a2.x - a1.x),
a1.y + ua * (a2.y - a1.y)
);
}
return result;
}
function applySeriesDefaults(options, themeOptions) {
var series = options.series,
i,
seriesLength = series.length,
seriesType,
seriesDefaults = options.seriesDefaults,
commonDefaults = deepExtend({}, options.seriesDefaults),
themeSeriesDefaults = themeOptions ? deepExtend({}, themeOptions.seriesDefaults) : {},
commonThemeDefaults = deepExtend({}, themeSeriesDefaults);
cleanupNestedSeriesDefaults(commonDefaults);
cleanupNestedSeriesDefaults(commonThemeDefaults);
for (i = 0; i < seriesLength; i++) {
seriesType = series[i].type || options.seriesDefaults.type;
var baseOptions = deepExtend(
{ data: [] },
commonThemeDefaults,
themeSeriesDefaults[seriesType],
{ tooltip: options.tooltip },
commonDefaults,
seriesDefaults[seriesType]
);
series[i]._defaults = baseOptions;
series[i] = deepExtend({}, baseOptions, series[i]);
}
}
function cleanupNestedSeriesDefaults(seriesDefaults) {
delete seriesDefaults.bar;
delete seriesDefaults.column;
delete seriesDefaults.rangeColumn;
delete seriesDefaults.line;
delete seriesDefaults.verticalLine;
delete seriesDefaults.pie;
delete seriesDefaults.donut;
delete seriesDefaults.area;
delete seriesDefaults.verticalArea;
delete seriesDefaults.scatter;
delete seriesDefaults.scatterLine;
delete seriesDefaults.bubble;
delete seriesDefaults.candlestick;
delete seriesDefaults.ohlc;
delete seriesDefaults.boxPlot;
delete seriesDefaults.bullet;
delete seriesDefaults.verticalBullet;
delete seriesDefaults.polarArea;
delete seriesDefaults.polarLine;
delete seriesDefaults.radarArea;
delete seriesDefaults.radarLine;
delete seriesDefaults.waterfall;
}
function applySeriesColors(options) {
var series = options.series,
colors = options.seriesColors || [],
i,
currentSeries,
seriesColor,
defaults;
for (i = 0; i < series.length; i++) {
currentSeries = series[i];
seriesColor = colors[i % colors.length];
currentSeries.color = currentSeries.color || seriesColor;
defaults = currentSeries._defaults;
if (defaults) {
defaults.color = defaults.color || seriesColor;
}
}
}
function resolveAxisAliases(options) {
var alias;
each([CATEGORY, VALUE, X, Y], function() {
alias = this + "Axes";
if (options[alias]) {
options[this + "Axis"] = options[alias];
delete options[alias];
}
});
}
function applyAxisDefaults(options, themeOptions) {
var themeAxisDefaults = ((themeOptions || {}).axisDefaults) || {};
each([CATEGORY, VALUE, X, Y], function() {
var axisName = this + "Axis",
axes = [].concat(options[axisName]),
axisDefaults = options.axisDefaults || {};
axes = $.map(axes, function(axisOptions) {
var axisColor = (axisOptions || {}).color;
var result = deepExtend({},
themeAxisDefaults,
themeAxisDefaults[axisName],
axisDefaults,
axisDefaults[axisName],
{
line: { color: axisColor },
labels: { color: axisColor },
title: { color: axisColor }
},
axisOptions
);
delete result[axisName];
return result;
});
options[axisName] = axes.length > 1 ? axes : axes[0];
});
}
function categoriesCount(series) {
var seriesCount = series.length,
categories = 0,
i;
for (i = 0; i < seriesCount; i++) {
categories = math.max(categories, series[i].data.length);
}
return categories;
}
function sqr(value) {
return value * value;
}
extend($.easing, {
easeOutElastic: function (n, d, first, diff) {
var s = 1.70158,
p = 0,
a = diff;
if ( n === 0 ) {
return first;
}
if ( n === 1) {
return first + diff;
}
if (!p) {
p = 0.5;
}
if (a < math.abs(diff)) {
a=diff;
s = p / 4;
} else {
s = p / (2 * math.PI) * math.asin(diff / a);
}
return a * math.pow(2,-10 * n) *
math.sin((n * 1 - s) * (1.1 * math.PI) / p) +
diff + first;
}
});
function getField(field, row) {
if (row === null) {
return row;
}
var get = getter(field, true);
return get(row);
}
function getDateField(field, row) {
if (row === null) {
return row;
}
var key = "_date_" + field,
value = row[key];
if (!value) {
value = toDate(getter(field, true)(row));
row[key] = value;
}
return value;
}
function toDate(value) {
var result,
i;
if (value instanceof Date) {
result = value;
} else if (typeof value === STRING) {
result = kendo.parseDate(value) || new Date(value);
} else if (value) {
if (isArray(value)) {
result = [];
for (i = 0; i < value.length; i++) {
result.push(toDate(value[i]));
}
} else {
result = new Date(value);
}
}
return result;
}
function toTime(value) {
if (isArray(value)) {
return map(value, toTime);
} else if (value) {
return toDate(value).getTime();
}
}
function addDuration(date, value, unit, weekStartDay) {
var result = date,
hours;
if (date) {
date = toDate(date);
hours = date.getHours();
if (unit === YEARS) {
result = new Date(date.getFullYear() + value, 0, 1);
} else if (unit === MONTHS) {
result = new Date(date.getFullYear(), date.getMonth() + value, 1);
kendo.date.adjustDST(result, hours);
} else if (unit === WEEKS) {
result = addDuration(startOfWeek(date, weekStartDay), value * 7, DAYS);
kendo.date.adjustDST(result, hours);
} else if (unit === DAYS) {
result = new Date(date.getFullYear(), date.getMonth(), date.getDate() + value);
kendo.date.adjustDST(result, hours);
} else if (unit === HOURS) {
result = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours() + value);
if (value > 0 && dateEquals(date, result)) {
result = addDuration(date, value + 1, unit, weekStartDay);
}
} else if (unit === MINUTES) {
result = new Date(date.getTime() + value * TIME_PER_MINUTE);
if (result.getSeconds() > 0) {
result.setSeconds(0);
}
} else if (unit === SECONDS) {
result = new Date(date.getTime() + value * TIME_PER_SECOND);
}
if (result.getMilliseconds() > 0) {
result.setMilliseconds(0);
}
}
return result;
}
function startOfWeek(date, weekStartDay) {
var day = date.getDay(),
daysToSubtract = 0;
if (!isNaN(day)) {
weekStartDay = weekStartDay || 0;
while (day !== weekStartDay) {
if (day === 0) {
day = 6;
} else {
day--;
}
daysToSubtract++;
}
}
return addTicks(date, -daysToSubtract * TIME_PER_DAY);
}
function floorDate(date, unit, weekStartDay) {
date = toDate(date);
return addDuration(date, 0, unit, weekStartDay);
}
function ceilDate(date, unit, weekStartDay) {
date = toDate(date);
if (date && floorDate(date, unit, weekStartDay).getTime() === date.getTime()) {
return date;
}
return addDuration(date, 1, unit, weekStartDay);
}
function dateDiff(a, b) {
var diff = a.getTime() - b,
offsetDiff = a.getTimezoneOffset() - b.getTimezoneOffset();
return diff - (offsetDiff * TIME_PER_MINUTE);
}
function addTicks(date, ticks) {
var tzOffsetBefore = date.getTimezoneOffset(),
result = new Date(date.getTime() + ticks),
tzOffsetDiff = result.getTimezoneOffset() - tzOffsetBefore;
return new Date(result.getTime() + tzOffsetDiff * TIME_PER_MINUTE);
}
function duration(a, b, unit) {
var diff;
if (unit === YEARS) {
diff = b.getFullYear() - a.getFullYear();
} else if (unit === MONTHS) {
diff = duration(a, b, YEARS) * 12 + b.getMonth() - a.getMonth();
} else if (unit === DAYS) {
diff = math.floor(dateDiff(b, a) / TIME_PER_DAY);
} else {
diff = math.floor((b - a) / TIME_PER_UNIT[unit]);
}
return diff;
}
function singleItemOrArray(array) {
return array.length === 1 ? array[0] : array;
}
function axisGroupBox(axes) {
var length = axes.length,
box, i, axisBox;
if (length > 0) {
for (i = 0; i < length; i++) {
axisBox = axes[i].box;
if (!box) {
box = axisBox.clone();
} else {
box.wrap(axisBox);
}
}
}
return box || Box2D();
}
function equalsIgnoreCase(a, b) {
if (a && b) {
return a.toLowerCase() === b.toLowerCase();
}
return a === b;
}
function dateEquals(a, b) {
if (a && b) {
return toTime(a) === toTime(b);
}
return a === b;
}
function lastValue(array) {
var i = array.length,
value;
while (i--) {
value = array[i];
if (defined(value) && value !== null) {
return value;
}
}
}
function appendIfNotNull(array, element) {
if (element !== null) {
array.push(element);
}
}
function lteDateIndex(date, sortedDates) {
var low = 0,
high = sortedDates.length - 1,
i,
currentDate;
while (low <= high) {
i = math.floor((low + high) / 2);
currentDate = sortedDates[i];
if (currentDate < date) {
low = i + 1;
continue;
}
if (currentDate > date) {
high = i - 1;
continue;
}
while (dateEquals(sortedDates[i - 1], date)) {
i--;
}
return i;
}
if (sortedDates[i] <= date) {
return i;
} else {
return i - 1;
}
}
function isNumber(val) {
return typeof val === "number" && !isNaN(val);
}
function countNumbers(values) {
var length = values.length,
count = 0,
i,
num;
for (i = 0; i < length; i++) {
num = values[i];
if (isNumber(num)) {
count++;
}
}
return count;
}
function areNumbers(values) {
return countNumbers(values) === values.length;
}
function axisRanges(axes) {
var i,
axis,
axisName,
ranges = {};
for (i = 0; i < axes.length; i++) {
axis = axes[i];
axisName = axis.options.name;
if (axisName) {
ranges[axisName] = axis.range();
}
}
return ranges;
}
function evalOptions(options, context, state, dryRun) {
var property,
propValue,
excluded,
defaults,
depth,
needsEval = false;
state = state || {};
excluded = state.excluded = state.excluded || [];
defaults = state.defaults = state.defaults || {};
depth = state.depth = state.depth || 0;
if (depth > MAX_EXPAND_DEPTH) {
return;
}
for (property in options) {
if (!inArray(property, state.excluded)&&options.hasOwnProperty(property)) {
propValue = options[property];
if (isFn(propValue)) {
needsEval = true;
if (!dryRun) {
options[property] = valueOrDefault(propValue(context), defaults[property]);
}
} else if (typeof propValue === OBJECT) {
state.defaults = defaults[property];
state.depth++;
needsEval = evalOptions(propValue, context, state, dryRun) || needsEval;
state.depth--;
}
}
}
return needsEval;
}
function groupSeries(series, data) {
var result = [],
nameTemplate,
legacyTemplate = series.groupNameTemplate,
groupIx,
dataLength = data.length,
seriesClone;
if (defined(legacyTemplate)) {
kendo.logToConsole(
"'groupNameTemplate' is obsolete and will be removed in future versions. " +
"Specify the group name template as 'series.name'"
);
if (legacyTemplate) {
nameTemplate = template(legacyTemplate);
}
} else {
nameTemplate = template(series.name || "");
if (nameTemplate._slotCount === 0) {
nameTemplate = template(defined(series.name) ?
"#= group.value #: #= series.name #" :
"#= group.value #"
);
}
}
for (groupIx = 0; groupIx < dataLength; groupIx++) {
seriesClone = deepExtend({}, series);
if (!isFn(seriesClone.color)) {
seriesClone.color = undefined;
}
seriesClone._groupIx = groupIx;
result.push(seriesClone);
if (nameTemplate) {
seriesClone.name = nameTemplate({
series: seriesClone, group: data[groupIx]
});
}
}
return result;
}
function filterSeriesByType(series, types) {
var i, currentSeries,
result = [];
types = [].concat(types);
for (i = 0; i < series.length; i++) {
currentSeries = series[i];
if (inArray(currentSeries.type, types)) {
result.push(currentSeries);
}
}
return result;
}
function indexOf(item, arr) {
if (item instanceof Date) {
for (var i = 0, length = arr.length; i < length; i++) {
if (dateEquals(arr[i], item)) {
return i;
}
}
return -1;
} else {
return $.inArray(item, arr);
}
}
function sortDates(dates, comparer) {
comparer = comparer || dateComparer;
for (var i = 1, length = dates.length; i < length; i++) {
if (comparer(dates[i], dates[i - 1]) < 0) {
dates.sort(comparer);
break;
}
}
return dates;
}
// Will mutate srcDates, not cloned for performance
function uniqueDates(srcDates, comparer) {
var i,
dates = sortDates(srcDates, comparer),
length = dates.length,
result = length > 0 ? [dates[0]] : [];
comparer = comparer || dateComparer;
for (i = 1; i < length; i++) {
if (comparer(dates[i], last(result)) !== 0) {
result.push(dates[i]);
}
}
return result;
}
function isDateAxis(axisOptions, sampleCategory) {
var type = axisOptions.type,
dateCategory = sampleCategory instanceof Date;
return (!type && dateCategory) || equalsIgnoreCase(type, DATE);
}
function transpose(rows) {
var result = [],
rowCount = rows.length,
rowIx,
row,
colIx,
colCount;
for (rowIx = 0; rowIx < rowCount; rowIx++) {
row = rows[rowIx];
colCount = row.length;
for (colIx = 0; colIx < colCount; colIx++) {
result[colIx] = result[colIx] || [];
result[colIx].push(row[colIx]);
}
}
return result;
}
function ensureTree(fieldName, target) {
if (fieldName.indexOf(".") > -1) {
var parts = fieldName.split("."),
path = "",
val;
while (parts.length > 1) {
path += parts.shift();
val = kendo.getter(path)(target) || {};
kendo.setter(path)(target, val);
path += ".";
}
}
}
function seriesTotal(series) {
var data = series.data;
var sum = 0;
for (var i = 0; i < data.length; i++) {
var pointData = SeriesBinder.current.bindPoint(series, i);
var value = pointData.valueFields.value;
if (typeof value === STRING) {
value = parseFloat(value);
}
if (isNumber(value) && pointData.fields.visible !== false) {
sum += math.abs(value);
}
}
return sum;
}
// Exports ================================================================
dataviz.ui.plugin(Chart);
PlotAreaFactory.current.register(CategoricalPlotArea, [
BAR, COLUMN, LINE, VERTICAL_LINE, AREA, VERTICAL_AREA,
CANDLESTICK, OHLC, BULLET, VERTICAL_BULLET, BOX_PLOT,
RANGE_COLUMN, RANGE_BAR, WATERFALL, HORIZONTAL_WATERFALL
]);
PlotAreaFactory.current.register(XYPlotArea, [
SCATTER, SCATTER_LINE, BUBBLE
]);
PlotAreaFactory.current.register(PiePlotArea, [PIE]);
PlotAreaFactory.current.register(DonutPlotArea, [DONUT]);
SeriesBinder.current.register(
[BAR, COLUMN, LINE, VERTICAL_LINE, AREA, VERTICAL_AREA],
[VALUE], [CATEGORY, COLOR, NOTE_TEXT, ERROR_LOW_FIELD, ERROR_HIGH_FIELD]
);
SeriesBinder.current.register(
[RANGE_COLUMN, RANGE_BAR],
[FROM, TO], [CATEGORY, COLOR, NOTE_TEXT]
);
SeriesBinder.current.register(
[WATERFALL, HORIZONTAL_WATERFALL],
[VALUE], [CATEGORY, COLOR, NOTE_TEXT, SUMMARY_FIELD]
);
DefaultAggregates.current.register(
[BAR, COLUMN, LINE, VERTICAL_LINE, AREA, VERTICAL_AREA, WATERFALL, HORIZONTAL_WATERFALL],
{ value: MAX, color: FIRST, noteText: FIRST, errorLow: MIN, errorHigh: MAX }
);
DefaultAggregates.current.register(
[RANGE_COLUMN, RANGE_BAR],
{ from: MIN, to: MAX, color: FIRST, noteText: FIRST }
);
SeriesBinder.current.register(
[SCATTER, SCATTER_LINE, BUBBLE],
[X, Y], [COLOR, NOTE_TEXT, X_ERROR_LOW_FIELD, X_ERROR_HIGH_FIELD, Y_ERROR_LOW_FIELD, Y_ERROR_HIGH_FIELD]
);
SeriesBinder.current.register(
[BUBBLE], [X, Y, "size"], [COLOR, CATEGORY, NOTE_TEXT]
);
SeriesBinder.current.register(
[CANDLESTICK, OHLC],
["open", "high", "low", "close"], [CATEGORY, COLOR, "downColor", NOTE_TEXT]
);
DefaultAggregates.current.register(
[CANDLESTICK, OHLC],
{ open: MAX, high: MAX, low: MIN, close: MAX,
color: FIRST, downColor: FIRST, noteText: FIRST }
);
SeriesBinder.current.register(
[BOX_PLOT],
["lower", "q1", "median", "q3", "upper", "mean", "outliers"], [CATEGORY, COLOR, NOTE_TEXT]
);
DefaultAggregates.current.register(
[BOX_PLOT],
{ lower: MAX, q1: MAX, median: MAX, q3: MAX, upper: MAX, mean: MAX, outliers: FIRST,
color: FIRST, noteText: FIRST }
);
SeriesBinder.current.register(
[BULLET, VERTICAL_BULLET],
["current", "target"], [CATEGORY, COLOR, "visibleInLegend", NOTE_TEXT]
);
DefaultAggregates.current.register(
[BULLET, VERTICAL_BULLET],
{ current: MAX, target: MAX, color: FIRST, noteText: FIRST }
);
SeriesBinder.current.register(
[PIE, DONUT],
[VALUE], [CATEGORY, COLOR, "explode", "visibleInLegend", "visible"]
);
deepExtend(dataviz, {
EQUALLY_SPACED_SERIES: EQUALLY_SPACED_SERIES,
Aggregates: Aggregates,
AreaChart: AreaChart,
AreaSegment: AreaSegment,
AxisGroupRangeTracker: AxisGroupRangeTracker,
Bar: Bar,
BarAnimationDecorator: BarAnimationDecorator,
BarChart: BarChart,
BarLabel: BarLabel,
BubbleAnimationDecorator: BubbleAnimationDecorator,
BubbleChart: BubbleChart,
BulletChart: BulletChart,
CandlestickChart: CandlestickChart,
Candlestick: Candlestick,
CategoricalChart: CategoricalChart,
CategoricalErrorBar: CategoricalErrorBar,
CategoricalPlotArea: CategoricalPlotArea,
CategoryAxis: CategoryAxis,
ChartContainer: ChartContainer,
ClusterLayout: ClusterLayout,
Crosshair: Crosshair,
CrosshairTooltip: CrosshairTooltip,
DateCategoryAxis: DateCategoryAxis,
DateValueAxis: DateValueAxis,
DefaultAggregates: DefaultAggregates,
DonutChart: DonutChart,
DonutPlotArea: DonutPlotArea,
DonutSegment: DonutSegment,
ErrorBarBase: ErrorBarBase,
ErrorRangeCalculator: ErrorRangeCalculator,
Highlight: Highlight,
SharedTooltip: SharedTooltip,
Legend: Legend,
LegendItem: LegendItem,
LineChart: LineChart,
LinePoint: LinePoint,
LineSegment: LineSegment,
Pane: Pane,
PieAnimation: PieAnimation,
PieAnimationDecorator: PieAnimationDecorator,
PieChart: PieChart,
PieChartMixin: PieChartMixin,
PiePlotArea: PiePlotArea,
PieSegment: PieSegment,
PlotAreaBase: PlotAreaBase,
PlotAreaFactory: PlotAreaFactory,
PointEventsMixin: PointEventsMixin,
RangeBar: RangeBar,
RangeBarChart: RangeBarChart,
ScatterChart: ScatterChart,
ScatterErrorBar: ScatterErrorBar,
ScatterLineChart: ScatterLineChart,
Selection: Selection,
SeriesAggregator: SeriesAggregator,
SeriesBinder: SeriesBinder,
ShapeElement: ShapeElement,
SplineSegment: SplineSegment,
SplineAreaSegment: SplineAreaSegment,
StackWrap: StackWrap,
Tooltip: Tooltip,
OHLCChart: OHLCChart,
OHLCPoint: OHLCPoint,
WaterfallChart: WaterfallChart,
WaterfallSegment: WaterfallSegment,
XYPlotArea: XYPlotArea,
addDuration: addDuration,
areNumbers: areNumbers,
axisGroupBox: axisGroupBox,
categoriesCount: categoriesCount,
ceilDate: ceilDate,
countNumbers: countNumbers,
duration: duration,
ensureTree: ensureTree,
indexOf: indexOf,
isNumber: isNumber,
floorDate: floorDate,
filterSeriesByType: filterSeriesByType,
lteDateIndex: lteDateIndex,
evalOptions: evalOptions,
seriesTotal: seriesTotal,
singleItemOrArray: singleItemOrArray,
sortDates: sortDates,
sparseArrayLimits: sparseArrayLimits,
startOfWeek: startOfWeek,
transpose: transpose,
toDate: toDate,
toTime: toTime,
uniqueDates: uniqueDates
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var math = Math,
kendo = window.kendo,
deepExtend = kendo.deepExtend,
dataviz = kendo.dataviz,
AreaSegment = dataviz.AreaSegment,
Axis = dataviz.Axis,
AxisGroupRangeTracker = dataviz.AxisGroupRangeTracker,
BarChart = dataviz.BarChart,
Box2D = dataviz.Box2D,
CategoryAxis = dataviz.CategoryAxis,
CategoricalChart = dataviz.CategoricalChart,
CategoricalPlotArea = dataviz.CategoricalPlotArea,
ChartElement = dataviz.ChartElement,
CurveProcessor = dataviz.CurveProcessor,
DonutSegment = dataviz.DonutSegment,
LineChart = dataviz.LineChart,
LineSegment = dataviz.LineSegment,
LogarithmicAxis = dataviz.LogarithmicAxis,
NumericAxis = dataviz.NumericAxis,
PlotAreaBase = dataviz.PlotAreaBase,
PlotAreaFactory = dataviz.PlotAreaFactory,
Point2D = dataviz.Point2D,
Ring = dataviz.Ring,
ScatterChart = dataviz.ScatterChart,
ScatterLineChart = dataviz.ScatterLineChart,
SeriesBinder = dataviz.SeriesBinder,
SplineSegment = dataviz.SplineSegment,
SplineAreaSegment = dataviz.SplineAreaSegment,
append = dataviz.append,
getSpacing = dataviz.getSpacing,
filterSeriesByType = dataviz.filterSeriesByType,
limitValue = dataviz.limitValue,
round = dataviz.round;
// Constants ==============================================================
var ARC = "arc",
BLACK = "#000",
COORD_PRECISION = dataviz.COORD_PRECISION,
DEFAULT_PADDING = 0.15,
DEG_TO_RAD = math.PI / 180,
LOGARITHMIC = "log",
PLOT_AREA_CLICK = "plotAreaClick",
POLAR_AREA = "polarArea",
POLAR_LINE = "polarLine",
POLAR_SCATTER = "polarScatter",
RADAR_AREA = "radarArea",
RADAR_COLUMN = "radarColumn",
RADAR_LINE = "radarLine",
SMOOTH = "smooth",
X = "x",
Y = "y",
ZERO = "zero",
POLAR_CHARTS = [
POLAR_AREA, POLAR_LINE, POLAR_SCATTER
],
RADAR_CHARTS = [
RADAR_AREA, RADAR_COLUMN, RADAR_LINE
];
// Polar and radar charts =================================================
var GridLinesMixin = {
renderGridLines: function(view, altAxis) {
var axis = this,
options = axis.options,
radius = math.abs(axis.box.center().y - altAxis.lineBox().y1),
majorAngles,
minorAngles,
skipMajor = false,
gridLines = [];
if (options.majorGridLines.visible) {
majorAngles = axis.majorGridLineAngles(altAxis);
skipMajor = true;
gridLines = axis.gridLineElements(
view, majorAngles, radius, options.majorGridLines
);
}
if (options.minorGridLines.visible) {
minorAngles = axis.minorGridLineAngles(altAxis, skipMajor);
append(gridLines, axis.gridLineElements(
view, minorAngles, radius, options.minorGridLines
));
}
return gridLines;
},
gridLineElements: function(view, angles, radius, options) {
var axis = this,
center = axis.box.center(),
modelId = axis.plotArea.modelId,
i,
outerPt,
elements = [],
lineOptions;
lineOptions = {
data: { modelId: modelId },
zIndex: -1,
strokeWidth: options.width,
stroke: options.color,
dashType: options.dashType
};
for (i = 0; i < angles.length; i++) {
outerPt = Point2D.onCircle(center, angles[i], radius);
elements.push(view.createLine(
center.x, center.y, outerPt.x, outerPt.y,
lineOptions
));
}
return elements;
},
gridLineAngles: function(altAxis, step, skipStep) {
var axis = this,
divs = axis.intervals(step, skipStep);
return $.map(divs, function(d) {
var alpha = axis.intervalAngle(d);
if (!altAxis.options.visible || alpha !== 90) {
return alpha;
}
});
}
};
var RadarCategoryAxis = CategoryAxis.extend({
options: {
startAngle: 90,
labels: {
margin: getSpacing(10)
},
majorGridLines: {
visible: true
},
justified: true
},
range: function() {
return { min: 0, max: this.options.categories.length };
},
reflow: function(box) {
this.box = box;
this.reflowLabels();
},
lineBox: function() {
return this.box;
},
reflowLabels: function() {
var axis = this,
measureBox = new Box2D(),
labels = axis.labels,
labelBox,
i;
for (i = 0; i < labels.length; i++) {
labels[i].reflow(measureBox);
labelBox = labels[i].box;
labels[i].reflow(axis.getSlot(i).adjacentBox(
0, labelBox.width(), labelBox.height()
));
}
},
intervals: function(step, skipStep) {
var axis = this,
options = axis.options,
categories = options.categories.length,
angle = 0,
skipAngle = 0,
divCount = categories / step || 1,
divAngle = 360 / divCount,
divs = [],
i;
if (skipStep) {
skipAngle = 360 / (categories / skipStep);
}
for (i = 0; i < divCount; i++) {
angle = round(angle, COORD_PRECISION);
if (angle % skipAngle !== 0) {
divs.push(angle % 360);
}
if (options.reverse) {
angle = 360 + angle - divAngle;
} else {
angle += divAngle;
}
}
return divs;
},
majorIntervals: function() {
return this.intervals(1);
},
minorIntervals: function() {
return this.intervals(0.5);
},
intervalAngle: function(interval) {
return (360 + interval + this.options.startAngle) % 360;
},
majorAngles: function() {
return $.map(this.majorIntervals(), $.proxy(this.intervalAngle, this));
},
renderLine: function() {
return [];
},
majorGridLineAngles: function(altAxis) {
return this.gridLineAngles(altAxis, 1);
},
minorGridLineAngles: function(altAxis, skipMajor) {
return this.gridLineAngles(altAxis, 0.5, skipMajor ? 1 : 0);
},
renderPlotBands: function(view) {
var axis = this,
options = axis.options,
plotBands = options.plotBands || [],
elements = [],
i,
band,
slot,
singleSlot,
head,
tail;
for (i = 0; i < plotBands.length; i++) {
band = plotBands[i];
slot = axis.plotBandSlot(band);
singleSlot = axis.getSlot(band.from);
head = band.from - math.floor(band.from);
slot.startAngle += head * singleSlot.angle;
tail = math.ceil(band.to) - band.to;
slot.angle -= (tail + head) * singleSlot.angle;
elements.push(view.createSector(slot, {
fill: band.color,
fillOpacity: band.opacity,
strokeOpacity: band.opacity,
zIndex: -1
}));
}
return elements;
},
plotBandSlot: function(band) {
return this.getSlot(band.from, band.to - 1);
},
getSlot: function(from, to) {
var axis = this,
options = axis.options,
justified = options.justified,
box = axis.box,
divs = axis.majorAngles(),
totalDivs = divs.length,
slots,
slotAngle = 360 / totalDivs,
slotStart,
angle;
if (options.reverse && !justified) {
from = (from + 1) % totalDivs;
}
from = limitValue(math.floor(from), 0, totalDivs - 1);
slotStart = divs[from];
if (justified) {
slotStart = slotStart - slotAngle / 2;
if (slotStart < 0) {
slotStart += 360;
}
}
to = limitValue(math.ceil(to || from), from, totalDivs - 1);
slots = to - from + 1;
angle = slotAngle * slots;
return new Ring(
box.center(), 0, box.height() / 2,
slotStart, angle
);
},
pointCategoryIndex: function(point) {
var axis = this,
index = null,
i,
length = axis.options.categories.length,
slot;
for (i = 0; i < length; i++) {
slot = axis.getSlot(i);
if (slot.containsPoint(point)) {
index = i;
break;
}
}
return index;
}
});
deepExtend(RadarCategoryAxis.fn, GridLinesMixin);
var RadarNumericAxisMixin = {
options: {
majorGridLines: {
visible: true
}
},
renderPlotBands: function(view) {
var axis = this,
options = axis.options,
plotBands = options.plotBands || [],
elements = [],
type = options.majorGridLines.type,
altAxis = axis.plotArea.polarAxis,
majorAngles = altAxis.majorAngles(),
center = altAxis.box.center(),
i,
band,
bandStyle,
slot,
ring;
for (i = 0; i < plotBands.length; i++) {
band = plotBands[i];
bandStyle = {
fill: band.color,
fillOpacity: band.opacity,
strokeOpacity: band.opacity,
zIndex: -1
};
slot = axis.getSlot(band.from, band.to, true);
ring = new Ring(center, center.y - slot.y2, center.y - slot.y1, 0, 360);
elements.push(type === ARC ?
view.createRing(ring, bandStyle) :
view.createPolyline(
axis.plotBandPoints(ring, majorAngles), true, bandStyle
)
);
}
return elements;
},
plotBandPoints: function(ring, angles) {
var innerPoints = [],
outerPoints = [],
i;
for (i = 0; i < angles.length; i++) {
innerPoints.push(Point2D.onCircle(ring.c, angles[i], ring.ir));
outerPoints.push(Point2D.onCircle(ring.c, angles[i], ring.r));
}
innerPoints.reverse();
innerPoints.push(innerPoints[0]);
outerPoints.push(outerPoints[0]);
return outerPoints.concat(innerPoints);
},
renderGridLines: function(view, altAxis) {
var axis = this,
options = axis.options,
majorTicks = axis.radarMajorGridLinePositions(),
majorAngles = altAxis.majorAngles(),
minorTicks,
center = altAxis.box.center(),
gridLines = [];
if (options.majorGridLines.visible) {
gridLines = axis.gridLineElements(
view, center, majorTicks, majorAngles, options.majorGridLines
);
}
if (options.minorGridLines.visible) {
minorTicks = axis.radarMinorGridLinePositions();
append(gridLines, axis.gridLineElements(
view, center, minorTicks, majorAngles, options.minorGridLines
));
}
return gridLines;
},
gridLineElements: function(view, center, ticks, angles, options) {
var axis = this,
modelId = axis.plotArea.modelId,
elements = [],
elementOptions,
points,
tickRadius,
tickIx,
angleIx;
elementOptions = {
data: { modelId: modelId },
zIndex: -1,
strokeWidth: options.width,
stroke: options.color,
dashType: options.dashType
};
for (tickIx = 0; tickIx < ticks.length; tickIx++) {
tickRadius = center.y - ticks[tickIx];
if(tickRadius > 0) {
if (options.type === ARC) {
elements.push(view.createCircle(
center, tickRadius, elementOptions
));
} else {
points = [];
for (angleIx = 0; angleIx < angles.length; angleIx++) {
points.push(
Point2D.onCircle(center, angles[angleIx], tickRadius)
);
}
elements.push(view.createPolyline(points, true, elementOptions));
}
}
}
return elements;
},
getValue: function(point) {
var axis = this,
options = axis.options,
lineBox = axis.lineBox(),
altAxis = axis.plotArea.polarAxis,
majorAngles = altAxis.majorAngles(),
center = altAxis.box.center(),
r = point.distanceTo(center),
distance = r;
if (options.majorGridLines.type !== ARC && majorAngles.length > 1) {
var dx = point.x - center.x,
dy = point.y - center.y,
theta = (math.atan2(dy, dx) / DEG_TO_RAD + 540) % 360;
majorAngles.sort(function(a, b) {
return angularDistance(a, theta) - angularDistance(b, theta);
});
// Solve triangle (center, point, axis X) using one side (r) and two angles.
// Angles are derived from triangle (center, point, gridline X)
var midAngle = angularDistance(majorAngles[0], majorAngles[1]) / 2,
alpha = angularDistance(theta, majorAngles[0]),
gamma = 90 - midAngle,
beta = 180 - alpha - gamma;
distance = r * (math.sin(beta * DEG_TO_RAD) / math.sin(gamma * DEG_TO_RAD));
}
return axis.axisType().fn.getValue.call(
axis, new Point2D(lineBox.x1, lineBox.y2 - distance)
);
}
};
var RadarNumericAxis = NumericAxis.extend({
radarMajorGridLinePositions: function() {
return this.getTickPositions(this.options.majorUnit);
},
radarMinorGridLinePositions: function() {
var axis = this,
options = axis.options,
minorSkipStep = 0;
if (options.majorGridLines.visible) {
minorSkipStep = options.majorUnit;
}
return axis.getTickPositions(options.minorUnit, minorSkipStep);
},
axisType: function() {
return NumericAxis;
}
});
deepExtend(RadarNumericAxis.fn, RadarNumericAxisMixin);
var RadarLogarithmicAxis = LogarithmicAxis.extend({
radarMajorGridLinePositions: function() {
var axis = this,
positions = [];
axis.traverseMajorTicksPositions(function(position) {
positions.push(position);
}, axis.options.majorGridLines);
return positions;
},
radarMinorGridLinePositions: function() {
var axis = this,
positions = [];
axis.traverseMinorTicksPositions(function(position) {
positions.push(position);
}, axis.options.minorGridLines);
return positions;
},
axisType: function() {
return LogarithmicAxis;
}
});
deepExtend(RadarLogarithmicAxis.fn, RadarNumericAxisMixin);
var PolarAxis = Axis.extend({
init: function(options) {
var axis = this;
Axis.fn.init.call(axis, options);
options = axis.options;
options.minorUnit = options.minorUnit || axis.options.majorUnit / 2;
},
options: {
type: "polar",
startAngle: 0,
reverse: false,
majorUnit: 60,
min: 0,
max: 360,
labels: {
margin: getSpacing(10)
},
majorGridLines: {
color: BLACK,
visible: true,
width: 1
},
minorGridLines: {
color: "#aaa"
}
},
getDivisions: function(stepValue) {
return NumericAxis.fn.getDivisions.call(this, stepValue) - 1;
},
reflow: function(box) {
this.box = box;
this.reflowLabels();
},
reflowLabels: function() {
var axis = this,
measureBox = new Box2D(),
divs = axis.majorIntervals(),
labels = axis.labels,
labelBox,
i;
for (i = 0; i < labels.length; i++) {
labels[i].reflow(measureBox);
labelBox = labels[i].box;
labels[i].reflow(axis.getSlot(divs[i]).adjacentBox(
0, labelBox.width(), labelBox.height()
));
}
},
lineBox: function() {
return this.box;
},
intervals: function(step, skipStep) {
var axis = this,
options = axis.options,
divisions = axis.getDivisions(step),
angle = options.min,
divs = [],
i;
if (skipStep) {
skipStep = skipStep / step;
}
for (i = 0; i < divisions; i++) {
if (i % skipStep !== 0) {
divs.push((360 + angle) % 360);
}
angle += step;
}
return divs;
},
majorIntervals: function() {
return this.intervals(this.options.majorUnit);
},
minorIntervals: function() {
return this.intervals(this.options.minorUnit);
},
intervalAngle: function(i) {
return (360 + i - this.options.startAngle) % 360;
},
majorAngles: RadarCategoryAxis.fn.majorAngles,
renderLine: function() {
return [];
},
majorGridLineAngles: function(altAxis) {
return this.gridLineAngles(altAxis, this.options.majorUnit);
},
minorGridLineAngles: function(altAxis, skipMajor) {
return this.gridLineAngles(altAxis, this.options.minorUnit,
skipMajor ? this.options.majorUnit : 0);
},
renderPlotBands: RadarCategoryAxis.fn.renderPlotBands,
plotBandSlot: function(band) {
return this.getSlot(band.from, band.to);
},
getSlot: function(a, b) {
var axis = this,
options = axis.options,
start = options.startAngle,
box = axis.box,
tmp;
a = limitValue(a, options.min, options.max);
b = limitValue(b || a, a, options.max);
if (options.reverse) {
a *= -1;
b *= -1;
}
a = (540 - a - start) % 360;
b = (540 - b - start) % 360;
if (b < a) {
tmp = a;
a = b;
b = tmp;
}
return new Ring(
box.center(), 0, box.height() / 2,
a, b - a
);
},
getValue: function(point) {
var axis = this,
options = axis.options,
center = axis.box.center(),
dx = point.x - center.x,
dy = point.y - center.y,
theta = math.round(math.atan2(dy, dx) / DEG_TO_RAD),
start = options.startAngle;
if (!options.reverse) {
theta *= -1;
start *= -1;
}
return (theta + start + 360) % 360;
},
labelsCount: NumericAxis.fn.labelsCount,
createAxisLabel: NumericAxis.fn.createAxisLabel
});
deepExtend(PolarAxis.fn, GridLinesMixin);
var RadarClusterLayout = ChartElement.extend({
options: {
gap: 1,
spacing: 0
},
reflow: function(sector) {
var cluster = this,
options = cluster.options,
children = cluster.children,
gap = options.gap,
spacing = options.spacing,
count = children.length,
slots = count + gap + (spacing * (count - 1)),
slotAngle = sector.angle / slots,
slotSector,
angle = sector.startAngle + slotAngle * (gap / 2),
i;
for (i = 0; i < count; i++) {
slotSector = sector.clone();
slotSector.startAngle = angle;
slotSector.angle = slotAngle;
if (children[i].sector) {
slotSector.r = children[i].sector.r;
}
children[i].reflow(slotSector);
children[i].sector = slotSector;
angle += slotAngle + (slotAngle * spacing);
}
}
});
var RadarStackLayout = ChartElement.extend({
reflow: function(sector) {
var stack = this,
reverse = stack.options.isReversed,
children = stack.children,
childrenCount = children.length,
childSector,
i,
first = reverse ? childrenCount - 1 : 0,
step = reverse ? -1 : 1;
stack.box = new Box2D();
for (i = first; i >= 0 && i < childrenCount; i += step) {
childSector = children[i].sector;
childSector.startAngle = sector.startAngle;
childSector.angle = sector.angle;
}
}
});
var RadarSegment = DonutSegment.extend({
init: function(value, options) {
DonutSegment.fn.init.call(this, value, null, options);
},
options: {
overlay: {
gradient: null
},
labels: {
distance: 10
}
}
});
var RadarBarChart = BarChart.extend({
pointType: function() {
return RadarSegment;
},
clusterType: function() {
return RadarClusterLayout;
},
stackType: function() {
return RadarStackLayout;
},
categorySlot: function(categoryAxis, categoryIx) {
return categoryAxis.getSlot(categoryIx);
},
pointSlot: function(categorySlot, valueSlot) {
var slot = categorySlot.clone(),
y = categorySlot.c.y;
slot.r = y - valueSlot.y1;
slot.ir = y - valueSlot.y2;
return slot;
},
reflow: CategoricalChart.fn.reflow,
reflowPoint: function(point, pointSlot) {
point.sector = pointSlot;
point.reflow();
},
options: {
clip: false
}
});
var RadarLineChart = LineChart.extend({
options: {
clip: false
},
pointSlot: function(categorySlot, valueSlot) {
var valueRadius = categorySlot.c.y - valueSlot.y1,
slot = Point2D.onCircle(categorySlot.c, categorySlot.middle(), valueRadius);
return new Box2D(slot.x, slot.y, slot.x, slot.y);
},
createSegment: function(linePoints, currentSeries, seriesIx) {
var segment,
pointType,
style = currentSeries.style;
if(style == SMOOTH){
pointType = SplineSegment;
} else {
pointType = LineSegment;
}
segment = new pointType(linePoints, currentSeries, seriesIx);
if (linePoints.length === currentSeries.data.length) {
segment.options.closed = true;
}
return segment;
}
});
var RadarAreaSegment = AreaSegment.extend({
points: function() {
return LineSegment.fn.points.call(this, this.stackPoints);
}
});
var SplineRadarAreaSegment = SplineAreaSegment.extend({
areaPoints: function() {
return [];
}
});
var RadarAreaChart = RadarLineChart.extend({
createSegment: function(linePoints, currentSeries, seriesIx, prevSegment) {
var chart = this,
options = chart.options,
isStacked = options.isStacked,
stackPoints,
segment,
style = (currentSeries.line || {}).style;
if(style === SMOOTH){
segment = new SplineRadarAreaSegment(linePoints, prevSegment, isStacked, currentSeries, seriesIx);
segment.options.closed = true;
}
else {
if (isStacked && seriesIx > 0 && prevSegment) {
stackPoints = prevSegment.linePoints.slice(0).reverse();
}
linePoints.push(linePoints[0]);
segment = new RadarAreaSegment(linePoints, stackPoints, currentSeries, seriesIx);
}
return segment;
},
seriesMissingValues: function(series) {
return series.missingValues || ZERO;
}
});
var PolarScatterChart = ScatterChart.extend({
pointSlot: function(slotX, slotY) {
var valueRadius = slotX.c.y - slotY.y1,
slot = Point2D.onCircle(slotX.c, slotX.startAngle, valueRadius);
return new Box2D(slot.x, slot.y, slot.x, slot.y);
},
options: {
clip: false
}
});
var PolarLineChart = ScatterLineChart.extend({
pointSlot: PolarScatterChart.fn.pointSlot,
options: {
clip: false
}
});
var PolarAreaSegment = AreaSegment.extend({
points: function() {
var segment = this,
chart = segment.parent,
plotArea = chart.plotArea,
polarAxis = plotArea.polarAxis,
center = polarAxis.box.center(),
stackPoints = segment.stackPoints,
points = LineSegment.fn.points.call(segment, stackPoints);
points.unshift(center);
points.push(center);
return points;
}
});
var SplinePolarAreaSegment = SplineAreaSegment.extend({
areaPoints: function(){
var segment = this,
chart = segment.parent,
plotArea = chart.plotArea,
polarAxis = plotArea.polarAxis,
center = polarAxis.box.center();
return [center];
},
points: function() {
var segment = this,
chart = segment.parent,
plotArea = chart.plotArea,
polarAxis = plotArea.polarAxis,
center = polarAxis.box.center(),
curvePoints,
curveProcessor = new CurveProcessor(false),
linePoints = LineSegment.fn.points.call(this);
linePoints.push(center);
curvePoints = curveProcessor.process(linePoints);
curvePoints.splice(curvePoints.length - 3, curvePoints.length - 1);
segment.curvePoints = curvePoints;
return curvePoints;
}
});
var PolarAreaChart = PolarLineChart.extend({
createSegment: function(linePoints, currentSeries, seriesIx) {
var segment,
style = (currentSeries.line || {}).style;
if(style == SMOOTH){
segment = new SplinePolarAreaSegment(linePoints, null, false, currentSeries, seriesIx);
}
else{
segment = new PolarAreaSegment(linePoints, [], currentSeries, seriesIx);
}
return segment;
},
seriesMissingValues: function(series) {
return series.missingValues || ZERO;
},
sortPoints: function(points) {
return points.sort(xComparer);
}
});
var PolarPlotAreaBase = PlotAreaBase.extend({
init: function(series, options) {
var plotArea = this;
plotArea.valueAxisRangeTracker = new AxisGroupRangeTracker();
PlotAreaBase.fn.init.call(plotArea, series, options);
},
render: function() {
var plotArea = this;
plotArea.addToLegend(plotArea.series);
plotArea.createPolarAxis();
plotArea.createCharts();
plotArea.createValueAxis();
},
createValueAxis: function() {
var plotArea = this,
tracker = plotArea.valueAxisRangeTracker,
defaultRange = tracker.query(),
range,
valueAxis,
axisOptions = plotArea.valueAxisOptions({
roundToMajorUnit: false, zIndex: -1
}),
axisType,
axisDefaultRange;
if (axisOptions.type === LOGARITHMIC) {
axisType = RadarLogarithmicAxis;
axisDefaultRange = {min: 0.1, max: 1};
} else {
axisType = RadarNumericAxis;
axisDefaultRange = {min: 0, max: 1};
}
range = tracker.query(name) || defaultRange || axisDefaultRange;
if (range && defaultRange) {
range.min = math.min(range.min, defaultRange.min);
range.max = math.max(range.max, defaultRange.max);
}
valueAxis = new axisType(
range.min, range.max,
axisOptions
);
plotArea.valueAxis = valueAxis;
plotArea.appendAxis(valueAxis);
},
reflowAxes: function () {
var plotArea = this,
options = plotArea.options.plotArea,
valueAxis = plotArea.valueAxis,
polarAxis = plotArea.polarAxis,
box = plotArea.box,
defaultPadding = math.min(box.width(), box.height()) * DEFAULT_PADDING,
padding = getSpacing(options.padding || {}, defaultPadding),
axisBox = box.clone().unpad(padding),
valueAxisBox = axisBox.clone().shrink(0, axisBox.height() / 2);
polarAxis.reflow(axisBox);
valueAxis.reflow(valueAxisBox);
var heightDiff = valueAxis.lineBox().height() - valueAxis.box.height();
valueAxis.reflow(valueAxis.box.unpad({ top: heightDiff }));
plotArea.axisBox = axisBox;
plotArea.alignAxes(axisBox);
},
alignAxes: function() {
var plotArea = this,
valueAxis = plotArea.valueAxis,
slot = valueAxis.getSlot(valueAxis.options.min),
slotEdge = valueAxis.options.reverse ? 2 : 1,
center = plotArea.polarAxis.getSlot(0).c,
box = valueAxis.box.translate(
center.x - slot[X + slotEdge],
center.y - slot[Y + slotEdge]
);
valueAxis.reflow(box);
},
backgroundBox: function() {
return this.box;
}
});
var RadarPlotArea = PolarPlotAreaBase.extend({
options: {
categoryAxis: {
categories: []
},
valueAxis: {}
},
createPolarAxis: function() {
var plotArea = this,
categoryAxis;
categoryAxis = new RadarCategoryAxis(plotArea.options.categoryAxis);
plotArea.polarAxis = categoryAxis;
plotArea.categoryAxis = categoryAxis;
plotArea.appendAxis(categoryAxis);
},
valueAxisOptions: function(defaults) {
var plotArea = this;
if (plotArea._hasBarCharts) {
deepExtend(defaults, {
majorGridLines: { type: ARC },
minorGridLines: { type: ARC }
});
}
if (plotArea._isStacked100) {
deepExtend(defaults, {
roundToMajorUnit: false,
labels: { format: "P0" }
});
}
return deepExtend(defaults, plotArea.options.valueAxis);
},
appendChart: CategoricalPlotArea.fn.appendChart,
createCharts: function() {
var plotArea = this,
series = plotArea.filterVisibleSeries(plotArea.series),
pane = plotArea.panes[0];
plotArea.createAreaChart(
filterSeriesByType(series, [RADAR_AREA]),
pane
);
plotArea.createLineChart(
filterSeriesByType(series, [RADAR_LINE]),
pane
);
plotArea.createBarChart(
filterSeriesByType(series, [RADAR_COLUMN]),
pane
);
},
chartOptions: function(series) {
var options = { series: series };
var firstSeries = series[0];
if (firstSeries) {
var filteredSeries = this.filterVisibleSeries(series);
var stack = firstSeries.stack;
options.isStacked = stack && filteredSeries.length > 1;
options.isStacked100 = stack && stack.type === "100%" && filteredSeries.length > 1;
if (options.isStacked100) {
this._isStacked100 = true;
}
}
return options;
},
createAreaChart: function(series, pane) {
if (series.length === 0) {
return;
}
var areaChart = new RadarAreaChart(this, this.chartOptions(series));
this.appendChart(areaChart, pane);
},
createLineChart: function(series, pane) {
if (series.length === 0) {
return;
}
var lineChart = new RadarLineChart(this, this.chartOptions(series));
this.appendChart(lineChart, pane);
},
createBarChart: function(series, pane) {
if (series.length === 0) {
return;
}
var firstSeries = series[0];
var options = this.chartOptions(series);
options.gap = firstSeries.gap;
options.spacing = firstSeries.spacing;
var barChart = new RadarBarChart(this, options);
this.appendChart(barChart, pane);
this._hasBarCharts = true;
},
seriesCategoryAxis: function() {
return this.categoryAxis;
},
click: function(chart, e) {
var plotArea = this,
coords = chart._eventCoordinates(e),
point = new Point2D(coords.x, coords.y),
category,
value;
category = plotArea.categoryAxis.getCategory(point);
value = plotArea.valueAxis.getValue(point);
if (category !== null && value !== null) {
chart.trigger(PLOT_AREA_CLICK, {
element: $(e.target),
category: category,
value: value
});
}
}
});
var PolarPlotArea = PolarPlotAreaBase.extend({
options: {
xAxis: {},
yAxis: {}
},
createPolarAxis: function() {
var plotArea = this,
polarAxis;
polarAxis = new PolarAxis(plotArea.options.xAxis);
plotArea.polarAxis = polarAxis;
plotArea.axisX = polarAxis;
plotArea.appendAxis(polarAxis);
},
valueAxisOptions: function(defaults) {
var plotArea = this;
return deepExtend(defaults, {
majorGridLines: { type: ARC },
minorGridLines: { type: ARC }
}, plotArea.options.yAxis
);
},
createValueAxis: function() {
var plotArea = this;
PolarPlotAreaBase.fn.createValueAxis.call(plotArea);
plotArea.axisY = plotArea.valueAxis;
},
appendChart: function(chart, pane) {
var plotArea = this;
plotArea.valueAxisRangeTracker.update(chart.yAxisRanges);
PlotAreaBase.fn.appendChart.call(plotArea, chart, pane);
},
createCharts: function() {
var plotArea = this,
series = plotArea.filterVisibleSeries(plotArea.series),
pane = plotArea.panes[0];
plotArea.createLineChart(
filterSeriesByType(series, [POLAR_LINE]),
pane
);
plotArea.createScatterChart(
filterSeriesByType(series, [POLAR_SCATTER]),
pane
);
plotArea.createAreaChart(
filterSeriesByType(series, [POLAR_AREA]),
pane
);
},
createLineChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
lineChart = new PolarLineChart(plotArea, { series: series });
plotArea.appendChart(lineChart, pane);
},
createScatterChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
scatterChart = new PolarScatterChart(plotArea, { series: series });
plotArea.appendChart(scatterChart, pane);
},
createAreaChart: function(series, pane) {
if (series.length === 0) {
return;
}
var plotArea = this,
areaChart = new PolarAreaChart(plotArea, { series: series });
plotArea.appendChart(areaChart, pane);
},
click: function(chart, e) {
var plotArea = this,
coords = chart._eventCoordinates(e),
point = new Point2D(coords.x, coords.y),
xValue,
yValue;
xValue = plotArea.axisX.getValue(point);
yValue = plotArea.axisY.getValue(point);
if (xValue !== null && yValue !== null) {
chart.trigger(PLOT_AREA_CLICK, {
element: $(e.target),
x: xValue,
y: yValue
});
}
}
});
// Helpers ================================================================
function xComparer(a, b) {
return a.value.x - b.value.x;
}
function angularDistance(a, b) {
return 180 - math.abs(math.abs(a - b) - 180);
}
// Exports ================================================================
PlotAreaFactory.current.register(PolarPlotArea, POLAR_CHARTS);
PlotAreaFactory.current.register(RadarPlotArea, RADAR_CHARTS);
SeriesBinder.current.register(POLAR_CHARTS, [X, Y], ["color"]);
SeriesBinder.current.register(RADAR_CHARTS, ["value"], ["color"]);
dataviz.DefaultAggregates.current.register(
RADAR_CHARTS,
{ value: "max", color: "first" }
);
deepExtend(dataviz, {
PolarAreaChart: PolarAreaChart,
PolarAxis: PolarAxis,
PolarLineChart: PolarLineChart,
PolarPlotArea: PolarPlotArea,
RadarAreaChart: RadarAreaChart,
RadarBarChart: RadarBarChart,
RadarCategoryAxis: RadarCategoryAxis,
RadarClusterLayout: RadarClusterLayout,
RadarLineChart: RadarLineChart,
RadarNumericAxis: RadarNumericAxis,
RadarPlotArea: RadarPlotArea,
SplinePolarAreaSegment: SplinePolarAreaSegment,
SplineRadarAreaSegment: SplineRadarAreaSegment,
RadarStackLayout: RadarStackLayout
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var kendo = window.kendo,
deepExtend = kendo.deepExtend,
extend = $.extend,
isFn = kendo.isFunction,
template = kendo.template,
dataviz = kendo.dataviz,
Color = dataviz.Color,
ChartElement = dataviz.ChartElement,
PieChartMixin = dataviz.PieChartMixin,
PlotAreaBase = dataviz.PlotAreaBase,
PlotAreaFactory = dataviz.PlotAreaFactory,
Point2D = dataviz.Point2D,
Box2D = dataviz.Box2D,
SeriesBinder = dataviz.SeriesBinder,
TextBox = dataviz.TextBox,
append = dataviz.append,
autoFormat = dataviz.autoFormat,
evalOptions = dataviz.evalOptions,
limitValue = dataviz.limitValue,
seriesTotal = dataviz.seriesTotal,
uniqueId = dataviz.uniqueId;
// Constants ==============================================================
var CATEGORY = "category",
COLOR = "color",
FUNNEL = "funnel",
VALUE = "value",
BLACK = "black",
WHITE = "white";
// Funnel chart ===========================================================
var FunnelPlotArea = PlotAreaBase.extend({
render: function() {
var plotArea = this,
series = plotArea.series;
plotArea.createFunnelChart(series);
},
createFunnelChart: function(series) {
var plotArea = this,
firstSeries = series[0],
funnelChart = new FunnelChart(plotArea, {
series: series,
legend: plotArea.options.legend,
neckRatio: firstSeries.neckRatio,
dynamicHeight: firstSeries.dynamicHeight,
dynamicSlope:firstSeries.dynamicSlope,
segmentSpacing:firstSeries.segmentSpacing,
highlight:firstSeries.highlight
});
plotArea.appendChart(funnelChart);
},
appendChart: function(chart, pane) {
PlotAreaBase.fn.appendChart.call(this, chart, pane);
append(this.options.legend.items, chart.legendItems);
}
});
var FunnelChart = ChartElement.extend({
init: function(plotArea, options) {
var chart = this;
ChartElement.fn.init.call(chart, options);
chart.plotArea = plotArea;
chart.points = [];
chart.labels = [];
chart.legendItems = [];
chart.render();
},
options: {
neckRatio: 0.3,
width: 300,
dynamicSlope:false,
dynamicHeight:true,
segmentSpacing:0,
labels: {
visible: false,
align: "center", //right, left
position: "center" // top, bottom
}
},
formatPointValue:function(point,format){
return autoFormat(format,point.value);
},
render: function() {
var chart = this,
options = chart.options,
colors = chart.plotArea.options.seriesColors || [],
colorsCount = colors.length,
series = options.series[0],
pointData, fields,
data = series.data;
if(!data){
return;
}
var total = seriesTotal(series),
value,
i;
for (i = 0; i < data.length; i++) {
pointData = SeriesBinder.current.bindPoint(series, i);
value = pointData.valueFields.value;
if (value === null || value === undefined) {
continue;
}
fields = pointData.fields;
if (!isFn(series.color)) {
series.color = fields.color || colors[i % colorsCount];
}
fields = deepExtend({
index: i,
owner: chart,
series: series,
category: fields.category,
dataItem: data[i],
percentage: Math.abs(value) / total,
visibleInLegend: fields.visibleInLegend,
visible: fields.visible
}, fields);
var segment = chart.createSegment(value, fields);
var label = chart.createLabel(value, fields);
if (segment && label) {
segment.append(label);
}
}
},
evalSegmentOptions: function(options, value, fields) {
var series = fields.series;
evalOptions(options, {
value: value,
series: series,
dataItem: fields.dataItem,
index: fields.index
}, { defaults: series._defaults, excluded: ["data"] });
},
createSegment: function(value, fields) {
var chart = this,
segment;
chart.createLegendItem(value, fields);
if (fields.visible !== false) {
var seriesOptions = deepExtend({}, fields.series);
chart.evalSegmentOptions(seriesOptions, value, fields);
segment = new FunnelSegment(value, seriesOptions, fields);
extend(segment, fields);
chart.append(segment);
chart.points.push(segment);
return segment;
}
},
createLabel: function(value, fields) {
var chart = this,
series = fields.series,
dataItem = fields.dataItem,
labels = deepExtend({}, chart.options.labels, series.labels),
text = value,
textBox;
if (labels.visible) {
if (labels.template) {
var labelTemplate = template(labels.template);
text = labelTemplate({
dataItem: dataItem,
value: value,
percentage : fields.percentage,
category: fields.category,
series: series
});
} else if (labels.format) {
text = autoFormat(labels.format, text);
}
if (!labels.color&&labels.align==="center") {
var brightnessValue = new Color(series.color).percBrightness();
if (brightnessValue > 180) {
labels.color = BLACK;
} else {
labels.color = WHITE;
}
}
chart.evalSegmentOptions(labels, value, fields);
textBox = new TextBox(text, deepExtend({
vAlign: labels.position,
id: uniqueId()
}, labels)
);
chart.labels.push(textBox);
return textBox;
}
},
labelPadding: function() {
var labels = this.labels,
label,
align,
width,
padding = { left: 0, right: 0 },
i;
for (i = 0; i < labels.length; i++) {
label = labels[i];
align = label.options.align;
if (align !== "center") {
width = labels[i].box.width();
if(align === "left") {
padding.left = Math.max(padding.left, width);
} else {
padding.right = Math.max(padding.right, width);
}
}
}
return padding;
},
reflow: function(chartBox) {
var chart = this,
options = chart.options,
segments = chart.points,
count = segments.length,
decreasingWidth = options.neckRatio<=1,
i,
height,
lastUpperSide,
points,
percentage,
offset,
box = chartBox.clone().unpad(chart.labelPadding()),
width = box.width(),
previousHeight = 0,
previousOffset = decreasingWidth ? 0 :(width-width/options.neckRatio)/2,
segmentSpacing = options.segmentSpacing,
dynamicSlope = options.dynamicSlope,
totalHeight = box.height() - segmentSpacing * (count-1),
neckRatio = decreasingWidth ? options.neckRatio*width : width;
if(!count){
return;
}
if(dynamicSlope){
var firstSegment = segments[0],
maxSegment = firstSegment;
$.each(segments,function(idx,val){
if(val.percentage>maxSegment.percentage){
maxSegment = val;
}
});
lastUpperSide = (firstSegment.percentage/maxSegment.percentage)*width;
previousOffset = (width - lastUpperSide) / 2;
for (i = 0; i < count; i++) {
percentage = segments[i].percentage;
var nextSegment = segments[i+1],
nextPercentage = (nextSegment ? nextSegment.percentage : percentage);
points = segments[i].points = [];
height = (options.dynamicHeight)? (totalHeight * percentage): (totalHeight / count);
offset = (width - lastUpperSide* (nextPercentage / percentage))/2;
offset = limitValue(offset, 0, width);
points.push(Point2D(box.x1 + previousOffset, box.y1 + previousHeight));
points.push(Point2D(box.x1+width - previousOffset, box.y1 + previousHeight));
points.push(Point2D(box.x1+width - offset, box.y1 + height + previousHeight));
points.push(Point2D(box.x1+ offset,box.y1 + height + previousHeight));
previousOffset = offset;
previousHeight += height + segmentSpacing;
lastUpperSide *= nextPercentage/percentage;
lastUpperSide = limitValue(lastUpperSide, 0, width);
}
}
else {
var topMostWidth = decreasingWidth ? width : width - previousOffset*2,
finalNarrow = (topMostWidth - neckRatio)/2;
for (i = 0; i < count; i++) {
points = segments[i].points = [];
percentage = segments[i].percentage;
offset = (options.dynamicHeight)? (finalNarrow * percentage): (finalNarrow / count);
height = (options.dynamicHeight)? (totalHeight * percentage): (totalHeight / count);
points.push(Point2D(box.x1+previousOffset, box.y1 + previousHeight));
points.push(Point2D(box.x1+width - previousOffset, box.y1 + previousHeight));
points.push(Point2D(box.x1+width - previousOffset - offset, box.y1 + height + previousHeight));
points.push(Point2D(box.x1+previousOffset + offset,box.y1 + height + previousHeight));
previousOffset += offset;
previousHeight += height + segmentSpacing;
}
}
for (i = 0; i < count; i++) {
segments[i].reflow(chartBox);
}
}
});
deepExtend(FunnelChart.fn, PieChartMixin);
var FunnelSegment = ChartElement.extend({
init: function(value, options, segmentOptions) {
var segment = this;
ChartElement.fn.init.call(segment, options);
segment.value = value;
segment.id = uniqueId();
segment.options.index = segmentOptions.index;
segment.enableDiscovery();
},
options: {
color: WHITE,
border: {
width: 1
}
},
reflow: function(chartBox) {
var segment = this,
points = segment.points,
label = segment.children[0];
segment.box = new Box2D(points[0].x, points[0].y, points[1].x, points[2].y);
if (label) {
label.reflow(new Box2D(chartBox.x1, points[0].y, chartBox.x2, points[2].y));
}
},
getViewElements: function(view) {
var segment = this,
options = segment.options,
border = options.border,
elements = [];
elements.push(
view.createPolyline(segment.points, true, {
id: segment.id,
fill: options.color,
fillOpacity:options.opacity,
stroke: border.color,
strokeOpacity: border.opacity,
strokeWidth: border.width,
data: { modelId: segment.modelId }
})
);
append(elements, ChartElement.fn.getViewElements.call(segment, view));
return elements;
},
highlightOverlay: function(view, opt) {
var options = this.options,
hlOptions = options.highlight || {};
if(hlOptions.visible===false){
return;
}
var border = hlOptions.border || {};
var calcOptions = extend({},opt,{
fill:hlOptions.color,
stroke: border.color,
strokeOpacity: border.opacity,
strokeWidth: border.width,
fillOpacity:hlOptions.opacity,
data: { modelId: this.modelId }
});
var element = view.createPolyline(this.points,true,calcOptions);
return element;
},
tooltipAnchor: function(tooltipWidth) {
var box = this.box;
return new Point2D(
box.center().x - (tooltipWidth / 2),
box.y1
);
},
formatValue: function(format){
var point = this;
return point.owner.formatPointValue(point,format);
}
});
deepExtend(FunnelSegment.fn, dataviz.PointEventsMixin);
// Exports ================================================================
PlotAreaFactory.current.register(FunnelPlotArea, [FUNNEL]);
SeriesBinder.current.register(
[FUNNEL],
[VALUE], [CATEGORY, COLOR, "visibleInLegend", "visible"]
);
deepExtend(dataviz, {
FunnelChart: FunnelChart
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var math = Math,
kendo = window.kendo,
Widget = kendo.ui.Widget,
deepExtend = kendo.deepExtend,
dataviz = kendo.dataviz,
Axis = dataviz.Axis,
Box2D = dataviz.Box2D,
ChartElement = dataviz.ChartElement,
NumericAxis = dataviz.NumericAxis,
Pin = dataviz.Pin,
Ring = dataviz.Ring,
RootElement = dataviz.RootElement,
RotationAnimation = dataviz.RotationAnimation,
BarIndicatorAnimatin = dataviz.BarIndicatorAnimatin,
ArrowAnimation = dataviz.ArrowAnimation,
append = dataviz.append,
animationDecorator = dataviz.animationDecorator,
autoMajorUnit = dataviz.autoMajorUnit,
getElement = dataviz.getElement,
getSpacing = dataviz.getSpacing,
defined = dataviz.defined,
rotatePoint = dataviz.rotatePoint,
Point2D = dataviz.Point2D,
round = dataviz.round,
uniqueId = dataviz.uniqueId;
// Constants ==============================================================
var ANGULAR_SPEED = 150,
ARROW = "arrow",
ARROW_POINTER = "arrowPointer",
BAR_INDICATOR = "barIndicator",
BLACK = "#000",
CAP_SIZE = 0.05,
COORD_PRECISION = dataviz.COORD_PRECISION,
MAX_VALUE = Number.MAX_VALUE,
MIN_VALUE = -Number.MAX_VALUE,
DEFAULT_HEIGHT = 200,
DEFAULT_LINE_WIDTH = 0.5,
DEFAULT_WIDTH = 200,
DEFAULT_MIN_WIDTH = 60,
DEFAULT_MIN_HEIGHT = 60,
DEGREE = math.PI / 180,
INSIDE = "inside",
NEEDLE = "needle",
OUTSIDE = "outside",
RADIAL_POINTER = "radialPointer",
ROTATION_ORIGIN = 90;
// Gauge ==================================================================
var Pointer = ChartElement.extend({
init: function (scale, options) {
var pointer = this,
scaleOptions = scale.options;
ChartElement.fn.init.call(pointer, options);
options = pointer.options;
if (!options.id) {
options.id = uniqueId();
}
options.fill = options.color;
pointer.scale = scale;
if (defined(options.value)){
options.value = math.min(math.max(options.value, scaleOptions.min), scaleOptions.max);
} else {
options.value = scaleOptions.min;
}
},
options: {
color: BLACK
},
value: function(newValue) {
var pointer = this,
options = pointer.options,
value = options.value,
scaleOptions = pointer.scale.options;
if (arguments.length === 0) {
return value;
}
options._oldValue = options.value;
options.value = math.min(math.max(newValue, scaleOptions.min), scaleOptions.max);
pointer.repaint();
}
});
var RadialPointer = Pointer.extend({
options: {
shape: NEEDLE,
cap: {
size: CAP_SIZE
},
arrow: {
width: 16,
height: 14
},
animation: {
type: RADIAL_POINTER,
speed: ANGULAR_SPEED
}
},
reflow: function() {
var pointer = this,
options = pointer.options,
scale = pointer.scale,
ring = scale.ring,
c = ring.c,
capSize = ring.r * options.cap.size;
pointer.box = new Box2D(
c.x - capSize, c.y - capSize,
c.x + capSize, c.y + capSize
);
},
repaint: function() {
var pointer = this,
scale = pointer.scale,
options = pointer.options,
needle = pointer.elements[0],
animationOptions = options.animation,
minSlotAngle = scale.slotAngle(scale.options.min),
oldAngle = scale.slotAngle(options._oldValue) - minSlotAngle,
animation = needle._animation;
needle.options.rotation[0] = scale.slotAngle(options.value) - minSlotAngle;
if (animation) {
animation.abort();
}
if (animationOptions.transitions === false) {
needle.refresh(getElement(options.id));
} else {
animation = needle._animation = new RotationAnimation(needle, deepExtend(animationOptions, {
startAngle: oldAngle,
reverse: scale.options.reverse
}));
animation.setup();
animation.play();
}
},
_renderNeedle: function(view, box, center, pointRotation) {
var pointer = this,
options = pointer.options,
scale = pointer.scale,
capSize = scale.ring.r * options.cap.size;
return [
view.createPolyline([
rotatePoint((box.x1 + box.x2) / 2,
box.y1 + scale.options.minorTicks.size, center.x, center.y, pointRotation
),
rotatePoint(center.x - capSize / 2, center.y, center.x, center.y, pointRotation),
rotatePoint(center.x + capSize / 2, center.y, center.x, center.y, pointRotation)
], true, options),
view.createCircle(center, capSize, {
fill: options.cap.color || options.color
})
];
},
_renderArrow: function(view, box, center, pointRotation) {
var pointer = this,
options = pointer.options,
scale = pointer.scale,
ring = scale.ring.clone(),
trackWidth = 5,
arrowOptions = options.arrow,
height = arrowOptions.height;
ring.ir = ring.r - trackWidth;
return [
view.createPin(new Pin({
origin: rotatePoint(
(box.x1 + box.x2) / 2, box.y1 + height,
center.x, center.y, pointRotation
),
height: arrowOptions.height,
radius: trackWidth,
rotation: pointRotation,
arcAngle: 180
}), options),
view.createRing(ring, {
fill: options.color
})
];
},
renderPointer: function(view) {
var pointer = this,
scale = pointer.scale,
ring = scale.ring,
c = ring.c,
r = ring.r,
shape,
options = pointer.options,
box = new Box2D(c.x - r, c.y - r, c.x + r, c.y + r),
center = box.center(),
minAngle = scale.slotAngle(scale.options.min),
pointRotation = ROTATION_ORIGIN - minAngle;
if (options.animation !== false) {
deepExtend(options.animation, {
startAngle: 0,
center: center,
reverse: scale.options.reverse
});
}
deepExtend(options, {
rotation: [
scale.slotAngle(options.value) - minAngle,
center.x,
center.y
]
});
if (options.shape == ARROW) {
shape = pointer._renderArrow(view, box, center, pointRotation);
} else {
shape = pointer._renderNeedle(view, box, center, pointRotation);
}
return shape;
},
getViewElements: function(view) {
var pointer = this,
elements = pointer.renderPointer(view);
pointer.elements = elements;
return elements;
}
});
var RadialScale = NumericAxis.extend({
init: function (options) {
var scale = this;
scale.options = deepExtend({}, scale.options, options);
scale.options.majorUnit = scale.options.majorUnit || autoMajorUnit(scale.options.min, scale.options.max);
Axis.fn.init.call(scale, scale.options);
scale.options.minorUnit = scale.options.minorUnit || scale.options.majorUnit / 10;
},
options: {
min: 0,
max: 100,
majorTicks: {
size: 15,
align: INSIDE,
color: BLACK,
width: DEFAULT_LINE_WIDTH,
visible: true
},
minorTicks: {
size: 10,
align: INSIDE,
color: BLACK,
width: DEFAULT_LINE_WIDTH,
visible: true
},
startAngle: -30,
endAngle: 210,
labels: {
position: INSIDE,
padding: 2
}
},
reflow: function(box) {
var scale = this,
options = scale.options,
center = box.center(),
radius = math.min(box.height(), box.width()) / 2,
ring = scale.ring || new dataviz.Ring(
center, radius - options.majorTicks.size,
radius, options.startAngle, options.endAngle - options.startAngle);
scale.ring = ring;
scale.box = ring.getBBox();
scale.arrangeLabels();
},
slotAngle: function(value) {
var options = this.options,
startAngle = options.startAngle,
reverse = options.reverse,
angle = options.endAngle - startAngle,
min = options.min,
max = options.max,
result;
if (reverse) {
result = options.endAngle - (value - min) / (max - min) * angle;
} else {
result = ((value - min) / (max - min) * angle) + startAngle;
}
return result;
},
renderTicks: function(view) {
var scale = this,
ticks = [],
majorTickRing = scale.ring,
minorTickRing = majorTickRing.clone(),
options = scale.options,
minorTickSize = options.minorTicks.size;
function renderTickRing(ring, unit, tickOptions, visible, skipUnit) {
var tickAngles = scale.tickAngles(ring, unit),
i, innerPoint, outerPoint,
skip = skipUnit / unit,
count = tickAngles.length;
if (visible) {
for (i = 0; i < count; i++) {
if (i % skip === 0) {
continue;
}
outerPoint = ring.point(tickAngles[i]);
innerPoint = ring.point(tickAngles[i], true);
ticks.push(view.createLine(
innerPoint.x, innerPoint.y,
outerPoint.x, outerPoint.y,
{
align: false,
stroke: tickOptions.color,
strokeWidth: tickOptions.width
}
));
}
}
}
renderTickRing(majorTickRing, options.majorUnit, options.majorTicks, options.majorTicks.visible);
if (options.labels.position == INSIDE) {
minorTickRing.radius(minorTickRing.r - minorTickSize, true);
} else {
minorTickRing.radius(minorTickRing.ir + minorTickSize);
}
renderTickRing(minorTickRing, options.minorUnit, options.minorTicks, options.minorTicks.visible, options.majorUnit);
return ticks;
},
arrangeLabels: function() {
var scale = this,
options = scale.options,
ring = scale.ring.clone(),
tickAngels = scale.tickAngles(ring, options.majorUnit),
labels = scale.labels,
count = labels.length,
labelsOptions = options.labels,
padding = labelsOptions.padding,
rangeDistance = ring.r * 0.05,
rangeSize = options.rangeSize = options.rangeSize || ring.r * 0.1,
ranges = options.ranges || [],
halfWidth, halfHeight, labelAngle,
angle, label, lp, i, cx, cy, isInside;
if (typeof scale.options.rangeDistance != "undefined") {
rangeDistance = scale.options.rangeDistance;
} else {
scale.options.rangeDistance = rangeDistance;
}
if (labelsOptions.position === INSIDE && ranges.length) {
ring.r -= rangeSize + rangeDistance;
ring.ir -= rangeSize + rangeDistance;
}
for (i = 0; i < count; i++) {
label = labels[i];
halfWidth = label.box.width() / 2;
halfHeight = label.box.height() / 2;
angle = tickAngels[i];
labelAngle = angle * DEGREE;
isInside = labelsOptions.position === INSIDE;
lp = ring.point(angle, isInside);
cx = lp.x + (math.cos(labelAngle) * (halfWidth + padding) * (isInside ? 1 : -1));
cy = lp.y + (math.sin(labelAngle) * (halfHeight + padding) * (isInside ? 1 : -1));
label.reflow(new Box2D(cx - halfWidth, cy - halfHeight,
cx + halfWidth, cy + halfHeight));
scale.box.wrap(label.box);
}
},
tickAngles: function(ring, stepValue) {
var scale = this,
options = scale.options,
reverse = options.reverse,
range = options.max - options.min,
angle = ring.angle,
pos = ring.startAngle,
tickCount = range / stepValue,
step = angle / tickCount,
positions = [],
i;
if (reverse) {
pos += angle;
step = -step;
}
for (i = 0; i < tickCount ; i++) {
positions.push(round(pos, COORD_PRECISION));
pos += step;
}
if (round(pos) <= options.endAngle) {
positions.push(pos);
}
return positions;
},
renderRanges: function(view) {
var scale = this,
result = [],
from,
to,
segments = scale.rangeSegments(),
segmentsCount = segments.length,
reverse = scale.options.reverse,
segment,
ringRadius,
i;
if (segmentsCount) {
ringRadius = scale.getRadius();
for (i = 0; i < segmentsCount; i++) {
segment = segments[i];
from = scale.slotAngle(segment[reverse ? "to": "from"]);
to = scale.slotAngle(segment[!reverse ? "to": "from"]);
if (to - from !== 0) {
result.push(view.createRing(
new Ring(
scale.ring.c, ringRadius.inner,
ringRadius.outer, from, to - from
), {
fill: segment.color,
fillOpacity: segment.opacity,
zIndex: -1
}));
}
}
}
return result;
},
rangeSegments: function() {
var gauge = this,
options = gauge.options,
ranges = options.ranges || [],
count = ranges.length,
range,
segmentsCount,
defaultColor = options.rangePlaceholderColor,
segments = [],
segment,
min = options.min,
max = options.max,
i, j;
function rangeSegment(from, to, color, opacity) {
return { from: from, to: to, color: color, opacity: opacity };
}
if (count) {
segments.push(rangeSegment(min, max, defaultColor));
for (i = 0; i < count; i++) {
range = getRange(ranges[i], min, max);
segmentsCount = segments.length;
for (j = 0; j < segmentsCount; j++) {
segment = segments[j];
if (segment.from <= range.from && range.from <= segment.to) {
segments.push(rangeSegment(range.from, range.to, range.color, range.opacity));
if (segment.from <= range.to && range.to <= segment.to) {
segments.push(rangeSegment(range.to, segment.to, defaultColor, range.opacity));
}
segment.to = range.from;
break;
}
}
}
}
return segments;
},
getRadius: function() {
var scale = this,
options = scale.options,
rangeSize = options.rangeSize,
rangeDistance = options.rangeDistance,
ring = scale.ring,
ir, r;
if (options.labels.position === OUTSIDE) {
r = ring.ir - rangeDistance;
ir = r - rangeSize;
} else {
r = ring.r;
ir = r - rangeSize;
// move the ticks with a range distance and a range size
ring.r -= rangeSize + rangeDistance;
ring.ir -= rangeSize + rangeDistance;
}
return { inner: ir, outer: r };
},
getViewElements: function(view) {
var scale = this,
childElements = ChartElement.fn.getViewElements.call(scale, view);
append(childElements, scale.renderRanges(view));
append(childElements, scale.renderTicks(view));
return childElements;
}
});
var RadialGaugePlotArea = ChartElement.extend({
init: function(options) {
ChartElement.fn.init.call(this, options);
this.render();
},
options: {
margin: {},
background: "",
border: {
color: BLACK,
width: 0
},
minorTicks: {
align: INSIDE
}
},
reflow: function(box) {
var plotArea = this,
scale = plotArea.scale,
pointer = plotArea.pointer,
plotBox;
scale.reflow(box);
plotBox = scale.box.clone();
pointer.scale = scale;
pointer.reflow();
plotBox.wrap(pointer.box);
plotArea.box = plotBox;
plotArea.fitScale(box);
plotArea.alignScale(box);
},
alignScale: function(box) {
var plotArea = this,
plotBoxCenter = plotArea.box.center(),
boxCenter = box.center(),
paddingX = plotBoxCenter.x - boxCenter.x,
paddingY = plotBoxCenter.y - boxCenter.y,
scale = plotArea.scale,
pointer = plotArea.pointer;
scale.ring.c.x -= paddingX;
scale.ring.c.y -= paddingY;
scale.reflow(box);
pointer.reflow();
plotArea.box = scale.box.clone().wrap(pointer.box);
},
fitScale: function(box) {
var plotArea = this,
scale = plotArea.scale,
ring = scale.ring,
plotAreaBox = plotArea.box,
step = math.abs(plotArea.getDiff(plotAreaBox, box)),
min = round(step, COORD_PRECISION),
max = round(-step, COORD_PRECISION),
minDiff, midDiff, maxDiff, mid,
i = 0;
while (i < 100) {
i++;
if (min != mid) {
minDiff = plotArea.getPlotBox(min, box, ring);
if (0 <= minDiff && minDiff <= 2) {
break;
}
}
if (max != mid) {
maxDiff = plotArea.getPlotBox(max, box, ring);
if (0 <= maxDiff && maxDiff <= 2) {
break;
}
}
if (minDiff > 0 && maxDiff > 0) {
mid = min * 2;
} else if (minDiff < 0 && maxDiff < 0) {
mid = max * 2;
} else {
mid = round(((min + max) / 2) || 1, COORD_PRECISION);
}
midDiff = plotArea.getPlotBox(mid, box, ring);
if (0 <= midDiff && midDiff <= 2) {
break;
}
if (midDiff > 0) {
max = mid;
maxDiff = midDiff;
} else {
min = mid;
minDiff = midDiff;
}
}
},
getPlotBox: function(step, box, ring) {
var plotArea = this,
scale = plotArea.scale,
pointer = plotArea.pointer;
ring = ring.clone();
ring.r += step;
ring.ir += step;
scale.ring = ring;
scale.reflow(box);
pointer.scale = scale;
pointer.reflow();
plotArea.box = scale.box.clone().wrap(pointer.box);
return plotArea.getDiff(plotArea.box, box);
},
getDiff: function(plotBox, box) {
return math.min(box.width() - plotBox.width(), box.height() - plotBox.height());
},
render: function() {
var plotArea = this,
options = plotArea.options,
scale;
scale = plotArea.scale = new RadialScale(options.scale);
plotArea.append(plotArea.scale);
plotArea.pointer = new RadialPointer(
scale,
deepExtend({}, options.pointer, {
animation: {
transitions: options.transitions
}
})
);
plotArea.append(plotArea.pointer);
}
});
var LinearScale = NumericAxis.extend({
init: function (options) {
var scale = this;
scale.options = deepExtend({}, scale.options, options);
scale.options = deepExtend({}, scale.options , { labels: { mirror: scale.options.mirror } });
scale.options.majorUnit = scale.options.majorUnit || autoMajorUnit(scale.options.min, scale.options.max);
Axis.fn.init.call(scale, scale.options);
scale.options.minorUnit = scale.options.minorUnit || scale.options.majorUnit / 10;
},
options: {
min: 0,
max: 50,
majorTicks: {
size: 15,
align: INSIDE,
color: BLACK,
width: DEFAULT_LINE_WIDTH,
visible: true
},
minorTicks: {
size: 10,
align: INSIDE,
color: BLACK,
width: DEFAULT_LINE_WIDTH,
visible: true
},
line: {
width: DEFAULT_LINE_WIDTH
},
labels: {
position: INSIDE,
padding: 2
},
mirror: false,
_alignLines: false
},
renderRanges: function(view) {
var scale = this,
options = scale.options,
min = options.min,
max = options.max,
ranges = options.ranges || [],
vertical = options.vertical,
mirror = options.labels.mirror,
result = [],
count = ranges.length,
range, slotX, slotY, i,
rangeSize = options.rangeSize || options.minorTicks.size / 2,
slot;
if (count) {
for (i = 0; i < count; i++) {
range = getRange(ranges[i], min, max);
slot = scale.getSlot(range.from, range.to);
slotX = vertical ? scale.lineBox() : slot;
slotY = vertical ? slot : scale.lineBox();
if (vertical) {
slotX.x1 -= rangeSize * (mirror ? -1 : 1);
} else {
slotY.y2 += rangeSize * (mirror ? -1 : 1);
}
result.push(view.createRect(
new Box2D(slotX.x1, slotY.y1, slotX.x2, slotY.y2),
{ fill: range.color, fillOpacity: range.opacity }));
}
}
return result;
},
getViewElements: function(view) {
var scale = this,
elements = NumericAxis.fn.getViewElements.call(scale, view);
append(elements, scale.renderRanges(view));
return elements;
}
});
var LinearPointer = Pointer.extend({
init: function(scale, options) {
var pointer = this;
Pointer.fn.init.call(pointer, scale, options);
pointer.options = deepExtend({
size: pointer.pointerSize(),
track: {
visible: defined(options.track)
}
}, pointer.options);
},
options: {
shape: BAR_INDICATOR,
track: {
border: {
width: 1
}
},
color: BLACK,
border: {
width: 1
},
opacity: 1,
margin: getSpacing(3),
animation: {
type: BAR_INDICATOR
},
visible: true
},
repaint: function() {
var pointer = this,
scale = pointer.scale,
options = pointer.options,
element = pointer.element,
animation = element._animation;
if (animation) {
animation.abort();
}
if (options.animation.transitions === false) {
pointer.getViewElements(pointer._view);
element.points = pointer.element.points;
element.refresh(getElement(options.id));
} else {
options.animation = deepExtend({}, options.animation, {
endPosition: scale.getSlot(scale.options.min, options.value),
reverse: scale.options.reverse
});
if (options.shape === ARROW) {
animation = element._animation = new ArrowAnimation(element, options.animation);
} else {
animation = element._animation = new BarIndicatorAnimatin(element, options.animation);
}
animation.setup();
animation.play();
}
},
reflow: function() {
var pointer = this,
options = pointer.options,
scale = pointer.scale,
scaleLine = scale.lineBox(),
trackSize = options.track.size || options.size,
pointerHalfSize = options.size / 2,
mirror = scale.options.mirror,
margin = getSpacing(options.margin),
vertical = scale.options.vertical,
space = vertical ?
margin[mirror ? "left" : "right"] :
margin[mirror ? "bottom" : "top"],
pointerBox, pointerRangeBox, trackBox;
space = mirror ? -space : space;
if (vertical) {
trackBox = new Box2D(
scaleLine.x1 + space, scaleLine.y1,
scaleLine.x1 + space, scaleLine.y2);
if (mirror) {
trackBox.x1 -= trackSize;
} else {
trackBox.x2 += trackSize;
}
if (options.shape !== BAR_INDICATOR) {
pointerRangeBox = new Box2D(
scaleLine.x2 + space, scaleLine.y1 - pointerHalfSize,
scaleLine.x2 + space, scaleLine.y2 + pointerHalfSize
);
pointerBox = pointerRangeBox;
}
} else {
trackBox = new Box2D(
scaleLine.x1, scaleLine.y1 - space,
scaleLine.x2, scaleLine.y1 - space);
if (mirror) {
trackBox.y2 += trackSize;
} else {
trackBox.y1 -= trackSize;
}
if (options.shape !== BAR_INDICATOR) {
pointerRangeBox = new Box2D(
scaleLine.x1 - pointerHalfSize, scaleLine.y1 - space,
scaleLine.x2 + pointerHalfSize, scaleLine.y1 - space
);
pointerBox = pointerRangeBox;
}
}
pointer.trackBox = trackBox;
pointer.pointerRangeBox = pointerRangeBox;
pointer.box = pointerBox || trackBox.clone().pad(options.border.width);
},
renderPointer: function(view) {
var pointer = this,
scale = pointer.scale,
options = pointer.options,
border = defined(options.border) ? {
stroke: options.border.width ? options.border.color || options.color : "",
strokeWidth: options.border.width,
dashType: options.border.dashType
} : {},
element,
elementOptions = deepExtend({
fill: options.color,
fillOpacity: options.opacity,
animation: deepExtend(options.animation, {
startPosition: scale.getSlot(scale.options.min, options.value),
size: options.size,
vertical: scale.options.vertical,
reverse: scale.options.reverse
}),
id: options.id,
zIndex: 2,
align: false
}, border),
shape = pointer.pointerShape(options.value);
if (options.shape === ARROW) {
elementOptions.animation.type = ARROW_POINTER;
element = view.createPolyline(shape, true, elementOptions);
} else {
element = view.createRect(shape, elementOptions);
}
return element;
},
pointerShape: function(value) {
var pointer = this,
options = pointer.options,
scale = pointer.scale,
slot = scale.getSlot(value, scale.options.min),
size = options.size,
pointerRangeBox = pointer.pointerRangeBox,
vertical = scale.options.vertical,
halfSize = size / 2,
shape,
sign = (scale.options.mirror ? -1 : 1),
reverse = scale.options.reverse,
pos,
trackBox;
if (options.shape == ARROW) {
if (vertical) {
pos = reverse ? "y2" : "y1";
shape = [
new Point2D(pointerRangeBox.x1, slot[pos] - halfSize),
new Point2D(pointerRangeBox.x1 - sign * size, slot[pos]),
new Point2D(pointerRangeBox.x1, slot[pos] + halfSize)
];
} else {
pos = reverse ? "x1" : "x2";
shape = [
new Point2D(slot[pos] - halfSize, pointerRangeBox.y2),
new Point2D(slot[pos], pointerRangeBox.y2 + sign * size),
new Point2D(slot[pos] + halfSize, pointerRangeBox.y2)
];
}
} else {
trackBox = pointer.trackBox;
if (vertical) {
shape = new Box2D(
trackBox.x1, slot.y1,
trackBox.x1 + size, slot.y2);
} else {
shape = new Box2D(
slot.x1, trackBox.y1,
slot.x2, trackBox.y1 + size);
}
}
return shape;
},
pointerSize: function() {
var pointer = this,
options = pointer.options,
scale = pointer.scale,
tickSize = scale.options.majorTicks.size,
size;
if (options.shape === ARROW) {
size = tickSize * 0.6;
} else {
size = tickSize * 0.3;
}
return round(size);
},
renderTrack: function(view) {
var pointer = this,
options = pointer.options,
trackOptions = options.track,
border = trackOptions.border || {},
trackBox = pointer.trackBox.clone().pad(border.width || 0);
return view.createRect(trackBox, {
fill: trackOptions.color,
fillOpacity: trackOptions.opacity,
stroke: border.width ? border.color || trackOptions.color : "",
strokeWidth: border.width,
dashType: border.dashType,
align: false
});
},
getViewElements: function(view) {
var pointer = this,
options = pointer.options,
elements = [];
pointer.element = pointer.renderPointer(view);
elements.push(pointer.element);
if (options.track.visible &&
(options.shape === BAR_INDICATOR || options.shape === "")) {
elements.push(pointer.renderTrack(view));
}
pointer._view = view;
append(elements, Pointer.fn.getViewElements.call(pointer, view));
return elements;
}
});
var LinearGaugePlotArea = ChartElement.extend({
init: function(options) {
ChartElement.fn.init.call(this, options);
this.render();
},
options: {
plotArea: {
margin: {},
background: "",
border: {
color: BLACK,
width: 0
}
},
pointer: {},
scale: {}
},
reflow: function(box){
var plotArea = this,
scale = plotArea.scale,
pointer = plotArea.pointer;
scale.reflow(box);
pointer.reflow(box);
plotArea.box = plotArea.getBox(box);
plotArea.alignElements();
plotArea.shrinkElements();
},
shrinkElements: function () {
var plotArea = this,
scale = plotArea.scale,
pointer = plotArea.pointer,
scaleBox = scale.box.clone(),
pointerBox = pointer.box,
pos = scale.options.vertical ? "y" : "x";
scaleBox[pos + 1] += math.max(scaleBox[pos + 1] - pointerBox[pos + 1], 0);
scaleBox[pos + 2] -= math.max(pointerBox[pos + 2] - scaleBox[pos + 2], 0);
scale.reflow(scaleBox);
pointer.reflow(plotArea.box);
},
getBox: function(box) {
var plotArea = this,
scale = plotArea.scale,
pointer = plotArea.pointer,
boxCenter = box.center(),
plotAreaBox = pointer.box.clone().wrap(scale.box),
size;
if (scale.options.vertical) {
size = plotAreaBox.width() / 2;
plotAreaBox = new Box2D(
boxCenter.x - size, box.y1,
boxCenter.x + size, box.y2
);
} else {
size = plotAreaBox.height() / 2;
plotAreaBox = new Box2D(
box.x1, boxCenter.y - size,
box.x2, boxCenter.y + size
);
}
return plotAreaBox;
},
alignElements: function() {
var plotArea = this,
scale = plotArea.scale,
pointer = plotArea.pointer,
scaleBox = scale.box,
box = pointer.box.clone().wrap(scale.box),
plotAreaBox = plotArea.box,
diff;
if (scale.options.vertical) {
diff = plotAreaBox.center().x - box.center().x;
scale.reflow(new Box2D(
scaleBox.x1 + diff, plotAreaBox.y1,
scaleBox.x2 + diff, plotAreaBox.y2
));
} else {
diff = plotAreaBox.center().y - box.center().y;
scale.reflow(new Box2D(
plotAreaBox.x1, scaleBox.y1 + diff,
plotAreaBox.x2, scaleBox.y2 + diff
));
}
pointer.reflow(plotArea.box);
},
render: function() {
var plotArea = this,
options = plotArea.options,
scale;
scale = plotArea.scale = new LinearScale(options.scale);
plotArea.append(plotArea.scale);
plotArea.pointer = new LinearPointer(
scale,
deepExtend({}, options.pointer, {
animation: {
transitions: options.transitions
}
})
);
plotArea.append(plotArea.pointer);
},
getViewElements: function(view) {
var plotArea = this,
options = plotArea.options.plotArea,
childElements = ChartElement.fn.getViewElements.call(plotArea, view),
border = options.border || {},
elements = [
view.createRect(plotArea.box, {
fill: options.background,
stroke: border.width ? border.color : "",
strokeWidth: border.width,
dashType: border.dashType
})
];
append(elements, childElements);
return elements;
}
});
var Gauge = Widget.extend({
init: function(element, userOptions) {
var gauge = this,
options,
themeOptions,
themeName,
themes = dataviz.ui.themes || {},
theme;
Widget.fn.init.call(gauge, element);
gauge.wrapper = gauge.element;
gauge._originalOptions = deepExtend({}, userOptions);
options = deepExtend({}, gauge.options, userOptions);
themeName = options.theme;
theme = themes[themeName] || themes[themeName.toLowerCase()];
themeOptions = themeName && theme ? theme.gauge : {};
gauge.options = deepExtend({}, themeOptions, options);
gauge.element.addClass("k-gauge");
gauge.redraw();
},
options: {
plotArea: {},
theme: "default",
renderAs: "",
pointer: {},
scale: {},
gaugeArea: {}
},
value: function(value) {
var gauge = this,
pointer = gauge._pointers[0];
if (arguments.length === 0) {
return pointer.value();
}
gauge.options.pointer.value = value;
if (gauge._view.renderElement) {
pointer.value(value);
} else {
gauge.redraw();
}
},
redraw: function() {
var gauge = this,
element = gauge.element,
model = gauge._model = gauge._getModel(),
view;
gauge._plotArea = model._plotArea;
view = gauge._view =
dataviz.ViewFactory.current.create(model.options, gauge.options.renderAs);
if (view) {
view.load(model);
gauge._viewElement = view.renderTo(element[0]);
}
},
getSize: function() {
return this._getSize();
},
_resize: function() {
var t = this.options.transitions;
this.options.transitions = false;
this.redraw();
this.options.transitions = t;
},
_createModel: function() {
var gauge = this,
options = gauge.options,
size = gauge._getSize();
return new RootElement(deepExtend({
width: size.width,
height: size.height,
transitions: options.transitions
}, options.gaugeArea));
},
_getSize: function() {
var gauge = this,
element = gauge.element,
width = element.width(),
height = element.height();
if (!width) {
width = DEFAULT_WIDTH;
}
if (!height) {
height = DEFAULT_HEIGHT;
}
return { width: width, height: height };
}
});
deepExtend(Gauge.fn, dataviz.ExportMixin);
var RadialGauge = Gauge.extend({
init: function(element, options) {
var radialGauge = this;
Gauge.fn.init.call(radialGauge, element, options);
kendo.notify(radialGauge, dataviz.ui);
},
options: {
name: "RadialGauge",
transitions: true,
gaugeArea: {
background: ""
}
},
_getModel: function() {
var gauge = this,
options = gauge.options,
model = gauge._createModel(),
plotArea;
plotArea = model._plotArea = new RadialGaugePlotArea(options);
gauge._pointers = [plotArea.pointer];
model.append(plotArea);
model.reflow();
return model;
}
});
var LinearGauge = Gauge.extend({
init: function(element, options) {
var linearGauge = this;
Gauge.fn.init.call(linearGauge, element, options);
kendo.notify(linearGauge, dataviz.ui);
},
options: {
name: "LinearGauge",
transitions: true,
gaugeArea: {
background: ""
},
scale: {
vertical: true
}
},
_getModel: function() {
var gauge = this,
options = gauge.options,
model = gauge._createModel(),
plotArea;
plotArea = model._plotArea = new LinearGaugePlotArea(options);
gauge._pointers = [plotArea.pointer];
model.append(plotArea);
model.reflow();
return model;
},
_getSize: function() {
var gauge = this,
element = gauge.element,
width = element.width(),
height = element.height(),
vertical = gauge.options.scale.vertical;
if (!width) {
width = vertical ? DEFAULT_MIN_WIDTH : DEFAULT_WIDTH;
}
if (!height) {
height = vertical ? DEFAULT_HEIGHT : DEFAULT_MIN_HEIGHT;
}
return { width: width, height: height };
}
});
function getRange(range, min, max) {
var from = defined(range.from) ? range.from : MIN_VALUE,
to = defined(range.to) ? range.to : MAX_VALUE;
range.from = math.max(math.min(to, from), min);
range.to = math.min(math.max(to, from), max);
return range;
}
var RadialPointerAnimationDecorator = animationDecorator(RADIAL_POINTER, RotationAnimation);
var ArrowPointerAnimationDecorator = animationDecorator(ARROW_POINTER, ArrowAnimation);
var BarIndicatorAnimationDecorator = animationDecorator(BAR_INDICATOR, BarIndicatorAnimatin);
// Exports ================================================================
dataviz.ui.plugin(RadialGauge);
dataviz.ui.plugin(LinearGauge);
deepExtend(dataviz, {
Gauge: Gauge,
RadialGaugePlotArea: RadialGaugePlotArea,
LinearGaugePlotArea: LinearGaugePlotArea,
RadialPointer: RadialPointer,
LinearPointer: LinearPointer,
LinearScale: LinearScale,
RadialScale: RadialScale,
RadialPointerAnimationDecorator: RadialPointerAnimationDecorator,
ArrowPointerAnimationDecorator: ArrowPointerAnimationDecorator,
BarIndicatorAnimationDecorator: BarIndicatorAnimationDecorator
});
})(window.kendo.jQuery);
(function () {
// Imports ================================================================
var $ = jQuery,
math = Math,
kendo = window.kendo,
dataviz = kendo.dataviz,
Box2D = dataviz.Box2D,
Color = dataviz.Color,
Point2D = dataviz.Point2D,
Ring = dataviz.Ring,
ViewBase = dataviz.ViewBase,
ViewElement = dataviz.ViewElement,
deepExtend = kendo.deepExtend,
round = dataviz.round,
renderTemplate = dataviz.renderTemplate;
// Constants ==============================================================
var BUTT = "butt",
COORD_PRECISION = dataviz.COORD_PRECISION,
DASH_ARRAYS = dataviz.DASH_ARRAYS,
DEFAULT_WIDTH = dataviz.DEFAULT_WIDTH,
DEFAULT_HEIGHT = dataviz.DEFAULT_HEIGHT,
DEFAULT_FONT = dataviz.DEFAULT_FONT,
DEG_TO_RAD = math.PI / 180,
TWO_PI = math.PI * 2,
LINEAR = "linear",
RADIAL = "radial",
SOLID = "solid",
SQUARE = "square";
var CANVAS_TEMPLATE = renderTemplate(
" 0) {
size.width = element.width();
}
if (element.height() > 0) {
size.height = element.height();
}
if (that.options.width) {
size.width = that.options.width;
}
if (that.options.height) {
size.height = that.options.height;
}
return size;
},
value: function(value) {
var that = this;
if (!defined(value)) {
return that.options.value;
}
that.options.value = value + '';
that.redraw();
},
_renderElements: function (view, pattern, baseUnit) {
var that = this,
contentBox = that.contentBox,
position = contentBox.x1,
step,
item;
for (var i = 0; i < pattern.length; i++) {
item = isPlainObject(pattern[i]) ? pattern[i] : {
width: pattern[i],
y1: 0,
y2: that.barHeight
};
step = item.width * baseUnit;
if (i%2) {
view.children.push(view.createRect(
new Box2D(
position,
item.y1 + contentBox.y1,
position + step,
item.y2 + contentBox.y1
), {
fill: that.options.color
}
));
}
position+= step;
}
},
_renderBackground: function (view, size) {
var that = this,
options = that.options,
border = options.border || {},
box = Box2D(0,0, size.width, size.height).unpad(border.width / 2),
rect = view.createRect(box, {
fill: options.background,
stroke: border.width ? border.color : "",
strokeWidth: border.width,
dashType: border.dashType
});
view.children.push(rect);
},
_renderTextElement: function (view, value) {
var that = this,
textOptions = that.options.text,
text = new TextBox(value, {
font: textOptions.font,
color: textOptions.color,
align: "center",
vAlign: "bottom",
margin: textOptions.margin
});
text.reflow(that.contentBox);
append(view.children, text.getViewElements(view));
},
options: {
name: "Barcode",
renderAs: "svg",
value: "",
type: "code39",
checksum: false,
width: 0,
height: 0,
color: "black",
background: "white",
text: {
visible: true,
font: "16px Consolas, Monaco, Sans Mono, monospace, sans-serif",
color: "black",
margin: {
top: 0,
bottom: 0,
left: 0,
right: 0
}
},
border: {
width: 0,
dashType: "solid",
color: "black"
},
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0
}
}
});
dataviz.ui.plugin(Barcode);
kendo.deepExtend(dataviz, {
encodings: encodings,
Encoding: Encoding
});
})(window.kendo.jQuery);
(function ($, undefined) {
var kendo = window.kendo,
extend = $.extend,
dataviz = kendo.dataviz,
Widget = kendo.ui.Widget,
Box2D = dataviz.Box2D,
terminator = "0000",
NUMERIC = "numeric",
ALPHA_NUMERIC = "alphanumeric",
BYTE = "byte",
powersOfTwo = {"1": 0},
powersOfTwoResult = {"0": 1},
generatorPolynomials = [[1,0],[1,25,0]],
irregularAlignmentPatternsStartDistance = {15:20,16:20,18:24,19:24,22:20,24:22,26:24,28:20,30:20,31:24,32:28,33:24,36:18,37:22,39:20,40:24},
versionsCodewordsInformation = [{L:{groups:[[1,19]],totalDataCodewords:19,errorCodewordsPerBlock:7},M:{groups:[[1,16]],totalDataCodewords:16,errorCodewordsPerBlock:10},Q:{groups:[[1,13]],totalDataCodewords:13,errorCodewordsPerBlock:13},H:{groups:[[1,9]],totalDataCodewords:9,errorCodewordsPerBlock:17}},{L:{groups:[[1,34]],totalDataCodewords:34,errorCodewordsPerBlock:10},M:{groups:[[1,28]],totalDataCodewords:28,errorCodewordsPerBlock:16},Q:{groups:[[1,22]],totalDataCodewords:22,errorCodewordsPerBlock:22},H:{groups:[[1,16]],totalDataCodewords:16,errorCodewordsPerBlock:28}},{L:{groups:[[1,55]],totalDataCodewords:55,errorCodewordsPerBlock:15},M:{groups:[[1,44]],totalDataCodewords:44,errorCodewordsPerBlock:26},Q:{groups:[[2,17]],totalDataCodewords:34,errorCodewordsPerBlock:18},H:{groups:[[2,13]],totalDataCodewords:26,errorCodewordsPerBlock:22}},{L:{groups:[[1,80]],totalDataCodewords:80,errorCodewordsPerBlock:20},M:{groups:[[2,32]],totalDataCodewords:64,errorCodewordsPerBlock:18},Q:{groups:[[2,24]],totalDataCodewords:48,errorCodewordsPerBlock:26},H:{groups:[[4,9]],totalDataCodewords:36,errorCodewordsPerBlock:16}},{L:{groups:[[1,108]],totalDataCodewords:108,errorCodewordsPerBlock:26},M:{groups:[[2,43]],totalDataCodewords:86,errorCodewordsPerBlock:24},Q:{groups:[[2,15],[2,16]],totalDataCodewords:62,errorCodewordsPerBlock:18},H:{groups:[[2,11],[2,12]],totalDataCodewords:46,errorCodewordsPerBlock:22}},{L:{groups:[[2,68]],totalDataCodewords:136,errorCodewordsPerBlock:18},M:{groups:[[4,27]],totalDataCodewords:108,errorCodewordsPerBlock:16},Q:{groups:[[4,19]],totalDataCodewords:76,errorCodewordsPerBlock:24},H:{groups:[[4,15]],totalDataCodewords:60,errorCodewordsPerBlock:28}},{L:{groups:[[2,78]],totalDataCodewords:156,errorCodewordsPerBlock:20},M:{groups:[[4,31]],totalDataCodewords:124,errorCodewordsPerBlock:18},Q:{groups:[[2,14],[4,15]],totalDataCodewords:88,errorCodewordsPerBlock:18},H:{groups:[[4,13],[1,14]],totalDataCodewords:66,errorCodewordsPerBlock:26}},{L:{groups:[[2,97]],totalDataCodewords:194,errorCodewordsPerBlock:24},M:{groups:[[2,38],[2,39]],totalDataCodewords:154,errorCodewordsPerBlock:22},Q:{groups:[[4,18],[2,19]],totalDataCodewords:110,errorCodewordsPerBlock:22},H:{groups:[[4,14],[2,15]],totalDataCodewords:86,errorCodewordsPerBlock:26}},{L:{groups:[[2,116]],totalDataCodewords:232,errorCodewordsPerBlock:30},M:{groups:[[3,36],[2,37]],totalDataCodewords:182,errorCodewordsPerBlock:22},Q:{groups:[[4,16],[4,17]],totalDataCodewords:132,errorCodewordsPerBlock:20},H:{groups:[[4,12],[4,13]],totalDataCodewords:100,errorCodewordsPerBlock:24}},{L:{groups:[[2,68],[2,69]],totalDataCodewords:274,errorCodewordsPerBlock:18},M:{groups:[[4,43],[1,44]],totalDataCodewords:216,errorCodewordsPerBlock:26},Q:{groups:[[6,19],[2,20]],totalDataCodewords:154,errorCodewordsPerBlock:24},H:{groups:[[6,15],[2,16]],totalDataCodewords:122,errorCodewordsPerBlock:28}},{L:{groups:[[4,81]],totalDataCodewords:324,errorCodewordsPerBlock:20},M:{groups:[[1,50],[4,51]],totalDataCodewords:254,errorCodewordsPerBlock:30},Q:{groups:[[4,22],[4,23]],totalDataCodewords:180,errorCodewordsPerBlock:28},H:{groups:[[3,12],[8,13]],totalDataCodewords:140,errorCodewordsPerBlock:24}},{L:{groups:[[2,92],[2,93]],totalDataCodewords:370,errorCodewordsPerBlock:24},M:{groups:[[6,36],[2,37]],totalDataCodewords:290,errorCodewordsPerBlock:22},Q:{groups:[[4,20],[6,21]],totalDataCodewords:206,errorCodewordsPerBlock:26},H:{groups:[[7,14],[4,15]],totalDataCodewords:158,errorCodewordsPerBlock:28}},{L:{groups:[[4,107]],totalDataCodewords:428,errorCodewordsPerBlock:26},M:{groups:[[8,37],[1,38]],totalDataCodewords:334,errorCodewordsPerBlock:22},Q:{groups:[[8,20],[4,21]],totalDataCodewords:244,errorCodewordsPerBlock:24},H:{groups:[[12,11],[4,12]],totalDataCodewords:180,errorCodewordsPerBlock:22}},{L:{groups:[[3,115],[1,116]],totalDataCodewords:461,errorCodewordsPerBlock:30},M:{groups:[[4,40],[5,41]],totalDataCodewords:365,errorCodewordsPerBlock:24},Q:{groups:[[11,16],[5,17]],totalDataCodewords:261,errorCodewordsPerBlock:20},H:{groups:[[11,12],[5,13]],totalDataCodewords:197,errorCodewordsPerBlock:24}},{L:{groups:[[5,87],[1,88]],totalDataCodewords:523,errorCodewordsPerBlock:22},M:{groups:[[5,41],[5,42]],totalDataCodewords:415,errorCodewordsPerBlock:24},Q:{groups:[[5,24],[7,25]],totalDataCodewords:295,errorCodewordsPerBlock:30},H:{groups:[[11,12],[7,13]],totalDataCodewords:223,errorCodewordsPerBlock:24}},{L:{groups:[[5,98],[1,99]],totalDataCodewords:589,errorCodewordsPerBlock:24},M:{groups:[[7,45],[3,46]],totalDataCodewords:453,errorCodewordsPerBlock:28},Q:{groups:[[15,19],[2,20]],totalDataCodewords:325,errorCodewordsPerBlock:24},H:{groups:[[3,15],[13,16]],totalDataCodewords:253,errorCodewordsPerBlock:30}},{L:{groups:[[1,107],[5,108]],totalDataCodewords:647,errorCodewordsPerBlock:28},M:{groups:[[10,46],[1,47]],totalDataCodewords:507,errorCodewordsPerBlock:28},Q:{groups:[[1,22],[15,23]],totalDataCodewords:367,errorCodewordsPerBlock:28},H:{groups:[[2,14],[17,15]],totalDataCodewords:283,errorCodewordsPerBlock:28}},{L:{groups:[[5,120],[1,121]],totalDataCodewords:721,errorCodewordsPerBlock:30},M:{groups:[[9,43],[4,44]],totalDataCodewords:563,errorCodewordsPerBlock:26},Q:{groups:[[17,22],[1,23]],totalDataCodewords:397,errorCodewordsPerBlock:28},H:{groups:[[2,14],[19,15]],totalDataCodewords:313,errorCodewordsPerBlock:28}},{L:{groups:[[3,113],[4,114]],totalDataCodewords:795,errorCodewordsPerBlock:28},M:{groups:[[3,44],[11,45]],totalDataCodewords:627,errorCodewordsPerBlock:26},Q:{groups:[[17,21],[4,22]],totalDataCodewords:445,errorCodewordsPerBlock:26},H:{groups:[[9,13],[16,14]],totalDataCodewords:341,errorCodewordsPerBlock:26}},{L:{groups:[[3,107],[5,108]],totalDataCodewords:861,errorCodewordsPerBlock:28},M:{groups:[[3,41],[13,42]],totalDataCodewords:669,errorCodewordsPerBlock:26},Q:{groups:[[15,24],[5,25]],totalDataCodewords:485,errorCodewordsPerBlock:30},H:{groups:[[15,15],[10,16]],totalDataCodewords:385,errorCodewordsPerBlock:28}},{L:{groups:[[4,116],[4,117]],totalDataCodewords:932,errorCodewordsPerBlock:28},M:{groups:[[17,42]],totalDataCodewords:714,errorCodewordsPerBlock:26},Q:{groups:[[17,22],[6,23]],totalDataCodewords:512,errorCodewordsPerBlock:28},H:{groups:[[19,16],[6,17]],totalDataCodewords:406,errorCodewordsPerBlock:30}},{L:{groups:[[2,111],[7,112]],totalDataCodewords:1006,errorCodewordsPerBlock:28},M:{groups:[[17,46]],totalDataCodewords:782,errorCodewordsPerBlock:28},Q:{groups:[[7,24],[16,25]],totalDataCodewords:568,errorCodewordsPerBlock:30},H:{groups:[[34,13]],totalDataCodewords:442,errorCodewordsPerBlock:24}},{L:{groups:[[4,121],[5,122]],totalDataCodewords:1094,errorCodewordsPerBlock:30},M:{groups:[[4,47],[14,48]],totalDataCodewords:860,errorCodewordsPerBlock:28},Q:{groups:[[11,24],[14,25]],totalDataCodewords:614,errorCodewordsPerBlock:30},H:{groups:[[16,15],[14,16]],totalDataCodewords:464,errorCodewordsPerBlock:30}},{L:{groups:[[6,117],[4,118]],totalDataCodewords:1174,errorCodewordsPerBlock:30},M:{groups:[[6,45],[14,46]],totalDataCodewords:914,errorCodewordsPerBlock:28},Q:{groups:[[11,24],[16,25]],totalDataCodewords:664,errorCodewordsPerBlock:30},H:{groups:[[30,16],[2,17]],totalDataCodewords:514,errorCodewordsPerBlock:30}},{L:{groups:[[8,106],[4,107]],totalDataCodewords:1276,errorCodewordsPerBlock:26},M:{groups:[[8,47],[13,48]],totalDataCodewords:1000,errorCodewordsPerBlock:28},Q:{groups:[[7,24],[22,25]],totalDataCodewords:718,errorCodewordsPerBlock:30},H:{groups:[[22,15],[13,16]],totalDataCodewords:538,errorCodewordsPerBlock:30}},{L:{groups:[[10,114],[2,115]],totalDataCodewords:1370,errorCodewordsPerBlock:28},M:{groups:[[19,46],[4,47]],totalDataCodewords:1062,errorCodewordsPerBlock:28},Q:{groups:[[28,22],[6,23]],totalDataCodewords:754,errorCodewordsPerBlock:28},H:{groups:[[33,16],[4,17]],totalDataCodewords:596,errorCodewordsPerBlock:30}},{L:{groups:[[8,122],[4,123]],totalDataCodewords:1468,errorCodewordsPerBlock:30},M:{groups:[[22,45],[3,46]],totalDataCodewords:1128,errorCodewordsPerBlock:28},Q:{groups:[[8,23],[26,24]],totalDataCodewords:808,errorCodewordsPerBlock:30},H:{groups:[[12,15],[28,16]],totalDataCodewords:628,errorCodewordsPerBlock:30}},{L:{groups:[[3,117],[10,118]],totalDataCodewords:1531,errorCodewordsPerBlock:30},M:{groups:[[3,45],[23,46]],totalDataCodewords:1193,errorCodewordsPerBlock:28},Q:{groups:[[4,24],[31,25]],totalDataCodewords:871,errorCodewordsPerBlock:30},H:{groups:[[11,15],[31,16]],totalDataCodewords:661,errorCodewordsPerBlock:30}},{L:{groups:[[7,116],[7,117]],totalDataCodewords:1631,errorCodewordsPerBlock:30},M:{groups:[[21,45],[7,46]],totalDataCodewords:1267,errorCodewordsPerBlock:28},Q:{groups:[[1,23],[37,24]],totalDataCodewords:911,errorCodewordsPerBlock:30},H:{groups:[[19,15],[26,16]],totalDataCodewords:701,errorCodewordsPerBlock:30}},{L:{groups:[[5,115],[10,116]],totalDataCodewords:1735,errorCodewordsPerBlock:30},M:{groups:[[19,47],[10,48]],totalDataCodewords:1373,errorCodewordsPerBlock:28},Q:{groups:[[15,24],[25,25]],totalDataCodewords:985,errorCodewordsPerBlock:30},H:{groups:[[23,15],[25,16]],totalDataCodewords:745,errorCodewordsPerBlock:30}},{L:{groups:[[13,115],[3,116]],totalDataCodewords:1843,errorCodewordsPerBlock:30},M:{groups:[[2,46],[29,47]],totalDataCodewords:1455,errorCodewordsPerBlock:28},Q:{groups:[[42,24],[1,25]],totalDataCodewords:1033,errorCodewordsPerBlock:30},H:{groups:[[23,15],[28,16]],totalDataCodewords:793,errorCodewordsPerBlock:30}},{L:{groups:[[17,115]],totalDataCodewords:1955,errorCodewordsPerBlock:30},M:{groups:[[10,46],[23,47]],totalDataCodewords:1541,errorCodewordsPerBlock:28},Q:{groups:[[10,24],[35,25]],totalDataCodewords:1115,errorCodewordsPerBlock:30},H:{groups:[[19,15],[35,16]],totalDataCodewords:845,errorCodewordsPerBlock:30}},{L:{groups:[[17,115],[1,116]],totalDataCodewords:2071,errorCodewordsPerBlock:30},M:{groups:[[14,46],[21,47]],totalDataCodewords:1631,errorCodewordsPerBlock:28},Q:{groups:[[29,24],[19,25]],totalDataCodewords:1171,errorCodewordsPerBlock:30},H:{groups:[[11,15],[46,16]],totalDataCodewords:901,errorCodewordsPerBlock:30}},{L:{groups:[[13,115],[6,116]],totalDataCodewords:2191,errorCodewordsPerBlock:30},M:{groups:[[14,46],[23,47]],totalDataCodewords:1725,errorCodewordsPerBlock:28},Q:{groups:[[44,24],[7,25]],totalDataCodewords:1231,errorCodewordsPerBlock:30},H:{groups:[[59,16],[1,17]],totalDataCodewords:961,errorCodewordsPerBlock:30}},{L:{groups:[[12,121],[7,122]],totalDataCodewords:2306,errorCodewordsPerBlock:30},M:{groups:[[12,47],[26,48]],totalDataCodewords:1812,errorCodewordsPerBlock:28},Q:{groups:[[39,24],[14,25]],totalDataCodewords:1286,errorCodewordsPerBlock:30},H:{groups:[[22,15],[41,16]],totalDataCodewords:986,errorCodewordsPerBlock:30}},{L:{groups:[[6,121],[14,122]],totalDataCodewords:2434,errorCodewordsPerBlock:30},M:{groups:[[6,47],[34,48]],totalDataCodewords:1914,errorCodewordsPerBlock:28},Q:{groups:[[46,24],[10,25]],totalDataCodewords:1354,errorCodewordsPerBlock:30},H:{groups:[[2,15],[64,16]],totalDataCodewords:1054,errorCodewordsPerBlock:30}},{L:{groups:[[17,122],[4,123]],totalDataCodewords:2566,errorCodewordsPerBlock:30},M:{groups:[[29,46],[14,47]],totalDataCodewords:1992,errorCodewordsPerBlock:28},Q:{groups:[[49,24],[10,25]],totalDataCodewords:1426,errorCodewordsPerBlock:30},H:{groups:[[24,15],[46,16]],totalDataCodewords:1096,errorCodewordsPerBlock:30}},{L:{groups:[[4,122],[18,123]],totalDataCodewords:2702,errorCodewordsPerBlock:30},M:{groups:[[13,46],[32,47]],totalDataCodewords:2102,errorCodewordsPerBlock:28},Q:{groups:[[48,24],[14,25]],totalDataCodewords:1502,errorCodewordsPerBlock:30},H:{groups:[[42,15],[32,16]],totalDataCodewords:1142,errorCodewordsPerBlock:30}},{L:{groups:[[20,117],[4,118]],totalDataCodewords:2812,errorCodewordsPerBlock:30},M:{groups:[[40,47],[7,48]],totalDataCodewords:2216,errorCodewordsPerBlock:28},Q:{groups:[[43,24],[22,25]],totalDataCodewords:1582,errorCodewordsPerBlock:30},H:{groups:[[10,15],[67,16]],totalDataCodewords:1222,errorCodewordsPerBlock:30}},{L:{groups:[[19,118],[6,119]],totalDataCodewords:2956,errorCodewordsPerBlock:30},M:{groups:[[18,47],[31,48]],totalDataCodewords:2334,errorCodewordsPerBlock:28},Q:{groups:[[34,24],[34,25]],totalDataCodewords:1666,errorCodewordsPerBlock:30},H:{groups:[[20,15],[61,16]],totalDataCodewords:1276,errorCodewordsPerBlock:30}}],
finderPattern = [1,0,1,1,1],
alignmentPattern = [1,0,1],
errorCorrectionPatterns = {L: "01", M: "00", Q: "11", H: "10"},
formatMaskPattern = "101010000010010",
formatGeneratorPolynomial = "10100110111",
versionGeneratorPolynomial = "1111100100101",
paddingCodewords = ["11101100", "00010001"],
finderPatternValue = 93,
maskPatternConditions = [
function(row,column){return (row + column) % 2 === 0;},
function(row){return row % 2 === 0;},
function(row,column){return column % 3 === 0;},
function(row,column){return (row + column) % 3 === 0;},
function(row,column){return (Math.floor(row/2) + Math.floor(column/3)) % 2 === 0;},
function(row,column){return ((row * column) % 2) + ((row * column) % 3) === 0;},
function(row,column){return (((row * column) % 2) + ((row * column) % 3)) % 2 === 0;},
function(row,column){return (((row + column) % 2) + ((row * column) % 3)) % 2 === 0;}
],
numberRegex = /^\d+/,
alphaPattern = "A-Z0-9 $%*+./:-",
alphaExclusiveSet = "A-Z $%*+./:-",
alphaRegex = new RegExp("^[" + alphaExclusiveSet + "]+"),
alphaNumericRegex = new RegExp("^[" + alphaPattern+ "]+"),
byteRegex = new RegExp("^[^" + alphaPattern+ "]+"),
initMinNumericBeforeAlpha = 8,
initMinNumericBeforeByte = 5,
initMinAlphaBeforeByte = 8,
minNumericBeforeAlpha = 17,
minNumericBeforeByte = 9,
minAlphaBeforeByte = 16,
round = Math.round;
function toDecimal(value){
return parseInt(value, 2);
}
function toBitsString(value, length){
var result = Number(value).toString(2);
if(result.length < length){
result = new Array(length - result.length + 1).join(0) + result;
}
return result;
}
function splitInto(str, n){
var result = [],
idx = 0;
while(idx < str.length){
result.push(str.substring(idx, idx + n));
idx+= n;
}
return result;
}
var QRDataMode = kendo.Class.extend({
getVersionIndex: function(version){
if(version < 10){
return 0;
}
else if(version > 26){
return 2;
}
return 1;
},
getBitsCharacterCount: function(version){
var mode = this;
return mode.bitsInCharacterCount[mode.getVersionIndex(version || 40)];
},
getModeCountString: function(length, version){
var mode = this;
return mode.modeIndicator + toBitsString(length, mode.getBitsCharacterCount(version));
},
encode: function(){},
getStringBitsLength: function(){},
getValue: function(){},
modeIndicator: "",
bitsInCharacterCount: []
});
var modes = {};
modes[NUMERIC] = QRDataMode.extend({
bitsInCharacterCount: [10, 12, 14],
modeIndicator: "0001",
getValue: function(character){
return parseInt(character, 10);
},
encode: function(str, version){
var mode = this,
parts = splitInto(str, 3),
result = mode.getModeCountString(str.length, version);
for(var i = 0; i < parts.length - 1; i++){
result += toBitsString(parts[i], 10);
}
return result + toBitsString(parts[i], 1 + 3 * parts[i].length);
},
getStringBitsLength: function(inputLength, version){
var mod3 = inputLength % 3;
return 4 + this.getBitsCharacterCount(version) + 10 * Math.floor(inputLength / 3) + 3 * mod3 + (mod3 === 0 ? 0 : 1);
}
});
modes[ALPHA_NUMERIC] = QRDataMode.extend({
characters: {"0":0,"1": 1,"2": 2,"3": 3,"4": 4,"5": 5,"6": 6,"7": 7,"8": 8,"9": 9,"A": 10,"B": 11,"C": 12,"D": 13,"E": 14,"F": 15,"G": 16,"H": 17,"I": 18,"J": 19,"K": 20,"L": 21,"M": 22,"N": 23,"O": 24,"P": 25,"Q": 26,"R": 27,"S": 28,"T": 29,"U": 30,"V": 31,"W": 32,"X": 33,"Y": 34,"Z": 35," ": 36,"$": 37,"%": 38,"*": 39,"+": 40,"-": 41,".": 42,"/": 43,":": 44},
bitsInCharacterCount: [9,11,13],
modeIndicator: "0010",
getValue: function(character){
return this.characters[character];
},
encode: function(str, version){
var mode = this,
parts = splitInto(str, 2),
result = mode.getModeCountString(str.length, version),
value;
for(var i = 0; i < parts.length - 1; i++){
value = 45 * mode.getValue(parts[i].charAt(0)) + mode.getValue(parts[i].charAt(1));
result += toBitsString(value, 11);
}
value = parts[i].length == 2 ?
45 * mode.getValue(parts[i].charAt(0)) + mode.getValue(parts[i].charAt(1)) :
mode.getValue(parts[i].charAt(0));
return result + toBitsString(value, 1 + 5 * parts[i].length);
},
getStringBitsLength: function(inputLength, version){
return 4 + this.getBitsCharacterCount(version) + 11 * Math.floor(inputLength / 2) + 6 * (inputLength % 2);
}
});
modes[BYTE] = QRDataMode.extend({
bitsInCharacterCount: [8,16,16],
modeIndicator: "0100",
getValue: function(character){
var code = character.charCodeAt(0);
if(code <= 127 || (160 <= code && code <= 255)){
return code;
}
else{
throw new Error("Unsupported character: " + character);
}
},
encode: function(str, version){
var mode = this,
result = mode.getModeCountString(str.length, version);
for(var i = 0; i < str.length; i++){
result += toBitsString(mode.getValue(str.charAt(i)), 8);
}
return result;
},
getStringBitsLength: function(inputLength, version){
return 4 + this.getBitsCharacterCount(version) + 8 * inputLength;
}
});
var modeInstances = {};
for(var mode in modes){
modeInstances[mode] = new modes[mode]();
}
var FreeCellVisitor = function (matrix){
var that = this,
row = matrix.length - 1,
column = matrix.length - 1,
startColumn = column,
dir = -1,
c = 0;
that.move = function(){
row += dir * c;
c^=1;
column = startColumn - c;
};
that.getNextCell = function(){
while(matrix[row][column] !== undefined){
that.move();
if(row < 0 || row >= matrix.length){
dir = -dir;
startColumn-= startColumn != 8 ? 2 : 3;
column = startColumn;
row = dir < 0 ? matrix.length - 1 : 0;
}
}
return {row: row, column: column};
};
that.getNextRemainderCell = function(){
that.move();
if(matrix[row][column] === undefined){
return {row: row, column: column};
}
};
};
function fillFunctionCell(matrices, bit, x, y){
for(var i = 0; i< matrices.length;i++){
matrices[i][x][y] = bit;
}
}
function fillDataCell(matrices, bit, x, y){
for(var i = 0; i < maskPatternConditions.length;i++){
matrices[i][x][y] = maskPatternConditions[i](x,y) ? bit ^ 1 : parseInt(bit, 10);
}
}
var fillData = function (matrices, blocks){
var cellVisitor = new FreeCellVisitor(matrices[0]),
block,
codewordIdx,
cell;
for(var blockIdx = 0; blockIdx < blocks.length;blockIdx++){
block = blocks[blockIdx];
codewordIdx = 0;
while(block.length > 0){
for(var i = 0; i< block.length; i++){
for(var j = 0; j < 8;j++){
cell = cellVisitor.getNextCell();
fillDataCell(matrices, block[i][codewordIdx].charAt(j), cell.row, cell.column);
}
}
codewordIdx++;
while(block[0] && codewordIdx == block[0].length){
block.splice(0,1);
}
}
}
while((cell = cellVisitor.getNextRemainderCell())){
fillDataCell(matrices, 0, cell.row, cell.column);
}
};
var padDataString = function (dataString, totalDataCodewords){
var dataBitsCount = totalDataCodewords * 8,
terminatorIndex = 0,
paddingCodewordIndex = 0;
while(dataString.length < dataBitsCount && terminatorIndex < terminator.length){
dataString+=terminator.charAt(terminatorIndex++);
}
if(dataString.length % 8 !== 0){
dataString+= new Array(9 - dataString.length % 8).join("0");
}
while(dataString.length < dataBitsCount){
dataString+= paddingCodewords[paddingCodewordIndex];
paddingCodewordIndex ^= 1;
}
return dataString;
};
function generatePowersOfTwo(){
var result;
for(var power = 1; power < 255; power++){
result = powersOfTwoResult[power - 1] * 2;
if(result > 255){
result = result ^ 285;
}
powersOfTwoResult[power] = result;
powersOfTwo[result] = power;
}
result = (powersOfTwoResult[power - 1] * 2) ^ 285;
powersOfTwoResult[power] = result;
powersOfTwoResult[-1] = 0;
}
var xorPolynomials = function (x,y){
var result = [],
idx = x.length - 2;
for(var i = idx; i>=0; i--){
result[i] = x[i] ^ y[i];
}
return result;
};
var multiplyPolynomials = function (x, y){
var result = [];
for(var i = 0; i < x.length; i++){
for(var j = 0; j < y.length; j++){
if(result[i+j] === undefined){
result[i+j] = (x[i] + (y[j] >= 0 ? y[j] : 0)) % 255;
}
else{
result[i+j] = powersOfTwo[powersOfTwoResult[result[i+j]] ^ powersOfTwoResult[(x[i] + y[j]) % 255]];
}
}
}
return result;
};
function generateGeneratorPolynomials(){
var maxErrorCorrectionCodeWordsCount = 68;
for(var idx = 2; idx <= maxErrorCorrectionCodeWordsCount; idx++){
var firstPolynomial = generatorPolynomials[idx - 1],
secondPolynomial = [idx, 0];
generatorPolynomials[idx] = multiplyPolynomials(firstPolynomial, secondPolynomial);
}
}
//possibly generate on demand
generatePowersOfTwo();
generateGeneratorPolynomials();
function multiplyByConstant(polynomial, power){
var result = [],
idx = polynomial.length - 1;
do{
result[idx] = powersOfTwoResult[(polynomial[idx] + power) % 255];
idx--;
}while(polynomial[idx] !== undefined);
return result;
}
var generateErrorCodewords = function (data, errorCodewordsCount){
var generator = generatorPolynomials[errorCodewordsCount - 1],
result = new Array(errorCodewordsCount).concat(data),
generatorPolynomial = new Array(result.length - generator.length).concat(generator),
steps = data.length,
errorCodewords = [],
divisor,
idx;
for(idx = 0; idx < steps; idx++){
divisor = multiplyByConstant(generatorPolynomial, powersOfTwo[result[result.length - 1]]);
generatorPolynomial.splice(0,1);
result = xorPolynomials(divisor, result);
}
for(idx = result.length - 1; idx >= 0;idx--){
errorCodewords[errorCodewordsCount - 1 - idx] = toBitsString(result[idx], 8);
}
return errorCodewords;
};
var getBlocks = function (dataStream, versionCodewordsInformation){
var codewordStart = 0,
dataBlocks = [],
errorBlocks = [],
dataBlock,
versionGroups = versionCodewordsInformation.groups,
blockCodewordsCount,
groupBlocksCount,
messagePolynomial,
codeword;
for(var groupIdx = 0; groupIdx < versionGroups.length; groupIdx++){
groupBlocksCount = versionGroups[groupIdx][0];
for(var blockIdx = 0; blockIdx < groupBlocksCount;blockIdx++){
blockCodewordsCount = versionGroups[groupIdx][1];
dataBlock = [];
messagePolynomial = [];
for(var codewordIdx = 1; codewordIdx <= blockCodewordsCount; codewordIdx++){
codeword = dataStream.substring(codewordStart, codewordStart + 8);
dataBlock.push(codeword);
messagePolynomial[blockCodewordsCount - codewordIdx] = toDecimal(codeword);
codewordStart+=8;
}
dataBlocks.push(dataBlock);
errorBlocks.push(generateErrorCodewords(messagePolynomial,
versionCodewordsInformation.errorCodewordsPerBlock));
}
}
return [dataBlocks, errorBlocks];
};
var chooseMode = function (str, minNumericBeforeAlpha, minNumericBeforeByte, minAlphaBeforeByte, previousMode){
var numeric = numberRegex.exec(str),
numericMatch = numeric ? numeric[0] : "",
alpha = alphaRegex.exec(str),
alphaMatch = alpha ? alpha[0] : "",
alphaNumeric = alphaNumericRegex.exec(str),
alphaNumericMatch = alphaNumeric ? alphaNumeric[0] : "",
mode,
modeString;
if(numericMatch && (numericMatch.length >= minNumericBeforeAlpha ||
str.length == numericMatch.length || (numericMatch.length >= minNumericBeforeByte &&
!alphaNumericRegex.test(str.charAt(numericMatch.length))))){
mode = NUMERIC;
modeString = numericMatch;
}
else if(alphaNumericMatch && (str.length == alphaNumericMatch.length ||
alphaNumericMatch.length >= minAlphaBeforeByte || previousMode == ALPHA_NUMERIC)){
mode = ALPHA_NUMERIC;
modeString = numericMatch || alphaMatch;
}
else {
mode = BYTE;
if(alphaNumericMatch){
modeString = alphaNumericMatch + byteRegex.exec(str.substring(alphaNumericMatch.length))[0];
}
else{
modeString = byteRegex.exec(str)[0];
}
}
return {
mode: mode,
modeString: modeString
};
};
var getModes = function (str){
var modes = [],
previousMode,
idx = 0;
modes.push(chooseMode(str, initMinNumericBeforeAlpha, initMinNumericBeforeByte, initMinAlphaBeforeByte, previousMode));
previousMode = modes[0].mode;
str = str.substr(modes[0].modeString.length);
while(str.length > 0){
var nextMode = chooseMode(str, minNumericBeforeAlpha, minNumericBeforeByte, minAlphaBeforeByte, previousMode);
if(nextMode.mode != previousMode){
previousMode = nextMode.mode;
modes.push(nextMode);
idx++;
}
else{
modes[idx].modeString += nextMode.modeString;
}
str = str.substr(nextMode.modeString.length);
}
return modes;
};
var getDataCodewordsCount = function (modes){
var length = 0,
mode;
for(var i = 0; i < modes.length; i++){
mode = modeInstances[modes[i].mode];
length+= mode.getStringBitsLength(modes[i].modeString.length);
}
return Math.ceil(length / 8);
};
var getVersion = function (dataCodewordsCount, errorCorrectionLevel){
var x = 0,
y = versionsCodewordsInformation.length - 1,
version = Math.floor(versionsCodewordsInformation.length / 2);
do{
if(dataCodewordsCount < versionsCodewordsInformation[version][errorCorrectionLevel].totalDataCodewords){
y = version;
}
else{
x = version;
}
version = x + Math.floor((y - x) / 2);
}while(y - x > 1);
if(dataCodewordsCount <= versionsCodewordsInformation[x][errorCorrectionLevel].totalDataCodewords){
return version + 1;
}
return y + 1;
};
var getDataString = function (modes, version){
var dataString = "",
mode;
for(var i = 0; i < modes.length; i++){
mode = modeInstances[modes[i].mode];
dataString+= mode.encode(modes[i].modeString, version);
}
return dataString;
};
//fix case all zeros
var encodeFormatInformation = function (format){
var formatNumber = toDecimal(format),
encodedString,
result = "";
if(formatNumber === 0){
return "101010000010010";
}
else{
encodedString = encodeBCH(toDecimal(format), formatGeneratorPolynomial, 15);
}
for(var i = 0; i < encodedString.length; i++){
result += encodedString.charAt(i) ^ formatMaskPattern.charAt(i);
}
return result;
};
var encodeBCH = function (value, generatorPolynomial, codeLength){
var generatorNumber = toDecimal(generatorPolynomial),
polynomialLength = generatorPolynomial.length - 1,
valueNumber = value << polynomialLength,
length = codeLength - polynomialLength,
valueString = toBitsString(value, length),
result = dividePolynomials(valueNumber, generatorNumber);
result = valueString + toBitsString(result, polynomialLength);
return result;
};
var dividePolynomials = function (numberX,numberY){
var yLength = numberY.toString(2).length,
xLength = numberX.toString(2).length;
do{
numberX ^= numberY << xLength - yLength;
xLength = numberX.toString(2).length;
}
while(xLength >= yLength);
return numberX;
};
function getNumberAt(str, idx){
return parseInt(str.charAt(idx), 10);
}
var initMatrices = function (version){
var matrices = [],
modules = 17 + 4 * version;
for(var i = 0; i < maskPatternConditions.length; i++){
matrices[i] = new Array(modules);
for(var j = 0; j < modules; j++){
matrices[i][j] = new Array(modules);
}
}
return matrices;
};
var addFormatInformation =function (matrices, formatString){
var matrix = matrices[0],
x,
y,
idx = 0,
length = formatString.length;
for(x=0, y=8; x <= 8;x++){
if(x!== 6){
fillFunctionCell(matrices, getNumberAt(formatString, length - 1 - idx++), x, y);
}
}
for(x=8, y=7; y>=0;y--){
if(y!== 6){
fillFunctionCell(matrices, getNumberAt(formatString, length - 1 - idx++), x, y);
}
}
idx=0;
for(y = matrix.length - 1, x = 8; y >= matrix.length - 8;y--){
fillFunctionCell(matrices,getNumberAt(formatString, length - 1 - idx++), x, y);
}
fillFunctionCell(matrices, 1, matrix.length - 8, 8);
for(x = matrix.length - 7, y = 8; x < matrix.length;x++){
fillFunctionCell(matrices, getNumberAt(formatString, length - 1 - idx++), x, y);
}
};
var encodeVersionInformation = function (version){
return encodeBCH(version, versionGeneratorPolynomial, 18);
};
var addVersionInformation = function (matrices, dataString){
var matrix = matrices[0],
modules = matrix.length,
x1 = 0,
y1 = modules - 11,
x2 = modules - 11,
y2 = 0,
quotient,
mod,
value;
for(var idx =0; idx < dataString.length; idx++){
quotient = Math.floor(idx / 3);
mod = idx % 3;
value = getNumberAt(dataString, dataString.length - idx - 1);
fillFunctionCell(matrices, value, x1 + quotient, y1 + mod);
fillFunctionCell(matrices, value, x2 + mod, y2 + quotient);
}
};
var addCentricPattern = function (matrices, pattern, x, y){
var size = pattern.length + 2,
length = pattern.length + 1,
value;
for(var i = 0; i < pattern.length; i++){
for(var j = i; j < size - i; j++){
value = pattern[i];
fillFunctionCell(matrices, value, x + j, y + i);
fillFunctionCell(matrices, value, x + i, y + j);
fillFunctionCell(matrices, value, x + length - j, y + length - i);
fillFunctionCell(matrices, value, x + length - i, y + length - j);
}
}
};
var addFinderSeparator = function (matrices, direction, x, y){
var nextX = x,
nextY = y,
matrix = matrices[0];
do{
fillFunctionCell(matrices, 0, nextX, y);
fillFunctionCell(matrices, 0, x, nextY);
nextX+= direction[0];
nextY+= direction[1];
}
while(nextX >=0 && nextX < matrix.length);
};
var addFinderPatterns = function (matrices){
var modules = matrices[0].length;
addCentricPattern(matrices, finderPattern, 0, 0);
addFinderSeparator(matrices, [-1,-1], 7,7);
addCentricPattern(matrices, finderPattern, modules - 7, 0);
addFinderSeparator(matrices, [1,-1], modules - 8, 7);
addCentricPattern(matrices, finderPattern, 0 , modules - 7);
addFinderSeparator(matrices, [-1,1],7, modules - 8);
};
var addAlignmentPatterns = function (matrices, version){
if(version < 2) {
return;
}
var matrix = matrices[0],
modules = matrix.length,
pointsCount = Math.floor(version / 7),
points = [6],
startDistance,
distance,
idx = 0;
if((startDistance = irregularAlignmentPatternsStartDistance[version])){
distance = (modules - 13 - startDistance) / pointsCount;
}
else{
startDistance = distance = (modules - 13) / (pointsCount + 1);
}
points.push(points[idx++] + startDistance);
while((points[idx] + distance) < modules){
points.push(points[idx++] + distance);
}
for(var i = 0; i < points.length;i++){
for(var j = 0; j < points.length; j++){
if(matrix[points[i]][points[j]] === undefined){
addCentricPattern(matrices, alignmentPattern, points[i] - 2, points[j] - 2);
}
}
}
};
var addTimingFunctions = function (matrices){
var row = 6,
column = 6,
value = 1,
modules = matrices[0].length;
for(var i = 8; i < modules - 8;i++){
fillFunctionCell(matrices, value, row, i);
fillFunctionCell(matrices, value, i, column);
value ^= 1;
}
};
var scoreMaskMatrixes = function (matrices){
var scores = [],
previousBits = [],
darkModules = [],
patterns = [],
adjacentSameBits = [],
matrix,
i,
row = 0,
column = 1,
modules = matrices[0].length;
for(i = 0; i < matrices.length; i++){
scores[i] = 0;
darkModules[i] = 0;
adjacentSameBits[i] = [0,0];
patterns[i] = [0, 0];
previousBits[i] = [];
}
for(i = 0; i < modules; i++){
for(var j = 0; j < modules; j++){
for(var k = 0; k < matrices.length; k++){
matrix = matrices[k];
darkModules[k]+= parseInt(matrix[i][j], 10);
if(previousBits[k][row] === matrix[i][j] && i + 1 < modules && j - 1 >= 0 &&
matrix[i + 1][j] == previousBits[k][row] && matrix[i + 1][j - 1] == previousBits[k][row]){
scores[k]+=3;
}
scoreFinderPatternOccurance(k, patterns, scores, row, matrix[i][j]);
scoreFinderPatternOccurance(k, patterns, scores, column, matrix[j][i]);
scoreAdjacentSameBits(k,scores,previousBits,matrix[i][j],adjacentSameBits,row);
scoreAdjacentSameBits(k,scores,previousBits,matrix[j][i],adjacentSameBits,column);
}
}
}
var total = modules * modules,
minIdx,
min = Number.MAX_VALUE;
for(i = 0; i < scores.length; i++){
scores[i]+= calculateDarkModulesRatioScore(darkModules[i], total);
if(scores[i] < min){
min = scores[i];
minIdx = i;
}
}
return minIdx;
};
function scoreFinderPatternOccurance(idx, patterns, scores, rowColumn, bit){
patterns[idx][rowColumn] = ((patterns[idx][rowColumn] << 1) ^ bit) % 128;
if(patterns[idx][rowColumn] == finderPatternValue){
scores[idx] += 40;
}
}
function scoreAdjacentSameBits(idx, scores, previousBits, bit, adjacentBits, rowColumn){
if(previousBits[idx][rowColumn] == bit){
adjacentBits[idx][rowColumn]++;
}
else{
previousBits[idx][rowColumn] = bit;
if(adjacentBits[idx][rowColumn] >= 5){
scores[idx]+= 3 + adjacentBits[idx][rowColumn] - 5;
}
adjacentBits[idx][rowColumn] = 1;
}
}
function calculateDarkModulesRatioScore(darkModules, total){
var percent = Math.floor((darkModules / total) * 100),
mod5 = percent % 5,
previous = Math.abs(percent - mod5 - 50),
next = Math.abs(percent + 5 - mod5 - 50),
score = 10 * Math.min(previous / 5, next / 5);
return score;
}
var EncodingResult = function(dataString, version){
this.dataString = dataString;
this.version = version;
};
var IsoEncoder = function(){
this.getEncodingResult = function(inputString, errorCorrectionLevel){
var modes = getModes(inputString),
dataCodewordsCount = getDataCodewordsCount(modes),
version = getVersion(dataCodewordsCount, errorCorrectionLevel),
dataString = getDataString(modes, version);
return new EncodingResult(dataString, version);
};
};
var UTF8Encoder = function(){
this.mode = modeInstances[this.encodingMode];
};
UTF8Encoder.fn = UTF8Encoder.prototype = {
encodingMode: BYTE,
utfBOM: "111011111011101110111111",
initialModeCountStringLength: 20,
getEncodingResult: function(inputString, errorCorrectionLevel){
var that = this,
data = that.encode(inputString),
dataCodewordsCount = that.getDataCodewordsCount(data),
version = getVersion(dataCodewordsCount, errorCorrectionLevel),
dataString = that.mode.getModeCountString(data.length / 8, version) + data;
return new EncodingResult(dataString, version);
},
getDataCodewordsCount: function(data){
var that = this,
dataLength = data.length,
dataCodewordsCount = Math.ceil(( that.initialModeCountStringLength + dataLength) / 8);
return dataCodewordsCount;
},
encode: function(str){
var that = this,
result = that.utfBOM;
for(var i = 0; i < str.length; i++){
result += that.encodeCharacter(str.charCodeAt(i));
}
return result;
},
encodeCharacter: function(code){
var bytesCount = this.getBytesCount(code),
bc = bytesCount - 1,
result = "";
if(bytesCount == 1){
result = toBitsString(code, 8);
}
else{
var significantOnes = 8 - bytesCount;
for(var i = 0; i < bc; i++){
result = toBitsString(code >> (i * 6) & 63 | 128, 8) + result;
}
result = ((code >> bc * 6) | ((255 >> significantOnes) << significantOnes)).toString(2) + result;
}
return result;
},
getBytesCount: function(code){
var ranges = this.ranges;
for(var i = 0; i < ranges.length;i++){
if(code < ranges[i]){
return i + 1;
}
}
},
ranges: [128,2048,65536,2097152,67108864]
};
var QRCodeDataEncoder = function(encoding){
if(encoding && encoding.toLowerCase().indexOf("utf_8") >= 0){
return new UTF8Encoder();
}
else{
return new IsoEncoder();
}
};
var encodeData = function (inputString, errorCorrectionLevel, encoding){
var encoder = new QRCodeDataEncoder(encoding),
encodingResult = encoder.getEncodingResult(inputString, errorCorrectionLevel),
version = encodingResult.version,
versionInformation = versionsCodewordsInformation[version - 1][errorCorrectionLevel],
dataString = padDataString(encodingResult.dataString, versionInformation.totalDataCodewords),
blocks = getBlocks(dataString, versionInformation),
matrices = initMatrices(version);
addFinderPatterns(matrices);
addAlignmentPatterns(matrices, version);
addTimingFunctions(matrices);
if(version >= 7){
addVersionInformation(matrices, toBitsString(0, 18));
}
addFormatInformation(matrices, toBitsString(0, 15));
fillData(matrices, blocks);
var minIdx = scoreMaskMatrixes(matrices),
optimalMatrix = matrices[minIdx];
if(version >= 7){
addVersionInformation([optimalMatrix], encodeVersionInformation(version));
}
var formatString = errorCorrectionPatterns[errorCorrectionLevel] + toBitsString(minIdx, 3);
addFormatInformation([optimalMatrix], encodeFormatInformation(formatString));
return optimalMatrix;
};
var QRCodeDefaults= {
DEFAULT_SIZE: 200,
QUIET_ZONE_LENGTH: 4,
DEFAULT_ERROR_CORRECTION_LEVEL:"L",
DEFAULT_BACKGROUND: "#fff",
DEFAULT_DARK_MODULE_COLOR: "#000",
MIN_BASE_UNIT_SIZE: 1
};
var QRCode = Widget.extend({
init: function (element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
that.element = $(element);
that.wrapper = that.element;
that.element.addClass("k-qrcode");
that._view = dataviz.ViewFactory.current.create({}, that.options.renderAs);
that.setOptions(options);
},
redraw: function(){
var that = this,
view = that._view;
that._redraw(view);
view.renderTo(that.element[0]);
},
svg: function() {
if (dataviz.SVGView) {
var view = new dataviz.SVGView();
this._redraw(view);
return view.render();
} else {
throw new Error("Unable to create SVGView. Check that kendo.dataviz.svg.js is loaded.");
}
},
imageDataURL: function() {
if (dataviz.CanvasView) {
if (dataviz.supportsCanvas()) {
var container = document.createElement("div"),
view = new dataviz.CanvasView();
this._redraw(view);
return view.renderTo(container).toDataURL();
} else {
kendo.logToConsole(
"Warning: Unable to generate image. The browser does not support Canvas.\n" +
"User agent: " + navigator.userAgent);
return null;
}
} else {
throw new Error("Unable to create CanvasView. Check that kendo.dataviz.canvas.js is loaded.");
}
},
getSize: function() {
return kendo.dimensions(this.element);
},
_resize: function() {
this.redraw();
},
_redraw: function(view) {
var that = this,
value = that._value,
baseUnit,
border = that.options.border || {},
padding = that.options.padding || 0,
borderWidth = border.width || 0,
quietZoneSize,
matrix,
size,
dataSize,
contentSize;
border.width = borderWidth;
if(!value){
return;
}
matrix = encodeData(value, that.options.errorCorrection, that.options.encoding);
size = that._getSize();
contentSize = size - 2 * (borderWidth + padding);
baseUnit = that._calculateBaseUnit(contentSize, matrix.length);
dataSize = matrix.length * baseUnit;
quietZoneSize = that._calculateQuietZone(dataSize, contentSize, borderWidth, padding);
view.children = [];
view.options.width = size;
view.options.height = size;
that._renderBackground(view, size, border);
that._renderMatrix(view, matrix, baseUnit, quietZoneSize);
},
_getSize: function(){
var that = this,
size;
if(that.options.size){
size = parseInt(that.options.size, 10);
}
else {
var element = that.element,
min = Math.min(element.width(), element.height());
if(min > 0){
size = min;
}
else{
size = QRCodeDefaults.DEFAULT_SIZE;
}
}
return size;
},
_calculateBaseUnit: function(size, matrixSize){
var baseUnit = Math.floor(size/ matrixSize);
if(baseUnit < QRCodeDefaults.MIN_BASE_UNIT_SIZE){
throw new Error("Insufficient size.");
}
if(baseUnit * matrixSize >= size &&
baseUnit - 1 >= QRCodeDefaults.MIN_BASE_UNIT_SIZE){
baseUnit--;
}
return baseUnit;
},
_calculateQuietZone: function(dataSize, contentSize, border, padding){
return border + padding + (contentSize - dataSize) / 2;
},
_renderMatrix: function(view, matrix, baseUnit, quietZoneSize){
var that = this,
y,
x1,
box,
column,
elements = [];
for(var row = 0; row < matrix.length; row++){
y = quietZoneSize + row * baseUnit;
column = 0;
while(column < matrix.length){
while(matrix[row][column] === 0 && column < matrix.length){
column++;
}
if(column < matrix.length){
x1 = column;
while(matrix[row][column] == 1){
column++;
}
box = new Box2D(
round(quietZoneSize + x1 * baseUnit), round(y),
round(quietZoneSize + column * baseUnit), round(y + baseUnit));
elements.push(box.points());
}
}
}
view.children.push(view.createMultiLine(elements, {
fill: that.options.color,
stroke: that.options.color, strokeWidth: 0,
align: false
}));
},
_renderBackground: function (view, size, border) {
var that = this;
view.children.push(view.createRect(Box2D(0,0, size, size).unpad(border.width / 2),
{
fill: that.options.background,
stroke: border.color,
strokeWidth: border.width,
align: false
}));
},
setOptions: function (options) {
var that = this;
options = options || {};
that.options = extend(that.options, options);
if (options.value !== undefined) {
that._value = that.options.value + "";
}
that.redraw();
},
value: function(value){
var that = this;
if (value === undefined) {
return that._value;
}
that._value = value + "";
that.redraw();
},
options: {
name: "QRCode",
renderAs: "svg",
encoding: "ISO_8859_1",
value: "",
errorCorrection: QRCodeDefaults.DEFAULT_ERROR_CORRECTION_LEVEL,
background: QRCodeDefaults.DEFAULT_BACKGROUND,
color: QRCodeDefaults.DEFAULT_DARK_MODULE_COLOR,
size: "",
padding: 0,
border: {
color: "",
width: 0
}
}
});
dataviz.ui.plugin(QRCode);
kendo.deepExtend(dataviz, {
QRCode: QRCode,
QRCodeDefaults: QRCodeDefaults,
QRCodeFunctions: {
FreeCellVisitor: FreeCellVisitor,
fillData: fillData,
padDataString: padDataString,
generateErrorCodewords: generateErrorCodewords,
xorPolynomials: xorPolynomials,
getBlocks: getBlocks,
multiplyPolynomials: multiplyPolynomials,
chooseMode: chooseMode,
getModes: getModes,
getDataCodewordsCount: getDataCodewordsCount,
getVersion: getVersion,
getDataString: getDataString,
encodeFormatInformation: encodeFormatInformation,
encodeBCH: encodeBCH,
dividePolynomials: dividePolynomials,
initMatrices: initMatrices,
addFormatInformation: addFormatInformation,
encodeVersionInformation: encodeVersionInformation,
addVersionInformation: addVersionInformation,
addCentricPattern: addCentricPattern,
addFinderSeparator: addFinderSeparator,
addFinderPatterns: addFinderPatterns,
addAlignmentPatterns: addAlignmentPatterns,
addTimingFunctions: addTimingFunctions,
scoreMaskMatrixes: scoreMaskMatrixes,
encodeData: encodeData,
UTF8Encoder: UTF8Encoder
},
QRCodeFields: {
modes: modeInstances,
powersOfTwo: powersOfTwo,
powersOfTwoResult: powersOfTwoResult,
generatorPolynomials: generatorPolynomials
}
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var kendo = window.kendo,
Class = kendo.Class,
Observable = kendo.Observable,
deepExtend = kendo.deepExtend,
math = Math,
proxy = $.proxy,
dataviz = kendo.dataviz,
defined = dataviz.defined,
filterSeriesByType = dataviz.filterSeriesByType,
template = kendo.template,
Chart = dataviz.ui.Chart,
Selection = dataviz.Selection,
addDuration = dataviz.addDuration,
last = dataviz.last,
limitValue = dataviz.limitValue,
lteDateIndex = dataviz.lteDateIndex,
renderTemplate = dataviz.renderTemplate,
toDate = dataviz.toDate,
toTime = dataviz.toTime;
// Constants =============================================================
var AUTO_CATEGORY_WIDTH = 28,
CHANGE = "change",
CSS_PREFIX = "k-",
DRAG = "drag",
DRAG_END = "dragEnd",
NAVIGATOR_PANE = "_navigator",
NAVIGATOR_AXIS = NAVIGATOR_PANE,
EQUALLY_SPACED_SERIES = dataviz.EQUALLY_SPACED_SERIES,
ZOOM_ACCELERATION = 3,
ZOOM = "zoom",
ZOOM_END = "zoomEnd";
// Stock chart ===========================================================
var StockChart = Chart.extend({
init: function(element, userOptions) {
$(element).addClass(CSS_PREFIX + "chart");
Chart.fn.init.call(this, element, userOptions);
},
_applyDefaults: function(options, themeOptions) {
var chart = this,
width = chart.element.width() || dataviz.DEFAULT_WIDTH;
var stockDefaults = {
seriesDefaults: {
categoryField: options.dateField
},
axisDefaults: {
categoryAxis: {
name: "default",
majorGridLines: {
visible: false
},
labels: {
step: 2
},
majorTicks: {
visible: false
},
maxDateGroups: math.floor(width / AUTO_CATEGORY_WIDTH)
}
}
};
if (themeOptions) {
themeOptions = deepExtend({}, themeOptions, stockDefaults);
}
if (!chart._navigator) {
Navigator.setup(options, themeOptions);
}
Chart.fn._applyDefaults.call(chart, options, themeOptions);
},
_initDataSource: function(userOptions) {
var options = userOptions || {},
dataSource = options.dataSource,
hasServerFiltering = dataSource && dataSource.serverFiltering,
mainAxis = [].concat(options.categoryAxis)[0],
naviOptions = options.navigator || {},
select = naviOptions.select,
hasSelect = select && select.from && select.to,
filter,
dummyAxis;
if (hasServerFiltering && hasSelect) {
filter = [].concat(dataSource.filter || []);
dummyAxis = new dataviz.DateCategoryAxis(deepExtend({
baseUnit: "fit"
}, mainAxis, {
categories: [select.from, select.to]
}));
dataSource.filter =
Navigator.buildFilter(dummyAxis.range().min, select.to)
.concat(filter);
}
Chart.fn._initDataSource.call(this, userOptions);
},
options: {
name: "StockChart",
dateField: "date",
axisDefaults: {
categoryAxis: {
type: "date",
baseUnit: "fit",
justified: true
},
valueAxis: {
narrowRange: true,
labels: {
format: "C"
}
}
},
navigator: {
select: {},
seriesDefaults: {
markers: {
visible: false
},
tooltip: {
visible: true,
template: "#= kendo.toString(category, 'd') #"
},
line: {
width: 2
}
},
hint: {},
visible: true
},
tooltip: {
visible: true
},
legend: {
visible: false
}
},
_resize: function() {
var t = this.options.transitions;
this.options.transitions = false;
this._fullRedraw();
this.options.transitions = t;
},
_redraw: function() {
var chart = this,
navigator = chart._navigator;
if (navigator && navigator.dataSource) {
navigator.redrawSlaves();
} else {
chart._fullRedraw();
}
},
_fullRedraw: function() {
var chart = this,
navigator = chart._navigator;
if (!navigator) {
navigator = chart._navigator = new Navigator(chart);
}
navigator.filterAxes();
Chart.fn._redraw.call(chart);
navigator.redraw();
},
_onDataChanged: function() {
var chart = this;
Chart.fn._onDataChanged.call(chart);
chart._dataBound = true;
},
_bindCategoryAxis: function(axis, data, axisIx) {
var chart = this,
categoryAxes = chart.options.categoryAxis,
axesLength = categoryAxes.length,
currentAxis;
Chart.fn._bindCategoryAxis.apply(this, arguments);
if (axis.name === NAVIGATOR_AXIS) {
while (axisIx < axesLength) {
currentAxis = categoryAxes[axisIx++];
if (currentAxis.pane == NAVIGATOR_PANE) {
currentAxis.categories = axis.categories;
}
}
}
},
_trackSharedTooltip: function(coords) {
var chart = this,
plotArea = chart._plotArea,
pane = plotArea.paneByPoint(coords);
if (pane && pane.options.name === NAVIGATOR_PANE) {
chart._unsetActivePoint();
} else {
Chart.fn._trackSharedTooltip.call(chart, coords);
}
},
destroy: function() {
var chart = this;
chart._navigator.destroy();
Chart.fn.destroy.call(chart);
}
});
var Navigator = Observable.extend({
init: function(chart) {
var navi = this;
navi.chart = chart;
navi.options = deepExtend({}, navi.options, chart.options.navigator);
navi._initDataSource();
if (!defined(navi.options.hint.visible)) {
navi.options.hint.visible = navi.options.visible;
}
chart.bind(DRAG, proxy(navi._drag, navi));
chart.bind(DRAG_END, proxy(navi._dragEnd, navi));
chart.bind(ZOOM, proxy(navi._zoom, navi));
chart.bind(ZOOM_END, proxy(navi._zoomEnd, navi));
},
options: { },
_initDataSource: function() {
var navi = this,
options = navi.options,
autoBind = options.autoBind,
dsOptions = options.dataSource;
if (!defined(autoBind)) {
autoBind = navi.chart.options.autoBind;
}
navi._dataChangedHandler = proxy(navi._onDataChanged, navi);
if (dsOptions) {
navi.dataSource = kendo.data.DataSource
.create(dsOptions)
.bind(CHANGE, navi._dataChangedHandler);
if (autoBind) {
navi.dataSource.fetch();
}
}
},
_onDataChanged: function() {
var navi = this,
chart = navi.chart,
series = chart.options.series,
seriesIx,
seriesLength = series.length,
categoryAxes = chart.options.categoryAxis,
axisIx,
axesLength = categoryAxes.length,
data = navi.dataSource.view(),
currentSeries,
currentAxis,
naviCategories;
for (seriesIx = 0; seriesIx < seriesLength; seriesIx++) {
currentSeries = series[seriesIx];
if (currentSeries.axis == NAVIGATOR_AXIS && chart._isBindable(currentSeries)) {
currentSeries.data = data;
}
}
for (axisIx = 0; axisIx < axesLength; axisIx++) {
currentAxis = categoryAxes[axisIx];
if (currentAxis.pane == NAVIGATOR_PANE) {
if (currentAxis.name == NAVIGATOR_AXIS) {
chart._bindCategoryAxis(currentAxis, data, axisIx);
naviCategories = currentAxis.categories;
} else {
currentAxis.categories = naviCategories;
}
}
}
if (chart._model) {
navi.redraw();
navi.filterAxes();
if (!chart.options.dataSource || (chart.options.dataSource && chart._dataBound)) {
navi.redrawSlaves();
}
}
},
destroy: function() {
var navi = this,
dataSource = navi.dataSource;
if (dataSource) {
dataSource.unbind(CHANGE, navi._dataChangeHandler);
}
if (navi.selection) {
navi.selection.destroy();
}
},
redraw: function() {
this._redrawSelf();
var navi = this,
chart = navi.chart,
options = navi.options,
axis = navi.mainAxis(),
axisClone = clone(axis),
groups = axis.options.categories,
select = navi.options.select || {},
selection = navi.selection,
range = axis.range(),
min = range.min,
max = range.max,
from = select.from || min,
to = select.to || max;
if (groups.length > 0) {
if (selection) {
selection.destroy();
selection.wrapper.remove();
}
// "Freeze" the selection axis position until the next redraw
axisClone.box = axis.box;
// TODO: Move selection initialization to PlotArea.redraw
selection = navi.selection = new Selection(chart, axisClone, {
min: min,
max: max,
from: from,
to: to,
selectStart: $.proxy(navi._selectStart, navi),
select: $.proxy(navi._select, navi),
selectEnd: $.proxy(navi._selectEnd, navi),
mousewheel: {
zoom: "left"
}
});
if (options.hint.visible) {
navi.hint = new NavigatorHint(chart.element, {
min: min,
max: max,
template: options.hint.template,
format: options.hint.format
});
}
}
},
_redrawSelf: function(silent) {
var plotArea = this.chart._plotArea;
if (plotArea) {
plotArea.redraw(last(plotArea.panes), silent);
}
},
redrawSlaves: function() {
var navi = this,
chart = navi.chart,
plotArea = chart._plotArea,
slavePanes = plotArea.panes.slice(0, -1);
// Update the original series before partial refresh.
plotArea.srcSeries = chart.options.series;
plotArea.redraw(slavePanes);
},
_drag: function(e) {
var navi = this,
chart = navi.chart,
coords = chart._eventCoordinates(e.originalEvent),
navigatorAxis = navi.mainAxis(),
naviRange = navigatorAxis.range(),
inNavigator = navigatorAxis.pane.box.containsPoint(coords),
axis = chart._plotArea.categoryAxis,
range = e.axisRanges[axis.options.name],
select = navi.options.select,
selection = navi.selection,
duration,
from,
to;
if (!range || inNavigator || !selection) {
return;
}
if (select.from && select.to) {
duration = toTime(select.to) - toTime(select.from);
} else {
duration = toTime(selection.options.to) - toTime(selection.options.from);
}
from = toDate(limitValue(
toTime(range.min),
naviRange.min, toTime(naviRange.max) - duration
));
to = toDate(limitValue(
toTime(from) + duration,
toTime(naviRange.min) + duration, naviRange.max
));
navi.options.select = { from: from, to: to };
if (navi._liveDrag()) {
navi.filterAxes();
navi.redrawSlaves();
}
selection.set(
from,
to
);
navi.showHint(from, to);
},
_dragEnd: function() {
var navi = this;
navi.filterAxes();
navi.filterDataSource();
navi.redrawSlaves();
if (navi.hint) {
navi.hint.hide();
}
},
_liveDrag: function() {
var support = kendo.support,
isTouch = support.touch,
browser = support.browser,
isFirefox = browser.mozilla,
isOldIE = browser.msie && browser.version < 9;
return !isTouch && !isFirefox && !isOldIE;
},
readSelection: function() {
var navi = this,
selection = navi.selection,
src = selection.options,
dst = navi.options.select;
dst.from = src.from;
dst.to = src.to;
},
filterAxes: function() {
var navi = this,
select = navi.options.select || {},
chart = navi.chart,
allAxes = chart.options.categoryAxis,
from = select.from,
to = select.to,
i,
axis;
for (i = 0; i < allAxes.length; i++) {
axis = allAxes[i];
if (axis.pane !== NAVIGATOR_PANE) {
axis.min = toDate(from);
axis.max = toDate(to);
}
}
},
filterDataSource: function() {
var navi = this,
select = navi.options.select || {},
chart = navi.chart,
chartDataSource = chart.dataSource,
hasServerFiltering = chartDataSource && chartDataSource.options.serverFiltering,
axisOptions;
if (navi.dataSource && hasServerFiltering) {
axisOptions = new dataviz.DateCategoryAxis(deepExtend({
baseUnit: "fit"
}, chart.options.categoryAxis[0], {
categories: [select.from, select.to]
})).options;
chartDataSource.filter(
Navigator.buildFilter(
addDuration(axisOptions.min, -axisOptions.baseUnitStep, axisOptions.baseUnit),
addDuration(axisOptions.max, axisOptions.baseUnitStep, axisOptions.baseUnit)
)
);
}
},
_zoom: function(e) {
var navi = this,
chart = navi.chart,
delta = e.delta,
axis = chart._plotArea.categoryAxis,
select = navi.options.select,
selection = navi.selection,
categories = navi.mainAxis().options.categories,
fromIx,
toIx;
if (!selection) {
return;
}
fromIx = lteDateIndex(selection.options.from, categories);
toIx = lteDateIndex(selection.options.to, categories);
e.originalEvent.preventDefault();
if (math.abs(delta) > 1) {
delta *= ZOOM_ACCELERATION;
}
if (toIx - fromIx > 1) {
selection.expand(delta);
navi.readSelection();
} else {
axis.options.min = select.from;
select.from = axis.scaleRange(-e.delta).min;
}
if (!kendo.support.touch) {
navi.filterAxes();
navi.redrawSlaves();
}
selection.set(select.from, select.to);
navi.showHint(navi.options.select.from, navi.options.select.to);
},
_zoomEnd: function(e) {
this._dragEnd(e);
},
showHint: function(from, to) {
var navi = this,
chart = navi.chart,
plotArea = chart._plotArea;
if (navi.hint) {
navi.hint.show(
from,
to,
plotArea.backgroundBox()
);
}
},
_selectStart: function(e) {
var chart = this.chart;
chart._selectStart.call(chart, e);
},
_select: function(e) {
var navi = this,
chart = navi.chart;
navi.showHint(e.from, e.to);
chart._select.call(chart, e);
},
_selectEnd: function(e) {
var navi = this,
chart = navi.chart;
if (navi.hint) {
navi.hint.hide();
}
navi.readSelection();
navi.filterAxes();
navi.filterDataSource();
navi.redrawSlaves();
chart._selectEnd.call(chart, e);
},
mainAxis: function() {
var plotArea = this.chart._plotArea;
if (plotArea) {
return plotArea.namedCategoryAxes[NAVIGATOR_AXIS];
}
}
});
Navigator.setup = function(options, themeOptions) {
options = options || {};
themeOptions = themeOptions || {};
var naviOptions = deepExtend({}, themeOptions.navigator, options.navigator),
panes = options.panes = [].concat(options.panes),
paneOptions = deepExtend({}, naviOptions.pane, { name: NAVIGATOR_PANE });
if (!naviOptions.visible) {
paneOptions.visible = false;
paneOptions.height = 0.1;
}
panes.push(paneOptions);
Navigator.attachAxes(options, naviOptions);
Navigator.attachSeries(options, naviOptions, themeOptions);
};
Navigator.attachAxes = function(options, naviOptions) {
var categoryAxes,
valueAxes,
series = naviOptions.series || [];
categoryAxes = options.categoryAxis = [].concat(options.categoryAxis);
valueAxes = options.valueAxis = [].concat(options.valueAxis);
var equallySpacedSeries = filterSeriesByType(series, EQUALLY_SPACED_SERIES);
var justifyAxis = equallySpacedSeries.length === 0;
var base = deepExtend({
type: "date",
pane: NAVIGATOR_PANE,
roundToBaseUnit: !justifyAxis,
justified: justifyAxis,
_collapse: false,
tooltip: { visible: false },
labels: { step: 1 },
autoBind: !naviOptions.dataSource,
autoBaseUnitSteps: {
minutes: [1],
hours: [1, 2],
days: [1, 2],
weeks: [],
months: [1],
years: [1]
},
_overlap: false
});
var user = naviOptions.categoryAxis;
categoryAxes.push(
deepExtend({}, base, {
maxDateGroups: 200
}, user, {
name: NAVIGATOR_AXIS,
baseUnit: "fit",
baseUnitStep: "auto",
labels: { visible: false },
majorTicks: { visible: false }
}), deepExtend({}, base, user, {
name: NAVIGATOR_AXIS + "_labels",
maxDateGroups: 20,
baseUnitStep: "auto",
autoBaseUnitSteps: {
minutes: []
},
majorTicks: { visible: true }
}), deepExtend({}, base, user, {
name: NAVIGATOR_AXIS + "_ticks",
maxDateGroups: 200,
majorTicks: {
visible: true,
width: 0.5
},
labels: { visible: false, mirror: true }
})
);
valueAxes.push(deepExtend({
name: NAVIGATOR_AXIS,
pane: NAVIGATOR_PANE,
majorGridLines: {
visible: false
},
visible: false
}, naviOptions.valueAxis));
};
Navigator.attachSeries = function(options, naviOptions, themeOptions) {
var series = options.series = options.series || [],
navigatorSeries = [].concat(naviOptions.series || []),
seriesColors = themeOptions.seriesColors,
defaults = naviOptions.seriesDefaults,
i;
for (i = 0; i < navigatorSeries.length; i++) {
series.push(
deepExtend({
color: seriesColors[i % seriesColors.length],
categoryField: naviOptions.dateField,
visibleInLegend: false,
tooltip: {
visible: false
}
}, defaults, navigatorSeries[i], {
axis: NAVIGATOR_AXIS,
categoryAxis: NAVIGATOR_AXIS,
autoBind: !naviOptions.dataSource
})
);
}
};
Navigator.buildFilter = function(from, to) {
return [{
field: "Date", operator: "gte", value: toDate(from)
}, {
field: "Date", operator: "lt", value: toDate(to)
}];
};
var NavigatorHint = Class.extend({
init: function(container, options) {
var hint = this;
hint.options = deepExtend({}, hint.options, options);
hint.container = container;
hint.chartPadding = {
top: parseInt(container.css("paddingTop"), 10),
left: parseInt(container.css("paddingLeft"), 10)
};
hint.template = hint.template;
if (!hint.template) {
hint.template = hint.template = renderTemplate(
""
);
}
hint.element = $(hint.template()).appendTo(container);
},
options: {
format: "{0:d} - {1:d}",
hideDelay: 500
},
show: function(from, to, bbox) {
var hint = this,
middle = toDate(toTime(from) + toTime(to - from) / 2),
options = hint.options,
text = kendo.format(hint.options.format, from, to),
tooltip = hint.element.find("." + CSS_PREFIX + "tooltip"),
scroll = hint.element.find("." + CSS_PREFIX + "scroll"),
scrollWidth = bbox.width() * 0.4,
minPos = bbox.center().x - scrollWidth,
maxPos = bbox.center().x,
posRange = maxPos - minPos,
range = options.max - options.min,
scale = posRange / range,
offset = middle - options.min,
hintTemplate;
if (hint._hideTimeout) {
clearTimeout(hint._hideTimeout);
}
if (!hint._visible) {
hint.element
.stop(false, true)
.css("visibility", "hidden")
.show();
hint._visible = true;
}
if (options.template) {
hintTemplate = template(options.template);
text = hintTemplate({
from: from,
to: to
});
}
tooltip
.html(text)
.css({
left: bbox.center().x - tooltip.outerWidth() / 2,
top: bbox.y1
});
scroll
.css({
width: scrollWidth,
left: minPos + offset * scale,
top: bbox.y1 +
parseInt(tooltip.css("margin-top"), 10) +
parseInt(tooltip.css("border-top-width"), 10) +
tooltip.height() / 2
});
hint.element.css("visibility", "visible");
},
hide: function() {
var hint = this;
if (hint._hideTimeout) {
clearTimeout(hint._hideTimeout);
}
hint._hideTimeout = setTimeout(function() {
hint._visible = false;
hint.element.fadeOut("slow");
}, hint.options.hideDelay);
}
});
function ClonedObject() { }
function clone(obj) {
ClonedObject.prototype = obj;
return new ClonedObject();
}
// Exports ================================================================
dataviz.ui.plugin(StockChart);
deepExtend(dataviz, {
Navigator: Navigator
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ===============================================================
var kendo = window.kendo,
dataviz = kendo.dataviz,
Chart = dataviz.ui.Chart,
ObservableArray = kendo.data.ObservableArray,
SharedTooltip = dataviz.SharedTooltip,
deepExtend = kendo.deepExtend,
isArray = $.isArray,
inArray = dataviz.inArray,
math = Math;
// Constants =============================================================
var CSS_PREFIX = "k-",
DEAULT_BAR_WIDTH = 150,
DEAULT_BULLET_WIDTH = 150,
BAR = "bar",
BULLET = "bullet",
PIE = "pie",
NO_CROSSHAIR = [BAR, BULLET];
// Sparkline =============================================================
var Sparkline = Chart.extend({
init: function(element, userOptions) {
var chart = this,
stage = chart.stage = $("" +
"#= d.renderPath() #" +
" " +
"#} else {#" +
"" +
"#= d.content # " +
"#}#"
);
}
},
options: {
x: 0,
y: 0,
font: DEFAULT_FONT,
color: BLACK,
fillOpacity: 1,
cursor: {}
},
refresh: function(domElement) {
$(domElement).css("visibility", this.renderVisibility());
},
clone: function() {
var text = this;
return new VMLText(text.content, deepExtend({}, text.options));
},
renderVisibility: function() {
return this.options.fillOpacity > 0 ? "visible" : "hidden";
},
renderCursor: function() {
var options = this.options,
result = "";
if (defined(options.cursor.style)) {
result += "cursor: " + options.cursor.style + ";";
}
return result;
},
renderPath: function() {
var text = this,
options = text.options,
matrix = options.matrix,
size = options.size,
x = options.x,
y = options.y + size.height / 2,
p1 = Point2D(x, y),
p2 = Point2D(x + size.width, y);
p1.transform(matrix);
p2.transform(matrix);
return "" +
" "
);
}
path.stroke = new VMLStroke(path.options);
path.fill = new VMLFill(path.options);
},
options: {
fill: "",
fillOpacity: 1,
strokeOpacity: 1,
rotation: [0,0,0],
visible: true,
cursor: {}
},
renderCoordsize: function() {
var scale = this.options.align === false ? 10000 : 1;
return "coordsize='" + scale + " " + scale + "'";
},
renderSize: function() {
var scale = this.options.align === false ? 100 : 1;
return "width:" + scale + "px; height:" + scale + "px;";
},
render: function() {
var path = this;
path.fill.options.fillOpacity = path.options.fillOpacity;
path.stroke.options.strokeOpacity = path.options.strokeOpacity;
return ViewElement.fn.render.call(path);
},
renderDisplay: function() {
return this.options.visible ? "block" : "none";
},
renderPoints: function() {
// Overriden by inheritors
},
refresh: function(domElement) {
if (!domElement) {
return;
}
var path = this,
element = $(domElement),
parentNode = element[0].parentNode,
fill = path.fill,
stroke = path.stroke;
if (parentNode) {
element.find("path")[0].v = this.renderPoints();
fill.options = stroke.options = path.options;
fill.refresh(element.find("fill")[0]);
stroke.refresh(element.find("stroke")[0]);
element.css("display", path.renderDisplay());
// Force redraw in order to remove artifacts in IE < 7
parentNode.style.cssText = parentNode.style.cssText;
}
},
renderCursor: function() {
var options = this.options,
result = "";
if (defined(options.cursor.style)) {
result += "cursor: " + options.cursor.style + ";";
}
return result;
}
});
var VMLCubicCurve = VMLPath.extend({
init: function(points, options, areaPoints) {
var curve = this;
VMLPath.fn.init.call(curve, options);
curve.points = points;
curve.areaPoints = areaPoints;
},
renderPoints: function() {
var curve = this,
i,
point,
areaPoints = curve.areaPoints,
points = curve.points,
curvePoints = [],
currentPoints;
for(i = 1; i < points.length; i+=3){
currentPoints = [];
for(var j =0; j < 3;j++){
point = points[i+j];
currentPoints.push(round(point.x) + "," + round(point.y));
}
curvePoints.push("C " + currentPoints.join(" "));
}
if(areaPoints && areaPoints.length){
for(i = 0; i < areaPoints.length; i++){
curvePoints.push("L " + round(areaPoints[i].x) + "," + round(areaPoints[i].y));
}
curvePoints.push("X");
}
return "M " + math.round(points[0].x) + "," + math.round(points[0].y) + " " + curvePoints.join(" ") + " E";
}
});
var VMLLine = VMLPath.extend({
init: function(points, closed, options) {
var line = this;
VMLPath.fn.init.call(line, options);
line.points = points;
line.closed = closed;
},
renderPoints: function(){
var line = this,
points = line.points;
return line._renderPoints(points);
},
_renderPoints: function(points) {
var line = this,
i,
count = points.length,
rotate = function(point) {
var options = line.options;
var rotation = options.rotation;
var matrix = options.matrix;
if (matrix) {
return point.clone().transform(matrix);
}
return rotatePoint(point.x, point.y, rotation[1], rotation[2], -rotation[0]);
},
result = "m " + line._print(rotate(points[0]));
if (count > 1) {
result += " l ";
for (i = 1; i < count; i++) {
result += line._print(rotate(points[i]));
if (i < count - 1) {
result += ", ";
}
}
}
if (line.closed) {
result += " x";
}
return result;
},
clone: function() {
var line = this;
return new VMLLine(
deepExtend([], line.points), line.closed,
deepExtend({}, line.options)
);
},
_print: function(point) {
var scale = this.options.align === false ? 100 : 1;
return math.round(point.x * scale) + "," + math.round(point.y * scale);
}
});
var VMLMultiLine = VMLLine.extend({
renderPoints: function(){
var multiLine = this,
elements = multiLine.points,
result = [],
idx;
for(idx = 0; idx < elements.length; idx++){
result.push(multiLine._renderPoints(elements[idx]));
}
return result.join(" ");
}
});
var VMLRing = VMLPath.extend({
init: function(config, options) {
var ring = this;
VMLPath.fn.init.call(ring, options);
ring.pathTemplate = VMLRing.pathTemplate;
if (!ring.pathTemplate) {
ring.pathTemplate = VMLRing.pathTemplate = renderTemplate(
"M #= d.osp.x #,#= d.osp.y # " +
"WA #= d.obb.l #,#= d.obb.t # #= d.obb.r #,#= d.obb.b # " +
"#= d.osp.x #,#= d.osp.y # #= d.oep.x #,#= d.oep.y # " +
"L #= d.iep.x #,#= d.iep.y # " +
"AT #= d.ibb.l #,#= d.ibb.t # #= d.ibb.r #,#= d.ibb.b # " +
"#= d.iep.x #,#= d.iep.y # #= d.isp.x #,#= d.isp.y # " +
"X E"
);
}
ring.config = config;
},
renderPoints: function() {
var ring = this,
config = ring.config,
r = math.max(round(config.r), 0),
ir = math.max(round(config.ir), 0),
cx = round(config.c.x),
cy = round(config.c.y),
startAngle = config.startAngle,
endAngle = config.angle + startAngle,
angle = endAngle - startAngle,
outerBBox = {
l: cx - r,
t: cy - r,
r: cx + r,
b: cy + r
},
innerBBox = {
l: cx - ir,
t: cy - ir,
r: cx + ir,
b: cy + ir
},
outerStartPoint, innerStartPoint,
innerEndPoint, outerEndPoint;
function roundPointCoordinates(point) {
return new Point2D(round(point.x), round(point.y));
}
if (angle <= 1) {
endAngle += 1 - angle;
} else if (angle > 359) {
endAngle -= 1 - angle;
}
outerStartPoint = roundPointCoordinates(config.point(startAngle));
innerStartPoint = roundPointCoordinates(config.point(startAngle, true));
outerEndPoint = roundPointCoordinates(config.point(endAngle));
innerEndPoint = roundPointCoordinates(config.point(endAngle, true));
return ring.pathTemplate({
obb: outerBBox,
ibb: innerBBox,
osp: outerStartPoint,
isp: innerStartPoint,
oep: outerEndPoint,
iep: innerEndPoint,
cx: cx,
cy: cy
});
},
clone: function() {
var sector = this;
return new VMLRing(
deepExtend({}, sector.config),
deepExtend({}, sector.options)
);
}
});
var VMLSector = VMLRing.extend({
init: function(config, options) {
var sector = this;
VMLRing.fn.init.call(sector, config, options);
sector.pathTemplate = VMLSector.pathTemplate;
if (!sector.pathTemplate) {
sector.pathTemplate = VMLSector.pathTemplate = renderTemplate(
"M #= d.osp.x #,#= d.osp.y # " +
"WA #= d.obb.l #,#= d.obb.t # #= d.obb.r #,#= d.obb.b # " +
"#= d.osp.x #,#= d.osp.y # #= d.oep.x #,#= d.oep.y # " +
"L #= d.cx #,#= d.cy # " +
"X E"
);
}
},
clone: function() {
var sector = this;
return new VMLSector(
deepExtend({}, sector.config),
deepExtend({}, sector.options)
);
}
});
var VMLCircle = ViewElement.extend({
init: function(c, r, options) {
var circle = this;
ViewElement.fn.init.call(circle, options);
circle.c = c;
circle.r = r;
circle.template = VMLCircle.template;
if (!circle.template) {
circle.template = VMLCircle.template = renderTemplate(
"" +
"#= d.fill.render() + d.stroke.render() #" +
" "
);
}
circle.stroke = new VMLStroke(circle.options);
circle.fill = new VMLFill(circle.options);
},
options: {
fill: "",
fillOpacity: 1
},
refresh: function(domElement) {
var circle = this,
c = circle.c,
r = math.max(0, circle.r),
size = r * 2,
element = $(domElement);
element.css({
"width": size,
"height": size,
"top": c.y - r,
"left": c.x - r
});
circle.fill.options = circle.options;
circle.fill.refresh(element.find("fill")[0]);
},
clone: function() {
var circle = this;
return new VMLCircle(
deepExtend({}, circle.c),
circle.r,
deepExtend({}, circle.options)
);
}
});
var VMLGroup = ViewElement.extend({
init: function(options) {
var group = this;
ViewElement.fn.init.call(group, options);
group.tagName = group.options.inline ? "span" : "div";
group.template = VMLGroup.template;
if (!group.template) {
group.template = VMLGroup.template = renderTemplate(
"<#= d.tagName # #= d.renderId() #" +
"#= d.renderDataAttributes() #" +
"style='position: absolute; white-space: nowrap;'>" +
"#= d.renderContent() #"
);
}
}
});
var VMLClipRect = ViewElement.extend({
init: function(box, options) {
var clipRect = this;
ViewElement.fn.init.call(clipRect, options);
clipRect.tagName = clipRect.options.inline ? "span" : "div";
clipRect.template = VMLClipRect.template;
clipRect.clipTemplate = VMLClipRect.clipTemplate;
if (!clipRect.template) {
clipRect.template = VMLClipRect.template = renderTemplate(
"<#= d.tagName # #= d.renderId() #" +
"style='position:absolute;" +
"width:#= d.box.width() #px; height:#= d.box.height() + d.box.y1#px; " +
"top:0px; " +
"left:0px; " +
"clip:#= d._renderClip() #;' >" +
"#= d.renderContent() #"
);
clipRect.clipTemplate = VMLClipRect.clipTemplate = renderTemplate(
"rect(#= d.points[0].y #px #= d.points[1].x #px " +
"#= d.points[2].y #px #= d.points[0].x #px)"
);
}
clipRect.box = box;
// Points defining the clipping rectangle
clipRect.points = box.points();
},
clone: function() {
var clipRect = this;
return new VMLClipRect(
clipRect.box, deepExtend({}, clipRect.options)
);
},
refresh: function(domElement) {
if (domElement) {
domElement.style.clip = this._renderClip();
}
},
_renderClip: function() {
return this.clipTemplate(this);
},
destroy: function() {
$("#" + this.options.id + ">*").unwrap();
}
});
var VMLGradient = ViewElement.extend({
init: function(options) {
var gradient = this;
ViewElement.fn.init.call(gradient, options);
},
options: {
opacity: 1
},
renderColors: function() {
var gradient = this,
options = gradient.options,
stops = options.stops,
currentStop,
i,
length = stops.length,
output = [],
round = math.round;
for (i = 0; i < length; i++) {
currentStop = stops[i];
output.push(
round(currentStop.offset * 100) + "% " +
currentStop.color
);
}
return output.join(",");
}
});
var VMLLinearGradient = VMLGradient.extend({
init: function(options) {
var gradient = this;
VMLGradient.fn.init.call(gradient, options);
gradient.template = VMLLinearGradient.template;
if (!gradient.template) {
gradient.template = VMLLinearGradient.template = renderTemplate(
"
")[0];
TextMetrics.fn._measureBox =
$("
")[0];
TextMetrics.current = new TextMetrics();
function measureText(text, style) {
return TextMetrics.current.measure(text, style);
}
// Exports ================================================================
deepExtend(dataviz, {
util: {
TextMetrics: TextMetrics,
LRUCache: LRUCache,
measureText: measureText
}
});
})(window.kendo.jQuery);
(function ($) {
// Imports ================================================================
var kendo = window.kendo,
Class = kendo.Class,
deepExtend = kendo.deepExtend,
dataviz = kendo.dataviz,
append = dataviz.append,
g = dataviz.geometry,
Point = g.Point,
Rect = g.Rect,
Size = g.Size,
Matrix = g.Matrix,
toMatrix = g.toMatrix,
drawing = dataviz.drawing,
OptionsStore = drawing.OptionsStore,
math = Math,
pow = math.pow,
util = dataviz.util,
arrayLimits = util.arrayLimits,
defined = util.defined,
last = util.last,
inArray = $.inArray;
// Drawing primitives =====================================================
var Element = Class.extend({
init: function(options) {
this._initOptions(options);
},
_initOptions: function(options) {
options = options || {};
var transform = options.transform;
if (transform) {
options.transform = g.transform(transform);
}
this.options = new OptionsStore(options);
this.options.observer = this;
},
optionsChange: function(e) {
if (this.observer) {
this.observer.optionsChange(e);
}
},
geometryChange: util.mixins.geometryChange,
transform: function(transform) {
if (defined(transform)) {
this.options.set("transform", g.transform(transform));
} else {
return this.options.get("transform");
}
},
parentTransform: function() {
var element = this,
transformation,
matrix,
parentMatrix;
while (element.parent) {
element = element.parent;
transformation = element.transform();
if (transformation) {
parentMatrix = transformation.matrix().multiplyCopy(parentMatrix || Matrix.unit());
}
}
if (parentMatrix) {
return g.transform(parentMatrix);
}
},
currentTransform: function(parentTransform) {
var elementTransform = this.transform(),
elementMatrix = toMatrix(elementTransform),
parentMatrix,
combinedMatrix;
if (!defined(parentTransform)) {
parentTransform = this.parentTransform();
}
parentMatrix = toMatrix(parentTransform);
if (elementMatrix && parentMatrix) {
combinedMatrix = parentMatrix.multiplyCopy(elementMatrix);
} else {
combinedMatrix = elementMatrix || parentMatrix;
}
if (combinedMatrix) {
return g.transform(combinedMatrix);
}
},
visible: function(visible) {
if (defined(visible)) {
this.options.set("visible", visible);
return this;
} else {
return this.options.get("visible") !== false;
}
}
});
var Group = Element.extend({
init: function(options) {
Element.fn.init.call(this, options);
this.children = [];
},
childrenChange: function(action, items, index) {
if (this.observer) {
this.observer.childrenChange({
action: action,
items: items,
index: index
});
}
},
traverse: function(callback) {
var children = this.children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
callback(child);
if (child.traverse) {
child.traverse(callback);
}
}
return this;
},
append: function() {
append(this.children, arguments);
updateElementsParent(arguments, this);
this.childrenChange("add", arguments);
return this;
},
remove: function(element) {
var index = inArray(element, this.children);
if (index >= 0) {
this.children.splice(index, 1);
element.parent = null;
this.childrenChange("remove", [element], index);
}
return this;
},
removeAt: function(index) {
if (0 <= index && index < this.children.length) {
var element = this.children[index];
this.children.splice(index, 1);
element.parent = null;
this.childrenChange("remove", [element], index);
}
return this;
},
clear: function() {
var items = this.children;
this.children = [];
updateElementsParent(items, null);
this.childrenChange("remove", items, 0);
return this;
},
bbox: function(transformation) {
return elementsBoundingBox(this.children, true, this.currentTransform(transformation));
},
rawBBox: function() {
return elementsBoundingBox(this.children, false);
},
currentTransform: function(transformation) {
return Element.fn.currentTransform.call(this, transformation) || null;
}
});
var Text = Element.extend({
init: function(content, position, options) {
Element.fn.init.call(this, options);
this.content(content);
this.position(position || new g.Point());
if (!this.options.font) {
this.options.font = "12px sans-serif";
}
if (!defined(this.options.fill)) {
this.fill("#000");
}
},
content: function(value) {
if (defined(value)) {
this.options.set("content", value);
return this;
} else {
return this.options.get("content");
}
},
measure: function() {
var metrics = util.measureText(this.content(), {
font: this.options.get("font")
});
return metrics;
},
rect: function() {
var size = this.measure();
var pos = this.position().clone();
return new g.Rect(pos, [size.width, size.height]);
},
bbox: function(transformation) {
var combinedMatrix = toMatrix(this.currentTransform(transformation));
return this.rect().bbox(combinedMatrix);
},
rawBBox: function() {
return this.rect().bbox();
}
});
deepExtend(Text.fn, drawing.mixins.Paintable);
definePointAccessors(Text.fn, ["position"]);
var Circle = Element.extend({
init: function(geometry, options) {
Element.fn.init.call(this, options);
this.geometry(geometry || new g.Circle());
if (!defined(this.options.stroke)) {
this.stroke("#000");
}
},
bbox: function(transformation) {
var combinedMatrix = toMatrix(this.currentTransform(transformation));
var rect = this._geometry.bbox(combinedMatrix);
var strokeWidth = this.options.get("stroke.width");
if (strokeWidth) {
expandRect(rect, strokeWidth / 2);
}
return rect;
},
rawBBox: function() {
return this._geometry.bbox();
}
});
deepExtend(Circle.fn, drawing.mixins.Paintable);
defineGeometryAccessors(Circle.fn, ["geometry"]);
var Arc = Element.extend({
init: function(geometry, options) {
Element.fn.init.call(this, options);
this.geometry(geometry || new g.Arc());
if (!defined(this.options.stroke)) {
this.stroke("#000");
}
},
bbox: function(transformation) {
var combinedMatrix = toMatrix(this.currentTransform(transformation));
var rect = this.geometry().bbox(combinedMatrix);
var strokeWidth = this.options.get("stroke.width");
if (strokeWidth) {
expandRect(rect, strokeWidth / 2);
}
return rect;
},
rawBBox: function() {
return this.geometry().bbox();
},
toPath: function() {
var path = new Path();
var curvePoints = this.geometry().curvePoints();
if (curvePoints.length > 0) {
path.moveTo(curvePoints[0].x, curvePoints[0].y);
for (var i = 1; i < curvePoints.length; i+=3) {
path.curveTo(curvePoints[i], curvePoints[i + 1], curvePoints[i + 2]);
}
}
return path;
}
});
deepExtend(Arc.fn, drawing.mixins.Paintable);
defineGeometryAccessors(Arc.fn, ["geometry"]);
var Segment = Class.extend({
init: function(anchor, controlIn, controlOut) {
this.anchor(anchor || new Point());
this.controlIn(controlIn);
this.controlOut(controlOut);
},
geometryChange: util.mixins.geometryChange,
bboxTo: function(toSegment, matrix) {
var rect;
var segmentAnchor = this.anchor().transformCopy(matrix);
var toSegmentAnchor = toSegment.anchor().transformCopy(matrix);
if (this.controlOut() && toSegment.controlIn()) {
rect = this._curveBoundingBox(
segmentAnchor, this.controlOut().transformCopy(matrix),
toSegment.controlIn().transformCopy(matrix), toSegmentAnchor
);
} else {
rect = this._lineBoundingBox(segmentAnchor, toSegmentAnchor);
}
return rect;
},
_lineBoundingBox: function(p1, p2) {
return Rect.fromPoints(p1, p2);
},
_curveBoundingBox: function(p1, cp1, cp2, p2) {
var points = [p1, cp1, cp2, p2],
extremesX = this._curveExtremesFor(points, "x"),
extremesY = this._curveExtremesFor(points, "y"),
xLimits = arrayLimits([extremesX.min, extremesX.max, p1.x, p2.x]),
yLimits = arrayLimits([extremesY.min, extremesY.max, p1.y, p2.y]);
return Rect.fromPoints(new Point(xLimits.min, yLimits.min), new Point(xLimits.max, yLimits.max));
},
_curveExtremesFor: function(points, field) {
var extremes = this._curveExtremes(
points[0][field], points[1][field],
points[2][field], points[3][field]
);
return {
min: this._calculateCurveAt(extremes.min, field, points),
max: this._calculateCurveAt(extremes.max, field, points)
};
},
_calculateCurveAt: function (t, field, points) {
var t1 = 1- t;
return pow(t1, 3) * points[0][field] +
3 * pow(t1, 2) * t * points[1][field] +
3 * pow(t, 2) * t1 * points[2][field] +
pow(t, 3) * points[3][field];
},
_curveExtremes: function (x1, x2, x3, x4) {
var a = x1 - 3 * x2 + 3 * x3 - x4;
var b = - 2 * (x1 - 2 * x2 + x3);
var c = x1 - x2;
var sqrt = math.sqrt(b * b - 4 * a * c);
var t1 = 0;
var t2 = 1;
if (a === 0) {
if (b !== 0) {
t1 = t2 = -c / b;
}
} else if (!isNaN(sqrt)) {
t1 = (- b + sqrt) / (2 * a);
t2 = (- b - sqrt) / (2 * a);
}
var min = math.max(math.min(t1, t2), 0);
if (min < 0 || min > 1) {
min = 0;
}
var max = math.min(math.max(t1, t2), 1);
if (max > 1 || max < 0) {
max = 1;
}
return {
min: min,
max: max
};
}
});
definePointAccessors(Segment.fn, ["anchor", "controlIn", "controlOut"]);
var Path = Element.extend({
init: function(options) {
Element.fn.init.call(this, options);
this.segments = [];
if (!defined(this.options.stroke)) {
this.stroke("#000");
if (!defined(this.options.stroke.lineJoin)) {
this.options.set("stroke.lineJoin", "miter");
}
}
},
moveTo: function(x, y) {
this.segments = [];
this.lineTo(x, y);
return this;
},
lineTo: function(x, y) {
var point = defined(y) ? new Point(x, y) : x,
segment = new Segment(point);
segment.observer = this;
this.segments.push(segment);
this.geometryChange();
return this;
},
curveTo: function(controlOut, controlIn, point) {
if (this.segments.length > 0) {
var lastSegment = last(this.segments);
var segment = new Segment(point, controlIn);
segment.observer = this;
lastSegment.controlOut(controlOut);
this.segments.push(segment);
}
return this;
},
close: function() {
this.options.closed = true;
this.geometryChange();
return this;
},
bbox: function(transformation) {
var combinedMatrix = toMatrix(this.currentTransform(transformation));
var boundingBox = this._bbox(combinedMatrix);
var strokeWidth = this.options.get("stroke.width");
if (strokeWidth) {
expandRect(boundingBox, strokeWidth / 2);
}
return boundingBox;
},
rawBBox: function() {
return this._bbox();
},
_bbox: function(matrix) {
var segments = this.segments;
var length = segments.length;
var boundingBox;
if (length === 1) {
var anchor = segments[0].anchor().transformCopy(matrix);
boundingBox = new Rect(anchor, Size.ZERO);
} else if (length > 0) {
for (var i = 1; i < length; i++) {
var segmentBox = segments[i - 1].bboxTo(segments[i], matrix);
if (boundingBox) {
boundingBox = Rect.union(boundingBox, segmentBox);
} else {
boundingBox = segmentBox;
}
}
}
return boundingBox;
}
});
deepExtend(Path.fn, drawing.mixins.Paintable);
var MultiPath = Element.extend({
init: function(options) {
Element.fn.init.call(this, options);
this.paths = [];
if (!defined(this.options.stroke)) {
this.stroke("#000");
}
},
moveTo: function(x, y) {
var path = new Path();
path.observer = this;
this.paths.push(path);
path.moveTo(x, y);
return this;
},
lineTo: function(x, y) {
if (this.paths.length > 0) {
last(this.paths).lineTo(x, y);
}
return this;
},
curveTo: function(controlOut, controlIn, point) {
if (this.paths.length > 0) {
last(this.paths).curveTo(controlOut, controlIn, point);
}
return this;
},
close: function() {
if (this.paths.length > 0) {
last(this.paths).close();
}
return this;
},
bbox: function(transformation) {
return elementsBoundingBox(this.paths, true, this.currentTransform(transformation));
},
rawBBox: function() {
return elementsBoundingBox(this.paths, false);
}
});
deepExtend(MultiPath.fn, drawing.mixins.Paintable);
var Image = Element.extend({
init: function(src, rect, options) {
Element.fn.init.call(this, options);
this.src(src);
this.rect(rect || new g.Rect());
},
src: function(value) {
if (defined(value)) {
this.options.set("src", value);
return this;
} else {
return this.options.get("src");
}
},
bbox: function(transformation) {
var combinedMatrix = toMatrix(this.currentTransform(transformation));
return this._rect.bbox(combinedMatrix);
},
rawBBox: function() {
return this._rect.bbox();
}
});
defineGeometryAccessors(Image.fn, ["rect"]);
// Helper functions ===========================================
function elementsBoundingBox(elements, applyTransform, transformation) {
var boundingBox;
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element.visible()) {
var elementBoundingBox = applyTransform ? element.bbox(transformation) : element.rawBBox();
if (elementBoundingBox) {
if (boundingBox) {
boundingBox = Rect.union(boundingBox, elementBoundingBox);
} else {
boundingBox = elementBoundingBox;
}
}
}
}
return boundingBox;
}
function updateElementsParent(elements, parent) {
for (var i = 0; i < elements.length; i++) {
elements[i].parent = parent;
}
}
function expandRect(rect, value) {
rect.origin.x -= value;
rect.origin.y -= value;
rect.size.width += value * 2;
rect.size.height += value * 2;
}
function defineGeometryAccessors(fn, names) {
for (var i = 0; i < names.length; i++) {
fn[names[i]] = geometryAccessor(names[i]);
}
}
function geometryAccessor(name) {
var fieldName = "_" + name;
return function(value) {
if (defined(value)) {
this[fieldName] = value;
this[fieldName].observer = this;
this.geometryChange();
return this;
} else {
return this[fieldName];
}
};
}
function definePointAccessors(fn, names) {
for (var i = 0; i < names.length; i++) {
fn[names[i]] = pointAccessor(names[i]);
}
}
function pointAccessor(name) {
var fieldName = "_" + name;
return function(value) {
if (defined(value)) {
this[fieldName] = Point.create(value);
this[fieldName].observer = this;
this.geometryChange();
return this;
} else {
return this[fieldName];
}
};
}
// Exports ================================================================
deepExtend(drawing, {
Arc: Arc,
Circle: Circle,
Element: Element,
Group: Group,
Image: Image,
MultiPath: MultiPath,
Path: Path,
Segment: Segment,
Text: Text
});
})(window.kendo.jQuery);
(function ($) {
var kendo = window.kendo,
dataviz = kendo.dataviz,
drawing = dataviz.drawing,
geometry = dataviz.geometry,
Class = kendo.Class,
Point = geometry.Point,
deepExtend = kendo.deepExtend,
deg = dataviz.util.deg,
round = dataviz.round,
trim = $.trim,
math = Math,
pow = math.pow,
last = dataviz.last;
var SEGMENT_REGEX = /([a-z]{1})([^a-z]*)(z)?/gi,
SPLIT_REGEX = /[,\s]?(-?(?:\d+\.)?\d+)/g,
MOVE = "m",
CLOSE = "z";
var PathParser = Class.extend({
parse: function(str, options) {
var parser = this;
var multiPath = new drawing.MultiPath(options);
var position = new Point();
var previousCommand;
str.replace(SEGMENT_REGEX, function(match, element, params, closePath) {
var command = element.toLowerCase();
var isRelative = command === element;
var parameters = parseParameters(trim(params));
if (command === MOVE) {
if (isRelative) {
position.x += parameters[0];
position.y += parameters[1];
} else {
position.x = parameters[0];
position.y = parameters[1];
}
multiPath.moveTo(position.x, position.y);
if (parameters.length > 2) {
command = "l";
parameters.splice(0, 2);
}
}
if (ShapeMap[command]) {
ShapeMap[command](
multiPath, {
parameters: parameters,
position: position,
isRelative: isRelative,
previousCommand: previousCommand
}
);
if (closePath && closePath.toLowerCase() === CLOSE) {
multiPath.close();
}
} else if (command !== MOVE) {
throw new Error("Error while parsing SVG path. Unsupported command: " + command);
}
previousCommand = command;
});
return multiPath;
}
});
var ShapeMap = {
l: function(path, options) {
var parameters = options.parameters;
var position = options.position;
for (var i = 0; i < parameters.length; i+=2){
var point = new Point(parameters[i], parameters[i + 1]);
if (options.isRelative) {
point.translateWith(position);
}
path.lineTo(point.x, point.y);
position.x = point.x;
position.y = point.y;
}
},
c: function(path, options) {
var parameters = options.parameters;
var position = options.position;
var controlOut, controlIn, point;
for (var i = 0; i < parameters.length; i += 6) {
controlOut = new Point(parameters[i], parameters[i + 1]);
controlIn = new Point(parameters[i + 2], parameters[i + 3]);
point = new Point(parameters[i + 4], parameters[i + 5]);
if (options.isRelative) {
controlIn.translateWith(position);
controlOut.translateWith(position);
point.translateWith(position);
}
path.curveTo(controlOut, controlIn, point);
position.x = point.x;
position.y = point.y;
}
},
v: function(path, options) {
var value = options.isRelative ? 0 : options.position.x;
toLineParamaters(options.parameters, true, value);
this.l(path, options);
},
h: function(path, options) {
var value = options.isRelative ? 0 : options.position.y;
toLineParamaters(options.parameters, false, value);
this.l(path, options);
},
a: function(path, options) {
var parameters = options.parameters;
var position = options.position;
for (var i = 0; i < parameters.length; i += 7) {
var radiusX = parameters[i];
var radiusY = parameters[i + 1];
var largeArc = parameters[i + 3];
var swipe = parameters[i + 4];
var endPoint = new Point(parameters[i + 5], parameters[i + 6]);
if (options.isRelative) {
endPoint.translateWith(position);
}
var arcParameters = normalizeArcParameters(
radiusX, radiusY, position.x, position.y,
endPoint.x, endPoint.y, largeArc, swipe
);
var arc = new geometry.Arc(arcParameters.center, {
startAngle: arcParameters.startAngle,
endAngle: arcParameters.endAngle,
radiusX: radiusX,
radiusY: radiusY,
anticlockwise: swipe === 0
});
var curvePoints = arc.curvePoints();
for (var j = 1; j < curvePoints.length; j+=3) {
path.curveTo(curvePoints[j], curvePoints[j + 1], curvePoints[j + 2]);
}
position.x = endPoint.x;
position.y = endPoint.y;
}
},
s: function(path, options) {
var parameters = options.parameters;
var position = options.position;
var previousCommand = options.previousCommand;
var controlOut, endPoint, controlIn, lastControlIn;
if (previousCommand == "s" || previousCommand == "c") {
lastControlIn = last(last(path.paths).segments).controlIn();
}
for (var i = 0; i < parameters.length; i += 4) {
controlIn = new Point(parameters[i], parameters[i + 1]);
endPoint = new Point(parameters[i + 2], parameters[i + 3]);
if (options.isRelative) {
controlIn.translateWith(position);
endPoint.translateWith(position);
}
if (lastControlIn) {
controlOut = reflectionPoint(lastControlIn, position);
} else {
controlOut = position.clone();
}
lastControlIn = controlIn;
path.curveTo(controlOut, controlIn, endPoint);
position.x = endPoint.x;
position.y = endPoint.y;
}
},
q: function(path, options) {
var parameters = options.parameters;
var position = options.position;
var cubicControlPoints, endPoint, controlPoint;
for (var i = 0; i < parameters.length; i += 4) {
controlPoint = new Point(parameters[i], parameters[i + 1]);
endPoint = new Point(parameters[i + 2], parameters[i + 3]);
if (options.isRelative) {
controlPoint.translateWith(position);
endPoint.translateWith(position);
}
cubicControlPoints = quadraticToCubicControlPoints(position, controlPoint, endPoint);
path.curveTo(cubicControlPoints.controlOut, cubicControlPoints.controlIn, endPoint);
position.x = endPoint.x;
position.y = endPoint.y;
}
},
t: function(path, options) {
var parameters = options.parameters;
var position = options.position;
var previousCommand = options.previousCommand;
var cubicControlPoints, controlPoint, endPoint;
if (previousCommand == "q" || previousCommand == "t") {
var lastSegment = last(last(path.paths).segments);
controlPoint = lastSegment.controlIn().clone()
.translateWith(position.scaleCopy(-1 / 3))
.scale(3 / 2);
}
for (var i = 0; i < parameters.length; i += 2) {
endPoint = new Point(parameters[i], parameters[i + 1]);
if (options.isRelative) {
endPoint.translateWith(position);
}
if (controlPoint) {
controlPoint = reflectionPoint(controlPoint, position);
} else {
controlPoint = position.clone();
}
cubicControlPoints = quadraticToCubicControlPoints(position, controlPoint, endPoint);
path.curveTo(cubicControlPoints.controlOut, cubicControlPoints.controlIn, endPoint);
position.x = endPoint.x;
position.y = endPoint.y;
}
}
};
// Helper functions =======================================================
function parseParameters(str) {
var parameters = [];
str.replace(SPLIT_REGEX, function(match, number) {
parameters.push(parseFloat(number));
});
return parameters;
}
function toLineParamaters(parameters, isVertical, value) {
var insertPosition = isVertical ? 0 : 1;
for (var i = 0; i < parameters.length; i+=2) {
parameters.splice(i + insertPosition, 0, value);
}
}
function elipseAngle(start, end, swipe) {
if (start > end) {
end += 360;
}
var alpha = math.abs(end - start);
if (!swipe) {
alpha = 360 - alpha;
}
return alpha;
}
function calculateAngle(cx, cy, rx, ry, x, y) {
var cos = round((x - cx) / rx, 3);
var sin = round((y - cy) / ry, 3);
return round(deg(math.atan2(sin, cos)));
}
function normalizeArcParameters(rx, ry, x1, y1, x2, y2, largeArc, swipe) {
var cx, cy;
var cx1, cy1;
var a, b, c, sqrt;
if (y1 !== y2) {
var x21 = x2 - x1;
var y21 = y2 - y1;
var rx2 = pow(rx, 2), ry2 = pow(ry, 2);
var k = (ry2 * x21 * (x1 + x2) + rx2 * y21 * (y1 + y2)) / (2 * rx2 * y21);
var yk2 = k - y2;
var l = -(x21 * ry2) / (rx2 * y21);
a = 1 / rx2 + pow(l, 2) / ry2;
b = 2 * ((l * yk2) / ry2 - x2 / rx2);
c = pow(x2, 2) / rx2 + pow(yk2, 2) / ry2 - 1;
sqrt = math.sqrt(pow(b, 2) - 4 * a * c);
cx = (-b - sqrt) / (2 * a);
cy = k + l * cx;
cx1 = (-b + sqrt) / (2 * a);
cy1 = k + l * cx1;
} else if (x1 !== x2) {
b = - 2 * y2;
c = pow(((x2 - x1) * ry) / (2 * rx), 2) + pow(y2, 2) - pow(ry, 2);
sqrt = math.sqrt(pow(b, 2) - 4 * c);
cx = cx1 = (x1 + x2) / 2;
cy = (-b - sqrt) / 2;
cy1 = (-b + sqrt) / 2;
} else {
return false;
}
var start = calculateAngle(cx, cy, rx, ry, x1, y1);
var end = calculateAngle(cx, cy, rx, ry, x2, y2);
var alpha = elipseAngle(start, end, swipe);
if ((largeArc && alpha <= 180) || (!largeArc && alpha > 180)) {
cx = cx1; cy = cy1;
start = calculateAngle(cx, cy, rx, ry, x1, y1);
end = calculateAngle(cx, cy, rx, ry, x2, y2);
}
return {
center: new Point(cx, cy),
startAngle: start,
endAngle: end
};
}
function reflectionPoint(point, center) {
if (point && center) {
return center.scaleCopy(2).translate(-point.x, -point.y);
}
}
function quadraticToCubicControlPoints(position, controlPoint, endPoint) {
var third = 1 / 3;
controlPoint = controlPoint.clone().scale(2 / 3);
return {
controlOut: controlPoint.clone().translateWith(position.scaleCopy(third)),
controlIn: controlPoint.translateWith(endPoint.scaleCopy(third))
};
}
// Exports ================================================================
PathParser.current = new PathParser();
drawing.Path.parse = function(str, options) {
return PathParser.current.parse(str, options);
};
deepExtend(drawing, {
PathParser: PathParser
});
})(window.kendo.jQuery);
(function ($) {
// Imports ================================================================
var doc = document,
kendo = window.kendo,
deepExtend = kendo.deepExtend,
dataviz = kendo.dataviz,
defined = dataviz.defined,
renderTemplate = dataviz.renderTemplate,
g = dataviz.geometry,
d = dataviz.drawing,
BaseNode = d.BaseNode,
util = dataviz.util,
renderAttr = util.renderAttr,
renderAllAttr = util.renderAllAttr,
renderSize = util.renderSize;
// Constants ==============================================================
var BUTT = "butt",
DASH_ARRAYS = d.DASH_ARRAYS,
NONE = "none",
SOLID = "solid",
SPACE = " ",
SQUARE = "square",
SVG_NS = "http://www.w3.org/2000/svg",
TRANSFORM = "transform",
TRANSP = "transparent",
UNDEFINED = "undefined";
// SVG rendering surface ==================================================
var Surface = d.Surface.extend({
init: function(element, options) {
d.Surface.fn.init.call(this, element, options);
this._root = new RootNode();
renderSVG(this.element[0], this._template(this));
this._rootElement = this.element[0].firstElementChild;
alignToScreen(this._rootElement);
this._root.attachTo(this._rootElement);
this.element.on("click", this._click);
this.element.on("mouseover", this._mouseenter);
this.element.on("mouseout", this._mouseleave);
this.resize();
},
type: "svg",
translate: function(offset) {
var viewBox = kendo.format(
"{0} {1} {2} {3}",
Math.round(offset.x), Math.round(offset.y),
this._size.width, this._size.height);
this._offset = offset;
this._rootElement.setAttribute("viewBox", viewBox);
},
draw: function(element) {
this._root.load([element]);
},
clear: function() {
this._root.clear();
},
svg: function() {
return "" + this._template(this);
},
_resize: function() {
if (this._offset) {
this.translate(this._offset);
}
},
_template: renderTemplate(
"#= d._root.render() # "
)
});
// SVG Node ================================================================
var Node = BaseNode.extend({
load: function(elements) {
var node = this,
element = node.element,
childNode,
srcElement,
children,
i;
for (i = 0; i < elements.length; i++) {
srcElement = elements[i];
children = srcElement.children;
if (srcElement instanceof d.Text) {
childNode = new TextNode(srcElement);
} else if (srcElement instanceof d.Group) {
childNode = new GroupNode(srcElement);
} else if (srcElement instanceof d.Path) {
childNode = new PathNode(srcElement);
} else if (srcElement instanceof d.MultiPath) {
childNode = new MultiPathNode(srcElement);
} else if (srcElement instanceof d.Circle) {
childNode = new CircleNode(srcElement);
} else if (srcElement instanceof d.Arc) {
childNode = new ArcNode(srcElement);
} else if (srcElement instanceof d.Image) {
childNode = new ImageNode(srcElement);
}
if (children && children.length > 0) {
childNode.load(children);
}
node.append(childNode);
if (element) {
childNode.attachTo(element);
}
}
},
attachTo: function(domElement) {
var container = doc.createElement("div");
renderSVG(container,
"" +
this.render() +
" "
);
var element = container.firstChild.firstChild;
if (element) {
domElement.appendChild(element);
this.setElement(element);
}
},
setElement: function(element) {
var nodes = this.childNodes,
childElement,
i;
if (this.element) {
this.element._kendoNode = null;
}
this.element = element;
element._kendoNode = this;
for (i = 0; i < nodes.length; i++) {
childElement = element.childNodes[i];
nodes[i].setElement(childElement);
}
},
template: renderTemplate(
"#= d.renderChildren() #"
),
render: function() {
return this.template(this);
},
renderChildren: function() {
var nodes = this.childNodes,
output = "",
i;
for (i = 0; i < nodes.length; i++) {
output += nodes[i].render();
}
return output;
},
optionsChange: function(e) {
if (e.field === "visible") {
this.css("display", e.value ? "" : NONE);
}
BaseNode.fn.optionsChange.call(this, e);
},
clear: function() {
var element = this.element;
if (element) {
element.parentNode.removeChild(element);
this.element = null;
}
BaseNode.fn.clear.call(this);
},
attr: function(name, value) {
if (this.element) {
this.element.setAttribute(name, value);
}
},
allAttr: function(attrs) {
for (var i = 0; i < attrs.length; i++) {
this.attr(attrs[i][0], attrs[i][1]);
}
},
css: function(name, value) {
if (this.element) {
this.element.style[name] = value;
}
},
allCss: function(styles) {
for (var i = 0; i < styles.length; i++) {
this.css(styles[i][0], styles[i][1]);
}
},
removeAttr: function(name) {
if (this.element) {
this.element.removeAttribute(name);
}
},
mapTransform: function(transform) {
var attrs = [];
if (transform) {
attrs.push([
TRANSFORM,
"matrix(" + transform.matrix().toString(6) + ")"
]);
}
return attrs;
},
renderTransform: function() {
return renderAllAttr(
this.mapTransform(this.srcElement.transform())
);
},
transformChange: function(value) {
if (value) {
this.allAttr(this.mapTransform(value));
} else {
this.removeAttr(TRANSFORM);
}
},
mapStyle: function() {
var style = [["cursor", this.srcElement.options.cursor]];
if (this.srcElement.options.visible === false) {
style.push(["display", NONE]);
}
return style;
},
renderStyle: function() {
return renderAttr("style", util.renderStyle(this.mapStyle()));
}
});
var RootNode = Node.extend({
attachTo: function(domElement) {
this.element = domElement;
},
clear: BaseNode.fn.clear
});
var GroupNode = Node.extend({
template: renderTemplate(
"#= d.renderChildren() #"
),
optionsChange: function(e) {
if (e.field == TRANSFORM) {
this.transformChange(e.value);
}
Node.fn.optionsChange.call(this, e);
}
});
var PathNode = Node.extend({
geometryChange: function() {
this.attr("d", this.renderData());
this.invalidate();
},
optionsChange: function(e) {
switch(e.field) {
case "fill":
if (e.value) {
this.allAttr(this.mapFill(e.value));
} else {
this.removeAttr("fill");
}
break;
case "fill.color":
this.allAttr(this.mapFill({ color: e.value }));
break;
case "stroke":
if (e.value) {
this.allAttr(this.mapStroke(e.value));
} else {
this.removeAttr("stroke");
}
break;
case TRANSFORM:
this.transformChange(e.value);
break;
default:
var name = this.attributeMap[e.field];
if (name) {
this.attr(name, e.value);
}
break;
}
Node.fn.optionsChange.call(this, e);
},
attributeMap: {
"fill.opacity": "fill-opacity",
"stroke.color": "stroke",
"stroke.width": "stroke-width",
"stroke.opacity": "stroke-opacity"
},
content: function(value) {
if (this.element) {
this.element.textContent = this.srcElement.content();
}
},
renderData: function() {
return this.printPath(this.srcElement);
},
printPath: function(path) {
var segments = path.segments,
length = segments.length;
if (length > 0) {
var parts = [],
output,
segmentType,
currentType,
i;
for (i = 1; i < length; i++) {
segmentType = this.segmentType(segments[i - 1], segments[i]);
if (segmentType !== currentType) {
currentType = segmentType;
parts.push(segmentType);
}
if (segmentType === "L") {
parts.push(this.printPoints(segments[i].anchor()));
} else {
parts.push(this.printPoints(segments[i - 1].controlOut(), segments[i].controlIn(), segments[i].anchor()));
}
}
output = "M" + this.printPoints(segments[0].anchor()) + SPACE + parts.join(SPACE);
if (path.options.closed) {
output += "Z";
}
return output;
}
},
printPoints: function() {
var points = arguments,
length = points.length,
i, result = [];
for (i = 0; i < length; i++) {
result.push(points[i].toString(3));
}
return result.join(SPACE);
},
segmentType: function(segmentStart, segmentEnd) {
return segmentStart.controlOut() && segmentEnd.controlIn() ? "C" : "L";
},
mapStroke: function(stroke) {
var attrs = [];
if (stroke && stroke.color !== NONE && stroke.color !== TRANSP) {
attrs.push(["stroke", stroke.color]);
attrs.push(["stroke-width", stroke.width]);
attrs.push(["stroke-linecap", this.renderLinecap(stroke)]);
attrs.push(["stroke-linejoin", stroke.lineJoin]);
if (defined(stroke.opacity)) {
attrs.push(["stroke-opacity", stroke.opacity]);
}
if (defined(stroke.dashType)) {
attrs.push(["stroke-dasharray", this.renderDashType(stroke)]);
}
} else {
attrs.push(["stroke", NONE]);
}
return attrs;
},
renderStroke: function() {
return renderAllAttr(
this.mapStroke(this.srcElement.options.stroke)
);
},
renderDashType: function (stroke) {
var width = stroke.width || 1,
dashType = stroke.dashType;
if (dashType && dashType != SOLID) {
var dashArray = DASH_ARRAYS[dashType.toLowerCase()],
result = [],
i;
for (i = 0; i < dashArray.length; i++) {
result.push(dashArray[i] * width);
}
return result.join(" ");
}
},
renderLinecap: function(stroke) {
var dashType = stroke.dashType,
lineCap = stroke.lineCap;
return (dashType && dashType != SOLID) ? BUTT : lineCap;
},
mapFill: function(fill) {
var attrs = [];
if (fill && fill.color !== NONE && fill.color !== TRANSP) {
attrs.push(["fill", fill.color]);
if (defined(fill.opacity)) {
attrs.push(["fill-opacity", fill.opacity]);
}
} else {
attrs.push(["fill", NONE]);
}
return attrs;
},
renderFill: function() {
return renderAllAttr(
this.mapFill(this.srcElement.options.fill)
);
},
template: renderTemplate(
"#= this.srcElement.content() # " +
" "
)
});
// Helpers ================================================================
var renderSVG = function(container, svg) {
container.innerHTML = svg;
};
(function() {
var testFragment = "" +
"<#= d._root.render() #/div>"
)
});
// VML Node ================================================================
var Node = BaseNode.extend({
load: function(elements, transform) {
var node = this,
element = node.element,
childNode,
srcElement,
children,
combinedTransform,
i;
for (i = 0; i < elements.length; i++) {
srcElement = elements[i];
children = srcElement.children;
combinedTransform = srcElement.currentTransform(transform);
if (srcElement instanceof d.Group) {
childNode = new GroupNode(srcElement);
} else if (srcElement instanceof d.Text) {
childNode = new TextNode(srcElement, combinedTransform);
} else if (srcElement instanceof d.Path) {
childNode = new PathNode(srcElement, combinedTransform);
} else if (srcElement instanceof d.MultiPath) {
childNode = new MultiPathNode(srcElement, combinedTransform);
} else if (srcElement instanceof d.Circle) {
childNode = new CircleNode(srcElement, combinedTransform);
} else if (srcElement instanceof d.Arc) {
childNode = new ArcNode(srcElement, combinedTransform);
} else if (srcElement instanceof d.Image) {
childNode = new ImageNode(srcElement, combinedTransform);
}
if (children && children.length > 0) {
childNode.load(children, combinedTransform);
}
node.append(childNode);
if (element) {
childNode.attachTo(element);
}
}
},
attachTo: function(domElement) {
var container = doc.createElement("div");
container.style.display = "none";
doc.body.appendChild(container);
container.innerHTML = this.render();
var element = container.firstChild;
if (element) {
domElement.appendChild(element);
this.setElement(element);
}
doc.body.removeChild(container);
},
setElement: function(element) {
var nodes = this.childNodes,
childElement,
i;
if (this.element) {
this.element._kendoNode = null;
}
this.element = element;
element._kendoNode = this;
for (i = 0; i < nodes.length; i++) {
childElement = element.childNodes[i];
nodes[i].setElement(childElement);
}
},
template: renderTemplate(
"#= d.renderChildren() #"
),
render: function() {
return this.template(this);
},
renderChildren: function() {
var nodes = this.childNodes,
output = "",
i;
for (i = 0; i < nodes.length; i++) {
output += nodes[i].render();
}
return output;
},
clear: function() {
var element = this.element;
if (element) {
element.parentNode.removeChild(element);
this.element = null;
}
BaseNode.fn.clear.call(this);
},
attr: function(name, value) {
if (this.element) {
this.element[name] = value;
}
},
allAttr: function(attrs) {
for (var i = 0; i < attrs.length; i++) {
this.attr(attrs[i][0], attrs[i][1]);
}
},
css: function(name, value) {
if (this.element) {
this.element.style[name] = value;
}
},
allCss: function(styles) {
for (var i = 0; i < styles.length; i++) {
this.css(styles[i][0], styles[i][1]);
}
},
renderStyle: function() {
return renderAttr("style", util.renderStyle(this.mapStyle()));
}
});
var RootNode = Node.extend({
attachTo: function(domElement) {
this.element = domElement;
},
clear: BaseNode.fn.clear
});
var GroupNode = Node.extend({
template: renderTemplate(
"
#= d.renderChildren() # " +
"#= d.renderChildren() #" +
" "
)
});
var PathDataNode = Node.extend({
renderData: function() {
return printPath(this.srcElement);
},
geometryChange: function() {
this.attr("v", this.renderData());
Node.fn.geometryChange.call(this);
},
template: renderTemplate(
"" +
"#= d.renderChildren() #" +
" "
)
});
var ArcDataNode = PathDataNode.extend({
renderData: function() {
return printPath(this.srcElement.toPath());
}
});
var ArcNode = PathNode.extend({
createDataNode: function(srcElement) {
return new ArcDataNode(srcElement);
}
});
var TextPathDataNode = Node.extend({
geometryChange: function() {
this.attr("v", this.renderData());
},
renderData: function() {
var rect = this.srcElement.rect();
var center = rect.center();
return "m " + printPoints([new g.Point(rect.topLeft().x, center.y)]) +
" l " + printPoints([new g.Point(rect.bottomRight().x, center.y)]);
},
template: renderTemplate(
"' +
' ', dir);
}
// Exports ================================================================
kendo.dataviz.ui.plugin(Navigator);
})(jQuery);
(function ($) {
var kendo = window.kendo;
var Widget = kendo.ui.Widget;
var keys = kendo.keys;
var proxy = $.proxy;
var NS = ".kendoZoomControl";
var BUTTONS = button("in", "+") + button("out", "-");
var PLUS = 187;
var MINUS = 189;
var FF_PLUS = 61;
var FF_MINUS = 173;
var ZoomControl = Widget.extend({
init: function(element, options) {
Widget.fn.init.call(this, element, options);
this._initOptions(options);
this.element.addClass("k-widget k-zoom-control k-button-wrap k-buttons-horizontal")
.append(BUTTONS)
.on("click" + NS, ".k-button", proxy(this, "_click"));
var parentElement = this.element.parent().closest("[" + kendo.attr("role") + "]");
this._keyroot = parentElement.length > 0 ? parentElement : this.element;
this._tabindex(this._keyroot);
this._keydown = proxy(this._keydown, this);
this._keyroot.on("keydown", this._keydown);
},
options: {
name: "ZoomControl",
zoomStep: 1
},
events: [
"change"
],
_change: function(dir) {
var zoomStep = this.options.zoomStep;
this.trigger("change", {
delta: dir * zoomStep
});
},
_click: function(e) {
var button = $(e.currentTarget);
var dir = 1;
if (button.is(".k-zoom-out")) {
dir = -1;
}
this._change(dir);
e.preventDefault();
},
_keydown: function(e) {
switch (e.which) {
case keys.NUMPAD_PLUS:
case PLUS:
case FF_PLUS:
this._change(1);
break;
case keys.NUMPAD_MINUS:
case MINUS:
case FF_MINUS:
this._change(-1);
break;
}
}
});
// Helper functions =======================================================
function button(dir, symbol) {
return kendo.format(
'{1} ',
dir, symbol);
}
// Exports ================================================================
kendo.dataviz.ui.plugin(ZoomControl);
})(jQuery);
(function ($, undefined) {
// Imports ================================================================
var math = Math,
atan = math.atan,
exp = math.exp,
pow = math.pow,
sin = math.sin,
log = math.log,
tan = math.tan,
kendo = window.kendo,
Class = kendo.Class,
dataviz = kendo.dataviz,
Matrix = dataviz.Matrix,
deepExtend = kendo.deepExtend,
g = dataviz.geometry,
Point = g.Point,
map = dataviz.map,
Location = map.Location,
util = dataviz.util,
rad = util.rad,
deg = util.deg,
limit = util.limitValue;
// Constants ==============================================================
var PI = math.PI,
PI_DIV_2 = PI / 2,
PI_DIV_4 = PI / 4,
DEG_TO_RAD = PI / 180;
// Coordinate reference systems ===========================================
var WGS84 = {
a: 6378137, // Semi-major radius
b: 6356752.314245179, // Semi-minor radius
f: 0.0033528106647474805, // Flattening
e: 0.08181919084262149 // Eccentricity
};
// WGS 84 / World Mercator
var Mercator = Class.extend({
init: function(options) {
this._initOptions(options);
},
MAX_LNG: 180,
MAX_LAT: 85.0840590501,
INVERSE_ITERATIONS: 15,
INVERSE_CONVERGENCE: 1e-12,
options: {
centralMeridian: 0,
datum: WGS84
},
forward: function(loc, clamp) {
var proj = this,
options = proj.options,
datum = options.datum,
r = datum.a,
lng0 = options.centralMeridian,
lat = limit(loc.lat, -proj.MAX_LAT, proj.MAX_LAT),
lng = clamp ? limit(loc.lng, -proj.MAX_LNG, proj.MAX_LNG) : loc.lng,
x = rad(lng - lng0) * r,
y = proj._projectLat(lat);
return new Point(x, y);
},
_projectLat: function(lat) {
var datum = this.options.datum,
ecc = datum.e,
r = datum.a,
y = rad(lat),
ts = tan(PI_DIV_4 + y / 2),
con = ecc * sin(y),
p = pow((1 - con) / (1 + con), ecc / 2);
// See:
// http://en.wikipedia.org/wiki/Mercator_projection#Generalization_to_the_ellipsoid
return r * log(ts * p);
},
inverse: function(point, clamp) {
var proj = this,
options = proj.options,
datum = options.datum,
r = datum.a,
lng0 = options.centralMeridian,
lng = point.x / (DEG_TO_RAD * r) + lng0,
lat = limit(proj._inverseY(point.y), -proj.MAX_LAT, proj.MAX_LAT);
if (clamp) {
lng = limit(lng, -proj.MAX_LNG, proj.MAX_LNG);
}
return new Location(lat, lng);
},
_inverseY: function(y) {
var proj = this,
datum = proj.options.datum,
r = datum.a,
ecc = datum.e,
ecch = ecc / 2,
ts = exp(-y / r),
phi = PI_DIV_2 - 2 * atan(ts),
i;
for (i = 0; i <= proj.INVERSE_ITERATIONS; i++) {
var con = ecc * sin(phi),
p = pow((1 - con) / (1 + con), ecch),
dphi = PI_DIV_2 - 2 * atan(ts * p) - phi;
phi += dphi;
if (math.abs(dphi) <= proj.INVERSE_CONVERGENCE) {
break;
}
}
return deg(phi);
}
});
// WGS 84 / Pseudo-Mercator
// Used by Google Maps, Bing, OSM, etc.
// Spherical projection of ellipsoidal coordinates.
var SphericalMercator = Mercator.extend({
MAX_LAT: 85.0511287798,
_projectLat: function(lat) {
var r = this.options.datum.a,
y = rad(lat),
ts = tan(PI_DIV_4 + y / 2);
return r * log(ts);
},
_inverseY: function(y) {
var r = this.options.datum.a,
ts = exp(-y / r);
return deg(PI_DIV_2 - (2 * atan(ts)));
}
});
var Equirectangular = Class.extend({
forward: function(loc) {
return new Point(loc.lng, loc.lat);
},
inverse: function(point) {
return new Location(point.y, point.x);
}
});
// TODO: Better (less cryptic name) for this class(es)
var EPSG3857 = Class.extend({
init: function() {
var crs = this,
proj = crs._proj = new SphericalMercator();
var c = this.c = 2 * PI * proj.options.datum.a;
// Scale circumference to 1, mirror Y and shift origin to top left
this._tm = Matrix.translate(0.5, 0.5).times(Matrix.scale(1/c, -1/c));
// Inverse transform matrix
this._itm = Matrix.scale(c, -c).times(Matrix.translate(-0.5, -0.5));
},
// Location <-> Point (screen coordinates for a given scale)
toPoint: function(loc, scale, clamp) {
var point = this._proj.forward(loc, clamp);
return point
.transform(this._tm)
.scale(scale || 1);
},
toLocation: function(point, scale, clamp) {
point = point
.clone()
.scale(1 / (scale || 1))
.transform(this._itm);
return this._proj.inverse(point, clamp);
}
});
var EPSG3395 = Class.extend({
init: function() {
this._proj = new Mercator();
},
toPoint: function(loc) {
return this._proj.forward(loc);
},
toLocation: function(point) {
return this._proj.inverse(point);
}
});
// WGS 84
var EPSG4326 = Class.extend({
init: function() {
this._proj = new Equirectangular();
},
toPoint: function(loc) {
return this._proj.forward(loc);
},
toLocation: function(point) {
return this._proj.inverse(point);
}
});
// Exports ================================================================
deepExtend(dataviz, {
map: {
crs: {
EPSG3395: EPSG3395,
EPSG3857: EPSG3857,
EPSG4326: EPSG4326
},
datums: {
WGS84: WGS84
},
projections: {
Equirectangular: Equirectangular,
Mercator: Mercator,
SphericalMercator: SphericalMercator
}
}
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var proxy = $.proxy,
noop = $.noop,
kendo = window.kendo,
Class = kendo.Class,
dataviz = kendo.dataviz,
deepExtend = kendo.deepExtend,
defined = dataviz.defined,
Extent = dataviz.map.Extent,
util = dataviz.util,
valueOrDefault = util.valueOrDefault;
// Implementation =========================================================
var Layer = Class.extend({
init: function(map, options) {
this._initOptions(options);
this.map = map;
this.element = $("
")
.css({
"zIndex": this.options.zIndex,
"opacity": this.options.opacity
})
.appendTo(map.scrollElement);
this._beforeReset = proxy(this._beforeReset, this);
this._reset = proxy(this._reset, this);
this._resize = proxy(this._resize, this);
this._panEnd = proxy(this._panEnd, this);
this._activate();
this._updateAttribution();
},
destroy: function() {
this._deactivate();
},
show: function() {
this.reset();
this._activate();
this._applyExtent(true);
},
hide: function() {
this._deactivate();
this._setVisibility(false);
},
reset: function() {
this._beforeReset();
this._reset();
},
_reset: function() {
this._applyExtent();
},
_beforeReset: $.noop,
_resize: $.noop,
_panEnd: function() {
this._applyExtent();
},
_applyExtent: function() {
var options = this.options;
var zoom = this.map.zoom();
var matchMinZoom = !defined(options.minZoom) || zoom >= options.minZoom;
var matchMaxZoom = !defined(options.maxZoom) || zoom <= options.maxZoom;
var extent = Extent.create(options.extent);
var inside = !extent || extent.overlaps(this.map.extent());
this._setVisibility(matchMinZoom && matchMaxZoom && inside);
},
_setVisibility: function(visible) {
this.element.css("display", visible ? "" : "none");
},
_activate: function() {
var map = this.map;
map.bind("beforeReset", this._beforeReset);
map.bind("reset", this._reset);
map.bind("resize", this._resize);
map.bind("panEnd", this._panEnd);
},
_deactivate: function() {
var map = this.map;
map.unbind("beforeReset", this._beforeReset);
map.unbind("reset", this._reset);
map.unbind("resize", this._resize);
map.unbind("panEnd", this._panEnd);
},
_updateAttribution: function() {
var attr = this.map.attribution;
if (attr) {
attr.add(this.options.attribution);
}
}
});
// Exports ================================================================
deepExtend(dataviz, {
map: {
layers: {
Layer: Layer
}
}
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var proxy = $.proxy,
kendo = window.kendo,
Class = kendo.Class,
DataSource = kendo.data.DataSource,
dataviz = kendo.dataviz,
deepExtend = kendo.deepExtend,
last = dataviz.last,
defined = dataviz.util.defined,
g = dataviz.geometry,
d = dataviz.drawing,
Group = d.Group,
map = dataviz.map,
Location = map.Location,
Layer = map.layers.Layer;
// Implementation =========================================================
var ShapeLayer = Layer.extend({
init: function(map, options) {
Layer.fn.init.call(this, map, options);
this.surface = d.Surface.create(this.element, {
width: map.scrollElement.width(),
height: map.scrollElement.height()
});
this._initRoot();
this.movable = new kendo.ui.Movable(this.surface.element);
this._markers = [];
this._click = this._handler("shapeClick");
this.surface.bind("click", this._click);
this._mouseenter = this._handler("shapeMouseEnter");
this.surface.bind("mouseenter", this._mouseenter);
this._mouseleave = this._handler("shapeMouseLeave");
this.surface.bind("mouseleave", this._mouseleave);
this._initDataSource();
},
options: {
autoBind: true
},
destroy: function() {
Layer.fn.destroy.call(this);
this.surface.destroy();
this.dataSource.unbind("change", this._dataChange);
},
setDataSource: function(dataSource) {
if (this.dataSource) {
this.dataSource.unbind("change", this._dataChange);
}
this.dataSource = dataSource;
this.dataSource.bind("change", this._dataChange);
if (this.options.autoBind) {
this.dataSource.fetch();
}
},
_reset: function() {
Layer.fn._reset.call(this);
this._translateSurface();
if (this._data) {
this._load(this._data);
}
},
_initRoot: function() {
this._root = new Group();
this.surface.draw(this._root);
},
_beforeReset: function() {
this.surface.clear();
this._initRoot();
},
_resize: function() {
this.surface.size(this.map.size());
},
_initDataSource: function() {
var dsOptions = this.options.dataSource;
this._dataChange = proxy(this._dataChange, this);
this.dataSource = DataSource
.create(dsOptions)
.bind("change", this._dataChange);
if (dsOptions && this.options.autoBind) {
this.dataSource.fetch();
}
},
_dataChange: function(e) {
this._data = e.sender.view();
this._load(this._data);
},
_load: function(data) {
this._clearMarkers();
if (!this._loader) {
this._loader = new GeoJSONLoader(this.map, this.options.style, this);
}
var container = new Group();
for (var i = 0; i < data.length; i++) {
var shape = this._loader.parse(data[i]);
if (shape) {
container.append(shape);
}
}
this._root.clear();
this._root.append(container);
},
shapeCreated: function(shape) {
var cancelled = false;
if (shape instanceof d.Circle) {
cancelled = defined(this._createMarker(shape));
}
if (!cancelled) {
var args = { layer: this, shape: shape };
cancelled = this.map.trigger("shapeCreated", args);
}
return cancelled;
},
_createMarker: function(shape) {
var marker = this.map.markers.bind({
location: shape.location
}, shape.dataItem);
if (marker) {
this._markers.push(marker);
}
return marker;
},
_clearMarkers: function() {
for (var i = 0; i < this._markers.length; i++) {
this.map.markers.remove(this._markers[i]);
}
this._markers = [];
},
_panEnd: function(e) {
Layer.fn._panEnd.call(this, e);
this._translateSurface();
},
_translateSurface: function() {
var map = this.map;
var nw = map.locationToView(map.extent().nw);
if (this.surface.translate) {
this.surface.translate(nw);
this.movable.moveTo({ x: nw.x, y: nw.y });
}
},
_handler: function(event) {
var layer = this;
return function(e) {
if (e.element) {
var args = {
layer: layer,
shape: e.element,
originalEvent: e.originalEvent
};
layer.map.trigger(event, args);
}
};
}
});
var GeoJSONLoader = Class.extend({
init: function(locator, defaultStyle, observer) {
this.observer = observer;
this.locator = locator;
this.style = defaultStyle;
},
parse: function(item) {
var root = new Group();
if (item.type === "Feature") {
this._loadGeometryTo(root, item.geometry, item);
} else {
this._loadGeometryTo(root, item, item);
}
if (root.children.length < 2) {
root = root.children[0];
}
return root;
},
_shapeCreated: function(shape) {
var cancelled = false;
if (this.observer && this.observer.shapeCreated) {
cancelled = this.observer.shapeCreated(shape);
}
return cancelled;
},
_loadGeometryTo: function(container, geometry, dataItem) {
var coords = geometry.coordinates;
var i;
var path;
switch(geometry.type) {
case "LineString":
path = this._loadPolygon(container, [coords], dataItem);
this._setLineFill(path);
break;
case "MultiLineString":
for (i = 0; i < coords.length; i++) {
path = this._loadPolygon(container, [coords[i]], dataItem);
this._setLineFill(path);
}
break;
case "Polygon":
this._loadPolygon(container, coords, dataItem);
break;
case "MultiPolygon":
for (i = 0; i < coords.length; i++) {
this._loadPolygon(container, coords[i], dataItem);
}
break;
case "Point":
this._loadPoint(container, coords, dataItem);
break;
case "MultiPoint":
for (i = 0; i < coords.length; i++) {
this._loadPoint(container, coords[i], dataItem);
}
break;
}
},
_setLineFill: function(path) {
var segments = path.segments;
if (segments.length < 4 || !segments[0].anchor().equals(last(segments).anchor())) {
path.options.fill = null;
}
},
_loadShape: function(container, shape) {
if (!this._shapeCreated(shape)) {
container.append(shape);
}
return shape;
},
_loadPolygon: function(container, rings, dataItem) {
var shape = this._buildPolygon(rings);
shape.dataItem = dataItem;
return this._loadShape(container, shape);
},
_buildPolygon: function(rings) {
var type = rings.length > 1 ? d.MultiPath : d.Path;
var path = new type(this.style);
for (var i = 0; i < rings.length; i++) {
for (var j = 0; j < rings[i].length; j++) {
var point = this.locator.locationToView(
Location.fromLngLat(rings[i][j])
);
if (j === 0) {
path.moveTo(point.x, point.y);
} else {
path.lineTo(point.x, point.y);
}
}
}
return path;
},
_loadPoint: function(container, coords, dataItem) {
var location = Location.fromLngLat(coords);
var point = this.locator.locationToView(location);
var circle = new g.Circle(point, 10);
var shape = new d.Circle(circle, this.style);
shape.dataItem = dataItem;
shape.location = location;
return this._loadShape(container, shape);
}
});
// Exports ================================================================
deepExtend(kendo.data, {
schemas: {
geojson: {
type: "json",
data: function(data) {
if (data.type === "FeatureCollection") {
return data.features;
}
if (data.type === "GeometryCollection") {
return data.geometries;
}
return data;
}
}
},
transports: {
geojson: {
read: {
dataType: "json"
}
}
}
});
deepExtend(dataviz, {
map: {
layers: {
shape: ShapeLayer,
ShapeLayer: ShapeLayer
},
GeoJSONLoader: GeoJSONLoader
}
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var proxy = $.proxy,
kendo = window.kendo,
getter = kendo.getter,
dataviz = kendo.dataviz,
deepExtend = kendo.deepExtend,
util = dataviz.util,
defined = util.defined,
isNumber = util.isNumber,
g = dataviz.geometry,
d = dataviz.drawing,
map = dataviz.map,
Location = map.Location,
ShapeLayer = map.layers.ShapeLayer;
var PI = Math.PI;
// Implementation =========================================================
var BubbleLayer = ShapeLayer.extend({
options: {
autoBind: true,
locationField: "location",
valueField: "value",
minSize: 0,
maxSize: 100,
scale: "sqrt",
symbol: "circle"
},
_load: function(data) {
if (data.length === 0) {
return;
}
var opt = this.options;
var getValue = getter(opt.valueField);
data = data.slice(0);
data.sort(function(a, b) {
return getValue(b) - getValue(a);
});
var maxValue = getValue(data[0]);
var scaleType = this._scaleType();
var scale;
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var location = getter(opt.locationField)(dataItem);
var value = getter(opt.valueField)(dataItem);
if (defined(location) && defined(value)) {
if (!scale) {
scale = new scaleType([0, value], [opt.minSize, opt.maxSize]);
}
location = Location.create(location);
var center = this.map.locationToView(location);
var size = scale.map(value);
var symbol = this._createSymbol({
center: center,
size: size,
style: opt.style,
dataItem: dataItem,
location: location
});
symbol.dataItem = dataItem;
symbol.location = location;
symbol.value = value;
this._drawSymbol(symbol);
}
}
},
_scaleType: function() {
var scale = this.options.scale;
if (kendo.isFunction(scale)) {
return scale;
}
return dataviz.map.scales[scale];
},
_createSymbol: function(args) {
var symbol = this.options.symbol;
if (!kendo.isFunction(symbol)) {
symbol = dataviz.map.symbols[symbol];
}
return symbol(args);
},
_drawSymbol: function(shape) {
var args = { layer: this, shape: shape };
var cancelled = this.map.trigger("shapeCreated", args);
if (!cancelled) {
this.surface.draw(shape);
}
}
});
var SqrtScale = kendo.Class.extend({
init: function(domain, range) {
this._domain = domain;
this._range = range;
var domainRange = Math.sqrt(domain[1]) - Math.sqrt(domain[0]);
var outputRange = range[1] - range[0];
this._ratio = outputRange / domainRange;
},
map: function(value) {
var rel = (Math.sqrt(value) - Math.sqrt(this._domain[0])) * this._ratio;
return this._range[0] + rel;
}
});
var Symbols = {
circle: function (args) {
var geo = new g.Circle(args.center, args.size / 2);
return new d.Circle(geo, args.style);
},
square: function(args) {
var path = new d.Path(args.style);
var halfSize = args.size / 2;
var center = args.center;
path.moveTo(center.x - halfSize, center.y - halfSize)
.lineTo(center.x + halfSize, center.y - halfSize)
.lineTo(center.x + halfSize, center.y + halfSize)
.lineTo(center.x - halfSize, center.y + halfSize)
.close();
return path;
}
};
// Exports ================================================================
deepExtend(dataviz, {
map: {
layers: {
bubble: BubbleLayer,
BubbleLayer: BubbleLayer
},
scales: {
sqrt: SqrtScale
},
symbols: Symbols
}
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var math = Math,
proxy = $.proxy,
kendo = window.kendo,
Class = kendo.Class,
template = kendo.template,
dataviz = kendo.dataviz,
round = dataviz.round,
deepExtend = kendo.deepExtend,
g = dataviz.geometry,
Point = g.Point,
Layer = dataviz.map.layers.Layer,
util = dataviz.util,
renderSize = util.renderSize,
limit = util.limitValue;
// Image tile layer =============================================================
var TileLayer = Layer.extend({
init: function(map, options) {
Layer.fn.init.call(this, map, options);
if (typeof this.options.subdomains === "string") {
this.options.subdomains = this.options.subdomains.split("");
}
var viewType = this._viewType();
this._view = new viewType(this.element, this.options);
},
destroy: function() {
Layer.fn.destroy.call(this);
this._view.destroy();
this._view = null;
},
_reset: function() {
Layer.fn._reset.call(this);
this._updateView();
this._view.clear();
this._view.reset();
},
_viewType: function() {
return TileView;
},
_activate: function() {
Layer.fn._activate.call(this);
if (!kendo.support.mobileOS) {
if (!this._pan) {
this._pan = proxy(this._throttleRender, this);
}
this.map.bind("pan", this._pan);
}
},
_deactivate: function() {
Layer.fn._deactivate.call(this);
if (this._pan) {
this.map.unbind("pan", this._pan);
}
},
_updateView: function() {
var view = this._view,
map = this.map,
extent = map.extent(),
extentToPoint = {
nw: map.locationToLayer(extent.nw).round(),
se: map.locationToLayer(extent.se).round()
};
view.center(map.locationToLayer(map.center()));
view.extent(extentToPoint);
view.zoom(map.zoom());
},
_resize: function() {
this._render();
},
_throttleRender: function() {
var layer = this,
now = new Date(),
timestamp = layer._renderTimestamp;
if (!timestamp || now - timestamp > 100) {
this._render();
layer._renderTimestamp = now;
}
},
_panEnd: function(e) {
Layer.fn._panEnd.call(this, e);
this._render();
},
_render: function() {
this._updateView();
this._view.render();
}
});
var TileView = Class.extend({
init: function(element, options) {
this.element = element;
this._initOptions(options);
this.pool = new TilePool();
},
options: {
tileSize: 256,
subdomains: ["a", "b", "c"],
urlTemplate: ""
},
center: function(center) {
this._center = center;
},
extent: function(extent) {
this._extent = extent;
},
zoom: function(zoom) {
this._zoom = zoom;
},
pointToTileIndex: function(point) {
return new Point(
math.floor(point.x / this.options.tileSize),
math.floor(point.y / this.options.tileSize)
);
},
clear: function() {
this.pool.empty();
},
tileCount: function() {
var size = this.size(),
firstTileIndex = this.pointToTileIndex(this._extent.nw),
nw = this._extent.nw,
point = this.indexToPoint(firstTileIndex).translate(-nw.x, -nw.y);
return {
x: math.ceil((math.abs(point.x) + size.width) / this.options.tileSize),
y: math.ceil((math.abs(point.y) + size.height) / this.options.tileSize)
};
},
size: function() {
var nw = this._extent.nw,
se = this._extent.se,
diff = se.clone().translate(-nw.x, -nw.y);
return {
width: diff.x,
height: diff.y
};
},
indexToPoint: function(index) {
var x = index.x, y = index.y;
return new Point(
x * this.options.tileSize,
y * this.options.tileSize
);
},
subdomainText: function() {
var subdomains = this.options.subdomains;
return subdomains[this.subdomainIndex++ % subdomains.length];
},
destroy: function() {
this.element.empty();
this.pool.empty();
},
reset: function() {
this.subdomainIndex = 0;
this.basePoint = this._extent.nw;
this.render();
},
render: function() {
var size = this.tileCount(),
firstTileIndex = this.pointToTileIndex(this._extent.nw),
tile, x, y;
for (x = 0; x < size.x; x++) {
for (y = 0; y < size.y; y++) {
tile = this.createTile({
x: firstTileIndex.x + x,
y: firstTileIndex.y + y
});
if (!tile.options.visible) {
this.element.append(tile.element);
tile.options.visible = true;
}
}
}
},
createTile: function(currentIndex) {
var options = this.tileOptions(currentIndex);
return this.pool.get(this._center, options);
},
tileOptions: function(currentIndex) {
var index = this.wrapIndex(currentIndex),
point = this.indexToPoint(currentIndex),
base = this.basePoint,
offset = point.clone().translate(-base.x, -base.y);
return {
index: index,
currentIndex: currentIndex,
point: point,
offset: roundPoint(offset),
zoom: this._zoom,
subdomain: this.subdomainText(),
urlTemplate: this.options.urlTemplate,
errorUrlTemplate: this.options.errorUrlTemplate
};
},
wrapIndex: function(index) {
var boundary = math.pow(2, this._zoom);
return {
x: this.wrapValue(index.x, boundary),
y: limit(index.y, 0, boundary - 1)
};
},
wrapValue: function(value, boundary) {
var remainder = (math.abs(value) % boundary);
if (value >= 0) {
value = remainder;
} else {
value = boundary - (remainder === 0 ? boundary : remainder);
}
return value;
}
});
var ImageTile = Class.extend({
init: function(options) {
this._initOptions(options);
this.createElement();
this.load();
// initially the image should be
this.options.visible = false;
},
options: {
urlTemplate: "",
errorUrlTemplate: "",
visible: false
},
createElement: function() {
this.element = $("")
.addClass("k-map-controls " + renderPos(pos))
.appendTo(this.element);
}
return $("
").appendTo(wrap);
},
_createAttribution: function(options) {
var element = this._createControlElement(options, "bottomRight");
this.attribution = new ui.Attribution(element, options);
},
_createNavigator: function(options) {
var element = this._createControlElement(options, "topLeft");
var navigator = this.navigator = new ui.Navigator(element, options);
this._navigatorPan = proxy(this._navigatorPan, this);
navigator.bind("pan", this._navigatorPan);
this._navigatorCenter = proxy(this._navigatorCenter, this);
navigator.bind("center", this._navigatorCenter);
},
_navigatorPan: function(e) {
var map = this;
var scroller = map.scroller;
var x = scroller.scrollLeft + e.x;
var y = scroller.scrollTop - e.y;
var bounds = this._virtualSize;
var height = this.element.height();
var width = this.element.width();
// TODO: Move limits in scroller
x = limit(x, bounds.x.min, bounds.x.max - width);
y = limit(y, bounds.y.min, bounds.y.max - height);
map.scroller.one("scroll", function(e) { map._scrollEnd(e); });
map.scroller.scrollTo(-x, -y);
},
_navigatorCenter: function() {
this.center(this.options.center);
},
_createZoomControl: function(options) {
var element = this._createControlElement(options, "topLeft");
var zoomControl = this.zoomControl = new ui.ZoomControl(element, options);
this._zoomControlChange = proxy(this._zoomControlChange, this);
zoomControl.bind("change", this._zoomControlChange);
},
_zoomControlChange: function(e) {
if (!this.trigger("zoomStart", { originalEvent: e })) {
this.zoom(this.zoom() + e.delta);
this.trigger("zoomEnd", { originalEvent: e });
}
},
_initScroller: function() {
var friction = kendo.support.mobileOS ? FRICTION_MOBILE : FRICTION;
var zoomable = this.options.zoomable !== false;
var scroller = this.scroller = new kendo.mobile.ui.Scroller(
this.element.children(0), {
friction: friction,
velocityMultiplier: VELOCITY_MULTIPLIER,
zoom: zoomable,
mousewheelScrolling: false
});
scroller.bind("scroll", proxy(this._scroll, this));
scroller.bind("scrollEnd", proxy(this._scrollEnd, this));
scroller.userEvents.bind("gesturestart", proxy(this._scaleStart, this));
scroller.userEvents.bind("gestureend", proxy(this._scale, this));
this.scrollElement = scroller.scrollElement;
},
_initLayers: function() {
var defs = this.options.layers,
layers = this.layers = [];
for (var i = 0; i < defs.length; i++) {
var options = defs[i];
var type = options.type || "shape";
var defaults = this.options.layerDefaults[type];
var impl = dataviz.map.layers[type];
layers.push(new impl(this, deepExtend({}, defaults, options)));
}
},
_initMarkers: function() {
this.markers = new map.layers.MarkerLayer(this, this.options.markerDefaults);
this.markers.add(this.options.markers);
},
_scroll: function(e) {
var origin = this.locationToLayer(this._viewOrigin).round();
var movable = e.sender.movable;
var offset = new g.Point(movable.x, movable.y).scale(-1).scale(1/movable.scale);
origin.x += offset.x;
origin.y += offset.y;
this._setOrigin(this.layerToLocation(origin));
this.trigger("pan", {
originalEvent: e,
origin: this._getOrigin(),
center: this.center()
});
},
_scrollEnd: function(e) {
this.trigger("panEnd", {
originalEvent: e,
origin: this._getOrigin(),
center: this.center()
});
},
_scaleStart: function(e) {
if (this.trigger("zoomStart", { originalEvent: e })) {
var touch = e.touches[1];
if (touch) {
touch.cancel();
}
}
},
_scale: function(e) {
var scale = this.scroller.movable.scale;
var zoom = this._scaleToZoom(scale);
var gestureCenter = new g.Point(e.center.x, e.center.y);
var centerLocation = this.viewToLocation(gestureCenter, zoom);
var centerPoint = this.locationToLayer(centerLocation, zoom);
var originPoint = centerPoint.translate(-gestureCenter.x, -gestureCenter.y);
this._zoomAround(originPoint, zoom);
this.trigger("zoomEnd", { originalEvent: e });
},
_scaleToZoom: function(scaleDelta) {
var scale = this._layerSize() * scaleDelta;
var tiles = scale / this.options.minSize;
var zoom = math.log(tiles) / math.log(2);
return math.round(zoom);
},
_reset: function() {
if (this.attribution) {
this.attribution.filter(this.center(), this.zoom());
}
this._viewOrigin = this._getOrigin(true);
this._resetScroller();
this.trigger("beforeReset");
this.trigger("reset");
},
_resetScroller: function() {
var scroller = this.scroller;
var x = scroller.dimensions.x;
var y = scroller.dimensions.y;
var scale = this._layerSize();
var maxScale = 20 * scale;
var nw = this.extent().nw;
var topLeft = this.locationToLayer(nw).round();
scroller.movable.round = true;
scroller.reset();
scroller.userEvents.cancel();
var maxZoom = this.options.maxZoom - this.zoom();
scroller.dimensions.maxScale = pow(2, maxZoom);
var xBounds = { min: -topLeft.x, max: scale - topLeft.x };
var yBounds = { min: -topLeft.y, max: scale - topLeft.y };
if (this.options.wraparound) {
xBounds.min = -maxScale;
xBounds.max = maxScale;
}
if (this.options.pannable === false) {
var viewSize = this.viewSize();
xBounds.min = yBounds.min = 0;
xBounds.max = viewSize.width;
yBounds.max = viewSize.height;
}
x.makeVirtual();
y.makeVirtual();
x.virtualSize(xBounds.min, xBounds.max);
y.virtualSize(yBounds.min, yBounds.max);
this._virtualSize = { x: xBounds, y: yBounds };
},
_renderLayers: function() {
var defs = this.options.layers,
layers = this.layers = [],
scrollWrap = this.scrollWrap;
scrollWrap.empty();
for (var i = 0; i < defs.length; i++) {
var options = defs[i];
var type = options.type || "shape";
var defaults = this.options.layerDefaults[type];
var impl = dataviz.map.layers[type];
layers.push(new impl(this, deepExtend({}, defaults, options)));
}
},
_layerSize: function(zoom) {
zoom = valueOrDefault(zoom, this.options.zoom);
return this.options.minSize * pow(2, zoom);
},
_click: function(e) {
var cursor = this.eventOffset(e);
this.trigger("click", {
originalEvent: e,
location: this.viewToLocation(cursor)
});
},
_mousewheel: function(e) {
e.preventDefault();
var delta = dataviz.mwDelta(e) > 0 ? -1 : 1;
var options = this.options;
var fromZoom = this.zoom();
var toZoom = limit(fromZoom + delta, options.minZoom, options.maxZoom);
if (options.zoomable !== false && toZoom !== fromZoom) {
if (!this.trigger("zoomStart", { originalEvent: e })) {
var cursor = this.eventOffset(e);
var location = this.viewToLocation(cursor);
var postZoom = this.locationToLayer(location, toZoom);
var origin = postZoom.translate(-cursor.x, -cursor.y);
this._zoomAround(origin, toZoom);
this.trigger("zoomEnd", { originalEvent: e });
}
}
}
});
// Exports ================================================================
dataviz.ui.plugin(Map);
})(window.kendo.jQuery);
(function ($, undefined) {
var kendo = window.kendo,
diagram = kendo.dataviz.diagram = {},
Class = kendo.Class,
deepExtend = kendo.deepExtend,
isArray = $.isArray,
EPSILON = 1e-06;
/*-------------------Diverse utilities----------------------------*/
var Utils = {
};
deepExtend(Utils, {
isNearZero: function (num) {
return Math.abs(num) < EPSILON;
},
isDefined: function (obj) {
return typeof obj !== 'undefined';
},
isUndefined: function (obj) {
return (typeof obj === 'undefined') || obj === null;
},
/**
* Returns whether the given object is an object or a value.
*/
isObject: function (obj) {
return obj === Object(obj);
},
/**
* Returns whether the object has a property with the given name.
*/
has: function (obj, key) {
return Object.hasOwnProperty.call(obj, key);
},
/**
* Returns whether the given object is a string.
*/
isString: function (obj) {
return Object.prototype.toString.call(obj) == '[object String]';
},
isBoolean: function (obj) {
return Object.prototype.toString.call(obj) == '[object Boolean]';
},
isType: function (obj, type) {
return Object.prototype.toString.call(obj) == '[object ' + type + ']';
},
/**
* Returns whether the given object is a number.
*/
isNumber: function (obj) {
return !isNaN(parseFloat(obj)) && isFinite(obj);
},
/**
* Return whether the given object (array or dictionary).
*/
isEmpty: function (obj) {
if (obj === null) {
return true;
}
if (isArray(obj) || Utils.isString(obj)) {
return obj.length === 0;
}
for (var key in obj) {
if (Utils.has(obj, key)) {
return false;
}
}
return true;
},
simpleExtend: function(destination, source) {
if(!Utils.isObject(source)) {
return;
}
for(var name in source) {
destination[name] = source[name];
}
},
/**
* Returns an array of the specified size and with each entry set to the given value.
* @param size
* @param value
* @returns {Array}
*/
initArray: function createIdArray(size, value) {
var array = [];
for (var i = 0; i < size; ++i) {
array[i] = value;
}
return array;
},
serializePoints: function (points) {
var res = [];
for (var i = 0; i < points.length; i++) {
var p = points[i];
res.push(p.x + ";" + p.y);
}
return res.join(";");
},
deserializePoints: function (s) {
var v = s.split(";"), points = [];
if (v.length % 2 !== 0) {
throw "Not an array of points.";
}
for (var i = 0; i < v.length; i += 2) {
points.push(new diagram.Point(
parseInt(v[i], 10),
parseInt(v[i + 1], 10)
));
}
return points;
},
/**
* Returns an integer within the given bounds.
* @param lower The inclusive lower bound.
* @param upper The exclusive upper bound.
* @returns {number}
*/
randomInteger: function (lower, upper) {
return parseInt(Math.floor(Math.random() * upper) + lower, 10);
} ,
/*
Depth-first traversal of the given node.
*/
DFT: function (el, func) {
func(el);
if (el.childNodes) {
for (var i = 0; i < el.childNodes.length; i++) {
var item = el.childNodes[i];
this.DFT(item, func);
}
}
},
/*
Returns the angle in degrees for the given matrix
*/
getMatrixAngle: function (m) {
if (m === null || m.d === 0) {
return 0;
}
return Math.atan2(m.b, m.d) * 180 / Math.PI;
},
/*
Returns the scaling factors for the given matrix.
*/
getMatrixScaling: function (m) {
var sX = Math.sqrt(m.a * m.a + m.c * m.c);
var sY = Math.sqrt(m.b * m.b + m.d * m.d);
return [sX, sY];
}
});
/**
* The Range defines an array of equally separated numbers.
* @param start The start-value of the Range.
* @param stop The end-value of the Range.
* @param step The separation between the values (default:1).
* @returns {Array}
*/
function Range(start, stop, step) {
if (typeof start == 'undefined' || typeof stop == 'undefined') {
return [];
}
if (step && Utils.sign(stop - start) != Utils.sign(step)) {
throw "The sign of the increment should allow to reach the stop-value.";
}
step = step || 1;
start = start || 0;
stop = stop || start;
if ((stop - start) / step === Infinity) {
throw "Infinite range defined.";
}
var range = [], i = -1, j;
function rangeIntegerScale(x) {
var k = 1;
while (x * k % 1) {
k *= 10;
}
return k;
}
var k = rangeIntegerScale(Math.abs(step));
start *= k;
stop *= k;
step *= k;
if (start > stop && step > 0) {
step = -step;
}
if (step < 0) {
while ((j = start + step * ++i) >= stop) {
range.push(j / k);
}
}
else {
while ((j = start + step * ++i) <= stop) {
range.push(j / k);
}
}
return range;
}
/*-------------------Diverse math functions----------------------------*/
function findRadian(start, end) {
if (start == end) {
return 0;
}
var sngXComp = end.x - start.x,
sngYComp = start.y - end.y,
atan = Math.atan(sngXComp / sngYComp);
if (sngYComp >= 0) {
return sngXComp < 0 ? atan + (2 * Math.PI) : atan;
}
return atan + Math.PI;
}
Utils.sign = function(number) {
return number ? number < 0 ? -1 : 1 : 0;
};
Utils.findAngle = function(center, end) {
return findRadian(center, end) * 180 / Math.PI;
};
/*-------------------Array Helpers ----------------------------*/
Utils.forEach = function(arr, iterator, thisRef) {
for (var i = 0; i < arr.length; i++) {
iterator.call(thisRef, arr[i], i, arr);
}
};
Utils.any = function(arr, predicate) {
for (var i = 0; i < arr.length; ++i) {
if (predicate(arr[i])) {
return arr[i];
}
}
return null;
};
Utils.remove = function (arr, what) {
var ax;
while ((ax = Utils.indexOf(arr, what)) !== -1) {
arr.splice(ax, 1);
}
return arr;
};
Utils.contains = function (arr, obj) {
return Utils.indexOf(arr, obj) !== -1;
};
Utils.indexOf = function(arr, what) {
return $.inArray(what, arr);
};
Utils.fold = function (list, iterator, acc, context) {
var initial = arguments.length > 2;
for (var i = 0; i < list.length; i++) {
var value = list[i];
if (!initial) {
acc = value;
initial = true;
}
else {
acc = iterator.call(context, acc, value, i, list);
}
}
if (!initial) {
throw 'Reduce of empty array with no initial value';
}
return acc;
};
Utils.find = function (arr, iterator, context) {
var result;
Utils.any(arr, function (value, index, list) {
if (iterator.call(context, value, index, list)) {
result = value;
return true;
}
return false;
});
return result;
};
Utils.first = function (arr, constraint, context) {
if (arr.length === 0) {
return null;
}
if (Utils.isUndefined(constraint)) {
return arr[0];
}
return Utils.find(arr, constraint, context);
};
/**
* Inserts the given element at the specified position and returns the result.
*/
Utils.insert = function (arr, element, position) {
arr.splice(position, 0, element);
return arr;
};
Utils.all = function (arr, iterator, context) {
var result = true;
var value;
for (var i = 0; i < arr.length; i++) {
value = arr[i];
result = result && iterator.call(context, value, i, arr);
if (!result) {
break;
}
}
return result;
};
Utils.clear = function (arr) {
arr.splice(0, arr.length);
};
/**
* Sort the arrays on the basis of the first one (considered as keys and the other array as values).
* @param a
* @param b
* @param sortfunc (optiona) sorting function for the values in the first array
*/
Utils.bisort = function (a, b, sortfunc) {
if (Utils.isUndefined(a)) {
throw "First array is not specified.";
}
if (Utils.isUndefined(b)) {
throw "Second array is not specified.";
}
if (a.length != b.length) {
throw "The two arrays should have equal length";
}
var all = [], i;
for (i = 0; i < a.length; i++) {
all.push({ 'x': a[i], 'y': b[i] });
}
if (Utils.isUndefined(sortfunc)) {
all.sort(function (m, n) {
return m.x - n.x;
});
}
else {
all.sort(function (m, n) {
return sortfunc(m.x, n.x);
});
}
Utils.clear(a);
Utils.clear(b);
for (i = 0; i < all.length; i++) {
a.push(all[i].x);
b.push(all[i].y);
}
};
Utils.addRange = function (arr, range) {
arr.push.apply(arr, range);
};
var Easing = {
easeInOut: function (pos) {
return ((-Math.cos(pos * Math.PI) / 2) + 0.5);
}
};
/**
* An animation ticker driving an adapter which sets a particular
* property in function of the tick.
* @type {*}
*/
var Ticker = kendo.Class.extend({
init: function () {
this.adapters = [];
this.target = 0;
this.tick = 0;
this.interval = 20;
this.duration = 800;
this.lastTime = null;
this.handlers = [];
var _this = this;
this.transition = Easing.easeInOut;
this.timerDelegate = function () {
_this.onTimerEvent();
};
},
addAdapter: function (a) {
this.adapters.push(a);
},
onComplete: function (handler) {
this.handlers.push(handler);
},
removeHandler: function (handler) {
this.handlers = $.grep(this.handlers, function (h) {
return h !== handler;
});
},
trigger: function () {
var _this = this;
if (this.handlers) {
Utils.forEach(this.handlers, function (h) {
return h.call(_this.caller !== null ? _this.caller : _this);
});
}
},
onStep: function () {
},
seekTo: function (to) {
this.seekFromTo(this.tick, to);
},
seekFromTo: function (from, to) {
this.target = Math.max(0, Math.min(1, to));
this.tick = Math.max(0, Math.min(1, from));
this.lastTime = new Date().getTime();
if (!this.intervalId) {
this.intervalId = window.setInterval(this.timerDelegate, this.interval);
}
},
stop: function () {
if (this.intervalId) {
window.clearInterval(this.intervalId);
this.intervalId = null;
//this.trigger.call(this);
this.trigger();
// this.next();
}
},
play: function (origin) {
if (this.adapters.length === 0) {
return;
}
if (origin !== null) {
this.caller = origin;
}
this.initState();
this.seekFromTo(0, 1);
},
reverse: function () {
this.seekFromTo(1, 0);
},
initState: function () {
if (this.adapters.length === 0) {
return;
}
for (var i = 0; i < this.adapters.length; i++) {
this.adapters[i].initState();
}
},
propagate: function () {
var value = this.transition(this.tick);
for (var i = 0; i < this.adapters.length; i++) {
this.adapters[i].update(value);
}
},
onTimerEvent: function () {
var now = new Date().getTime();
var timePassed = now - this.lastTime;
this.lastTime = now;
var movement = (timePassed / this.duration) * (this.tick < this.target ? 1 : -1);
if (Math.abs(movement) >= Math.abs(this.tick - this.target)) {
this.tick = this.target;
} else {
this.tick += movement;
}
try {
this.propagate();
} finally {
this.onStep.call(this);
if (this.target == this.tick) {
this.stop();
}
}
}
});
kendo.deepExtend(diagram, {
init: function (element) {
kendo.init(element, diagram.ui);
},
Utils: Utils,
Range: Range,
Ticker: Ticker
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var kendo = window.kendo,
diagram = kendo.dataviz.diagram,
Class = kendo.Class,
deepExtend = kendo.deepExtend,
dataviz = kendo.dataviz,
Utils = diagram.Utils,
Point = dataviz.Point2D,
isFunction = kendo.isFunction,
contains = Utils.contains,
map = $.map;
// Constants ==============================================================
var HITTESTAREA = 3,
EPSILON = 1e-06;
deepExtend(Point.fn, {
plus: function (p) {
return new Point(this.x + p.x, this.y + p.y);
},
minus: function (p) {
return new Point(this.x - p.x, this.y - p.y);
},
offset: function (value) {
return new Point(this.x - value, this.y - value);
},
times: function (s) {
return new Point(this.x * s, this.y * s);
},
normalize: function () {
if (this.length() === 0) {
return new Point();
}
return this.times(1 / this.length());
},
length: function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
toString: function () {
return "(" + this.x + "," + this.y + ")";
},
lengthSquared: function () {
return (this.x * this.x + this.y * this.y);
},
middleOf: function MiddleOf(p, q) {
return new Point(q.x - p.x, q.y - p.y).times(0.5).plus(p);
},
toPolar: function (useDegrees) {
var factor = 1;
if (useDegrees) {
factor = 180 / Math.PI;
}
var a = Math.atan2(Math.abs(this.y), Math.abs(this.x));
var halfpi = Math.PI / 2;
var len = this.length();
if (this.x === 0) {
// note that the angle goes down and not the usual mathematical convention
if (this.y === 0) {
return new Polar(0, 0);
}
if (this.y > 0) {
return new Polar(len, factor * halfpi);
}
if (this.y < 0) {
return new Polar(len, factor * 3 * halfpi);
}
}
else if (this.x > 0) {
if (this.y === 0) {
return new Polar(len, 0);
}
if (this.y > 0) {
return new Polar(len, factor * a);
}
if (this.y < 0) {
return new Polar(len, factor * (4 * halfpi - a));
}
}
else {
if (this.y === 0) {
return new Polar(len, 2 * halfpi);
}
if (this.y > 0) {
return new Polar(len, factor * (2 * halfpi - a));
}
if (this.y < 0) {
return new Polar(len, factor * (2 * halfpi + a));
}
}
},
isOnLine: function (from, to) {
if (from.x > to.x) { // from must be the leftmost point
var temp = to;
to = from;
from = temp;
}
var r1 = new Rect(from.x, from.y).inflate(HITTESTAREA, HITTESTAREA),
r2 = new Rect(to.x, to.y).inflate(HITTESTAREA, HITTESTAREA), o1, u1;
if (r1.union(r2).contains(this)) {
if (from.x === to.x || from.y === to.y) {
return true;
}
else if (from.y < to.y) {
o1 = r1.x + (((r2.x - r1.x) * (this.y - (r1.y + r1.height))) / ((r2.y + r2.height) - (r1.y + r1.height)));
u1 = (r1.x + r1.width) + ((((r2.x + r2.width) - (r1.x + r1.width)) * (this.y - r1.y)) / (r2.y - r1.y));
}
else {
o1 = r1.x + (((r2.x - r1.x) * (this.y - r1.y)) / (r2.y - r1.y));
u1 = (r1.x + r1.width) + ((((r2.x + r2.width) - (r1.x + r1.width)) * (this.y - (r1.y + r1.height))) / ((r2.y + r2.height) - (r1.y + r1.height)));
}
return (this.x > o1 && this.x < u1);
}
return false;
}
});
deepExtend(Point, {
parse: function (str) {
var tempStr = str.slice(1, str.length - 1),
xy = tempStr.split(","),
x = parseInt(xy[0], 10),
y = parseInt(xy[1], 10);
if (!isNaN(x) && !isNaN(y)) {
return new Point(x, y);
}
}
});
/**
* Structure combining a Point with two additional points representing the handles or tangents attached to the first point.
* If the additional points are null or equal to the first point the path will be sharp.
* Left and right correspond to the direction of the underlying path.
*/
var PathDefiner = Class.extend(
{
init: function (p, left, right) {
this.point = p;
this.left = left;
this.right = right;
}
}
);
/**
* Defines a rectangular region.
*/
var Rect = Class.extend({
init: function (x, y, width, height) {
this.x = x || 0;
this.y = y || 0;
this.width = width || 0;
this.height = height || 0;
},
contains: function (point) {
return ((point.x >= this.x) && (point.x <= (this.x + this.width)) && (point.y >= this.y) && (point.y <= (this.y + this.height)));
},
inflate: function (dx, dy) {
if (dy === undefined) {
dy = dx;
}
this.x -= dx;
this.y -= dy;
this.width += 2 * dx + 1;
this.height += 2 * dy + 1;
return this;
},
offset: function (dx, dy) {
var x = dx, y = dy;
if (dx instanceof Point) {
x = dx.x;
y = dx.y;
}
this.x += x;
this.y += y;
return this;
},
union: function (r) {
var x1 = Math.min(this.x, r.x);
var y1 = Math.min(this.y, r.y);
var x2 = Math.max((this.x + this.width), (r.x + r.width));
var y2 = Math.max((this.y + this.height), (r.y + r.height));
return new Rect(x1, y1, x2 - x1, y2 - y1);
},
center: function () {
return new Point(this.x + this.width / 2, this.y + this.height / 2);
},
top: function () {
return new Point(this.x + this.width / 2, this.y);
},
right: function () {
return new Point(this.x + this.width, this.y + this.height / 2);
},
bottom: function () {
return new Point(this.x + this.width / 2, this.y + this.height);
},
left: function () {
return new Point(this.x, this.y + this.height / 2);
},
topLeft: function () {
return new Point(this.x, this.y);
},
topRight: function () {
return new Point(this.x + this.width, this.y);
},
bottomLeft: function () {
return new Point(this.x, this.y + this.height);
},
bottomRight: function () {
return new Point(this.x + this.width, this.y + this.height);
},
clone: function () {
return new Rect(this.x, this.y, this.width, this.height);
},
isEmpty: function () {
return !this.width && !this.height;
},
equals: function (rect) {
return this.x === rect.x && this.y === rect.y && this.width === rect.width && this.height === rect.height;
},
rotatedBounds: function (angle) {
var rect = this.clone(),
points = this.rotatedPoints(angle),
tl = points[0],
tr = points[1],
br = points[2],
bl = points[3];
rect.x = Math.min(br.x, tl.x, tr.x, bl.x);
rect.y = Math.min(br.y, tl.y, tr.y, bl.y);
rect.width = Math.max(br.x, tl.x, tr.x, bl.x) - rect.x;
rect.height = Math.max(br.y, tl.y, tr.y, bl.y) - rect.y;
return rect;
},
rotatedPoints: function (angle) {
var rect = this,
c = rect.center(),
br = rect.bottomRight().rotate(c, 360 - angle),
tl = rect.topLeft().rotate(c, 360 - angle),
tr = rect.topRight().rotate(c, 360 - angle),
bl = rect.bottomLeft().rotate(c, 360 - angle);
return [tl, tr, br, bl];
},
toString: function (delimiter) {
delimiter = delimiter || " ";
return this.x + delimiter + this.y + delimiter + this.width + delimiter + this.height;
},
scale: function (scaleX, scaleY, staicPoint, adornerCenter, angle) {
var tl = this.topLeft();
var thisCenter = this.center();
tl.rotate(thisCenter, 360 - angle).rotate(adornerCenter, angle);
var delta = staicPoint.minus(tl);
var scaled = new Point(delta.x * scaleX, delta.y * scaleY);
var position = delta.minus(scaled);
tl = tl.plus(position);
tl.rotate(adornerCenter, 360 - angle).rotate(thisCenter, angle);
this.x = tl.x;
this.y = tl.y;
this.width *= scaleX;
this.height *= scaleY;
},
zoom: function(zoom) {
this.x *= zoom;
this.y *= zoom;
this.width *= zoom;
this.height *= zoom;
return this;
}
});
var Size = Class.extend({
init: function (width, height) {
this.width = width;
this.height = height;
}
});
Size.prototype.Empty = new Size(0, 0);
Rect.toRect = function (rect) {
if (!(rect instanceof Rect)) {
rect = new Rect(rect.x, rect.y, rect.width, rect.height);
}
return rect;
};
Rect.empty = function () {
return new Rect(0, 0, 0, 0);
};
Rect.fromPoints = function (p, q) {
if (isNaN(p.x) || isNaN(p.y) || isNaN(q.x) || isNaN(q.y)) {
throw "Some values are NaN.";
}
return new Rect(Math.min(p.x, q.x), Math.min(p.y, q.y), Math.abs(p.x - q.x), Math.abs(p.y - q.y));
};
function isNearZero(num) {
return Math.abs(num) < EPSILON;
}
function intersectLine(start1, end1, start2, end2, isSegment) {
var tangensdiff = ((end1.x - start1.x) * (end2.y - start2.y)) - ((end1.y - start1.y) * (end2.x - start2.x));
if (isNearZero(tangensdiff)) {
//parallel lines
return;
}
var num1 = ((start1.y - start2.y) * (end2.x - start2.x)) - ((start1.x - start2.x) * (end2.y - start2.y));
var num2 = ((start1.y - start2.y) * (end1.x - start1.x)) - ((start1.x - start2.x) * (end1.y - start1.y));
var r = num1 / tangensdiff;
var s = num2 / tangensdiff;
if (isSegment && (r < 0 || r > 1 || s < 0 || s > 1)) {
//r < 0 => line 1 is below line 2
//r > 1 => line 1 is above line 2
//s < 0 => line 2 is below line 1
//s > 1 => line 2 is above line 1
return;
}
return new Point(start1.x + (r * (end1.x - start1.x)), start1.y + (r * (end1.y - start1.y)));
}
var Intersect = {
lines: function (start1, end1, start2, end2) {
return intersectLine(start1, end1, start2, end2);
},
segments: function (start1, end1, start2, end2) {
return intersectLine(start1, end1, start2, end2, true);
},
rectWithLine: function (rect, start, end) {
return Intersect.segments(start, end, rect.topLeft(), rect.topRight()) ||
Intersect.segments(start, end, rect.topRight(), rect.bottomRight()) ||
Intersect.segments(start, end, rect.bottomLeft(), rect.bottomRight()) ||
Intersect.segments(start, end, rect.topLeft(), rect.bottomLeft());
},
rects: function (rect1, rect2, angle) {
var tl = rect2.topLeft(),
tr = rect2.topRight(),
bl = rect2.bottomLeft(),
br = rect2.bottomRight();
var center = rect2.center();
if (angle) {
tl = tl.rotate(center, angle);
tr = tr.rotate(center, angle);
bl = bl.rotate(center, angle);
br = br.rotate(center, angle);
}
var intersect = rect1.contains(tl) ||
rect1.contains(tr) ||
rect1.contains(bl) ||
rect1.contains(br) ||
Intersect.rectWithLine(rect1, tl, tr) ||
Intersect.rectWithLine(rect1, tl, bl) ||
Intersect.rectWithLine(rect1, tr, br) ||
Intersect.rectWithLine(rect1, bl, br);
if (!intersect) {//last possible case is rect1 to be completely within rect2
tl = rect1.topLeft();
tr = rect1.topRight();
bl = rect1.bottomLeft();
br = rect1.bottomRight();
if (angle) {
var reverseAngle = 360 - angle;
tl = tl.rotate(center, reverseAngle);
tr = tr.rotate(center, reverseAngle);
bl = bl.rotate(center, reverseAngle);
br = br.rotate(center, reverseAngle);
}
intersect = rect2.contains(tl) ||
rect2.contains(tr) ||
rect2.contains(bl) ||
rect2.contains(br);
}
return intersect;
}
};
/**
* Aligns two rectangles, where one is the container and the other is content.
*/
var RectAlign = Class.extend({
init: function (container) {
this.container = Rect.toRect(container);
},
align: function (content, alignment) {
var alignValues = alignment.toLowerCase().split(" ");
for (var i = 0; i < alignValues.length; i++) {
content = this._singleAlign(content, alignValues[i]);
}
return content;
},
_singleAlign: function (content, alignment) {
if (isFunction(this[alignment])) {
return this[alignment](content);
}
else {
return content;
}
},
left: function (content) {
return this._align(content, this._left);
},
center: function (content) {
return this._align(content, this._center);
},
right: function (content) {
return this._align(content, this._right);
},
stretch: function (content) {
return this._align(content, this._stretch);
},
top: function (content) {
return this._align(content, this._top);
},
middle: function (content) {
return this._align(content, this._middle);
},
bottom: function (content) {
return this._align(content, this._bottom);
},
_left: function (container, content) {
content.x = container.x;
},
_center: function (container, content) {
content.x = ((container.width - content.width) / 2) || 0;
},
_right: function (container, content) {
content.x = container.width - content.width;
},
_top: function (container, content) {
content.y = container.y;
},
_middle: function (container, content) {
content.y = ((container.height - content.height) / 2) || 0;
},
_bottom: function (container, content) {
content.y = container.height - content.height;
},
_stretch: function (container, content) {
content.x = 0;
content.y = 0;
content.height = container.height;
content.width = container.width;
},
_align: function (content, alignCalc) {
content = Rect.toRect(content);
alignCalc(this.container, content);
return content;
}
});
var Polar = Class.extend({
init: function (r, a) {
this.r = r;
this.angle = a;
}
});
/**
* SVG transformation matrix.
*/
var Matrix = Class.extend({
init: function (a, b, c, d, e, f) {
this.a = a || 0;
this.b = b || 0;
this.c = c || 0;
this.d = d || 0;
this.e = e || 0;
this.f = f || 0;
},
plus: function (m) {
this.a += m.a;
this.b += m.b;
this.c += m.c;
this.d += m.d;
this.e += m.e;
this.f += m.f;
},
minus: function (m) {
this.a -= m.a;
this.b -= m.b;
this.c -= m.c;
this.d -= m.d;
this.e -= m.e;
this.f -= m.f;
},
times: function (m) {
return new Matrix(
this.a * m.a + this.c * m.b,
this.b * m.a + this.d * m.b,
this.a * m.c + this.c * m.d,
this.b * m.c + this.d * m.d,
this.a * m.e + this.c * m.f + this.e,
this.b * m.e + this.d * m.f + this.f
);
},
apply: function (p) {
return new Point(this.a * p.x + this.c * p.y + this.e, this.b * p.x + this.d * p.y + this.f);
},
applyRect: function (r) {
return Rect.fromPoints(this.apply(r.topLeft()), this.apply(r.bottomRight()));
},
toString: function () {
return "matrix(" + this.a + " " + this.b + " " + this.c + " " + this.d + " " + this.e + " " + this.f + ")";
}
});
deepExtend(Matrix, {
fromSVGMatrix: function (vm) {
var m = new Matrix();
m.a = vm.a;
m.b = vm.b;
m.c = vm.c;
m.d = vm.d;
m.e = vm.e;
m.f = vm.f;
return m;
},
fromMatrixVector: function (v) {
var m = new Matrix();
m.a = v.a;
m.b = v.b;
m.c = v.c;
m.d = v.d;
m.e = v.e;
m.f = v.f;
return m;
},
fromList: function (v) {
if (v.length !== 6) {
throw "The given list should consist of six elements.";
}
var m = new Matrix();
m.a = v[0];
m.b = v[1];
m.c = v[2];
m.d = v[3];
m.e = v[4];
m.f = v[5];
return m;
},
translation: function (x, y) {
var m = new Matrix();
m.a = 1;
m.b = 0;
m.c = 0;
m.d = 1;
m.e = x;
m.f = y;
return m;
},
unit: function () {
return new Matrix(1, 0, 0, 1, 0, 0);
},
rotation: function (angle, x, y) {
var m = new Matrix();
m.a = Math.cos(angle * Math.PI / 180);
m.b = Math.sin(angle * Math.PI / 180);
m.c = -m.b;
m.d = m.a;
m.e = (x - x * m.a + y * m.b) || 0;
m.f = (y - y * m.a - x * m.b) || 0;
return m;
},
scaling: function (scaleX, scaleY) {
var m = new Matrix();
m.a = scaleX;
m.b = 0;
m.c = 0;
m.d = scaleY;
m.e = 0;
m.f = 0;
return m;
},
parse: function (v) {
var parts, nums;
if (v) {
v = v.trim();
// of the form "matrix(...)"
if (v.slice(0, 6).toLowerCase() === "matrix") {
nums = v.slice(7, v.length - 1).trim();
parts = nums.split(",");
if (parts.length === 6) {
return Matrix.fromList(map(parts, function (p) {
return parseFloat(p);
}));
}
parts = nums.split(" ");
if (parts.length === 6) {
return Matrix.fromList(map(parts, function (p) {
return parseFloat(p);
}));
}
}
// of the form "(...)"
if (v.slice(0, 1) === "(" && v.slice(v.length - 1) === ")") {
v = v.substr(1, v.length - 1);
}
if (v.indexOf(",") > 0) {
parts = v.split(",");
if (parts.length === 6) {
return Matrix.fromList(map(parts, function (p) {
return parseFloat(p);
}));
}
}
if (v.indexOf(" ") > 0) {
parts = v.split(" ");
if (parts.length === 6) {
return Matrix.fromList(map(parts, function (p) {
return parseFloat(p);
}));
}
}
}
return parts;
}
});
/**
* SVG transformation represented as a vector.
*/
var MatrixVector = Class.extend({
init: function (a, b, c, d, e, f) {
this.a = a || 0;
this.b = b || 0;
this.c = c || 0;
this.d = d || 0;
this.e = e || 0;
this.f = f || 0;
},
fromMatrix: function FromMatrix(m) {
var v = new MatrixVector();
v.a = m.a;
v.b = m.b;
v.c = m.c;
v.d = m.d;
v.e = m.e;
v.f = m.f;
return v;
}
});
/**
* Returns a value with Gaussian (normal) distribution.
* @param mean The mean value of the distribution.
* @param deviation The deviation (spreading at half-height) of the distribution.
* @returns {number}
*/
function normalVariable(mean, deviation) {
var x, y, r;
do {
x = Math.random() * 2 - 1;
y = Math.random() * 2 - 1;
r = x * x + y * y;
}
while (!r || r > 1);
return mean + deviation * x * Math.sqrt(-2 * Math.log(r) / r);
}
/**
* Returns a random identifier which can be used as an ID of objects, eventually augmented with a prefix.
* @returns {string}
*/
function randomId(length) {
if (Utils.isUndefined(length)) {
length = 10;
}
// old version return Math.floor((1 + Math.random()) * 0x1000000).toString(16).substring(1);
var result = '';
var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
for (var i = length; i > 0; --i) {
result += chars.charAt(Math.round(Math.random() * (chars.length - 1)));
}
return result;
}
var Geometry = {
/**
* Returns the squared distance to the line defined by the two given Points.
* @param p An arbitrary Point.
* @param a An endpoint of the line or segment.
* @param b The complementary endpoint of the line or segment.
*/
_distanceToLineSquared: function (p, a, b) {
function d2(pt1, pt2) {
return (pt1.x - pt2.x) * (pt1.x - pt2.x) + (pt1.y - pt2.y) * (pt1.y - pt2.y);
}
if (a === b) { // returns the distance of p to a
return d2(p, a);
}
var vx = b.x - a.x,
vy = b.y - a.y,
dot = (p.x - a.x) * vx + (p.y - a.y) * vy;
if (dot < 0) {
return d2(a, p); // sits on side of a
}
dot = (b.x - p.x) * vx + (b.y - p.y) * vy;
if (dot < 0) {
return d2(b, p); // sits on side of b
}
// regular case, use crossproduct to get the sine out
dot = (b.x - p.x) * vy - (b.y - p.y) * vx;
return dot * dot / (vx * vx + vy * vy);
},
/**
* Returns the distance to the line defined by the two given Points.
* @param p An arbitrary Point.
* @param a An endpoint of the line or segment.
* @param b The complementary endpoint of the line or segment.
*/
distanceToLine: function (p, a, b) {
return Math.sqrt(this._distanceToLineSquared(p, a, b));
},
/**
* Returns the distance of the given points to the polyline defined by the points.
* @param p An arbitrary point.
* @param points The points defining the polyline.
* @returns {Number}
*/
distanceToPolyline: function (p, points) {
var minimum = Number.MAX_VALUE;
if (Utils.isUndefined(points) || points.length === 0) {
return Number.MAX_VALUE;
}
for (var s = 0; s < points.length - 1; s++) {
var p1 = points[s];
var p2 = points[s + 1];
var d = this._distanceToLineSquared(p, p1, p2);
if (d < minimum) {
minimum = d;
}
}
return Math.sqrt(minimum);
}
};
/*---------------The HashTable structure--------------------------------*/
/**
* Represents a collection of key-value pairs that are organized based on the hash code of the key.
* _buckets[hashId] = {key: key, value:...}
* Important: do not use the standard Array access method, use the get/set methods instead.
* See http://en.wikipedia.org/wiki/Hash_table
*/
var HashTable = kendo.Class.extend({
init: function () {
this._buckets = [];
this.length = 0;
},
/**
* Adds the literal object with the given key (of the form {key: key,....}).
*/
add: function (key, value) {
var obj = this._createGetBucket(key);
if (Utils.isDefined(value)) {
obj.value = value;
}
return obj;
},
/**
* Gets the literal object with the given key.
*/
get: function (key) {
if (this._bucketExists(key)) {
return this._createGetBucket(key);
}
return null;
},
/**
* Set the key-value pair.
* @param key The key of the entry.
* @param value The value to set. If the key already exists the value will be overwritten.
*/
set: function (key, value) {
this.add(key, value);
},
/**
* Determines whether the HashTable contains a specific key.
*/
containsKey: function (key) {
return this._bucketExists(key);
},
/**
* Removes the element with the specified key from the hashtable.
* Returns the removed bucket.
*/
remove: function (key) {
if (this._bucketExists(key)) {
var hashId = this._hash(key);
delete this._buckets[hashId];
this.length--;
return key;
}
},
/**
* Foreach with an iterator working on the key-value pairs.
* @param func
*/
forEach: function (func) {
var hashes = this._hashes();
for (var i = 0, len = hashes.length; i < len; i++) {
var hash = hashes[i];
var bucket = this._buckets[hash];
if (Utils.isUndefined(bucket)) {
continue;
}
func(bucket);
}
},
/**
* Returns a (shallow) clone of the current HashTable.
* @returns {HashTable}
*/
clone: function () {
var ht = new HashTable();
var hashes = this._hashes();
for (var i = 0, len = hashes.length; i < len; i++) {
var hash = hashes[i];
var bucket = this._buckets[hash];
if (Utils.isUndefined(bucket)) {
continue;
}
ht.add(bucket.key, bucket.value);
}
return ht;
},
/**
* Returns the hashes of the buckets.
* @returns {Array}
* @private
*/
_hashes: function () {
var hashes = [];
for (var hash in this._buckets) {
if (this._buckets.hasOwnProperty(hash)) {
hashes.push(hash);
}
}
return hashes;
},
_bucketExists: function (key) {
var hashId = this._hash(key);
return Utils.isDefined(this._buckets[hashId]);
},
/**
* Returns-adds the createGetBucket with the given key. If not present it will
* be created and returned.
* A createGetBucket is a literal object of the form {key: key, ...}.
*/
_createGetBucket: function (key) {
var hashId = this._hash(key);
var bucket = this._buckets[hashId];
if (Utils.isUndefined(bucket)) {
bucket = { key: key };
this._buckets[hashId] = bucket;
this.length++;
}
return bucket;
},
/**
* Hashing of the given key.
*/
_hash: function (key) {
if (Utils.isNumber(key)) {
return key;
}
if (Utils.isString(key)) {
return this._hashString(key);
}
if (Utils.isObject(key)) {
return this._objectHashId(key);
}
throw "Unsupported key type.";
},
/**
* Hashing of a string.
*/
_hashString: function (s) {
// see for example http://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript-jquery
var result = 0;
if (s.length === 0) {
return result;
}
for (var i = 0; i < s.length; i++) {
var ch = s.charCodeAt(i);
result = ((result * 32) - result) + ch;
}
return result;
},
/**
* Returns the unique identifier for an object. This is automatically assigned and add on the object.
*/
_objectHashId: function (key) {
var id = key._hashId;
if (Utils.isUndefined(id)) {
id = randomId();
key._hashId = id;
}
return id;
}
});
/*---------------The Dictionary structure--------------------------------*/
/**
* Represents a collection of key-value pairs.
* Important: do not use the standard Array access method, use the get/Set methods instead.
*/
var Dictionary = kendo.Observable.extend({
/**
* Initializes a new instance of the Dictionary class.
* @param dictionary Loads the content of the given dictionary into this new one.
*/
init: function (dictionary) {
var that = this;
kendo.Observable.fn.init.call(that);
this._hashTable = new HashTable();
this.length = 0;
if (Utils.isDefined(dictionary)) {
if ($.isArray(dictionary)) {
for (var i = 0; i < dictionary.length; i++) {
this.add(dictionary[i]);
}
} else {
dictionary.forEach(function (k, v) {
this.add(k, v);
}, this);
}
}
},
/**
* Adds a key-value to the dictionary.
* If the key already exists this will assign the given value to the existing entry.
*/
add: function (key, value) {
var entry = this._hashTable.get(key);
if (!entry) {
entry = this._hashTable.add(key);
this.length++;
this.trigger('changed');
}
entry.value = value;
},
/**
* Set the key-value pair.
* @param key The key of the entry.
* @param value The value to set. If the key already exists the value will be overwritten.
*/
set: function (key, value) {
this.add(key, value);
},
/**
* Gets the value associated with the given key in the dictionary.
*/
get: function (key) {
var entry = this._hashTable.get(key);
if (entry) {
return entry.value;
}
throw new Error("Cannot find key " + key);
},
/**
* Returns whether the dictionary contains the given key.
*/
containsKey: function (key) {
return this._hashTable.containsKey(key);
},
/**
* Removes the element with the specified key from the dictionary.
*/
remove: function (key) {
if (this.containsKey(key)) {
this.trigger("changed");
this.length--;
return this._hashTable.remove(key);
}
},
/**
* The functional gets the key and value as parameters.
*/
forEach: function (func, thisRef) {
this._hashTable.forEach(function (entry) {
func.call(thisRef, entry.key, entry.value);
});
},
/**
* Same as forEach except that only the value is passed to the functional.
*/
forEachValue: function (func, thisRef) {
this._hashTable.forEach(function (entry) {
func.call(thisRef, entry.value);
});
},
/**
* Calls a defined callback function for each key in the dictionary.
*/
forEachKey: function (func, thisRef) {
this._hashTable.forEach(function (entry) {
func.call(thisRef, entry.key);
});
},
/**
* Gets an array with all keys in the dictionary.
*/
keys: function () {
var keys = [];
this.forEachKey(function (key) {
keys.push(key);
});
return keys;
}
});
/*---------------Queue structure--------------------------------*/
var Queue = kendo.Class.extend({
init: function () {
this._tail = null;
this._head = null;
this.length = 0;
},
/**
* Enqueues an object to the end of the queue.
*/
enqueue: function (value) {
var entry = { value: value, next: null };
if (!this._head) {
this._head = entry;
this._tail = this._head;
}
else {
this._tail.next = entry;
this._tail = this._tail.next;
}
this.length++;
},
/**
* Removes and returns the object at top of the queue.
*/
dequeue: function () {
if (this.length < 1) {
throw new Error("The queue is empty.");
}
var value = this._head.value;
this._head = this._head.next;
this.length--;
return value;
},
contains: function (item) {
var current = this._head;
while (current) {
if (current.value === item) {
return true;
}
current = current.next;
}
return false;
}
});
/**
* While other data structures can have multiple times the same item a Set owns only
* once a particular item.
* @type {*}
*/
var Set = kendo.Observable.extend({
init: function (resource) {
var that = this;
kendo.Observable.fn.init.call(that);
this._hashTable = new HashTable();
this.length = 0;
if (Utils.isDefined(resource)) {
if (resource instanceof HashTable) {
resource.forEach(function (d) {
this.add(d);
});
}
else if (resource instanceof Dictionary) {
resource.forEach(function (k, v) {
this.add({key: k, value: v});
}, this);
}
}
},
contains: function (item) {
return this._hashTable.containsKey(item);
},
add: function (item) {
var entry = this._hashTable.get(item);
if (!entry) {
this._hashTable.add(item, item);
this.length++;
this.trigger('changed');
}
},
get: function (item) {
if (this.contains(item)) {
return this._hashTable.get(item).value;
}
else {
return null;
}
},
/**
* Returns the hash of the item.
* @param item
* @returns {*}
*/
hash: function (item) {
return this._hashTable._hash(item);
},
/**
* Removes the given item from the set. No exception is thrown if the item is not in the Set.
* @param item
*/
remove: function (item) {
if (this.contains(item)) {
this._hashTable.remove(item);
this.length--;
this.trigger('changed');
}
},
/**
* Foreach with an iterator working on the key-value pairs.
* @param func
*/
forEach: function (func, context) {
this._hashTable.forEach(function (kv) {
func(kv.value);
}, context);
},
toArray: function () {
var r = [];
this.forEach(function (d) {
r.push(d);
});
return r;
}
});
/*----------------Node-------------------------------*/
/**
* Defines the node (vertex) of a Graph.
*/
var Node = kendo.Class.extend({
init: function (id, shape) {
/**
* Holds all the links incident with the current node.
* Do not use this property to manage the incoming links, use the appropriate add/remove methods instead.
*/
this.links = [];
/**
* Holds the links from the current one to another Node .
* Do not use this property to manage the incoming links, use the appropriate add/remove methods instead.
*/
this.outgoing = [];
/**
* Holds the links from another Node to the current one.
* Do not use this property to manage the incoming links, use the appropriate add/remove methods instead.
*/
this.incoming = [];
/**
* Holds the weight of this Node.
*/
this.weight = 1;
if (Utils.isDefined(id)) {
this.id = id;
}
else {
this.id = randomId();
}
if (Utils.isDefined(shape)) {
this.associatedShape = shape;
// transfer the shape's bounds to the runtime props
var b = shape.bounds();
this.width = b.width;
this.height = b.height;
this.x = b.x;
this.y = b.y;
}
else {
this.associatedShape = null;
}
/**
* The payload of the node.
* @type {null}
*/
this.data = null;
this.type = "Node";
this.shortForm = "Node '" + this.id + "'";
/**
* Whether this is an injected node during the analysis or layout process.
* @type {boolean}
*/
this.isVirtual = false;
},
/**
* Returns whether this node has no links attached.
*/
isIsolated: function () {
return Utils.isEmpty(this.links);
},
/**
* Gets or sets the bounding rectangle of this node.
* This should be considered as runtime data, the property is not hotlinked to a SVG item.
*/
bounds: function (r) {
if (!Utils.isDefined(r)) {
return new diagram.Rect(this.x, this.y, this.width, this.height);
}
this.x = r.x;
this.y = r.y;
this.width = r.width;
this.height = r.height;
},
/**
* Returns whether there is at least one link with the given (complementary) node. This can be either an
* incoming or outgoing link.
*/
isLinkedTo: function (node) {
var that = this;
return Utils.any(that.links, function (link) {
return link.getComplement(that) === node;
});
},
/**
* Gets the children of this node, defined as the adjacent nodes with a link from this node to the adjacent one.
* @returns {Array}
*/
getChildren: function () {
if (this.outgoing.length === 0) {
return [];
}
var children = [];
for (var i = 0, len = this.outgoing.length; i < len; i++) {
var link = this.outgoing[i];
children.push(link.getComplement(this));
}
return children;
},
/**
* Gets the parents of this node, defined as the adjacent nodes with a link from the adjacent node to this one.
* @returns {Array}
*/
getParents: function () {
if (this.incoming.length === 0) {
return [];
}
var parents = [];
for (var i = 0, len = this.incoming.length; i < len; i++) {
var link = this.incoming[i];
parents.push(link.getComplement(this));
}
return parents;
},
/**
* Returns a clone of the Node. Note that the identifier is not cloned since it's a different Node instance.
* @returns {Node}
*/
clone: function () {
var copy = new Node();
if (Utils.isDefined(this.weight)) {
copy.weight = this.weight;
}
if (Utils.isDefined(this.balance)) {
copy.balance = this.balance;
}
if (Utils.isDefined(this.owner)) {
copy.owner = this.owner;
}
copy.associatedShape = this.associatedShape;
copy.x = this.x;
copy.y = this.y;
copy.width = this.width;
copy.height = this.height;
return copy;
},
/**
* Returns whether there is a link from the current node to the given node.
*/
adjacentTo: function (node) {
return this.isLinkedTo(node) !== null;
},
/**
* Removes the given link from the link collection this node owns.
* @param link
*/
removeLink: function (link) {
if (link.source === this) {
Utils.remove(this.links, link);
Utils.remove(this.outgoing, link);
link.source = null;
}
if (link.target === this) {
Utils.remove(this.links, link);
Utils.remove(this.incoming, link);
link.target = null;
}
},
/**
* Returns whether there is a (outgoing) link from the current node to the given one.
*/
hasLinkTo: function (node) {
return Utils.any(this.outgoing, function (link) {
return link.target === node;
});
},
/**
* Returns the degree of this node, i.e. the sum of incoming and outgoing links.
*/
degree: function () {
return this.links.length;
},
/**
* Returns whether this node is either the source or the target of the given link.
*/
incidentWith: function (link) {
return contains(this.links, link);
},
/**
* Returns the links between this node and the given one.
*/
getLinksWith: function (node) {
return Utils.all(this.links, function (link) {
return link.getComplement(this) === node;
}, this);
},
/**
* Returns the nodes (either parent or child) which are linked to the current one.
*/
getNeighbors: function () {
var neighbors = [];
Utils.forEach(this.incoming, function (e) {
neighbors.push(e.getComplement(this));
}, this);
Utils.forEach(this.outgoing, function (e) {
neighbors.push(e.getComplement(this));
}, this);
return neighbors;
}
});
/**
* Defines a directed link (edge, connection) of a Graph.
*/
var Link = kendo.Class.extend({
init: function (source, target, id, connection) {
if (Utils.isUndefined(source)) {
throw "The source of the new link is not set.";
}
if (Utils.isUndefined(target)) {
throw "The target of the new link is not set.";
}
var sourceFound, targetFound;
if (Utils.isString(source)) {
sourceFound = new Node(source);
}
else {
sourceFound = source;
}
if (Utils.isString(target)) {
targetFound = new Node(target);
}
else {
targetFound = target;
}
this.source = sourceFound;
this.target = targetFound;
this.source.links.push(this);
this.target.links.push(this);
this.source.outgoing.push(this);
this.target.incoming.push(this);
if (Utils.isDefined(id)) {
this.id = id;
}
else {
this.id = randomId();
}
if (Utils.isDefined(connection)) {
this.associatedConnection = connection;
}
else {
this.associatedConnection = null;
}
this.type = "Link";
this.shortForm = "Link '" + this.source.id + "->" + this.target.id + "'";
},
/**
* Returns the complementary node of the given one, if any.
*/
getComplement: function (node) {
if (this.source !== node && this.target !== node) {
throw "The given node is not incident with this link.";
}
return this.source === node ? this.target : this.source;
},
/**
* Returns the overlap of the current link with the given one, if any.
*/
getCommonNode: function (link) {
if (this.source === link.source || this.source === link.target) {
return this.source;
}
if (this.target === link.source || this.target === link.target) {
return this.target;
}
return null;
},
/**
* Returns whether the current link is bridging the given nodes.
*/
isBridging: function (v1, v2) {
return this.source === v1 && this.target === v2 || this.source === v2 && this.target === v1;
},
/**
* Returns the source and target of this link as a tuple.
*/
getNodes: function () {
return [this.source, this.target];
},
/**
* Returns whether the given node is either the source or the target of the current link.
*/
incidentWith: function (node) {
return this.source === node || this.target === node;
},
/**
* Returns whether the given link is a continuation of the current one. This can be both
* via an incoming or outgoing link.
*/
adjacentTo: function (link) {
return contains(this.source.links, link) || contains(this.target.links, link);
},
/**
* Changes the source-node of this link.
*/
changeSource: function (node) {
Utils.remove(this.source.links, this);
Utils.remove(this.source.outgoing, this);
node.links.push(this);
node.outgoing.push(this);
this.source = node;
},
/**
* Changes the target-node of this link.
* @param node
*/
changeTarget: function (node) {
Utils.remove(this.target.links, this);
Utils.remove(this.target.incoming, this);
node.links.push(this);
node.incoming.push(this);
this.target = node;
},
/**
* Changes both the source and the target nodes of this link.
*/
changesNodes: function (v, w) {
if (this.source === v) {
this.changeSource(w);
}
else if (this.target === v) {
this.changeTarget(w);
}
},
/**
* Reverses the direction of this link.
*/
reverse: function () {
var oldSource = this.source;
var oldTarget = this.target;
this.source = oldTarget;
Utils.remove(oldSource.outgoing, this);
this.source.outgoing.push(this);
this.target = oldSource;
Utils.remove(oldTarget.incoming, this);
this.target.incoming.push(this);
return this;
},
/**
* Ensures that the given target defines the endpoint of this link.
*/
directTo: function (target) {
if (this.source !== target && this.target !== target) {
throw "The given node is not incident with this link.";
}
if (this.target !== target) {
this.reverse();
}
},
/**
* Returns a reversed clone of this link.
*/
createReverseEdge: function () {
var r = this.clone();
r.reverse();
r.reversed = true;
return r;
},
/**
* Returns a clone of this link.
*/
clone: function () {
var clone = new Link(this.source, this.target);
return clone;
}
});
/*--------------Graph structure---------------------------------*/
/**
* Defines a directed graph structure.
* Note that the incidence structure resides in the nodes through the incoming and outgoing links collection, rahter than
* inside the Graph.
*/
var Graph = kendo.Class.extend({
init: function (idOrDiagram) {
/**
* The links or edge collection of this Graph.
* @type {Array}
*/
this.links = [];
/**
* The node or vertex collection of this Graph.
* @type {Array}
*/
this.nodes = [];
/**
* The optional reference to the Diagram on which this Graph is based.
* @type {null}
*/
this.diagram = null;
/**
* The root of this Graph. If not set explicitly the first Node with zero incoming links will be taken.
* @type {null}
* @private
*/
this._root = null;
if (Utils.isDefined(idOrDiagram)) {
if (Utils.isString(idOrDiagram)) {
this.id = idOrDiagram;
}
else {
this.diagram = idOrDiagram;
this.id = idOrDiagram.id;
}
}
else {
this.id = randomId();
}
/**
* The bounds of this graph if the nodes have spatial extension defined.
* @type {Rect}
*/
this.bounds = new Rect();
// keeps track whether the children & parents have been created
this._hasCachedRelationships = false;
this.type = "Graph";
},
/**
* Caches the relational information of parents and children in the 'parents' and 'children'
* properties.
* @param forceRebuild If set to true the relational info will be rebuild even if already present.
*/
cacheRelationships: function (forceRebuild) {
if (Utils.isUndefined(forceRebuild)) {
forceRebuild = false;
}
if (this._hasCachedRelationships && !forceRebuild) {
return;
}
for (var i = 0, len = this.nodes.length; i < len; i++) {
var node = this.nodes[i];
node.children = this.getChildren(node);
node.parents = this.getParents(node);
}
this._hasCachedRelationships = true;
},
/**
* Assigns tree-levels to the nodes assuming this is a tree graph.
* If not connected or not a tree the process will succeed but
* will have little meaning.
* @param startNode The node from where the level numbering starts, usually the root of the tree.
* @param visited The collection of visited nodes.
* @param offset The offset or starting counter of the level info.
*/
assignLevels: function (startNode, offset, visited) {
if (!startNode) {
throw "Start node not specified.";
}
if (Utils.isUndefined(offset)) {
offset = 0;
}
// if not done before, cache the parents and children
this.cacheRelationships();
if (Utils.isUndefined(visited)) {
visited = new Dictionary();
Utils.forEach(this.nodes, function (n) {
visited.add(n, false);
});
}
visited.set(startNode, true);
startNode.level = offset;
var children = startNode.children;
for (var i = 0, len = children.length; i < len; i++) {
var child = children[i];
if (!child || visited.get(child)) {
continue;
}
this.assignLevels(child, offset + 1, visited);
}
},
/**
* Gets or set the root of this graph.
* If not set explicitly the first Node with zero incoming links will be taken.
* @param value
* @returns {*}
*/
root: function (value) {
if (Utils.isUndefined(value)) {
if (!this._root) {
// TODO: better to use the longest path for the most probable root?
var found = Utils.first(this.nodes, function (n) {
return n.incoming.length === 0;
});
if (found) {
return found;
}
return Utils.first(this.nodes);
}
else {
return this._root;
}
}
else {
this._root = value;
}
},
/**
* Returns the connected components of this graph.
* Note that the returned graphs are made up of the nodes and links of this graph, i.e. a pointer to the items of this graph.
* If you alter the items of the components you'll alter the original graph and vice versa.
* @returns {Array}
*/
getConnectedComponents: function () {
this.componentIndex = 0;
this.setItemIndices();
var componentId = Utils.initArray(this.nodes.length, -1);
for (var v = 0; v < this.nodes.length; v++) {
if (componentId[v] === -1) {
this._collectConnectedNodes(componentId, v);
this.componentIndex++;
}
}
var components = [], i;
for (i = 0; i < this.componentIndex; ++i) {
components[i] = new Graph();
}
for (i = 0; i < componentId.length; ++i) {
var graph = components[componentId[i]];
graph.addNodeAndOutgoings(this.nodes[i]);
}
// sorting the components in decreasing order of node count
components.sort(function (a, b) {
return b.nodes.length - a.nodes.length;
});
return components;
},
_collectConnectedNodes: function (setIds, nodeIndex) {
setIds[nodeIndex] = this.componentIndex; // part of the current component
var node = this.nodes[nodeIndex];
Utils.forEach(node.links,
function (link) {
var next = link.getComplement(node);
var nextId = next.index;
if (setIds[nextId] === -1) {
this._collectConnectedNodes(setIds, nextId);
}
}, this);
},
/**
* Calculates the bounds of this Graph if the Nodes have spatial dimensions defined.
* @returns {Rect}
*/
calcBounds: function () {
if (this.isEmpty()) {
this.bounds = new Rect();
return this.bounds;
}
var b = null;
for (var i = 0, len = this.nodes.length; i < len; i++) {
var node = this.nodes[i];
if (!b) {
b = node.bounds();
}
else {
b = b.union(node.bounds());
}
}
this.bounds = b;
return this.bounds;
},
/**
* Creates a spanning tree for the current graph.
* Important: this will not return a spanning forest if the graph is disconnected.
* Prim's algorithm finds a minimum-cost spanning tree of an edge-weighted, connected, undirected graph;
* see http://en.wikipedia.org/wiki/Prim%27s_algorithm .
* @param root The root of the spanning tree.
* @returns {Graph}
*/
getSpanningTree: function (root) {
var tree = new Graph();
var map = new Dictionary(), source, target;
tree.root = root.clone();
tree.root.level = 0;
tree.root.id = root.id;
map.add(root, tree.root);
root.level = 0;
var visited = [];
var remaining = [];
tree.nodes.push(tree.root);
visited.push(root);
remaining.push(root);
var levelCount = 1;
while (remaining.length > 0) {
var next = remaining.pop();
for (var ni = 0; ni < next.links.length; ni++) {
var link = next.links[ni];
var cn = link.getComplement(next);
if (contains(visited, cn)) {
continue;
}
cn.level = next.level + 1;
if (levelCount < cn.level + 1) {
levelCount = cn.level + 1;
}
if (!contains(remaining, cn)) {
remaining.push(cn);
}
if (!contains(visited, cn)) {
visited.push(cn);
}
if (map.containsKey(next)) {
source = map.get(next);
}
else {
source = next.clone();
source.level = next.level;
source.id = next.id;
map.add(next, source);
}
if (map.containsKey(cn)) {
target = map.get(cn);
}
else {
target = cn.clone();
target.level = cn.level;
target.id = cn.id;
map.add(cn, target);
}
var newLink = new Link(source, target);
tree.addLink(newLink);
}
}
var treeLevels = [];
for (var i = 0; i < levelCount; i++) {
treeLevels.push([]);
}
Utils.forEach(tree.nodes, function (node) {
treeLevels[node.level].push(node);
});
tree.treeLevels = treeLevels;
tree.cacheRelationships();
return tree;
},
/**
* Returns a random node in this graph.
* @param excludedNodes The collection of nodes which should not be considered.
* @param incidenceLessThan The maximum degree or incidence the random node should have.
* @returns {*}
*/
takeRandomNode: function (excludedNodes, incidenceLessThan) {
if (Utils.isUndefined(excludedNodes)) {
excludedNodes = [];
}
if (Utils.isUndefined(incidenceLessThan)) {
incidenceLessThan = 4;
}
if (this.nodes.length === 0) {
return null;
}
if (this.nodes.length === 1) {
return contains(excludedNodes, this.nodes[0]) ? null : this.nodes[0];
}
var pool = $.grep(this.nodes, function (node) {
return !contains(excludedNodes, node) && node.degree() <= incidenceLessThan;
});
if (Utils.isEmpty(pool)) {
return null;
}
return pool[Utils.randomInteger(0, pool.length)];
},
/**
* Returns whether this is an empty graph.
*/
isEmpty: function () {
return Utils.isEmpty(this.nodes);
},
/**
* Checks whether the endpoints of the links are all in the nodes collection.
*/
isHealthy: function () {
return Utils.all(this.links, function (link) {
return contains(this.nodes, link.source) && contains(this.nodes, link.target);
}, this);
},
/**
* Gets the parents of this node, defined as the adjacent nodes with a link from the adjacent node to this one.
* @returns {Array}
*/
getParents: function (n) {
if (!this.hasNode(n)) {
throw "The given node is not part of this graph.";
}
return n.getParents();
},
/**
* Gets the children of this node, defined as the adjacent nodes with a link from this node to the adjacent one.
* @returns {Array}
*/
getChildren: function (n) {
if (!this.hasNode(n)) {
throw "The given node is not part of this graph.";
}
return n.getChildren();
},
/**
* Adds a new link to the graph between the given nodes.
*/
addLink: function (sourceOrLink, target, owner) {
if (Utils.isUndefined(sourceOrLink)) {
throw "The source of the link is not defined.";
}
if (Utils.isUndefined(target)) {
// can only be undefined if the first one is a Link
if (Utils.isDefined(sourceOrLink.type) && sourceOrLink.type === "Link") {
this.addExistingLink(sourceOrLink);
return;
}
else {
throw "The target of the link is not defined.";
}
}
var foundSource = this.getNode(sourceOrLink);
if (Utils.isUndefined(foundSource)) {
foundSource = this.addNode(sourceOrLink);
}
var foundTarget = this.getNode(target);
if (Utils.isUndefined(foundTarget)) {
foundTarget = this.addNode(target);
}
var newLink = new Link(foundSource, foundTarget);
if (Utils.isDefined(owner)) {
newLink.owner = owner;
}
/*newLink.source.outgoing.push(newLink);
newLink.source.links.push(newLink);
newLink.target.incoming.push(newLink);
newLink.target.links.push(newLink);*/
this.links.push(newLink);
return newLink;
},
/**
* Removes all the links in this graph.
*/
removeAllLinks: function () {
while (this.links.length > 0) {
var link = this.links[0];
this.removeLink(link);
}
},
/**
* Adds the given link to the current graph.
*/
addExistingLink: function (link) {
if (this.hasLink(link)) {
return;
}
this.links.push(link);
if (this.hasNode(link.source.id)) {
// priority to the existing node with the id even if other props are different
var s = this.getNode(link.source.id);
link.changeSource(s);
}
else {
this.addNode(link.source);
}
if (this.hasNode(link.target.id)) {
var t = this.getNode(link.target.id);
link.changeTarget(t);
}
else {
this.addNode(link.target);
}
/* if (!link.source.outgoing.contains(link)) {
link.source.outgoing.push(link);
}
if (!link.source.links.contains(link)) {
link.source.links.push(link);
}
if (!link.target.incoming.contains(link)) {
link.target.incoming.push(link);
}
if (!link.target.links.contains(link)) {
link.target.links.push(link);
}*/
},
/**
* Returns whether the given identifier or Link is part of this graph.
* @param linkOrId An identifier or a Link object.
* @returns {*}
*/
hasLink: function (linkOrId) {
if (Utils.isString(linkOrId)) {
return Utils.any(this.links, function (link) {
return link.id === linkOrId;
});
}
if (linkOrId.type === "Link") {
return contains(this.links, linkOrId);
}
throw "The given object is neither an identifier nor a Link.";
},
/**
* Gets the node with the specified Id or null if not part of this graph.
*/
getNode: function (nodeOrId) {
if (Utils.isUndefined(nodeOrId)) {
throw "No identifier or Node specified.";
}
if (Utils.isString(nodeOrId)) {
return Utils.find(this.nodes, function (n) {
return n.id == nodeOrId;
});
}
else {
if (this.hasNode(nodeOrId)) {
return nodeOrId;
}
else {
return null;
}
}
},
/**
* Returns whether the given node or node Id is part of this graph.
*/
hasNode: function (nodeOrId) {
if (Utils.isString(nodeOrId)) {
return Utils.any(this.nodes, function (n) {
return n.id === nodeOrId;
});
}
if (Utils.isObject(nodeOrId)) {
return Utils.any(this.nodes, function (n) {
return n === nodeOrId;
});
}
throw "The identifier should be a Node or the Id (string) of a node.";
},
/**
* Removes the given node from this graph.
* The node can be specified as an object or as an identifier (string).
*/
removeNode: function (nodeOrId) {
var n = nodeOrId;
if (Utils.isString(nodeOrId)) {
n = this.getNode(nodeOrId);
}
if (Utils.isDefined(n)) {
var links = n.links;
n.links = [];
for (var i = 0, len = links.length; i < len; i++) {
var link = links[i];
this.removeLink(link);
}
Utils.remove(this.nodes, n);
}
else {
throw "The identifier should be a Node or the Id (string) of a node.";
}
},
/**
* Returns whether the given nodes are connected with a least one link independently of the direction.
*/
areConnected: function (n1, n2) {
return Utils.any(this.links, function (link) {
return link.source == n1 && link.target == n2 || link.source == n2 && link.target == n1;
});
},
/**
* Removes the given link from this graph.
*/
removeLink: function (link) {
/* if (!this.links.contains(link)) {
throw "The given link is not part of the Graph.";
}
*/
Utils.remove(this.links, link);
Utils.remove(link.source.outgoing, link);
Utils.remove(link.source.links, link);
Utils.remove(link.target.incoming, link);
Utils.remove(link.target.links, link);
},
/**
* Adds a new node to this graph, if not already present.
* The node can be an existing Node or the identifier of a new node.
* No error is thrown if the node is already there and the existing one is returned.
*/
addNode: function (nodeOrId, layoutRect, owner) {
var newNode = null;
if (!Utils.isDefined(nodeOrId)) {
throw "No Node or identifier for a new Node is given.";
}
if (Utils.isString(nodeOrId)) {
if (this.hasNode(nodeOrId)) {
return this.getNode(nodeOrId);
}
newNode = new Node(nodeOrId);
}
else {
if (this.hasNode(nodeOrId)) {
return this.getNode(nodeOrId);
}
// todo: ensure that the param is a Node?
newNode = nodeOrId;
}
if (Utils.isDefined(layoutRect)) {
newNode.bounds(layoutRect);
}
if (Utils.isDefined(owner)) {
newNode.owner = owner;
}
this.nodes.push(newNode);
return newNode;
},
/**
* Adds the given Node and its outgoing links.
*/
addNodeAndOutgoings: function (node) {
if (!contains(this.nodes, node)) {
this.nodes.push(node);
}
var newLinks = node.outgoing;
node.outgoing = [];
Utils.forEach(newLinks, function (link) {
this.addExistingLink(link);
}, this);
},
/**
* Sets the 'index' property on the links and nodes of this graph.
*/
setItemIndices: function () {
var i;
for (i = 0; i < this.nodes.length; ++i) {
this.nodes[i].index = i;
}
for (i = 0; i < this.links.length; ++i) {
this.links[i].index = i;
}
},
/**
* Returns a clone of this graph.
*/
clone: function (saveMapping) {
var copy = new Graph();
var save = Utils.isDefined(saveMapping) && saveMapping === true;
if (save) {
copy.nodeMap = new Dictionary();
copy.linkMap = new Dictionary();
}
// we need a map even if the saveMapping is not set
var map = new Dictionary();
Utils.forEach(this.nodes, function (nOriginal) {
var nCopy = nOriginal.clone();
map.set(nOriginal, nCopy);
copy.nodes.push(nCopy);
if (save) {
copy.nodeMap.set(nCopy, nOriginal);
}
});
Utils.forEach(this.links, function (linkOriginal) {
if (map.containsKey(linkOriginal.source) && map.containsKey(linkOriginal.target)) {
var linkCopy = copy.addLink(map.get(linkOriginal.source), map.get(linkOriginal.target));
if (save) {
copy.linkMap.set(linkCopy, linkOriginal);
}
}
});
return copy;
},
/**
* The parsing allows a quick way to create graphs.
* - ["n1->n2", "n2->n3"]: creates the three nodes and adds the links
* - ["n1->n2", {id: "QSDF"}, "n2->n3"]: same as previous but also performs a deep extend of the link between n1 and n2 with the given object.
*/
linearize: function (addIds) {
return Graph.Utils.linearize(this, addIds);
},
/**
* Performs a depth-first traversal starting at the given node.
* @param startNode a node or id of a node in this graph
* @param action
*/
depthFirstTraversal: function (startNode, action) {
if (Utils.isUndefined(startNode)) {
throw "You need to supply a starting node.";
}
if (Utils.isUndefined(action)) {
throw "You need to supply an action.";
}
if (!this.hasNode(startNode)) {
throw "The given start-node is not part of this graph";
}
var foundNode = this.getNode(startNode);// case the given one is an Id
var visited = [];
this._dftIterator(foundNode, action, visited);
},
_dftIterator: function (node, action, visited) {
action(node);
visited.push(node);
var children = node.getChildren();
for (var i = 0, len = children.length; i < len; i++) {
var child = children[i];
if (contains(visited, child)) {
continue;
}
this._dftIterator(child, action, visited);
}
},
/**
* Performs a breadth-first traversal starting at the given node.
* @param startNode a node or id of a node in this graph
* @param action
*/
breadthFirstTraversal: function (startNode, action) {
if (Utils.isUndefined(startNode)) {
throw "You need to supply a starting node.";
}
if (Utils.isUndefined(action)) {
throw "You need to supply an action.";
}
if (!this.hasNode(startNode)) {
throw "The given start-node is not part of this graph";
}
var foundNode = this.getNode(startNode);// case the given one is an Id
var queue = new Queue();
var visited = [];
queue.enqueue(foundNode);
while (queue.length > 0) {
var node = queue.dequeue();
action(node);
visited.push(node);
var children = node.getChildren();
for (var i = 0, len = children.length; i < len; i++) {
var child = children[i];
if (contains(visited, child) || contains(queue, child)) {
continue;
}
queue.enqueue(child);
}
}
},
/**
* This is the classic Tarjan algorithm for strongly connected components.
* See e.g. http://en.wikipedia.org/wiki/Tarjan's_strongly_connected_components_algorithm
* @param excludeSingleItems Whether isolated nodes should be excluded from the analysis.
* @param node The start node from which the analysis starts.
* @param indices Numbers the nodes consecutively in the order in which they are discovered.
* @param lowLinks The smallest index of any node known to be reachable from the node, including the node itself
* @param connected The current component.
* @param stack The bookkeeping stack of things to visit.
* @param index The counter of visited nodes used to assign the indices.
* @private
*/
_stronglyConnectedComponents: function (excludeSingleItems, node, indices, lowLinks, connected, stack, index) {
indices.add(node, index);
lowLinks.add(node, index);
index++;
stack.push(node);
var children = node.getChildren(), next;
for (var i = 0, len = children.length; i < len; i++) {
next = children[i];
if (!indices.containsKey(next)) {
this._stronglyConnectedComponents(excludeSingleItems, next, indices, lowLinks, connected, stack, index);
lowLinks.add(node, Math.min(lowLinks.get(node), lowLinks.get(next)));
}
else if (contains(stack, next)) {
lowLinks.add(node, Math.min(lowLinks.get(node), indices.get(next)));
}
}
// If v is a root node, pop the stack and generate a strong component
if (lowLinks.get(node) === indices.get(node)) {
var component = [];
do {
next = stack.pop();
component.push(next);
}
while (next !== node);
if (!excludeSingleItems || (component.length > 1)) {
connected.push(component);
}
}
},
/**
* Returns the cycles found in this graph.
* The returned arrays consist of the nodes which are strongly coupled.
* @param excludeSingleItems Whether isolated nodes should be excluded.
* @returns {Array} The array of cycles found.
*/
findCycles: function (excludeSingleItems) {
if (Utils.isUndefined(excludeSingleItems)) {
excludeSingleItems = true;
}
var indices = new Dictionary();
var lowLinks = new Dictionary();
var connected = [];
var stack = [];
for (var i = 0, len = this.nodes.length; i < len; i++) {
var node = this.nodes[i];
if (indices.containsKey(node)) {
continue;
}
this._stronglyConnectedComponents(excludeSingleItems, node, indices, lowLinks, connected, stack, 0);
}
return connected;
},
/**
* Returns whether this graph is acyclic.
* @returns {*}
*/
isAcyclic: function () {
return Utils.isEmpty(this.findCycles());
},
/**
* Returns whether the given graph is a subgraph of this one.
* @param other Another graph instance.
*/
isSubGraph: function (other) {
var otherArray = other.linearize();
var thisArray = this.linearize();
return Utils.all(otherArray, function (s) {
return contains(thisArray, s);
});
},
/**
* Makes an acyclic graph from the current (connected) one.
* * @returns {Array} The reversed links.
*/
makeAcyclic: function () {
// if empty or almost empty
if (this.isEmpty() || this.nodes.length <= 1 || this.links.length <= 1) {
return [];
}
// singular case of just two nodes
if (this.nodes.length == 2) {
var result = [];
if (this.links.length > 1) {
var oneLink = this.links[0];
var oneNode = oneLink.source;
for (var i = 0, len = this.links.length; i < len; i++) {
var link = this.links[i];
if (link.source == oneNode) {
continue;
}
var rev = link.reverse();
result.push(rev);
}
}
return result;
}
var copy = this.clone(true); // copy.nodeMap tells you the mapping
var N = this.nodes.length;
var intensityCatalog = new Dictionary();
/**
* If there are both incoming and outgoing links this will return the flow intensity (out-in).
* Otherwise the node acts as a flow source with N specifying the (equal) intensity.
* @param node
* @returns {number}
*/
var flowIntensity = function (node) {
if (node.outgoing.length === 0) {
return (2 - N);
}
else if (node.incoming.length === 0) {
return (N - 2);
}
else {
return node.outgoing.length - node.incoming.length;
}
};
/**
* Collects the nodes with the same intensity.
* @param node
* @param intensityCatalog
*/
var catalogEqualIntensity = function (node, intensityCatalog) {
var intensity = flowIntensity(node, N);
if (!intensityCatalog.containsKey(intensity)) {
intensityCatalog.set(intensity, []);
}
intensityCatalog.get(intensity).push(node);
};
Utils.forEach(copy.nodes, function (v) {
catalogEqualIntensity(v, intensityCatalog);
});
var sourceStack = [];
var targetStack = [];
while (copy.nodes.length > 0) {
var source, target, intensity;
if (intensityCatalog.containsKey(2 - N)) {
var targets = intensityCatalog.get(2 - N); // nodes without outgoings
while (targets.length > 0) {
target = targets.pop();
for (var li = 0; li < target.links.length; li++) {
var targetLink = target.links[li];
source = targetLink.getComplement(target);
intensity = flowIntensity(source, N);
Utils.remove(intensityCatalog.get(intensity), source);
source.removeLink(targetLink);
catalogEqualIntensity(source, intensityCatalog);
}
Utils.remove(copy.nodes, target);
targetStack.unshift(target);
}
}
// move sources to sourceStack
if (intensityCatalog.containsKey(N - 2)) {
var sources = intensityCatalog.get(N - 2); // nodes without incomings
while (sources.length > 0) {
source = sources.pop();
for (var si = 0; si < source.links.length; si++) {
var sourceLink = source.links[si];
target = sourceLink.getComplement(source);
intensity = flowIntensity(target, N);
Utils.remove(intensityCatalog.get(intensity), target);
target.removeLink(sourceLink);
catalogEqualIntensity(target, intensityCatalog);
}
sourceStack.push(source);
Utils.remove(copy.nodes, source);
}
}
if (copy.nodes.length > 0) {
for (var k = N - 3; k > 2 - N; k--) {
if (intensityCatalog.containsKey(k) &&
intensityCatalog.get(k).length > 0) {
var maxdiff = intensityCatalog.get(k);
var v = maxdiff.pop();
for (var ri = 0; ri < v.links.length; ri++) {
var ril = v.links[ri];
var u = ril.getComplement(v);
intensity = flowIntensity(u, N);
Utils.remove(intensityCatalog.get(intensity), u);
u.removeLink(ril);
catalogEqualIntensity(u, intensityCatalog);
}
sourceStack.push(v);
Utils.remove(copy.nodes, v);
break;
}
}
}
}
sourceStack = sourceStack.concat(targetStack);
var vertexOrder = new Dictionary();
for (var kk = 0; kk < this.nodes.length; kk++) {
vertexOrder.set(copy.nodeMap.get(sourceStack[kk]), kk);
}
var reversedEdges = [];
Utils.forEach(this.links, function (link) {
if (vertexOrder.get(link.source) > vertexOrder.get(link.target)) {
link.reverse();
reversedEdges.push(link);
}
});
return reversedEdges;
}
});
/**
* A collection of predefined graphs for demo and testing purposes.
*/
Graph.Predefined = {
/**
* Eight-shapes graph all connected in a cycle.
* @returns {*}
* @constructor
*/
EightGraph: function () {
return Graph.Utils.parse([ "1->2", "2->3", "3->4", "4->1", "3->5", "5->6", "6->7", "7->3"]);
},
/**
* Creates a typical mindmap diagram.
* @returns {*}
* @constructor
*/
Mindmap: function () {
return Graph.Utils.parse(["0->1", "0->2", "0->3", "0->4", "0->5", "1->6", "1->7", "7->8", "2->9", "9->10", "9->11", "3->12",
"12->13", "13->14", "4->15", "4->16", "15->17", "15->18", "18->19", "18->20", "14->21", "14->22", "5->23", "23->24", "23->25", "6->26"]);
},
/**
* Three nodes connected in a cycle.
* @returns {*}
* @constructor
*/
ThreeGraph: function () {
return Graph.Utils.parse([ "1->2", "2->3", "3->1"]);
},
/**
* A tree with each node having two children.
* @param levels How many levels the binary tree should have.
* @returns {diagram.Graph}
* @constructor
*/
BinaryTree: function (levels) {
if (Utils.isUndefined(levels)) {
levels = 5;
}
return Graph.Utils.createBalancedTree(levels, 2);
},
/**
* A linear graph (discrete line segment).
* @param length How many segments (the node count is hence (length+1)).
* @returns {diagram.Graph}
* @constructor
*/
Linear: function (length) {
if (Utils.isUndefined(length)) {
length = 10;
}
return Graph.Utils.createBalancedTree(length, 1);
},
/**
* A standard tree-graph with the specified levels and children (siblings) count.
* Note that for a balanced tree of level N and sibling count s, counting the root as level zero:
* - NodeCount = (1-s^(N+1))/(1-s)]
* - LinkCount = s.(1-s^N)/(1-s)
* @param levels How many levels the tree should have.
* @param siblingsCount How many siblings each level should have.
* @returns {diagram.Graph}
* @constructor
*/
Tree: function (levels, siblingsCount) {
return Graph.Utils.createBalancedTree(levels, siblingsCount);
},
/**
* Creates a forest.
* Note that for a balanced forest of level N, sibling count s and tree count t, counting the root as level zero:
* - NodeCount = t.(1-s^(N+1))/(1-s)]
* - LinkCount = t.s.(1-s^N)/(1-s)
* @param levels How many levels the tree should have.
* @param siblingsCount How many siblings each level should have.
* @param trees The amount of trees the forest should have.
* @returns {diagram.Graph}
* @constructor
*/
Forest: function (levels, siblingsCount, trees) {
return Graph.Utils.createBalancedForest(levels, siblingsCount, trees);
},
/**
* A workflow-like graph with cycles.
* @returns {*}
* @constructor
*/
Workflow: function () {
return Graph.Utils.parse(
["0->1", "1->2", "2->3", "1->4", "4->3", "3->5", "5->6", "6->3", "6->7", "5->4"]
);
},
/**
* A grid graph with the direction of the links avoiding cycles.
* Node count: (n+1).(m+1)
* Link count: n.(m+1) + m.(n+1)
* @param n Horizontal count of grid cells. If zero this will result in a linear graph.
* @param m Vertical count of grid cells. If zero this will result in a linear graph.
* @constructor
*/
Grid: function (n, m) {
var g = new diagram.Graph();
if (n <= 0 && m <= 0) {
return g;
}
for (var i = 0; i < n + 1; i++) {
var previous = null;
for (var j = 0; j < m + 1; j++) {
// using x-y coordinates to name the nodes
var node = new Node(i.toString() + "." + j.toString());
g.addNode(node);
if (previous) {
g.addLink(previous, node);
}
if (i > 0) {
var left = g.getNode((i - 1).toString() + "." + j.toString());
g.addLink(left, node);
}
previous = node;
}
}
return g;
}
};
/**
* Graph generation and other utilities.
*/
Graph.Utils = {
/**
* The parsing allows a quick way to create graphs.
* - ["n1->n2", "n2->n3"]: creates the three nodes and adds the links
* - ["n1->n2", {id: "id177"}, "n2->n3"]: same as previous but also performs a deep extend of the link between n1 and n2 with the given object.
*/
parse: function (graphString) {
var previousLink, graph = new diagram.Graph(), parts = graphString.slice();
for (var i = 0, len = parts.length; i < len; i++) {
var part = parts[i];
if (Utils.isString(part)) // link spec
{
if (part.indexOf("->") < 0) {
throw "The link should be specified as 'a->b'.";
}
var p = part.split("->");
if (p.length != 2) {
throw "The link should be specified as 'a->b'.";
}
previousLink = new Link(p[0], p[1]);
graph.addLink(previousLink);
}
if (Utils.isObject(part)) {
if (!previousLink) {
throw "Specification found before Link definition.";
}
kendo.deepExtend(previousLink, part);
}
}
return graph;
},
/**
* Returns a linearized representation of the given Graph.
* See also the Graph.Utils.parse method for the inverse operation.
*/
linearize: function (graph, addIds) {
if (Utils.isUndefined(graph)) {
throw "Expected an instance of a Graph object in slot one.";
}
if (Utils.isUndefined(addIds)) {
addIds = false;
}
var lin = [];
for (var i = 0, len = graph.links.length; i < len; i++) {
var link = graph.links[i];
lin.push(link.source.id + "->" + link.target.id);
if (addIds) {
lin.push({id: link.id});
}
}
return lin;
},
/**
* The method used by the diagram creation to instantiate a shape.
* @param kendoDiagram The Kendo diagram where the diagram will be created.
* @param p The position at which to place the shape.
* @param shapeDefaults Optional Shape options.
* @param id Optional identifier of the shape.
* @returns {*}
* @private
*/
_addShape: function (kendoDiagram, p, id, shapeDefaults) {
if (Utils.isUndefined(p)) {
p = new diagram.Point(0, 0);
}
if (Utils.isUndefined(id)) {
id = randomId();
}
shapeDefaults = kendo.deepExtend({
width: 20,
height: 20,
id: id,
radius: 10,
fill: "#778899",
data: "circle",
undoable: false,
x: p.x,
y: p.y
}, shapeDefaults);
return kendoDiagram.addShape(shapeDefaults);
},
/**
* The method used by the diagram creation to instantiate a connection.
* @param diagram he Kendo diagram where the diagram will be created.
* @param from The source shape.
* @param to The target shape.
* @param options Optional Connection options.
* @returns {*}
* @private
*/
_addConnection: function (diagram, from, to, options) {
return diagram.connect(from, to, options);
},
/**
* Creates a diagram from the given Graph.
* @param diagram The Kendo diagram where the diagram will be created.
* @param graph The graph structure defining the diagram.
*/
createDiagramFromGraph: function (diagram, graph, doLayout, randomSize) {
if (Utils.isUndefined(diagram)) {
throw "The diagram surface is undefined.";
}
if (Utils.isUndefined(graph)) {
throw "No graph specification defined.";
}
if (Utils.isUndefined(doLayout)) {
doLayout = true;
}
if (Utils.isUndefined(randomSize)) {
randomSize = false;
}
var width = diagram.element.clientWidth || 200;
var height = diagram.element.clientHeight || 200;
var map = [], node, shape;
for (var i = 0, len = graph.nodes.length; i < len; i++) {
node = graph.nodes[i];
var p = node.position;
if (Utils.isUndefined(p)) {
if (Utils.isDefined(node.x) && Utils.isDefined(node.y)) {
p = new Point(node.x, node.y);
}
else {
p = new Point(Utils.randomInteger(10, width - 20), Utils.randomInteger(10, height - 20));
}
}
var opt = {};
if (node.id === "0") {
/* kendo.deepExtend(opt,
{
fill: "Orange",
data: 'circle',
width: 100,
height: 100,
center: new Point(50, 50)
});*/
}
else if (randomSize) {
kendo.deepExtend(opt, {
width: Math.random() * 150 + 20,
height: Math.random() * 80 + 50,
data: 'rectangle',
fill: {
color: "#778899"
}
});
}
shape = this._addShape(diagram, p, node.id, opt);
//shape.content(node.id);
var bounds = shape.bounds();
if (Utils.isDefined(bounds)) {
node.x = bounds.x;
node.y = bounds.y;
node.width = bounds.width;
node.height = bounds.height;
}
map[node.id] = shape;
}
for (var gli = 0; gli < graph.links.length; gli++) {
var link = graph.links[gli];
var sourceShape = map[link.source.id];
if (Utils.isUndefined(sourceShape)) {
continue;
}
var targetShape = map[link.target.id];
if (Utils.isUndefined(targetShape)) {
continue;
}
this._addConnection(diagram, sourceShape, targetShape, {id: link.id});
}
if (doLayout) {
var l = new diagram.SpringLayout(diagram);
l.layoutGraph(graph, {limitToView: false});
for (var shi = 0; shi < graph.nodes.length; shi++) {
node = graph.nodes[shi];
shape = map[node.id];
shape.bounds(new Rect(node.x, node.y, node.width, node.height));
}
}
},
/**
* Creates a balanced tree with the specified number of levels and siblings count.
* Note that for a balanced tree of level N and sibling count s, counting the root as level zero:
* - NodeCount = (1-s^(N+1))/(1-s)]
* - LinkCount = s.(1-s^N)/(1-s)
* @param levels How many levels the tree should have.
* @param siblingsCount How many siblings each level should have.
* @returns {diagram.Graph}
*/
createBalancedTree: function (levels, siblingsCount) {
if (Utils.isUndefined(levels)) {
levels = 3;
}
if (Utils.isUndefined(siblingsCount)) {
siblingsCount = 3;
}
var g = new diagram.Graph(), counter = -1, lastAdded = [], news;
if (levels <= 0 || siblingsCount <= 0) {
return g;
}
var root = new Node((++counter).toString());
g.addNode(root);
g.root = root;
lastAdded.push(root);
for (var i = 0; i < levels; i++) {
news = [];
for (var j = 0; j < lastAdded.length; j++) {
var parent = lastAdded[j];
for (var k = 0; k < siblingsCount; k++) {
var item = new Node((++counter).toString());
g.addLink(parent, item);
news.push(item);
}
}
lastAdded = news;
}
return g;
},
/**
* Creates a balanced tree with the specified number of levels and siblings count.
* Note that for a balanced forest of level N, sibling count s and tree count t, counting the root as level zero:
* - NodeCount = t.(1-s^(N+1))/(1-s)]
* - LinkCount = t.s.(1-s^N)/(1-s)
* @param levels How many levels the tree should have.
* @param siblingsCount How many siblings each level should have.
* @returns {diagram.Graph}
* @param treeCount The number of trees the forest should have.
*/
createBalancedForest: function (levels, siblingsCount, treeCount) {
if (Utils.isUndefined(levels)) {
levels = 3;
}
if (Utils.isUndefined(siblingsCount)) {
siblingsCount = 3;
}
if (Utils.isUndefined(treeCount)) {
treeCount = 5;
}
var g = new diagram.Graph(), counter = -1, lastAdded = [], news;
if (levels <= 0 || siblingsCount <= 0 || treeCount <= 0) {
return g;
}
for (var t = 0; t < treeCount; t++) {
var root = new Node((++counter).toString());
g.addNode(root);
lastAdded = [root];
for (var i = 0; i < levels; i++) {
news = [];
for (var j = 0; j < lastAdded.length; j++) {
var parent = lastAdded[j];
for (var k = 0; k < siblingsCount; k++) {
var item = new Node((++counter).toString());
g.addLink(parent, item);
news.push(item);
}
}
lastAdded = news;
}
}
return g;
},
/**
* Creates a random graph (uniform distribution) with the specified amount of nodes.
* @param nodeCount The amount of nodes the random graph should have.
* @param maxIncidence The maximum allowed degree of the nodes.
* @param isTree Whether the return graph should be a tree (default: false).
* @returns {diagram.Graph}
*/
createRandomConnectedGraph: function (nodeCount, maxIncidence, isTree) {
/* Swa's Mathematica export of random Bernoulli graphs
gr[n_,p_]:=Module[{g=RandomGraph[BernoulliGraphDistribution[n,p],VertexLabels->"Name",DirectedEdges->True]},
While[Not[ConnectedGraphQ[g]],g=RandomGraph[BernoulliGraphDistribution[n,p],VertexLabels->"Name",DirectedEdges->True]];g];
project[a_]:=("\""<>ToString[Part[#,1]]<>"->"<>ToString[Part[#,2]]<>"\"")& @ a;
export[g_]:=project/@ EdgeList[g]
g = gr[12,.1]
export [g]
*/
if (Utils.isUndefined(nodeCount)) {
nodeCount = 40;
}
if (Utils.isUndefined(maxIncidence)) {
maxIncidence = 4;
}
if (Utils.isUndefined(isTree)) {
isTree = false;
}
var g = new diagram.Graph(), counter = -1;
if (nodeCount <= 0) {
return g;
}
var root = new Node((++counter).toString());
g.addNode(root);
if (nodeCount === 1) {
return g;
}
if (nodeCount > 1) {
// random tree
for (var i = 1; i < nodeCount; i++) {
var poolNode = g.takeRandomNode([], maxIncidence);
if (!poolNode) {
//failed to find one so the graph will have less nodes than specified
break;
}
var newNode = g.addNode(i.toString());
g.addLink(poolNode, newNode);
}
if (!isTree && nodeCount > 1) {
var randomAdditions = Utils.randomInteger(1, nodeCount);
for (var ri = 0; ri < randomAdditions; ri++) {
var n1 = g.takeRandomNode([], maxIncidence);
var n2 = g.takeRandomNode([], maxIncidence);
if (n1 && n2 && !g.areConnected(n1, n2)) {
g.addLink(n1, n2);
}
}
}
return g;
}
},
/**
* Generates a random diagram.
* @param diagram The host diagram.
* @param shapeCount The number of shapes the random diagram should contain.
* @param maxIncidence The maximum degree the shapes can have.
* @param isTree Whether the generated diagram should be a tree
* @param layoutType The optional layout type to apply after the diagram is generated.
*/
randomDiagram: function (diagram, shapeCount, maxIncidence, isTree, randomSize) {
var g = kendo.dataviz.diagram.Graph.Utils.createRandomConnectedGraph(shapeCount, maxIncidence, isTree);
Graph.Utils.createDiagramFromGraph(diagram, g, false, randomSize);
}
};
kendo.deepExtend(diagram, {
init: function (element) {
kendo.init(element, diagram.ui);
},
Point: Point,
Intersect: Intersect,
Geometry: Geometry,
Rect: Rect,
Size: Size,
RectAlign: RectAlign,
Matrix: Matrix,
MatrixVector: MatrixVector,
normalVariable: normalVariable,
randomId: randomId,
Dictionary: Dictionary,
HashTable: HashTable,
Queue: Queue,
Set: Set,
Node: Node,
Link: Link,
Graph: Graph,
PathDefiner: PathDefiner
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var kendo = window.kendo,
Observable = kendo.Observable,
diagram = kendo.dataviz.diagram,
Class = kendo.Class,
deepExtend = kendo.deepExtend,
dataviz = kendo.dataviz,
Point = diagram.Point,
Rect = diagram.Rect,
RectAlign = diagram.RectAlign,
Matrix = diagram.Matrix,
Utils = diagram.Utils,
isUndefined = Utils.isUndefined,
isNumber = Utils.isNumber,
isString = Utils.isString,
MatrixVector = diagram.MatrixVector,
g = dataviz.geometry,
d = dataviz.drawing,
defined = dataviz.defined,
inArray = $.inArray;
// Constants ==============================================================
var TRANSPARENT = "transparent",
Markers = {
none: "none",
arrowStart: "ArrowStart",
filledCircle: "FilledCircle",
arrowEnd: "ArrowEnd"
},
DEFAULTWIDTH = 100,
DEFAULTHEIGHT = 100,
FULL_CIRCLE_ANGLE = 360,
START = "start",
END = "end",
WIDTH = "width",
HEIGHT = "height",
X = "x",
Y = "y";
diagram.Markers = Markers;
var Scale = Class.extend({
init: function (x, y) {
this.x = x;
this.y = y;
},
toMatrix: function () {
return Matrix.scaling(this.x, this.y);
},
toString: function () {
return kendo.format("scale({0},{1})", this.x, this.y);
},
invert: function() {
return new Scale(1/this.x, 1/this.y);
}
});
var Translation = Class.extend({
init: function (x, y) {
this.x = x;
this.y = y;
},
toMatrixVector: function () {
return new MatrixVector(0, 0, 0, 0, this.x, this.y);
},
toMatrix: function () {
return Matrix.translation(this.x, this.y);
},
toString: function () {
return kendo.format("translate({0},{1})", this.x, this.y);
},
plus: function (delta) {
this.x += delta.x;
this.y += delta.y;
},
times: function (factor) {
this.x *= factor;
this.y *= factor;
},
length: function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
normalize: function () {
if (this.Length === 0) {
return;
}
this.times(1 / this.length());
},
invert: function() {
return new Translation(-this.x, -this.y);
}
});
var Rotation = Class.extend({
init: function (angle, x, y) {
this.x = x || 0;
this.y = y || 0;
this.angle = angle;
},
toString: function () {
if (this.x && this.y) {
return kendo.format("rotate({0},{1},{2})", this.angle, this.x, this.y);
} else {
return kendo.format("rotate({0})", this.angle);
}
},
toMatrix: function () {
return Matrix.rotation(this.angle, this.x, this.y); // T*R*T^-1
},
center: function () {
return new Point(this.x, this.y);
},
invert: function() {
return new Rotation(FULL_CIRCLE_ANGLE - this.angle, this.x, this.y);
}
});
Rotation.create = function (rotation) {
return new Rotation(rotation.angle, rotation.x, rotation.y);
};
Rotation.parse = function (str) {
var values = str.slice(1, str.length - 1).split(","),
angle = values[0],
x = values[1],
y = values[2];
var rotation = new Rotation(angle, x, y);
return rotation;
};
var CompositeTransform = Class.extend({
init: function (x, y, scaleX, scaleY, angle, center) {
this.translate = new Translation(x, y);
if (scaleX !== undefined && scaleY !== undefined) {
this.scale = new Scale(scaleX, scaleY);
}
if (angle !== undefined) {
this.rotate = center ? new Rotation(angle, center.x, center.y) : new Rotation(angle);
}
},
toString: function () {
var toString = function (transform) {
return transform ? transform.toString() : "";
};
return toString(this.translate) +
toString(this.rotate) +
toString(this.scale);
},
render: function (visual) {
visual._transform = this;
visual._renderTransform();
},
toMatrix: function () {
var m = Matrix.unit();
if (this.translate) {
m = m.times(this.translate.toMatrix());
}
if (this.rotate) {
m = m.times(this.rotate.toMatrix());
}
if (this.scale) {
m = m.times(this.scale.toMatrix());
}
return m;
},
invert: function() {
var rotate = this.rotate ? this.rotate.invert() : undefined,
rotateMatrix = rotate ? rotate.toMatrix() : Matrix.unit(),
scale = this.scale ? this.scale.invert() : undefined,
scaleMatrix = scale ? scale.toMatrix() : Matrix.unit();
var translatePoint = new Point(-this.translate.x, -this.translate.y);
translatePoint = rotateMatrix.times(scaleMatrix).apply(translatePoint);
var translate = new Translation(translatePoint.x, translatePoint.y);
var transform = new CompositeTransform();
transform.translate = translate;
transform.rotate = rotate;
transform.scale = scale;
return transform;
}
});
var AutoSizeableMixin = {
_setScale: function() {
var options = this.options;
var originWidth = this._originWidth;
var originHeight = this._originHeight;
var scaleX = options.width / originWidth;
var scaleY = options.height / originHeight;
if (!isNumber(scaleX)) {
scaleX = 1;
}
if (!isNumber(scaleY)) {
scaleY = 1;
}
this._transform.scale = new Scale(scaleX, scaleY);
},
_setTranslate: function() {
var options = this.options;
var x = options.x || 0;
var y = options.y || 0;
this._transform.translate = new Translation(x, y);
},
_initSize: function() {
var options = this.options;
var transform = false;
if (options.autoSize !== false && (defined(options.width) || defined(options.height))) {
this._measure(true);
this._setScale();
transform = true;
}
if (defined(options.x) || defined(options.y)) {
this._setTranslate();
transform = true;
}
if (transform) {
this._renderTransform();
}
},
_updateSize: function(options) {
var update = false;
if (this.options.autoSize !== false && this._diffNumericOptions(options, [WIDTH, HEIGHT])) {
update = true;
this._measure(true);
this._setScale();
}
if (this._diffNumericOptions(options, [X, Y])) {
update = true;
this._setTranslate();
}
if (update) {
this._renderTransform();
}
return update;
}
};
var Element = Class.extend({
init: function (options) {
var element = this;
element.options = deepExtend({}, element.options, options);
element.id = element.options.id;
element._originSize = Rect.empty();
element._transform = new CompositeTransform();
},
visible: function (value) {
return this.drawingContainer().visible(value);
},
redraw: function (options) {
if (options && options.id) {
this.id = options.id;
}
},
position: function (x, y) {
var options = this.options;
if (!defined(x)) {
return new Point(options.x, options.y);
}
if (defined(y)) {
options.x = x;
options.y = y;
} else if (x instanceof Point) {
options.x = x.x;
options.y = x.y;
}
this._transform.translate = new Translation(options.x, options.y);
this._renderTransform();
},
rotate: function (angle, center) {
if (defined(angle)) {
this._transform.rotate = new Rotation(angle, center.x, center.y);
this._renderTransform();
}
return this._transform.rotate || new Rotation(0);
},
drawingContainer: function() {
return this.drawingElement;
},
_renderTransform: function () {
var matrix = this._transform.toMatrix();
this.drawingContainer().transform(new g.Matrix(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f));
},
_hover: function () {},
_diffNumericOptions: diffNumericOptions,
_measure: function (force) {
var rect;
if (!this._measured || force) {
var box = this._boundingBox() || new g.Rect();
var startPoint = box.topLeft();
rect = new Rect(startPoint.x, startPoint.y, box.width(), box.height());
this._originSize = rect;
this._originWidth = rect.width;
this._originHeight = rect.height;
this._measured = true;
} else {
rect = this._originSize;
}
return rect;
},
_boundingBox: function() {
return this.drawingElement.rawBBox();
}
});
var VisualBase = Element.extend({
init: function(options) {
Element.fn.init.call(this, options);
options = this.options;
options.fill = normalizeDrawingOptions(options.fill);
options.stroke = normalizeDrawingOptions(options.stroke);
},
options: {
stroke: {
color: "gray",
width: 1
},
fill: {
color: TRANSPARENT
}
},
fill: function(color, opacity) {
this._fill({
color: getColor(color),
opacity: opacity
});
},
stroke: function(color, width, opacity) {
this._stroke({
color: getColor(color),
width: width,
opacity: opacity
});
},
redraw: function (options) {
if (options) {
var stroke = options.stroke;
var fill = options.fill;
if (stroke) {
this._stroke(normalizeDrawingOptions(stroke));
}
if (fill) {
this._fill(normalizeDrawingOptions(fill));
}
Element.fn.redraw.call(this, options);
}
},
_hover: function (show) {
var drawingElement = this.drawingElement;
var options = this.options;
var hover = options.hover;
if (hover && hover.fill) {
var fill = show ? normalizeDrawingOptions(hover.fill) : options.fill;
drawingElement.fill(fill.color, fill.opacity);
}
},
_stroke: function(strokeOptions) {
var options = this.options;
deepExtend(options, {
stroke: strokeOptions
});
var stroke = options.stroke;
this.drawingElement.stroke(stroke.color, stroke.width, stroke.opacity);
},
_fill: function(fillOptions) {
var options = this.options;
deepExtend(options, {
fill: fillOptions
});
var fill = options.fill;
this.drawingElement.fill(fill.color, fill.opacity);
}
});
var TextBlock = VisualBase.extend({
init: function (options) {
this._textColor(options);
VisualBase.fn.init.call(this, options);
this._font();
this._initText();
this._initSize();
},
options: {
fontSize: 15,
fontFamily: "sans-serif",
stroke: {
width: 0
},
fill: {
color: "black"
},
autoSize: true
},
_initText: function() {
var options = this.options;
this.drawingElement = new d.Text(defined(options.text) ? options.text : "", new g.Point(), {
fill: options.fill,
stroke: options.stroke,
font: options.font
});
},
_textColor: function(options) {
if (options && options.color) {
deepExtend(options, {
fill: {
color: options.color
}
});
}
},
_font: function() {
var options = this.options;
if (options.fontFamily && defined(options.fontSize)) {
options.font = options.fontSize + "px " + options.fontFamily;
} else {
delete options.font;
}
},
content: function (text) {
return this.drawingElement.content(text);
},
redraw: function (options) {
if (options) {
var sizeChanged = false;
var textOptions = this.options;
this._textColor(options);
VisualBase.fn.redraw.call(this, options);
if (options.fontFamily || defined(options.fontSize)) {
deepExtend(textOptions, {
fontFamily: options.fontFamily,
fontSize: options.fontSize
});
this._font();
this.drawingElement.options.set("font", textOptions.font);
sizeChanged = true;
}
if (options.text) {
this.content(options.text);
sizeChanged = true;
}
if (!this._updateSize(options) && sizeChanged) {
this._initSize();
}
}
}
});
deepExtend(TextBlock.fn, AutoSizeableMixin);
var Rectangle = VisualBase.extend({
init: function (options) {
VisualBase.fn.init.call(this, options);
this._initPath();
this._setPosition();
},
_setPosition: function() {
var options = this.options;
var x = options.x;
var y = options.y;
if (defined(x) || defined(y)) {
this.position(x || 0, y || 0);
}
},
redraw: function (options) {
if (options) {
VisualBase.fn.redraw.call(this, options);
if (this._diffNumericOptions(options, [WIDTH, HEIGHT])) {
this._updatePath();
}
if (this._diffNumericOptions(options, [X, Y])) {
this._setPosition();
}
}
},
_initPath: function() {
var options = this.options;
var width = options.width;
var height = options.height;
var drawingElement = this.drawingElement = new d.Path({
fill: options.fill,
stroke: options.stroke
});
var points = this._points = [new g.Point(), new g.Point(width, 0),
new g.Point(width, height), new g.Point(0, height)];
drawingElement.moveTo(points[0]);
for (var i = 1; i < 4; i++) {
drawingElement.lineTo(points[i]);
}
drawingElement.close();
},
_updatePath: function() {
var points = this._points;
var sizeOptions = sizeOptionsOrDefault(this.options);
var width = sizeOptions.width;
var height = sizeOptions.height;
points[1].x = width;
points[3].y = height;
points[2].move(width, height);
}
});
var MarkerBase = VisualBase.extend({
init: function(options) {
VisualBase.fn.init.call(this, options);
var anchor = this.options.anchor;
this.anchor = new g.Point(anchor.x, anchor.y);
this.createElement();
},
options: {
stroke: {
color: TRANSPARENT,
width: 0
},
fill: {
color: "black"
}
},
_transformToPath: function(point, path) {
var transform = path.transform();
if (point && transform) {
point = point.transformCopy(transform);
}
return point;
},
redraw: function(options) {
if (options) {
if (options.position) {
this.options.position = options.position;
}
VisualBase.fn.redraw.call(this, options);
}
}
});
var CircleMarker = MarkerBase.extend({
options: {
radius: 4,
anchor: {
x: 0,
y: 0
}
},
createElement: function() {
var options = this.options;
this.drawingElement = new d.Circle(new g.Circle(this.anchor, options.radius), {
fill: options.fill,
stroke: options.stroke
});
},
positionMarker: function(path) {
var options = this.options;
var position = options.position;
var segments = path.segments;
var targetSegment;
var point;
if (position == START) {
targetSegment = segments[0];
} else {
targetSegment = segments[segments.length - 1];
}
if (targetSegment) {
point = this._transformToPath(targetSegment.anchor(), path);
this.drawingElement.transform(g.transform().translate(point.x, point.y));
}
}
});
var ArrowMarker = MarkerBase.extend({
options: {
path: "M 0 0 L 10 5 L 0 10 L 3 5 z" ,
anchor: {
x: 10,
y: 5
}
},
createElement: function() {
var options = this.options;
this.drawingElement = d.Path.parse(options.path, {
fill: options.fill,
stroke: options.stroke
});
},
positionMarker: function(path) {
var points = this._linePoints(path);
var start = points.start;
var end = points.end;
var transform = g.transform();
if (start) {
transform.rotate(lineAngle(start, end), end);
}
if (end) {
var anchor = this.anchor;
var translate = end.clone().translate(-anchor.x, -anchor.y);
transform.translate(translate.x, translate.y);
}
this.drawingElement.transform(transform);
},
_linePoints: function(path) {
var options = this.options;
var segments = path.segments;
var startPoint, endPoint, targetSegment;
if (options.position == START) {
targetSegment = segments[0];
if (targetSegment) {
endPoint = targetSegment.anchor();
startPoint = targetSegment.controlOut();
var nextSegment = segments[1];
if (!startPoint && nextSegment) {
startPoint = nextSegment.anchor();
}
}
} else {
targetSegment = segments[segments.length - 1];
if (targetSegment) {
endPoint = targetSegment.anchor();
startPoint = targetSegment.controlIn();
var prevSegment = segments[segments.length - 2];
if (!startPoint && prevSegment) {
startPoint = prevSegment.anchor();
}
}
}
if (endPoint) {
return {
start: this._transformToPath(startPoint, path),
end: this._transformToPath(endPoint, path)
};
}
}
});
var MarkerPathMixin = {
_getPath: function(position) {
var path = this.drawingElement;
if (path instanceof d.MultiPath) {
if (position == START) {
path = path.paths[0];
} else {
path = path.paths[path.paths.length - 1];
}
}
if (path && path.segments.length) {
return path;
}
},
_removeMarker: function(position) {
var marker = this._markers[position];
if (marker) {
this.drawingContainer().remove(marker.drawingElement);
delete this._markers[position];
}
},
_createMarkers: function() {
var options = this.options;
var startCap = options.startCap;
var endCap = options.endCap;
this._markers = {};
this._markers[START] = this._createMarker(startCap, START);
this._markers[END] = this._createMarker(endCap, END);
},
_createMarker: function(type, position) {
var path = this._getPath(position);
var markerType, marker;
if (!path) {
this._removeMarker(position);
return;
}
if (type == Markers.filledCircle) {
markerType = CircleMarker;
} else if (type == Markers.arrowStart || type == Markers.arrowEnd){
markerType = ArrowMarker;
} else {
this._removeMarker(position);
}
if (markerType) {
marker = new markerType({
position: position
});
marker.positionMarker(path);
this.drawingContainer().append(marker.drawingElement);
return marker;
}
},
_positionMarker : function(position) {
var marker = this._markers[position];
if (marker) {
var path = this._getPath(position);
if (path) {
marker.positionMarker(path);
} else {
this._removeMarker(position);
}
}
},
_capMap: {
start: "startCap",
end: "endCap"
},
_redrawMarker: function(pathChange, position, options) {
var pathOptions = this.options;
var cap = this._capMap[position];
var optionsCap = options[cap];
var created = false;
if (optionsCap && pathOptions[cap] != optionsCap) {
pathOptions[cap] = optionsCap;
this._removeMarker(position);
this._markers[position] = this._createMarker(optionsCap, position);
created = true;
} else if (pathChange && !this._markers[position] && pathOptions[cap]) {
this._markers[position] = this._createMarker(pathOptions[cap], position);
created = true;
}
return created;
},
_redrawMarkers: function (pathChange, options) {
if (!this._redrawMarker(pathChange, START, options) && pathChange) {
this._positionMarker(START);
}
if (!this._redrawMarker(pathChange, END, options) && pathChange) {
this._positionMarker(END);
}
}
};
var Path = VisualBase.extend({
init: function (options) {
VisualBase.fn.init.call(this, options);
this.container = new d.Group();
this._createElements();
this._initSize();
},
options: {
autoSize: true
},
drawingContainer: function() {
return this.container;
},
data: function (value) {
var options = this.options;
if (value) {
if (options.data != value) {
options.data = value;
this._setData(value);
this._initSize();
this._redrawMarkers(true, {});
}
} else {
return options.data;
}
},
redraw: function (options) {
if (options) {
VisualBase.fn.redraw.call(this, options);
var pathOptions = this.options;
var data = options.data;
if (defined(data) && pathOptions.data != data) {
pathOptions.data = data;
this._setData(data);
if (!this._updateSize(options)) {
this._initSize();
}
this._redrawMarkers(true, options);
} else {
this._updateSize(options);
this._redrawMarkers(false, options);
}
}
},
_createElements: function() {
var options = this.options;
this.drawingElement = d.Path.parse(options.data || "", {
fill: options.fill,
stroke: options.stroke
});
this.container.append(this.drawingElement);
this._createMarkers();
},
_setData: function(data) {
var drawingElement = this.drawingElement;
var paths = d.Path.parse(data || "").paths;
drawingElement.paths = paths;
for (var i = 0; i < paths.length; i++) {
paths[i].observer = drawingElement;
}
drawingElement.geometryChange();
}
});
deepExtend(Path.fn, AutoSizeableMixin);
deepExtend(Path.fn, MarkerPathMixin);
var Line = VisualBase.extend({
init: function (options) {
VisualBase.fn.init.call(this, options);
this.container = new d.Group();
this._initPath();
this._createMarkers();
},
drawingContainer: function() {
return this.container;
},
redraw: function (options) {
if (options) {
options = options || {};
var from = options.from;
var to = options.to;
if (from) {
this.options.from = from;
}
if (to) {
this.options.to = to;
}
if (from || to) {
this._updatePath();
this._redrawMarkers(true, options);
} else {
this._redrawMarkers(false, options);
}
VisualBase.fn.redraw.call(this, options);
}
},
_initPath: function() {
var options = this.options;
var from = options.from || new Point();
var to = options.to || new Point();
var drawingElement = this.drawingElement = new d.Path({
fill: options.fill,
stroke: options.stroke
});
this._from = new g.Point(from.x, from.y);
this._to = new g.Point(to.x, to.y);
drawingElement.moveTo(this._from);
drawingElement.lineTo(this._to);
this.container.append(drawingElement);
},
_updatePath: function() {
var options = this.options;
var from = options.from;
var to = options.to;
this._from.x = from.x;
this._from.y = from.y;
this._to.move(to.x, to.y);
}
});
deepExtend(Line.fn, MarkerPathMixin);
var Polyline = VisualBase.extend({
init: function (options) {
VisualBase.fn.init.call(this, options);
this.container = new d.Group();
this._initPath();
this._createMarkers();
},
drawingContainer: function() {
return this.container;
},
points: function (points) {
var options = this.options;
if (points) {
options.points = points;
this._updatePath();
} else {
return options.points;
}
},
redraw: function (options) {
if (options) {
var points = options.points;
VisualBase.fn.redraw.call(this, options);
if (points && this._pointsDiffer(points)) {
this.points(points);
this._redrawMarkers(true, options);
} else {
this._redrawMarkers(false, options);
}
}
},
_initPath: function() {
var options = this.options;
this.drawingElement = new d.Path({
fill: options.fill,
stroke: options.stroke
});
this.container.append(this.drawingElement);
if (options.points) {
this._updatePath();
}
},
_pointsDiffer: function(points) {
var currentPoints = this.options.points;
var differ = currentPoints.length !== points.length;
if (!differ) {
for (var i = 0; i < points.length; i++) {
if (currentPoints[i].x !== points[i].x || currentPoints[i].y !== points[i].y) {
differ = true;
break;
}
}
}
return differ;
},
_updatePath: function() {
var drawingElement = this.drawingElement;
var options = this.options;
var points = options.points;
var segments = drawingElement.segments = [];
var point, segment;
for (var i = 0; i < points.length; i++) {
point = points[i];
segment = new d.Segment(new g.Point(point.x, point.y));
segment.observer = drawingElement;
segments.push(segment);
}
drawingElement.geometryChange();
},
options: {
points: []
}
});
deepExtend(Polyline.fn, MarkerPathMixin);
var Image = Element.extend({
init: function (options) {
Element.fn.init.call(this, options);
this._initImage();
},
redraw: function (options) {
if (options) {
if (options.source) {
this.drawingElement.src(options.source);
}
if (this._diffNumericOptions(options, [WIDTH, HEIGHT, X, Y])) {
this.drawingElement.rect(this._rect());
}
Element.fn.redraw.call(this, options);
}
},
_initImage: function() {
var options = this.options;
var rect = this._rect();
this.drawingElement = new d.Image(options.source, rect, {});
},
_rect: function() {
var sizeOptions = sizeOptionsOrDefault(this.options);
var origin = new g.Point(sizeOptions.x, sizeOptions.y);
var size = new g.Size(sizeOptions.width, sizeOptions.height);
return new g.Rect(origin, size);
}
});
var Group = Element.extend({
init: function (options) {
this.children = [];
Element.fn.init.call(this, options);
this.drawingElement = new d.Group();
this._initSize();
},
options: {
autoSize: false
},
append: function (visual) {
this.drawingElement.append(visual.drawingContainer());
this.children.push(visual);
this._childrenChange = true;
},
remove: function (visual) {
if (this._remove(visual)) {
this._childrenChange = true;
}
},
_remove: function(visual) {
var index = inArray(visual, this.children);
if (index >= 0) {
this.drawingElement.removeAt(index);
this.children.splice(index, 1);
return true;
}
},
clear: function () {
this.drawingElement.clear();
this.children = [];
this._childrenChange = true;
},
toFront: function (visuals) {
var visual;
for (var i = 0; i < visuals.length; i++) {
visual = visuals[i];
if (this._remove(visual)) {
this.append(visual);
}
}
},
//TO DO: add drawing group support for moving and inserting children
toBack: function (visuals) {
this._reorderChildren(visuals, 0);
},
toIndex: function (visuals, indices) {
this._reorderChildren(visuals, indices);
},
_reorderChildren: function(visuals, indices) {
var group = this.drawingElement;
var drawingChildren = group.children.slice(0);
var children = this.children;
var fixedPosition = isNumber(indices);
var i, index, toIndex, drawingElement, visual;
for (i = 0; i < visuals.length; i++) {
visual = visuals[i];
drawingElement = visual.drawingContainer();
index = inArray(visual, children);
if (index >= 0) {
drawingChildren.splice(index, 1);
children.splice(index, 1);
toIndex = fixedPosition ? indices : indices[i];
drawingChildren.splice(toIndex, 0, drawingElement);
children.splice(toIndex, 0, visual);
}
}
group.clear();
group.append.apply(group, drawingChildren);
},
redraw: function (options) {
if (options) {
if (this._childrenChange) {
this._childrenChange = false;
if (!this._updateSize(options)) {
this._initSize();
}
} else {
this._updateSize(options);
}
Element.fn.redraw.call(this, options);
}
},
_boundingBox: function() {
var children = this.children;
var boundingBox;
var visual, childBoundingBox;
for (var i = 0; i < children.length; i++) {
visual = children[i];
if (visual.visible() && visual._includeInBBox !== false) {
childBoundingBox = visual.drawingContainer().bbox(null);
if (childBoundingBox) {
if (boundingBox) {
boundingBox = Rect.union(boundingBox, childBoundingBox);
} else {
boundingBox = childBoundingBox;
}
}
}
}
return boundingBox;
}
});
deepExtend(Group.fn, AutoSizeableMixin);
var Circle = VisualBase.extend({
init: function (options) {
VisualBase.fn.init.call(this, options);
this._initCircle();
},
redraw: function (options) {
if (options) {
var circleOptions = this.options;
if (options.center) {
deepExtend(circleOptions, {
center: options.center
});
this._center.move(circleOptions.center.x, circleOptions.center.y);
}
if (this._diffNumericOptions(options, ["radius"])) {
this._circle.setRadius(circleOptions.radius);
}
VisualBase.fn.redraw.call(this, options);
}
},
_initCircle: function() {
var options = this.options;
var width = options.width;
var height = options.height;
var radius = options.radius;
if (!defined(radius)) {
if (!defined(width)) {
width = height;
}
if (!defined(height)) {
height = width;
}
options.radius = radius = Math.min(width, height) / 2;
}
var center = options.center || {x: radius, y: radius};
this._center = new g.Point(center.x, center.y);
this._circle = new g.Circle(this._center, radius);
this.drawingElement = new d.Circle(this._circle, {
fill: options.fill,
stroke: options.stroke
});
}
});
var Canvas = Class.extend({
init: function (element, options) {
options = options || {};
this.element = element;
this.surface = d.Surface.create(element, options);
if (kendo.isFunction(this.surface.translate)) {
this.translate = this._translate;
}
this.drawingElement = new d.Group();
this._viewBox = new Rect(0, 0, options.width, options.height);
this.size(this._viewBox);
},
bounds: function () {
var box = this.drawingElement.bbox();
return new Rect(0, 0, box.width(), box.height());
},
size: function (size) {
var viewBox = this._viewBox;
if (defined(size)) {
viewBox.width = size.width;
viewBox.height = size.height;
this.surface.setSize(size);
}
return {
width: viewBox.width,
height: viewBox.height
};
},
_translate: function (x, y) {
var viewBox = this._viewBox;
if (defined(x) && defined(y)) {
viewBox.x = x;
viewBox.y = y;
this.surface.translate({x: x, y: y});
}
return {
x: viewBox.x,
y: viewBox.y
};
},
draw: function() {
this.surface.draw(this.drawingElement);
},
append: function (visual) {
this.drawingElement.append(visual.drawingContainer());
return this;
},
remove: function (visual) {
this.drawingElement.remove(visual.drawingContainer());
},
insertBefore: function (visual, beforeVisual) {
},
clear: function () {
this.drawingElement.clear();
},
destroy: function(clearHtml) {
this.surface.destroy();
if(clearHtml) {
$(this.element).remove();
}
}
});
// Helper functions ===========================================
function sizeOptionsOrDefault(options) {
return {
x: options.x || 0,
y: options.y || 0,
width: options.width || 0,
height: options.height || 0
};
}
function normalizeDrawingOptions(options) {
if (options) {
var drawingOptions = options;
if (isString(drawingOptions)) {
drawingOptions = {
color: drawingOptions
};
}
if (drawingOptions.color) {
drawingOptions.color = getColor(drawingOptions.color);
}
return drawingOptions;
}
}
function getColor(value) {
var color;
if (value != TRANSPARENT) {
color = new dataviz.Color(value).toHex();
} else {
color = value;
}
return color;
}
function lineAngle(p1, p2) {
var xDiff = p2.x - p1.x;
var yDiff = p2.y - p1.y;
var angle = dataviz.util.deg(Math.atan2(yDiff, xDiff));
return angle;
}
function diffNumericOptions(options, fields) {
var elementOptions = this.options;
var hasChanges = false;
var value, field;
for (var i = 0; i < fields.length; i++) {
field = fields[i];
value = options[field];
if (isNumber(value) && elementOptions[field] !== value) {
elementOptions[field] = value;
hasChanges = true;
}
}
return hasChanges;
}
// Exports ================================================================
kendo.deepExtend(diagram, {
init: function (element) {
kendo.init(element, diagram.ui);
},
diffNumericOptions: diffNumericOptions,
Element: Element,
Scale: Scale,
Translation: Translation,
Rotation: Rotation,
Circle: Circle,
Group: Group,
Rectangle: Rectangle,
Canvas: Canvas,
Path: Path,
Line: Line,
MarkerBase: MarkerBase,
ArrowMarker: ArrowMarker,
CircleMarker: CircleMarker,
Polyline: Polyline,
CompositeTransform: CompositeTransform,
TextBlock: TextBlock,
Image: Image,
VisualBase: VisualBase
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var kendo = window.kendo,
dataviz = kendo.dataviz,
diagram = dataviz.diagram,
Class = kendo.Class,
Group = diagram.Group,
TextBlock = diagram.TextBlock,
Rect = diagram.Rect,
Rectangle = diagram.Rectangle,
Utils = diagram.Utils,
isUndefined = Utils.isUndefined,
Point = diagram.Point,
Circle = diagram.Circle,
Path = diagram.Path,
Ticker = diagram.Ticker,
deepExtend = kendo.deepExtend,
Movable = kendo.ui.Movable,
browser = kendo.support.browser,
defined = dataviz.defined,
proxy = $.proxy;
// Constants ==============================================================
var Cursors = {
arrow: "default",
grip: "pointer",
cross: "pointer",
add: "pointer",
move: "move",
select: "pointer",
south: "s-resize",
east: "e-resize",
west: "w-resize",
north: "n-resize",
rowresize: "row-resize",
colresize: "col-resize"
},
HITTESTDISTANCE = 10,
AUTO = "Auto",
TOP = "Top",
RIGHT = "Right",
LEFT = "Left",
BOTTOM = "Bottom",
DEFAULTCONNECTORNAMES = [TOP, RIGHT, BOTTOM, LEFT, AUTO],
ITEMROTATE = "itemRotate",
ITEMBOUNDSCHANGE = "itemBoundsChange",
ZOOMSTART = "zoomStart",
ZOOMEND = "zoomEnd",
SCROLL_MIN = -20000,
SCROLL_MAX = 20000,
FRICTION = 0.90,
FRICTION_MOBILE = 0.93,
VELOCITY_MULTIPLIER = 5,
TRANSPARENT = "transparent",
PAN = "pan";
diagram.Cursors = Cursors;
function selectSingle(item, meta) {
if (item.isSelected) {
if (meta.ctrlKey) {
item.select(false);
}
} else {
item.diagram.select(item, {addToSelection: meta.ctrlKey});
}
}
var PositionAdapter = kendo.Class.extend({
init: function (layoutState) {
this.layoutState = layoutState;
this.diagram = layoutState.diagram;
},
initState: function () {
this.froms = [];
this.tos = [];
this.subjects = [];
function pusher(id, bounds) {
var shape = this.diagram.getShapeById(id);
if (shape) {
this.subjects.push(shape);
this.froms.push(shape.bounds().topLeft());
this.tos.push(bounds.topLeft());
}
}
this.layoutState.nodeMap.forEach(pusher, this);
},
update: function (tick) {
if (this.subjects.length <= 0) {
return;
}
for (var i = 0; i < this.subjects.length; i++) {
//todo: define a Lerp function instead
this.subjects[i].position(
new Point(this.froms[i].x + (this.tos[i].x - this.froms[i].x) * tick, this.froms[i].y + (this.tos[i].y - this.froms[i].y) * tick)
);
}
}
});
var LayoutUndoUnit = Class.extend({
init: function (initialState, finalState, animate) {
if (isUndefined(animate)) {
this.animate = false;
}
else {
this.animate = animate;
}
this._initialState = initialState;
this._finalState = finalState;
this.title = "Diagram layout";
},
undo: function () {
this.setState(this._initialState);
},
redo: function () {
this.setState(this._finalState);
},
setState: function (state) {
var diagram = state.diagram;
if (this.animate) {
state.linkMap.forEach(
function (id, points) {
var conn = diagram.getShapeById(id);
conn.visible(false);
if (conn) {
conn.points(points);
}
}
);
var ticker = new Ticker();
ticker.addAdapter(new PositionAdapter(state));
ticker.onComplete(function () {
state.linkMap.forEach(
function (id) {
var conn = diagram.getShapeById(id);
conn.visible(true);
}
);
});
ticker.play();
}
else {
state.nodeMap.forEach(function (id, bounds) {
var shape = diagram.getShapeById(id);
if (shape) {
shape.position(bounds.topLeft());
}
});
state.linkMap.forEach(
function (id, points) {
var conn = diagram.getShapeById(id);
if (conn) {
conn.points(points);
}
}
);
}
}
});
var CompositeUnit = Class.extend({
init: function (unit) {
this.units = [];
this.title = "Composite unit";
if (unit !== undefined) {
this.units.push(unit);
}
},
add: function (undoUnit) {
this.units.push(undoUnit);
},
undo: function () {
for (var i = 0; i < this.units.length; i++) {
this.units[i].undo();
}
},
redo: function () {
for (var i = 0; i < this.units.length; i++) {
this.units[i].redo();
}
}
});
var ConnectionEditUnit = Class.extend({
init: function (item, redoSource, redoTarget) {
this.item = item;
this._redoSource = redoSource;
this._redoTarget = redoTarget;
this._undoSource = item.source();
this._undoTarget = item.target();
this.title = "Connection Editing";
},
undo: function () {
if (this._undoSource !== undefined) {
this.item.source(this._undoSource, false);
}
if (this._undoTarget !== undefined) {
this.item.target(this._undoTarget, false);
}
},
redo: function () {
if (this._redoSource !== undefined) {
this.item.source(this._redoSource, false);
}
if (this._redoTarget !== undefined) {
this.item.target(this._redoTarget, false);
}
}
});
var ConnectionEditUndoUnit = Class.extend({
init: function (item, undoSource, undoTarget) {
this.item = item;
this._undoSource = undoSource;
this._undoTarget = undoTarget;
this._redoSource = item.source();
this._redoTarget = item.target();
this.title = "Connection Editing";
},
undo: function () {
this.item.source(this._undoSource, false);
this.item.target(this._undoTarget, false);
},
redo: function () {
this.item.source(this._redoSource, false);
this.item.target(this._redoTarget, false);
}
});
var DeleteConnectionUnit = Class.extend({
init: function (connection) {
this.connection = connection;
this.diagram = connection.diagram;
this.targetConnector = connection.targetConnector;
this.title = "Delete connection";
},
undo: function () {
this.diagram.addConnection(this.connection, false);
},
redo: function () {
this.diagram.remove(this.connection, false);
}
});
var DeleteShapeUnit = Class.extend({
init: function (shape) {
this.shape = shape;
this.diagram = shape.diagram;
this.title = "Deletion";
},
undo: function () {
this.diagram.addShape(this.shape, {undoable: false});
this.shape.select(false);
},
redo: function () {
this.shape.select(false);
this.diagram.remove(this.shape, false);
}
});
/**
* Holds the undoredo state when performing a rotation, translation or scaling. The adorner is optional.
* @type {*}
*/
var TransformUnit = Class.extend({
init: function (shapes, undoStates, adorner) {
this.shapes = shapes;
this.undoStates = undoStates;
this.title = "Transformation";
this.redoStates = [];
this.adorner = adorner;
for (var i = 0; i < this.shapes.length; i++) {
var shape = this.shapes[i];
this.redoStates.push(shape.bounds());
}
},
undo: function () {
for (var i = 0; i < this.shapes.length; i++) {
var shape = this.shapes[i];
shape.bounds(this.undoStates[i]);
if (shape.hasOwnProperty("layout")) {
shape.layout(shape, this.redoStates[i], this.undoStates[i]);
}
}
if (this.adorner) {
this.adorner.refreshBounds();
this.adorner.refresh();
}
},
redo: function () {
for (var i = 0; i < this.shapes.length; i++) {
var shape = this.shapes[i];
shape.bounds(this.redoStates[i]);
// the 'layout' property, if implemented, lets the shape itself work out what to do with the new bounds
if (shape.hasOwnProperty("layout")) {
shape.layout(shape, this.undoStates[i], this.redoStates[i]);
}
}
if (this.adorner) {
this.adorner.refreshBounds();
this.adorner.refresh();
}
}
});
var AddConnectionUnit = Class.extend({
init: function (connection, diagram) {
this.connection = connection;
this.diagram = diagram;
this.title = "New connection";
},
undo: function () {
this.diagram.remove(this.connection, false);
},
redo: function () {
this.diagram.addConnection(this.connection, false);
}
});
var AddShapeUnit = Class.extend({
init: function (shape, diagram) {
this.shape = shape;
this.diagram = diagram;
this.title = "New shape";
},
undo: function () {
this.diagram.remove(this.shape, false);
},
redo: function () {
this.diagram.addShape(this.shape, {undoable: false});
}
});
var PanUndoUnit = Class.extend({
init: function (initialPosition, finalPosition, diagram) {
this.initial = initialPosition;
this.finalPos = finalPosition;
this.diagram = diagram;
this.title = "Pan Unit";
},
undo: function () {
this.diagram.pan(this.initial);
},
redo: function () {
this.diagram.pan(this.finalPos);
}
});
var RotateUnit = Class.extend({
init: function (adorner, shapes, undoRotates) {
this.shapes = shapes;
this.undoRotates = undoRotates;
this.title = "Rotation";
this.redoRotates = [];
this.redoAngle = adorner._angle;
this.adorner = adorner;
this.center = adorner._innerBounds.center();
for (var i = 0; i < this.shapes.length; i++) {
var shape = this.shapes[i];
this.redoRotates.push(shape.rotate().angle);
}
},
undo: function () {
var i, shape;
for (i = 0; i < this.shapes.length; i++) {
shape = this.shapes[i];
shape.rotate(this.undoRotates[i], this.center);
if (shape.hasOwnProperty("layout")) {
shape.layout(shape);
}
}
if (this.adorner) {
this.adorner._initialize();
this.adorner.refresh();
}
},
redo: function () {
var i, shape;
for (i = 0; i < this.shapes.length; i++) {
shape = this.shapes[i];
shape.rotate(this.redoRotates[i], this.center);
if (shape.hasOwnProperty("layout")) {
shape.layout(shape);
}
}
if (this.adorner) {
this.adorner._initialize();
this.adorner.refresh();
}
}
});
var ToFrontUnit = Class.extend({
init: function (diagram, items, initialIndices) {
this.diagram = diagram;
this.indices = initialIndices;
this.items = items;
this.title = "Rotate Unit";
},
undo: function () {
this.diagram._toIndex(this.items, this.indices);
},
redo: function () {
this.diagram.toFront(this.items, false);
}
});
var ToBackUnit = Class.extend({
init: function (diagram, items, initialIndices) {
this.diagram = diagram;
this.indices = initialIndices;
this.items = items;
this.title = "Rotate Unit";
},
undo: function () {
this.diagram._toIndex(this.items, this.indices);
},
redo: function () {
this.diagram.toBack(this.items, false);
}
});
/**
* Undo-redo service.
*/
var UndoRedoService = Class.extend({
init: function () {
this.stack = [];
this.index = 0;
this.capacity = 100;
},
/**
* Starts the collection of units. Add those with
* the addCompositeItem method and call commit. Or cancel to forget about it.
*/
begin: function () {
this.composite = new CompositeUnit();
},
/**
* Cancels the collection process of unit started with 'begin'.
*/
cancel: function () {
this.composite = undefined;
},
/**
* Commits a batch of units.
*/
commit: function () {
if (this.composite.units.length > 0) {
this._restart(this.composite);
}
this.composite = undefined;
},
/**
* Adds a unit as part of the begin-commit batch.
* @param undoUnit
*/
addCompositeItem: function (undoUnit) {
if (this.composite) {
this.composite.add(undoUnit);
} else {
this.add(undoUnit);
}
},
/**
* Standard addition of a unit. See also the batch version; begin-addCompositeUnit-commit methods.
* @param undoUnit The unit to be added.
* @param execute If false, the unit will be added but not executed.
*/
add: function (undoUnit, execute) {
this._restart(undoUnit, execute);
},
/**
* Returns the number of undoable unit in the stack.
* @returns {Number}
*/
count: function () {
return this.stack.length;
},
/**
* Rollback of the unit on top of the stack.
*/
undo: function () {
if (this.index > 0) {
this.index--;
this.stack[this.index].undo();
}
},
/**
* Redo of the last undone action.
*/
redo: function () {
if (this.stack.length > 0 && this.index < this.stack.length) {
this.stack[this.index].redo();
this.index++;
}
},
_restart: function (composite, execute) {
// throw away anything beyond this point if this is a new branch
this.stack.splice(this.index, this.stack.length - this.index);
this.stack.push(composite);
if (isUndefined(execute) || (execute && (execute === true))) {
this.redo();
}
else {
this.index++;
}
// check the capacity
if (this.stack.length > this.capacity) {
this.stack.splice(0, this.stack.length - this.capacity);
this.index = this.capacity; //points to the end of the stack
}
},
/**
* Clears the stack.
*/
clear: function () {
this.stack = [];
this.index = 0;
}
});
// Tools =========================================
var EmptyTool = Class.extend({
init: function (toolService) {
this.toolService = toolService;
},
start: function () {
},
move: function () {
},
end: function () {
},
tryActivate: function (p, meta) {
return false;
},
getCursor: function () {
return Cursors.arrow;
}
});
var ScrollerTool = EmptyTool.extend({
init: function (toolService) {
var tool = this;
var friction = kendo.support.mobileOS ? FRICTION_MOBILE : FRICTION;
EmptyTool.fn.init.call(tool, toolService);
var diagram = tool.toolService.diagram,
canvas = diagram.canvas;
var scroller = diagram.scroller = tool.scroller = $(diagram.scrollable).kendoMobileScroller({
friction: friction,
velocityMultiplier: VELOCITY_MULTIPLIER,
mousewheelScrolling: false,
zoom: false,
scroll: proxy(tool._move, tool)
}).data("kendoMobileScroller");
if (canvas.translate) {
tool.movableCanvas = new Movable(canvas.element);
}
var virtualScroll = function (dimension, min, max) {
dimension.makeVirtual();
dimension.virtualSize(min || SCROLL_MIN, max || SCROLL_MAX);
};
virtualScroll(scroller.dimensions.x);
virtualScroll(scroller.dimensions.y);
scroller.disable();
},
tryActivate: function (p, meta) {
return this.toolService.hoveredItem === undefined && meta.ctrlKey;
},
start: function () {
this.scroller.enable();
},
move: function () {
},//the tool itself should not handle the scrolling. Let kendo scroller take care of this part. Check _move
_move: function (args) {
var tool = this,
diagram = tool.toolService.diagram,
canvas = diagram.canvas,
scrollPos = new Point(args.scrollLeft, args.scrollTop);
if (canvas.translate) {
diagram._storePan(scrollPos.times(-1));
tool.movableCanvas.moveTo(scrollPos);
canvas.translate(scrollPos.x, scrollPos.y);
} else {
scrollPos = scrollPos.plus(diagram._pan.times(-1));
}
diagram.trigger(PAN, {pan: scrollPos});
},
end: function () {
this.scroller.disable();
},
getCursor: function () {
return Cursors.move;
}
});
/**
* The tool handling the transformations via the adorner.
* @type {*}
*/
var PointerTool = Class.extend({
init: function (toolService) {
this.toolService = toolService;
},
tryActivate: function (p, meta) {
return true; // the pointer tool is last and handles all others requests.
},
start: function (p, meta) {
var toolService = this.toolService,
diagram = toolService.diagram,
hoveredItem = toolService.hoveredItem,
selectable = diagram.options.selectable !== false;
if (hoveredItem) {
if (selectable) {
selectSingle(hoveredItem, meta);
}
if (hoveredItem.adorner) { //connection
this.adorner = hoveredItem.adorner;
this.handle = this.adorner._hitTest(p);
}
}
if (!this.handle) {
this.handle = diagram._resizingAdorner._hitTest(p);
if (this.handle) {
this.adorner = diagram._resizingAdorner;
}
}
if (this.adorner) {
this.adorner.start(p);
}
},
move: function (p) {
var that = this;
if (this.adorner) {
this.adorner.move(that.handle, p);
}
},
end: function (p, meta) {
var diagram = this.toolService.diagram,
service = this.toolService,
unit;
if (this.adorner) {
unit = this.adorner.stop();
if (unit) {
diagram.undoRedoService.add(unit, false);
}
}
if(service.hoveredItem) {
this.toolService.triggerClick({item: service.hoveredItem, point: p, meta: meta});
}
this.adorner = undefined;
this.handle = undefined;
},
getCursor: function (p) {
return this.toolService.hoveredItem ? this.toolService.hoveredItem._getCursor(p) : Cursors.arrow;
}
});
var SelectionTool = Class.extend({
init: function (toolService) {
this.toolService = toolService;
},
tryActivate: function (p, meta) {
var toolService = this.toolService;
var diagram = toolService.diagram;
var selectable = diagram.options.selectable !== false;
return selectable && !defined(toolService.hoveredItem) && !defined(toolService.hoveredAdorner);
},
start: function (p) {
var diagram = this.toolService.diagram;
diagram.deselect();
diagram.selector.start(p);
},
move: function (p) {
var diagram = this.toolService.diagram;
diagram.selector.move(p);
},
end: function (p, meta) {
var diagram = this.toolService.diagram, hoveredItem = this.toolService.hoveredItem;
var rect = diagram.selector.bounds();
if ((!hoveredItem || !hoveredItem.isSelected) && !meta.ctrlKey) {
diagram.deselect();
}
if (!rect.isEmpty()) {
diagram.selectArea(rect);
}
diagram.selector.end();
},
getCursor: function () {
return Cursors.arrow;
}
});
var ConnectionTool = Class.extend({
init: function (toolService) {
this.toolService = toolService;
this.type = "ConnectionTool";
},
tryActivate: function (p, meta) {
return this.toolService._hoveredConnector && !meta.ctrlKey; // connector it seems
},
start: function (p, meta) {
var diagram = this.toolService.diagram,
connector = this.toolService._hoveredConnector,
connection = diagram.connect(connector._c, p);
this.toolService._connectionManipulation(connection, connector._c.shape, true);
this.toolService._removeHover();
selectSingle(this.toolService.activeConnection, meta);
},
move: function (p) {
this.toolService.activeConnection.target(p);
return true;
},
end: function () {
var nc = this.toolService.activeConnection, hi = this.toolService.hoveredItem, connector = this.toolService._hoveredConnector;
if (connector && connector._c != nc.sourceConnector) {
nc.target(connector._c);
}
else if (hi) {
nc.target(hi);
}
this.toolService._connectionManipulation();
},
getCursor: function () {
return Cursors.arrow;
}
});
var ConnectionEditTool = Class.extend({
init: function (toolService) {
this.toolService = toolService;
this.type = "ConnectionTool";
},
tryActivate: function (p, meta) {
var toolService = this.toolService,
diagram = toolService.diagram,
selectable = diagram.options.selectable !== false,
item = toolService.hoveredItem,
isActive = selectable && item && item.path; // means it is connection
if (isActive) {
this._c = item;
}
return isActive;
},
start: function (p, meta) {
selectSingle(this._c, meta);
this.handle = this._c.adorner._hitTest(p);
this._c.adorner.start(p);
},
move: function (p) {
this._c.adorner.move(this.handle, p);
return true;
},
end: function (p, meta) {
this.toolService.triggerClick({item: this._c, point: p, meta: meta});
var unit = this._c.adorner.stop(p);
this.toolService.diagram.undoRedoService.add(unit, false);
},
getCursor: function () {
return Cursors.move;
}
});
function testKey(key, str) {
return str.charCodeAt(0) == key || str.toUpperCase().charCodeAt(0) == key;
}
/**
* The service managing the tools.
* @type {*}
*/
var ToolService = Class.extend({
init: function (diagram) {
this.diagram = diagram;
this.tools = [
new ScrollerTool(this),
new ConnectionEditTool(this),
new ConnectionTool(this),
new SelectionTool(this),
new PointerTool(this)
]; // the order matters.
this.activeTool = undefined;
},
start: function (p, meta) {
meta = deepExtend({}, meta);
if (this.activeTool) {
this.activeTool.end(p, meta);
}
this._updateHoveredItem(p);
this._activateTool(p, meta);
this.activeTool.start(p, meta);
this._updateCursor(p);
this.diagram.focus();
this.startPoint = p;
return true;
},
move: function (p, meta) {
meta = deepExtend({}, meta);
var updateHovered = true;
if (this.activeTool) {
updateHovered = this.activeTool.move(p, meta);
}
if (updateHovered) {
this._updateHoveredItem(p);
}
this._updateCursor(p);
return true;
},
end: function (p, meta) {
meta = deepExtend({}, meta);
if (this.activeTool) {
this.activeTool.end(p, meta);
}
this.activeTool = undefined;
this._updateCursor(p);
return true;
},
keyDown: function (key, meta) {
var diagram = this.diagram;
meta = deepExtend({ ctrlKey: false, metaKey: false, altKey: false }, meta);
if ((meta.ctrlKey || meta.metaKey) && !meta.altKey) {// ctrl or option
if (testKey(key, "a")) {// A: select all
diagram.selectAll();
return true;
} else if (testKey(key, "z")) {// Z: undo
diagram.undo();
return true;
} else if (testKey(key, "y")) {// y: redo
diagram.redo();
return true;
} else if (testKey(key, "c")) {
diagram.copy();
} else if (testKey(key, "x")) {
diagram.cut();
} else if (testKey(key, "v")) {
diagram.paste();
} else if (testKey(key, "l")) {
diagram.layout();
} else if (testKey(key, "d")) {
diagram.copy();
diagram.paste();
}
} else if (key === 46 || key === 8) {// del: deletion
diagram.remove(diagram.select(), true);
return true;
} else if (key === 27) {// ESC: stop any action
this._discardNewConnection();
diagram.deselect();
return true;
}
},
wheel: function (p, meta) {
var diagram = this.diagram,
delta = meta.delta,
z = diagram.zoom(),
options = diagram.options,
zoomRate = options.zoomRate,
zoomOptions = { point: p, meta: meta, zoom: z };
diagram.trigger(ZOOMSTART, zoomOptions);
if (delta < 0) {
z += zoomRate;
} else {
z -= zoomRate;
}
z = kendo.dataviz.round(Math.max(options.minZoom, Math.min(options.maxZoom, z)), 2);
zoomOptions.zoom = z;
diagram.zoom(z, zoomOptions);
diagram.trigger(ZOOMEND, zoomOptions);
return true;
},
setTool: function (tool, index) {
tool.toolService = this;
this.tools[index] = tool;
},
triggerClick: function(data) {
if(this.startPoint.equals(data.point)) {
this.diagram.trigger("click", data);
}
},
_discardNewConnection: function () {
if (this.newConnection) {
this.diagram.remove(this.newConnection);
this.newConnection = undefined;
}
},
_activateTool: function (p, meta) {
for (var i = 0; i < this.tools.length; i++) {
var tool = this.tools[i];
if (tool.tryActivate(p, meta)) {
this.activeTool = tool;
break; // activating the first available tool in the loop.
}
}
},
_updateCursor: function (p) {
var element = this.diagram.element;
var cursor = this.activeTool ? this.activeTool.getCursor(p) : (this.hoveredAdorner ? this.hoveredAdorner._getCursor(p) : (this.hoveredItem ? this.hoveredItem._getCursor(p) : Cursors.arrow));
element.css({cursor: cursor});
// workaround for IE 7 issue in which the elements overflow the container after setting cursor
if (browser.msie && browser.version == 7) {
element[0].style.cssText = element[0].style.cssText;
}
},
_connectionManipulation: function (connection, disabledShape, isNew) {
this.activeConnection = connection;
this.disabledShape = disabledShape;
if (isNew) {
this.newConnection = this.activeConnection;
} else {
this.newConnection = undefined;
}
},
_updateHoveredItem: function (p) {
var hit = this._hitTest(p);
if (hit != this.hoveredItem && (!this.disabledShape || hit != this.disabledShape)) {
if (this.hoveredItem) {
this.hoveredItem._hover(false);
}
if (hit && hit.options.enable) {
this.hoveredItem = hit; // Shape, connection or connector
this.hoveredItem._hover(true);
} else {
this.hoveredItem = undefined;
}
}
},
_removeHover: function () {
if (this.hoveredItem) {
this.hoveredItem._hover(false);
this.hoveredItem = undefined;
}
},
_hitTest: function (point) {
var hit, d = this.diagram, item, i;
// connectors
if (this._hoveredConnector) {
this._hoveredConnector._hover(false);
this._hoveredConnector = undefined;
}
if (d._connectorsAdorner._visible) {
hit = d._connectorsAdorner._hitTest(point);
if (hit) {
return hit;
}
}
hit = this.diagram._resizingAdorner._hitTest(point);
if (hit) {
this.hoveredAdorner = d._resizingAdorner;
if (hit.x !== 0 && hit.y !== 0) { // hit testing for resizers or rotator, otherwise if (0,0) than pass through.
return;
}
hit = undefined;
} else {
this.hoveredAdorner = undefined;
}
if (!this.activeTool || this.activeTool.type !== "ConnectionTool") {
var selectedConnections = []; // only the connections should have higher presence because the connection edit point is on top of connector.
// TODO: This should be reworked. The connection adorner should be one for all selected connections and should be hit tested prior the connections and shapes itself.
for (i = 0; i < d._selectedItems.length; i++) {
item = d._selectedItems[i];
if (item instanceof diagram.Connection) {
selectedConnections.push(item);
}
}
hit = this._hitTestItems(selectedConnections, point);
}
// Shapes | Connectors
return hit || this._hitTestItems(d.shapes, point) || this._hitTestItems(d.connections, point);
},
_hitTestItems: function (array, point) {
var i, item, hit;
for (i = array.length - 1; i >= 0; i--) {
item = array[i];
hit = item._hitTest(point);
if (hit) {
return hit;
}
}
}
});
// Routing =========================================
/**
* Base class for connection routers.
*/
var ConnectionRouterBase = kendo.Class.extend({
init: function () {
}
/*route: function (connection) {
},
hitTest: function (p) {
},
getBounds: function () {
}*/
});
/**
* Base class for polyline and cascading routing.
*/
var LinearConnectionRouter = ConnectionRouterBase.extend({
init: function (connection) {
var that = this;
ConnectionRouterBase.fn.init.call(that);
this.connection = connection;
},
/**
* Hit testing for polyline paths.
*/
hitTest: function (p) {
var rec = this.getBounds().inflate(10);
if (!rec.contains(p)) {
return false;
}
return diagram.Geometry.distanceToPolyline(p, this.connection.allPoints()) < HITTESTDISTANCE;
},
/**
* Bounds of a polyline.
* @returns {kendo.dataviz.diagram.Rect}
*/
getBounds: function () {
var points = this.connection.allPoints(),
s = points[0],
e = points[points.length - 1],
right = Math.max(s.x, e.x),
left = Math.min(s.x, e.x),
top = Math.min(s.y, e.y),
bottom = Math.max(s.y, e.y);
for (var i = 1; i < points.length - 1; ++i) {
right = Math.max(right, points[i].x);
left = Math.min(left, points[i].x);
top = Math.min(top, points[i].y);
bottom = Math.max(bottom, points[i].y);
}
return new Rect(left, top, right - left, bottom - top);
}
});
/**
* A simple poly-linear routing which does not alter the intermediate points.
* Does hold the underlying hit, bounds....logic.
* @type {*|Object|void|extend|Zepto.extend|b.extend}
*/
var PolylineRouter = LinearConnectionRouter.extend({
init: function (connection) {
var that = this;
LinearConnectionRouter.fn.init.call(that);
this.connection = connection;
},
route: function () {
// just keep the points as is
}
});
var CascadingRouter = LinearConnectionRouter.extend({
init: function (connection) {
var that = this;
LinearConnectionRouter.fn.init.call(that);
this.connection = connection;
},
route: function () {
var link = this.connection;
var start = this.connection.sourcePoint();
var end = this.connection.targetPoint(),
points = [start, start, end, end],
deltaX = end.x - start.x, // can be negative
deltaY = end.y - start.y,
l = points.length,
shiftX,
shiftY,
sourceConnectorName = null,
targetConnectorName = null;
if (Utils.isDefined(link._resolvedSourceConnector)) {
sourceConnectorName = link._resolvedSourceConnector.options.name;
}
if (Utils.isDefined(link._resolvedTargetConnector)) {
targetConnectorName = link._resolvedTargetConnector.options.name;
}
function startHorizontal() {
if (sourceConnectorName !== null) {
if (sourceConnectorName === RIGHT || sourceConnectorName === LEFT) {
return true;
}
if (sourceConnectorName === TOP || sourceConnectorName === BOTTOM) {
return false;
}
}
//fallback for custom connectors
return Math.abs(start.x - end.x) > Math.abs(start.y - end.y);
}
if (sourceConnectorName !== null && targetConnectorName !== null && Utils.contains(DEFAULTCONNECTORNAMES, sourceConnectorName) && Utils.contains(DEFAULTCONNECTORNAMES, targetConnectorName)) {
// custom routing for the default connectors
if (sourceConnectorName === TOP || sourceConnectorName == BOTTOM) {
if (targetConnectorName == TOP || targetConnectorName == BOTTOM) {
this.connection.points([new Point(start.x, start.y + deltaY / 2), new Point(end.x, start.y + deltaY / 2)]);
} else {
this.connection.points([new Point(start.x, start.y + deltaY)]);
}
} else { // LEFT or RIGHT
if (targetConnectorName == LEFT || targetConnectorName == RIGHT) {
this.connection.points([new Point(start.x + deltaX / 2, start.y), new Point(start.x + deltaX / 2, start.y + deltaY)]);
} else {
this.connection.points([new Point(end.x, start.y)]);
}
}
}
else { // general case for custom and floating connectors
this.connection.cascadeStartHorizontal = startHorizontal(this.connection);
// note that this is more generic than needed for only two intermediate points.
for (var k = 1; k < l - 1; ++k) {
if (link.cascadeStartHorizontal) {
if (k % 2 !== 0) {
shiftX = deltaX / (l / 2);
shiftY = 0;
}
else {
shiftX = 0;
shiftY = deltaY / ((l - 1) / 2);
}
}
else {
if (k % 2 !== 0) {
shiftX = 0;
shiftY = deltaY / (l / 2);
}
else {
shiftX = deltaX / ((l - 1) / 2);
shiftY = 0;
}
}
points[k] = new Point(points[k - 1].x + shiftX, points[k - 1].y + shiftY);
}
// need to fix the wrong 1.5 factor of the last intermediate point
k--;
if ((link.cascadeStartHorizontal && (k % 2 !== 0)) || (!link.cascadeStartHorizontal && (k % 2 === 0))) {
points[l - 2] = new Point(points[l - 1].x, points[l - 2].y);
}
else {
points[l - 2] = new Point(points[l - 2].x, points[l - 1].y);
}
this.connection.points([points[1], points[2]]);
}
}
});
// Adorners =========================================
var AdornerBase = Class.extend({
init: function (diagram, options) {
var that = this;
that.diagram = diagram;
that.options = deepExtend({}, that.options, options);
that.visual = new Group();
that.diagram._adorners.push(that);
},
refresh: function () {
}
});
var ConnectionEditAdorner = AdornerBase.extend({
init: function (connection, options) {
var that = this, diagram;
that.connection = connection;
diagram = that.connection.diagram;
that._ts = diagram.toolService;
AdornerBase.fn.init.call(that, diagram, options);
var sp = that.connection.sourcePoint();
var tp = that.connection.targetPoint();
that.spVisual = new Circle(deepExtend(that.options.handles, { center: sp }));
that.epVisual = new Circle(deepExtend(that.options.handles, { center: tp }));
that.visual.append(that.spVisual);
that.visual.append(that.epVisual);
},
options: {
handles: {}
},
_getCursor: function () {
return Cursors.move;
},
start: function (p) {
this.handle = this._hitTest(p);
this.startPoint = p;
this._initialSource = this.connection.source();
this._initialTarget = this.connection.target();
switch (this.handle) {
case -1:
if (this.connection.targetConnector) {
this._ts._connectionManipulation(this.connection, this.connection.targetConnector.shape);
}
break;
case 1:
if (this.connection.sourceConnector) {
this._ts._connectionManipulation(this.connection, this.connection.sourceConnector.shape);
}
break;
}
},
move: function (handle, p) {
switch (handle) {
case -1:
this.connection.source(p);
break;
case 1:
this.connection.target(p);
break;
default:
var delta = p.minus(this.startPoint);
this.startPoint = p;
if (!this.connection.sourceConnector) {
this.connection.source(this.connection.sourcePoint().plus(delta));
}
if (!this.connection.targetConnector) {
this.connection.target(this.connection.targetPoint().plus(delta));
}
break;
}
this.refresh();
return true;
},
stop: function (p) {
var ts = this.diagram.toolService, item = ts.hoveredItem, target;
if (ts._hoveredConnector) {
target = ts._hoveredConnector._c;
} else if (item && !item.line) {
target = item;
}
else {
target = p;
}
if (this.handle !== undefined) {
switch (this.handle) {
case -1:
this.connection.source(target);
break;
case 1:
this.connection.target(target);
break;
}
}
this.handle = undefined;
this._ts._connectionManipulation();
return new ConnectionEditUndoUnit(this.connection, this._initialSource, this._initialTarget);
},
_hitTest: function (p) {
var sp = this.connection.sourcePoint(),
tp = this.connection.targetPoint(),
rx = this.options.handles.width / 2,
ry = this.options.handles.height / 2,
sb = new Rect(sp.x, sp.y).inflate(rx, ry),
tb = new Rect(tp.x, tp.y).inflate(rx, ry);
return sb.contains(p) ? -1 : (tb.contains(p) ? 1 : 0);
},
refresh: function () {
this.spVisual.redraw({ center: this.diagram.modelToLayer(this.connection.sourcePoint()) });
this.epVisual.redraw({ center: this.diagram.modelToLayer(this.connection.targetPoint()) });
}
});
var ConnectorsAdorner = AdornerBase.extend({
init: function (diagram, options) {
var that = this;
AdornerBase.fn.init.call(that, diagram, options);
that._refreshHandler = function (e) {
if (e.item == that.shape) {
that.refresh();
}
};
},
show: function (shape) {
var that = this, len, i, ctr;
that._visible = true;
that.shape = shape;
that.diagram.bind(ITEMBOUNDSCHANGE, that._refreshHandler);
len = shape.connectors.length;
that.connectors = [];
that.visual.clear();
for (i = 0; i < len; i++) {
ctr = new ConnectorVisual(shape.connectors[i]);
that.connectors.push(ctr);
that.visual.append(ctr.visual);
}
that.visual.visible(true);
that.refresh();
},
destroy: function () {
var that = this;
that.diagram.unbind(ITEMBOUNDSCHANGE, that._refreshHandler);
that.shape = undefined;
that._visible = undefined;
that.visual.visible(false);
},
_hitTest: function (p) {
var ctr, i;
for (i = 0; i < this.connectors.length; i++) {
ctr = this.connectors[i];
if (ctr._hitTest(p)) {
ctr._hover(true);
this.diagram.toolService._hoveredConnector = ctr;
break;
}
}
},
refresh: function () {
if (this.shape) {
var bounds = this.shape.bounds();
bounds = this.diagram.modelToLayer(bounds);
this.visual.position(bounds.topLeft());
$.each(this.connectors, function () {
this.refresh();
});
}
}
});
function hitToOppositeSide(hit, bounds) {
var result;
if (hit.x == -1 && hit.y == -1) {
result = bounds.bottomRight();
} else if (hit.x == 1 && hit.y == 1) {
result = bounds.topLeft();
} else if (hit.x == -1 && hit.y == 1) {
result = bounds.topRight();
} else if (hit.x == 1 && hit.y == -1) {
result = bounds.bottomLeft();
} else if (hit.x === 0 && hit.y == -1) {
result = bounds.bottom();
} else if (hit.x === 0 && hit.y == 1) {
result = bounds.top();
} else if (hit.x == 1 && hit.y === 0) {
result = bounds.left();
} else if (hit.x == -1 && hit.y === 0) {
result = bounds.right();
}
return result;
}
var ResizingAdorner = AdornerBase.extend({
init: function (diagram, options) {
var that = this;
AdornerBase.fn.init.call(that, diagram, options);
that._manipulating = false;
that.map = [];
that.shapes = [];
that._initSelection();
that._createHandles();
that._createThumb();
that.redraw();
that.diagram.bind("select", function (e) {
that._initialize(e.selected);
});
that._refreshHandler = function () {
if (!that._internalChange) {
that.refreshBounds();
that.refresh();
}
};
that._rotatedHandler = function () {
if (that.shapes.length == 1) {
that._angle = that.shapes[0].rotate().angle;
}
that._refreshHandler();
};
that.diagram.bind(ITEMBOUNDSCHANGE, that._refreshHandler).bind(ITEMROTATE, that._rotatedHandler);
that.refreshBounds();
that.refresh();
},
options: {
editable: {
rotate: {
thumb: {
data: "M7.115,16C3.186,16,0,12.814,0,8.885C0,5.3,2.65,2.336,6.099,1.843V0l4.85,2.801l-4.85,2.8V3.758 c-2.399,0.473-4.21,2.588-4.21,5.126c0,2.886,2.34,5.226,5.226,5.226s5.226-2.34,5.226-5.226c0-1.351-0.513-2.582-1.354-3.51 l1.664-0.961c0.988,1.222,1.581,2.777,1.581,4.472C14.23,12.814,11.045,16,7.115,16L7.115,16z",
y: -30
}
}
},
selectable: {
stroke: {
color: "#778899",
width: 1,
dashType: "dash"
},
fill: {
color: TRANSPARENT
}
},
offset: 10
},
_initSelection: function() {
var that = this;
var diagram = that.diagram;
var selectable = diagram.options.selectable;
var options = deepExtend({}, that.options.selectable, selectable);
that.rect = new Rectangle(options);
that.visual.append(that.rect);
},
_createThumb: function() {
var that = this,
editable = that.options.editable,
rotate = editable.rotate;
if (editable && rotate) {
that.rotationThumb = new Path(rotate.thumb);
that.visual.append(that.rotationThumb);
}
},
_createHandles: function() {
var editable = this.options.editable,
handles, item, i, y, x;
if (editable && editable.resize) {
handles = editable.resize.handles;
for (x = -1; x <= 1; x++) {
for (y = -1; y <= 1; y++) {
if ((x !== 0) || (y !== 0)) { // (0, 0) element, (-1, -1) top-left, (+1, +1) bottom-right
item = new Rectangle(handles);
item.drawingElement._hover = proxy(this._hover, this);
this.map.push({ x: x, y: y, visual: item });
this.visual.append(item);
}
}
}
}
},
bounds: function (value) {
if (value) {
this._innerBounds = value.clone();
this._bounds = this.diagram.modelToLayer(value).inflate(this.options.offset, this.options.offset);
} else {
return this._bounds;
}
},
_hitTest: function (p) {
var tp = this.diagram.modelToLayer(p),
editable = this.options.editable,
i, hit, handleBounds, handlesCount = this.map.length, handle;
if (this._angle) {
tp = tp.clone().rotate(this._bounds.center(), this._angle);
}
if (editable && editable.rotate && this._rotationThumbBounds) {
if (this._rotationThumbBounds.contains(tp)) {
return new Point(-1, -2);
}
}
if (editable && editable.resize) {
for (i = 0; i < handlesCount; i++) {
handle = this.map[i];
hit = new Point(handle.x, handle.y);
handleBounds = this._getHandleBounds(hit); //local coordinates
handleBounds.offset(this._bounds.x, this._bounds.y);
if (handleBounds.contains(tp)) {
return hit;
}
}
}
if (this._bounds.contains(tp)) {
return new Point(0, 0);
}
},
_getHandleBounds: function (p) {
var editable = this.options.editable;
if (editable && editable.resize) {
var handles = editable.resize.handles || {},
w = handles.width,
h = handles.height,
r = new Rect(0, 0, w, h);
if (p.x < 0) {
r.x = - w / 2;
} else if (p.x === 0) {
r.x = Math.floor(this._bounds.width / 2) - w / 2;
} else if (p.x > 0) {
r.x = this._bounds.width + 1.0 - w / 2;
} if (p.y < 0) {
r.y = - h / 2;
} else if (p.y === 0) {
r.y = Math.floor(this._bounds.height / 2) - h / 2;
} else if (p.y > 0) {
r.y = this._bounds.height + 1.0 - h / 2;
}
return r;
}
},
_getCursor: function (point) {
var hit = this._hitTest(point);
if (hit && (hit.x >= -1) && (hit.x <= 1) && (hit.y >= -1) && (hit.y <= 1) && this.options.editable && this.options.editable.resize) {
var angle = this._angle;
if (angle) {
angle = 360 - angle;
hit.rotate(new Point(0, 0), angle);
hit = new Point(Math.round(hit.x), Math.round(hit.y));
}
if (hit.x == -1 && hit.y == -1) {
return "nw-resize";
}
if (hit.x == 1 && hit.y == 1) {
return "se-resize";
}
if (hit.x == -1 && hit.y == 1) {
return "sw-resize";
}
if (hit.x == 1 && hit.y == -1) {
return "ne-resize";
}
if (hit.x === 0 && hit.y == -1) {
return "n-resize";
}
if (hit.x === 0 && hit.y == 1) {
return "s-resize";
}
if (hit.x == 1 && hit.y === 0) {
return "e-resize";
}
if (hit.x == -1 && hit.y === 0) {
return "w-resize";
}
}
return this._manipulating ? Cursors.move : Cursors.select;
},
_initialize: function() {
var that = this, i, item,
items = that.diagram.select();
that.shapes = [];
for (i = 0; i < items.length; i++) {
item = items[i];
if (item instanceof diagram.Shape) {
that.shapes.push(item);
item._rotationOffset = new Point();
}
}
that._angle = that.shapes.length == 1 ? that.shapes[0].rotate().angle : 0;
that._startAngle = that._angle;
that._rotates();
that._positions();
that.refreshBounds();
that.refresh();
that.redraw();
},
_rotates: function () {
var that = this, i, shape;
that.initialRotates = [];
for (i = 0; i < that.shapes.length; i++) {
shape = that.shapes[i];
that.initialRotates.push(shape.rotate().angle);
}
},
_positions: function () {
var that = this, i, shape;
that.initialStates = [];
for (i = 0; i < that.shapes.length; i++) {
shape = that.shapes[i];
that.initialStates.push(shape.bounds());
}
},
_hover: function(value, element) {
var editable = this.options.editable;
if (editable && editable.resize) {
var handleOptions = editable.resize.handles,
hover = handleOptions.hover,
stroke = handleOptions.stroke,
fill = handleOptions.fill;
if (value && Utils.isDefined(hover.stroke)) {
stroke = deepExtend({}, stroke, hover.stroke);
}
if (value && Utils.isDefined(hover.fill)) {
fill = hover.fill;
}
element.stroke(stroke.color, stroke.width, stroke.opacity);
element.fill(fill.color, fill.opacity);
}
},
start: function (p) {
this._sp = p;
this._cp = p;
this._lp = p;
this._manipulating = true;
this._internalChange = true;
this.shapeStates = [];
for (var i = 0; i < this.shapes.length; i++) {
var shape = this.shapes[i];
this.shapeStates.push(shape.bounds());
}
},
redraw: function () {
var that = this, i, handle,
editable = that.options.editable,
resize = editable.resize,
rotate = editable.rotate,
visibleHandles = editable && resize ? true : false,
visibleThumb = editable && rotate ? true : false;
for (i = 0; i < this.map.length; i++) {
handle = this.map[i];
handle.visual.visible(visibleHandles);
}
if (that.rotationThumb) {
that.rotationThumb.visible(visibleThumb);
}
},
move: function (handle, p) {
var delta, dragging,
dtl = new Point(),
dbr = new Point(),
bounds, center, shape,
i, angle, newBounds,
changed = 0, staticPoint,
scaleX, scaleY;
if (handle.y === -2 && handle.x === -1) {
center = this._innerBounds.center();
this._angle = this._truncateAngle(Utils.findAngle(center, p));
for (i = 0; i < this.shapes.length; i++) {
shape = this.shapes[i];
angle = (this._angle + this.initialRotates[i] - this._startAngle) % 360;
shape.rotate(angle, center);
if (shape.hasOwnProperty("layout")) {
shape.layout(shape);
}
this._rotating = true;
}
this.refresh();
} else {
if (this.diagram.options.snap.enabled === true) {
var thr = this._truncateDistance(p.minus(this._lp));
// threshold
if (thr.x === 0 && thr.y === 0) {
this._cp = p;
return;
}
delta = thr;
this._lp = new Point(this._lp.x + thr.x, this._lp.y + thr.y);
} else {
delta = p.minus(this._cp);
}
if (handle.x === 0 && handle.y === 0) {
dbr = dtl = delta; // dragging
dragging = true;
} else {
if (this._angle) { // adjust the delta so that resizers resize in the correct direction after rotation.
delta.rotate(new Point(0, 0), this._angle);
}
if (handle.x == -1) {
dtl.x = delta.x;
} else if (handle.x == 1) {
dbr.x = delta.x;
}
if (handle.y == -1) {
dtl.y = delta.y;
} else if (handle.y == 1) {
dbr.y = delta.y;
}
}
if (!dragging) {
staticPoint = hitToOppositeSide(handle, this._innerBounds);
scaleX = (this._innerBounds.width + delta.x * handle.x) / this._innerBounds.width;
scaleY = (this._innerBounds.height + delta.y * handle.y) / this._innerBounds.height;
}
for (i = 0; i < this.shapes.length; i++) {
shape = this.shapes[i];
bounds = shape.bounds();
if (dragging) {
newBounds = this._displaceBounds(bounds, dtl, dbr, dragging);
} else {
newBounds = bounds.clone();
newBounds.scale(scaleX, scaleY, staticPoint, this._innerBounds.center(), shape.rotate().angle);
var newCenter = newBounds.center(); // fixes the new rotation center.
newCenter.rotate(bounds.center(), -this._angle);
newBounds = new Rect(newCenter.x - newBounds.width / 2, newCenter.y - newBounds.height / 2, newBounds.width, newBounds.height);
}
if (newBounds.width >= shape.options.minWidth && newBounds.height >= shape.options.minHeight) { // if we up-size very small shape
var oldBounds = bounds;
shape.bounds(newBounds);
if (shape.hasOwnProperty("layout")) {
shape.layout(shape, oldBounds, newBounds);
}
shape.rotate(shape.rotate().angle); // forces the rotation to update it's rotation center
changed += 1;
}
}
if (changed == i) {
newBounds = this._displaceBounds(this._innerBounds, dtl, dbr, dragging);
this.bounds(newBounds);
this.refresh();
}
this._positions();
}
this._cp = p;
},
_truncatePositionToGuides: function (bounds) {
if (this.diagram.ruler) {
return this.diagram.ruler.truncatePositionToGuides(bounds);
}
return bounds;
},
_truncateSizeToGuides: function (bounds) {
if (this.diagram.ruler) {
return this.diagram.ruler.truncateSizeToGuides(bounds);
}
return bounds;
},
_truncateAngle: function (a) {
var snapAngle = Math.max(this.diagram.options.snap.angle, 5);
return this.diagram.options.snap.enabled === true ? Math.floor((a % 360) / snapAngle) * snapAngle : (a % 360);
},
_truncateDistance: function (d) {
if (d instanceof diagram.Point) {
return new diagram.Point(this._truncateDistance(d.x), this._truncateDistance(d.y));
} else {
var snapSize = Math.max(this.diagram.options.snap.size, 5);
return this.diagram.options.snap.enabled === true ? Math.floor(d / snapSize) * snapSize : d;
}
},
_displaceBounds: function (bounds, dtl, dbr, dragging) {
var tl = bounds.topLeft().plus(dtl),
br = bounds.bottomRight().plus(dbr),
newBounds = Rect.fromPoints(tl, br),
newCenter;
if (!dragging) {
newCenter = newBounds.center();
newCenter.rotate(bounds.center(), -this._angle);
newBounds = new Rect(newCenter.x - newBounds.width / 2, newCenter.y - newBounds.height / 2, newBounds.width, newBounds.height);
}
return newBounds;
},
stop: function () {
var unit;
if (this._cp != this._sp) {
if (this._rotating) {
unit = new RotateUnit(this, this.shapes, this.initialRotates);
this._rotating = false;
} else {
if (this.diagram.ruler) {
for (var i = 0; i < this.shapes.length; i++) {
var shape = this.shapes[i];
var bounds = shape.bounds();
bounds = this._truncateSizeToGuides(this._truncatePositionToGuides(bounds));
shape.bounds(bounds);
this.refreshBounds();
this.refresh();
}
}
unit = new TransformUnit(this.shapes, this.shapeStates, this);
}
}
this._manipulating = undefined;
this._internalChange = undefined;
this._rotating = undefined;
return unit;
},
refreshBounds: function () {
var bounds = this.shapes.length == 1 ?
this.shapes[0].bounds().clone() :
this.diagram.boundingBox(this.shapes, true);
this.bounds(bounds);
},
refresh: function () {
var that = this, b, bounds;
if (this.shapes.length > 0) {
bounds = this.bounds();
this.visual.visible(true);
this.visual.position(bounds.topLeft());
$.each(this.map, function () {
b = that._getHandleBounds(new Point(this.x, this.y));
this.visual.position(b.topLeft());
});
this.visual.position(bounds.topLeft());
var center = new Point(bounds.width / 2, bounds.height / 2);
this.visual.rotate(this._angle, center);
this.rect.redraw({ width: bounds.width, height: bounds.height });
if (this.rotationThumb) {
var thumb = this.options.editable.rotate.thumb;
this._rotationThumbBounds = new Rect(bounds.center().x, bounds.y + thumb.y, 0, 0).inflate(thumb.width);
this.rotationThumb.redraw({ x: bounds.width / 2 - thumb.width / 2 });
}
} else {
this.visual.visible(false);
}
}
});
var Selector = Class.extend({
init: function (diagram) {
var selectable = diagram.options.selectable;
this.options = deepExtend({}, this.options, selectable);
this.visual = new Rectangle(this.options);
this.diagram = diagram;
},
options: {
stroke: {
color: "#778899",
width: 1,
dashType: "dash"
},
fill: {
color: TRANSPARENT
}
},
start: function (p) {
this._sp = this._ep = p;
this.refresh();
this.diagram._adorn(this, true);
},
end: function () {
this._sp = this._ep = undefined;
this.diagram._adorn(this, false);
},
bounds: function (value) {
if (value) {
this._bounds = value;
}
return this._bounds;
},
move: function (p) {
this._ep = p;
this.refresh();
},
refresh: function () {
if (this._sp) {
var visualBounds = Rect.fromPoints(this.diagram.modelToLayer(this._sp), this.diagram.modelToLayer(this._ep));
this.bounds(Rect.fromPoints(this._sp, this._ep));
this.visual.position(visualBounds.topLeft());
this.visual.redraw({ height: visualBounds.height + 1, width: visualBounds.width + 1 });
}
}
});
var ConnectorVisual = Class.extend({
init: function (connector) {
this.options = deepExtend({}, connector.options);
this._c = connector;
this.visual = new Circle(this.options);
this.refresh();
},
_hover: function (value) {
var options = this.options,
hover = options.hover,
stroke = options.stroke,
fill = options.fill;
if (value && Utils.isDefined(hover.stroke)) {
stroke = deepExtend({}, stroke, hover.stroke);
}
if (value && Utils.isDefined(hover.fill)) {
fill = hover.fill;
}
this.visual.redraw({
stroke: stroke,
fill: fill
});
},
refresh: function () {
var p = this._c.shape.diagram.modelToView(this._c.position()),
relative = p.minus(this._c.shape.bounds("transformed").topLeft()),
value = new Rect(p.x, p.y, 0, 0);
value.inflate(this.options.width / 2, this.options.height / 2);
this._visualBounds = value;
this.visual.redraw({ center: new Point(relative.x, relative.y) });
},
_hitTest: function (p) {
var tp = this._c.shape.diagram.modelToView(p);
return this._visualBounds.contains(tp);
}
});
deepExtend(diagram, {
CompositeUnit: CompositeUnit,
TransformUnit: TransformUnit,
PanUndoUnit: PanUndoUnit,
AddShapeUnit: AddShapeUnit,
AddConnectionUnit: AddConnectionUnit,
DeleteShapeUnit: DeleteShapeUnit,
DeleteConnectionUnit: DeleteConnectionUnit,
ConnectionEditAdorner: ConnectionEditAdorner,
UndoRedoService: UndoRedoService,
ResizingAdorner: ResizingAdorner,
Selector: Selector,
ToolService: ToolService,
ConnectorsAdorner: ConnectorsAdorner,
LayoutUndoUnit: LayoutUndoUnit,
ConnectionEditUnit: ConnectionEditUnit,
ToFrontUnit: ToFrontUnit,
ToBackUnit: ToBackUnit,
ConnectionRouterBase: ConnectionRouterBase,
PolylineRouter: PolylineRouter,
CascadingRouter: CascadingRouter,
SelectionTool: SelectionTool,
PointerTool: PointerTool,
ConnectionEditTool: ConnectionEditTool
});
})(window.kendo.jQuery);
(function ($, undefined) {
var kendo = window.kendo,
diagram = kendo.dataviz.diagram,
Graph = diagram.Graph,
Node = diagram.Node,
Link = diagram.Link,
deepExtend = kendo.deepExtend,
Size = diagram.Size,
Rect = diagram.Rect,
Dictionary = diagram.Dictionary,
Set = diagram.Set,
HyperTree = diagram.Graph,
Utils = diagram.Utils,
Point = diagram.Point,
EPSILON = 1e-06,
DEG_TO_RAD = Math.PI / 180,
contains = Utils.contains,
grep = $.grep;
/**
* Base class for layout algorithms.
* @type {*}
*/
var LayoutBase = kendo.Class.extend({
defaultOptions: {
type: "Tree",
subtype: "Down",
roots: null,
animate: false,
//-------------------------------------------------------------------
/**
* Force-directed option: whether the motion of the nodes should be limited by the boundaries of the diagram surface.
*/
limitToView: false,
/**
* Force-directed option: the amount of friction applied to the motion of the nodes.
*/
friction: 0.9,
/**
* Force-directed option: the optimal distance between nodes (minimum energy).
*/
nodeDistance: 50,
/**
* Force-directed option: the number of time things are being calculated.
*/
iterations: 300,
//-------------------------------------------------------------------
/**
* Tree option: the separation in one direction (depends on the subtype what direction this is).
*/
horizontalSeparation: 90,
/**
* Tree option: the separation in the complementary direction (depends on the subtype what direction this is).
*/
verticalSeparation: 50,
//-------------------------------------------------------------------
/**
* Tip-over tree option: children-to-parent vertical distance.
*/
underneathVerticalTopOffset: 15,
/**
* Tip-over tree option: children-to-parent horizontal distance.
*/
underneathHorizontalOffset: 15,
/**
* Tip-over tree option: leaf-to-next-branch vertical distance.
*/
underneathVerticalSeparation: 15,
//-------------------------------------------------------------------
/**
* Settings object to organize the different components of the diagram in a grid layout structure
*/
grid: {
/**
* The width of the grid in which components are arranged. Beyond this width a component will be on the next row.
*/
width: 1500,
/**
* The left offset of the grid.
*/
offsetX: 50,
/**
* The top offset of the grid.
*/
offsetY: 50,
/**
* The horizontal padding within a cell of the grid where a single component resides.
*/
componentSpacingX: 20,
/**
* The vertical padding within a cell of the grid where a single component resides.
*/
componentSpacingY: 20
},
//-------------------------------------------------------------------
/**
* Layered option: the separation height/width between the layers.
*/
layerSeparation: 50,
/**
* Layered option: how many rounds of shifting and fine-tuning.
*/
layeredIterations: 2,
/**
* Tree-radial option: the angle at which the layout starts.
*/
startRadialAngle: 0,
/**
* Tree-radial option: the angle at which the layout starts.
*/
endRadialAngle: 360,
/**
* Tree-radial option: the separation between levels.
*/
radialSeparation: 150,
/**
* Tree-radial option: the separation between the root and the first level.
*/
radialFirstLevelSeparation: 200,
/**
* Tree-radial option: whether a virtual roots bing the components in one radial layout.
*/
keepComponentsInOneRadialLayout: false,
//-------------------------------------------------------------------
// TODO: ensure to change this to false when containers are around
ignoreContainers: true,
layoutContainerChildren: false,
ignoreInvisible: true,
animateTransitions: false
},
init: function () {
},
/**
* Organizes the components in a grid.
* Returns the final set of nodes (not the Graph).
* @param components
*/
gridLayoutComponents: function (components) {
if (!components) {
throw "No components supplied.";
}
// calculate and cache the bounds of the components
Utils.forEach(components, function (c) {
c.calcBounds();
});
// order by decreasing width
components.sort(function (a, b) {
return b.bounds.width - a.bounds.width;
});
var maxWidth = this.options.grid.width,
offsetX = this.options.grid.componentSpacingX,
offsetY = this.options.grid.componentSpacingY,
height = 0,
startX = this.options.grid.offsetX,
startY = this.options.grid.offsetY,
x = startX,
y = startY,
i,
resultLinkSet = [],
resultNodeSet = [];
while (components.length > 0) {
if (x >= maxWidth) {
// start a new row
x = startX;
y += height + offsetY;
// reset the row height
height = 0;
}
var component = components.pop();
this.moveToOffset(component, new Point(x, y));
for (i = 0; i < component.nodes.length; i++) {
resultNodeSet.push(component.nodes[i]); // to be returned in the end
}
for (i = 0; i < component.links.length; i++) {
resultLinkSet.push(component.links[i]);
}
var boundingRect = component.bounds;
var currentHeight = boundingRect.height;
if (currentHeight <= 0 || isNaN(currentHeight)) {
currentHeight = 0;
}
var currentWidth = boundingRect.width;
if (currentWidth <= 0 || isNaN(currentWidth)) {
currentWidth = 0;
}
if (currentHeight >= height) {
height = currentHeight;
}
x += currentWidth + offsetX;
}
return {
nodes: resultNodeSet,
links: resultLinkSet
};
},
moveToOffset: function (component, p) {
var i, j,
bounds = component.bounds,
deltax = p.x - bounds.x,
deltay = p.y - bounds.y;
for (i = 0; i < component.nodes.length; i++) {
var node = component.nodes[i];
var nodeBounds = node.bounds();
if (nodeBounds.width === 0 && nodeBounds.height === 0 && nodeBounds.x === 0 && nodeBounds.y === 0) {
nodeBounds = new Rect(0, 0, 0, 0);
}
nodeBounds.x += deltax;
nodeBounds.y += deltay;
node.bounds(nodeBounds);
}
for (i = 0; i < component.links.length; i++) {
var link = component.links[i];
if (link.points) {
var newpoints = [];
var points = link.points;
for (j = 0; j < points.length; j++) {
var pt = points[j];
pt.x += deltax;
pt.y += deltay;
newpoints.push(pt);
}
link.points = newpoints;
}
}
this.currentHorizontalOffset += bounds.width + this.options.grid.offsetX;
return new Point(deltax, deltay);
},
transferOptions: function (options) {
// Size options lead to stackoverflow and need special handling
this.options = kendo.deepExtend({}, this.defaultOptions);
if (Utils.isUndefined(options)) {
return;
}
this.options = kendo.deepExtend(this.options, options || {});
}
});
/**
* The data bucket a hypertree holds in its nodes. *
* @type {*}
*/
/* var ContainerGraph = kendo.Class.extend({
init: function (diagram) {
this.diagram = diagram;
this.graph = new Graph(diagram);
this.container = null;
this.containerNode = null;
}
});*/
/**
* Adapter between the diagram control and the graph representation. It converts shape and connections to nodes and edges taking into the containers and their collapsef state,
* the visibility of items and more. If the layoutContainerChildren is true a hypertree is constructed which holds the hierarchy of containers and many conditions are analyzed
* to investigate how the effective graph structure looks like and how the layout has to be performed.
* @type {*}
*/
var DiagramToHyperTreeAdapter = kendo.Class.extend({
init: function (diagram) {
/**
* The mapping to/from the original nodes.
* @type {Dictionary}
*/
this.nodeMap = new Dictionary();
/**
* Gets the mapping of a shape to a container in case the shape sits in a collapsed container.
* @type {Dictionary}
*/
this.shapeMap = new Dictionary();
/**
* The nodes being mapped.
* @type {Dictionary}
*/
this.nodes = [];
/**
* The connections being mapped.
* @type {Dictionary}
*/
this.edges = [];
// the mapping from an edge to all the connections it represents, this can be both because of multiple connections between
// two shapes or because a container holds multiple connections to another shape or container.
this.edgeMap = new Dictionary();
/**
* The resulting set of Nodes when the analysis has finished.
* @type {Array}
*/
this.finalNodes = [];
/**
* The resulting set of Links when the analysis has finished.
* @type {Array}
*/
this.finalLinks = [];
/**
* The items being omitted because of multigraph edges.
* @type {Array}
*/
this.ignoredConnections = [];
/**
* The items being omitted because of containers, visibility and other factors.
* @type {Array}
*/
this.ignoredShapes = [];
/**
* The map from a node to the partition/hypernode in which it sits. This hyperMap is null if 'options.layoutContainerChildren' is false.
* @type {Dictionary}
*/
this.hyperMap = new Dictionary();
/**
* The hypertree contains the hierarchy defined by the containers.
* It's in essence a Graph of Graphs with a tree structure defined by the hierarchy of containers.
* @type {HyperTree}
*/
this.hyperTree = new Graph();
/**
* The resulting graph after conversion. Note that this does not supply the information contained in the
* ignored connection and shape collections.
* @type {null}
*/
this.finalGraph = null;
this.diagram = diagram;
},
/**
* The hyperTree is used when the 'options.layoutContainerChildren' is true. It contains the hierarchy of containers whereby each node is a ContainerGraph.
* This type of node has a Container reference to the container which holds the Graph items. There are three possible situations during the conversion process:
* - Ignore the containers: the container are non-existent and only normal shapes are mapped. If a shape has a connection to a container it will be ignored as well
* since there is no node mapped for the container.
* - Do not ignore the containers and leave the content of the containers untouched: the top-level elements are being mapped and the children within a container are not altered.
* - Do not ignore the containers and organize the content of the containers as well: the hypertree is constructed and there is a partitioning of all nodes and connections into the hypertree.
* The only reason a connection or node is not being mapped might be due to the visibility, which includes the visibility change through a collapsed parent container.
* @param options
*/
convert: function (options) {
if (Utils.isUndefined(this.diagram)) {
throw "No diagram to convert.";
}
this.options = kendo.deepExtend({
ignoreInvisible: true,
ignoreContainers: true,
layoutContainerChildren: false
},
options || {}
);
this.clear();
// create the nodes which participate effectively in the graph analysis
this._renormalizeShapes();
// recreate the incoming and outgoing collections of each and every node
this._renormalizeConnections();
// export the resulting graph
this.finalNodes = new Dictionary(this.nodes);
this.finalLinks = new Dictionary(this.edges);
this.finalGraph = new Graph();
this.finalNodes.forEach(function (n) {
this.finalGraph.addNode(n);
}, this);
this.finalLinks.forEach(function (l) {
this.finalGraph.addExistingLink(l);
}, this);
return this.finalGraph;
},
/**
* Maps the specified connection to an edge of the graph deduced from the given diagram.
* @param connection
* @returns {*}
*/
mapConnection: function (connection) {
return this.edgeMap.first(function (edge) {
return contains(this.edgeMap.get(edge), connection);
});
},
/**
* Maps the specified shape to a node of the graph deduced from the given diagram.
* @param shape
* @returns {*}
*/
mapShape: function (shape) {
var keys = this.nodeMap.keys();
for (var i = 0, len = keys.length; i < len; i++) {
var key = keys[i];
if (contains(this.nodeMap.get(key), shape)) {
return key;
}
}
},
/**
* Gets the edge, if any, between the given nodes.
* @param a
* @param b
*/
getEdge: function (a, b) {
return Utils.first(a.links, function (link) {
return link.getComplement(a) === b;
});
},
/**
* Clears all the collections used by the conversion process.
*/
clear: function () {
this.finalGraph = null;
this.hyperTree = (!this.options.ignoreContainers && this.options.layoutContainerChildren) ? new HyperTree() : null;
this.hyperMap = (!this.options.ignoreContainers && this.options.layoutContainerChildren) ? new Dictionary() : null;
this.nodeMap = new Dictionary();
this.shapeMap = new Dictionary();
this.nodes = [];
this.edges = [];
this.edgeMap = new Dictionary();
this.ignoredConnections = [];
this.ignoredShapes = [];
this.finalNodes = [];
this.finalLinks = [];
},
/**
* The path from a given ContainerGraph to the root (container).
* @param containerGraph
* @returns {Array}
*/
listToRoot: function (containerGraph) {
var list = [];
var s = containerGraph.container;
if (!s) {
return list;
}
list.push(s);
while (s.parentContainer) {
s = s.parentContainer;
list.push(s);
}
list.reverse();
return list;
},
firstNonIgnorableContainer: function (shape) {
if (shape.isContainer && !this._isIgnorableItem(shape)) {
return shape;
}
return !shape.parentContainer ? null : this.firstNonIgnorableContainer(shape.parentContainer);
},
isContainerConnection: function (a, b) {
if (a.isContainer && this.isDescendantOf(a, b)) {
return true;
}
return b.isContainer && this.isDescendantOf(b, a);
},
/**
* Returns true if the given shape is a direct child or a nested container child of the given container.
* If the given container and shape are the same this will return false since a shape cannot be its own child.
* @param scope
* @param a
* @returns {boolean}
*/
isDescendantOf: function (scope, a) {
if (!scope.isContainer) {
throw "Expecting a container.";
}
if (scope === a) {
return false;
}
if (contains(scope.children, a)) {
return true;
}
var containers = [];
for (var i = 0, len = scope.children.length; i < len; i++) {
var c = scope.children[i];
if (c.isContainer && this.isDescendantOf(c, a)) {
containers.push(c);
}
}
return containers.length > 0;
},
isIgnorableItem: function (shape) {
if (this.options.ignoreInvisible) {
if (shape.isCollapsed && this._isVisible(shape)) {
return false;
}
if (!shape.isCollapsed && this._isVisible(shape)) {
return false;
}
return true;
}
else {
return shape.isCollapsed && !this._isTop(shape);
}
},
/**
* Determines whether the shape is or needs to be mapped to another shape. This occurs essentially when the shape sits in
* a collapsed container hierarchy and an external connection needs a node endpoint. This node then corresponds to the mapped shape and is
* necessarily a container in the parent hierarchy of the shape.
* @param shape
*/
isShapeMapped: function (shape) {
return shape.isCollapsed && !this._isVisible(shape) && !this._isTop(shape);
},
leastCommonAncestor: function (a, b) {
if (!a) {
throw "Parameter should not be null.";
}
if (!b) {
throw "Parameter should not be null.";
}
if (!this.hyperTree) {
throw "No hypertree available.";
}
var al = this.listToRoot(a);
var bl = this.listToRoot(b);
var found = null;
if (Utils.isEmpty(al) || Utils.isEmpty(bl)) {
return this.hyperTree.root.data;
}
var xa = al[0];
var xb = bl[0];
var i = 0;
while (xa === xb) {
found = al[i];
i++;
if (i >= al.length || i >= bl.length) {
break;
}
xa = al[i];
xb = bl[i];
}
if (!found) {
return this.hyperTree.root.data;
}
else {
return grep(this.hyperTree.nodes, function (n) {
return n.data.container === found;
});
}
},
/**
* Determines whether the specified item is a top-level shape or container.
* @param item
* @returns {boolean}
* @private
*/
_isTop: function (item) {
return !item.parentContainer;
},
/**
* Determines iteratively (by walking up the container stack) whether the specified shape is visible.
* This does NOT tell whether the item is not visible due to an explicit Visibility change or due to a collapse state.
* @param shape
* @returns {*}
* @private
*/
_isVisible: function (shape) {
if (!shape.visible()) {
return false;
}
return !shape.parentContainer ? shape.visible() : this._isVisible(shape.parentContainer);
},
_isCollapsed: function (shape) {
if (shape.isContainer && shape.isCollapsed) {
return true;
}
return shape.parentContainer && this._isCollapsed(shape.parentContainer);
},
/**
* First part of the graph creation; analyzing the shapes and containers and deciding whether they should be mapped to a Node.
* @private
*/
_renormalizeShapes: function () {
// add the nodes, the adjacency structure will be reconstructed later on
if (this.options.ignoreContainers) {
for (var i = 0, len = this.diagram.shapes.length; i < len; i++) {
var shape = this.diagram.shapes[i];
// if not visible (and ignoring the invisible ones) or a container we skip
if ((this.options.ignoreInvisible && !this._isVisible(shape)) || shape.isContainer) {
this.ignoredShapes.push(shape);
continue;
}
var node = new Node(shape.id, shape);
node.isVirtual = false;
// the mapping will always contain singletons and the hyperTree will be null
this.nodeMap.add(node, [shape]);
this.nodes.push(node);
}
}
else {
throw "Containers are not supported yet, but stay tuned.";
}
},
/**
* Second part of the graph creation; analyzing the connections and deciding whether they should be mapped to an edge.
* @private
*/
_renormalizeConnections: function () {
if (this.diagram.connections.length === 0) {
return;
}
for (var i = 0, len = this.diagram.connections.length; i < len; i++) {
var conn = this.diagram.connections[i];
if (this.isIgnorableItem(conn)) {
this.ignoredConnections.push(conn);
continue;
}
var source = !conn.sourceConnector ? null : conn.sourceConnector.shape;
var sink = !conn.targetConnector ? null : conn.targetConnector.shape;
// no layout for floating connections
if (!source || !sink) {
this.ignoredConnections.push(conn);
continue;
}
if (contains(this.ignoredShapes, source) && !this.shapeMap.containsKey(source)) {
this.ignoredConnections.push(conn);
continue;
}
if (contains(this.ignoredShapes, sink) && !this.shapeMap.containsKey(sink)) {
this.ignoredConnections.push(conn);
continue;
}
// if the endpoint sits in a collapsed container we need the container rather than the shape itself
if (this.shapeMap.containsKey(source)) {
source = this.shapeMap[source];
}
if (this.shapeMap.containsKey(sink)) {
sink = this.shapeMap[sink];
}
var sourceNode = this.mapShape(source);
var sinkNode = this.mapShape(sink);
if ((sourceNode === sinkNode) || this.areConnectedAlready(sourceNode, sinkNode)) {
this.ignoredConnections.push(conn);
continue;
}
if (sourceNode === null || sinkNode === null) {
throw "A shape was not mapped to a node.";
}
if (this.options.ignoreContainers) {
// much like a floating connection here since at least one end is attached to a container
if (sourceNode.isVirtual || sinkNode.isVirtual) {
this.ignoredConnections.push(conn);
continue;
}
var newEdge = new Link(sourceNode, sinkNode, conn.id, conn);
this.edgeMap.add(newEdge, [conn]);
this.edges.push(newEdge);
}
else {
throw "Containers are not supported yet, but stay tuned.";
}
}
},
areConnectedAlready: function (n, m) {
return Utils.any(this.edges, function (l) {
return l.source === n && l.target === m || l.source === m && l.target === n;
});
}
/**
* Depth-first traversal of the given container.
* @param container
* @param action
* @param includeStart
* @private
*/
/* _visitContainer: function (container, action, includeStart) {
*//*if (container == null) throw new ArgumentNullException("container");
if (action == null) throw new ArgumentNullException("action");
if (includeStart) action(container);
if (container.children.isEmpty()) return;
foreach(
var item
in
container.children.OfType < IShape > ()
)
{
var childContainer = item
as
IContainerShape;
if (childContainer != null) this.VisitContainer(childContainer, action);
else action(item);
}*//*
}*/
});
/**
* The classic spring-embedder (aka force-directed, Fruchterman-Rheingold, barycentric) algorithm.
* http://en.wikipedia.org/wiki/Force-directed_graph_drawing
* - Chapter 12 of Tamassia et al. "Handbook of graph drawing and visualization".
* - Kobourov on preprint arXiv; http://arxiv.org/pdf/1201.3011.pdf
* - Fruchterman and Rheingold in SOFTWARE-PRACTICE AND EXPERIENCE, VOL. 21(1 1), 1129-1164 (NOVEMBER 1991)
* @type {*}
*/
var SpringLayout = LayoutBase.extend({
init: function (diagram) {
var that = this;
LayoutBase.fn.init.call(that);
if (Utils.isUndefined(diagram)) {
throw "Diagram is not specified.";
}
this.diagram = diagram;
},
layout: function (options) {
this.transferOptions(options);
var adapter = new DiagramToHyperTreeAdapter(this.diagram);
var graph = adapter.convert(options);
if (graph.isEmpty()) {
return;
}
// split into connected components
var components = graph.getConnectedComponents();
if (Utils.isEmpty(components)) {
return;
}
for (var i = 0; i < components.length; i++) {
var component = components[i];
this.layoutGraph(component, options);
}
var finalNodeSet = this.gridLayoutComponents(components);
return new diagram.LayoutState(this.diagram, finalNodeSet);
},
layoutGraph: function (graph, options) {
if (Utils.isDefined(options)) {
this.transferOptions(options);
}
this.graph = graph;
var initialTemperature = this.options.nodeDistance * 9;
this.temperature = initialTemperature;
var guessBounds = this._expectedBounds();
this.width = guessBounds.width;
this.height = guessBounds.height;
for (var step = 0; step < this.options.iterations; step++) {
this.refineStage = step >= this.options.iterations * 5 / 6;
this.tick();
// exponential cooldown
this.temperature = this.refineStage ?
initialTemperature / 30 :
initialTemperature * (1 - step / (2 * this.options.iterations ));
}
},
/**
* Single iteration of the simulation.
*/
tick: function () {
var i;
// collect the repulsive forces on each node
for (i = 0; i < this.graph.nodes.length; i++) {
this._repulsion(this.graph.nodes[i]);
}
// collect the attractive forces on each node
for (i = 0; i < this.graph.links.length; i++) {
this._attraction(this.graph.links[i]);
}
// update the positions
for (i = 0; i < this.graph.nodes.length; i++) {
var node = this.graph.nodes[i];
var offset = Math.sqrt(node.dx * node.dx + node.dy * node.dy);
if (offset === 0) {
return;
}
node.x += Math.min(offset, this.temperature) * node.dx / offset;
node.y += Math.min(offset, this.temperature) * node.dy / offset;
if (this.options.limitToView) {
node.x = Math.min(this.width, Math.max(node.width / 2, node.x));
node.y = Math.min(this.height, Math.max(node.height / 2, node.y));
}
}
},
/**
* Shakes the node away from its current position to escape the deadlock.
* @param node A Node.
* @private
*/
_shake: function (node) {
// just a simple polar neighborhood
var rho = Math.random() * this.options.nodeDistance / 4;
var alpha = Math.random() * 2 * Math.PI;
node.x += rho * Math.cos(alpha);
node.y -= rho * Math.sin(alpha);
},
/**
* The typical Coulomb-Newton force law F=k/r^2
* @remark This only works in dimensions less than three.
* @param d
* @param n A Node.
* @param m Another Node.
* @returns {number}
* @private
*/
_InverseSquareForce: function (d, n, m) {
var force;
if (!this.refineStage) {
force = Math.pow(d, 2) / Math.pow(this.options.nodeDistance, 2);
}
else {
var deltax = n.x - m.x;
var deltay = n.y - m.y;
var wn = n.width / 2;
var hn = n.height / 2;
var wm = m.width / 2;
var hm = m.height / 2;
force = (Math.pow(deltax, 2) / Math.pow(wn + wm + this.options.nodeDistance, 2)) + (Math.pow(deltay, 2) / Math.pow(hn + hm + this.options.nodeDistance, 2));
}
return force * 4 / 3;
},
/**
* The typical Hooke force law F=kr^2
* @param d
* @param n
* @param m
* @returns {number}
* @private
*/
_SquareForce: function (d, n, m) {
return 1 / this._InverseSquareForce(d, n, m);
},
_repulsion: function (n) {
n.dx = 0;
n.dy = 0;
Utils.forEach(this.graph.nodes, function (m) {
if (m === n) {
return;
}
while (n.x === m.x && n.y === m.y) {
this._shake(m);
}
var vx = n.x - m.x;
var vy = n.y - m.y;
var distance = Math.sqrt(vx * vx + vy * vy);
var r = this._SquareForce(distance, n, m) * 2;
n.dx += (vx / distance) * r;
n.dy += (vy / distance) * r;
}, this);
},
_attraction: function (link) {
var t = link.target;
var s = link.source;
if (s === t) {
// loops induce endless shakes
return;
}
while (s.x === t.x && s.y === t.y) {
this._shake(t);
}
var vx = s.x - t.x;
var vy = s.y - t.y;
var distance = Math.sqrt(vx * vx + vy * vy);
var a = this._InverseSquareForce(distance, s, t) * 5;
var dx = (vx / distance) * a;
var dy = (vy / distance) * a;
t.dx += dx;
t.dy += dy;
s.dx -= dx;
s.dy -= dy;
},
/**
* Calculates the expected bounds after layout.
* @returns {*}
* @private
*/
_expectedBounds: function () {
var size, N = this.graph.nodes.length, /*golden ration optimal?*/ ratio = 1.5, multiplier = 4;
if (N === 0) {
return size;
}
size = Utils.fold(this.graph.nodes, function (s, node) {
var area = node.width * node.height;
if (area > 0) {
s += Math.sqrt(area);
return s;
}
return 0;
}, 0, this);
var av = size / N;
var squareSize = av * Math.ceil(Math.sqrt(N));
var width = squareSize * Math.sqrt(ratio);
var height = squareSize / Math.sqrt(ratio);
return { width: width * multiplier, height: height * multiplier };
}
});
var TreeLayoutProcessor = kendo.Class.extend({
init: function (options) {
this.center = null;
this.options = options;
},
layout: function (treeGraph, root) {
this.graph = treeGraph;
if (!this.graph.nodes || this.graph.nodes.length === 0) {
return;
}
if (!contains(this.graph.nodes, root)) {
throw "The given root is not in the graph.";
}
this.center = root;
this.graph.cacheRelationships();
/* var nonull = this.graph.nodes.where(function (n) {
return n.associatedShape != null;
});*/
// transfer the rects
/*nonull.forEach(function (n) {
n.Location = n.associatedShape.Position;
n.NodeSize = n.associatedShape.ActualBounds.ToSize();
}
);*/
// caching the children
/* nonull.forEach(function (n) {
n.children = n.getChildren();
});*/
this.layoutSwitch();
// apply the layout to the actual visuals
// nonull.ForEach(n => n.associatedShape.Position = n.Location);
},
layoutLeft: function (left) {
this.setChildrenDirection(this.center, "Left", false);
this.setChildrenLayout(this.center, "Default", false);
var h = 0, w = 0, y, i, node;
for (i = 0; i < left.length; i++) {
node = left[i];
node.TreeDirection = "Left";
var s = this.measure(node, Size.Empty);
w = Math.max(w, s.Width);
h += s.height + this.options.verticalSeparation;
}
h -= this.options.verticalSeparation;
var x = this.center.x - this.options.horizontalSeparation;
y = this.center.y + ((this.center.height - h) / 2);
for (i = 0; i < left.length; i++) {
node = left[i];
var p = new Point(x - node.Size.width, y);
this.arrange(node, p);
y += node.Size.height + this.options.verticalSeparation;
}
},
layoutRight: function (right) {
this.setChildrenDirection(this.center, "Right", false);
this.setChildrenLayout(this.center, "Default", false);
var h = 0, w = 0, y, i, node;
for (i = 0; i < right.length; i++) {
node = right[i];
node.TreeDirection = "Right";
var s = this.measure(node, Size.Empty);
w = Math.max(w, s.Width);
h += s.height + this.options.verticalSeparation;
}
h -= this.options.verticalSeparation;
var x = this.center.x + this.options.horizontalSeparation + this.center.width;
y = this.center.y + ((this.center.height - h) / 2);
for (i = 0; i < right.length; i++) {
node = right[i];
var p = new Point(x, y);
this.arrange(node, p);
y += node.Size.height + this.options.verticalSeparation;
}
},
layoutUp: function (up) {
this.setChildrenDirection(this.center, "Up", false);
this.setChildrenLayout(this.center, "Default", false);
var w = 0, y, node, i;
for (i = 0; i < up.length; i++) {
node = up[i];
node.TreeDirection = "Up";
var s = this.measure(node, Size.Empty);
w += s.width + this.options.horizontalSeparation;
}
w -= this.options.horizontalSeparation;
var x = this.center.x + (this.center.width / 2) - (w / 2);
// y = this.center.y -verticalSeparation -this.center.height/2 - h;
for (i = 0; i < up.length; i++) {
node = up[i];
y = this.center.y - this.options.verticalSeparation - node.Size.height;
var p = new Point(x, y);
this.arrange(node, p);
x += node.Size.width + this.options.horizontalSeparation;
}
},
layoutDown: function (down) {
var node, i;
this.setChildrenDirection(this.center, "Down", false);
this.setChildrenLayout(this.center, "Default", false);
var w = 0, y;
for (i = 0; i < down.length; i++) {
node = down[i];
node.treeDirection = "Down";
var s = this.measure(node, Size.Empty);
w += s.width + this.options.horizontalSeparation;
}
w -= this.options.horizontalSeparation;
var x = this.center.x + (this.center.width / 2) - (w / 2);
y = this.center.y + this.options.verticalSeparation + this.center.height;
for (i = 0; i < down.length; i++) {
node = down[i];
var p = new Point(x, y);
this.arrange(node, p);
x += node.Size.width + this.options.horizontalSeparation;
}
},
layoutRadialTree: function () {
// var rmax = children.Aggregate(0D, (current, node) => Math.max(node.SectorAngle, current));
this.setChildrenDirection(this.center, "Radial", false);
this.setChildrenLayout(this.center, "Default", false);
this.previousRoot = null;
var startAngle = this.options.startRadialAngle * DEG_TO_RAD;
var endAngle = this.options.endRadialAngle * DEG_TO_RAD;
if (endAngle <= startAngle) {
throw "Final angle should not be less than the start angle.";
}
this.maxDepth = 0;
this.origin = new Point(this.center.x, this.center.y);
this.calculateAngularWidth(this.center, 0);
// perform the layout
if (this.maxDepth > 0) {
this.radialLayout(this.center, this.options.radialFirstLevelSeparation, startAngle, endAngle);
}
// update properties of the root node
this.center.Angle = endAngle - startAngle;
},
tipOverTree: function (down, startFromLevel) {
if (Utils.isUndefined(startFromLevel)) {
startFromLevel = 0;
}
this.setChildrenDirection(this.center, "Down", false);
this.setChildrenLayout(this.center, "Default", false);
this.setChildrenLayout(this.center, "Underneath", false, startFromLevel);
var w = 0, y, node, i;
for (i = 0; i < down.length; i++) {
node = down[i];
// if (node.IsSpecial) continue;
node.TreeDirection = "Down";
var s = this.measure(node, Size.Empty);
w += s.width + this.options.horizontalSeparation;
}
w -= this.options.horizontalSeparation;
// putting the root in the center with respect to the whole diagram is not a nice result, let's put it with respect to the first level only
w -= down[down.length - 1].width;
w += down[down.length - 1].associatedShape.bounds().width;
var x = this.center.x + (this.center.width / 2) - (w / 2);
y = this.center.y + this.options.verticalSeparation + this.center.height;
for (i = 0; i < down.length; i++) {
node = down[i];
// if (node.IsSpecial) continue;
var p = new Point(x, y);
this.arrange(node, p);
x += node.Size.width + this.options.horizontalSeparation;
}
/*//let's place the special node, assuming there is only one
if (down.Count(n => n.IsSpecial) > 0)
{
var special = (from n in down where n.IsSpecial select n).First();
if (special.Children.Count > 0)
throw new DiagramException("The 'special' element should not have children.");
special.Data.Location = new Point(Center.Data.Location.X + Center.AssociatedShape.BoundingRectangle.Width + this.options.HorizontalSeparation, Center.Data.Location.Y);
}*/
},
calculateAngularWidth: function (n, d) {
if (d > this.maxDepth) {
this.maxDepth = d;
}
var aw = 0, w = 1000, h = 1000, diameter = d === 0 ? 0 : Math.sqrt((w * w) + (h * h)) / d;
if (n.children.length > 0) {
// eventually with n.IsExpanded
for (var i = 0, len = n.children.length; i < len; i++) {
var child = n.children[i];
aw += this.calculateAngularWidth(child, d + 1);
}
aw = Math.max(diameter, aw);
}
else {
aw = diameter;
}
n.sectorAngle = aw;
return aw;
},
sortChildren: function (n) {
var basevalue = 0, i;
// update basevalue angle for node ordering
if (n.parents.length > 1) {
throw "Node is not part of a tree.";
}
var p = n.parents[0];
if (p) {
var pl = new Point(p.x, p.y);
var nl = new Point(n.x, n.y);
basevalue = this.normalizeAngle(Math.atan2(pl.y - nl.y, pl.x - nl.x));
}
var count = n.children.length;
if (count === 0) {
return null;
}
var angle = [];
var idx = [];
for (i = 0; i < count; ++i) {
var c = n.children[i];
var l = new Point(c.x, c.y);
idx[i] = i;
angle[i] = this.normalizeAngle(-basevalue + Math.atan2(l.y - l.y, l.x - l.x));
}
Utils.bisort(angle, idx);
var col = []; // list of nodes
var children = n.children;
for (i = 0; i < count; ++i) {
col.push(children[idx[i]]);
}
return col;
},
normalizeAngle: function (angle) {
while (angle > Math.PI * 2) {
angle -= 2 * Math.PI;
}
while (angle < 0) {
angle += Math.PI * 2;
}
return angle;
},
radialLayout: function (node, radius, startAngle, endAngle) {
var deltaTheta = endAngle - startAngle;
var deltaThetaHalf = deltaTheta / 2.0;
var parentSector = node.sectorAngle;
var fraction = 0;
var sorted = this.sortChildren(node);
for (var i = 0, len = sorted.length; i < len; i++) {
var childNode = sorted[i];
var cp = childNode;
var childAngleFraction = cp.sectorAngle / parentSector;
if (childNode.children.length > 0) {
this.radialLayout(childNode,
radius + this.options.radialSeparation,
startAngle + (fraction * deltaTheta),
startAngle + ((fraction + childAngleFraction) * deltaTheta));
}
this.setPolarLocation(childNode, radius, startAngle + (fraction * deltaTheta) + (childAngleFraction * deltaThetaHalf));
cp.angle = childAngleFraction * deltaTheta;
fraction += childAngleFraction;
}
},
setPolarLocation: function (node, radius, angle) {
node.x = this.origin.x + (radius * Math.cos(angle));
node.y = this.origin.y + (radius * Math.sin(angle));
node.BoundingRectangle = new Rect(node.x, node.y, node.width, node.height);
},
/**
* Sets the children direction recursively.
* @param node
* @param direction
* @param includeStart
*/
setChildrenDirection: function (node, direction, includeStart) {
var rootDirection = node.treeDirection;
this.graph.depthFirstTraversal(node, function (n) {
n.treeDirection = direction;
});
if (!includeStart) {
node.treeDirection = rootDirection;
}
},
/**
* Sets the children layout recursively.
* @param node
* @param layout
* @param includeStart
* @param startFromLevel
*/
setChildrenLayout: function (node, layout, includeStart, startFromLevel) {
if (Utils.isUndefined(startFromLevel)) {
startFromLevel = 0;
}
var rootLayout = node.childrenLayout;
if (startFromLevel > 0) {
// assign levels to the Node.Level property
this.graph.assignLevels(node);
// assign the layout on the condition that the level is at least the 'startFromLevel'
this.graph.depthFirstTraversal(
node, function (s) {
if (s.level >= startFromLevel + 1) {
s.childrenLayout = layout;
}
}
);
}
else {
this.graph.depthFirstTraversal(node, function (s) {
s.childrenLayout = layout;
});
// if the start should not be affected we put the state back
if (!includeStart) {
node.childrenLayout = rootLayout;
}
}
},
/**
* Returns the actual size of the node. The given size is the allowed space wherein the node can lay out itself.
* @param node
* @param givenSize
* @returns {Size}
*/
measure: function (node, givenSize) {
var w = 0, h = 0, s;
var result = new Size(0, 0);
if (!node) {
throw "";
}
var b = node.associatedShape.bounds();
var shapeWidth = b.width;
var shapeHeight = b.height;
if (node.parents.length !== 1) {
throw "Node not in a spanning tree.";
}
var parent = node.parents[0];
if (node.treeDirection === "Undefined") {
node.treeDirection = parent.treeDirection;
}
if (Utils.isEmpty(node.children)) {
result = new Size(
Math.abs(shapeWidth) < EPSILON ? 50 : shapeWidth,
Math.abs(shapeHeight) < EPSILON ? 25 : shapeHeight);
}
else if (node.children.length === 1) {
switch (node.treeDirection) {
case "Radial":
s = this.measure(node.children[0], givenSize); // child size
w = shapeWidth + (this.options.radialSeparation * Math.cos(node.AngleToParent)) + s.width;
h = shapeHeight + Math.abs(this.options.radialSeparation * Math.sin(node.AngleToParent)) + s.height;
break;
case "Left":
case "Right":
switch (node.childrenLayout) {
case "TopAlignedWithParent":
break;
case "BottomAlignedWithParent":
break;
case "Underneath":
s = this.measure(node.children[0], givenSize);
w = shapeWidth + s.width + this.options.underneathHorizontalOffset;
h = shapeHeight + this.options.underneathVerticalTopOffset + s.height;
break;
case "Default":
s = this.measure(node.children[0], givenSize);
w = shapeWidth + this.options.horizontalSeparation + s.width;
h = Math.max(shapeHeight, s.height);
break;
default:
throw "Unhandled TreeDirection in the Radial layout measuring.";
}
break;
case "Up":
case "Down":
switch (node.childrenLayout) {
case "TopAlignedWithParent":
case "BottomAlignedWithParent":
break;
case "Underneath":
s = this.measure(node.children[0], givenSize);
w = Math.max(shapeWidth, s.width + this.options.underneathHorizontalOffset);
h = shapeHeight + this.options.underneathVerticalTopOffset + s.height;
break;
case "Default":
s = this.measure(node.children[0], givenSize);
h = shapeHeight + this.options.verticalSeparation + s.height;
w = Math.max(shapeWidth, s.width);
break;
default:
throw "Unhandled TreeDirection in the Down layout measuring.";
}
break;
default:
throw "Unhandled TreeDirection in the layout measuring.";
}
result = new Size(w, h);
}
else {
var i, childNode;
switch (node.treeDirection) {
case "Left":
case "Right":
switch (node.childrenLayout) {
case "TopAlignedWithParent":
case "BottomAlignedWithParent":
break;
case "Underneath":
w = shapeWidth;
h = shapeHeight + this.options.underneathVerticalTopOffset;
for (i = 0; i < node.children.length; i++) {
childNode = node.children[i];
s = this.measure(childNode, givenSize);
w = Math.max(w, s.width + this.options.underneathHorizontalOffset);
h += s.height + this.options.underneathVerticalSeparation;
}
h -= this.options.underneathVerticalSeparation;
break;
case "Default":
w = shapeWidth;
h = 0;
for (i = 0; i < node.children.length; i++) {
childNode = node.children[i];
s = this.measure(childNode, givenSize);
w = Math.max(w, shapeWidth + this.options.horizontalSeparation + s.width);
h += s.height + this.options.verticalSeparation;
}
h -= this.options.verticalSeparation;
break;
default:
throw "Unhandled TreeDirection in the Right layout measuring.";
}
break;
case "Up":
case "Down":
switch (node.childrenLayout) {
case "TopAlignedWithParent":
case "BottomAlignedWithParent":
break;
case "Underneath":
w = shapeWidth;
h = shapeHeight + this.options.underneathVerticalTopOffset;
for (i = 0; i < node.children.length; i++) {
childNode = node.children[i];
s = this.measure(childNode, givenSize);
w = Math.max(w, s.width + this.options.underneathHorizontalOffset);
h += s.height + this.options.underneathVerticalSeparation;
}
h -= this.options.underneathVerticalSeparation;
break;
case "Default":
w = 0;
h = 0;
for (i = 0; i < node.children.length; i++) {
childNode = node.children[i];
s = this.measure(childNode, givenSize);
w += s.width + this.options.horizontalSeparation;
h = Math.max(h, s.height + this.options.verticalSeparation + shapeHeight);
}
w -= this.options.horizontalSeparation;
break;
default:
throw "Unhandled TreeDirection in the Down layout measuring.";
}
break;
default:
throw "Unhandled TreeDirection in the layout measuring.";
}
result = new Size(w, h);
}
node.SectorAngle = Math.sqrt((w * w / 4) + (h * h / 4));
node.Size = result;
return result;
},
arrange: function (n, p) {
var i, pp, child, node, childrenwidth, b = n.associatedShape.bounds();
var shapeWidth = b.width;
var shapeHeight = b.height;
if (Utils.isEmpty(n.children)) {
n.x = p.x;
n.y = p.y;
n.BoundingRectangle = new Rect(p.x, p.y, shapeWidth, shapeHeight);
}
else {
var x, y;
var selfLocation;
switch (n.treeDirection) {
case "Left":
switch (n.childrenLayout) {
case "TopAlignedWithParent":
case "BottomAlignedWithParent":
break;
case "Underneath":
selfLocation = p;
n.x = selfLocation.x;
n.y = selfLocation.y;
n.BoundingRectangle = new Rect(n.x, n.y, n.width, n.height);
y = p.y + shapeHeight + this.options.underneathVerticalTopOffset;
for (i = 0; i < node.children.length; i++) {
node = node.children[i];
x = selfLocation.x - node.associatedShape.width - this.options.underneathHorizontalOffset;
pp = new Point(x, y);
this.arrange(node, pp);
y += node.Size.height + this.options.underneathVerticalSeparation;
}
break;
case "Default":
selfLocation = new Point(p.x + n.Size.width - shapeWidth, p.y + ((n.Size.height - shapeHeight) / 2));
n.x = selfLocation.x;
n.y = selfLocation.y;
n.BoundingRectangle = new Rect(n.x, n.y, n.width, n.height);
x = selfLocation.x - this.options.horizontalSeparation; // alignment of children
y = p.y;
for (i = 0; i < n.children.length; i++) {
node = n.children[i];
pp = new Point(x - node.Size.width, y);
this.arrange(node, pp);
y += node.Size.height + this.options.verticalSeparation;
}
break;
default:
throw "Unsupported TreeDirection";
}
break;
case "Right":
switch (n.childrenLayout) {
case "TopAlignedWithParent":
case "BottomAlignedWithParent":
break;
case "Underneath":
selfLocation = p;
n.x = selfLocation.x;
n.y = selfLocation.y;
n.BoundingRectangle = new Rect(n.x, n.y, n.width, n.height);
x = p.x + shapeWidth + this.options.underneathHorizontalOffset;
// alignment of children left-underneath the parent
y = p.y + shapeHeight + this.options.underneathVerticalTopOffset;
for (i = 0; i < n.children.length; i++) {
node = n.children[i];
pp = new Point(x, y);
this.arrange(node, pp);
y += node.Size.height + this.options.underneathVerticalSeparation;
}
break;
case "Default":
selfLocation = new Point(p.x, p.y + ((n.Size.height - shapeHeight) / 2));
n.x = selfLocation.x;
n.y = selfLocation.y;
n.BoundingRectangle = new Rect(n.x, n.y, n.width, n.height);
x = p.x + shapeWidth + this.options.horizontalSeparation; // alignment of children
y = p.y;
for (i = 0; i < n.children.length; i++) {
node = n.children[i];
pp = new Point(x, y);
this.arrange(node, pp);
y += node.Size.height + this.options.verticalSeparation;
}
break;
default:
throw "Unsupported TreeDirection";
}
break;
case "Up":
selfLocation = new Point(p.x + ((n.Size.width - shapeWidth) / 2), p.y + n.Size.height - shapeHeight);
n.x = selfLocation.x;
n.y = selfLocation.y;
n.BoundingRectangle = new Rect(n.x, n.y, n.width, n.height);
if (Math.abs(selfLocation.x - p.x) < EPSILON) {
childrenwidth = 0;
// means there is an aberration due to the oversized Element with respect to the children
for (i = 0; i < n.children.length; i++) {
child = n.children[i];
childrenwidth += child.Size.width + this.options.horizontalSeparation;
}
childrenwidth -= this.options.horizontalSeparation;
x = p.x + ((shapeWidth - childrenwidth) / 2);
}
else {
x = p.x;
}
for (i = 0; i < n.children.length; i++) {
node = n.children[i];
y = selfLocation.y - this.options.verticalSeparation - node.Size.height;
pp = new Point(x, y);
this.arrange(node, pp);
x += node.Size.width + this.options.horizontalSeparation;
}
break;
case "Down":
switch (n.childrenLayout) {
case "TopAlignedWithParent":
case "BottomAlignedWithParent":
break;
case "Underneath":
selfLocation = p;
n.x = selfLocation.x;
n.y = selfLocation.y;
n.BoundingRectangle = new Rect(n.x, n.y, n.width, n.height);
x = p.x + this.options.underneathHorizontalOffset; // alignment of children left-underneath the parent
y = p.y + shapeHeight + this.options.underneathVerticalTopOffset;
for (i = 0; i < n.children.length; i++) {
node = n.children[i];
pp = new Point(x, y);
this.arrange(node, pp);
y += node.Size.height + this.options.underneathVerticalSeparation;
}
break;
case "Default":
selfLocation = new Point(p.x + ((n.Size.width - shapeWidth) / 2), p.y);
n.x = selfLocation.x;
n.y = selfLocation.y;
n.BoundingRectangle = new Rect(n.x, n.y, n.width, n.height);
if (Math.abs(selfLocation.x - p.x) < EPSILON) {
childrenwidth = 0;
// means there is an aberration due to the oversized Element with respect to the children
for (i = 0; i < n.children.length; i++) {
child = n.children[i];
childrenwidth += child.Size.width + this.options.horizontalSeparation;
}
childrenwidth -= this.options.horizontalSeparation;
x = p.x + ((shapeWidth - childrenwidth) / 2);
}
else {
x = p.x;
}
for (i = 0; i < n.children.length; i++) {
node = n.children[i];
y = selfLocation.y + this.options.verticalSeparation + shapeHeight;
pp = new Point(x, y);
this.arrange(node, pp);
x += node.Size.width + this.options.horizontalSeparation;
}
break;
default:
throw "Unsupported TreeDirection";
}
break;
case "None":
break;
default:
throw "Unsupported TreeDirection";
}
}
},
layoutSwitch: function () {
if (!this.center) {
return;
}
if (Utils.isEmpty(this.center.children)) {
return;
}
var type = this.options.subtype;
if (Utils.isUndefined(type)) {
type = "Down";
}
var single, male, female, leftcount;
var children = this.center.children;
switch (type.toLowerCase()) {
case "radial":
case "radialtree":
this.layoutRadialTree();
break;
case "mindmaphorizontal":
case "mindmap":
single = this.center.children;
if (this.center.children.length === 1) {
this.layoutRight(single);
}
else {
// odd number will give one more at the right
leftcount = children.length / 2;
male = grep(this.center.children, function (n) {
return Utils.indexOf(children, n) < leftcount;
});
female = grep(this.center.children, function (n) {
return Utils.indexOf(children, n) >= leftcount;
});
this.layoutLeft(male);
this.layoutRight(female);
}
break;
case "mindmapvertical":
single = this.center.children;
if (this.center.children.length === 1) {
this.layoutDown(single);
}
else {
// odd number will give one more at the right
leftcount = children.length / 2;
male = grep(this.center.children, function (n) {
return Utils.indexOf(children, n) < leftcount;
});
female = grep(this.center.children, function (n) {
return Utils.indexOf(children, n) >= leftcount;
});
this.layoutUp(male);
this.layoutDown(female);
}
break;
case "right":
this.layoutRight(this.center.children);
break;
case "left":
this.layoutLeft(this.center.children);
break;
case "up":
case "bottom":
this.layoutUp(this.center.children);
break;
case "down":
case "top":
this.layoutDown(this.center.children);
break;
case "tipover":
case "tipovertree":
if (this.options.tipOverTreeStartLevel < 0) {
throw "The tip-over level should be a positive integer.";
}
this.tipOverTree(this.center.children, this.options.tipOverTreeStartLevel);
break;
case "undefined":
case "none":
break;
}
}
});
/**
* The various tree layout algorithms.
* @type {*}
*/
var TreeLayout = LayoutBase.extend({
init: function (diagram) {
var that = this;
LayoutBase.fn.init.call(that);
if (Utils.isUndefined(diagram)) {
throw "No diagram specified.";
}
this.diagram = diagram;
},
/**
* Arranges the diagram in a tree-layout with the specified options and tree subtype.
*/
layout: function (options) {
this.transferOptions(options);
// transform the diagram into a Graph
var adapter = new DiagramToHyperTreeAdapter(this.diagram);
/**
* The Graph reduction from the given diagram.
* @type {*}
*/
this.graph = adapter.convert();
var finalNodeSet = this.layoutComponents();
// note that the graph contains the original data and
// the components are another instance of nodes referring to the same set of shapes
return new diagram.LayoutState(this.diagram, finalNodeSet);
},
layoutComponents: function () {
if (this.graph.isEmpty()) {
return;
}
// split into connected components
var components = this.graph.getConnectedComponents();
if (Utils.isEmpty(components)) {
return;
}
var layout = new TreeLayoutProcessor(this.options);
var trees = [];
// find a spanning tree for each component
for (var i = 0; i < components.length; i++) {
var component = components[i];
var treeGraph = this.getTree(component);
if (!treeGraph) {
throw "Failed to find a spanning tree for the component.";
}
var root = treeGraph.root;
var tree = treeGraph.tree;
layout.layout(tree, root);
trees.push(tree);
}
return this.gridLayoutComponents(trees);
},
/**
* Gets a spanning tree (and root) for the given graph.
* Ensure that the given graph is connected!
* @param graph
* @returns {*} A literal object consisting of the found root and the spanning tree.
*/
getTree: function (graph) {
var root = null;
if (this.options.roots && this.options.roots.length > 0) {
for (var i = 0, len = graph.nodes.length; i < len; i++) {
var node = graph.nodes[i];
for (var j = 0; j < this.options.roots.length; j++) {
var givenRootShape = this.options.roots[j];
if (givenRootShape === node.associatedShape) {
root = node;
break;
}
}
}
}
if (!root) {
// finds the most probable root on the basis of the longest path in the component
root = graph.root();
// should not happen really
if (!root) {
throw "Unable to find a root for the tree.";
}
}
return this.getTreeForRoot(graph, root);
},
getTreeForRoot: function (graph, root) {
var tree = graph.getSpanningTree(root);
if (Utils.isUndefined(tree) || tree.isEmpty()) {
return null;
}
return {
tree: tree,
root: tree.root
};
}
});
/**
* The Sugiyama aka layered layout algorithm.
* @type {*}
*/
var LayeredLayout = LayoutBase.extend({
init: function (diagram) {
var that = this;
LayoutBase.fn.init.call(that);
if (Utils.isUndefined(diagram)) {
throw "Diagram is not specified.";
}
this.diagram = diagram;
},
layout: function (options) {
this.transferOptions(options);
var adapter = new DiagramToHyperTreeAdapter(this.diagram);
var graph = adapter.convert(options);
if (graph.isEmpty()) {
return;
}
// split into connected components
var components = graph.getConnectedComponents();
if (Utils.isEmpty(components)) {
return;
}
for (var i = 0; i < components.length; i++) {
var component = components[i];
this.layoutGraph(component, options);
}
var finalNodeSet = this.gridLayoutComponents(components);
return new diagram.LayoutState(this.diagram, finalNodeSet);
},
/**
* Initializes the runtime data properties of the layout.
* @private
*/
_initRuntimeProperties: function () {
for (var k = 0; k < this.graph.nodes.length; k++) {
var node = this.graph.nodes[k];
node.layer = -1;
node.downstreamLinkCount = 0;
node.upstreamLinkCount = 0;
node.isVirtual = false;
node.uBaryCenter = 0.0;
node.dBaryCenter = 0.0;
node.upstreamPriority = 0;
node.downstreamPriority = 0;
node.gridPosition = 0;
}
},
_prepare: function (graph) {
var current = [], i, l, link;
for (l = 0; l < graph.links.length; l++) {
// of many dummies have been inserted to make things work
graph.links[l].depthOfDumminess = 0;
}
// defines a mapping of a node to the layer index
var layerMap = new Dictionary();
Utils.forEach(graph.nodes, function (node) {
if (node.incoming.length === 0) {
layerMap.set(node, 0);
current.push(node);
}
});
while (current.length > 0) {
var next = current.shift();
for (i = 0; i < next.outgoing.length; i++) {
link = next.outgoing[i];
var target = link.target;
if (layerMap.containsKey(target)) {
layerMap.set(target, Math.max(layerMap.get(next) + 1, layerMap.get(target)));
} else {
layerMap.set(target, layerMap.get(next) + 1);
}
if (!contains(current, target)) {
current.push(target);
}
}
}
// the node count in the map defines how many layers w'll need
var layerCount = 0;
layerMap.forEachValue(function (nodecount) {
layerCount = Math.max(layerCount, nodecount);
});
var sortedNodes = [];
Utils.addRange(sortedNodes, layerMap.keys());
sortedNodes.sort(function (o1, o2) {
var o1layer = layerMap.get(o1);
var o2layer = layerMap.get(o2);
return Utils.sign(o2layer - o1layer);
});
for (var n = 0; n < sortedNodes.length; ++n) {
var node = sortedNodes[n];
var minLayer = Number.MAX_VALUE;
if (node.outgoing.length === 0) {
continue;
}
for (l = 0; l < node.outgoing.length; ++l) {
link = node.outgoing[l];
minLayer = Math.min(minLayer, layerMap.get(link.target));
}
if (minLayer > 1) {
layerMap.set(node, minLayer - 1);
}
}
this.layers = [];
for (i = 0; i < layerCount + 1; i++) {
this.layers.push([]);
}
layerMap.forEach(function (node, layer) {
node.layer = layer;
this.layers[layer].push(node);
}, this);
// set initial grid positions
for (l = 0; l < this.layers.length; l++) {
var layer = this.layers[l];
for (i = 0; i < layer.length; i++) {
layer[i].gridPosition = i;
}
}
},
/**
* Performs the layout of a single component.
*/
layoutGraph: function (graph, options) {
if (Utils.isUndefined(graph)) {
throw "No graph given or graph analysis of the diagram failed.";
}
if (Utils.isDefined(options)) {
this.transferOptions(options);
}
this.graph = graph;
// sets unique indices on the nodes
graph.setItemIndices();
// ensures no cycles present for this layout
var reversedEdges = graph.makeAcyclic();
// define the runtime props being used by the layout algorithm
this._initRuntimeProperties();
this._prepare(graph, options);
this._dummify();
this._optimizeCrossings();
this._swapPairs();
this.arrangeNodes();
this._moveThingsAround();
this._dedummify();
// re-reverse the links which were switched earlier
Utils.forEach(reversedEdges, function (e) {
if (e.points) {
e.points.reverse();
}
});
},
setMinDist: function (m, n, minDist) {
var l = m.layer;
var i = m.layerIndex;
this.minDistances[l][i] = minDist;
},
getMinDist: function (m, n) {
var dist = 0,
i1 = m.layerIndex,
i2 = n.layerIndex,
l = m.layer,
min = Math.min(i1, i2),
max = Math.max(i1, i2);
// use Sum()?
for (var k = min; k < max; ++k) {
dist += this.minDistances[l][k];
}
return dist;
},
placeLeftToRight: function (leftClasses) {
var leftPos = new Dictionary(), n, node;
for (var c = 0; c < this.layers.length; ++c) {
var classNodes = leftClasses[c];
if (!classNodes) {
continue;
}
for (n = 0; n < classNodes.length; n++) {
node = classNodes[n];
if (!leftPos.containsKey(node)) {
this.placeLeft(node, leftPos, c);
}
}
// adjust class
var d = Number.POSITIVE_INFINITY;
for (n = 0; n < classNodes.length; n++) {
node = classNodes[n];
var rightSibling = this.rightSibling(node);
if (rightSibling && this.nodeLeftClass.get(rightSibling) !== c) {
d = Math.min(d, leftPos.get(rightSibling) - leftPos.get(node) - this.getMinDist(node, rightSibling));
}
}
if (d === Number.POSITIVE_INFINITY) {
var D = [];
for (n = 0; n < classNodes.length; n++) {
node = classNodes[n];
var neighbors = [];
Utils.addRange(neighbors, this.upNodes.get(node));
Utils.addRange(neighbors, this.downNodes.get(node));
for (var e = 0; e < neighbors.length; e++) {
var neighbor = neighbors[e];
if (this.nodeLeftClass.get(neighbor) < c) {
D.push(leftPos.get(neighbor) - leftPos.get(node));
}
}
}
D.sort();
if (D.length === 0) {
d = 0;
}
else if (D.length % 2 === 1) {
d = D[this.intDiv(D.length, 2)];
}
else {
d = (D[this.intDiv(D.length, 2) - 1] + D[this.intDiv(D.length, 2)]) / 2;
}
}
for (n = 0; n < classNodes.length; n++) {
node = classNodes[n];
leftPos.set(node, leftPos.get(node) + d);
}
}
return leftPos;
},
placeRightToLeft: function (rightClasses) {
var rightPos = new Dictionary(), n, node;
for (var c = 0; c < this.layers.length; ++c) {
var classNodes = rightClasses[c];
if (!classNodes) {
continue;
}
for (n = 0; n < classNodes.length; n++) {
node = classNodes[n];
if (!rightPos.containsKey(node)) {
this.placeRight(node, rightPos, c);
}
}
// adjust class
var d = Number.NEGATIVE_INFINITY;
for (n = 0; n < classNodes.length; n++) {
node = classNodes[n];
var leftSibling = this.leftSibling(node);
if (leftSibling && this.nodeRightClass.get(leftSibling) !== c) {
d = Math.max(d, rightPos.get(leftSibling) - rightPos.get(node) + this.getMinDist(leftSibling, node));
}
}
if (d === Number.NEGATIVE_INFINITY) {
var D = [];
for (n = 0; n < classNodes.length; n++) {
node = classNodes[n];
var neighbors = [];
Utils.addRange(neighbors, this.upNodes.get(node));
Utils.addRange(neighbors, this.downNodes.get(node));
for (var e = 0; e < neighbors.length; e++) {
var neighbor = neighbors[e];
if (this.nodeRightClass.get(neighbor) < c) {
D.push(rightPos.get(node) - rightPos.get(neighbor));
}
}
}
D.sort();
if (D.length === 0) {
d = 0;
}
else if (D.length % 2 === 1) {
d = D[this.intDiv(D.length, 2)];
}
else {
d = (D[this.intDiv(D.length, 2) - 1] + D[this.intDiv(D.length, 2)]) / 2;
}
}
for (n = 0; n < classNodes.length; n++) {
node = classNodes[n];
rightPos.set(node, rightPos.get(node) + d);
}
}
return rightPos;
},
_getLeftWing: function () {
var leftWing = { value: null };
var result = this.computeClasses(leftWing, 1);
this.nodeLeftClass = leftWing.value;
return result;
},
_getRightWing: function () {
var rightWing = { value: null };
var result = this.computeClasses(rightWing, -1);
this.nodeRightClass = rightWing.value;
return result;
},
computeClasses: function (wingPair, d) {
var currentWing = 0,
wing = wingPair.value = new Dictionary();
for (var l = 0; l < this.layers.length; ++l) {
currentWing = l;
var layer = this.layers[l];
for (var n = d === 1 ? 0 : layer.length - 1; 0 <= n && n < layer.length; n += d) {
var node = layer[n];
if (!wing.containsKey(node)) {
wing.set(node, currentWing);
if (node.isVirtual) {
var ndsinl = this._nodesInLink(node);
for (var kk = 0; kk < ndsinl.length; kk++) {
var vnode = ndsinl[kk];
wing.set(vnode, currentWing);
}
}
}
else {
currentWing = wing.get(node);
}
}
}
var wings = [];
for (var i = 0; i < this.layers.length; i++) {
wings.push(null);
}
wing.forEach(function (node, classIndex) {
if (wings[classIndex] === null) {
wings[classIndex] = [];
}
wings[classIndex].push(node);
});
return wings;
},
_isVerticalLayout: function () {
return this.options.subtype.toLowerCase() === "up" || this.options.subtype.toLowerCase() === "down" || this.options.subtype.toLowerCase() === "vertical";
},
_isHorizontalLayout: function () {
return this.options.subtype.toLowerCase() === "right" || this.options.subtype.toLowerCase() === "left" || this.options.subtype.toLowerCase() === "horizontal";
},
_isIncreasingLayout: function () {
// meaning that the visiting of the layers goes in the natural order of increasing layer index
return this.options.subtype.toLowerCase() === "right" || this.options.subtype.toLowerCase() === "down";
},
_moveThingsAround: function () {
var i, l, node, layer, n, w;
// sort the layers by their grid position
for (l = 0; l < this.layers.length; ++l) {
layer = this.layers[l];
layer.sort(this._gridPositionComparer);
}
this.minDistances = [];
for (l = 0; l < this.layers.length; ++l) {
layer = this.layers[l];
this.minDistances[l] = [];
for (n = 0; n < layer.length; ++n) {
node = layer[n];
node.layerIndex = n;
this.minDistances[l][n] = this.options.nodeDistance;
if (n < layer.length - 1) {
if (this._isVerticalLayout()) {
this.minDistances[l][n] += (node.width + layer[n + 1].width) / 2;
}
else {
this.minDistances[l][n] += (node.height + layer[n + 1].height) / 2;
}
}
}
}
this.downNodes = new Dictionary();
this.upNodes = new Dictionary();
Utils.forEach(this.graph.nodes, function (node) {
this.downNodes.set(node, []);
this.upNodes.set(node, []);
}, this);
Utils.forEach(this.graph.links, function (link) {
var origin = link.source;
var dest = link.target;
var down = null, up = null;
if (origin.layer > dest.layer) {
down = link.source;
up = link.target;
}
else {
up = link.source;
down = link.target;
}
this.downNodes.get(up).push(down);
this.upNodes.get(down).push(up);
}, this);
this.downNodes.forEachValue(function (list) {
list.sort(this._gridPositionComparer);
}, this);
this.upNodes.forEachValue(function (list) {
list.sort(this._gridPositionComparer);
}, this);
for (l = 0; l < this.layers.length - 1; ++l) {
layer = this.layers[l];
for (w = 0; w < layer.length - 1; w++) {
var currentNode = layer[w];
if (!currentNode.isVirtual) {
continue;
}
var currDown = this.downNodes.get(currentNode)[0];
if (!currDown.isVirtual) {
continue;
}
for (n = w + 1; n < layer.length; ++n) {
node = layer[n];
if (!node.isVirtual) {
continue;
}
var downNode = this.downNodes.get(node)[0];
if (!downNode.isVirtual) {
continue;
}
if (currDown.gridPosition > downNode.gridPosition) {
var pos = currDown.gridPosition;
currDown.gridPosition = downNode.gridPosition;
downNode.gridPosition = pos;
var i1 = currDown.layerIndex;
var i2 = downNode.layerIndex;
this.layers[l + 1][i1] = downNode;
this.layers[l + 1][i2] = currDown;
currDown.layerIndex = i2;
downNode.layerIndex = i1;
}
}
}
}
var leftClasses = this._getLeftWing();
var rightClasses = this._getRightWing();
var leftPos = this.placeLeftToRight(leftClasses);
var rightPos = this.placeRightToLeft(rightClasses);
var x = new Dictionary();
Utils.forEach(this.graph.nodes, function (node) {
x.set(node, (leftPos.get(node) + rightPos.get(node)) / 2);
});
var order = new Dictionary();
var placed = new Dictionary();
for (l = 0; l < this.layers.length; ++l) {
layer = this.layers[l];
var sequenceStart = -1, sequenceEnd = -1;
for (n = 0; n < layer.length; ++n) {
node = layer[n];
order.set(node, 0);
placed.set(node, false);
if (node.isVirtual) {
if (sequenceStart === -1) {
sequenceStart = n;
}
else if (sequenceStart === n - 1) {
sequenceStart = n;
}
else {
sequenceEnd = n;
order.set(layer[sequenceStart], 0);
if (x.get(node) - x.get(layer[sequenceStart]) === this.getMinDist(layer[sequenceStart], node)) {
placed.set(layer[sequenceStart], true);
}
else {
placed.set(layer[sequenceStart], false);
}
sequenceStart = n;
}
}
}
}
var directions = [1, -1];
Utils.forEach(directions, function (d) {
var start = d === 1 ? 0 : this.layers.length - 1;
for (var l = start; 0 <= l && l < this.layers.length; l += d) {
var layer = this.layers[l];
var virtualStartIndex = this._firstVirtualNode(layer);
var virtualStart = null;
var sequence = null;
if (virtualStartIndex !== -1) {
virtualStart = layer[virtualStartIndex];
sequence = [];
for (i = 0; i < virtualStartIndex; i++) {
sequence.push(layer[i]);
}
}
else {
virtualStart = null;
sequence = layer;
}
if (sequence.length > 0) {
this._sequencer(x, null, virtualStart, d, sequence);
for (i = 0; i < sequence.length - 1; ++i) {
this.setMinDist(sequence[i], sequence[i + 1], x.get(sequence[i + 1]) - x.get(sequence[i]));
}
if (virtualStart) {
this.setMinDist(sequence[sequence.length - 1], virtualStart, x.get(virtualStart) - x.get(sequence[sequence.length - 1]));
}
}
while (virtualStart) {
var virtualEnd = this.nextVirtualNode(layer, virtualStart);
if (!virtualEnd) {
virtualStartIndex = virtualStart.layerIndex;
sequence = [];
for (i = virtualStartIndex + 1; i < layer.length; i++) {
sequence.push(layer[i]);
}
if (sequence.length > 0) {
this._sequencer(x, virtualStart, null, d, sequence);
for (i = 0; i < sequence.length - 1; ++i) {
this.setMinDist(sequence[i], sequence[i + 1], x.get(sequence[i + 1]) - x.get(sequence[i]));
}
this.setMinDist(virtualStart, sequence[0], x.get(sequence[0]) - x.get(virtualStart));
}
}
else if (order.get(virtualStart) === d) {
virtualStartIndex = virtualStart.layerIndex;
var virtualEndIndex = virtualEnd.layerIndex;
sequence = [];
for (i = virtualStartIndex + 1; i < virtualEndIndex; i++) {
sequence.push(layer[i]);
}
if (sequence.length > 0) {
this._sequencer(x, virtualStart, virtualEnd, d, sequence);
}
placed.set(virtualStart, true);
}
virtualStart = virtualEnd;
}
this.adjustDirections(l, d, order, placed);
}
}, this);
var fromLayerIndex = this._isIncreasingLayout() ? 0 : this.layers.length - 1;
var reachedFinalLayerIndex = function (k, ctx) {
if (ctx._isIncreasingLayout()) {
return k < ctx.layers.length;
}
else {
return k >= 0;
}
};
var layerIncrement = this._isIncreasingLayout() ? +1 : -1, offset = 0;
/**
* Calcs the max height of the given layer.
*/
function maximumHeight(layer, ctx) {
var height = Number.MIN_VALUE;
for (var n = 0; n < layer.length; ++n) {
var node = layer[n];
if (ctx._isVerticalLayout()) {
height = Math.max(height, node.height);
}
else {
height = Math.max(height, node.width);
}
}
return height;
}
for (i = fromLayerIndex; reachedFinalLayerIndex(i, this); i += layerIncrement) {
layer = this.layers[i];
var height = maximumHeight(layer, this);
for (n = 0; n < layer.length; ++n) {
node = layer[n];
if (this._isVerticalLayout()) {
node.x = x.get(node);
node.y = offset + height / 2;
}
else {
node.x = offset + height / 2;
node.y = x.get(node);
}
}
offset += this.options.layerSeparation + height;
}
},
adjustDirections: function (l, d, order, placed) {
if (l + d < 0 || l + d >= this.layers.length) {
return;
}
var prevBridge = null, prevBridgeTarget = null;
var layer = this.layers[l + d];
for (var n = 0; n < layer.length; ++n) {
var nextBridge = layer[n];
if (nextBridge.isVirtual) {
var nextBridgeTarget = this.getNeighborOnLayer(nextBridge, l);
if (nextBridgeTarget.isVirtual) {
if (prevBridge) {
var p = placed.get(prevBridgeTarget);
var clayer = this.layers[l];
var i1 = prevBridgeTarget.layerIndex;
var i2 = nextBridgeTarget.layerIndex;
for (var i = i1 + 1; i < i2; ++i) {
if (clayer[i].isVirtual) {
p = p && placed.get(clayer[i]);
}
}
if (p) {
order.set(prevBridge, d);
var j1 = prevBridge.layerIndex;
var j2 = nextBridge.layerIndex;
for (var j = j1 + 1; j < j2; ++j) {
if (layer[j].isVirtual) {
order.set(layer[j], d);
}
}
}
}
prevBridge = nextBridge;
prevBridgeTarget = nextBridgeTarget;
}
}
}
},
getNeighborOnLayer: function (node, l) {
var neighbor = this.upNodes.get(node)[0];
if (neighbor.layer === l) {
return neighbor;
}
neighbor = this.downNodes.get(node)[0];
if (neighbor.layer === l) {
return neighbor;
}
return null;
},
_sequencer: function (x, virtualStart, virtualEnd, dir, sequence) {
if (sequence.length === 1) {
this._sequenceSingle(x, virtualStart, virtualEnd, dir, sequence[0]);
}
if (sequence.length > 1) {
var r = sequence.length, t = this.intDiv(r, 2);
this._sequencer(x, virtualStart, virtualEnd, dir, sequence.slice(0, t));
this._sequencer(x, virtualStart, virtualEnd, dir, sequence.slice(t));
this.combineSequences(x, virtualStart, virtualEnd, dir, sequence);
}
},
_sequenceSingle: function (x, virtualStart, virtualEnd, dir, node) {
var neighbors = dir === -1 ? this.downNodes.get(node) : this.upNodes.get(node);
var n = neighbors.length;
if (n !== 0) {
if (n % 2 === 1) {
x.set(node, x.get(neighbors[this.intDiv(n, 2)]));
}
else {
x.set(node, (x.get(neighbors[this.intDiv(n, 2) - 1]) + x.get(neighbors[this.intDiv(n, 2)])) / 2);
}
if (virtualStart) {
x.set(node, Math.max(x.get(node), x.get(virtualStart) + this.getMinDist(virtualStart, node)));
}
if (virtualEnd) {
x.set(node, Math.min(x.get(node), x.get(virtualEnd) - this.getMinDist(node, virtualEnd)));
}
}
},
combineSequences: function (x, virtualStart, virtualEnd, dir, sequence) {
var r = sequence.length, t = this.intDiv(r, 2);
// collect left changes
var leftHeap = [], i, c, n, neighbors, neighbor, pair;
for (i = 0; i < t; ++i) {
c = 0;
neighbors = dir === -1 ? this.downNodes.get(sequence[i]) : this.upNodes.get(sequence[i]);
for (n = 0; n < neighbors.length; ++n) {
neighbor = neighbors[n];
if (x.get(neighbor) >= x.get(sequence[i])) {
c++;
}
else {
c--;
leftHeap.push({ k: x.get(neighbor) + this.getMinDist(sequence[i], sequence[t - 1]), v: 2 });
}
}
leftHeap.push({ k: x.get(sequence[i]) + this.getMinDist(sequence[i], sequence[t - 1]), v: c });
}
if (virtualStart) {
leftHeap.push({ k: x.get(virtualStart) + this.getMinDist(virtualStart, sequence[t - 1]), v: Number.MAX_VALUE });
}
leftHeap.sort(this._positionDescendingComparer);
// collect right changes
var rightHeap = [];
for (i = t; i < r; ++i) {
c = 0;
neighbors = dir === -1 ? this.downNodes.get(sequence[i]) : this.upNodes.get(sequence[i]);
for (n = 0; n < neighbors.length; ++n) {
neighbor = neighbors[n];
if (x.get(neighbor) <= x.get(sequence[i])) {
c++;
}
else {
c--;
rightHeap.push({ k: x.get(neighbor) - this.getMinDist(sequence[i], sequence[t]), v: 2 });
}
}
rightHeap.push({ k: x.get(sequence[i]) - this.getMinDist(sequence[i], sequence[t]), v: c });
}
if (virtualEnd) {
rightHeap.push({ k: x.get(virtualEnd) - this.getMinDist(virtualEnd, sequence[t]), v: Number.MAX_VALUE });
}
rightHeap.sort(this._positionAscendingComparer);
var leftRes = 0, rightRes = 0;
var m = this.getMinDist(sequence[t - 1], sequence[t]);
while (x.get(sequence[t]) - x.get(sequence[t - 1]) < m) {
if (leftRes < rightRes) {
if (leftHeap.length === 0) {
x.set(sequence[t - 1], x.get(sequence[t]) - m);
break;
}
else {
pair = leftHeap.shift();
leftRes = leftRes + pair.v;
x.set(sequence[t - 1], pair.k);
x.set(sequence[t - 1], Math.max(x.get(sequence[t - 1]), x.get(sequence[t]) - m));
}
}
else {
if (rightHeap.length === 0) {
x.set(sequence[t], x.get(sequence[t - 1]) + m);
break;
}
else {
pair = rightHeap.shift();
rightRes = rightRes + pair.v;
x.set(sequence[t], pair.k);
x.set(sequence[t], Math.min(x.get(sequence[t]), x.get(sequence[t - 1]) + m));
}
}
}
for (i = t - 2; i >= 0; i--) {
x.set(sequence[i], Math.min(x.get(sequence[i]), x.get(sequence[t - 1]) - this.getMinDist(sequence[i], sequence[t - 1])));
}
for (i = t + 1; i < r; i++) {
x.set(sequence[i], Math.max(x.get(sequence[i]), x.get(sequence[t]) + this.getMinDist(sequence[i], sequence[t])));
}
},
placeLeft: function (node, leftPos, leftClass) {
var pos = Number.NEGATIVE_INFINITY;
Utils.forEach(this._getComposite(node), function (v) {
var leftSibling = this.leftSibling(v);
if (leftSibling && this.nodeLeftClass.get(leftSibling) === this.nodeLeftClass.get(v)) {
if (!leftPos.containsKey(leftSibling)) {
this.placeLeft(leftSibling, leftPos, leftClass);
}
pos = Math.max(pos, leftPos.get(leftSibling) + this.getMinDist(leftSibling, v));
}
}, this);
if (pos === Number.NEGATIVE_INFINITY) {
pos = 0;
}
Utils.forEach(this._getComposite(node), function (v) {
leftPos.set(v, pos);
});
},
placeRight: function (node, rightPos, rightClass) {
var pos = Number.POSITIVE_INFINITY;
Utils.forEach(this._getComposite(node), function (v) {
var rightSibling = this.rightSibling(v);
if (rightSibling && this.nodeRightClass.get(rightSibling) === this.nodeRightClass.get(v)) {
if (!rightPos.containsKey(rightSibling)) {
this.placeRight(rightSibling, rightPos, rightClass);
}
pos = Math.min(pos, rightPos.get(rightSibling) - this.getMinDist(v, rightSibling));
}
}, this);
if (pos === Number.POSITIVE_INFINITY) {
pos = 0;
}
Utils.forEach(this._getComposite(node), function (v) {
rightPos.set(v, pos);
});
},
leftSibling: function (node) {
var layer = this.layers[node.layer],
layerIndex = node.layerIndex;
return layerIndex === 0 ? null : layer[layerIndex - 1];
},
rightSibling: function (node) {
var layer = this.layers[node.layer];
var layerIndex = node.layerIndex;
return layerIndex === layer.length - 1 ? null : layer[layerIndex + 1];
},
_getComposite: function (node) {
return node.isVirtual ? this._nodesInLink(node) : [node];
},
arrangeNodes: function () {
var i, l, ni, layer, node;
// Initialize node's base priority
for (l = 0; l < this.layers.length; l++) {
layer = this.layers[l];
for (ni = 0; ni < layer.length; ni++) {
node = layer[ni];
node.upstreamPriority = node.upstreamLinkCount;
node.downstreamPriority = node.downstreamLinkCount;
}
}
// Layout is invoked after MinimizeCrossings
// so we may assume node's barycenters are initially correct
var maxLayoutIterations = 2;
for (var it = 0; it < maxLayoutIterations; it++) {
for (i = this.layers.length - 1; i >= 1; i--) {
this.layoutLayer(false, i);
}
for (i = 0; i < this.layers.length - 1; i++) {
this.layoutLayer(true, i);
}
}
// Offset the whole structure so that there are no gridPositions < 0
var gridPos = Number.MAX_VALUE;
for (l = 0; l < this.layers.length; l++) {
layer = this.layers[l];
for (ni = 0; ni < layer.length; ni++) {
node = layer[ni];
gridPos = Math.min(gridPos, node.gridPosition);
}
}
if (gridPos < 0) {
for (l = 0; l < this.layers.length; l++) {
layer = this.layers[l];
for (ni = 0; ni < layer.length; ni++) {
node = layer[ni];
node.gridPosition = node.gridPosition - gridPos;
}
}
}
},
///
/// Layout of a single layer.
///
///
The layer to organize.
///
If set to
true we move down in the layer stack.
///
layoutLayer: function (down, layer) {
var iconsidered;
var considered;
if (down) {
considered = this.layers[iconsidered = layer + 1];
}
else {
considered = this.layers[iconsidered = layer - 1];
}
// list containing the nodes in the considered layer sorted by priority
var sorted = [];
for (var n = 0; n < considered.length; n++) {
sorted.push(considered[n]);
}
sorted.sort(function (n1, n2) {
var n1Priority = (n1.upstreamPriority + n1.downstreamPriority) / 2;
var n2Priority = (n2.upstreamPriority + n2.downstreamPriority) / 2;
if (Math.abs(n1Priority - n2Priority) < 0.0001) {
return 0;
}
if (n1Priority < n2Priority) {
return 1;
}
return -1;
});
// each node strives for its barycenter; high priority nodes start first
Utils.forEach(sorted, function (node) {
var nodeGridPos = node.gridPosition;
var nodeBaryCenter = this.calcBaryCenter(node);
var nodePriority = (node.upstreamPriority + node.downstreamPriority) / 2;
if (Math.abs(nodeGridPos - nodeBaryCenter) < 0.0001) {
// This node is exactly at its barycenter -> perfect
return;
}
if (Math.abs(nodeGridPos - nodeBaryCenter) < 0.25 + 0.0001) {
// This node is close enough to the barycenter -> should work
return;
}
if (nodeGridPos < nodeBaryCenter) {
// Try to move the node to the right in an
// attempt to reach its barycenter
while (nodeGridPos < nodeBaryCenter) {
if (!this.moveRight(node, considered, nodePriority)) {
break;
}
nodeGridPos = node.gridPosition;
}
}
else {
// Try to move the node to the left in an
// attempt to reach its barycenter
while (nodeGridPos > nodeBaryCenter) {
if (!this.moveLeft(node, considered, nodePriority)) {
break;
}
nodeGridPos = node.gridPosition;
}
}
}, this);
// after the layer has been rearranged we need to recalculate the barycenters
// of the nodes in the surrounding layers
if (iconsidered > 0) {
this.calcDownData(iconsidered - 1);
}
if (iconsidered < this.layers.length - 1) {
this.calcUpData(iconsidered + 1);
}
},
///
/// Moves the node to the right and returns true if this was possible.
///
///
The node.
///
The layer.
///
Returns true if the shift was possible, otherwise false .
moveRight: function (node, layer, priority) {
var index = Utils.indexOf(layer, node);
if (index === layer.length - 1) {
// this is the last node in the layer, so we can move to the right without troubles
node.gridPosition = node.gridPosition + 0.5;
return true;
}
var rightNode = layer[index + 1];
var rightNodePriority = (rightNode.upstreamPriority + rightNode.downstreamPriority) / 2;
// check if there is space between the right and the current node
if (rightNode.gridPosition > node.gridPosition + 1) {
node.gridPosition = node.gridPosition + 0.5;
return true;
}
// we have reached a node with higher priority; no movement is allowed
if (rightNodePriority > priority ||
Math.abs(rightNodePriority - priority) < 0.0001) {
return false;
}
// the right node has lower priority - try to move it
if (this.moveRight(rightNode, layer, priority)) {
node.gridPosition = node.gridPosition + 0.5;
return true;
}
return false;
},
///
/// Moves the node to the left and returns true if this was possible.
///
///
The node.
///
The layer.
///
Returns true if the shift was possible, otherwise false .
moveLeft: function (node, layer, priority) {
var index = Utils.indexOf(layer, node);
if (index === 0) {
// this is the last node in the layer, so we can move to the left without troubles
node.gridPosition = node.gridPosition - 0.5;
return true;
}
var leftNode = layer[index - 1];
var leftNodePriority = (leftNode.upstreamPriority + leftNode.downstreamPriority) / 2;
// check if there is space between the left and the current node
if (leftNode.gridPosition < node.gridPosition - 1) {
node.gridPosition = node.gridPosition - 0.5;
return true;
}
// we have reached a node with higher priority; no movement is allowed
if (leftNodePriority > priority ||
Math.abs(leftNodePriority - priority) < 0.0001) {
return false;
}
// The left node has lower priority - try to move it
if (this.moveLeft(leftNode, layer, priority)) {
node.gridPosition = node.gridPosition - 0.5;
return true;
}
return false;
},
mapVirtualNode: function (node, link) {
this.nodeToLinkMap.set(node, link);
if (!this.linkToNodeMap.containsKey(link)) {
this.linkToNodeMap.set(link, []);
}
this.linkToNodeMap.get(link).push(node);
},
_nodesInLink: function (node) {
return this.linkToNodeMap.get(this.nodeToLinkMap.get(node));
},
///
/// Inserts dummy nodes to break long links.
///
_dummify: function () {
this.linkToNodeMap = new Dictionary();
this.nodeToLinkMap = new Dictionary();
var layer, pos, newNode, node, r, newLink, i, l, links = this.graph.links.slice(0);
for (l = 0; l < links.length; l++) {
var link = links[l];
var o = link.source;
var d = link.target;
var oLayer = o.layer;
var dLayer = d.layer;
var oPos = o.gridPosition;
var dPos = d.gridPosition;
var step = (dPos - oPos) / Math.abs(dLayer - oLayer);
var p = o;
if (oLayer - dLayer > 1) {
for (i = oLayer - 1; i > dLayer; i--) {
newNode = new Node();
newNode.x = o.x;
newNode.y = o.y;
newNode.width = o.width / 100;
newNode.height = o.height / 100;
layer = this.layers[i];
pos = (i - dLayer) * step + oPos;
if (pos > layer.length) {
pos = layer.length;
}
// check if origin and dest are both last
if (oPos >= this.layers[oLayer].length - 1 &&
dPos >= this.layers[dLayer].length - 1) {
pos = layer.length;
}
// check if origin and destination are both first
else if (oPos === 0 && dPos === 0) {
pos = 0;
}
newNode.layer = i;
newNode.uBaryCenter = 0.0;
newNode.dBaryCenter = 0.0;
newNode.upstreamLinkCount = 0;
newNode.downstreamLinkCount = 0;
newNode.gridPosition = pos;
newNode.isVirtual = true;
Utils.insert(layer, newNode, pos);
// translate rightwards nodes' positions
for (r = pos + 1; r < layer.length; r++) {
node = layer[r];
node.gridPosition = node.gridPosition + 1;
}
newLink = new Link(p, newNode);
newLink.depthOfDumminess = 0;
p = newNode;
// add the new node and the new link to the graph
this.graph.nodes.push(newNode);
this.graph.addLink(newLink);
newNode.index = this.graph.nodes.length - 1;
this.mapVirtualNode(newNode, link);
}
// set the origin of the real arrow to the last dummy
link.changeSource(p);
link.depthOfDumminess = oLayer - dLayer - 1;
}
if (oLayer - dLayer < -1) {
for (i = oLayer + 1; i < dLayer; i++) {
newNode = new Node();
newNode.x = o.x;
newNode.y = o.y;
newNode.width = o.width / 100;
newNode.height = o.height / 100;
layer = this.layers[i];
pos = (i - oLayer) * step + oPos;
if (pos > layer.length) {
pos = layer.length;
}
// check if origin and dest are both last
if (oPos >= this.layers[oLayer].length - 1 &&
dPos >= this.layers[dLayer].length - 1) {
pos = layer.length;
}
// check if origin and destination are both first
else if (oPos === 0 && dPos === 0) {
pos = 0;
}
newNode.layer = i;
newNode.uBaryCenter = 0.0;
newNode.dBaryCenter = 0.0;
newNode.upstreamLinkCount = 0;
newNode.downstreamLinkCount = 0;
newNode.gridPosition = pos;
newNode.isVirtual = true;
pos &= pos; // truncates to int
Utils.insert(layer, newNode, pos);
// translate rightwards nodes' positions
for (r = pos + 1; r < layer.length; r++) {
node = layer[r];
node.gridPosition = node.gridPosition + 1;
}
newLink = new Link(p, newNode);
newLink.depthOfDumminess = 0;
p = newNode;
// add the new node and the new link to the graph
this.graph.nodes.push(newNode);
this.graph.addLink(newLink);
newNode.index = this.graph.nodes.length - 1;
this.mapVirtualNode(newNode, link);
}
// Set the origin of the real arrow to the last dummy
link.changeSource(p);
link.depthOfDumminess = dLayer - oLayer - 1;
}
}
},
///
/// Removes the dummy nodes inserted earlier to break long links.
///
///
The virtual nodes are effectively turned into intermediate connection points.
_dedummify: function () {
var dedum = true;
while (dedum) {
dedum = false;
for (var l = 0; l < this.graph.links.length; l++) {
var link = this.graph.links[l];
if (link.depthOfDumminess === 0) {
continue;
}
var points = [];
// add points in reverse order
points.unshift({ x: link.target.x, y: link.target.y });
points.unshift({ x: link.source.x, y: link.source.y });
// _dedummify the link
var temp = link;
var depthOfDumminess = link.depthOfDumminess;
for (var d = 0; d < depthOfDumminess; d++) {
var node = temp.source;
var prevLink = node.incoming[0];
points.unshift({ x: prevLink.source.x, y: prevLink.source.y });
temp = prevLink;
}
// restore the original link origin
link.changeSource(temp.source);
// reset dummification flag
link.depthOfDumminess = 0;
// note that we only need the intermediate points, floating links have been dropped in the analysis
if (points.length > 2) {
// first and last are the endpoints
points.splice(0, 1);
points.splice(points.length - 1);
link.points = points;
}
else {
link.points = [];
}
// we are not going to delete the dummy elements;
// they won't be needed anymore anyway.
dedum = true;
break;
}
}
},
///
/// Optimizes/reduces the crossings between the layers by turning the crossing problem into a (combinatorial) number ordering problem.
///
_optimizeCrossings: function () {
var moves = -1, i;
var maxIterations = 3;
var iter = 0;
while (moves !== 0) {
if (iter++ > maxIterations) {
break;
}
moves = 0;
for (i = this.layers.length - 1; i >= 1; i--) {
moves += this.optimizeLayerCrossings(false, i);
}
for (i = 0; i < this.layers.length - 1; i++) {
moves += this.optimizeLayerCrossings(true, i);
}
}
},
calcUpData: function (layer) {
if (layer === 0) {
return;
}
var considered = this.layers[layer], i, l, link;
var upLayer = new Set();
var temp = this.layers[layer - 1];
for (i = 0; i < temp.length; i++) {
upLayer.add(temp[i]);
}
for (i = 0; i < considered.length; i++) {
var node = considered[i];
// calculate barycenter
var sum = 0;
var total = 0;
for (l = 0; l < node.incoming.length; l++) {
link = node.incoming[l];
if (upLayer.contains(link.source)) {
total++;
sum += link.source.gridPosition;
}
}
for (l = 0; l < node.outgoing.length; l++) {
link = node.outgoing[l];
if (upLayer.contains(link.target)) {
total++;
sum += link.target.gridPosition;
}
}
if (total > 0) {
node.uBaryCenter = sum / total;
node.upstreamLinkCount = total;
}
else {
node.uBaryCenter = i;
node.upstreamLinkCount = 0;
}
}
},
calcDownData: function (layer) {
if (layer === this.layers.length - 1) {
return;
}
var considered = this.layers[layer], i , l, link;
var downLayer = new Set();
var temp = this.layers[layer + 1];
for (i = 0; i < temp.length; i++) {
downLayer.add(temp[i]);
}
for (i = 0; i < considered.length; i++) {
var node = considered[i];
// calculate barycenter
var sum = 0;
var total = 0;
for (l = 0; l < node.incoming.length; l++) {
link = node.incoming[l];
if (downLayer.contains(link.source)) {
total++;
sum += link.source.gridPosition;
}
}
for (l = 0; l < node.outgoing.length; l++) {
link = node.outgoing[l];
if (downLayer.contains(link.target)) {
total++;
sum += link.target.gridPosition;
}
}
if (total > 0) {
node.dBaryCenter = sum / total;
node.downstreamLinkCount = total;
}
else {
node.dBaryCenter = i;
node.downstreamLinkCount = 0;
}
}
},
///
/// Optimizes the crossings.
///
///
The big trick here is the usage of weights or values attached to connected nodes which turn a problem of crossing links
/// to an a problem of ordering numbers.
///
The layer index.
///
If set to
true we move down in the layer stack.
///
The number of nodes having moved, i.e. the number of crossings reduced.
optimizeLayerCrossings: function (down, layer) {
var iconsidered;
var considered;
if (down) {
considered = this.layers[iconsidered = layer + 1];
}
else {
considered = this.layers[iconsidered = layer - 1];
}
// remember what it was
var presorted = considered.slice(0);
// calculate barycenters for all nodes in the considered layer
if (down) {
this.calcUpData(iconsidered);
}
else {
this.calcDownData(iconsidered);
}
var that = this;
// sort nodes within this layer according to the barycenters
considered.sort(function(n1, n2) {
var n1BaryCenter = that.calcBaryCenter(n1),
n2BaryCenter = that.calcBaryCenter(n2);
if (Math.abs(n1BaryCenter - n2BaryCenter) < 0.0001) {
// in case of coinciding barycenters compare by the count of in/out links
if (n1.degree() === n2.degree()) {
return that.compareByIndex(n1, n2);
}
else if (n1.degree() < n2.degree()) {
return 1;
}
return -1;
}
var compareValue = (n2BaryCenter - n1BaryCenter) * 1000;
if (compareValue > 0) {
return -1;
}
else if (compareValue < 0) {
return 1;
}
return that.compareByIndex(n1, n2);
});
// count relocations
var i, moves = 0;
for (i = 0; i < considered.length; i++) {
if (considered[i] !== presorted[i]) {
moves++;
}
}
if (moves > 0) {
// now that the boxes have been arranged, update their grid positions
var inode = 0;
for (i = 0; i < considered.length; i++) {
var node = considered[i];
node.gridPosition = inode++;
}
}
return moves;
},
///
/// Swaps a pair of nodes in a layer.
///
///
Index of the layer.
///
The Nth node in the layer.
_swapPairs: function () {
var maxIterations = this.options.layeredIterations;
var iter = 0;
while (true) {
if (iter++ > maxIterations) {
break;
}
var downwards = (iter % 4 <= 1);
var secondPass = (iter % 4 === 1);
for (var l = (downwards ? 0 : this.layers.length - 1);
downwards ? l <= this.layers.length - 1 : l >= 0; l += (downwards ? 1 : -1)) {
var layer = this.layers[l];
var hasSwapped = false;
// there is no need to recalculate crossings if they were calculated
// on the previous step and nothing has changed
var calcCrossings = true;
var memCrossings = 0;
for (var n = 0; n < layer.length - 1; n++) {
// count crossings
var up = 0;
var down = 0;
var crossBefore = 0;
if (calcCrossings) {
if (l !== 0) {
up = this.countLinksCrossingBetweenTwoLayers(l - 1, l);
}
if (l !== this.layers.length - 1) {
down = this.countLinksCrossingBetweenTwoLayers(l, l + 1);
}
if (downwards) {
up *= 2;
}
else {
down *= 2;
}
crossBefore = up + down;
}
else {
crossBefore = memCrossings;
}
if (crossBefore === 0) {
continue;
}
// Swap nodes
var node1 = layer[n];
var node2 = layer[n + 1];
var node1GridPos = node1.gridPosition;
var node2GridPos = node2.gridPosition;
layer[n] = node2;
layer[n + 1] = node1;
node1.gridPosition = node2GridPos;
node2.gridPosition = node1GridPos;
// count crossings again and if worse than before, restore swapping
up = 0;
if (l !== 0) {
up = this.countLinksCrossingBetweenTwoLayers(l - 1, l);
}
down = 0;
if (l !== this.layers.length - 1) {
down = this.countLinksCrossingBetweenTwoLayers(l, l + 1);
}
if (downwards) {
up *= 2;
}
else {
down *= 2;
}
var crossAfter = up + down;
var revert = false;
if (secondPass) {
revert = crossAfter >= crossBefore;
}
else {
revert = crossAfter > crossBefore;
}
if (revert) {
node1 = layer[n];
node2 = layer[n + 1];
node1GridPos = node1.gridPosition;
node2GridPos = node2.gridPosition;
layer[n] = node2;
layer[n + 1] = node1;
node1.gridPosition = node2GridPos;
node2.gridPosition = node1GridPos;
// nothing has changed, remember the crossings so that
// they are not calculated again on the next step
memCrossings = crossBefore;
calcCrossings = false;
}
else {
hasSwapped = true;
calcCrossings = true;
}
}
if (hasSwapped) {
if (l !== this.layers.length - 1) {
this.calcUpData(l + 1);
}
if (l !== 0) {
this.calcDownData(l - 1);
}
}
}
}
},
///
/// Counts the number of links crossing between two layers.
///
///
The layer index.
///
Another layer index.
///
countLinksCrossingBetweenTwoLayers: function (ulayer, dlayer) {
var i, crossings = 0;
var upperLayer = new Set();
var temp1 = this.layers[ulayer];
for (i = 0; i < temp1.length; i++) {
upperLayer.add(temp1[i]);
}
var lowerLayer = new Set();
var temp2 = this.layers[dlayer];
for (i = 0; i < temp2.length; i++) {
lowerLayer.add(temp2[i]);
}
// collect the links located between the layers
var dlinks = new Set();
var links = [];
var temp = [];
upperLayer.forEach(function (node) {
//throw "";
Utils.addRange(temp, node.incoming);
Utils.addRange(temp, node.outgoing);
});
for (var ti = 0; ti < temp.length; ti++) {
var link = temp[ti];
if (upperLayer.contains(link.source) &&
lowerLayer.contains(link.target)) {
dlinks.add(link);
links.push(link);
}
else if (lowerLayer.contains(link.source) &&
upperLayer.contains(link.target)) {
links.push(link);
}
}
for (var l1 = 0; l1 < links.length; l1++) {
var link1 = links[l1];
for (var l2 = 0; l2 < links.length; l2++) {
if (l1 === l2) {
continue;
}
var link2 = links[l2];
var n11, n12;
var n21, n22;
if (dlinks.contains(link1)) {
n11 = link1.source;
n12 = link1.target;
}
else {
n11 = link1.target;
n12 = link1.source;
}
if (dlinks.contains(link2)) {
n21 = link2.source;
n22 = link2.target;
}
else {
n21 = link2.target;
n22 = link2.source;
}
var n11gp = n11.gridPosition;
var n12gp = n12.gridPosition;
var n21gp = n21.gridPosition;
var n22gp = n22.gridPosition;
if ((n11gp - n21gp) * (n12gp - n22gp) < 0) {
crossings++;
}
}
}
return crossings / 2;
},
calcBaryCenter: function (node) {
var upstreamLinkCount = node.upstreamLinkCount;
var downstreamLinkCount = node.downstreamLinkCount;
var uBaryCenter = node.uBaryCenter;
var dBaryCenter = node.dBaryCenter;
if (upstreamLinkCount > 0 && downstreamLinkCount > 0) {
return (uBaryCenter + dBaryCenter) / 2;
}
if (upstreamLinkCount > 0) {
return uBaryCenter;
}
if (downstreamLinkCount > 0) {
return dBaryCenter;
}
return 0;
},
_gridPositionComparer: function (x, y) {
if (x.gridPosition < y.gridPosition) {
return -1;
}
if (x.gridPosition > y.gridPosition) {
return 1;
}
return 0;
},
_positionAscendingComparer: function (x, y) {
return x.k < y.k ? -1 : x.k > y.k ? 1 : 0;
},
_positionDescendingComparer: function (x, y) {
return x.k < y.k ? 1 : x.k > y.k ? -1 : 0;
},
_firstVirtualNode: function (layer) {
for (var c = 0; c < layer.length; c++) {
if (layer[c].isVirtual) {
return c;
}
}
return -1;
},
compareByIndex: function (o1, o2) {
var i1 = o1.index;
var i2 = o2.index;
if (i1 < i2) {
return 1;
}
if (i1 > i2) {
return -1;
}
return 0;
},
intDiv: function (numerator, denominator) {
return (numerator - numerator % denominator) / denominator;
},
nextVirtualNode: function (layer, node) {
var nodeIndex = node.layerIndex;
for (var i = nodeIndex + 1; i < layer.length; ++i) {
if (layer[i].isVirtual) {
return layer[i];
}
}
return null;
}
});
/**
* Captures the state of a diagram; node positions, link points and so on.
* @type {*}
*/
var LayoutState = kendo.Class.extend({
init: function (diagram, graphOrNodes) {
if (Utils.isUndefined(diagram)) {
throw "No diagram given";
}
this.diagram = diagram;
this.nodeMap = new Dictionary();
this.linkMap = new Dictionary();
this.capture(graphOrNodes ? graphOrNodes : diagram);
},
/**
* Will capture either
* - the state of the shapes and the intermediate points of the connections in the diagram
* - the bounds of the nodes contained in the Graph together with the intermediate points of the links in the Graph
* - the bounds of the nodes in the Array
* - the links points and node bounds in the literal object
* @param diagramOrGraphOrNodes
*/
capture: function (diagramOrGraphOrNodes) {
var node,
nodes,
shape,
i,
conn,
link,
links;
if (diagramOrGraphOrNodes instanceof diagram.Graph) {
for (i = 0; i < diagramOrGraphOrNodes.nodes.length; i++) {
node = diagramOrGraphOrNodes.nodes[i];
shape = node.associatedShape;
//shape.bounds(new Rect(node.x, node.y, node.width, node.height));
this.nodeMap.set(shape.visual.id, new Rect(node.x, node.y, node.width, node.height));
}
for (i = 0; i < diagramOrGraphOrNodes.links.length; i++) {
link = diagramOrGraphOrNodes.links[i];
conn = link.associatedConnection;
this.linkMap.set(conn.visual.id, link.points());
}
}
else if (diagramOrGraphOrNodes instanceof Array) {
nodes = diagramOrGraphOrNodes;
for (i = 0; i < nodes.length; i++) {
node = nodes[i];
shape = node.associatedShape;
if (shape) {
this.nodeMap.set(shape.visual.id, new Rect(node.x, node.y, node.width, node.height));
}
}
}
else if (diagramOrGraphOrNodes.hasOwnProperty("links") && diagramOrGraphOrNodes.hasOwnProperty("nodes")) {
nodes = diagramOrGraphOrNodes.nodes;
links = diagramOrGraphOrNodes.links;
for (i = 0; i < nodes.length; i++) {
node = nodes[i];
shape = node.associatedShape;
if (shape) {
this.nodeMap.set(shape.visual.id, new Rect(node.x, node.y, node.width, node.height));
}
}
for (i = 0; i < links.length; i++) {
link = links[i];
conn = link.associatedConnection;
if (conn) {
this.linkMap.set(conn.visual.id, link.points);
}
}
}
else { // capture the diagram
var shapes = this.diagram.shapes;
var connections = this.diagram.connections;
for (i = 0; i < shapes.length; i++) {
shape = shapes[i];
this.nodeMap.set(shape.visual.id, shape.bounds());
}
for (i = 0; i < connections.length; i++) {
conn = connections[i];
this.linkMap.set(conn.visual.id, conn.points());
}
}
}
});
deepExtend(diagram, {
init: function (element) {
kendo.init(element, diagram.ui);
},
SpringLayout: SpringLayout,
TreeLayout: TreeLayout,
GraphAdapter: DiagramToHyperTreeAdapter,
LayeredLayout: LayeredLayout,
LayoutBase: LayoutBase,
LayoutState: LayoutState
});
})(window.kendo.jQuery);
(function ($, undefined) {
// Imports ================================================================
var dataviz = kendo.dataviz,
diagram = dataviz.diagram,
Widget = kendo.ui.Widget,
Class = kendo.Class,
proxy = $.proxy,
deepExtend = kendo.deepExtend,
HierarchicalDataSource = kendo.data.HierarchicalDataSource,
Canvas = diagram.Canvas,
Group = diagram.Group,
Visual = diagram.Visual,
Rectangle = diagram.Rectangle,
Circle = diagram.Circle,
CompositeTransform = diagram.CompositeTransform,
Rect = diagram.Rect,
Path = diagram.Path,
DeleteShapeUnit = diagram.DeleteShapeUnit,
DeleteConnectionUnit = diagram.DeleteConnectionUnit,
TextBlock = diagram.TextBlock,
Image = diagram.Image,
Point = diagram.Point,
Intersect = diagram.Intersect,
ConnectionEditAdorner = diagram.ConnectionEditAdorner,
UndoRedoService = diagram.UndoRedoService,
ToolService = diagram.ToolService,
Selector = diagram.Selector,
ResizingAdorner = diagram.ResizingAdorner,
ConnectorsAdorner = diagram.ConnectorsAdorner,
Cursors = diagram.Cursors,
Utils = diagram.Utils,
Observable = kendo.Observable,
Ticker = diagram.Ticker,
ToBackUnit = diagram.ToBackUnit,
ToFrontUnit = diagram.ToFrontUnit,
Dictionary = diagram.Dictionary,
PolylineRouter = diagram.PolylineRouter,
CascadingRouter = diagram.CascadingRouter,
isUndefined = Utils.isUndefined,
isDefined = Utils.isDefined,
defined = dataviz.util.defined,
isArray = $.isArray,
isFunction = kendo.isFunction,
isString = Utils.isString,
math = Math;
// Constants ==============================================================
var NS = ".kendoDiagram",
CASCADING = "Cascading",
POLYLINE = "Polyline",
ITEMBOUNDSCHANGE = "itemBoundsChange",
CHANGE = "change",
CLICK = "click",
ERROR = "error",
AUTO = "Auto",
TOP = "Top",
RIGHT = "Right",
LEFT = "Left",
BOTTOM = "Bottom",
MAXINT = 9007199254740992,
SELECT = "select",
ITEMROTATE = "itemRotate",
PAN = "pan",
ZOOM_START = "zoomStart",
ZOOM_END = "zoomEnd",
CONNECTION_CSS = "k-connection",
SHAPE_CSS = "k-shape",
SINGLE = "single",
NONE = "none",
MULTIPLE = "multiple",
DEFAULT_CANVAS_WIDTH = 600,
DEFAULT_CANVAS_HEIGHT = 600,
DEFAULT_SHAPE_TYPE = "rectangle",
DEFAULT_SHAPE_WIDTH = 100,
DEFAULT_SHAPE_HEIGHT = 100,
DEFAULT_SHAPE_MINWIDTH = 20,
DEFAULT_SHAPE_MINHEIGHT = 20,
DEFAULT_SHAPE_POSITION = 0,
DEFAULT_SHAPE_BACKGROUND = "SteelBlue",
DEFAULT_CONNECTION_BACKGROUND = "Yellow",
DEFAULT_CONNECTOR_SIZE = 8,
DEFAULT_HOVER_COLOR = "#70CAFF",
MAX_VALUE = Number.MAX_VALUE,
MIN_VALUE = -Number.MAX_VALUE,
ALL = "all",
ABSOLUTE = "absolute",
TRANSFORMED = "transformed",
ROTATED = "rotated",
TRANSPARENT = "transparent",
WIDTH = "width",
HEIGHT = "height",
X = "x",
Y = "y",
MOUSEWHEEL_NS = "DOMMouseScroll" + NS + " mousewheel" + NS,
MOBILE_ZOOM_RATE = 0.05,
MOBILE_PAN_DISTANCE = 5;
diagram.DefaultConnectors = [{
name: TOP,
description: "Top Connector"
}, {
name: RIGHT,
description: "Right Connector"
}, {
name: BOTTOM,
description: "Bottom Connector"
}, {
name: LEFT,
Description: "Left Connector"
}, {
name: AUTO,
Description: "Auto Connector",
position: function (shape) {
return shape.getPosition("center");
}
}];
diagram.shapeDefaults = function(extra) {
var defaults = {
type: DEFAULT_SHAPE_TYPE,
path: "",
autoSize: true,
visual: null,
x: DEFAULT_SHAPE_POSITION,
y: DEFAULT_SHAPE_POSITION,
minWidth: DEFAULT_SHAPE_MINWIDTH,
minHeight: DEFAULT_SHAPE_MINHEIGHT,
width: DEFAULT_SHAPE_WIDTH,
height: DEFAULT_SHAPE_HEIGHT,
hover: {},
editable: {
connect: true
},
connectors: diagram.DefaultConnectors,
rotation: {
angle: 0
}
};
Utils.simpleExtend(defaults, extra);
return defaults;
};
function mwDelta(e) {
var origEvent = e.originalEvent,
delta = 0;
if (origEvent.wheelDelta) {
delta = -origEvent.wheelDelta / 40;
delta = delta > 0 ? math.ceil(delta) : math.floor(delta);
} else if (origEvent.detail) {
delta = origEvent.detail;
}
return delta;
}
function isAutoConnector(connector) {
return connector.options.name.toLowerCase() === AUTO.toLowerCase();
}
function resolveConnectors(connection) {
var minDist = MAXINT,
sourcePoint, targetPoint,
source = connection.source(),
target = connection.target(),
autoSourceShape,
autoTargetShape,
sourceConnector,
preferred = [0, 2, 3, 1, 4],
k;
if (source instanceof Point) {
sourcePoint = source;
}
else if (source instanceof Connector) {
if (isAutoConnector(source)) {
autoSourceShape = source.shape;
}
else {
connection._resolvedSourceConnector = source;
sourcePoint = source.position();
}
}
if (target instanceof Point) {
targetPoint = target;
}
else if (target instanceof Connector) {
if (isAutoConnector(target)) {
autoTargetShape = target.shape;
}
else {
connection._resolvedTargetConnector = target;
targetPoint = target.position();
}
}
if (sourcePoint) {
if (autoTargetShape) {
connection._resolvedTargetConnector = closestConnector(sourcePoint, autoTargetShape);
}
} else if (autoSourceShape) {
if (targetPoint) {
connection._resolvedSourceConnector = closestConnector(targetPoint, autoSourceShape);
} else if (autoTargetShape) {
for (var i = 0; i < autoSourceShape.connectors.length; i++) {
if (autoSourceShape.connectors.length == 5) // presuming this means the default connectors
{
// will emphasize the vertical or horizontal direction, which matters when using the cascading router and distances which are equal for multiple connectors.
k = preferred[i];
}
else {
k = i;
}
sourceConnector = autoSourceShape.connectors[k];
if (!isAutoConnector(sourceConnector)) {
var currentSourcePoint = sourceConnector.position(),
currentTargetConnector = closestConnector(currentSourcePoint, autoTargetShape);
var dist = math.round(currentTargetConnector.position().distanceTo(currentSourcePoint)); // rounding prevents some not needed connectors switching.
if (dist < minDist) {
minDist = dist;
connection._resolvedSourceConnector = sourceConnector;
connection._resolvedTargetConnector = currentTargetConnector;
}
}
}
}
}
}
function closestConnector(point, shape) {
var minimumDistance = MAXINT, resCtr, ctrs = shape.connectors;
for (var i = 0; i < ctrs.length; i++) {
var ctr = ctrs[i];
if (!isAutoConnector(ctr)) {
var dist = point.distanceTo(ctr.position());
if (dist < minimumDistance) {
minimumDistance = dist;
resCtr = ctr;
}
}
}
return resCtr;
}
function indicesOfItems(group, visuals) {
var i, indices = [], visual;
var children = group.drawingContainer().children;
var length = children.length;
for (i = 0; i < visuals.length; i++) {
visual = visuals[i];
for (var j = 0; j < length; j++) {
if (children[j] == visual.drawingContainer()) {
indices.push(j);
break;
}
}
}
return indices;
}
function deserializeConnector(diagram, value) {
var point = Point.parse(value), ctr;
if (point) {
return point;
}
ctr = Connector.parse(diagram, value);
if (ctr) {
return ctr;
}
}
var DiagramElement = Observable.extend({
init: function (options, dataItem) {
var that = this;
Observable.fn.init.call(that);
that.options = deepExtend({ id: diagram.randomId() }, that.options, options);
that.isSelected = false;
that.dataItem = dataItem;
that.visual = new Group({
id: that.options.id,
autoSize: that.options.autoSize
});
that._template();
},
options: {
hover: {},
cursor: Cursors.grip,
content: {
align: "center middle",
text: ""
},
selectable: true,
serializable: true,
enable: true
},
_getCursor: function (point) {
if (this.adorner) {
return this.adorner._getCursor(point);
}
return this.options.cursor;
},
visible: function (value) {
if (isUndefined(value)) {
return this.visual.visible();
} else {
this.visual.visible(value);
}
},
bounds: function () {
},
refresh: function () {
this.visual.redraw();
},
position: function (point) {
this.options.x = point.x;
this.options.y = point.y;
this.visual.position(point);
},
toJSON: function() {
return {
id: this.options.id
};
},
serialize: function () {
// the options json object describes the shape perfectly. So this object can serve as shape serialization.
var json = deepExtend({}, { options: this.options });
if (this.dataItem) {
json.dataItem = this.dataItem.toString();
}
return json;
},
content: function (content) {
if (content !== undefined) {
var options = this.options;
var bounds = this.bounds();
if (diagram.Utils.isString(content)) {
options.content.text = content;
} else {
deepExtend(options.content, content);
}
var contentOptions = options.content;
var contentVisual = this._contentVisual;
if (!contentVisual && contentOptions.text) {
this._contentVisual = new TextBlock(contentOptions);
this._contentVisual._includeInBBox = false;
this.visual.append(this._contentVisual);
} else if (contentVisual) {
contentVisual.redraw(contentOptions);
}
}
return this.options.content.text;
},
_hitTest: function (point) {
var bounds = this.bounds();
return this.visible() && bounds.contains(point) && this.options.enable;
},
_template: function () {
var that = this;
if (that.options.content.template) {
var data = that.dataItem || {},
elementTemplate = kendo.template(that.options.content.template, {
paramName: "item"
});
that.options.content.text = elementTemplate(data);
}
},
_canSelect: function () {
return this.options.selectable !== false;
}
});
var Connector = Class.extend({
init: function (shape, options) {
this.options = deepExtend({}, this.options, options);
this.connections = [];
this.shape = shape;
},
options: {
width: 7,
height: 7,
fill: {
color: DEFAULT_CONNECTION_BACKGROUND
},
hover: {}
},
position: function () {
if (this.options.position) {
return this.options.position(this.shape);
} else {
return this.shape.getPosition(this.options.name);
}
},
toJSON: function () {
return {
shapeId: this.shape.toJSON().id,
connector: this.options.name
};
}
});
Connector.parse = function (diagram, str) {
var tempStr = str.split(":"),
id = tempStr[0],
name = tempStr[1] || AUTO;
for (var i = 0; i < diagram.shapes.length; i++) {
var shape = diagram.shapes[i];
if (shape.options.id == id) {
return shape.getConnector(name.trim());
}
}
};
var Shape = DiagramElement.extend({
init: function (options, dataItem) {
var that = this;
var diagram = options.diagram;
delete options.diagram; // avoid stackoverflow and reassign later on again
DiagramElement.fn.init.call(that, options, dataItem);
that.options.diagram = diagram;
options = that.options;
that.connectors = [];
that.type = options.type;
that.shapeVisual = Shape.createShapeVisual(that.options);
that.visual.append(this.shapeVisual);
that.updateBounds();
that.content(that.content());
// TODO: Swa added for phase 2; included here already because the GraphAdapter takes it into account
that._createConnectors();
that.parentContainer = null;
that.isContainer = false;
that.isCollapsed = false;
that.id = that.visual.id;
if (options.hasOwnProperty("layout") && options.layout!==undefined) {
// pass the defined shape layout, it overtakes the default resizing
that.layout = options.layout.bind(options);
}
},
options: diagram.shapeDefaults(),
updateBounds: function() {
var bounds = this.visual._measure(true);
var options = this.options;
this.bounds(new Rect(options.x, options.y, bounds.width, bounds.height));
this._rotate();
this._alignContent();
},
content: function(content) {
if (defined(content)) {
DiagramElement.fn.content.call(this, content);
this._alignContent();
return this;
} else {
return this.options.content.text;
}
},
_alignContent: function() {
var contentOptions = this.options.content || {};
var contentVisual = this._contentVisual;
if (contentVisual && contentOptions.align) {
var containerRect = this.visual._measure();
var aligner = new diagram.RectAlign(containerRect);
var contentBounds = contentVisual.drawingElement.bbox(null);
var contentRect = new Rect(0, 0, contentBounds.width(), contentBounds.height());
var alignedBounds = aligner.align(contentRect, contentOptions.align);
contentVisual.position(alignedBounds.topLeft());
}
},
_createConnectors: function() {
var options = this.options,
length = options.connectors.length,
connectorDefaults = options.connectorDefaults,
connector, i;
for (i = 0; i < length; i++) {
connector = new Connector(
this, deepExtend({},
connectorDefaults,
options.connectors[i]
)
);
this.connectors.push(connector);
}
},
bounds: function (value) {
var bounds;
if (value) {
if (isString(value)) {
switch (value) {
case TRANSFORMED :
bounds = this._transformedBounds();
break;
case ABSOLUTE :
bounds = this._transformedBounds();
var pan = this.diagram._pan;
bounds.x += pan.x;
bounds.y += pan.y;
break;
case ROTATED :
bounds = this._rotatedBounds();
break;
default:
bounds = this._bounds;
}
} else {
this._setBounds(value);
this.refreshConnections();
this._triggerBoundsChange();
}
} else {
bounds = this._bounds;
}
return bounds;
},
_setBounds: function(rect) {
var options = this.options;
var topLeft = rect.topLeft();
var x = options.x = topLeft.x;
var y = options.y = topLeft.y;
var width = options.width = math.max(rect.width, options.minWidth);
var height = options.height = math.max(rect.height, options.minHeight);
this._bounds = new Rect(x, y, width, height);
this.visual.redraw({
x: x,
y: y,
width: width,
height: height
});
},
position: function (point) {
if (point) {
this.bounds(new Rect(point.x, point.y, this._bounds.width, this._bounds.height));
} else {
return this._bounds.topLeft();
}
},
/**
* Returns a clone of this shape.
* @returns {Shape}
*/
clone: function () {
var json = this.serialize();
json.options.id = diagram.randomId();
var clone = new Shape(json.options);
clone.diagram = this.diagram;
/*clone.visual.native.id = clone.id;
clone.visual.id = clone.id;
clone.options.id = clone.id;*/
return clone;
},
select: function (value) {
var diagram = this.diagram, selected, deselected;
if (isUndefined(value)) {
value = true;
}
if (this._canSelect()) {
if (this.isSelected != value) {
selected = [];
deselected = [];
this.isSelected = value;
if (this.isSelected) {
diagram._selectedItems.push(this);
selected.push(this);
} else {
Utils.remove(diagram._selectedItems, this);
deselected.push(this);
}
if (!diagram._internalSelection) {
diagram._selectionChanged(selected, deselected);
}
return true;
}
}
},
rotate: function (angle, center) { // we assume the center is always the center of the shape.
var rotate = this.visual.rotate();
if (angle !== undefined) {
var b = this.bounds(),
sc = new Point(b.width / 2, b.height / 2),
deltaAngle,
newPosition;
if (center) {
deltaAngle = angle - rotate.angle;
newPosition = b.center().rotate(center, 360 - deltaAngle).minus(sc);
this._rotationOffset = this._rotationOffset.plus(newPosition.minus(b.topLeft()));
this.position(newPosition);
}
this.visual.rotate(angle, sc);
this.options.rotation.angle = angle;
if (this.diagram && this.diagram._connectorsAdorner) {
this.diagram._connectorsAdorner.refresh();
}
this.refreshConnections();
if (this.diagram) {
this.diagram.trigger(ITEMROTATE, {item: this});
}
}
return rotate;
},
connections: function (type) { // in, out, undefined = both
var result = [], i, j, con, cons, ctr;
for (i = 0; i < this.connectors.length; i++) {
ctr = this.connectors[i];
cons = ctr.connections;
for (j = 0, cons; j < cons.length; j++) {
con = cons[j];
if (type == "out") {
var source = con.source();
if (source.shape && source.shape == this) {
result.push(con);
}
} else if (type == "in") {
var target = con.target();
if (target.shape && target.shape == this) {
result.push(con);
}
} else {
result.push(con);
}
}
}
return result;
},
refreshConnections: function () {
$.each(this.connections(), function () {
this.refresh();
});
},
/**
* Gets a connector of this shape either by the connector's supposed name or
* via a Point in which case the closest connector will be returned.
* @param nameOrPoint The name of a Connector or a Point.
* @returns {Connector}
*/
getConnector: function (nameOrPoint) {
var i, ctr;
if (isString(nameOrPoint)) {
nameOrPoint = nameOrPoint.toLocaleLowerCase();
for (i = 0; i < this.connectors.length; i++) {
ctr = this.connectors[i];
if (ctr.options.name.toLocaleLowerCase() == nameOrPoint) {
return ctr;
}
}
} else if (nameOrPoint instanceof Point) {
return closestConnector(nameOrPoint, this);
} else {
return this.connectors.length ? this.connectors[0] : null;
}
},
getPosition: function (side) {
var b = this.bounds(),
fnName = side.charAt(0).toLowerCase() + side.slice(1);
if (isFunction(b[fnName])) {
return this._transformPoint(b[fnName]());
}
return b.center();
},
redraw: function (options) {
if (options) {
var shapeOptions = this.options;
var boundsChange;
this.shapeVisual.redraw(this._visualOptions(options));
if (this._diffNumericOptions(options, [WIDTH, HEIGHT, X, Y])) {
this.bounds(new Rect(shapeOptions.x, shapeOptions.y, shapeOptions.width, shapeOptions.height));
boundsChange = true;
}
shapeOptions = deepExtend(shapeOptions, options);
if (options.rotation || boundsChange) {
this._rotate();
}
if (options.content) {
this.content(options.content);
}
}
},
_diffNumericOptions: diagram.diffNumericOptions,
_visualOptions: function(options) {
return {
data: options.path,
source: options.source,
hover: options.hover,
fill: options.fill,
stroke: options.stroke,
startCap: options.startCap,
endCap: options.endCap
};
},
_triggerBoundsChange: function () {
if (this.diagram) {
this.diagram.trigger(ITEMBOUNDSCHANGE, {item: this, bounds: this._bounds.clone()}); // the trigger modifies the arguments internally.
}
},
_transformPoint: function (point) {
var rotate = this.rotate(),
bounds = this.bounds(),
tl = bounds.topLeft();
if (rotate.angle) {
point.rotate(rotate.center().plus(tl), 360 - rotate.angle);
}
return point;
},
_transformedBounds: function () {
var bounds = this.bounds(),
tl = bounds.topLeft(),
br = bounds.bottomRight();
return Rect.fromPoints(this.diagram.modelToView(tl), this.diagram.modelToView(br));
},
_rotatedBounds: function () {
var bounds = this.bounds().rotatedBounds(this.rotate().angle),
tl = bounds.topLeft(),
br = bounds.bottomRight();
return Rect.fromPoints(tl, br);
},
_rotate: function () {
var rotation = this.options.rotation;
if (rotation && rotation.angle) {
this.rotate(rotation.angle);
}
this._rotationOffset = new Point();
},
_hover: function (value) {
var options = this.options,
hover = options.hover,
stroke = options.stroke,
fill = options.fill;
if (value && isDefined(hover.stroke)) {
stroke = deepExtend({}, stroke, hover.stroke);
}
if (value && isDefined(hover.fill)) {
fill = hover.fill;
}
this.shapeVisual.redraw({
stroke: stroke,
fill: fill
});
if (options.editable && options.editable.connect) {
this.diagram._showConnectors(this, value);
}
},
_hitTest: function (value) {
if (this.visible()) {
var bounds = this.bounds(), rotatedPoint,
angle = this.rotate().angle;
if (value.isEmpty && !value.isEmpty()) { // rect selection
return Intersect.rects(value, bounds, angle ? angle : 0);
} else { // point
rotatedPoint = value.clone().rotate(bounds.center(), angle); // cloning is important because rotate modifies the point inline.
if (bounds.contains(rotatedPoint)) {
return this;
}
}
}
}
});
Shape.createShapeVisual = function(options) {
var diagram = options.diagram;
delete options.diagram; // avoid stackoverflow and reassign later on again
var shapeDefaults = deepExtend({}, options, { x: 0, y: 0 }),
visualTemplate = shapeDefaults.visual, // Shape visual should not have position in its parent group.
type = shapeDefaults.type;
function simpleShape(name, shapeDefaults) {
switch (name.toLocaleLowerCase()) {
case "rectangle":
return new Rectangle(shapeDefaults);
case "circle":
return new Circle(shapeDefaults);
case "text": // Maybe should be something else.
return new TextBlock(shapeDefaults);
case "image":
return new Image(shapeDefaults);
default:
var p = new Path(shapeDefaults);
return p;
}
}
function pathShape(path, shapeDefaults) {
shapeDefaults.data = path;
return new Path(shapeDefaults);
}
function functionShape(func, context, shapeDefaults) {
return func.call(context, shapeDefaults);
}
if (isFunction(visualTemplate)) { // custom template
return functionShape(visualTemplate, this, shapeDefaults);
} else if (shapeDefaults.path) {
return pathShape(shapeDefaults.path, shapeDefaults);
} else if (isString(type)) {
return simpleShape(shapeDefaults.type.toLocaleLowerCase(), shapeDefaults);
} else {
return new Rectangle(shapeDefaults);
}
};
/**
* The visual link between two Shapes through the intermediate of Connectors.
*/
var Connection = DiagramElement.extend({
init: function (from, to, options, dataItem) {
var that = this;
DiagramElement.fn.init.call(that, options, dataItem);
that._router = new PolylineRouter(this);
that.path = new diagram.Polyline(that.options);
that.path.fill(TRANSPARENT);
that.visual.append(that.path);
that._sourcePoint = that._targetPoint = new Point();
that.source(from);
that.target(to);
that.content(that.options.content);
that.definers = [];
if (defined(options) && options.points) {
that.points(options.points);
}
that.refresh();
},
options: {
hover: {
stroke: {}
},
startCap: NONE,
endCap: NONE,
points: [],
selectable: true
},
/**
* Gets the Point where the source of the connection resides.
* If the endpoint in Auto-connector the location of the resolved connector will be returned.
* If the endpoint is floating the location of the endpoint is returned.
*/
sourcePoint: function () {
return this._resolvedSourceConnector ? this._resolvedSourceConnector.position() : this._sourcePoint;
},
/**
* Gets or sets the Point where the source of the connection resides.
* @param source The source of this connection. Can be a Point, Shape, Connector.
* @param undoable Whether the change or assignment should be undoable.
*/
source: function (source, undoable) {
if (isDefined(source)) {
if (undoable && this.diagram) {
this.diagram.undoRedoService.addCompositeItem(new diagram.ConnectionEditUnit(this, source));
} else {
if (source !== undefined) {
this.from = source;
}
if (source === null) { // detach
if (this.sourceConnector) {
this._sourcePoint = this._resolvedSourceConnector.position();
this._clearSourceConnector();
}
} else if (source instanceof Connector) {
this.sourceConnector = source;
this.sourceConnector.connections.push(this);
this.refresh();
} else if (source instanceof Point) {
this._sourcePoint = source;
if (this.sourceConnector) {
this._clearSourceConnector();
}
this.refresh();
} else if (source instanceof Shape) {
this.sourceConnector = source.getConnector(AUTO);// source.getConnector(this.targetPoint());
this.sourceConnector.connections.push(this);
this.refresh();
}
}
}
return this.sourceConnector ? this.sourceConnector : this._sourcePoint;
},
/**
* Gets or sets the PathDefiner of the sourcePoint.
* The left part of this definer is always null since it defines the source tangent.
* @param value
* @returns {*}
*/
sourceDefiner: function (value) {
if (value) {
if (value instanceof diagram.PathDefiner) {
value.left = null;
this._sourceDefiner = value;
this.source(value.point); // refresh implicit here
} else {
throw "The sourceDefiner needs to be a PathDefiner.";
}
} else {
if (!this._sourceDefiner) {
this._sourceDefiner = new diagram.PathDefiner(this.sourcePoint(), null, null);
}
return this._sourceDefiner;
}
},
/**
* Gets the Point where the target of the connection resides.
*/
targetPoint: function () {
return this._resolvedTargetConnector ? this._resolvedTargetConnector.position() : this._targetPoint;
},
/**
* Gets or sets the Point where the target of the connection resides.
* @param target The target of this connection. Can be a Point, Shape, Connector.
* @param undoable Whether the change or assignment should be undoable.
*/
target: function (target, undoable) {
if (isDefined(target)) {
if (undoable && this.diagram) {
this.diagram.undoRedoService.addCompositeItem(new diagram.ConnectionEditUnit(this, target));
} else {
if (target !== undefined) {
this.to = target;
}
if (target === null) { // detach
if (this.targetConnector) {
this._targetPoint = this._resolvedTargetConnector.position();
this._clearTargetConnector();
}
} else if (target instanceof Connector) {
this.targetConnector = target;
this.targetConnector.connections.push(this);
this.refresh();
} else if (target instanceof Point) {
this._targetPoint = target;
if (this.targetConnector) {
this._clearTargetConnector();
}
this.refresh();
} else if (target instanceof Shape) {
this.targetConnector = target.getConnector(AUTO);// target.getConnector(this.sourcePoint());
if (this.targetConnector) {
this.targetConnector.connections.push(this);
this.refresh();
}
}
}
}
return this.targetConnector ? this.targetConnector : this._targetPoint;
},
/**
* Gets or sets the PathDefiner of the targetPoint.
* The right part of this definer is always null since it defines the target tangent.
* @param value
* @returns {*}
*/
targetDefiner: function (value) {
if (value) {
if (value instanceof diagram.PathDefiner) {
value.right = null;
this._targetDefiner = value;
this.target(value.point); // refresh implicit here
} else {
throw "The sourceDefiner needs to be a PathDefiner.";
}
} else {
if (!this._targetDefiner) {
this._targetDefiner = new diagram.PathDefiner(this.targetPoint(), null, null);
}
return this._targetDefiner;
}
},
content: function(content) {
var result = DiagramElement.fn.content.call(this, content);
if (defined(content)) {
this.refresh();
}
return result;
},
/**
* Selects or unselects this connections.
* @param value True to select, false to unselect.
*/
select: function (value) {
var diagram = this.diagram, selected, deselected;
if (this._canSelect()) {
if (this.isSelected !== value) {
this.isSelected = value;
selected = [];
deselected = [];
if (this.isSelected) {
this.adorner = new ConnectionEditAdorner(this, this.options.selection);
diagram._adorn(this.adorner, true);
diagram._selectedItems.push(this);
selected.push(this);
} else {
if (this.adorner) {
diagram._adorn(this.adorner, false);
Utils.remove(diagram._selectedItems, this);
this.adorner = undefined;
deselected.push(this);
}
}
this.refresh();
if (!diagram._internalSelection) {
diagram._selectionChanged(selected, deselected);
}
return true;
}
}
},
/**
* Gets or sets the bounds of this connection.
* @param value A Rect object.
* @remark This is automatically set in the refresh().
* @returns {Rect}
*/
bounds: function (value) {
if (value && !isString(value)) {
this._bounds = value;
} else {
return this._bounds;
}
},
/**
* Gets or sets the connection type (see ConnectionType enumeration).
* @param value A ConnectionType value.
* @returns {ConnectionType}
*/
type: function (value) {
if (value) {
if (value !== this._type) {
this._type = value;
switch (value.toLowerCase()) {
case CASCADING.toLowerCase():
this._router = new CascadingRouter(this);
break;
case POLYLINE.toLowerCase():
this._router = new PolylineRouter(this);
break;
default:
throw "Unsupported connection type.";
}
this.refresh();
}
} else {
return this._type;
}
},
/**
* Gets or sets the collection of *intermediate* points.
* The 'allPoints()' property will return all the points.
* The 'definers' property returns the definers of the intermediate points.
* The 'sourceDefiner' and 'targetDefiner' return the definers of the endpoints.
* @param value
*/
points: function (value) {
if (value) {
this.definers = [];
for (var i = 0; i < value.length; i++) {
var definition = value[i];
if (definition instanceof diagram.Point) {
this.definers.push(new diagram.PathDefiner(definition));
} else if (definition.hasOwnProperty("x") && definition.hasOwnProperty("y")) { // e.g. Clipboard does not preserve the Point definition and tunred into an Object
this.definers.push(new diagram.PathDefiner(new Point(definition.x, definition.y)));
} else {
throw "A Connection point needs to be a Point or an object with x and y properties.";
}
}
} else {
var pts = [];
if (isDefined(this.definers)) {
for (var k = 0; k < this.definers.length; k++) {
pts.push(this.definers[k].point);
}
}
return pts;
}
},
/**
* Gets all the points of this connection. This is the combination of the sourcePoint, the points and the targetPoint.
* @returns {Array}
*/
allPoints: function () {
var pts = [this.sourcePoint()];
if (this.definers) {
for (var k = 0; k < this.definers.length; k++) {
pts.push(this.definers[k].point);
}
}
pts.push(this.targetPoint());
return pts;
},
refresh: function () {
resolveConnectors(this);
var globalSourcePoint = this.sourcePoint(), globalSinkPoint = this.targetPoint(),
boundsTopLeft, localSourcePoint, localSinkPoint, middle;
this._refreshPath();
boundsTopLeft = this._bounds.topLeft();
localSourcePoint = globalSourcePoint.minus(boundsTopLeft);
localSinkPoint = globalSinkPoint.minus(boundsTopLeft);
if (this._contentVisual) {
middle = Point.fn.middleOf(localSourcePoint, localSinkPoint);
this._contentVisual.position(new Point(middle.x + boundsTopLeft.x, middle.y + boundsTopLeft.y));
}
if (this.adorner) {
this.adorner.refresh();
}
},
redraw: function (options) {
if (options) {
this.options = deepExtend({}, this.options, options);
var points = this.options.points;
if (options && options.content) {
this.content(options.content);
}
if (defined(points) && points.length > 0) {
this.points(points);
this._refreshPath();
}
this.path.redraw({
fill: options.fill,
stroke: options.stroke,
startCap: options.startCap,
endCap: options.endCap
});
}
},
/**
* Returns a clone of this connection.
* @returns {Connection}
*/
clone: function () {
var json = this.serialize(),
clone = new Connection(this.from, this.to, json.options);
clone.diagram = this.diagram;
return clone;
},
/**
* Returns a serialized connection in json format. Consist of the options and the dataItem.
* @returns {Connection}
*/
serialize: function () {
var json = deepExtend({}, {
options: this.options,
from: this.from.toJSON(),
to: this.to.toJSON()
});
if (this.dataItem) {
json.dataItem = this.dataItem.toString();
}
json.options.points = this.points();
return json;
},
/**
* Returns whether the given Point or Rect hits this connection.
* @param value
* @returns {Connection}
* @private
*/
_hitTest: function (value) {
if (this.visible()) {
var p = new Point(value.x, value.y), from = this.sourcePoint(), to = this.targetPoint();
if (value.isEmpty && !value.isEmpty() && value.contains(from) && value.contains(to)) {
return this;
}
if (this._router.hitTest(p)) {
return this;
}
}
},
_hover: function (value) {
var color = (this.options.stroke || {}).color;
if (value && isDefined(this.options.hover.stroke.color)) {
color = this.options.hover.stroke.color;
}
this.path.redraw({
stroke: {
color: color
}
});
},
_refreshPath: function () {
if (!defined(this.path)) {
return;
}
this._drawPath();
this.bounds(this._router.getBounds());
},
_drawPath: function () {
if (this._router) {
this._router.route(); // sets the intermediate points
}
var source = this.sourcePoint();
var target = this.targetPoint();
var points = this.points();
this.path.redraw({
points: [source].concat(points, [target])
});
},
_clearSourceConnector: function () {
Utils.remove(this.sourceConnector.connections, this);
this.sourceConnector = undefined;
this._resolvedSourceConnector = undefined;
},
_clearTargetConnector: function () {
Utils.remove(this.targetConnector.connections, this);
this.targetConnector = undefined;
this._resolvedTargetConnector = undefined;
}
});
var Diagram = Widget.extend({
init: function (element, userOptions) {
var that = this;
kendo.destroy(element);
Widget.fn.init.call(that, element, userOptions);
that._initElements();
that._initTheme();
that._extendLayoutOptions(that.options);
that._initShapeDefaults();
that._initCanvas();
that.mainLayer = new Group({
id: "main-layer"
});
that.canvas.append(that.mainLayer);
that._pan = new Point();
that._adorners = [];
that.adornerLayer = new Group({
id: "adorner-layer"
});
that.canvas.append(that.adornerLayer);
that._createHandlers();
that._initialize();
that._fetchFreshData();
that._resizingAdorner = new ResizingAdorner(that, { editable: that.options.editable });
that._connectorsAdorner = new ConnectorsAdorner(that);
that._adorn(that._resizingAdorner, true);
that._adorn(that._connectorsAdorner, true);
that.selector = new Selector(that);
// TODO: We may consider using real Clipboard API once is supported by the standard.
that._clipboard = [];
if (that.options.layout) {
that.layout(that.options.layout);
}
that.pauseMouseHandlers = false;
that._createShapes();
that._createConnections();
that.zoom(that.options.zoom);
that.canvas.draw();
},
options: {
name: "Diagram",
theme: "default",
layout: "",
zoomRate: 0.1,
zoom: 1,
minZoom: 0,
maxZoom: 2,
dataSource: {},
draggable: true,
template: "",
autoBind: true,
editable: {
rotate: {},
resize: {},
text: true
},
tooltip: { enabled: true, format: "{0}" },
copy: {
enabled: true,
offsetX: 20,
offsetY: 20
},
snap: {
enabled: true,
size: 10,
angle: 10
},
shapeDefaults: diagram.shapeDefaults({ undoable: true }),
connectionDefaults: {},
shapes: [],
connections: []
},
events: [ZOOM_END, ZOOM_START, PAN, SELECT, ITEMROTATE, ITEMBOUNDSCHANGE, CHANGE, CLICK],
_initElements: function() {
this.wrapper = this.element.empty()
.css("position", "relative")
.attr("tabindex", 0)
.addClass("k-widget k-diagram");
this.scrollable = $("
").appendTo(this.element);
},
_initShapeDefaults: function() {
var options = this.options;
if (options.editable === false) {
deepExtend(options.shapeDefaults, {
editable: {
connect: false
}
});
}
},
_initCanvas: function() {
var canvasContainer = $("
").appendTo(this.scrollable)[0];
var viewPort = this.viewport();
this.canvas = new Canvas(canvasContainer, {
width: viewPort.width || DEFAULT_CANVAS_WIDTH,
height: viewPort.height || DEFAULT_CANVAS_HEIGHT
});
},
_createHandlers: function () {
var that = this;
var element = that.element;
element.on(MOUSEWHEEL_NS, proxy(that._wheel, that));
if (!kendo.support.touch && !kendo.support.mobileOS) {
that.toolService = new ToolService(that);
element
.on("mousemove" + NS, proxy(that._mouseMove, that))
.on("mouseup" + NS, proxy(that._mouseUp, that))
.on("mousedown" + NS, proxy(that._mouseDown, that))
.on("keydown" + NS, proxy(that._keydown, that))
.on("mouseover" + NS, proxy(that._mouseover, that))
.on("mouseout" + NS, proxy(that._mouseout, that));
} else {
that._userEvents = new kendo.UserEvents(element, {
multiTouch: true
});
that._userEvents.bind(["gesturestart", "gesturechange", "gestureend"], {
gesturestart: proxy(that._gestureStart, that),
gesturechange: proxy(that._gestureChange, that),
gestureend: proxy(that._gestureEnd, that)
});
that.toolService = new ToolService(that);
that.scroller.enable();
}
that._resizeHandler = proxy(that.resize, that);
kendo.onResize(that._resizeHandler);
},
_gestureStart: function(e) {
this.scroller.disable();
this._gesture = e;
this._initialCenter = this.documentToModel(new Point(e.center.x, e.center.y));
this.trigger(ZOOM_START, {
point: this._initialCenter,
zoom: this.zoom()
});
},
_gestureChange: function(e) {
var previousGesture = this._gesture;
var initialCenter = this._initialCenter;
var center = this.documentToView(new Point(e.center.x, e.center.y));
var scaleDelta = e.distance / previousGesture.distance;
var zoom = this._zoom;
var updateZoom = false;
if (math.abs(scaleDelta - 1) >= MOBILE_ZOOM_RATE) {
this._zoom = zoom = this._getValidZoom(zoom * scaleDelta);
this.options.zoom = zoom;
this._gesture = e;
updateZoom = true;
}
var zoomedPoint = initialCenter.times(zoom);
var pan = center.minus(zoomedPoint);
if (updateZoom || this._pan.distanceTo(pan) >= MOBILE_PAN_DISTANCE) {
this._panTransform(pan);
}
e.preventDefault();
},
_gestureEnd: function() {
this.scroller.enable();
this.trigger(ZOOM_END, {
point: this._initialCenter,
zoom: this.zoom()
});
},
_resize: function(size) {
if (this.canvas) {
this.canvas.size(size);
}
},
_mouseover: function(e) {
var node = e.target._kendoNode;
if (node && node.srcElement._hover) {
node.srcElement._hover(true, node.srcElement);
}
},
_mouseout: function(e) {
var node = e.target._kendoNode;
if (node && node.srcElement._hover) {
node.srcElement._hover(false, node.srcElement);
}
},
_initTheme: function() {
var that = this,
themes = dataviz.ui.themes || {},
themeName = ((that.options || {}).theme || "").toLowerCase(),
themeOptions = (themes[themeName] || {}).diagram;
that.options = deepExtend({}, themeOptions, that.options);
},
_createShapes: function() {
var that = this,
options = that.options,
shapes = options.shapes,
shape, i;
for (i = 0; i < shapes.length; i++) {
shape = shapes[i];
that.addShape(shape);
}
},
_createConnections: function() {
var diagram = this,
options = diagram.options,
defaults = options.connectionDefaults,
connections = options.connections,
conn, source, target, i;
for(i = 0; i < connections.length; i++) {
conn = connections[i];
source = diagram._findConnectionShape(conn.from);
target = diagram._findConnectionShape(conn.to);
diagram.connect(source, target, deepExtend({}, defaults, conn));
}
},
_findConnectionShape: function(options) {
var diagram = this,
shapeId = isString(options) ? options : options.shapeId;
var shape = diagram.getShapeById(shapeId);
return shape.getConnector(options.connector || AUTO);
},
destroy: function () {
var that = this;
Widget.fn.destroy.call(that);
if (this._userEvents) {
this._userEvents.destroy();
}
kendo.unbindResize(that._resizeHandler);
that.clear();
that.element.off(NS);
that.canvas.destroy(true);
that.canvas = undefined;
that.destroyScroller();
},
destroyScroller: function () {
var scroller = this.scroller;
if (!scroller) {
return;
}
scroller.destroy();
scroller.element.remove();
this.scroller = null;
},
save: function () {
var json = {}, i;
json.shapes = [];
json.connections = [];
for (i = 0; i < this.shapes.length; i++) {
var shape = this.shapes[i];
if (shape.options.serializable) {
json.shapes.push(shape.options);
}
}
for (i = 0; i < this.connections.length; i++) {
var con = this.connections[i];
var conOptions = deepExtend({}, { from: con.from.toJSON(), to: con.to.toJSON() }, con.options);
json.connections.push(conOptions);
}
return json;
},
focus: function() {
if (!this.element.is(kendo._activeElement())) {
var element = this.element,
scrollContainer = element[0],
containers = [],
offsets = [],
documentElement = document.documentElement,
i;
do {
scrollContainer = scrollContainer.parentNode;
if (scrollContainer.scrollHeight > scrollContainer.clientHeight) {
containers.push(scrollContainer);
offsets.push(scrollContainer.scrollTop);
}
} while (scrollContainer != documentElement);
element.focus();
for (i = 0; i < containers.length; i++) {
containers[i].scrollTop = offsets[i];
}
}
},
load: function(options) {
this.clear();
this.setOptions(options);
this._createShapes();
this._createConnections();
},
setOptions: function(options) {
deepExtend(this.options, options);
},
clear: function () {
var that = this;
that.select(false);
that.mainLayer.clear();
that._initialize();
},
/**
* Connects two items.
* @param source Shape, Connector, Point.
* @param target Shape, Connector, Point.
* @param options Connection options that will be passed to the newly created connection.
* @returns The newly created connection.
*/
connect: function (source, target, options) {
var conOptions = deepExtend({}, this.options.connectionDefaults, options),
connection = new Connection(source, target, conOptions);
return this.addConnection(connection);
},
/**
* Determines whether the the two items are connected.
* @param source Shape, Connector, Point.
* @param target Shape, Connector, Point.
* @returns true if the two items are connected.
*/
connected: function (source, target) {
for (var i = 0; i < this.connections.length; i++) {
var c = this.connections[i];
if (c.from == source && c.to == target) {
return true;
}
}
return false;
},
/**
* Adds connection to the diagram.
* @param connection Connection.
* @param undoable Boolean.
* @returns The newly created connection.
*/
addConnection: function (connection, undoable) {
if (undoable === undefined) {
undoable = true;
}
if (undoable) {
var unit = new diagram.AddConnectionUnit(connection, this);
this.undoRedoService.add(unit);
} else {
connection.diagram = this;
this.mainLayer.append(connection.visual);
this.connections.push(connection);
}
return connection;
},
/**
* Adds shape to the diagram.
* @param item Shape, Point. If point is passed it will be created new Shape and positioned at that point.
* @param options. The options to be passed to the newly created Shape.
* @returns The newly created shape.
*/
addShape: function (item, options) {
var shape,
shapeDefaults = this.options.shapeDefaults;
if (item instanceof Shape) {
shapeDefaults = deepExtend({}, shapeDefaults, options);
item.redraw(options);
shape = item;
} else if (!(item instanceof kendo.Class)) {
shapeDefaults = deepExtend({}, shapeDefaults, item);
shape = new Shape(shapeDefaults);
} else {
return;
}
if (shapeDefaults.undoable) {
this.undoRedoService.add(new diagram.AddShapeUnit(shape, this));
} else {
this.shapes.push(shape);
shape.diagram = this;
this.mainLayer.append(shape.visual);
}
this.trigger(CHANGE, {
added: [shape],
removed: []
});
shape.redraw();
// for shapes which have their own internal layout mechanism
if (shape.hasOwnProperty("layout")) {
shape.layout(shape);
}
return shape;
},
/**
* Removes items (or single item) from the diagram.
* @param items DiagramElement, Array of Items.
* @param undoable.
*/
remove: function (items, undoable) {
var isMultiple = isArray(items);
if (isUndefined(undoable)) {
undoable = true;
}
if (undoable) {
this.undoRedoService.begin();
}
if (isMultiple) {
items = items.slice(0);
for (var i = 0; i < items.length; i++) {
this._removeItem(items[i], undoable);
}
} else if (items instanceof Shape || items instanceof Connection) {
this._removeItem(items, undoable);
}
if (undoable) {
this.undoRedoService.commit();
}
this.trigger(CHANGE, {
added: [],
removed: isMultiple ? items : [items]
});
},
/**
* Executes the next undoable action on top of the undo stack if any.
*/
undo: function () {
this.undoRedoService.undo();
},
/**
* Executes the previous undoable action on top of the redo stack if any.
*/
redo: function () {
this.undoRedoService.redo();
},
/**
* Selects items on the basis of the given input or returns the current selection if none.
* @param itemsOrRect DiagramElement, Array of elements, "All", false or Rect. A value 'false' will deselect everything.
* @param options
* @returns {Array}
*/
select: function (item, options) {
if (isDefined(item)) {
options = deepExtend({ addToSelection: false }, options);
var addToSelection = options.addToSelection,
items = [],
selected = [],
i, element;
if (!addToSelection) {
this.deselect();
}
this._internalSelection = true;
if (item instanceof Array) {
items = item;
} else if (item instanceof DiagramElement) {
items = [ item ];
}
for (i = 0; i < items.length; i++) {
element = items[i];
if (element.select(true)) {
selected.push(element);
}
}
this._selectionChanged(selected, []);
this._internalSelection = false;
} else {
return this._selectedItems;
}
},
selectAll: function() {
this.select(this.shapes.concat(this.connections));
},
selectArea: function(rect) {
var i, items, item;
this._internalSelection = true;
var selected = [];
if (rect instanceof Rect) {
items = this.shapes.concat(this.connections);
for (i = 0; i < items.length; i++) {
item = items[i];
if ((!rect || item._hitTest(rect)) && item.options.enable) {
if (item.select(true)) {
selected.push(item);
}
}
}
}
this._selectionChanged(selected, []);
this._internalSelection = false;
},
deselect: function(item) {
this._internalSelection = true;
var deselected = [],
items = [],
element, i;
if (item instanceof Array) {
items = item;
} else if (item instanceof DiagramElement) {
items.push(item);
} else if (!isDefined(item)) {
items = this._selectedItems.slice(0);
}
for (i = 0; i < items.length; i++) {
element = items[i];
if (element.select(false)) {
deselected.push(element);
}
}
this._selectionChanged([], deselected);
this._internalSelection = false;
},
/**
* Brings to front the passed items.
* @param items DiagramElement, Array of Items.
* @param undoable. By default the action is undoable.
*/
toFront: function (items, undoable) {
if (!items) {
items = this._selectedItems.slice();
}
var result = this._getDiagramItems(items), indices;
if (!defined(undoable) || undoable) {
indices = indicesOfItems(this.mainLayer, result.visuals);
var unit = new ToFrontUnit(this, items, indices);
this.undoRedoService.add(unit);
} else {
this.mainLayer.toFront(result.visuals);
this._fixOrdering(result, true);
}
},
/**
* Sends to back the passed items.
* @param items DiagramElement, Array of Items.
* @param undoable. By default the action is undoable.
*/
toBack: function (items, undoable) {
if (!items) {
items = this._selectedItems.slice();
}
var result = this._getDiagramItems(items), indices;
if (!defined(undoable) || undoable) {
indices = indicesOfItems(this.mainLayer, result.visuals);
var unit = new ToBackUnit(this, items, indices);
this.undoRedoService.add(unit);
}
else {
this.mainLayer.toBack(result.visuals);
this._fixOrdering(result, false);
}
},
/**
* Bring into view the passed item(s) or rectangle.
* @param items DiagramElement, Array of Items, Rect.
* @param options. align - controls the position of the calculated rectangle relative to the viewport.
* "Center middle" will position the items in the center. animate - controls if the pan should be animated.
*/
bringIntoView: function (item, options) { // jQuery|Item|Array|Rect
var viewport = this.viewport();
var aligner = new diagram.RectAlign(viewport);
var current, rect, original, newPan;
if (viewport.width === 0 || viewport.height === 0) {
return;
}
options = deepExtend({animate: false, align: "center middle"}, options);
if (options.align == "none") {
options.align = "center middle";
}
if (item instanceof DiagramElement) {
rect = item.bounds(TRANSFORMED);
} else if (isArray(item)) {
rect = this.boundingBox(item);
} else if (item instanceof Rect) {
rect = item.clone();
}
original = rect.clone();
rect.zoom(this._zoom);
this._storePan(new Point());
if (rect.width > viewport.width || rect.height > viewport.height) {
this._zoom = this._getValidZoom(math.min(viewport.width / original.width, viewport.height / original.height));
rect = original.clone().zoom(this._zoom);
}
this._zoomMainLayer();
current = rect.clone();
aligner.align(rect, options.align);
newPan = rect.topLeft().minus(current.topLeft());
this.pan(newPan.times(-1), options.animate);
},
alignShapes: function (direction) {
if (isUndefined(direction)) {
direction = "Left";
}
var items = this.select(),
val,
item,
i;
if (items.length === 0) {
return;
}
switch (direction.toLowerCase()) {
case "left":
case "top":
val = MAX_VALUE;
break;
case "right":
case "bottom":
val = MIN_VALUE;
break;
}
for (i = 0; i < items.length; i++) {
item = items[i];
if (item instanceof Shape) {
switch (direction.toLowerCase()) {
case "left":
val = math.min(val, item.options.x);
break;
case "top":
val = math.min(val, item.options.y);
break;
case "right":
val = math.max(val, item.options.x);
break;
case "bottom":
val = math.max(val, item.options.y);
break;
}
}
}
var undoStates = [];
var shapes = [];
for (i = 0; i < items.length; i++) {
item = items[i];
if (item instanceof Shape) {
shapes.push(item);
undoStates.push(item.bounds());
switch (direction.toLowerCase()) {
case "left":
case "right":
item.position(new Point(val, item.options.y));
break;
case "top":
case "bottom":
item.position(new Point(item.options.x, val));
break;
}
}
}
var unit = new diagram.TransformUnit(shapes, undoStates);
this.undoRedoService.add(unit, false);
},
zoom: function (zoom, options) {
if (zoom) {
var staticPoint = options ? options.point : new diagram.Point(0, 0);
// var meta = options ? options.meta : 0;
zoom = this._zoom = this._getValidZoom(zoom);
if (!isUndefined(staticPoint)) {//Viewpoint vector is constant
staticPoint = new diagram.Point(math.round(staticPoint.x), math.round(staticPoint.y));
var zoomedPoint = staticPoint.times(zoom);
var viewportVector = this.modelToView(staticPoint);
var raw = viewportVector.minus(zoomedPoint);//pan + zoomed point = viewpoint vector
this._storePan(new diagram.Point(math.round(raw.x), math.round(raw.y)));
}
if (options) {
options.zoom = zoom;
}
this._panTransform();
this._updateAdorners();
}
return this._zoom;
},
_getPan: function(pan) {
var canvas = this.canvas;
if (!canvas.translate) {
pan = pan.plus(this._pan);
}
return pan;
},
pan: function (pan, animate) {
if (pan instanceof Point) {
var that = this;
var scroller = that.scroller;
pan = that._getPan(pan);
pan = pan.times(-1);
if (animate) {
scroller.animatedScrollTo(pan.x, pan.y, function() {
that._updateAdorners();
});
} else {
scroller.scrollTo(pan.x, pan.y);
that._updateAdorners();
}
}
},
viewport: function () {
var element = this.element;
return new Rect(0, 0, element.width(), element.height());
},
copy: function () {
if (this.options.copy.enabled) {
this._clipboard = [];
this._copyOffset = 1;
for (var i = 0; i < this._selectedItems.length; i++) {
var item = this._selectedItems[i];
this._clipboard.push(item);
}
}
},
cut: function () {
if (this.options.copy.enabled) {
this._clipboard = [];
this._copyOffset = 0;
for (var i = 0; i < this._selectedItems.length; i++) {
var item = this._selectedItems[i];
this._clipboard.push(item);
}
this.remove(this._clipboard);
}
},
paste: function () {
var offsetX, offsetY, item, copied, connector, shape, i;
if (this._clipboard.length > 0) {
var mapping = new Dictionary();
offsetX = this._copyOffset * this.options.copy.offsetX;
offsetY = this._copyOffset * this.options.copy.offsetY;
this.deselect();
// first the shapes
for (i = 0; i < this._clipboard.length; i++) {
item = this._clipboard[i];
if (item instanceof Connection) {
continue;
}
copied = item.clone();
mapping.set(item.id, copied.id);
this._addItem(copied);
copied.position(new Point(item.options.x + offsetX, item.options.y + offsetY));
copied.select(true);
}
// then the connections
for (i = 0; i < this._clipboard.length; i++) {
item = this._clipboard[i];
if (item instanceof Shape) {
continue;
}
copied = item.clone();
if (item.source() instanceof Connector) { // if Point then it's a floating end
connector = item.source();
if (mapping.containsKey(connector.shape.id)) { // occurs when an attached connection is pasted with unselected shape parents
shape = this.getShapeById(mapping.get(connector.shape.id));
copied.source(shape.getConnector(connector.options.name));
} else {
copied.source(new Point(item.sourcePoint().x + offsetX, item.sourcePoint().y + offsetY));
}
}
if (item.target() instanceof Connector) {
connector = item.target();
if (mapping.containsKey(connector.shape.id)) {
shape = this.getShapeById(mapping.get(connector.shape.id));
copied.target(shape.getConnector(connector.options.name));
}
else {
copied.target(new Point(item.targetPoint().x + offsetX, item.targetPoint().y + offsetY));
}
}
this._addItem(copied);
copied.position(new Point(item.options.x + offsetX, item.options.y + offsetY));
copied.select(true);
}
this._copyOffset += 1;
}
},
/**
* Gets the bounding rectangle of the given items.
* @param items DiagramElement, Array of elements.
* @param origin Boolean. Pass 'true' if you need to get the bounding box of the shapes without their rotation offset.
* @returns {Rect}
*/
boundingBox: function (items, origin) {
var rect = Rect.empty(), temp,
di = isDefined(items) ? this._getDiagramItems(items) : {shapes: this.shapes};
if (di.shapes.length > 0) {
var item = di.shapes[0];
if (origin === true) {
rect.x -= item._rotationOffset.x;
rect.y -= item._rotationOffset.y;
}
rect = item.bounds(ROTATED);
for (var i = 1; i < di.shapes.length; i++) {
item = di.shapes[i];
temp = item.bounds(ROTATED);
if (origin === true) {
temp.x -= item._rotationOffset.x;
temp.y -= item._rotationOffset.y;
}
rect = rect.union(temp);
}
}
return rect;
},
documentToView: function(point) {
var containerOffset = this.element.offset();
return new Point(point.x - containerOffset.left, point.y - containerOffset.top);
},
viewToDocument: function(point) {
var containerOffset = this.element.offset();
return new Point(point.x + containerOffset.left, point.y + containerOffset.top);
},
viewToModel: function(point) {
return this._transformWithMatrix(point, this._matrixInvert);
},
modelToView: function(point) {
return this._transformWithMatrix(point, this._matrix);
},
modelToLayer: function(point) {
return this._transformWithMatrix(point, this._layerMatrix);
},
layerToModel: function(point) {
return this._transformWithMatrix(point, this._layerMatrixInvert);
},
documentToModel: function(point) {
var viewPoint = this.documentToView(point);
if (!this.canvas.translate) {
viewPoint.x = viewPoint.x + this.scroller.scrollLeft;
viewPoint.y = viewPoint.y + this.scroller.scrollTop;
}
return this.viewToModel(viewPoint);
},
modelToDocument: function(point) {
return this.viewToDocument(this.modelToView(point));
},
_transformWithMatrix: function(point, matrix) {
var result = point;
if (point instanceof Point) {
if (matrix) {
result = matrix.apply(point);
}
}
else {
var tl = this._transformWithMatrix(point.topLeft(), matrix),
br = this._transformWithMatrix(point.bottomRight(), matrix);
result = Rect.fromPoints(tl, br);
}
return result;
},
setDataSource: function (dataSource) {
this.options.dataSource = dataSource;
this._dataSource();
if (this.options.autoBind) {
this.dataSource.fetch();
}
},
/**
* Performs a diagram layout of the given type.
* @param layoutType The layout algorithm to be applied (TreeLayout, LayeredLayout, SpringLayout).
* @param options Layout-specific options.
*/
layout: function (options) {
this.isLayouting = true;
// TODO: raise layout event?
var type;
if(isUndefined(options)) {
options = this.options.layout;
}
if (isUndefined(options) || isUndefined(options.type)) {
type = "Tree";
}
else {
type = options.type;
}
var l;
switch (type.toLowerCase()) {
case "tree":
l = new diagram.TreeLayout(this);
break;
case "layered":
l = new diagram.LayeredLayout(this);
break;
case "forcedirected":
case "force":
case "spring":
case "springembedder":
l = new diagram.SpringLayout(this);
break;
default:
throw "Layout algorithm '" + type + "' is not supported.";
}
var initialState = new diagram.LayoutState(this);
var finalState = l.layout(options);
if (finalState) {
var unit = new diagram.LayoutUndoUnit(initialState, finalState, options ? options.animate : null);
this.undoRedoService.add(unit);
}
this.isLayouting = false;
},
/**
* Gets a shape on the basis of its identifier.
* @param id (string) the identifier of a shape.
* @returns {Shape}
*/
getShapeById: function (id) {
var found;
found = Utils.first(this.shapes, function (s) {
return s.visual.id === id;
});
if (found) {
return found;
}
found = Utils.first(this.connections, function (c) {
return c.visual.id === id;
});
return found;
},
_extendLayoutOptions: function(options) {
if(options.layout) {
options.layout = deepExtend(diagram.LayoutBase.fn.defaultOptions || {}, options.layout);
}
},
_selectionChanged: function (selected, deselected) {
if (selected.length || deselected.length) {
this.trigger(SELECT, { selected: selected, deselected: deselected });
}
},
_getValidZoom: function (zoom) {
return math.min(math.max(zoom, this.options.minZoom), this.options.maxZoom);
},
_panTransform: function (pos) {
var diagram = this,
pan = pos || diagram._pan;
if (diagram.canvas.translate) {
diagram.scroller.scrollTo(pan.x, pan.y);
diagram._zoomMainLayer();
} else {
diagram._storePan(pan);
diagram._transformMainLayer();
}
},
_finishPan: function () {
this.trigger(PAN, {total: this._pan, delta: Number.NaN});
},
_storePan: function (pan) {
this._pan = pan;
this._storeViewMatrix();
},
_zoomMainLayer: function () {
var zoom = this._zoom;
var transform = new CompositeTransform(0, 0, zoom, zoom);
transform.render(this.mainLayer);
this._storeLayerMatrix(transform);
this._storeViewMatrix();
},
_transformMainLayer: function () {
var pan = this._pan,
zoom = this._zoom;
var transform = new CompositeTransform(pan.x, pan.y, zoom, zoom);
transform.render(this.mainLayer);
this._storeLayerMatrix(transform);
this._storeViewMatrix();
},
_storeLayerMatrix: function(canvasTransform) {
this._layerMatrix = canvasTransform.toMatrix();
this._layerMatrixInvert = canvasTransform.invert().toMatrix();
},
_storeViewMatrix: function() {
var pan = this._pan,
zoom = this._zoom;
var transform = new CompositeTransform(pan.x, pan.y, zoom, zoom);
this._matrix = transform.toMatrix();
this._matrixInvert = transform.invert().toMatrix();
},
_toIndex: function (items, indices) {
var result = this._getDiagramItems(items);
this.mainLayer.toIndex(result.visuals, indices);
this._fixOrdering(result, false);
},
_fixOrdering: function (result, toFront) {
var shapePos = toFront ? this.shapes.length - 1 : 0,
conPos = toFront ? this.connections.length - 1 : 0,
i, item;
for (i = 0; i < result.shapes.length; i++) {
item = result.shapes[i];
Utils.remove(this.shapes, item);
Utils.insert(this.shapes, item, shapePos);
}
for (i = 0; i < result.cons.length; i++) {
item = result.cons[i];
Utils.remove(this.connections, item);
Utils.insert(this.connections, item, conPos);
}
},
_getDiagramItems: function (items) {
var i, result = {}, args = items;
result.visuals = [];
result.shapes = [];
result.cons = [];
if (!items) {
args = this._selectedItems.slice();
}
else if (!isArray(items)) {
args = [items];
}
for (i = 0; i < args.length; i++) {
var item = args[i];
if (item instanceof Shape) {
result.shapes.push(item);
result.visuals.push(item.visual);
}
else if (item instanceof Connection) {
result.cons.push(item);
result.visuals.push(item.visual);
}
}
return result;
},
_removeItem: function (item, undoable) {
item.select(false);
if (item instanceof Shape) {
this._removeShape(item, undoable);
}
else if (item instanceof Connection) {
this._removeConnection(item, undoable);
}
if (!undoable) {
this.mainLayer.remove(item.visual);
}
},
_removeShape: function (shape, undoable) {
var i, connection, connector,
sources = [], targets = [];
this.toolService._removeHover();
if (undoable) {
this.undoRedoService.addCompositeItem(new DeleteShapeUnit(shape));
}
else {
Utils.remove(this.shapes, shape);
}
for (i = 0; i < shape.connectors.length; i++) {
connector = shape.connectors[i];
for (var j = 0; j < connector.connections.length; j++) {
connection = connector.connections[j];
if (connection.sourceConnector == connector) {
sources.push(connection);
} else if (connection.targetConnector == connector) {
targets.push(connection);
}
}
}
for (i = 0; i < sources.length; i++) {
sources[i].source(null, undoable);
}
for (i = 0; i < targets.length; i++) {
targets[i].target(null, undoable);
}
},
_removeConnection: function (connection, undoable) {
if (connection.sourceConnector) {
Utils.remove(connection.sourceConnector.connections, connection);
}
if (connection.targetConnector) {
Utils.remove(connection.targetConnector.connections, connection);
}
if (undoable) {
this.undoRedoService.addCompositeItem(new DeleteConnectionUnit(connection));
}
else {
Utils.remove(this.connections, connection);
}
},
_removeDataItems: function(items, recursive) {
var item, children, shape, idx;
items = isArray(items) ? items : [items];
while (items.length) {
item = items.shift();
shape = this._dataMap[item.uid];
if (shape) {
this._removeShapeConnections(shape);
this._removeItem(shape, false);
delete this._dataMap[item.uid];
if (recursive && item.hasChildren && item.loaded()) {
children = item.children.data();
for (idx = 0; idx < children.length; idx++) {
items.push(children[idx]);
}
}
}
}
},
_removeShapeConnections: function(shape) {
var connections = shape.connections();
var idx;
if (connections) {
for (idx = 0; idx < connections.length; idx++) {
this._removeItem(connections[idx], false);
}
}
},
_addDataItem: function(dataItem) {
if (!defined(dataItem)) {
return;
}
var shape = this._dataMap[dataItem.uid];
if (shape) {
return shape;
}
var options = deepExtend({}, this.options.shapeDefaults, {
dataItem: dataItem
});
shape = new Shape(options, dataItem);
this.addShape(shape);
this._dataMap[dataItem.uid] = shape;
return shape;
},
_addDataItems: function(items, parent) {
var item, idx, shape, parentShape, connection;
for (idx = 0; idx < items.length; idx++) {
item = items[idx];
shape = this._addDataItem(item);
parentShape = this._addDataItem(parent);
if (parentShape && !this.connected(parentShape, shape)) { // check if connected to not duplicate connections.
connection = this.connect(parentShape, shape);
connection.type(CASCADING);
}
}
},
_refreshSource: function (e) {
var that = this,
node = e.node,
action = e.action,
items = e.items,
options = that.options,
idx;
if (e.field) {
return;
}
if (action == "remove") {
this._removeDataItems(e.items, true);
} else {
if (!action && !node) {
that.clear();
}
this._addDataItems(items, node);
for (idx = 0; idx < items.length; idx++) {
items[idx].load();
}
}
if (options.layout) {
that.layout(options.layout);
}
},
_mouseDown: function (e) {
if (this.pauseMouseHandlers) {
return;
}
var p = this._calculatePosition(e);
if (e.which == 1 && this.toolService.start(p, this._meta(e))) {
e.preventDefault();
}
},
_addItem: function (item) {
if (item instanceof Shape) {
this.addShape(item);
} else if (item instanceof Connection) {
this.addConnection(item);
}
},
_mouseUp: function (e) {
if (this.pauseMouseHandlers) {
return;
}
var p = this._calculatePosition(e);
if (e.which == 1 && this.toolService.end(p, this._meta(e))) {
e.preventDefault();
}
},
_mouseMove: function (e) {
if (this.pauseMouseHandlers) {
return;
}
var p = this._calculatePosition(e);
if ((e.which === 0 || e.which == 1)&& this.toolService.move(p, this._meta(e))) {
e.preventDefault();
}
},
_keydown: function (e) {
if (this.toolService.keyDown(e.keyCode, this._meta(e))) {
e.preventDefault();
}
},
_wheel: function (e) {
var delta = mwDelta(e),
p = this._calculatePosition(e),
meta = deepExtend(this._meta(e), { delta: delta });
if (this.toolService.wheel(p, meta)) {
e.preventDefault();
}
},
_meta: function (e) {
return { ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey };
},
_calculatePosition: function (e) {
var pointEvent = (e.pageX === undefined ? e.originalEvent : e),
point = new Point(pointEvent.pageX, pointEvent.pageY),
offset = this.documentToModel(point);
return offset;
},
_normalizePointZoom: function (point) {
return point.times(1 / this.zoom());
},
_initialize: function () {
this.shapes = [];
this._selectedItems = [];
this.connections = [];
this._dataMap = {};
this.undoRedoService = new UndoRedoService();
this.id = diagram.randomId();
},
_fetchFreshData: function () {
this._dataSource();
if (this.options.autoBind) {
this.dataSource.fetch();
}
},
_dataSource: function () {
var that = this,
options = that.options,
dataSource = options.dataSource;
dataSource = isArray(dataSource) ? { data: dataSource } : dataSource;
if (!dataSource.fields) {
dataSource.fields = [
{ field: "text" },
{ field: "url" },
{ field: "spriteCssClass" },
{ field: "imageUrl" }
];
}
if (that.dataSource && that._refreshHandler) {
that._unbindDataSource();
}
that._refreshHandler = proxy(that._refreshSource, that);
that._errorHandler = proxy(that._error, that);
that.dataSource = HierarchicalDataSource.create(dataSource)
.bind(CHANGE, that._refreshHandler)
.bind(ERROR, that._errorHandler);
},
_unbindDataSource: function () {
var that = this;
that.dataSource.unbind(CHANGE, that._refreshHandler).unbind(ERROR, that._errorHandler);
},
_error: function () {
// TODO: Do something?
},
_adorn: function (adorner, isActive) {
if (isActive !== undefined && adorner) {
if (isActive) {
this._adorners.push(adorner);
this.adornerLayer.append(adorner.visual);
}
else {
Utils.remove(this._adorners, adorner);
this.adornerLayer.remove(adorner.visual);
}
}
},
_showConnectors: function (shape, value) {
if (value) {
this._connectorsAdorner.show(shape);
} else {
this._connectorsAdorner.destroy();
}
},
_updateAdorners: function() {
var adorners = this._adorners;
for(var i = 0; i < adorners.length; i++) {
var adorner = adorners[i];
if (adorner.refreshBounds) {
adorner.refreshBounds();
}
adorner.refresh();
}
},
_refresh: function () {
var i;
for (i = 0; i < this.connections.length; i++) {
this.connections[i].refresh();
}
}
});
dataviz.ui.plugin(Diagram);
kendo.deepExtend(diagram, {
Shape: Shape,
Connection: Connection,
Connector: Connector
});
})(window.kendo.jQuery);
(function($, undefined) {
var math = Math,
proxy = $.proxy,
kendo = window.kendo,
Class = kendo.Class,
Widget = kendo.ui.Widget,
template = kendo.template,
deepExtend = kendo.deepExtend,
HierarchicalDataSource = kendo.data.HierarchicalDataSource,
getter = kendo.getter,
dataviz = kendo.dataviz;
var NS = ".kendoTreeMap",
CHANGE = "change",
DATA_BOUND = "dataBound",
ITEM_CREATED = "itemCreated",
MAX_VALUE = Number.MAX_VALUE,
MIN_VALUE = -Number.MAX_VALUE,
MOUSEOVER_NS = "mouseover" + NS,
MOUSELEAVE_NS = "mouseleave" + NS,
UNDEFINED = "undefined";
var TreeMap = Widget.extend({
init: function(element, options) {
kendo.destroy(element);
$(element).empty();
Widget.fn.init.call(this, element, options);
this._initTheme(this.options);
this.element.addClass("k-widget k-treemap");
this._setLayout();
this._originalOptions = deepExtend({}, this.options);
this._initDataSource();
this._attachEvents();
kendo.notify(this, dataviz.ui);
},
options: {
name: "TreeMap",
theme: "default",
autoBind: true,
textField: "",
valueField: ""
},
events: [DATA_BOUND, ITEM_CREATED],
_initTheme: function(options) {
var that = this,
themes = dataviz.ui.themes || {},
themeName = ((options || {}).theme || "").toLowerCase(),
themeOptions = (themes[themeName] || {}).treeMap;
that.options = deepExtend({}, themeOptions, options);
},
_attachEvents: function() {
this.element
.on(MOUSEOVER_NS, proxy(this._mouseover, this))
.on(MOUSELEAVE_NS, proxy(this._mouseleave, this));
},
_setLayout: function() {
if (this.options.type === "horizontal") {
this._layout = new SliceAndDice(false);
this._view = new SliceAndDiceView(this, this.options);
} else if (this.options.type === "vertical") {
this._layout = new SliceAndDice(true);
this._view = new SliceAndDiceView(this, this.options);
} else {
this._layout = new Squarified();
this._view = new SquarifiedView(this, this.options);
}
},
_initDataSource: function() {
var that = this,
options = that.options,
dataSource = options.dataSource;
that._dataChangeHandler = proxy(that._onDataChange, that);
that.dataSource = HierarchicalDataSource
.create(dataSource)
.bind(CHANGE, that._dataChangeHandler);
if (dataSource) {
if (that.options.autoBind) {
that.dataSource.fetch();
}
}
},
setDataSource: function(dataSource) {
var that = this;
that.dataSource.unbind(CHANGE, that._dataChangeHandler);
that.dataSource = dataSource
.bind(CHANGE, that._dataChangeHandler);
if (dataSource) {
if (that.options.autoBind) {
that.dataSource.fetch();
}
}
},
_onDataChange: function(e) {
var node = e.node;
var items = e.items;
var options = this.options;
var item, i, colors;
if (!node) {
this.element.empty();
item = this._wrapItem(items[0]);
this._layout.createRoot(
item,
this.element.outerWidth(),
this.element.outerHeight(),
this.options.type === "vertical"
);
this._view.createRoot(item);
// Reference of the root
this._root = item;
} else {
if (items.length) {
var root = this._getByUid(node.uid);
root.children = [];
if (!defined(root.minColor) && !defined(root.maxColor)) {
colors = options.colors || [];
} else {
colors = colorsByLength(root.minColor, root.maxColor, items.length) || [];
}
for (i = 0; i < items.length; i++) {
item = items[i];
root.children.push(this._wrapItem(item));
}
var htmlSize = this._view.htmlSize(root);
this._layout.compute(root.children, root.coord, htmlSize);
for (i = 0; i < root.children.length; i++) {
item = root.children[i];
if (!defined(item.color)) {
if (typeof(colors[0]) === "string") {
item.color = colors[i % colors.length];
} else {
var currentColors = colors[i % colors.length];
if (currentColors) {
item.color = currentColors[0];
item.minColor = currentColors[0];
item.maxColor = currentColors[1];
}
}
}
}
this._view.render(root);
}
}
for (i = 0; i < items.length; i++) {
items[i].load();
}
if (node) {
this.trigger(DATA_BOUND, {
node: node
});
}
},
_contentSize: function(root) {
this.view.renderHeight(root);
},
_wrapItem: function(item) {
var wrap = {};
if (defined(this.options.valueField)) {
wrap.value = getField(this.options.valueField, item);
}
if (defined(this.options.colorField)) {
wrap.color = getField(this.options.colorField, item);
}
if (defined(this.options.textField)) {
wrap.text = getField(this.options.textField, item);
}
wrap.level = item.level();
wrap.dataItem = item;
return wrap;
},
_getByUid: function(uid) {
var items = [this._root];
var item;
while (items.length) {
item = items.pop();
if (item.dataItem.uid === uid) {
return item;
}
if (item.children) {
items = items.concat(item.children);
}
}
},
dataItem: function(node) {
var uid = $(node).attr(kendo.attr("uid")),
dataSource = this.dataSource;
return dataSource && dataSource.getByUid(uid);
},
findByUid: function(uid) {
return this.element.find(".k-treemap-tile[" + kendo.attr("uid") + "='" + uid + "']");
},
_mouseover: function(e) {
var target = $(e.target);
if (target.hasClass("k-leaf")) {
this._removeActiveState();
target
.removeClass("k-state-hover")
.addClass("k-state-hover");
}
},
_removeActiveState: function() {
this.element
.find(".k-state-hover")
.removeClass("k-state-hover");
},
_mouseleave: function() {
this._removeActiveState();
},
destroy: function() {
Widget.fn.destroy.call(this);
this.element.off(NS);
if (this.dataSource) {
this.dataSource.unbind(CHANGE, this._dataChangeHandler);
}
this._root = null;
kendo.destroy(this.element);
},
items: function() {
return $();
},
getSize: function() {
return kendo.dimensions(this.element);
},
_resize: function() {
this.dataSource.fetch();
},
setOptions: function(options) {
var dataSource = options.dataSource;
options.dataSource = undefined;
this._originalOptions = deepExtend(this._originalOptions, options);
this.options = deepExtend({}, this._originalOptions);
this._setLayout();
this._initTheme(this.options);
Widget.fn._setEvents.call(this, options);
if (dataSource) {
this.setDataSource(HierarchicalDataSource.create(dataSource));
}
if (this.options.autoBind) {
this.dataSource.fetch();
}
}
});
var Squarified = Class.extend({
createRoot: function(root, width, height) {
root.coord = {
width: width,
height: height,
top: 0,
left: 0
};
},
leaf: function(tree) {
return !tree.children;
},
layoutChildren: function(items, coord) {
var parentArea = coord.width * coord.height;
var totalArea = 0,
itemsArea = [],
i;
for (i = 0; i < items.length; i++) {
itemsArea[i] = parseFloat(items[i].value);
totalArea += itemsArea[i];
}
for (i = 0; i < itemsArea.length; i++) {
items[i].area = parentArea * itemsArea[i] / totalArea;
}
var minimumSideValue = this.layoutHorizontal() ? coord.height : coord.width;
items = new kendo.data.Query(items)._sortForGrouping("value", "desc");
var firstElement = [items[0]];
var tail = items.slice(1);
this.squarify(tail, firstElement, minimumSideValue, coord);
},
squarify: function(tail, initElement, width, coord) {
this.computeDim(tail, initElement, width, coord);
},
computeDim: function(tail, initElement, width, coord) {
if (tail.length + initElement.length == 1) {
var element = tail.length == 1 ? tail : initElement;
this.layoutLast(element, width, coord);
return;
}
if (tail.length >= 2 && initElement.length === 0) {
initElement = [tail[0]];
tail = tail.slice(1);
}
if (tail.length === 0) {
if (initElement.length > 0) {
this.layoutRow(initElement, width, coord);
}
return;
}
var firstElement = tail[0];
if (this.worstAspectRatio(initElement, width) >= this.worstAspectRatio([firstElement].concat(initElement), width)) {
this.computeDim(tail.slice(1), initElement.concat([firstElement]), width, coord);
} else {
var newCoords = this.layoutRow(initElement, width, coord);
this.computeDim(tail, [], newCoords.dim, newCoords);
}
},
layoutLast: function(items, w, coord) {
items[0].coord = coord;
},
layoutRow: function(items, width, coord) {
if (this.layoutHorizontal()) {
return this.layoutV(items, width, coord);
} else {
return this.layoutH(items, width, coord);
}
},
orientation: "h",
layoutVertical: function() {
return this.orientation === "v";
},
layoutHorizontal: function() {
return this.orientation === "h";
},
layoutChange: function() {
this.orientation = this.layoutVertical() ? "h" : "v";
},
worstAspectRatio: function(items, width) {
if (!items || items.length === 0) {
return MAX_VALUE;
}
var areaSum = 0,
maxArea = 0,
minArea = MAX_VALUE;
for (var i = 0; i < items.length; i++) {
var area = items[i].area;
areaSum += area;
minArea = (minArea < area) ? minArea : area;
maxArea = (maxArea > area) ? maxArea : area;
}
return math.max(
(width * width * maxArea) / (areaSum * areaSum),
(areaSum * areaSum) / (width * width * minArea)
);
},
compute: function(children, rootCoord, htmlSize) {
if (!(rootCoord.width >= rootCoord.height && this.layoutHorizontal())) {
this.layoutChange();
}
if (children && children.length > 0) {
var newRootCoord = {
width: rootCoord.width,
height: rootCoord.height - htmlSize.text,
top: 0,
left: 0
};
this.layoutChildren(children, newRootCoord);
}
},
layoutV: function(items, width, coord) {
var totalArea = this._totalArea(items),
top = 0;
width = round(totalArea / width);
for (var i = 0; i < items.length; i++) {
var height = round(items[i].area / width);
items[i].coord = {
height: height,
width: width,
top: coord.top + top,
left: coord.left
};
top += height;
}
var ans = {
height: coord.height,
width: coord.width - width,
top: coord.top,
left: coord.left + width
};
ans.dim = math.min(ans.width, ans.height);
if (ans.dim != ans.height) {
this.layoutChange();
}
return ans;
},
layoutH: function(items, width, coord) {
var totalArea = this._totalArea(items);
var height = round(totalArea / width),
top = coord.top,
left = 0;
for (var i=0; i 180
)
.append($("
")
.html(this._getText(item)));
},
_createTile: function(item) {
var newCoord = {
width: item.coord.width,
height: item.coord.height,
left: item.coord.left,
top: item.coord.top
};
if (newCoord.left && this.offset) {
newCoord.width += this.offset * 2;
} else {
newCoord.width += this.offset;
}
if (newCoord.top) {
newCoord.height += this.offset * 2;
} else {
newCoord.height += this.offset;
}
var tile = $("
")
.css({
width: newCoord.width,
height: newCoord.height,
left: newCoord.left,
top: newCoord.top
});
if (defined(item.dataItem) && defined(item.dataItem.uid)) {
tile.attr(kendo.attr("uid"), item.dataItem.uid);
}
return tile;
},
_getText: function(item) {
var text = item.text;
if (this.options.template) {
text = this._renderTemplate(item);
}
return text;
},
_renderTemplate: function(item) {
var titleTemplate = template(this.options.template);
return titleTemplate({
dataItem: item.dataItem,
text: item.text
});
},
_createTitle: function(item) {
return $("
")
.append($("
").html(this._getText(item)));
},
_createWrap: function() {
return $("
");
},
_tileColorBrightness: function(item) {
return colorBrightness(item.color);
}
});
var SliceAndDice = Class.extend({
createRoot: function(root, width, height, vertical) {
root.coord = {
width: width,
height: height,
top: 0,
left: 0
};
root.vertical = vertical;
},
init: function(vertical) {
this.vertical = vertical;
this.quotient = vertical ? 1 : 0;
},
compute: function(children, rootCoord, htmlSize) {
if (children.length > 0) {
var width = rootCoord.width;
var height = rootCoord.height;
if (this.vertical) {
height -= htmlSize.text;
} else {
width -= htmlSize.text;
}
var newRootCoord = {
width: width,
height: height,
top: 0,
left: 0
};
this.layoutChildren(children, newRootCoord);
}
},
layoutChildren: function(items, coord) {
var parentArea = coord.width * coord.height;
var totalArea = 0;
var itemsArea = [];
var i;
for (i = 0; i < items.length; i++) {
var item = items[i];
itemsArea[i] = parseFloat(items[i].value);
totalArea += itemsArea[i];
item.vertical = this.vertical;
}
for (i = 0; i < itemsArea.length; i++) {
items[i].area = parentArea * itemsArea[i] / totalArea;
}
items = new kendo.data.Query(items)._sortForGrouping("value", "desc");
this.sliceAndDice(items, coord);
},
sliceAndDice: function(items, coord) {
var totalArea = this._totalArea(items);
if (items[0].level % 2 === this.quotient) {
this.layoutHorizontal(items, coord, totalArea);
} else {
this.layoutVertical(items, coord, totalArea);
}
},
layoutHorizontal: function(items, coord, totalArea) {
var left = 0;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var width = item.area / (totalArea / coord.width);
item.coord = {
height: coord.height,
width: width,
top: coord.top,
left: coord.left + left
};
left += width;
}
},
layoutVertical: function(items, coord, totalArea) {
var top = 0;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var height = item.area / (totalArea / coord.height);
item.coord = {
height: height,
width: coord.width,
top: coord.top + top,
left: coord.left
};
top += height;
}
},
_totalArea: function(items) {
var total = 0;
for (var i = 0; i < items.length; i++) {
total += items[i].area;
}
return total;
}
});
var SliceAndDiceView = SquarifiedView.extend({
htmlSize: function(root) {
var rootElement = this._getByUid(root.dataItem.uid);
var htmlSize = {
text: 0,
offset: 0
};
if (root.children) {
this._clean(rootElement);
var text = this._getText(root);
if (text) {
var title = this._createTitle(root);
rootElement.append(title);
if (root.vertical) {
htmlSize.text = title.height();
} else {
htmlSize.text = title.width();
}
}
rootElement.append(this._createWrap());
this.offset = (rootElement.outerWidth() - rootElement.innerWidth()) / 2;
}
return htmlSize;
},
_createTitle: function(item) {
var title;
if (item.vertical) {
title = $("
");
} else {
title = $("
");
}
return title.append($("
").html(this._getText(item)));
}
});
function valueOrDefault(value, defaultValue) {
return defined(value) ? value : defaultValue;
}
function getField(field, row) {
if (row === null) {
return row;
}
var get = getter(field, true);
return get(row);
}
function defined(value) {
return typeof value !== UNDEFINED;
}
function colorsByLength(min, max, length) {
var minRGBtoDecimal = rgbToDecimal(min);
var maxRGBtoDecimal = rgbToDecimal(max);
var isDarker = colorBrightness(min) - colorBrightness(max) < 0;
var colors = [];
colors.push(min);
for (var i = 0; i < length; i++) {
var rgbColor = {
r: colorByIndex(minRGBtoDecimal.r, maxRGBtoDecimal.r, i, length, isDarker),
g: colorByIndex(minRGBtoDecimal.g, maxRGBtoDecimal.g, i, length, isDarker),
b: colorByIndex(minRGBtoDecimal.b, maxRGBtoDecimal.b, i, length, isDarker)
};
colors.push(buildColorFromRGB(rgbColor));
}
colors.push(max);
return colors;
}
function colorByIndex(min, max, index, length, isDarker) {
var minColor = math.min(math.abs(min), math.abs(max));
var maxColor = math.max(math.abs(min), math.abs(max));
var step = (maxColor - minColor) / (length + 1);
var currentStep = step * (index + 1);
var color;
if (isDarker) {
color = minColor + currentStep;
} else {
color = maxColor - currentStep;
}
return color;
}
function buildColorFromRGB(color) {
return "#" + decimalToRgb(color.r) + decimalToRgb(color.g) + decimalToRgb(color.b);
}
function rgbToDecimal(color) {
color = color.replace("#", "");
var rgbColor = colorToRGB(color);
return {
r: rgbToHex(rgbColor.r),
g: rgbToHex(rgbColor.g),
b: rgbToHex(rgbColor.b)
};
}
function decimalToRgb(number) {
var result = math.round(number).toString(16).toUpperCase();
if (result.length === 1) {
result = "0" + result;
}
return result;
}
function colorToRGB(color) {
var colorLength = color.length;
var rgbColor = {};
if (colorLength === 3) {
rgbColor.r = color[0];
rgbColor.g = color[1];
rgbColor.b = color[2];
} else {
rgbColor.r = color.substring(0, 2);
rgbColor.g = color.substring(2, 4);
rgbColor.b = color.substring(4, 6);
}
return rgbColor;
}
function rgbToHex(rgb) {
return parseInt(rgb.toString(16), 16);
}
function colorBrightness(color) {
var brightness = 0;
if (color) {
color = rgbToDecimal(color);
brightness = math.sqrt(0.241 * color.r * color.r + 0.691 * color.g * color.g + 0.068 * color.b * color.b);
}
return brightness;
}
function round(value) {
var power = math.pow(10, 4);
return math.round(value * power) / power;
}
dataviz.ui.plugin(TreeMap);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.mobile.ui,
Shim = ui.Shim,
Widget = ui.Widget,
BEFORE_OPEN = "beforeOpen",
OPEN = "open",
CLOSE = "close",
INIT = "init",
WRAP = '
';
var ModalView = ui.View.extend({
init: function(element, options) {
var that = this, width, height;
Widget.fn.init.call(that, element, options);
element = that.element;
options = that.options;
width = element[0].style.width || "auto";
height = element[0].style.height || "auto";
element.addClass("km-modalview").wrap(WRAP);
that.wrapper = element.parent().css({
width: options.width || width || 300,
height: options.height || height || 300
}).addClass(height == "auto" ? " km-auto-height" : "");
element.css({ width: "", height: "" });
that.shim = new Shim(that.wrapper, {
modal: options.modal,
position: "center center",
align: "center center",
effect: "fade:in",
className: "km-modalview-root",
hide: function(e) {
if (that.trigger(CLOSE)) {
e.preventDefault();
}
}
});
that._id();
that._layout();
that._scroller();
that._model();
that.element.css("display", "");
that.trigger(INIT);
},
events: [
INIT,
BEFORE_OPEN,
OPEN,
CLOSE
],
options: {
name: "ModalView",
modal: true,
width: null,
height: null
},
destroy: function() {
Widget.fn.destroy.call(this);
this.shim.destroy();
},
open: function(target) {
var that = this;
that.target = $(target);
that.shim.show();
// necessary for the mobile view interface
that.trigger("show", { view: that });
},
// Interface implementation, called from the pane click handlers
openFor: function(target) {
if (!this.trigger(BEFORE_OPEN, { target: target })) {
this.open(target);
this.trigger(OPEN, { target: target });
}
},
close: function() {
if (this.element.is(":visible") && !this.trigger(CLOSE)) {
this.shim.hide();
}
}
});
ui.plugin(ModalView);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
mobile = kendo.mobile,
os = kendo.support.mobileOS,
Transition = kendo.effects.Transition,
roleSelector = kendo.roleSelector,
AXIS = "x",
ui = mobile.ui,
SWIPE_TO_OPEN = !(os.ios && os.majorVersion == 7 && !os.appMode),
BEFORE_SHOW = "beforeShow",
INIT = "init",
SHOW = "show",
HIDE = "hide",
AFTER_HIDE = "afterHide",
NULL_VIEW = { enable: $.noop };
var Drawer = ui.View.extend({
init: function(element, options) {
// move the drawer to the top, in order to hide it
$(element).parent().prepend(element);
mobile.ui.Widget.fn.init.call(this, element, options);
this._layout();
this._scroller();
this._model();
var pane = this.element.closest(roleSelector("pane")).data("kendoMobilePane"),
userEvents;
if (pane) {
this.pane = pane;
this.pane.bind("viewShow", function(e) {
drawer._viewShow(e);
});
this.pane.bind("sameViewRequested", function() {
drawer.hide();
});
userEvents = this.userEvents = new kendo.UserEvents(pane.element, {
filter: roleSelector("view splitview"),
allowSelection: true
});
} else {
this.currentView = NULL_VIEW;
var container = $(this.options.container);
if (!container) {
throw new Error("The drawer needs a container configuration option set.");
}
userEvents = this.userEvents = new kendo.UserEvents(container, { allowSelection: true });
this._attachTransition(container);
}
var drawer = this;
var hide = function(e) {
if (drawer.visible) {
drawer.hide();
e.preventDefault();
}
};
if (this.options.swipeToOpen && SWIPE_TO_OPEN) {
userEvents.bind("press", function(e) { drawer.transition.cancel(); });
userEvents.bind("start", function(e) { drawer._start(e); });
userEvents.bind("move", function(e) { drawer._update(e); });
userEvents.bind("end", function(e) { drawer._end(e); });
userEvents.bind("tap", hide);
} else {
userEvents.bind("press", hide);
}
this.leftPositioned = this.options.position === "left";
this.visible = false;
this.element.hide().addClass("km-drawer").addClass(this.leftPositioned ? "km-left-drawer" : "km-right-drawer");
this.trigger(INIT);
},
options: {
name: "Drawer",
position: "left",
views: [],
swipeToOpenViews: [],
swipeToOpen: true,
title: "",
container: null
},
events: [
BEFORE_SHOW,
HIDE,
AFTER_HIDE,
INIT,
SHOW
],
show: function() {
if (this._activate()) {
this._show();
}
},
hide: function() {
if (!this.currentView) {
return;
}
this.currentView.enable();
Drawer.current = null;
this._moveViewTo(0);
this.trigger(HIDE, { view: this });
},
// Alias in order to support popover/modalview etc. interface
openFor: function() {
if (this.visible) {
this.hide();
} else {
this.show();
}
},
destroy: function() {
ui.View.fn.destroy.call(this);
this.userEvents.destroy();
},
_activate: function() {
if (this.visible) {
return true;
}
var visibleOnCurrentView = this._currentViewIncludedIn(this.options.views);
if (!visibleOnCurrentView || this.trigger(BEFORE_SHOW, { view: this })) {
return false;
}
this._setAsCurrent();
this.element.show();
this.trigger(SHOW, { view: this });
return true;
},
_currentViewIncludedIn: function(views) {
if (!this.pane || !views.length) {
return true;
}
var view = this.pane.view();
return $.inArray(view.id.replace('#', ''), views) > -1 || $.inArray(view.element.attr("id"), views) > -1;
},
_show: function() {
this.currentView.enable(false);
this.visible = true;
var offset = this.element.width();
if (!this.leftPositioned) {
offset = -offset;
}
this._moveViewTo(offset);
},
_setAsCurrent: function() {
if (Drawer.last !== this) {
if (Drawer.last) {
Drawer.last.element.hide();
}
this.element.show();
}
Drawer.last = this;
Drawer.current = this;
},
_moveViewTo: function(offset) {
this.userEvents.cancel();
this.transition.moveTo({ location: offset, duration: 400, ease: Transition.easeOutExpo });
},
_viewShow: function(e) {
if (this.currentView) {
this.currentView.enable();
}
if (this.currentView === e.view) {
this.hide();
return;
}
this.currentView = e.view;
this._attachTransition(e.view.element);
},
_attachTransition: function(element) {
var that = this,
movable = this.movable,
currentOffset = movable && movable.x;
if (this.transition) {
this.transition.cancel();
this.movable.moveAxis("x", 0);
}
movable = this.movable = new kendo.ui.Movable(element);
this.transition = new Transition({
axis: AXIS,
movable: this.movable,
onEnd: function() {
if (movable[AXIS] === 0) {
element[0].style.cssText = "";
that.element.hide();
that.trigger(AFTER_HIDE);
that.visible = false;
}
}
});
if (currentOffset) {
element.addClass("k-fx-hidden");
kendo.animationFrame(function() {
element.removeClass("k-fx-hidden");
that.movable.moveAxis(AXIS, currentOffset);
that.hide();
});
}
},
_start: function(e) {
var userEvents = e.sender;
// ignore non-horizontal swipes
if (Math.abs(e.x.velocity) < Math.abs(e.y.velocity) || kendo.triggeredByInput(e.event) || !this._currentViewIncludedIn(this.options.swipeToOpenViews)) {
userEvents.cancel();
return;
}
var leftPositioned = this.leftPositioned,
visible = this.visible,
canMoveLeft = leftPositioned && visible || !leftPositioned && !Drawer.current,
canMoveRight = !leftPositioned && visible || leftPositioned && !Drawer.current,
leftSwipe = e.x.velocity < 0;
if ((canMoveLeft && leftSwipe) || (canMoveRight && !leftSwipe)) {
if (this._activate()) {
userEvents.capture();
return;
}
}
userEvents.cancel();
},
_update: function(e) {
var movable = this.movable,
newPosition = movable.x + e.x.delta,
limitedPosition;
if (this.leftPositioned) {
limitedPosition = Math.min(Math.max(0, newPosition), this.element.width());
} else {
limitedPosition = Math.max(Math.min(0, newPosition), -this.element.width());
}
this.movable.moveAxis(AXIS, limitedPosition);
e.event.preventDefault();
e.event.stopPropagation();
},
_end: function(e) {
var velocity = e.x.velocity,
pastHalf = Math.abs(this.movable.x) > this.element.width() / 2,
velocityThreshold = 0.8,
shouldShow;
if (this.leftPositioned) {
shouldShow = velocity > -velocityThreshold && (velocity > velocityThreshold || pastHalf);
} else {
shouldShow = velocity < velocityThreshold && (velocity < -velocityThreshold || pastHalf);
}
if(shouldShow) {
this._show();
} else {
this.hide();
}
}
});
ui.plugin(Drawer);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.mobile.ui,
Widget = ui.Widget,
EXPANED_PANE_SHIM = "
",
View = ui.View;
var SplitView = View.extend({
init: function(element, options) {
var that = this, pane;
Widget.fn.init.call(that, element, options);
element = that.element;
$.extend(that, options);
that._id();
that._layout();
that._overlay();
that._style();
kendo.mobile.init(element.children(kendo.roleSelector("modalview")));
that.panes = [];
that._paramsHistory = [];
that.content.children(kendo.roleSelector("pane")).each(function() {
pane = kendo.initWidget(this, {}, ui.roles);
that.panes.push(pane);
});
that.expandedPaneShim = $(EXPANED_PANE_SHIM).appendTo(that.element);
that._shimUserEvents = new kendo.UserEvents(that.expandedPaneShim, {
tap: function() {
that.collapsePanes();
}
});
},
options: {
name: "SplitView",
style: "horizontal"
},
expandPanes: function() {
this.element.addClass("km-expanded-splitview");
},
collapsePanes: function() {
this.element.removeClass("km-expanded-splitview");
},
// Implement view interface
_layout: function() {
var that = this,
element = that.element;
that.transition = kendo.attrValue(element, "transition");
kendo.mobile.ui.View.prototype._layout.call(this);
kendo.mobile.init(this.header.add(this.footer));
that.element.addClass("km-splitview");
that.content.addClass("km-split-content");
},
_style: function () {
var style = this.options.style,
element = this.element,
styles;
if (style) {
styles = style.split(" ");
$.each(styles, function () {
element.addClass("km-split-" + this);
});
}
},
showStart: function() {
var that = this;
that.element.css("display", "");
if (!that.inited) {
that.inited = true;
$.each(that.panes, function() {
if (this.options.initial) {
this.navigateToInitial();
} else {
this.navigate("");
}
});
that.trigger("init", {view: that});
}
that.trigger("show", {view: that});
}
});
ui.plugin(SplitView);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
mobile = kendo.mobile,
support = kendo.support,
Pane = mobile.ui.Pane,
DEFAULT_OS = "ios7",
OS = support.mobileOS,
BERRYPHONEGAP = OS.device == "blackberry" && OS.flatVersion >= 600 && OS.flatVersion < 1000 && OS.appMode,
VERTICAL = "km-vertical",
CHROME = OS.browser === "chrome",
BROKEN_WEBVIEW_RESIZE = OS.ios && OS.flatVersion >= 700 && (OS.appMode || CHROME),
INITIALLY_HORIZONTAL = (Math.abs(window.orientation) / 90 == 1),
HORIZONTAL = "km-horizontal",
MOBILE_PLATFORMS = {
ios7: { ios: true, browser: "default", device: "iphone", flatVersion: "700", majorVersion: "7", minorVersion: "0.0", name: "ios", tablet: false },
ios: { ios: true, browser: "default", device: "iphone", flatVersion: "612", majorVersion: "6", minorVersion: "1.2", name: "ios", tablet: false },
android: { android: true, browser: "default", device: "android", flatVersion: "442", majorVersion: "4", minorVersion: "4.2", name: "android", tablet: false },
blackberry: { blackberry: true, browser: "default", device: "blackberry", flatVersion: "710", majorVersion: "7", minorVersion: "1.0", name: "blackberry", tablet: false },
meego: { meego: true, browser: "default", device: "meego", flatVersion: "850", majorVersion: "8", minorVersion: "5.0", name: "meego", tablet: false },
wp: { wp: true, browser: "default", device: "wp", flatVersion: "800", majorVersion: "8", minorVersion: "0.0", name: "wp", tablet: false }
},
viewportTemplate = kendo.template('
").css("background-color").split(",")[1], 10) === 0 ? 'dark' : 'light') :
os.variant + " km-wp-" + os.variant + "-force");
}
function isOrientationHorizontal(element) {
return OS.wp ? element.css("animation-name") == "-kendo-landscape" : (Math.abs(window.orientation) / 90 == 1);
}
function getOrientationClass(element) {
return isOrientationHorizontal(element) ? HORIZONTAL : VERTICAL;
}
function setMinimumHeight(pane) {
pane.parent().addBack()
.css("min-height", window.innerHeight);
}
function applyViewportHeight() {
$("meta[name=viewport]").remove();
HEAD.append(viewportTemplate({
height: ", width=device-width" + // width=device-width was removed for iOS6, but this should stay for BB PhoneGap.
(isOrientationHorizontal() ?
", height=" + window.innerHeight + "px" :
(support.mobileOS.flatVersion >= 600 && support.mobileOS.flatVersion < 700) ?
", height=" + window.innerWidth + "px" :
", height=device-height")
}));
}
var Application = kendo.Observable.extend({
init: function(element, options) {
var that = this;
mobile.application = that; // global reference to current application
that.options = $.extend({
hideAddressBar: true,
useNativeScrolling: false,
statusBarStyle: "black",
transition: "",
historyTransition: HISTORY_TRANSITION,
modelScope: window,
updateDocumentTitle: true
}, options);
kendo.Observable.fn.init.call(that, that.options);
that.bind(that.events, that.options);
$(function(){
element = $(element);
that.element = element[0] ? element : $(document.body);
that._setupPlatform();
that._attachMeta();
that._setupElementClass();
that._attachHideBarHandlers();
that.pane = new Pane(that.element, that.options);
that.pane.navigateToInitial();
if (that.options.updateDocumentTitle) {
that._setupDocumentTitle();
}
that._startHistory();
that.trigger(INIT);
});
},
events: [
INIT
],
navigate: function(url, transition) {
this.pane.navigate(url, transition);
},
replace: function(url, transition) {
this.pane.replace(url, transition);
},
scroller: function() {
return this.view().scroller;
},
hideLoading: function() {
if (this.pane) {
this.pane.hideLoading();
} else {
throw new Error("The mobile application instance is not fully instantiated. Please consider activating loading in the application init event handler.");
}
},
showLoading: function() {
if (this.pane) {
this.pane.showLoading();
} else {
throw new Error("The mobile application instance is not fully instantiated. Please consider activating loading in the application init event handler.");
}
},
changeLoadingMessage: function(message) {
if (this.pane) {
this.pane.changeLoadingMessage(message);
} else {
throw new Error("The mobile application instance is not fully instantiated. Please consider changing the message in the application init event handler.");
}
},
view: function() {
return this.pane.view();
},
skin: function(skin) {
var that = this;
if (!arguments.length) {
return that.options.skin;
}
that.options.skin = skin || "";
that.element[0].className = "km-pane";
that._setupPlatform();
that._setupElementClass();
return that.options.skin;
},
destroy: function() {
this.pane.destroy();
this.router.destroy();
},
_setupPlatform: function() {
var that = this,
platform = that.options.platform,
skin = that.options.skin,
split = [],
os = OS || MOBILE_PLATFORMS[DEFAULT_OS];
if (platform) {
if (typeof platform === "string") {
split = platform.split("-");
os = $.extend({ variant: split[1] }, os, MOBILE_PLATFORMS[split[0]]);
} else {
os = platform;
}
}
if (skin) {
split = skin.split("-");
os = $.extend({}, os, { skin: split[0], variant: split[1] });
}
if (!os.variant) {
os.noVariantSet = true;
os.variant = "dark";
}
that.os = os;
that.osCssClass = osCssClass(that.os, that.options);
if (os.name == "wp") {
if (!that.refreshBackgroundColorProxy) {
that.refreshBackgroundColorProxy = $.proxy(function () {
if (that.os.variant && (that.os.skin && that.os.skin === that.os.name) || !that.os.skin) {
that.element.removeClass("km-wp-dark km-wp-light km-wp-dark-force km-wp-light-force").addClass(wp8Background(that.os));
}
}, that);
}
$(document).off("visibilitychange", that.refreshBackgroundColorProxy);
$(document).off("resume", that.refreshBackgroundColorProxy);
if (!os.skin) {
that.element.parent().css("overflow", "hidden");
$(document).on("visibilitychange", that.refreshBackgroundColorProxy); // Restore theme on browser focus (using the Visibility API).
$(document).on("resume", that.refreshBackgroundColorProxy); // PhoneGap fires resume.
that.refreshBackgroundColorProxy();
}
}
},
_startHistory: function() {
this.router = new kendo.Router({ pushState: this.options.pushState, root: this.options.root, hashBang: this.options.hashBang });
this.pane.bindToRouter(this.router);
this.router.start();
},
_resizeToScreenHeight: function() {
var includeStatusBar = $("meta[name=apple-mobile-web-app-status-bar-style]").attr("content").match(/black-translucent|hidden/),
element = this.element,
height;
if (CHROME) {
height = window.innerHeight;
} else {
if (isOrientationHorizontal(element)) {
if (includeStatusBar) {
if (INITIALLY_HORIZONTAL) {
height = SCREEN.availWidth + STATUS_BAR_HEIGHT;
} else {
height = SCREEN.availWidth;
}
} else {
if (INITIALLY_HORIZONTAL) {
height = SCREEN.availWidth;
} else {
height = SCREEN.availWidth - STATUS_BAR_HEIGHT;
}
}
} else {
if (includeStatusBar) {
if (INITIALLY_HORIZONTAL) {
height = SCREEN.availHeight;
} else {
height = SCREEN.availHeight + STATUS_BAR_HEIGHT;
}
} else {
if (INITIALLY_HORIZONTAL) {
height = SCREEN.availHeight - STATUS_BAR_HEIGHT;
} else {
height = SCREEN.availHeight;
}
}
}
}
element.height(height);
},
_setupElementClass: function() {
var that = this, size,
element = that.element;
element.parent().addClass("km-root km-" + (that.os.tablet ? "tablet" : "phone"));
element.addClass(that.osCssClass + " " + getOrientationClass(element));
if (this.options.useNativeScrolling) {
element.parent().addClass("km-native-scrolling");
}
if (CHROME) {
element.addClass("km-ios-chrome");
}
if (support.wpDevicePixelRatio) {
element.parent().css("font-size", support.wpDevicePixelRatio + "em");
}
if (BERRYPHONEGAP) {
applyViewportHeight();
}
if (that.options.useNativeScrolling) {
element.parent().addClass("km-native-scrolling");
} else if (ENABLE_CLIP) {
size = (screen.availWidth > screen.availHeight ? screen.availWidth : screen.availHeight) + 200;
$(clipTemplate({ width: size, height: size })).appendTo(HEAD);
}
if (BROKEN_WEBVIEW_RESIZE) {
that._resizeToScreenHeight();
}
kendo.onResize(function() {
element
.removeClass("km-horizontal km-vertical")
.addClass(getOrientationClass(element));
if (that.options.useNativeScrolling) {
setMinimumHeight(element);
}
if (BROKEN_WEBVIEW_RESIZE) {
that._resizeToScreenHeight();
}
if (BERRYPHONEGAP) {
applyViewportHeight();
}
kendo.resize(element);
});
},
_clearExistingMeta: function() {
HEAD.find("meta")
.filter("[name|='apple-mobile-web-app'],[name|='msapplication-tap'],[name='viewport']")
.remove();
},
_attachMeta: function() {
var options = this.options,
icon = options.icon, size;
this._clearExistingMeta();
if (!BERRYPHONEGAP) {
HEAD.prepend(viewportMeta);
}
HEAD.prepend(systemMeta(options));
if (icon) {
if (typeof icon === "string") {
icon = { "" : icon };
}
for(size in icon) {
HEAD.prepend(iconMeta({ icon: icon[size], size: size }));
}
}
if (options.useNativeScrolling) {
setMinimumHeight(this.element);
}
},
_attachHideBarHandlers: function() {
var that = this,
hideBar = proxy(that, "_hideBar");
if (support.mobileOS.appMode || !that.options.hideAddressBar || !HIDEBAR || that.options.useNativeScrolling) {
return;
}
that._initialHeight = {};
WINDOW.on("load", hideBar);
kendo.onResize(function() {
setTimeout(window.scrollTo, 0, 0, 1);
});
},
_setupDocumentTitle: function() {
var that = this,
defaultTitle = document.title;
that.pane.bind("viewShow", function(e) {
var title = e.view.title;
document.title = title !== undefined ? title : defaultTitle;
});
},
_hideBar: function() {
var that = this,
element = that.element;
element.height(kendo.support.transforms.css + "calc(100% + " + BARCOMPENSATION + "px)");
$(window).trigger(kendo.support.resize);
}
});
kendo.mobile.Application = Application;
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
mobile = kendo.mobile,
ui = mobile.ui,
Widget = ui.Widget,
support = kendo.support,
os = support.mobileOS,
ANDROID3UP = os.android && os.flatVersion >= 300,
CLICK = "click",
DISABLED = "disabled",
DISABLEDSTATE = "km-state-disabled";
function highlightButton(widget, event, highlight) {
$(event.target).closest(".km-button,.km-detail").toggleClass("km-state-active", highlight);
if (ANDROID3UP && widget.deactivateTimeoutID) {
clearTimeout(widget.deactivateTimeoutID);
widget.deactivateTimeoutID = 0;
}
}
function createBadge(value) {
return $('' + value + ' ');
}
var Button = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
that._wrap();
that._style();
that.options.enable = that.options.enable && !that.element.attr(DISABLED);
that.enable(that.options.enable);
that._userEvents = new kendo.UserEvents(that.element, {
press: function(e) { that._activate(e); },
tap: function(e) { that._release(e); },
release: function(e) { highlightButton(that, e, false); }
});
if (ANDROID3UP) {
that.element.on("move", function(e) { that._timeoutDeactivate(e); });
}
},
destroy: function() {
Widget.fn.destroy.call(this);
this._userEvents.destroy();
},
events: [
CLICK
],
options: {
name: "Button",
icon: "",
style: "",
badge: "",
enable: true
},
badge: function (value) {
var badge = this.badgeElement = this.badgeElement || createBadge(value).appendTo(this.element);
if (value || value === 0) {
badge.html(value);
return this;
}
if (value === false) {
badge.empty().remove();
this.badgeElement = false;
return this;
}
return badge.html();
},
enable: function(enable) {
var element = this.element;
if(typeof enable == "undefined") {
enable = true;
}
this.options.enable = enable;
if(enable) {
element.removeAttr(DISABLED);
} else {
element.attr(DISABLED, DISABLED);
}
element.toggleClass(DISABLEDSTATE, !enable);
},
_timeoutDeactivate: function(e) {
if (!this.deactivateTimeoutID) {
this.deactivateTimeoutID = setTimeout(highlightButton, 500, this, e, false);
}
},
_activate: function(e) {
var activeElement = document.activeElement,
nodeName = activeElement ? activeElement.nodeName : "";
if(this.options.enable) {
highlightButton(this, e, true);
if (nodeName == "INPUT" || nodeName == "TEXTAREA") {
activeElement.blur(); // Hide device keyboard
}
}
},
_release: function(e) {
var that = this;
if (e.which > 1) {
return;
}
if(!that.options.enable) {
e.preventDefault();
return;
}
if (that.trigger(CLICK, {target: $(e.target), button: that.element})) {
e.preventDefault();
}
},
_style: function() {
var style = this.options.style,
element = this.element,
styles;
if (style) {
styles = style.split(" ");
$.each(styles, function() {
element.addClass("km-" + this);
});
}
},
_wrap: function() {
var that = this,
icon = that.options.icon,
badge = that.options.badge,
iconSpan = '' + value + ' ');
}
var ButtonGroup = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
that.element.addClass("km-buttongroup").find("li").each(that._button);
that.element.on(that.options.selectOn, SELECTOR, "_select");
that._enable = true;
that.select(that.options.index);
if(!that.options.enable) {
that._enable = false;
that.wrapper.addClass(DISABLE);
}
},
events: [
SELECT
],
options: {
name: "ButtonGroup",
selectOn: "down",
index: -1,
enable: true
},
current: function() {
return this.element.find("." + ACTIVE);
},
select: function (li) {
var that = this,
index = -1;
if (li === undefined || li === -1 || !that._enable || $(li).is("." + DISABLE)) {
return;
}
that.current().removeClass(ACTIVE);
if (typeof li === "number") {
index = li;
li = $(that.element[0].children[li]);
} else if (li.nodeType) {
li = $(li);
index = li.index();
}
li.addClass(ACTIVE);
that.selectedIndex = index;
},
badge: function(item, value) {
var buttongroup = this.element, badge;
if (!isNaN(item)) {
item = buttongroup.children().get(item);
}
item = buttongroup.find(item);
badge = $(item.children(".km-badge")[0] || createBadge(value).appendTo(item));
if (value || value === 0) {
badge.html(value);
return this;
}
if (value === false) {
badge.empty().remove();
return this;
}
return badge.html();
},
enable: function(enable) {
var wrapper = this.wrapper;
if(typeof enable == "undefined") {
enable = true;
}
if(enable) {
wrapper.removeClass(DISABLE);
} else {
wrapper.addClass(DISABLE);
}
this._enable = this.options.enable = enable;
},
_button: function() {
var button = $(this).addClass("km-button"),
icon = kendo.attrValue(button, "icon"),
badge = kendo.attrValue(button, "badge"),
span = button.children("span"),
image = button.find("img").addClass("km-image");
if (!span[0]) {
span = button.wrapInner("#= this.headerTemplate(data) #
#= kendo.render(this.template, data.items)#
',
SEARCH_TEMPLATE = kendo.template(''),
NS = ".kendoMobileListView",
STYLED = "styled",
DATABOUND = "dataBound",
DATABINDING = "dataBinding",
ITEM_CHANGE = "itemChange",
CLICK = "click",
CHANGE = "change",
PROGRESS = "progress",
FUNCTION = "function",
whitespaceRegExp = /^\s+$/,
buttonRegExp = /button/;
function whitespace() {
return this.nodeType === Node.TEXT_NODE && this.nodeValue.match(whitespaceRegExp);
}
function addIcon(item, icon) {
if (icon && !item[0].querySelector(".km-icon")) {
item.prepend('
");
break;
}
offset = headerPair.offset;
header = headerPair.header;
} while (offset + 1 > scrollTop);
if (this.currentHeader != i) {
scroller.fixedContainer.html(header.clone());
this.currentHeader = i;
}
},
_shouldFixHeaders: function() {
this.fixedHeaders = this.options.type === "group" && this.options.fixedHeaders;
},
_cacheHeaders: function() {
this._shouldFixHeaders();
if (!this.fixedHeaders) {
return;
}
var headers = [], offset = this.scroller.scrollTop;
this.element.find("." + GROUP_CLASS).each(function(_, header) {
header = $(header);
headers.unshift({
offset: header.position().top + offset,
header: header
});
});
this.headers = headers;
this._fixHeader({ scrollTop: offset });
}
});
var DEFAULT_PULL_PARAMETERS = function() {
return { page: 1 };
};
var RefreshHandler = kendo.Class.extend({
init: function(listView) {
var handler = this,
options = listView.options,
scroller = listView.scroller(),
pullParameters = options.pullParameters || DEFAULT_PULL_PARAMETERS;
this.listView = listView;
this.scroller = scroller;
listView.bind("_dataSource", function(e) {
handler.setDataSource(e.dataSource);
});
scroller.setOptions({
pullToRefresh: true,
pull: function() {
if (!handler._pulled) {
handler._pulled = true;
handler.dataSource.read(pullParameters.call(listView, handler._first));
}
},
pullTemplate: options.pullTemplate,
releaseTemplate: options.releaseTemplate,
refreshTemplate: options.refreshTemplate
});
},
setDataSource: function(dataSource) {
var handler = this;
this._first = dataSource.view()[0];
this.dataSource = dataSource;
dataSource.bind("change", function() {
handler._change();
});
dataSource.bind("error", function() {
handler._change();
});
},
_change: function() {
var scroller = this.scroller,
dataSource = this.dataSource;
if (this._pulled) {
scroller.pullHandled();
}
if (this._pulled || !this._first) {
var view = dataSource.view();
if (view[0]) {
this._first = view[0];
}
}
this._pulled = false;
}
});
var VirtualList = kendo.Observable.extend({
init: function(options) {
var list = this;
kendo.Observable.fn.init.call(list);
list.buffer = options.buffer;
list.height = options.height;
list.item = options.item;
list.items = [];
list.footer = options.footer;
list.buffer.bind("reset", function() {
list.refresh();
});
},
refresh: function() {
var buffer = this.buffer,
items = this.items,
endReached = false;
while(items.length) {
items.pop().destroy();
}
this.offset = buffer.offset;
var itemConstructor = this.item,
prevItem,
item;
for (var idx = 0; idx < buffer.viewSize; idx ++) {
if (idx === buffer.total()) {
endReached = true;
break;
}
item = itemConstructor(this.content(this.offset + items.length));
item.below(prevItem);
prevItem = item;
items.push(item);
}
this.itemCount = items.length;
this.trigger("reset");
this._resize();
if (endReached) {
this.trigger("endReached");
}
},
totalHeight: function() {
if (!this.items[0]) {
return 0;
}
var list = this,
items = list.items,
top = items[0].top,
bottom = items[items.length - 1].bottom,
averageItemHeight = (bottom - top) / list.itemCount,
remainingItemsCount = list.buffer.length - list.offset - list.itemCount;
return (this.footer ? this.footer.height : 0) + bottom + remainingItemsCount * averageItemHeight;
},
batchUpdate: function(top) {
var height = this.height(),
items = this.items,
item,
initialOffset = this.offset;
if (!items[0]) {
return;
}
if (this.lastDirection) { // scrolling up
while(items[items.length - 1].bottom > top + height * 2) {
if (this.offset === 0) {
break;
}
this.offset --;
item = items.pop();
item.update(this.content(this.offset));
item.above(items[0]);
items.unshift(item);
}
} else { // scrolling down
while (items[0].top < top - height) {
var nextIndex = this.offset + this.itemCount; // here, it should be offset + 1 + itemCount - 1.
if (nextIndex === this.buffer.total()) {
this.trigger("endReached");
break;
}
if (nextIndex === this.buffer.length) {
break;
}
item = items.shift();
item.update(this.content(this.offset + this.itemCount));
item.below(items[items.length - 1]);
items.push(item);
this.offset ++;
}
}
if (initialOffset !== this.offset) {
this._resize();
}
},
update: function(top) {
var list = this,
items = this.items,
item,
firstItem,
lastItem,
height = this.height(),
itemCount = this.itemCount,
padding = height / 2,
up = (this.lastTop || 0) > top,
topBorder = top - padding,
bottomBorder = top + height + padding;
if (!items[0]) {
return;
}
this.lastTop = top;
this.lastDirection = up;
if (up) { // scrolling up
if (items[0].top > topBorder && // needs reorder
items[items.length - 1].bottom > bottomBorder + padding && // enough padding below
this.offset > 0 // we are not at the top
)
{
this.offset --;
item = items.pop();
firstItem = items[0];
item.update(this.content(this.offset));
items.unshift(item);
item.above(firstItem);
list._resize();
}
} else { // scrolling down
if (
items[items.length - 1].bottom < bottomBorder && // needs reorder
items[0].top < topBorder - padding // enough padding above
)
{
var nextIndex = this.offset + itemCount; // here, it should be offset + 1 + itemCount - 1.
if (nextIndex === this.buffer.total()) {
this.trigger("endReached");
} else if (nextIndex !== this.buffer.length) {
item = items.shift();
lastItem = items[items.length - 1];
items.push(item);
item.update(this.content(this.offset + this.itemCount));
list.offset ++;
item.below(lastItem);
list._resize();
}
}
}
},
content: function(index) {
return this.buffer.at(index);
},
destroy: function() {
this.unbind();
},
_resize: function() {
var items = this.items,
top = 0,
bottom = 0,
firstItem = items[0],
lastItem = items[items.length - 1];
if (firstItem) {
top = firstItem.top;
bottom = lastItem.bottom;
}
this.trigger("resize", { top: top, bottom: bottom });
if (this.footer) {
this.footer.below(lastItem);
}
}
});
// export for testing purposes
kendo.mobile.ui.VirtualList = VirtualList;
var VirtualListViewItem = kendo.Class.extend({
init: function(listView, dataItem) {
var element = listView.append([dataItem], true)[0],
height = element.offsetHeight;
$.extend(this, {
top: 0,
element: element,
listView: listView,
height: height,
bottom: height
});
},
update: function(dataItem) {
this.element = this.listView.setDataItem(this.element, dataItem);
},
above: function(item) {
if (item) {
this.height = this.element.offsetHeight;
this.top = item.top - this.height;
this.bottom = item.top;
putAt(this.element, this.top);
}
},
below: function(item) {
if (item) {
this.height = this.element.offsetHeight;
this.top = item.bottom;
this.bottom = this.top + this.height;
putAt(this.element, this.top);
}
},
destroy: function() {
kendo.destroy(this.element);
$(this.element).remove();
}
});
var LOAD_ICON = '
';
var VirtualListViewLoadingIndicator = kendo.Class.extend({
init: function(listView) {
this.element = $('' + listView.options.loadMoreText + ' ').hide();
this.element = $('#:value# ',
appendOnRefresh: false,
loadMore: false,
loadMoreText: "Press to load more",
endlessScroll: false,
scrollThreshold: 30,
pullToRefresh: false,
pullTemplate: "Pull to refresh",
releaseTemplate: "Release to refresh",
refreshTemplate: "Refreshing",
pullOffset: 140,
filterable: false,
virtualViewSize: null
},
refresh: function() {
this._itemBinder.refresh();
},
reset: function() {
this._itemBinder.reset();
},
setDataSource: function(dataSource) {
// the listView should have a ready datasource for MVVM to function properly. But an empty datasource should not empty the element
var emptyDataSource = !dataSource;
this.dataSource = DataSource.create(dataSource);
this.trigger("_dataSource", { dataSource: this.dataSource, empty: emptyDataSource });
if (this.options.autoBind && !emptyDataSource) {
this.items().remove();
this.dataSource.fetch();
}
},
destroy: function() {
Widget.fn.destroy.call(this);
kendo.destroy(this.element);
this._userEvents.destroy();
if (this._itemBinder) {
this._itemBinder.destroy();
}
this.element.unwrap();
delete this.element;
delete this.wrapper;
delete this._userEvents;
},
items: function() {
if (this.options.type === "group") {
return this.element.find(".km-list").children();
} else {
return this.element.children().not('.km-load-more');
}
},
scroller: function() {
if (!this._scrollerInstance) {
this._scrollerInstance = this.element.closest(".km-scroll-wrapper").data("kendoMobileScroller");
}
return this._scrollerInstance;
},
showLoading: function() {
var view = this.view();
if (view && view.loader) {
view.loader.show();
}
},
hideLoading: function() {
var view = this.view();
if (view && view.loader) {
view.loader.hide();
}
},
insertAt: function(dataItems, index, triggerChange) {
var listView = this;
return listView._renderItems(dataItems, function(items) {
if (index === 0) {
listView.element.prepend(items);
}
else if (index === -1) {
listView.element.append(items);
} else {
listView.items().eq(index - 1).after(items);
}
if (triggerChange) {
for (var i = 0; i < items.length; i ++) {
listView.trigger(ITEM_CHANGE, { item: items.eq(i), data: dataItems[i], ns: ui });
}
}
listView.angular("compile", function(){
return {
elements: items,
data: dataItems.map(function(data){
return { dataItem: data };
})
};
});
});
},
append: function(dataItems, triggerChange) {
return this.insertAt(dataItems, -1, triggerChange);
},
prepend: function(dataItems, triggerChange) {
return this.insertAt(dataItems, 0, triggerChange);
},
replace: function(dataItems) {
this.options.type = "flat";
this._angularItems("cleanup");
this.element.empty();
this._style();
return this.insertAt(dataItems, 0);
},
replaceGrouped: function(groups) {
this.options.type = "group";
this._angularItems("cleanup");
this.element.empty();
var items = $(kendo.render(this.groupTemplate, groups));
this._enhanceItems(items.children("ul").children("li"));
this.element.append(items);
mobile.init(items);
this._style();
this._angularItems("compile");
},
remove: function(dataItems) {
var items = this.findByDataItem(dataItems);
this.angular("cleanup", function(){
return { elements: items };
});
kendo.destroy(items);
items.remove();
},
findByDataItem: function(dataItems) {
var selectors = [];
for (var idx = 0, length = dataItems.length; idx < length; idx ++) {
selectors[idx] = "[data-" + kendo.ns + "uid=" + dataItems[idx].uid + "]";
}
return this.element.find(selectors.join(","));
},
// item is a DOM element, not jQuery object.
setDataItem: function(item, dataItem) {
var listView = this,
replaceItem = function(items) {
var newItem = $(items[0]);
kendo.destroy(item);
$(item).replaceWith(newItem);
listView.trigger(ITEM_CHANGE, { item: newItem, data: dataItem, ns: ui });
};
return this._renderItems([dataItem], replaceItem)[0];
},
_renderItems: function(dataItems, callback) {
var items = $(kendo.render(this.template, dataItems));
callback(items);
mobile.init(items);
this._enhanceItems(items);
return items;
},
_dim: function(e) {
this._toggle(e, false);
},
_highlight: function(e) {
this._toggle(e, true);
},
_toggle: function(e, highlight) {
if (e.which > 1) {
return;
}
var clicked = $(e.currentTarget),
item = clicked.parent(),
role = attrValue(clicked, "role") || "",
plainItem = (!role.match(buttonRegExp)),
prevented = e.isDefaultPrevented();
if (plainItem) {
item.toggleClass(ACTIVE_CLASS, highlight && !prevented);
}
},
_templates: function() {
var template = this.options.template,
headerTemplate = this.options.headerTemplate,
dataIDAttribute = ' data-uid="#=arguments[0].uid || ""#"',
templateProxy = {},
groupTemplateProxy = {};
if (typeof template === FUNCTION) {
templateProxy.template = template;
template = "#=this.template(data)#";
}
this.template = proxy(kendo.template("" + template + ""), templateProxy);
groupTemplateProxy.template = this.template;
if (typeof headerTemplate === FUNCTION) {
groupTemplateProxy._headerTemplate = headerTemplate;
headerTemplate = "#=this._headerTemplate(data)#";
}
groupTemplateProxy.headerTemplate = kendo.template(headerTemplate);
this.groupTemplate = proxy(GROUP_TEMPLATE, groupTemplateProxy);
},
_click: function(e) {
if (e.event.which > 1 || e.event.isDefaultPrevented()) {
return;
}
var dataItem,
item = e.target,
target = $(e.event.target),
buttonElement = target.closest(kendo.roleSelector("button", "detailbutton", "backbutton")),
button = kendo.widgetInstance(buttonElement, ui),
id = item.attr(kendo.attr("uid"));
if (id) {
dataItem = this.dataSource.getByUid(id);
}
if (this.trigger(CLICK, {target: target, item: item, dataItem: dataItem, button: button})) {
e.preventDefault();
}
},
_styleGroups: function() {
var rootItems = this.element.children();
rootItems.children("ul").addClass("km-list");
rootItems.each(function() {
var li = $(this),
groupHeader = li.contents().first();
li.addClass("km-group-container");
if (!groupHeader.is("ul") && !groupHeader.is("div." + GROUP_CLASS)) {
groupHeader.wrap(GROUP_WRAPPER);
}
});
},
_style: function() {
var options = this.options,
grouped = options.type === "group",
element = this.element,
inset = options.style === "inset";
element.addClass("km-listview")
.toggleClass("km-list", !grouped)
.toggleClass("km-virtual-list", this.virtual)
.toggleClass("km-listinset", !grouped && inset)
.toggleClass("km-listgroup", grouped && !inset)
.toggleClass("km-listgroupinset", grouped && inset);
if (!element.parents(".km-listview")[0]) {
element.closest(".km-content").toggleClass("km-insetcontent", inset); // iOS has white background when the list is not inset.
}
if (grouped) {
this._styleGroups();
}
this.trigger(STYLED);
},
_enhanceItems: function(items) {
items.each(function() {
var item = $(this),
child,
enhanced = false;
item.children().each(function() {
child = $(this);
if (child.is("a")) {
enhanceLinkItem(child);
enhanced = true;
} else if (child.is("label")) {
enhanceCheckBoxItem(child);
enhanced = true;
}
});
if (!enhanced) {
enhanceItem(item);
}
});
}
});
ui.plugin(ListView);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
mobile = kendo.mobile,
ui = mobile.ui,
roleSelector = kendo.roleSelector,
Widget = ui.Widget;
function createContainer(align, element) {
var items = element.find("[" + kendo.attr("align") + "=" + align + "]");
if (items[0]) {
return $('
').append(items).prependTo(element);
}
}
function toggleTitle(centerElement) {
var siblings = centerElement.siblings(),
noTitle = !!centerElement.children("ul")[0],
showTitle = (!!siblings[0] && $.trim(centerElement.text()) === "");
centerElement.prevAll().toggleClass("km-absolute", noTitle);
centerElement.toggleClass("km-show-title", showTitle);
centerElement.toggleClass("km-fill-title", showTitle && !$.trim(centerElement.html()));
centerElement.toggleClass("km-no-title", noTitle);
centerElement.toggleClass("km-hide-title", centerElement.css("visibility") == "hidden" && !siblings.children().is(":visible"));
}
var NavBar = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
element = that.element;
that.container().bind("show", $.proxy(this, "refresh"));
element.addClass("km-navbar").wrapInner($('
'));
that.leftElement = createContainer("left", element);
that.rightElement = createContainer("right", element);
that.centerElement = element.find(".km-view-title");
},
options: {
name: "NavBar"
},
title: function(value) {
this.element.find(roleSelector("view-title")).text(value);
toggleTitle(this.centerElement);
},
refresh: function(e) {
var view = e.view;
if (view.options.title) {
this.title(view.options.title);
} else {
toggleTitle(this.centerElement);
}
},
destroy: function() {
Widget.fn.destroy.call(this);
kendo.destroy(this.element);
}
});
ui.plugin(NavBar);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
mobile = kendo.mobile,
ui = mobile.ui,
proxy = $.proxy,
Transition = kendo.effects.Transition,
Pane = kendo.ui.Pane,
PaneDimensions = kendo.ui.PaneDimensions,
Widget = ui.DataBoundWidget,
DataSource = kendo.data.DataSource,
Buffer = kendo.data.Buffer,
BatchBuffer = kendo.data.BatchBuffer,
// Math
math = Math,
abs = math.abs,
ceil = math.ceil,
round = math.round,
max = math.max,
min = math.min,
floor = math.floor,
CHANGE = "change",
CHANGING = "changing",
REFRESH = "refresh",
CURRENT_PAGE_CLASS = "km-current-page",
VIRTUAL_PAGE_CLASS = "km-virtual-page",
FUNCTION = "function",
ITEM_CHANGE = "itemChange",
CLEANUP = "cleanup",
VIRTUAL_PAGE_COUNT = 3,
LEFT_PAGE = -1,
CETER_PAGE = 0,
RIGHT_PAGE = 1,
LEFT_SWIPE = -1,
NUDGE = 0,
RIGHT_SWIPE = 1;
var Pager = kendo.Class.extend({
init: function(scrollView) {
var that = this,
element = $("
");
this.width = container.width();
this.element.width(this.width);
container.append(this.element);
},
content: function(theContent) {
this.element.html(theContent);
},
position: function(position) { //position can be -1, 0, 1
this.element.css("transform", "translate3d(" + this.width * position + "px, 0, 0)");
},
setWidth: function(width) {
this.width = width;
this.element.width(width);
}
});
kendo.mobile.ui.VirtualPage = Page;
var ScrollView = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
options = that.options;
element = that.element;
kendo.stripWhitespace(element[0]);
element
.wrapInner("
")
.addClass("km-scrollview");
if(this.options.enablePager) {
this.pager = new Pager(this);
}
that.inner = element.children().first();
that.page = 0;
that.inner.css("height", options.contentHeight);
that.pane = new ElasticPane(that.inner, {
duration: this.options.duration,
transitionEnd: proxy(this, "_transitionEnd"),
dragStart: proxy(this, "_dragStart"),
dragEnd: proxy(this, "_dragEnd"),
change: proxy(this, REFRESH)
});
that.bind("resize", function() {
that.pane.refresh();
});
that.page = options.page;
var empty = this.inner.children().length === 0;
that._content = empty ? new VirtualScrollViewContent(that.inner, that.pane, options) : new ScrollViewContent(that.inner, that.pane, options);
that._content.page = that.page;
that._content.bind("reset", function() {
var content = that._content;
that._syncWithContent();
that.trigger(REFRESH, { pageCount: content.pageCount, page: content.page });
});
that._content.bind(ITEM_CHANGE, function(e) {
that.trigger(ITEM_CHANGE, e);
that.angular("compile", function() {
return { elements: e.item, data: [ { dataItem: e.data } ] };
});
});
that._content.bind(CLEANUP, function(e) {
that.angular("cleanup", function() {
return { elements: e.item };
});
});
that.setDataSource(options.dataSource);
var mobileContainer = that.container();
if(mobileContainer.nullObject) {
that.viewInit();
that.viewShow();
} else {
mobileContainer.bind("show", proxy(this, "viewShow")).bind("init", proxy(this, "viewInit"));
}
},
options: {
name: "ScrollView",
page: 0,
duration: 400,
velocityThreshold: 0.8,
contentHeight: "auto",
pageSize: 1,
itemsPerPage: 1,
bounceVelocityThreshold: 1.6,
enablePager: true,
autoBind: true,
template: "",
emptyTemplate: ""
},
events: [
CHANGING,
CHANGE,
REFRESH
],
destroy: function() {
Widget.fn.destroy.call(this);
kendo.destroy(this.element);
},
viewInit: function() {
if(this.options.autoBind) {
this._content.scrollTo(this._content.page, true);
}
},
viewShow: function() {
this.pane.refresh();
},
refresh: function() {
var content = this._content;
content.resizeTo(this.pane.size());
this.page = content.page;
this.trigger(REFRESH, { pageCount: content.pageCount, page: content.page });
},
content: function(html) {
this.element.children().first().html(html);
this._content._getPages();
this.pane.refresh();
},
value: function(item) {
var dataSource = this.dataSource;
if (item) {
this.scrollTo(dataSource.indexOf(item), true);
} else {
return dataSource.at(this.page);
}
},
scrollTo: function(page, instant) {
this._content.scrollTo(page, instant);
this._syncWithContent();
},
prev: function() {
var that = this,
prevPage = that.page - 1;
if (that._content instanceof VirtualScrollViewContent) {
that._content.paneMoved(RIGHT_SWIPE, undefined, function(eventData) {
return that.trigger(CHANGING, eventData);
});
} else if (prevPage > -1) {
that.scrollTo(prevPage);
}
},
next: function() {
var that = this,
nextPage = that.page + 1;
if (that._content instanceof VirtualScrollViewContent) {
that._content.paneMoved(LEFT_SWIPE, undefined, function(eventData) {
return that.trigger(CHANGING, eventData);
});
} else if (nextPage < that._content.pageCount) {
that.scrollTo(nextPage);
}
},
setDataSource: function(dataSource) {
if (!(this._content instanceof VirtualScrollViewContent)) {
return;
}
// the scrollview should have a ready datasource for MVVM to function properly. But an empty datasource should not empty the element
var emptyDataSource = !dataSource;
this.dataSource = DataSource.create(dataSource);
this._content.setDataSource(this.dataSource);
if (this.options.autoBind && !emptyDataSource) {
// this.items().remove();
this.dataSource.fetch();
}
},
items: function() {
return this.element.find("." + VIRTUAL_PAGE_CLASS);
},
_syncWithContent: function() {
var pages = this._content.pages,
buffer = this._content.buffer,
data,
element;
this.page = this._content.page;
data = buffer ? buffer.at(this.page) : undefined;
if(!(data instanceof Array)) {
data = [data];
}
element = pages ? pages[1].element : undefined;
this.trigger(CHANGE, { page: this.page, element: element, data: data });
},
_dragStart: function() {
if (this._content.forcePageUpdate()) {
this._syncWithContent();
}
},
_dragEnd: function(e) {
var that = this,
velocity = e.x.velocity,
velocityThreshold = this.options.velocityThreshold,
swipeType = NUDGE,
bounce = abs(velocity) > this.options.bounceVelocityThreshold;
if (velocity > velocityThreshold) {
swipeType = RIGHT_SWIPE;
} else if(velocity < -velocityThreshold) {
swipeType = LEFT_SWIPE;
}
this._content.paneMoved(swipeType, bounce, function(eventData) {
return that.trigger(CHANGING, eventData);
});
},
_transitionEnd: function() {
if (this._content.updatePage()) {
this._syncWithContent();
}
}
});
ui.plugin(ScrollView);
})(window.kendo.jQuery);
(function($, undefined) {
var kendo = window.kendo,
ui = kendo.mobile.ui,
Widget = ui.Widget,
support = kendo.support,
CHANGE = "change",
SWITCHON = "km-switch-on",
SWITCHOFF = "km-switch-off",
MARGINLEFT = "margin-left",
ACTIVE_STATE = "km-state-active",
DISABLED_STATE = "km-state-disabled",
DISABLED = "disabled",
TRANSFORMSTYLE = support.transitions.css + "transform",
proxy = $.proxy;
function limitValue(value, minLimit, maxLimit) {
return Math.max(minLimit, Math.min(maxLimit, value));
}
var SWITCH_MARKUP = '\
\
{0} \
{1} \
\
' + value + ' ');
}
var TabStrip = Widget.extend({
init: function(element, options) {
var that = this;
Widget.fn.init.call(that, element, options);
that.container().bind("show", $.proxy(this, "refresh"));
that.element
.addClass("km-tabstrip")
.find("a").each(that._buildButton)
.eq(that.options.selectedIndex).addClass(ACTIVE_STATE_CLASS);
that.element.on("down", "a", "_release");
},
events: [
SELECT
],
switchTo: function(url) {
var tabs = this.element.find('a'),
tab,
path,
idx = 0,
length = tabs.length;
if(isNaN(url)) {
for (; idx < length; idx ++) {
tab = tabs[idx];
path = tab.href.replace(/(\#.+)(\?.+)$/, "$1"); // remove the fragment query string - http://www.foo.com?foo#bar**?baz=qux**
if (path.indexOf(url, path.length - url.length) !== -1) {
this._setActiveItem($(tab));
return true;
}
}
} else {
this._setActiveItem(tabs.eq(url));
return true;
}
return false;
},
switchByFullUrl: function(url) {
var tab;
tab = this.element.find("a[href$='" + url + "']");
this._setActiveItem(tab);
},
clear: function() {
this.currentItem().removeClass(ACTIVE_STATE_CLASS);
},
currentItem: function() {
return this.element.children("." + ACTIVE_STATE_CLASS);
},
badge: function(item, value) {
var tabstrip = this.element, badge;
if (!isNaN(item)) {
item = tabstrip.children().get(item);
}
item = tabstrip.find(item);
badge = $(item.find(".km-badge")[0] || createBadge(value).insertAfter(item.children(".km-icon")));
if (value || value === 0) {
badge.html(value);
return this;
}
if (value === false) {
badge.empty().remove();
return this;
}
return badge.html();
},
_release: function(e) {
if (e.which > 1) {
return;
}
var that = this,
item = $(e.currentTarget);
if (item[0] === that.currentItem()[0]) {
return;
}
if (that.trigger(SELECT, {item: item})) {
e.preventDefault();
} else {
that._setActiveItem(item);
}
},
_setActiveItem: function(item) {
if (!item[0]) {
return;
}
this.clear();
item.addClass(ACTIVE_STATE_CLASS);
},
_buildButton: function() {
var button = $(this),
icon = kendo.attrValue(button, "icon"),
badge = kendo.attrValue(button, "badge"),
image = button.find("img"),
iconSpan = $('