From 68a850229d439350dba0e5fa6adb096c148e73a7 Mon Sep 17 00:00:00 2001 From: Yuka Saito Date: Fri, 29 Jan 2016 22:12:11 +0900 Subject: [PATCH 1/2] highlight data row when a row in left panel is clicked when the row has already been highlighted, remove highlight --- css/style.css | 8 +++++ js/jquery.fn.gantt.js | 76 +++++++++++++++++++++++++++++++------------ 2 files changed, 63 insertions(+), 21 deletions(-) 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/js/jquery.fn.gantt.js b/js/jquery.fn.gantt.js index 564f419..f32b3f9 100644 --- a/js/jquery.fn.gantt.js +++ b/js/jquery.fn.gantt.js @@ -284,6 +284,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 +328,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 +1159,38 @@ } }); }, + + setRowClick: function(element, row, rowNum) { + row.click(function() { + // 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 +1738,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; From 91cfb0673ba0276eba4ab198a2eceb3c90b2278d Mon Sep 17 00:00:00 2001 From: Yuka Saito Date: Mon, 29 Feb 2016 08:37:05 +0900 Subject: [PATCH 2/2] highlightRow as an option --- index.html | 13 +++++++++++-- js/jquery.fn.gantt.js | 24 ++++++++++++++---------- 2 files changed, 25 insertions(+), 12 deletions(-) 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 f32b3f9..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 @@ -1162,18 +1164,20 @@ setRowClick: function(element, row, rowNum) { row.click(function() { - // remove highlight - $(element).find(".fn-gantt .rightPanel .dataPanel .highlight").remove(); + if (settings.highlightRow) { + // remove highlight + $(element).find(".fn-gantt .rightPanel .dataPanel .highlight").remove(); + + if(element.highlightedRow === rowNum) { + // currently highlighted + element.highlightedRow = null; + return false; + } - if(element.highlightedRow === rowNum) { - // currently highlighted - element.highlightedRow = null; - return false; + // currently no highlight or highlight another line + core.highlightRow(element, rowNum); } - // currently no highlight or highlight another line - core.highlightRow(element, rowNum); - }); },