diff --git a/css/style.css b/css/style.css index 0756dfe..c2e8eab 100644 --- a/css/style.css +++ b/css/style.css @@ -231,6 +231,14 @@ color: #714715 !important; } +.fn-gantt .highlight { + background-color: rgba(222, 238, 239, 0.6); + z-index: 1; + position: absolute; + height: 24px; + width : 100%; +} + /* === BOTTOM NAVIGATION === */ diff --git a/index.html b/index.html index dd193db..5fac7c3 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + jQuery.Gantt @@ -271,6 +271,14 @@

Boolean + + + highlightRow + + true + + Boolean + @@ -577,7 +585,8 @@

if (window.console && typeof console.log === "function") { console.log("chart rendered"); } - } + }, + highlightRow : false }); $(".gantt").popover({ diff --git a/js/jquery.fn.gantt.js b/js/jquery.fn.gantt.js index 564f419..7f6a7a7 100644 --- a/js/jquery.fn.gantt.js +++ b/js/jquery.fn.gantt.js @@ -193,7 +193,9 @@ // callbacks onItemClick: function (data) { return; }, onAddClick: function (dt, rowId) { return; }, - onRender: $.noop + onRender: $.noop, + // extensions + highlightRow : true }; // read options @@ -284,6 +286,10 @@ core.markNow(element); core.fillData(element, $dataPanel, $leftPanel); + if (element.highlightedRow !== null) { + core.highlightRow(element, element.highlightedRow); + } + // Set a cookie to record current position in the view if (settings.useCookie) { var sc = $.cookie(settings.cookieKey + "ScrollPos"); @@ -324,36 +330,33 @@ .css("height", tools.getCellSize() * element.headerRows) .css("width", "100%")); - var entries = []; $.each(element.data, function (i, entry) { if (i >= element.pageNum * settings.itemsPerPage && i < (element.pageNum * settings.itemsPerPage + settings.itemsPerPage)) { - var dataId = ('id' in entry) ? '" data-id="' + entry.id : ''; - entries.push( - '
' + - '' + - (entry.name || '') + - '' + - '
'); + + var nameRow = $('
').addClass('row name').addClass('row' + i).addClass(entry.desc ? '' : 'fn-wide') + .attr('id', 'rowheader' + i).data('offset', i % settings.itemsPerPage * tools.getCellSize()).data('id', entry.id) + .append( + $('').addClass('fn-label').addClass(entry.cssClass ? entry.cssClass : '').text(entry.name || '') + ); + + core.setRowClick(element, nameRow, i); + + ganttLeftPanel.append(nameRow); if (entry.desc) { - entries.push( - '
' + - '' + - entry.desc + - '' + - '
'); + var descRow = $('
').addClass('row desc').addClass('row' + i).attr('id', 'RowdId_' + i).data('id', entry.id) + .append( + $('').addClass('fn-label').addClass(entry.cssClass ? entry.cssClass : '').text(entry.desc) + ); + core.setRowClick(element, descRow, i); + + ganttLeftPanel.append(descRow); } } }); - return ganttLeftPanel.append(entries.join("")); + return ganttLeftPanel; }, // Create and return the data panel element @@ -1158,6 +1161,40 @@ } }); }, + + setRowClick: function(element, row, rowNum) { + row.click(function() { + if (settings.highlightRow) { + // remove highlight + $(element).find(".fn-gantt .rightPanel .dataPanel .highlight").remove(); + + if(element.highlightedRow === rowNum) { + // currently highlighted + element.highlightedRow = null; + return false; + } + + // currently no highlight or highlight another line + core.highlightRow(element, rowNum); + } + + }); + }, + + highlightRow: function(element, rowNum) { + var $dataPanel = $(element).find(".fn-gantt .rightPanel .dataPanel"); + + var topEl = $(element).find("#rowheader" + rowNum); + if (topEl.length > 0) { + var top = tools.getCellSize() * element.headerRows + topEl.data("offset"); + + var highlight = $('
').addClass('highlight').css('top', top); + $dataPanel.append(highlight); + + element.highlightedRow = rowNum; + } + }, + // **Navigation** navigateTo: function (element, val) { var $rightPanel = $(element).find(".fn-gantt .rightPanel"); @@ -1705,6 +1742,7 @@ this.pageCount = 0; // Available pages count this.rowsOnLastPage = 0; // How many rows on last page this.rowsNum = 0; // Number of total rows + this.highlightedRow = null; // Currnt highlighted row number this.hPosition = 0; // Current position on diagram (Horizontal) this.dateStart = null; this.dateEnd = null;