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