');\n this.content.append(wrapper);\n margin = parseInt(wrapper.css(isRtl ? 'margin-right' : 'margin-left'), 10);\n wrapper.remove();\n return margin;\n },\n _calculateTaskBorderWidth: function () {\n var width;\n var className = GanttView.styles.task + ' ' + GanttView.styles.taskSingle;\n var task = $('
');\n var computedStyle;\n this.content.append(task);\n computedStyle = kendo.getComputedStyles(task[0], ['border-left-width']);\n width = parseFloat(computedStyle['border-left-width'], 10);\n task.remove();\n return width;\n },\n _renderTask: function (task, position, plannedPosition) {\n var editable = this.options.editable;\n var taskLeft = position.left;\n var styles = GanttView.styles;\n var wrapClassName = styles.taskWrap;\n var calculatedSize = this.options.calculatedSize;\n var dragHandleStyle = {};\n var taskWrapAttr = {\n className: wrapClassName,\n style: { left: taskLeft + 'px' }\n };\n var children = [];\n var endTaskDotRight = 0;\n var taskFullWidth = position.width;\n var taskWrapper, taskElement, progressHandleOffset, plannedElement;\n var endTaskDotLeft, taskOffsetWrap, offsetElement, offsetWidth;\n if (calculatedSize) {\n taskWrapAttr.style.height = calculatedSize.cell + 'px';\n }\n if (plannedPosition) {\n if (task.isMilestone()) {\n plannedElement = this._renderPlannedMilestone(position, plannedPosition);\n } else {\n plannedElement = this._renderPlannedSingleTask(position, plannedPosition, task);\n }\n children.push(plannedElement);\n if (isRtl && plannedPosition.left <= position.left) {\n taskWrapAttr.style.left = plannedPosition.left + 'px';\n }\n }\n if (task.summary) {\n taskElement = this._renderSummary(task, position, plannedPosition);\n taskWrapAttr.className += ' ' + styles.taskSummaryWrap;\n } else if (task.isMilestone()) {\n taskElement = this._renderMilestone(task, position);\n taskWrapAttr.className += ' ' + styles.taskMilestoneWrap;\n } else {\n taskElement = this._renderSingleTask(task, position, plannedPosition);\n }\n if (plannedPosition && !task.isMilestone() && task.plannedStart < task.end && task.plannedEnd > task.start && task.plannedEnd < task.end) {\n if (isRtl) {\n taskFullWidth = position.left + position.width - plannedPosition.left;\n } else {\n taskFullWidth = plannedPosition.left + plannedPosition.width - position.left;\n }\n if (isRtl) {\n offsetWidth = plannedPosition.left - position.left;\n } else {\n offsetWidth = position.left + position.width - (plannedPosition.left + plannedPosition.width);\n }\n offsetElement = kendoDomElement('div', {\n className: styles.taskOffset,\n style: { width: offsetWidth - 2 * plannedPosition.borderWidth + 'px' }\n });\n if (editable && editable.resize !== false && editable.update !== false && !task.summary) {\n if (editable.destroy !== false) {\n offsetElement.children.push(kendoDomElement('span', { className: styles.taskActions }, [kendoDomElement('a', {\n className: styles.link + ' ' + styles.taskDelete,\n href: '#',\n 'aria-label': 'Delete'\n }, [kendoDomElement('span', { className: styles.icon + ' ' + styles.iconDelete })])]));\n }\n if (isRtl) {\n offsetElement.children.push(kendoDomElement('span', {\n className: styles.taskResizeHandle + ' ' + styles.taskResizeHandleWest,\n style: { right: position.width - 5 + 'px' }\n }));\n } else {\n offsetElement.children.push(kendoDomElement('span', { className: styles.taskResizeHandle + ' ' + styles.taskResizeHandleEast }));\n }\n }\n taskOffsetWrap = kendoDomElement('div', { className: styles.taskOffsetWrap + ' ' + styles.taskInnerWrap }, [\n taskElement,\n offsetElement\n ]);\n children.push(taskOffsetWrap);\n } else if (plannedPosition) {\n children.push(kendoDomElement('div', { className: styles.taskInnerWrap }, [taskElement]));\n } else {\n children.push(taskElement);\n }\n taskWrapper = kendoDomElement('div', taskWrapAttr, children);\n if (editable && editable.dependencyCreate !== false) {\n if (plannedPosition && task.plannedEnd > task.end) {\n endTaskDotRight = plannedPosition.left + plannedPosition.width - position.left - position.width - 3 + 'px';\n }\n taskWrapper.children.push(kendoDomElement('div', { className: styles.taskDot + ' ' + styles.taskDotStart }));\n if (isRtl) {\n endTaskDotRight = 'auto';\n if (plannedPosition && task.plannedEnd > task.end) {\n endTaskDotLeft = position.left - plannedPosition.left + 'px';\n }\n }\n taskWrapper.children.push(kendoDomElement('div', {\n className: styles.taskDot + ' ' + styles.taskDotEnd,\n style: {\n right: endTaskDotRight,\n left: endTaskDotLeft\n }\n }));\n }\n if (!task.summary && !task.isMilestone() && editable && editable.dragPercentComplete !== false && editable.update !== false && this._taskTemplate === null) {\n progressHandleOffset = Math.round(taskFullWidth * task.percentComplete);\n dragHandleStyle[isRtl ? 'right' : 'left'] = progressHandleOffset + 'px';\n taskWrapper.children.push(kendoDomElement('div', {\n className: styles.taskDragHandle,\n style: dragHandleStyle\n }));\n }\n return taskWrapper;\n },\n _renderSingleTask: function (task, position, plannedPosition) {\n var styles = GanttView.styles;\n var progressWidth;\n var taskChildren = [];\n var taskContent;\n var editable = this.options.editable;\n var classes = styles.task + ' ' + styles.taskSingle;\n var widthExceptDelay = position.width;\n if (plannedPosition) {\n if (task.plannedEnd && task.plannedEnd <= task.start) {\n classes += ' ' + styles.taskDelayed;\n } else if (task.plannedEnd && task.plannedEnd > task.end) {\n classes += ' ' + styles.taskAdvanced;\n } else if (task.plannedEnd && task.plannedEnd < task.end) {\n if (!isRtl) {\n widthExceptDelay = widthExceptDelay - (position.left + position.width - plannedPosition.left - plannedPosition.width);\n } else {\n widthExceptDelay = widthExceptDelay + position.left - plannedPosition.left;\n }\n }\n }\n progressWidth = Math.round(widthExceptDelay * task.percentComplete);\n if (this._taskTemplate !== null) {\n taskContent = kendoHtmlElement(this._taskTemplate(task));\n } else {\n taskContent = kendoTextElement(task.title);\n taskChildren.push(kendoDomElement('div', {\n className: styles.taskComplete,\n style: { width: progressWidth + 'px' }\n }));\n }\n var content = kendoDomElement('div', { className: styles.taskContent }, [kendoDomElement('div', { className: styles.taskTemplate }, [taskContent])]);\n taskChildren.push(content);\n if (editable) {\n if (editable.destroy !== false && (!plannedPosition || !task.plannedEnd || (task.end <= task.plannedEnd || task.start >= task.plannedEnd))) {\n content.children.push(kendoDomElement('span', { className: styles.taskActions }, [kendoDomElement('a', {\n className: styles.link + ' ' + styles.taskDelete,\n href: '#',\n 'aria-label': 'Delete'\n }, [kendoDomElement('span', { className: styles.icon + ' ' + styles.iconDelete })])]));\n }\n if (editable.resize !== false && editable.update !== false) {\n content.children.push(kendoDomElement('span', { className: styles.taskResizeHandle + ' ' + styles.taskResizeHandleWest }));\n content.children.push(kendoDomElement('span', { className: styles.taskResizeHandle + ' ' + styles.taskResizeHandleEast }));\n }\n }\n var element = kendoDomElement('div', {\n className: classes,\n 'data-uid': task.uid,\n style: { width: Math.max(widthExceptDelay - position.borderWidth * 2, 0) + 'px' }\n }, taskChildren);\n return element;\n },\n _renderMilestone: function (task) {\n var styles = GanttView.styles;\n var classes = styles.task + ' ' + styles.taskMilestone;\n var showPlanned = this.options.showPlannedTasks;\n if (showPlanned && task.plannedEnd && task.plannedEnd < task.start) {\n classes += ' ' + styles.taskDelayed;\n } else if (task.plannedStart && task.plannedStart > task.end) {\n classes += ' ' + styles.taskAdvanced;\n }\n return kendoDomElement('div', {\n className: classes,\n 'data-uid': task.uid\n });\n },\n _renderSummary: function (task, position, plannedPosition) {\n var styles = GanttView.styles;\n var widthExceptDelay = position.width;\n var progressWidth;\n var classes = styles.task + ' ' + styles.taskSummary;\n if (plannedPosition) {\n if (task.plannedEnd && task.plannedEnd <= task.start) {\n classes += ' ' + styles.taskDelayed;\n } else if (task.plannedEnd && task.plannedEnd > task.end) {\n classes += ' ' + styles.taskAdvanced;\n } else if (task.plannedEnd && task.plannedEnd < task.end) {\n if (!isRtl) {\n widthExceptDelay = widthExceptDelay - (position.left + position.width - plannedPosition.left - plannedPosition.width);\n } else {\n widthExceptDelay = widthExceptDelay + position.left - plannedPosition.left;\n }\n }\n }\n progressWidth = Math.round(widthExceptDelay * task.percentComplete);\n var element = kendoDomElement('div', {\n className: classes,\n 'data-uid': task.uid,\n style: { width: widthExceptDelay + 'px' }\n }, [kendoDomElement('div', {\n className: styles.taskSummaryProgress,\n style: { width: progressWidth + 'px' }\n }, [kendoDomElement('div', {\n className: styles.taskSummaryComplete,\n style: { width: position.width + 'px' }\n })])]);\n return element;\n },\n _renderPlannedSingleTask: function (position, plannedPosition, task) {\n var styles = GanttView.styles;\n var children = [];\n var style = {};\n if (task.plannedStart && task.plannedEnd) {\n children.push(kendoDomElement('div', { className: styles.taskPlannedMoment + ' ' + styles.taskPlannedMomentLeft }));\n children.push(kendoDomElement('div', {\n className: styles.taskPlannedDuration,\n style: { width: Math.max(plannedPosition.width - plannedPosition.borderWidth * 2 - 16, 0) + 'px' }\n }));\n children.push(kendoDomElement('div', { className: styles.taskPlannedMoment }));\n } else if (task.plannedStart) {\n children.push(kendoDomElement('div', { className: styles.taskPlannedMoment + ' ' + styles.taskPlannedMomentLeft }));\n } else if (task.plannedEnd) {\n children.push(kendoDomElement('div', {\n className: styles.taskPlannedMoment,\n style: { 'margin-left': Math.max(plannedPosition.width - 5, 0) + 'px' }\n }));\n }\n if (isRtl) {\n style = { 'margin-right': position.left - plannedPosition.left + position.width - plannedPosition.width + 'px' };\n } else {\n style = { 'margin-left': plannedPosition.left - position.left + 'px' };\n }\n var element = kendoDomElement('div', {\n className: styles.taskPlanned,\n style: style\n }, children);\n return element;\n },\n _renderPlannedMilestone: function (position, plannedPosition) {\n var styles = GanttView.styles;\n var style = {};\n var element;\n if (isRtl) {\n style = { 'margin-right': position.left - plannedPosition.left + 'px' };\n } else {\n style = { 'margin-left': plannedPosition.left - position.left + 'px' };\n }\n element = kendoDomElement('div', {\n className: styles.taskPlanned,\n style: style\n }, [kendoDomElement('div', { className: styles.taskPlannedMoment })]);\n return element;\n },\n _renderResources: function (resources, className) {\n var children = [];\n var resource;\n for (var i = 0, length = resources.length; i < length; i++) {\n resource = resources[i];\n children.push(kendoDomElement('span', {\n className: className,\n style: { 'color': resource.get('color') }\n }, [kendoTextElement(resource.get('name'))]));\n }\n if (isRtl) {\n children.reverse();\n }\n return children;\n },\n _taskPosition: function (task) {\n var round = Math.round;\n var startLeft = round(this._offset(isRtl ? task.end : task.start));\n var endLeft = round(this._offset(isRtl ? task.start : task.end));\n return {\n left: startLeft,\n width: endLeft - startLeft\n };\n },\n _taskPositionPlanned: function (task) {\n var round = Math.round;\n var startLeft = round(this._offset(isRtl ? task.plannedEnd : task.plannedStart));\n var endLeft = round(this._offset(isRtl ? task.plannedStart : task.plannedEnd));\n return {\n left: startLeft,\n width: endLeft - startLeft\n };\n },\n _offset: function (date) {\n var slots = this._timeSlots();\n var slot;\n var startOffset;\n var slotDuration;\n var slotOffset = 0;\n var startIndex;\n if (!slots.length) {\n return 0;\n }\n startIndex = this._slotIndex('start', date);\n slot = slots[startIndex];\n if (slot.end < date) {\n slotOffset = slot.offsetWidth;\n } else if (slot.start <= date) {\n startOffset = date - slot.start;\n slotDuration = slot.end - slot.start;\n slotOffset = startOffset / slotDuration * slot.offsetWidth;\n }\n if (isRtl) {\n slotOffset = slot.offsetWidth + 1 - slotOffset;\n }\n return slot.offsetLeft + slotOffset;\n },\n _slotIndex: function (field, value, reverse) {\n var slots = this._timeSlots();\n var startIdx = 0;\n var endIdx = slots.length - 1;\n var middle;\n if (reverse) {\n slots = [].slice.call(slots).reverse();\n }\n do {\n middle = Math.ceil((endIdx + startIdx) / 2);\n if (slots[middle][field] < value) {\n startIdx = middle;\n } else {\n if (middle === endIdx) {\n middle--;\n }\n endIdx = middle;\n }\n } while (startIdx !== endIdx);\n if (reverse) {\n startIdx = slots.length - 1 - startIdx;\n }\n return startIdx;\n },\n _timeByPosition: function (x, snap, snapToEnd) {\n var slot = this._slotByPosition(x);\n if (snap) {\n return snapToEnd ? slot.end : slot.start;\n }\n var offsetLeft = x - this.element.find(DOT + GanttView.styles.tasksTable).offset().left;\n var duration = slot.end - slot.start;\n var slotOffset = offsetLeft - slot.offsetLeft;\n if (isRtl) {\n slotOffset = slot.offsetWidth - slotOffset;\n }\n return new Date(slot.start.getTime() + duration * (slotOffset / slot.offsetWidth));\n },\n _slotByPosition: function (x) {\n var offsetLeft = x - this.element.find(DOT + GanttView.styles.tasksTable).offset().left;\n var slotIndex = this._slotIndex('offsetLeft', offsetLeft, isRtl);\n return this._timeSlots()[slotIndex];\n },\n _renderDependencies: function (dependencies) {\n var elements = [];\n var tree = this._dependencyTree;\n for (var i = 0, l = dependencies.length; i < l; i++) {\n elements.push.apply(elements, this._renderDependency(dependencies[i]));\n }\n tree.render(elements);\n },\n _renderDependency: function (dependency) {\n var predecessor = this._taskCoordinates[dependency.predecessorId];\n var successor = this._taskCoordinates[dependency.successorId];\n var elements;\n var method;\n if (!predecessor || !successor) {\n return [];\n }\n method = '_render' + [\n 'FF',\n 'FS',\n 'SF',\n 'SS'\n ][isRtl ? 3 - dependency.type : dependency.type];\n elements = this[method](predecessor, successor);\n for (var i = 0, length = elements.length; i < length; i++) {\n elements[i].attr['data-uid'] = dependency.uid;\n }\n return elements;\n },\n _renderFF: function (from, to) {\n var lines = this._dependencyFF(from, to, false);\n lines[lines.length - 1].children[0] = this._arrow(true);\n return lines;\n },\n _renderSS: function (from, to) {\n var lines = this._dependencyFF(to, from, true);\n lines[0].children[0] = this._arrow(false);\n return lines.reverse();\n },\n _renderFS: function (from, to) {\n var lines = this._dependencyFS(from, to, false);\n lines[lines.length - 1].children[0] = this._arrow(false);\n return lines;\n },\n _renderSF: function (from, to) {\n var lines = this._dependencyFS(to, from, true);\n lines[0].children[0] = this._arrow(true);\n return lines.reverse();\n },\n _dependencyFF: function (from, to, reverse) {\n var that = this;\n var lines = [];\n var left = 0;\n var top = 0;\n var width = 0;\n var height = 0;\n var dir = reverse ? 'start' : 'end';\n var delta;\n var overlap = 2;\n var arrowOverlap = 1;\n var rowHeight = this._rowHeight;\n var minLineWidth = 10;\n var fromTop = from.rowIndex * rowHeight + Math.floor(rowHeight / 2) - 1;\n var toTop = to.rowIndex * rowHeight + Math.floor(rowHeight / 2) - 1;\n var styles = GanttView.styles;\n var addHorizontal = function () {\n lines.push(that._line(styles.line + ' ' + styles.lineHorizontal, {\n left: left + 'px',\n top: top + 'px',\n width: width + 'px'\n }));\n };\n var addVertical = function () {\n lines.push(that._line(styles.line + ' ' + styles.lineVertical, {\n left: left + 'px',\n top: top + 'px',\n height: height + 'px'\n }));\n };\n left = from[dir];\n top = fromTop;\n width = minLineWidth;\n delta = to[dir] - from[dir];\n if (delta > 0 !== reverse) {\n width = Math.abs(delta) + minLineWidth;\n }\n if (reverse) {\n left -= width;\n width -= arrowOverlap;\n addHorizontal();\n } else {\n addHorizontal();\n left += width - overlap;\n }\n if (toTop < top) {\n height = top - toTop;\n height += overlap;\n top = toTop;\n addVertical();\n } else {\n height = toTop - top;\n height += overlap;\n addVertical();\n top += height - overlap;\n }\n width = Math.abs(left - to[dir]);\n if (!reverse) {\n width -= arrowOverlap;\n left -= width;\n }\n addHorizontal();\n return lines;\n },\n _dependencyFS: function (from, to, reverse) {\n var that = this;\n var lines = [];\n var left = 0;\n var top = 0;\n var width = 0;\n var height = 0;\n var rowHeight = this._rowHeight;\n var minLineHeight = Math.floor(rowHeight / 2);\n var minLineWidth = 10;\n var minDistance = 2 * minLineWidth;\n var delta = to.start - from.end;\n var overlap = 2;\n var arrowOverlap = 1;\n var fromTop = from.rowIndex * rowHeight + Math.floor(rowHeight / 2) - 1;\n var toTop = to.rowIndex * rowHeight + Math.floor(rowHeight / 2) - 1;\n var styles = GanttView.styles;\n var addHorizontal = function () {\n lines.push(that._line(styles.line + ' ' + styles.lineHorizontal, {\n left: left + 'px',\n top: top + 'px',\n width: width + 'px'\n }));\n };\n var addVertical = function () {\n lines.push(that._line(styles.line + ' ' + styles.lineVertical, {\n left: left + 'px',\n top: top + 'px',\n height: height + 'px'\n }));\n };\n left = from.end;\n top = fromTop;\n width = minLineWidth;\n if (reverse) {\n left += arrowOverlap;\n if (delta > minDistance) {\n width = delta - (minLineWidth - overlap);\n }\n width -= arrowOverlap;\n }\n addHorizontal();\n left += width - overlap;\n if (delta <= minDistance) {\n height = reverse ? Math.abs(toTop - fromTop) - minLineHeight : minLineHeight;\n if (toTop < fromTop) {\n top -= height;\n height += overlap;\n addVertical();\n } else {\n addVertical();\n top += height;\n }\n width = from.end - to.start + minDistance;\n if (width < minLineWidth) {\n width = minLineWidth;\n }\n left -= width - overlap;\n addHorizontal();\n }\n if (toTop < fromTop) {\n height = top - toTop;\n top = toTop;\n height += overlap;\n addVertical();\n } else {\n height = toTop - top;\n addVertical();\n top += height;\n }\n width = to.start - left;\n if (!reverse) {\n width -= arrowOverlap;\n }\n addHorizontal();\n return lines;\n },\n _line: function (className, styles) {\n return kendoDomElement('div', {\n className: className,\n style: styles\n });\n },\n _arrow: function (direction) {\n return kendoDomElement('span', { className: direction ? GanttView.styles.arrowWest : GanttView.styles.arrowEast });\n },\n _colgroup: function () {\n var slots = this._timeSlots();\n var count = slots.length;\n var cols = [];\n for (var i = 0; i < count; i++) {\n for (var j = 0, length = slots[i].span; j < length; j++) {\n cols.push(kendoDomElement('col'));\n }\n }\n return kendoDomElement('colgroup', null, cols);\n },\n _createDragHint: function (element) {\n var styles = GanttView.styles;\n var plannedElement;\n this._dragHint = element.clone().addClass(styles.dragHint).css({ 'cursor': 'move' });\n plannedElement = this._dragHint.find(DOT + styles.taskPlanned);\n plannedElement.css({ 'visibility': 'hidden' });\n if (isRtl && element.find(DOT + styles.taskAdvanced).length > 0) {\n plannedElement.css({\n 'margin-right': 'auto',\n 'width': 0\n });\n this._dragHint.find(DOT + styles.taskDotEnd).css({ 'left': 0 });\n }\n element.closest('td').append(this._dragHint);\n },\n _updateDragHint: function (start) {\n var left = this._offset(start);\n this._dragHint.css({ 'left': left });\n },\n _removeDragHint: function () {\n this._dragHint.remove();\n this._dragHint = null;\n },\n _createResizeHint: function (task) {\n var styles = GanttView.styles;\n var taskTop = this._taskCoordinates[task.id].rowIndex * this._rowHeight;\n var tooltipHeight;\n var tooltipTop;\n var options = this.options;\n var messages = options.messages;\n this._resizeHint = $(RESIZE_HINT({ styles: styles })).css({\n 'top': 0,\n 'height': this._contentHeight\n });\n this.content.append(this._resizeHint);\n this._resizeTooltip = $(RESIZE_TOOLTIP_TEMPLATE({\n styles: styles,\n start: task.start,\n end: task.end,\n messages: messages.views,\n format: options.resizeTooltipFormat\n })).css({\n 'top': 0,\n 'left': 0\n });\n this.content.append(this._resizeTooltip);\n this._resizeTooltipWidth = outerWidth(this._resizeTooltip);\n tooltipHeight = outerHeight(this._resizeTooltip);\n tooltipTop = taskTop - tooltipHeight;\n if (tooltipTop < 0) {\n tooltipTop = taskTop + this._rowHeight;\n }\n this._resizeTooltipTop = tooltipTop;\n },\n _updateResizeHint: function (start, end, resizeStart) {\n var left = this._offset(isRtl ? end : start);\n var right = this._offset(isRtl ? start : end);\n var width = right - left;\n var tooltipLeft = resizeStart !== isRtl ? left : right;\n var tablesWidth = this._tableWidth - kendo.support.scrollbar();\n var tooltipWidth = this._resizeTooltipWidth;\n var options = this.options;\n var messages = options.messages;\n var tableOffset = this.element.find(DOT + GanttView.styles.tasksTable).offset().left - this.element.find(DOT + GanttView.styles.tasksWrapper).offset().left;\n if (isRtl) {\n left += tableOffset;\n }\n this._resizeHint.css({\n 'left': left,\n 'width': width\n });\n if (this._resizeTooltip) {\n this._resizeTooltip.remove();\n }\n tooltipLeft -= Math.round(tooltipWidth / 2);\n if (tooltipLeft < 0) {\n tooltipLeft = 0;\n } else if (tooltipLeft + tooltipWidth > tablesWidth) {\n tooltipLeft = tablesWidth - tooltipWidth;\n }\n if (isRtl) {\n tooltipLeft += tableOffset;\n }\n this._resizeTooltip = $(RESIZE_TOOLTIP_TEMPLATE({\n styles: GanttView.styles,\n start: start,\n end: end,\n messages: messages.views,\n format: options.resizeTooltipFormat\n })).css({\n 'top': this._resizeTooltipTop,\n 'left': tooltipLeft,\n 'min-width': tooltipWidth\n }).appendTo(this.content);\n },\n _removeResizeHint: function () {\n this._resizeHint.remove();\n this._resizeHint = null;\n this._resizeTooltip.remove();\n this._resizeTooltip = null;\n },\n _updatePercentCompleteTooltip: function (top, left, text) {\n this._removePercentCompleteTooltip();\n var tooltip = this._percentCompleteResizeTooltip = $(PERCENT_RESIZE_TOOLTIP_TEMPLATE({\n styles: GanttView.styles,\n text: text\n })).appendTo(this.element);\n var tooltipMiddle = Math.round(outerWidth(tooltip) / 2);\n var arrow = tooltip.find(DOT + GanttView.styles.callout);\n var arrowHeight = Math.round(outerWidth(arrow) / 2);\n tooltip.css({\n 'top': top - (outerHeight(tooltip) + arrowHeight),\n 'left': left - tooltipMiddle\n });\n arrow.css('left', tooltipMiddle - arrowHeight);\n },\n _removePercentCompleteTooltip: function () {\n if (this._percentCompleteResizeTooltip) {\n this._percentCompleteResizeTooltip.remove();\n }\n this._percentCompleteResizeTooltip = null;\n },\n _updateDependencyDragHint: function (from, to) {\n this._removeDependencyDragHint();\n this._creteDependencyDragHint(from, to);\n },\n _creteDependencyDragHint: function (from, to) {\n var styles = GanttView.styles;\n var deltaX = to.x - from.x;\n var deltaY = to.y - from.y;\n var width = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n var angle = Math.atan(deltaY / deltaX);\n if (deltaX < 0) {\n angle += Math.PI;\n }\n $('
').css({\n 'top': from.y,\n 'left': from.x,\n 'width': width,\n 'transform-origin': '0% 0',\n '-ms-transform-origin': '0% 0',\n '-webkit-transform-origin': '0% 0',\n 'transform': 'rotate(' + angle + 'rad)',\n '-ms-transform': 'rotate(' + angle + 'rad)',\n '-webkit-transform': 'rotate(' + angle + 'rad)'\n }).appendTo(this.content);\n },\n _removeDependencyDragHint: function () {\n this.content.find(DOT + GanttView.styles.dependencyHint).remove();\n },\n _createTaskTooltip: function (task, element, mouseLeft) {\n var styles = GanttView.styles;\n var options = this.options;\n var content = this.content;\n var contentOffset = content.offset();\n var contentScrollLeft = kendo.scrollLeft(content);\n var row = $(element).parents('tr').first();\n var rowOffset = row.offset();\n var template = options.tooltip && options.tooltip.template ? kendo.template(options.tooltip.template) : TASK_TOOLTIP_TEMPLATE;\n var left = isRtl ? mouseLeft - (contentOffset.left + contentScrollLeft + kendo.support.scrollbar()) : mouseLeft - (contentOffset.left - contentScrollLeft);\n var top = rowOffset.top + outerHeight(row) - contentOffset.top + content.scrollTop();\n var tooltip = this._taskTooltip = $('
');\n tooltip.css({\n 'left': left,\n 'top': top\n }).appendTo(content).find(DOT + styles.taskContent).append(template({\n styles: styles,\n task: task,\n messages: options.messages.views\n }));\n this._adjustTooltipDimensions(tooltip, rowOffset, contentOffset, left, contentScrollLeft);\n },\n _removeTaskTooltip: function () {\n if (this._taskTooltip) {\n this._taskTooltip.remove();\n }\n this._taskTooltip = null;\n },\n _createOffsetTooltip: function (task, element, mouseLeft) {\n var styles = GanttView.styles;\n var content = this.content;\n var contentOffset = content.offset();\n var contentScrollLeft = kendo.scrollLeft(content);\n var row = element.parents('tr').first();\n var rowOffset = row.offset();\n var left = isRtl ? mouseLeft - (contentOffset.left + contentScrollLeft + kendo.support.scrollbar()) : mouseLeft - (contentOffset.left - contentScrollLeft);\n var top = rowOffset.top + outerHeight(row) - contentOffset.top + content.scrollTop();\n var tooltip = this._offsetTooltip = $('
');\n var offsetValue = Math.round((task.end.getTime() - task.plannedEnd.getTime()) / 60000);\n var plannedTasksMessages = this.options.messages.plannedTasks;\n var minutes = offsetValue % 60;\n var offsetText = minutes + ' ' + plannedTasksMessages.minutes;\n var hours, days;\n if (offsetValue >= 60) {\n hours = offsetValue = Math.floor(offsetValue / 60);\n offsetText = hours + ' ' + plannedTasksMessages.hours;\n if (minutes !== 0) {\n offsetText += ' ' + minutes + ' ' + plannedTasksMessages.minutes;\n }\n if (offsetValue >= 24) {\n hours = offsetValue % 24;\n days = offsetValue = Math.floor(offsetValue / 24);\n offsetText = days + ' ' + plannedTasksMessages.days;\n if (hours !== 0) {\n offsetText += ' ' + hours + ' ' + plannedTasksMessages.hours;\n }\n }\n }\n tooltip.css({\n 'left': left,\n 'top': top\n }).addClass(styles.offsetTooltipDelay).appendTo(content).append(OFFSET_TOOLTIP_TEMPLATE({\n offsetPrefix: plannedTasksMessages.offsetTooltipDelay,\n offsetText: offsetText\n }));\n this._adjustTooltipDimensions(tooltip, rowOffset, contentOffset, left, contentScrollLeft);\n },\n _removeOffsetTooltip: function () {\n if (this._offsetTooltip) {\n this._offsetTooltip.remove();\n }\n this._offsetTooltip = null;\n },\n _createPlannedTooltip: function (task, element, mouseLeft) {\n var styles = GanttView.styles;\n var content = this.content;\n var contentOffset = content.offset();\n var contentScrollLeft = kendo.scrollLeft(content);\n var row = element.parents('tr').first();\n var rowOffset = row.offset();\n var left = isRtl ? mouseLeft - (contentOffset.left + contentScrollLeft + kendo.support.scrollbar()) : mouseLeft - (contentOffset.left - contentScrollLeft);\n var top = rowOffset.top + outerHeight(row) - contentOffset.top + content.scrollTop();\n var tooltip = this._plannedTooltip = $('
');\n var editorMessages = this.options.messages.editor;\n tooltip.css({\n 'left': left,\n 'top': top\n }).appendTo(content).append(PLANNED_TOOLTIP_TEMPLATE({\n plannedStart: editorMessages.plannedStart,\n startDate: kendo.toString(task.plannedStart, 'H:mm tt ddd, MMM dd'),\n plannedEnd: editorMessages.plannedEnd,\n endDate: kendo.toString(task.plannedEnd, 'H:mm tt ddd, MMM dd')\n }));\n this._adjustTooltipDimensions(tooltip, rowOffset, contentOffset, left, contentScrollLeft);\n },\n _removePlannedTooltip: function () {\n if (this._plannedTooltip) {\n this._plannedTooltip.remove();\n }\n this._plannedTooltip = null;\n },\n _adjustTooltipDimensions: function (tooltip, rowOffset, contentOffset, left, contentScrollLeft) {\n var content = this.content;\n var contentWidth = content.width();\n var tooltipWidth;\n if (outerHeight(tooltip) < rowOffset.top - contentOffset.top) {\n tooltip.css('top', rowOffset.top - contentOffset.top - outerHeight(tooltip) + content.scrollTop());\n }\n tooltipWidth = outerWidth(tooltip);\n if (tooltipWidth + left - contentScrollLeft > contentWidth) {\n left -= tooltipWidth;\n if (left < contentScrollLeft) {\n left = contentScrollLeft + contentWidth - (tooltipWidth + 17);\n }\n tooltip.css('left', left);\n }\n },\n _scrollTo: function (element) {\n var elementLeft = element.offset().left;\n var elementWidth = element.width();\n var elementRight = elementLeft + elementWidth;\n var row = element.closest('tr');\n var rowTop = row.offset().top;\n var rowHeight = row.height();\n var rowBottom = rowTop + rowHeight;\n var content = this.content;\n var contentOffset = content.offset();\n var contentTop = contentOffset.top;\n var contentHeight = content.height();\n var contentBottom = contentTop + contentHeight;\n var contentLeft = contentOffset.left;\n var contentWidth = content.width();\n var contentRight = contentLeft + contentWidth;\n var scrollbarWidth = kendo.support.scrollbar();\n if (rowTop < contentTop) {\n content.scrollTop(content.scrollTop() + (rowTop - contentTop));\n } else if (rowBottom > contentBottom) {\n content.scrollTop(content.scrollTop() + (rowBottom + scrollbarWidth - contentBottom));\n }\n if (elementLeft < contentLeft && elementWidth > contentWidth && elementRight < contentRight || elementRight > contentRight && elementWidth < contentWidth) {\n kendo.scrollLeft(content, kendo.scrollLeft(content) + (elementRight + scrollbarWidth - contentRight));\n } else if (elementRight > contentRight && elementWidth > contentWidth && elementLeft > contentLeft || elementLeft < contentLeft && elementWidth < contentWidth) {\n kendo.scrollLeft(content, kendo.scrollLeft(content) + (elementLeft - contentLeft));\n }\n },\n _scrollToDate: function (date) {\n var viewStart = this.start;\n var viewEnd = this.end;\n var offset;\n if (date >= viewStart && date < viewEnd) {\n offset = this._offset(date);\n if (kendo.support.isRtl(this.element)) {\n offset = this._tableWidth - offset;\n }\n kendo.scrollLeft(this.content, offset);\n }\n },\n _timeSlots: function () {\n if (!this._slots || !this._slots.length) {\n return [];\n }\n return this._slots[this._slots.length - 1];\n },\n _headers: function (columnLevels) {\n var rows = [];\n var level;\n var headers;\n var column;\n var headerText;\n var styles = GanttView.styles;\n for (var levelIndex = 0, levelCount = columnLevels.length; levelIndex < levelCount; levelIndex++) {\n level = columnLevels[levelIndex];\n headers = [];\n for (var columnIndex = 0, columnCount = level.length; columnIndex < columnCount; columnIndex++) {\n column = level[columnIndex];\n headerText = kendoHtmlElement(column.text);\n headers.push(kendoDomElement('td', {\n colspan: column.span,\n className: styles.header + (column.isNonWorking ? ' ' + styles.nonWorking : '')\n }, [headerText]));\n }\n rows.push(kendoDomElement('tr', null, headers));\n }\n return rows;\n },\n _hours: function (start, end) {\n var slotEnd;\n var slots = [];\n var options = this.options;\n var workDayStart = options.workDayStart.getHours();\n var workDayEnd = options.workDayEnd.getHours();\n var isWorkHour;\n var hours;\n var hourSpan = options.hourSpan;\n start = new Date(start);\n end = new Date(end);\n if (options.showWorkHours) {\n start.setHours(workDayStart);\n }\n while (start < end) {\n slotEnd = new Date(start);\n hours = slotEnd.getHours();\n isWorkHour = hours >= workDayStart && hours < workDayEnd;\n slotEnd.setHours(slotEnd.getHours() + hourSpan);\n if (hours == slotEnd.getHours()) {\n slotEnd.setHours(slotEnd.getHours() + 2 * hourSpan);\n }\n if (!options.showWorkHours || isWorkHour) {\n slots.push({\n start: start,\n end: slotEnd,\n isNonWorking: !isWorkHour,\n span: 1\n });\n }\n start = slotEnd;\n }\n return slots;\n },\n _days: function (start, end) {\n var slotEnd;\n var slots = [];\n var isWorkDay;\n start = new Date(start);\n end = new Date(end);\n while (start < end) {\n slotEnd = end < kendo.date.nextDay(start) ? end : kendo.date.nextDay(start);\n isWorkDay = this._isWorkDay(start);\n if (!this.options.showWorkDays || isWorkDay) {\n slots.push({\n start: start,\n end: slotEnd,\n isNonWorking: !isWorkDay,\n span: 1\n });\n }\n start = slotEnd;\n }\n return slots;\n },\n _weeks: function (start, end) {\n var slotEnd;\n var slots = [];\n var firstDay = this.calendarInfo().firstDay;\n var daySlots;\n var span;\n start = new Date(start);\n end = new Date(end);\n while (start < end) {\n slotEnd = kendo.date.dayOfWeek(kendo.date.addDays(start, 1), firstDay, 1);\n if (slotEnd > end) {\n slotEnd = end;\n }\n daySlots = this._days(start, slotEnd);\n span = daySlots.length;\n if (span > 0) {\n slots.push({\n start: daySlots[0].start,\n end: daySlots[span - 1].end,\n span: span\n });\n }\n start = slotEnd;\n }\n return slots;\n },\n _months: function (start, end) {\n var slotEnd;\n var endMonth;\n var slots = [];\n var daySlots;\n var span;\n start = new Date(start);\n end = new Date(end);\n while (start < end) {\n slotEnd = new Date(start);\n endMonth = kendo.date.firstDayOfMonth(new Date(slotEnd.setMonth(slotEnd.getMonth() + 1)));\n slotEnd = end < endMonth ? end : endMonth;\n daySlots = this._days(start, slotEnd);\n span = daySlots.length;\n if (span > 0) {\n slots.push({\n start: daySlots[0].start,\n end: daySlots[span - 1].end,\n span: span\n });\n }\n start = slotEnd;\n }\n return slots;\n },\n _years: function (start, end) {\n var slotEnd;\n var monthSpan;\n var endMonth;\n var slots = [];\n start = new Date(start);\n end = new Date(end);\n while (start < end) {\n slotEnd = new Date(start);\n slotEnd = kendo.date.firstDayOfMonth(new Date(slotEnd.setMonth(12)));\n if (slotEnd >= end) {\n slotEnd = end;\n }\n endMonth = slotEnd.getMonth() || 12;\n monthSpan = endMonth - start.getMonth();\n slots.push({\n start: start,\n end: slotEnd,\n span: monthSpan\n });\n start = slotEnd;\n }\n return slots;\n },\n _slotHeaders: function (slots, template) {\n var columns = [];\n var slot;\n for (var i = 0, l = slots.length; i < l; i++) {\n slot = slots[i];\n columns.push({\n text: template(slot),\n isNonWorking: !!slot.isNonWorking,\n span: slot.span\n });\n }\n return columns;\n },\n _isWorkDay: function (date) {\n var day = date.getDay();\n var workDays = this._workDays;\n for (var i = 0, l = workDays.length; i < l; i++) {\n if (workDays[i] === day) {\n return true;\n }\n }\n return false;\n },\n calendarInfo: function () {\n return kendo.getCulture().calendars.standard;\n },\n _renderCurrentTime: function () {\n var currentTime = this._getCurrentTime();\n var timeOffset = this._offset(currentTime);\n var element = $('
');\n var viewStyles = GanttView.styles;\n var tablesWrap = this.element.find(DOT + viewStyles.tasksWrapper);\n var tasksTable = this.element.find(DOT + viewStyles.tasksTable);\n var slot;\n if (!this.content || !this._timeSlots().length) {\n return;\n }\n this.content.find('.k-current-time').remove();\n slot = this._timeSlots()[this._slotIndex('start', currentTime)];\n if (currentTime < slot.start || currentTime > slot.end) {\n return;\n }\n if (tablesWrap.length && tasksTable.length) {\n timeOffset += tasksTable.offset().left - tablesWrap.offset().left;\n }\n element.css({\n left: timeOffset + 'px',\n top: '0px',\n width: '1px',\n height: this._contentHeight + 'px'\n }).appendTo(this.content);\n },\n _getCurrentTime: function () {\n return new Date();\n },\n _currentTime: function () {\n var markerOptions = this.options.currentTimeMarker;\n if (markerOptions !== false && markerOptions.updateInterval !== undefined) {\n this._renderCurrentTime();\n this._currentTimeUpdateTimer = setInterval(proxy(this._renderCurrentTime, this), markerOptions.updateInterval);\n }\n }\n });\n extend(true, GanttView, { styles: viewStyles });\n kendo.ui.GanttDayView = GanttView.extend({\n name: 'day',\n options: {\n timeHeaderTemplate: TIME_HEADER_TEMPLATE,\n dayHeaderTemplate: DAY_HEADER_TEMPLATE,\n resizeTooltipFormat: 'h:mm tt ddd, MMM d'\n },\n range: function (range) {\n var optionsRange = this.options.range;\n this.start = kendo.date.getDate(range.start);\n this.end = kendo.date.getDate(range.end);\n if (kendo.date.getMilliseconds(range.end) > 0 || this.end.getTime() === this.start.getTime()) {\n this.end = kendo.date.addDays(this.end, 1);\n }\n if (optionsRange && optionsRange.start) {\n this.start = kendo.date.getDate(optionsRange.start);\n this.start.setHours(optionsRange.start.getHours());\n }\n if (optionsRange && optionsRange.end) {\n this.end = kendo.date.getDate(optionsRange.end);\n this.end.setHours(optionsRange.end.getHours());\n }\n },\n _createSlots: function () {\n var daySlots;\n var daySlot;\n var hourSlots;\n var hours;\n var slots = [];\n daySlots = this._days(this.start, this.end);\n hourSlots = [];\n for (var i = 0, l = daySlots.length; i < l; i++) {\n daySlot = daySlots[i];\n hours = this._hours(daySlot.start, daySlot.end);\n daySlot.span = hours.length;\n hourSlots.push.apply(hourSlots, hours);\n }\n slots.push(daySlots);\n slots.push(hourSlots);\n return slots;\n },\n _layout: function () {\n var rows = [];\n var options = this.options;\n rows.push(this._slotHeaders(this._slots[0], kendo.template(options.dayHeaderTemplate)));\n rows.push(this._slotHeaders(this._slots[1], kendo.template(options.timeHeaderTemplate)));\n return rows;\n }\n });\n kendo.ui.GanttWeekView = GanttView.extend({\n name: 'week',\n options: {\n dayHeaderTemplate: DAY_HEADER_TEMPLATE,\n weekHeaderTemplate: WEEK_HEADER_TEMPLATE,\n resizeTooltipFormat: 'h:mm tt ddd, MMM d'\n },\n range: function (range) {\n var optionsRange = this.options.range;\n var calendarInfo = this.calendarInfo();\n var firstDay = calendarInfo.firstDay;\n var rangeEnd = range.end;\n var endDay;\n if (firstDay === rangeEnd.getDay()) {\n rangeEnd.setDate(rangeEnd.getDate() + 7);\n }\n this.start = kendo.date.getDate(kendo.date.dayOfWeek(range.start, firstDay, -1));\n this.end = kendo.date.getDate(kendo.date.dayOfWeek(rangeEnd, firstDay, 1));\n if (optionsRange && optionsRange.start) {\n this.start = kendo.date.getDate(optionsRange.start);\n }\n if (optionsRange && optionsRange.end) {\n endDay = new Date(optionsRange.end);\n if (kendo.date.getDate(endDay) < optionsRange.end) {\n this.end = kendo.date.getDate(new Date(endDay.setDate(endDay.getDate() + 1)));\n } else {\n this.end = kendo.date.getDate(endDay);\n }\n }\n },\n _createSlots: function () {\n var slots = [];\n slots.push(this._weeks(this.start, this.end));\n slots.push(this._days(this.start, this.end));\n return slots;\n },\n _layout: function () {\n var rows = [];\n var options = this.options;\n rows.push(this._slotHeaders(this._slots[0], kendo.template(options.weekHeaderTemplate)));\n rows.push(this._slotHeaders(this._slots[1], kendo.template(options.dayHeaderTemplate)));\n return rows;\n }\n });\n kendo.ui.GanttMonthView = GanttView.extend({\n name: 'month',\n options: {\n weekHeaderTemplate: WEEK_HEADER_TEMPLATE,\n monthHeaderTemplate: MONTH_HEADER_TEMPLATE,\n resizeTooltipFormat: 'dddd, MMM d, yyyy'\n },\n range: function (range) {\n var optionsRange = this.options.range;\n var endDay;\n this.start = kendo.date.firstDayOfMonth(range.start);\n this.end = kendo.date.addDays(kendo.date.getDate(kendo.date.lastDayOfMonth(range.end)), 1);\n if (optionsRange && optionsRange.start) {\n this.start = kendo.date.getDate(optionsRange.start);\n }\n if (optionsRange && optionsRange.end) {\n endDay = new Date(optionsRange.end);\n if (kendo.date.getDate(endDay) < optionsRange.end) {\n this.end = kendo.date.getDate(new Date(endDay.setDate(endDay.getDate() + 1)));\n } else {\n this.end = kendo.date.getDate(endDay);\n }\n }\n },\n _createSlots: function () {\n var slots = [];\n slots.push(this._months(this.start, this.end));\n slots.push(this._weeks(this.start, this.end));\n return slots;\n },\n _layout: function () {\n var rows = [];\n var options = this.options;\n rows.push(this._slotHeaders(this._slots[0], kendo.template(options.monthHeaderTemplate)));\n rows.push(this._slotHeaders(this._slots[1], kendo.template(options.weekHeaderTemplate)));\n return rows;\n }\n });\n kendo.ui.GanttYearView = GanttView.extend({\n name: 'year',\n options: {\n yearHeaderTemplate: YEAR_HEADER_TEMPLATE,\n monthHeaderTemplate: MONTH_HEADER_TEMPLATE,\n resizeTooltipFormat: 'dddd, MMM d, yyyy'\n },\n range: function (range) {\n var optionsRange = this.options.range;\n var firstDayOfMonth;\n this.start = kendo.date.firstDayOfMonth(new Date(range.start.setMonth(0)));\n this.end = kendo.date.firstDayOfMonth(new Date(range.end.setMonth(12)));\n if (optionsRange && optionsRange.start) {\n this.start = kendo.date.firstDayOfMonth(optionsRange.start);\n }\n if (optionsRange && optionsRange.end) {\n firstDayOfMonth = kendo.date.firstDayOfMonth(optionsRange.end);\n this.end = kendo.date.getDate(new Date(firstDayOfMonth.setMonth(firstDayOfMonth.getMonth() + 1)));\n }\n },\n _createSlots: function () {\n var slots = [];\n var monthSlots = this._months(this.start, this.end);\n $(monthSlots).each(function (index, slot) {\n slot.span = 1;\n });\n slots.push(this._years(this.start, this.end));\n slots.push(monthSlots);\n return slots;\n },\n _layout: function () {\n var rows = [];\n var options = this.options;\n rows.push(this._slotHeaders(this._slots[0], kendo.template(options.yearHeaderTemplate)));\n rows.push(this._slotHeaders(this._slots[1], kendo.template(options.monthHeaderTemplate)));\n return rows;\n }\n });\n var timelineStyles = {\n wrapper: 'k-timeline k-grid k-widget',\n gridHeader: 'k-grid-header',\n gridHeaderWrap: 'k-grid-header-wrap',\n gridContent: 'k-grid-content',\n gridContentWrap: 'k-grid-content',\n tasksWrapper: 'k-gantt-tables',\n dependenciesWrapper: 'k-gantt-dependencies',\n task: 'k-task',\n taskOffset: 'k-task-offset',\n taskOffsetWrap: 'k-task-offset-wrap',\n taskPlanned: 'k-task-planned',\n line: 'k-gantt-line',\n taskResizeHandle: 'k-resize-handle',\n taskResizeHandleWest: 'k-resize-w',\n taskDragHandle: 'k-task-draghandle',\n taskComplete: 'k-task-complete',\n taskDelete: 'k-task-delete',\n taskWrapActive: 'k-task-wrap-active',\n taskWrap: 'k-task-wrap',\n taskDot: 'k-task-dot',\n taskDotStart: 'k-task-start',\n taskDotEnd: 'k-task-end',\n hovered: 'k-state-hover',\n selected: 'k-state-selected',\n origin: 'k-origin'\n };\n var GanttTimeline = kendo.ui.GanttTimeline = Widget.extend({\n init: function (element, options) {\n Widget.fn.init.call(this, element, options);\n if (!this.options.views || !this.options.views.length) {\n this.options.views = [\n 'day',\n 'week',\n 'month'\n ];\n }\n isRtl = kendo.support.isRtl(element);\n this._wrapper();\n this._domTrees();\n this._views();\n this._selectable();\n this._draggable();\n this._resizable();\n this._percentResizeDraggable();\n this._createDependencyDraggable();\n this._attachEvents();\n this._tooltip();\n },\n options: {\n name: 'GanttTimeline',\n messages: {\n views: {\n day: 'Day',\n week: 'Week',\n month: 'Month',\n year: 'Year',\n start: 'Start',\n end: 'End'\n }\n },\n snap: true,\n selectable: true,\n editable: true\n },\n destroy: function () {\n Widget.fn.destroy.call(this);\n clearTimeout(this._tooltipTimeout);\n if (this._currentTimeUpdateTimer) {\n clearInterval(this._currentTimeUpdateTimer);\n }\n this._unbindView(this._selectedView);\n if (this._moveDraggable) {\n this._moveDraggable.destroy();\n }\n if (this._resizeDraggable) {\n this._resizeDraggable.destroy();\n }\n if (this._percentDraggable) {\n this._percentDraggable.destroy();\n }\n if (this._dependencyDraggable) {\n this._dependencyDraggable.destroy();\n }\n if (this.touch) {\n this.touch.destroy();\n }\n this._headerTree = null;\n this._taskTree = null;\n this._dependencyTree = null;\n this.wrapper.off(NS);\n kendo.destroy(this.wrapper);\n },\n _wrapper: function () {\n var styles = GanttTimeline.styles;\n var that = this;\n var options = this.options;\n var calculateSize = function () {\n var rowHeight = typeof options.rowHeight === STRING ? options.rowHeight : options.rowHeight + 'px';\n var table = $(kendo.format(SIZE_CALCULATION_TEMPLATE, rowHeight));\n var calculatedRowHeight;\n var calculatedCellHeight;\n var content = that.wrapper.find(DOT + styles.tasksWrapper);\n content.append(table);\n calculatedRowHeight = outerHeight(table.find('tr'));\n calculatedCellHeight = table.find('td').height();\n table.remove();\n return {\n 'row': calculatedRowHeight,\n 'cell': calculatedCellHeight\n };\n };\n this.wrapper = this.element.addClass(styles.wrapper).append('
').append('
');\n if (options.rowHeight) {\n this._calculatedSize = calculateSize();\n }\n },\n _domTrees: function () {\n var styles = GanttTimeline.styles;\n var tree = kendo.dom.Tree;\n var wrapper = this.wrapper;\n this._headerTree = new tree(wrapper.find(DOT + styles.gridHeaderWrap)[0]);\n this._taskTree = new tree(wrapper.find(DOT + styles.tasksWrapper)[0]);\n this._dependencyTree = new tree(wrapper.find(DOT + styles.dependenciesWrapper)[0]);\n },\n _views: function () {\n var views = this.options.views;\n var view;\n var isSettings;\n var name;\n var defaultView;\n var selected;\n this.views = {};\n for (var i = 0, l = views.length; i < l; i++) {\n view = views[i];\n isSettings = isPlainObject(view);\n if (isSettings && view.selectable === false) {\n continue;\n }\n name = isSettings ? typeof view.type !== 'string' ? view.title : view.type : view;\n defaultView = defaultViews[name];\n if (defaultView) {\n if (isSettings) {\n view.type = defaultView.type;\n }\n defaultView.title = this.options.messages.views[name];\n }\n view = extend({ title: name }, defaultView, isSettings ? view : {});\n if (name) {\n this.views[name] = view;\n if (!selected || view.selected) {\n selected = name;\n }\n }\n }\n if (selected) {\n this._selectedViewName = selected;\n }\n },\n view: function (name) {\n if (name) {\n this._selectView(name);\n this.trigger('navigate', {\n view: name,\n action: 'changeView'\n });\n }\n return this._selectedView;\n },\n _selectView: function (name) {\n if (name && this.views[name]) {\n if (this._selectedView) {\n this._unbindView(this._selectedView);\n }\n this._selectedView = this._initializeView(name);\n this._selectedViewName = name;\n }\n },\n _viewByIndex: function (index) {\n var view;\n var views = this.views;\n for (view in views) {\n if (!index) {\n return view;\n }\n index--;\n }\n },\n _initializeView: function (name) {\n var view = this.views[name];\n if (view) {\n var type = view.type;\n if (typeof type === 'string') {\n type = kendo.getter(view.type)(window);\n }\n if (type) {\n var newRange = {};\n extend(newRange, this.options.range, view.range);\n var newDate = view.date || this.options.date;\n view = new type(this.wrapper, trimOptions(extend(true, {\n headerTree: this._headerTree,\n taskTree: this._taskTree,\n dependencyTree: this._dependencyTree,\n calculatedSize: this._calculatedSize\n }, view, this.options, {\n date: newDate,\n range: newRange\n })));\n } else {\n throw new Error('There is no such view');\n }\n }\n return view;\n },\n _unbindView: function (view) {\n if (view) {\n view.destroy();\n }\n },\n _range: function (tasks) {\n var startOrder = {\n field: 'start',\n dir: 'asc'\n };\n var endOrder = {\n field: 'end',\n dir: 'desc'\n };\n if (!tasks || !tasks.length) {\n return {\n start: new Date(),\n end: new Date()\n };\n }\n var start = new Query(tasks).sort(startOrder).toArray()[0].start || new Date();\n var end = new Query(tasks).sort(endOrder).toArray()[0].end || new Date();\n return {\n start: new Date(start),\n end: new Date(end)\n };\n },\n _render: function (tasks) {\n var view = this.view();\n var range = this._range(tasks);\n var date = view.options.date;\n this._tasks = tasks;\n view.range(range);\n view.renderLayout();\n view.render(tasks);\n if (date) {\n view._scrollToDate(date);\n }\n },\n _renderDependencies: function (dependencies) {\n this.view()._renderDependencies(dependencies);\n },\n _taskByUid: function (uid) {\n var tasks = this._tasks;\n var length = tasks.length;\n var task;\n for (var i = 0; i < length; i++) {\n task = tasks[i];\n if (task.uid === uid) {\n return task;\n }\n }\n },\n _draggable: function () {\n var that = this;\n var element;\n var task;\n var currentStart;\n var startOffset;\n var snap = this.options.snap;\n var styles = GanttTimeline.styles;\n var editable = this.options.editable;\n var cleanUp = function () {\n that.view()._removeDragHint();\n if (element) {\n element.css('opacity', 1);\n }\n element = null;\n task = null;\n that.dragInProgress = false;\n };\n if (!editable || editable.move === false || editable.update === false) {\n return;\n }\n this._moveDraggable = new kendo.ui.Draggable(this.wrapper, {\n distance: 0,\n filter: DOT + styles.task + ',' + DOT + styles.taskOffset,\n holdToDrag: kendo.support.mobileOS,\n ignore: DOT + styles.taskResizeHandle\n });\n this._moveDraggable.bind('dragstart', function (e) {\n var view = that.view();\n element = e.currentTarget.closest(DOT + styles.taskWrap);\n task = that._taskByUid(e.currentTarget.parent().find(DOT + styles.task).attr('data-uid'));\n if (that.trigger('moveStart', { task: task })) {\n e.preventDefault();\n return;\n }\n currentStart = task.start;\n startOffset = view._timeByPosition(e.x.location, snap) - currentStart;\n view._createDragHint(element);\n element.css('opacity', 0.5);\n clearTimeout(that._tooltipTimeout);\n that.dragInProgress = true;\n }).bind('drag', kendo.throttle(function (e) {\n if (!that.dragInProgress) {\n return;\n }\n var view = that.view();\n var date = new Date(view._timeByPosition(e.x.location, snap) - startOffset);\n var updateHintDate = date;\n if (!that.trigger('move', {\n task: task,\n start: date\n })) {\n currentStart = date;\n if (isRtl) {\n updateHintDate = new Date(currentStart.getTime() + task.duration());\n }\n view._updateDragHint(updateHintDate);\n }\n }, 15)).bind('dragend', function () {\n that.trigger('moveEnd', {\n task: task,\n start: currentStart\n });\n cleanUp();\n }).bind('dragcancel', function () {\n cleanUp();\n }).userEvents.bind('select', function () {\n blurActiveElement();\n });\n },\n _resizable: function () {\n var that = this;\n var element;\n var task;\n var currentStart;\n var currentEnd;\n var resizeStart;\n var snap = this.options.snap;\n var styles = GanttTimeline.styles;\n var editable = this.options.editable;\n var cleanUp = function () {\n that.view()._removeResizeHint();\n element = null;\n task = null;\n that.dragInProgress = false;\n };\n if (!editable || editable.resize === false || editable.update === false) {\n return;\n }\n this._resizeDraggable = new kendo.ui.Draggable(this.wrapper, {\n distance: 0,\n filter: DOT + styles.taskResizeHandle,\n holdToDrag: false\n });\n this._resizeDraggable.bind('dragstart', function (e) {\n resizeStart = e.currentTarget.hasClass(styles.taskResizeHandleWest);\n if (isRtl) {\n resizeStart = !resizeStart;\n }\n element = e.currentTarget.closest(DOT + styles.taskWrap).find(DOT + styles.task);\n task = that._taskByUid(element.attr('data-uid'));\n if (that.trigger('resizeStart', { task: task })) {\n e.preventDefault();\n return;\n }\n currentStart = task.start;\n currentEnd = task.end;\n that.view()._createResizeHint(task);\n clearTimeout(that._tooltipTimeout);\n that.dragInProgress = true;\n }).bind('drag', kendo.throttle(function (e) {\n if (!that.dragInProgress) {\n return;\n }\n var view = that.view();\n var date = view._timeByPosition(e.x.location, snap, !resizeStart);\n if (resizeStart) {\n if (date < currentEnd) {\n currentStart = date;\n } else {\n currentStart = currentEnd;\n }\n } else {\n if (date > currentStart) {\n currentEnd = date;\n } else {\n currentEnd = currentStart;\n }\n }\n if (!that.trigger('resize', {\n task: task,\n start: currentStart,\n end: currentEnd\n })) {\n view._updateResizeHint(currentStart, currentEnd, resizeStart);\n }\n }, 15)).bind('dragend', function () {\n that.trigger('resizeEnd', {\n task: task,\n resizeStart: resizeStart,\n start: currentStart,\n end: currentEnd\n });\n cleanUp();\n }).bind('dragcancel', function () {\n cleanUp();\n }).userEvents.bind('select', function () {\n blurActiveElement();\n });\n },\n _percentResizeDraggable: function () {\n var that = this;\n var task;\n var taskElement;\n var taskElementOffset;\n var timelineOffset;\n var originalPercentWidth;\n var maxPercentWidth;\n var currentPercentComplete;\n var tooltipTop;\n var tooltipLeft;\n var styles = GanttTimeline.styles;\n var delta;\n var editable = this.options.editable;\n var cleanUp = function () {\n that.view()._removePercentCompleteTooltip();\n taskElement = null;\n task = null;\n that.dragInProgress = false;\n };\n var updateElement = function (width) {\n var taskDragHandle = taskElement.siblings(DOT + styles.taskDragHandle);\n if (!taskDragHandle.length) {\n taskDragHandle = taskElement.closest(DOT + styles.taskWrap).find(DOT + styles.taskDragHandle);\n }\n taskDragHandle.css(isRtl ? 'right' : 'left', width);\n taskElement.find(DOT + styles.taskComplete).width(width);\n };\n if (!editable || editable.dragPercentComplete === false || editable.update === false) {\n return;\n }\n this._percentDraggable = new kendo.ui.Draggable(this.wrapper, {\n distance: 0,\n filter: DOT + styles.taskDragHandle,\n holdToDrag: false\n });\n this._percentDraggable.bind('dragstart', function (e) {\n if (that.trigger('percentResizeStart')) {\n e.preventDefault();\n return;\n }\n taskElement = e.currentTarget.siblings(DOT + styles.task);\n if (!taskElement.length) {\n taskElement = e.currentTarget.closest(DOT + styles.taskWrap).find(DOT + styles.task);\n }\n task = that._taskByUid(taskElement.attr('data-uid'));\n currentPercentComplete = task.percentComplete;\n taskElementOffset = taskElement.offset();\n timelineOffset = this.element.offset();\n originalPercentWidth = taskElement.find(DOT + styles.taskComplete).width();\n maxPercentWidth = outerWidth(taskElement);\n clearTimeout(that._tooltipTimeout);\n that.dragInProgress = true;\n }).bind('drag', kendo.throttle(function (e) {\n if (!that.dragInProgress) {\n return;\n }\n delta = isRtl ? -e.x.initialDelta : e.x.initialDelta;\n var currentWidth = Math.max(0, Math.min(maxPercentWidth, originalPercentWidth + delta));\n currentPercentComplete = Math.round(currentWidth / maxPercentWidth * 100);\n updateElement(currentWidth);\n tooltipTop = taskElementOffset.top - timelineOffset.top;\n tooltipLeft = taskElementOffset.left + currentWidth - timelineOffset.left;\n if (isRtl) {\n tooltipLeft += maxPercentWidth - 2 * currentWidth;\n }\n that.view()._updatePercentCompleteTooltip(tooltipTop, tooltipLeft, currentPercentComplete);\n }, 15)).bind('dragend', function () {\n that.trigger('percentResizeEnd', {\n task: task,\n percentComplete: currentPercentComplete / 100\n });\n cleanUp();\n }).bind('dragcancel', function () {\n updateElement(originalPercentWidth);\n cleanUp();\n }).userEvents.bind('select', function () {\n blurActiveElement();\n });\n },\n _createDependencyDraggable: function () {\n var that = this;\n var originalHandle;\n var hoveredHandle = $();\n var hoveredTask = $();\n var startX;\n var startY;\n var styles = GanttTimeline.styles;\n var editable = this.options.editable;\n var cleanUp = function () {\n originalHandle.css('display', '').removeClass(styles.hovered);\n originalHandle.parent().removeClass(styles.origin);\n originalHandle = null;\n toggleHandles(false);\n hoveredTask = $();\n hoveredHandle = $();\n that.view()._removeDependencyDragHint();\n that.dragInProgress = false;\n };\n var toggleHandles = function (value) {\n if (!hoveredTask.hasClass(styles.origin)) {\n hoveredTask.find(DOT + styles.taskDot).css('display', value ? 'block' : '');\n hoveredHandle.toggleClass(styles.hovered, value);\n }\n };\n if (!editable || editable.dependencyCreate === false) {\n return;\n }\n this._dependencyDraggable = new kendo.ui.Draggable(this.wrapper, {\n distance: 0,\n filter: DOT + styles.taskDot,\n holdToDrag: false\n });\n this._dependencyDraggable.bind('dragstart', function (e) {\n if (that.trigger('dependencyDragStart')) {\n e.preventDefault();\n return;\n }\n originalHandle = e.currentTarget.css('display', 'block').addClass(styles.hovered);\n originalHandle.parent().addClass(styles.origin);\n var elementOffset = originalHandle.offset();\n var tablesOffset = that.wrapper.find(DOT + styles.tasksWrapper).offset();\n startX = Math.round(elementOffset.left - tablesOffset.left + outerHeight(originalHandle) / 2);\n startY = Math.round(elementOffset.top - tablesOffset.top + outerWidth(originalHandle) / 2);\n clearTimeout(that._tooltipTimeout);\n that.dragInProgress = true;\n }).bind('drag', kendo.throttle(function (e) {\n if (!that.dragInProgress) {\n return;\n }\n that.view()._removeDependencyDragHint();\n var target = $(kendo.elementUnderCursor(e));\n var tablesOffset = that.wrapper.find(DOT + styles.tasksWrapper).offset();\n var currentX = e.x.location - tablesOffset.left;\n var currentY = e.y.location - tablesOffset.top;\n that.view()._updateDependencyDragHint({\n x: startX,\n y: startY\n }, {\n x: currentX,\n y: currentY\n });\n toggleHandles(false);\n hoveredHandle = target.hasClass(styles.taskDot) ? target : $();\n hoveredTask = target.closest(DOT + styles.taskWrap);\n toggleHandles(true);\n }, 15)).bind('dragend', function () {\n if (hoveredHandle.length) {\n var fromStart = originalHandle.hasClass(styles.taskDotStart);\n var toStart = hoveredHandle.hasClass(styles.taskDotStart);\n var type = fromStart ? toStart ? 3 : 2 : toStart ? 1 : 0;\n var predecessorElement = originalHandle.siblings(DOT + styles.task);\n if (!predecessorElement.length) {\n predecessorElement = originalHandle.closest(DOT + styles.taskWrap).find(DOT + styles.task);\n }\n var predecessor = that._taskByUid(predecessorElement.attr('data-uid'));\n var successorElement = hoveredHandle.siblings(DOT + styles.task);\n if (!successorElement.length) {\n successorElement = hoveredHandle.closest(DOT + styles.taskWrap).find(DOT + styles.task);\n }\n var successor = that._taskByUid(successorElement.attr('data-uid'));\n if (predecessor !== successor) {\n that.trigger('dependencyDragEnd', {\n type: type,\n predecessor: predecessor,\n successor: successor\n });\n }\n }\n cleanUp();\n }).bind('dragcancel', function () {\n cleanUp();\n }).userEvents.bind('select', function () {\n blurActiveElement();\n });\n },\n _selectable: function () {\n var that = this;\n var styles = GanttTimeline.styles;\n if (this.options.selectable) {\n this.wrapper.on(CLICK + NS, DOT + styles.task + ',' + DOT + styles.taskOffset, function (e) {\n e.stopPropagation();\n var uid = $(this).attr('data-uid');\n if (!uid) {\n uid = $(this).closest(DOT + styles.taskWrap).find(DOT + styles.task).data('uid');\n }\n if (!e.ctrlKey) {\n that.trigger('select', { uid: uid });\n } else {\n that.trigger('clear');\n }\n }).on(CLICK + NS, DOT + styles.taskWrap, function (e) {\n e.stopPropagation();\n $(this).css('z-index', '0');\n var target = $(document.elementFromPoint(e.clientX, e.clientY));\n if (target.hasClass(styles.line)) {\n target.click();\n }\n $(this).css('z-index', '');\n }).on(CLICK + NS, DOT + styles.tasksWrapper, function () {\n if (that.selectDependency().length > 0) {\n that.clearSelection();\n } else {\n that.trigger('clear');\n }\n }).on(CLICK + NS, DOT + styles.line, function (e) {\n e.stopPropagation();\n that.selectDependency(this);\n });\n }\n },\n select: function (value) {\n var element = this.wrapper.find(value);\n var styles = GanttTimeline.styles;\n if (element.length) {\n this.clearSelection();\n element.addClass(styles.selected);\n if (kendo.support.mobileOS) {\n element.parent().addClass(styles.taskWrapActive);\n }\n return;\n }\n return this.wrapper.find(DOT + styles.task + DOT + styles.selected);\n },\n selectDependency: function (value) {\n var element = this.wrapper.find(value);\n var uid;\n var styles = GanttTimeline.styles;\n if (element.length) {\n this.clearSelection();\n this.trigger('clear');\n uid = $(element).attr('data-uid');\n this.wrapper.find(DOT + styles.line + '[data-uid=\\'' + uid + '\\']').addClass(styles.selected);\n return;\n }\n return this.wrapper.find(DOT + styles.line + DOT + styles.selected);\n },\n clearSelection: function () {\n var styles = GanttTimeline.styles;\n this.wrapper.find(DOT + styles.selected).removeClass(styles.selected);\n if (kendo.support.mobileOS) {\n this.wrapper.find(DOT + styles.taskWrapActive).removeClass(styles.taskWrapActive);\n }\n },\n _attachEvents: function () {\n var that = this;\n var styles = GanttTimeline.styles;\n var editable = this.options.editable;\n if (editable) {\n this._tabindex();\n this.wrapper.on(CLICK + NS, DOT + styles.taskDelete, function (e) {\n that.trigger('removeTask', { uid: $(this).closest(DOT + styles.taskWrap).find(DOT + styles.task).attr('data-uid') });\n e.stopPropagation();\n e.preventDefault();\n }).on(KEYDOWN + NS, function (e) {\n var selectedDependency;\n var editable = that.options.editable;\n if (e.keyCode === keys.DELETE && editable && editable.dependencyDestroy !== false) {\n selectedDependency = that.selectDependency();\n if (selectedDependency.length) {\n that.trigger('removeDependency', { uid: selectedDependency.attr('data-uid') });\n that.clearSelection();\n }\n }\n });\n if (!kendo.support.mobileOS) {\n this.wrapper.on(DBLCLICK + NS, DOT + styles.task + ',' + DOT + styles.taskOffset, function (e) {\n if (that.options.editable.update !== false) {\n that.trigger('editTask', { uid: $(this).closest(DOT + styles.taskWrap).find(DOT + styles.task).attr('data-uid') });\n e.stopPropagation();\n e.preventDefault();\n }\n });\n } else {\n this.touch = this.wrapper.kendoTouch({\n filter: DOT + styles.task + ',' + DOT + styles.taskOffset,\n doubletap: function (e) {\n if (that.options.editable.update !== false) {\n that.trigger('editTask', { uid: $(e.touch.currentTarget).closest(DOT + styles.taskWrap).find(DOT + styles.task).attr('data-uid') });\n }\n }\n }).data('kendoTouch');\n }\n }\n },\n _tooltip: function () {\n var that = this;\n var tooltipOptions = this.options.tooltip;\n var styles = GanttTimeline.styles;\n var currentMousePosition;\n var mouseMoveHandler = function (e) {\n currentMousePosition = e.clientX;\n };\n if (tooltipOptions && tooltipOptions.visible === false) {\n return;\n }\n if (!kendo.support.mobileOS) {\n this.wrapper.on(MOUSEENTER + NS, DOT + styles.task, function () {\n var element = this;\n var task = that._taskByUid($(this).attr('data-uid'));\n if (that.dragInProgress) {\n return;\n }\n that._tooltipTimeout = setTimeout(function () {\n that.view()._createTaskTooltip(task, element, currentMousePosition);\n }, 800);\n $(this).on(MOUSEMOVE, mouseMoveHandler);\n }).on(MOUSELEAVE + NS, DOT + styles.task, function () {\n clearTimeout(that._tooltipTimeout);\n that.view()._removeTaskTooltip();\n $(this).off(MOUSEMOVE, mouseMoveHandler);\n }).on(MOUSEENTER + NS, DOT + styles.taskOffset, function () {\n var taskElement = $(this).closest(DOT + styles.taskWrap).find(DOT + styles.task);\n var task = that._taskByUid(taskElement.attr('data-uid'));\n if (that.dragInProgress) {\n return;\n }\n that._offsetTooltipTimeout = setTimeout(function () {\n that.view()._createOffsetTooltip(task, taskElement, currentMousePosition);\n }, 800);\n $(this).on(MOUSEMOVE, mouseMoveHandler);\n }).on(MOUSELEAVE + NS, DOT + styles.taskOffset, function () {\n clearTimeout(that._offsetTooltipTimeout);\n that.view()._removeOffsetTooltip();\n $(this).off(MOUSEMOVE, mouseMoveHandler);\n }).on(MOUSEENTER + NS, DOT + styles.taskPlanned, function () {\n var taskElement = $(this).closest(DOT + styles.taskWrap).find(DOT + styles.task);\n var task = that._taskByUid(taskElement.attr('data-uid'));\n that._plannedTooltipTimeout = setTimeout(function () {\n that.view()._createPlannedTooltip(task, taskElement, currentMousePosition);\n }, 800);\n $(this).on(MOUSEMOVE, mouseMoveHandler);\n }).on(MOUSELEAVE + NS, DOT + styles.taskPlanned, function () {\n clearTimeout(that._plannedTooltipTimeout);\n that.view()._removePlannedTooltip();\n $(this).off(MOUSEMOVE, mouseMoveHandler);\n });\n } else {\n this.wrapper.on(CLICK + NS, DOT + styles.taskDelete, function (e) {\n e.stopPropagation();\n that.view()._removeTaskTooltip();\n }).on(MOUSELEAVE + NS, DOT + styles.task, function (e) {\n var parents = $(e.relatedTarget).parents(DOT + styles.taskWrap, DOT + styles.task);\n if (parents.length === 0) {\n that.view()._removeTaskTooltip();\n }\n }).on(MOUSELEAVE + NS, DOT + styles.taskOffset, function (e) {\n var parents = $(e.relatedTarget).parents(DOT + styles.taskWrap, DOT + styles.task);\n if (parents.length === 0) {\n that.view()._removeOffsetTooltip();\n }\n }).on(MOUSELEAVE + NS, DOT + styles.taskPlanned, function (e) {\n var parents = $(e.relatedTarget).parents(DOT + styles.taskWrap, DOT + styles.task);\n if (parents.length === 0) {\n that.view()._removePlannedTooltip();\n }\n });\n if (this.touch) {\n this.touch.bind('tap', function (e) {\n var element = $(e.touch.target);\n var currentPosition = e.touch.x.client;\n var task;\n if (!element.hasClass(styles.task)) {\n task = that._taskByUid(element.closest(DOT + styles.taskWrap).find(DOT + styles.task).attr('data-uid'));\n if (that.view()._offsetTooltip) {\n that.view()._removeOffsetTooltip();\n }\n that.view()._createOffsetTooltip(task, element, currentPosition);\n } else {\n task = that._taskByUid(element.attr('data-uid'));\n if (that.view()._taskTooltip) {\n that.view()._removeTaskTooltip();\n }\n that.view()._createTaskTooltip(task, element, currentPosition);\n }\n }).bind('doubletap', function () {\n that.view()._removeTaskTooltip();\n that.view()._removeOffsetTooltip();\n });\n }\n }\n },\n _setPlanned: function (value) {\n this.options.showPlannedTasks = value;\n this.view().options.showPlannedTasks = value;\n }\n });\n extend(true, GanttTimeline, { styles: timelineStyles });\n }(window.kendo.jQuery));\n return window.kendo;\n}, typeof define == 'function' && define.amd ? define : function (a1, a2, a3) {\n (a3 || a2)();\n}));"]}