Add shiftOnlyWheelScroll setting (default: true) #43
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In this committer's view, sideways scrolling with the mouse wheel should require holding the shift key so as not to interfere with page scrolling especially for large gantt charts.
avalosro
added a commit
to avalosro/jQuery.Gantt
that referenced
this pull request
Dec 17, 2016
// jQuery Gantt Chart
// ==================
//
// Basic usage:
//*********************************************************************************************************************************
//
// Change line: createProgressBar: function (days, cls, desc, label, dataObj) { //Is modified by errors in its original structure
// For: createProgressBar: function (days, id, cls, desc, label, dataObj) { //this correct structure
//
// Add info in bar objet
//
// var bar = $('<div class="bar"><div class="fn-label">' + label + '</div></div>')
// .addClass(cls)
// .attr({
// 'id': id, //new properties
// 'data-desc': desc, //new properties
// 'data-label': label, //new properties
// })
// .css({
// width: ((cellWidth * days) - barMarg) + 2
// })
// .data("dataObj", dataObj);
//
// Change return in event on click:
// bar.click(function (e) {
// e.stopPropagation();
// settings.onItemClick(this);
// });
//
// Add event on double click:
// Add in options properties:
// onItemDblDlick: function (data) { return; },
//
// Add enven double click:
// bar.dblclick(function (e) {
// e.stopPropagation();
// settings.onItemDblDlick(this);
// });
//
//
//************************************************** example for the new features **************************************************
/*
$(function() {
"use strict";
$(".gantt").gantt({
source:
[
{
name: "Testing",
desc: " ",
values:
[{
from: "/Date(" + strTodate('2016-12-05', '-').valueOf() + ")/",
to: "/Date(" + strTodate('2016-12-10', '-').valueOf() + ")/",
label: "Test Roman chart",
id: 'r25',
customClass: "ganttRed",
desc: "Item 0 - 10<br>12.06.2012 15:39:09 - 12.06.2012 15:39:09<br>Test 0",
dataObj:
{
dat1: 1000,
dat2: 'Woou!',
dat3: 'Hou!',
}
}]
},
{
name: "Testing",
desc: " ",
values:
[{
from: "/Date(" + strTodate('2016-12-10', '-').valueOf() + ")/",
to: "/Date(" + strTodate('2016-12-15', '-').valueOf() + ")/",
label: "Test Roman chart",
id: 'r26',
customClass: "ganttRed",
desc: "Item 0 - 10<br>12.06.2012 15:39:09 - 12.06.2012 15:39:09<br>Test 0",
dataObj:
{
dat1: 1001,
dat2: 'Ammm!',
dat3: 'Not yet!',
}
}]
}
],
//onItemClick:function(sender) {
// alert('Event onclick result ID = ' + $(sender).attr('id'));
//},
onItemDblDlick: function(sender) {
alert('Event onDoubleClick result ID = ' + $(sender).attr('id'));
var iobjets = $(sender).data('dataObj');
alert(iobjets.dat1)
// show all info
//$.each(iobjets, function () {
// alert(this);
//});
},
scale: "weeks",
maxScale: "months",
minScale: "days",
navigate: "scroll",
itemsPerPage: 10,
draggable: true,
useCookie: true,
scrollToToday: false,
});
$(".gantt").popover({
selector: ".bar",
title: "I'm a popover",
content: "And I'm the content of said popover.",
trigger: "hover"
});
});
function strTodate(datestring, delimiteby)
{
var arrdate = datestring.split(delimiteby);
var dt = new Date(parseInt(arrdate[0]), parseInt(arrdate[1]), parseInt(arrdate[2]));
return dt;
}
*/
/*jshint shadow:true, unused:false, laxbreak:true, evil:true*/
/*globals jQuery, alert*/
(function ($) {
"use strict";
$.fn.gantt = function (options) {
var cookieKey = "jquery.fn.gantt";
var scales = ["hours", "days", "weeks", "months"];
//Default settings
var settings = {
source: [],
itemsPerPage: 7,
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
dow: ["S", "M", "T", "W", "T", "F", "S"],
startPos: new Date(),
navigate: "buttons",
scale: "days",
useCookie: false,
maxScale: "months",
minScale: "hours",
waitText: "Please wait...",
onItemClick: function (data) { return; },
onItemDblDlick: function (data) { return; },
onAddClick: function (data) { return; },
onRender: function() { return; },
onDataLoadFailed: function(data) { return; },
scrollToToday: true
};
/**
* Extend options with default values
*/
if (options) {
$.extend(settings, options);
}
// can't use cookie if don't have `$.cookie`
settings.useCookie = settings.useCookie && $.isFunction($.cookie);
// custom selector `:findday` used to match on specified day in ms.
//
// The selector is passed a date in ms and elements are added to the
// selection filter if the element date matches, as determined by the
// id attribute containing a parsable date in ms.
$.extend($.expr[":"], {
findday: function (a, i, m) {
var cd = new Date(parseInt(m[3], 10));
var id = $(a).attr("id");
id = id ? id : "";
var si = id.indexOf("-") + 1;
var ed = new Date(parseInt(id.substring(si, id.length), 10));
cd = new Date(cd.getFullYear(), cd.getMonth(), cd.getDate());
ed = new Date(ed.getFullYear(), ed.getMonth(), ed.getDate());
return cd.getTime() === ed.getTime();
}
});
// custom selector `:findweek` used to match on specified week in ms.
$.extend($.expr[":"], {
findweek: function (a, i, m) {
var cd = new Date(parseInt(m[3], 10));
var id = $(a).attr("id");
id = id ? id : "";
var si = id.indexOf("-") + 1;
cd = cd.getFullYear() + "-" + cd.getDayForWeek().getWeekOfYear();
var ed = id.substring(si, id.length);
return cd === ed;
}
});
// custom selector `:findmonth` used to match on specified month in ms.
$.extend($.expr[":"], {
findmonth: function (a, i, m) {
var cd = new Date(parseInt(m[3], 10));
cd = cd.getFullYear() + "-" + cd.getMonth();
var id = $(a).attr("id");
id = id ? id : "";
var si = id.indexOf("-") + 1;
var ed = id.substring(si, id.length);
return cd === ed;
}
});
// Date prototype helpers
// ======================
// `getWeekId` returns a string in the form of 'dh-YYYY-WW', where WW is
// the week # for the year.
// It is used to add an id to the week divs
Date.prototype.getWeekId = function () {
var y = this.getFullYear();
var w = this.getDayForWeek().getWeekOfYear();
var m = this.getMonth();
if (m === 11 && w === 1) {
y++;
}
return 'dh-' + y + "-" + w;
};
// `getRepDate` returns the seconds since the epoch for a given date
// depending on the active scale
Date.prototype.getRepDate = function () {
switch (settings.scale) {
case "hours":
return this.getTime();
case "weeks":
return this.getDayForWeek().getTime();
case "months":
return new Date(this.getFullYear(), this.getMonth(), 1).getTime();
default:
return this.getTime();
}
};
// `getDayOfYear` returns the day number for the year
Date.prototype.getDayOfYear = function () {
var fd = new Date(this.getFullYear(), 0, 0);
var sd = new Date(this.getFullYear(), this.getMonth(), this.getDate());
return Math.ceil((sd - fd) / 86400000);
};
// `getWeekOfYear` returns the week number for the year
Date.prototype.getWeekOfYear = function () {
var ys = new Date(this.getFullYear(), 0, 1);
var sd = new Date(this.getTime());
// Find Thursday of this week starting on Monday
sd.setDate(sd.getDate() + 4 - (sd.getDay() || 7));
return Math.floor(Math.round((sd - ys) / 86400000) / 7) + 1;
};
// `getDaysInMonth` returns the number of days in a month
Date.prototype.getDaysInMonth = function () {
return 32 - new Date(this.getFullYear(), this.getMonth(), 32).getDate();
};
// `hasWeek` returns `true` if the date resides on a week boundary
// **????????????????? Don't know if this is true**
Date.prototype.hasWeek = function () {
var df = new Date(this.valueOf());
df.setDate(df.getDate() - df.getDay());
var dt = new Date(this.valueOf());
dt.setDate(dt.getDate() + (6 - dt.getDay()));
if (df.getMonth() === dt.getMonth()) {
return true;
} else {
return (df.getMonth() === this.getMonth() && dt.getDate() < 4) || (df.getMonth() !== this.getMonth() && dt.getDate() >= 4);
}
};
// `getDayForWeek` returns the Date object for the starting date of
// the week # for the year
Date.prototype.getDayForWeek = function () {
var df = new Date(this.valueOf());
df.setDate(df.getDate() - df.getDay());
var dt = new Date(this.valueOf());
dt.setDate(dt.getDate() + (6 - dt.getDay()));
if ((df.getMonth() === dt.getMonth()) || (df.getMonth() !== dt.getMonth() && dt.getDate() >= 4)) {
return new Date(dt.setDate(dt.getDate() - 3));
} else {
return new Date(df.setDate(df.getDate() + 3));
}
};
// fixes https://github.com/taitems/jQuery.Gantt/issues/62
function ktkGetNextDate(currentDate, scaleStep) {
for(var minIncrements = 1;; minIncrements++) {
var nextDate = new Date(currentDate);
nextDate.setHours(currentDate.getHours() + scaleStep * minIncrements);
if (nextDate.getTime() !== currentDate.getTime()) {
return nextDate;
}
// If code reaches here, it's because current didn't really increment (invalid local time) because of daylight-saving adjustments
// => retry adding 2, 3, 4 hours, and so on (until nextDate > current)
}
}
// Grid management
// ===============
// Core object is responsible for navigation and rendering
var core = {
// Return the element whose topmost point lies under the given point
// Normalizes for IE
elementFromPoint: function (x, y) {
if (!$.support.boxModel) {
x -= $(document).scrollLeft();
y -= $(document).scrollTop();
} else {
x -= window.pageXOffset;
y -= window.pageYOffset;
}
return document.elementFromPoint(x, y);
},
// **Create the chart**
create: function (element) {
// Initialize data with a json object or fetch via an xhr
// request depending on `settings.source`
if (typeof settings.source !== "string") {
element.data = settings.source;
core.init(element);
} else {
$.getJSON(settings.source, function (jsData) {
element.data = jsData;
core.init(element);
});
}
},
// **Setup the initial view**
// Here we calculate the number of rows, pages and visible start
// and end dates once the data is ready
init: function (element) {
try {
element.rowsNum = element.data.length;
element.pageCount = Math.ceil(element.rowsNum / settings.itemsPerPage);
element.rowsOnLastPage = element.rowsNum - (Math.floor(element.rowsNum / settings.itemsPerPage) * settings.itemsPerPage);
element.dateStart = tools.getMinDate(element);
element.dateEnd = tools.getMaxDate(element);
/* core.render(element); */
core.waitToggle(element, true, function () { core.render(element); });
}
catch(e) {
if ( element.data === null || (typeof element.data === 'object' && element.data.length === 0 ) )
settings.onDataLoadFailed($(this).data("dataObj"));
}
},
// **Render the grid**
render: function (element) {
var content = $('<div class="fn-content"/>');
var $leftPanel = core.leftPanel(element);
content.append($leftPanel);
var $rightPanel = core.rightPanel(element, $leftPanel);
var mLeft, hPos;
content.append($rightPanel);
content.append(core.navigation(element));
var $dataPanel = $rightPanel.find(".dataPanel");
element.gantt = $('<div class="fn-gantt" />').append(content);
$(element).html(element.gantt);
element.scrollNavigation.panelMargin = parseInt($dataPanel.css("margin-left").replace("px", ""), 10);
element.scrollNavigation.panelMaxPos = ($dataPanel.width() - $rightPanel.width());
element.scrollNavigation.canScroll = ($dataPanel.width() > $rightPanel.width());
core.markNow(element);
core.fillData(element, $dataPanel, $leftPanel);
// Set a cookie to record current position in the view
if (settings.useCookie) {
var sc = $.cookie(this.cookieKey + "ScrollPos");
if (sc) {
element.hPosition = sc;
}
}
// Scroll the grid to today's date
if (settings.scrollToToday) {
core.navigateTo(element, 'now');
core.scrollPanel(element, 0);
// or, scroll the grid to the left most date in the panel
} else {
if (element.hPosition !== 0) {
if (element.scaleOldWidth) {
mLeft = ($dataPanel.width() - $rightPanel.width());
hPos = mLeft * element.hPosition / element.scaleOldWidth;
hPos = hPos > 0 ? 0 : hPos;
$dataPanel.css({ "margin-left": hPos + "px" });
element.scrollNavigation.panelMargin = hPos;
element.hPosition = hPos;
element.scaleOldWidth = null;
} else {
$dataPanel.css({ "margin-left": element.hPosition + "px" });
element.scrollNavigation.panelMargin = element.hPosition;
}
core.repositionLabel(element);
}
}
$dataPanel.css({ height: $leftPanel.height() });
core.waitToggle(element, false);
settings.onRender();
},
// Create and return the left panel with labels
leftPanel: function (element) {
/* Left panel */
var ganttLeftPanel = $('<div class="leftPanel"/>')
.append($('<div class="row spacer"/>')
.css("height", tools.getCellSize() * element.headerRows + "px")
.css("width", "100%"));
var entries = [];
$.each(element.data, function (i, entry) {
if (i >= element.pageNum * settings.itemsPerPage && i < (element.pageNum * settings.itemsPerPage + settings.itemsPerPage)) {
entries.push('<div class="row name row' + i + (entry.desc ? '' : ' fn-wide') + '" id="rowheader' + i + '" offset="' + i % settings.itemsPerPage * tools.getCellSize() + '">');
entries.push('<span class="fn-label' + (entry.cssClass ? ' ' + entry.cssClass : '') + '">' + (entry.name || '') + '</span>');
entries.push('</div>');
if (entry.desc) {
entries.push('<div class="row desc row' + i + ' " id="RowdId_' + i + '" data-id="' + entry.id + '">');
entries.push('<span class="fn-label' + (entry.cssClass ? ' ' + entry.cssClass : '') + '">' + entry.desc + '</span>');
entries.push('</div>');
}
}
});
ganttLeftPanel.append(entries.join(""));
return ganttLeftPanel;
},
// Create and return the data panel element
dataPanel: function (element, width) {
var dataPanel = $('<div class="dataPanel" style="width: ' + width + 'px;"/>');
// Handle mousewheel events for scrolling the data panel
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
if (document.attachEvent) {
element.attachEvent("on" + mousewheelevt, function (e) { core.wheelScroll(element, e); });
} else if (document.addEventListener) {
element.addEventListener(mousewheelevt, function (e) { core.wheelScroll(element, e); }, false);
}
// Handle click events and dispatch to registered `onAddClick`
// function
dataPanel.click(function (e) {
e.stopPropagation();
var corrX/* <- never used? */, corrY;
var leftpanel = $(element).find(".fn-gantt .leftPanel");
var datapanel = $(element).find(".fn-gantt .dataPanel");
switch (settings.scale) {
case "weeks":
corrY = tools.getCellSize() * 2;
break;
case "months":
corrY = tools.getCellSize();
break;
case "hours":
corrY = tools.getCellSize() * 4;
break;
case "days":
corrY = tools.getCellSize() * 3;
break;
default:
corrY = tools.getCellSize() * 2;
break;
}
/* Adjust, so get middle of elm
corrY -= Math.floor(tools.getCellSize() / 2);
*/
// Find column where click occurred
var col = core.elementFromPoint(e.pageX, datapanel.offset().top + corrY);
// Was the label clicked directly?
if (col.className === "fn-label") {
col = $(col.parentNode);
} else {
col = $(col);
}
var dt = col.attr("repdate");
// Find row where click occurred
var row = core.elementFromPoint(leftpanel.offset().left + leftpanel.width() - 10, e.pageY);
// Was the lable clicked directly?
if (row.className.indexOf("fn-label") === 0) {
row = $(row.parentNode);
} else {
row = $(row);
}
var rowId = row.data().id;
// Dispatch user registered function with the DateTime in ms
// and the id if the clicked object is a row
settings.onAddClick(dt, rowId);
});
return dataPanel;
},
// Creates and return the right panel containing the year/week/day
// header
rightPanel: function (element, leftPanel /* <- never used? */) {
var range = null;
// Days of the week have a class of one of
// `sn` (Sunday), `sa` (Saturday), or `wd` (Weekday)
var dowClass = ["sn", "wd", "wd", "wd", "wd", "wd", "sa"];
//TODO: was someone planning to allow styles to stretch to the bottom of the chart?
//var gridDowClass = [" sn", "", "", "", "", "", " sa"];
var yearArr = ['<div class="row"/>'];
var daysInYear = 0;
var monthArr = ['<div class="row"/>'];
var daysInMonth = 0;
var dayArr = [];
var hoursInDay = 0;
var dowArr = [];
var horArr = [];
var today = new Date();
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
var holidays = settings.holidays ? settings.holidays.join() : '';
// Setup the headings based on the chosen `settings.scale`
switch (settings.scale) {
// **Hours**
case "hours":
range = tools.parseTimeRange(element.dateStart, element.dateEnd, element.scaleStep);
var year = range[0].getFullYear();
var month = range[0].getMonth();
var day = range[0];
for (var i = 0, len = range.length; i < len; i++) {
var rday = range[i];
// Fill years
var rfy = rday.getFullYear();
if (rfy !== year) {
yearArr.push(
('<div class="row header year" style="width: '
+ tools.getCellSize() * daysInYear
+ 'px;"><div class="fn-label">'
+ year
+ '</div></div>'));
year = rfy;
daysInYear = 0;
}
daysInYear++;
// Fill months
var rm = rday.getMonth();
if (rm !== month) {
monthArr.push(
('<div class="row header month" style="width: '
+ tools.getCellSize() * daysInMonth + 'px"><div class="fn-label">'
+ settings.months[month]
+ '</div></div>'));
month = rm;
daysInMonth = 0;
}
daysInMonth++;
// Fill days & hours
var rgetDay = rday.getDay();
var getDay = day.getDay();
var day_class = dowClass[rgetDay];
var getTime = day.getTime();
if (holidays.indexOf((new Date(rday.getFullYear(), rday.getMonth(), rday.getDate())).getTime()) > -1) {
day_class = "holiday";
}
if (rgetDay !== getDay) {
var day_class2 = (today - day === 0) ? ' today' : (holidays.indexOf(getTime) > -1) ? "holiday" : dowClass[getDay];
dayArr.push('<div class="row date ' + day_class2 + '" '
+ ' style="width: ' + tools.getCellSize() * hoursInDay + 'px;"> '
+ ' <div class="fn-label">' + day.getDate() + '</div></div>');
dowArr.push('<div class="row day ' + day_class2 + '" '
+ ' style="width: ' + tools.getCellSize() * hoursInDay + 'px;"> '
+ ' <div class="fn-label">' + settings.dow[getDay] + '</div></div>');
day = rday;
hoursInDay = 0;
}
hoursInDay++;
horArr.push('<div class="row day '
+ day_class
+ '" id="dh-'
+ rday.getTime()
+ '" offset="' + i * tools.getCellSize() + '" repdate="' + rday.getRepDate() + '"><div class="fn-label">'
+ rday.getHours()
+ '</div></div>');
}
// Last year
yearArr.push(
'<div class="row header year" style="width: '
+ tools.getCellSize() * daysInYear + 'px;"><div class="fn-label">'
+ year
+ '</div></div>');
// Last month
monthArr.push(
'<div class="row header month" style="width: '
+ tools.getCellSize() * daysInMonth + 'px"><div class="fn-label">'
+ settings.months[month]
+ '</div></div>');
var day_class = dowClass[day.getDay()];
if (holidays.indexOf((new Date(day.getFullYear(), day.getMonth(), day.getDate())).getTime()) > -1) {
day_class = "holiday";
}
dayArr.push('<div class="row date ' + day_class + '" '
+ ' style="width: ' + tools.getCellSize() * hoursInDay + 'px;"> '
+ ' <div class="fn-label">' + day.getDate() + '</div></div>');
dowArr.push('<div class="row day ' + day_class + '" '
+ ' style="width: ' + tools.getCellSize() * hoursInDay + 'px;"> '
+ ' <div class="fn-label">' + settings.dow[day.getDay()] + '</div></div>');
var dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
// Append panel elements
dataPanel.append(yearArr.join(""));
dataPanel.append(monthArr.join(""));
dataPanel.append($('<div class="row"/>').html(dayArr.join("")));
dataPanel.append($('<div class="row"/>').html(dowArr.join("")));
dataPanel.append($('<div class="row"/>').html(horArr.join("")));
break;
// **Weeks**
case "weeks":
range = tools.parseWeeksRange(element.dateStart, element.dateEnd);
yearArr = ['<div class="row"/>'];
monthArr = ['<div class="row"/>'];
var year = range[0].getFullYear();
var month = range[0].getMonth();
var day = range[0];
for (var i = 0, len = range.length; i < len; i++) {
var rday = range[i];
// Fill years
if (rday.getFullYear() !== year) {
yearArr.push(
('<div class="row header year" style="width: '
+ tools.getCellSize() * daysInYear
+ 'px;"><div class="fn-label">'
+ year
+ '</div></div>'));
year = rday.getFullYear();
daysInYear = 0;
}
daysInYear++;
// Fill months
if (rday.getMonth() !== month) {
monthArr.push(
('<div class="row header month" style="width:'
+ tools.getCellSize() * daysInMonth
+ 'px;"><div class="fn-label">'
+ settings.months[month]
+ '</div></div>'));
month = rday.getMonth();
daysInMonth = 0;
}
daysInMonth++;
// Fill weeks
dayArr.push('<div class="row day wd" '
+ ' id="' + rday.getWeekId() + '" offset="' + i * tools.getCellSize() + '" repdate="' + rday.getRepDate() + '"> '
+ ' <div class="fn-label">' + rday.getWeekOfYear() + '</div></div>');
}
// Last year
yearArr.push(
'<div class="row header year" style="width: '
+ tools.getCellSize() * daysInYear + 'px;"><div class="fn-label">'
+ year
+ '</div></div>');
// Last month
monthArr.push(
'<div class="row header month" style="width: '
+ tools.getCellSize() * daysInMonth + 'px"><div class="fn-label">'
+ settings.months[month]
+ '</div></div>');
var dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
dataPanel.append(yearArr.join("") + monthArr.join("") + dayArr.join("") + (dowArr.join("")));
break;
// **Months**
case 'months':
range = tools.parseMonthsRange(element.dateStart, element.dateEnd);
var year = range[0].getFullYear();
var month = range[0].getMonth();
var day = range[0];
for (var i = 0, len = range.length; i < len; i++) {
var rday = range[i];
// Fill years
if (rday.getFullYear() !== year) {
yearArr.push(
('<div class="row header year" style="width: '
+ tools.getCellSize() * daysInYear
+ 'px;"><div class="fn-label">'
+ year
+ '</div></div>'));
year = rday.getFullYear();
daysInYear = 0;
}
daysInYear++;
monthArr.push('<div class="row day wd" id="dh-' + tools.genId(rday.getTime()) + '" offset="' + i * tools.getCellSize() + '" repdate="' + rday.getRepDate() + '">' + (1 + rday.getMonth()) + '</div>');
}
// Last year
yearArr.push(
'<div class="row header year" style="width: '
+ tools.getCellSize() * daysInYear + 'px;"><div class="fn-label">'
+ year
+ '</div></div>');
// Last month
monthArr.push(
'<div class="row header month" style="width: '
+ tools.getCellSize() * daysInMonth + 'px"><div class="fn-label">'
+ settings.months[month]
+ '</div></div>');
var dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
// Append panel elements
dataPanel.append(yearArr.join(""));
dataPanel.append(monthArr.join(""));
dataPanel.append($('<div class="row"/>').html(dayArr.join("")));
dataPanel.append($('<div class="row"/>').html(dowArr.join("")));
break;
// **Days (default)**
default:
range = tools.parseDateRange(element.dateStart, element.dateEnd);
var dateBefore = ktkGetNextDate(range[0], -1);
var year = dateBefore.getFullYear();
var month = dateBefore.getMonth();
var day = dateBefore; // <- never used?
for (var i = 0, len = range.length; i < len; i++) {
var rday = range[i];
// Fill years
if (rday.getFullYear() !== year) {
yearArr.push(
('<div class="row header year" style="width:'
+ tools.getCellSize() * daysInYear
+ 'px;"><div class="fn-label">'
+ year
+ '</div></div>'));
year = rday.getFullYear();
daysInYear = 0;
}
daysInYear++;
// Fill months
if (rday.getMonth() !== month) {
monthArr.push(
('<div class="row header month" style="width:'
+ tools.getCellSize() * daysInMonth
+ 'px;"><div class="fn-label">'
+ settings.months[month]
+ '</div></div>'));
month = rday.getMonth();
daysInMonth = 0;
}
daysInMonth++;
var getDay = rday.getDay();
var day_class = dowClass[getDay];
if (holidays.indexOf((new Date(rday.getFullYear(), rday.getMonth(), rday.getDate())).getTime()) > -1) {
day_class = "holiday";
}
dayArr.push('<div class="row date ' + day_class + '" '
+ ' id="dh-' + tools.genId(rday.getTime()) + '" offset="' + i * tools.getCellSize() + '" repdate="' + rday.getRepDate() + '"> '
+ ' <div class="fn-label">' + rday.getDate() + '</div></div>');
dowArr.push('<div class="row day ' + day_class + '" '
+ ' id="dw-' + tools.genId(rday.getTime()) + '" repdate="' + rday.getRepDate() + '"> '
+ ' <div class="fn-label">' + settings.dow[getDay] + '</div></div>');
} //for
// Last year
yearArr.push(
'<div class="row header year" style="width: '
+ tools.getCellSize() * daysInYear + 'px;"><div class="fn-label">'
+ year
+ '</div></div>');
// Last month
monthArr.push(
'<div class="row header month" style="width: '
+ tools.getCellSize() * daysInMonth + 'px"><div class="fn-label">'
+ settings.months[month]
+ '</div></div>');
var dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
// Append panel elements
dataPanel.append(yearArr.join(""));
dataPanel.append(monthArr.join(""));
dataPanel.append($('<div class="row" style="margin-left: 0;" />').html(dayArr.join("")));
dataPanel.append($('<div class="row" style="margin-left: 0;" />').html(dowArr.join("")));
break;
}
return $('<div class="rightPanel"></div>').append(dataPanel);
},
// **Navigation**
navigation: function (element) {
var ganttNavigate = null;
// Scrolling navigation is provided by setting
// `settings.navigate='scroll'`
if (settings.navigate === "scroll") {
ganttNavigate = $('<div class="navigate" />')
.append($('<div class="nav-slider" />')
.append($('<div class="nav-slider-left" />')
.append($('<button type="button" class="nav-link nav-page-back"/>')
.html('<')
.click(function () {
core.navigatePage(element, -1);
}))
.append($('<div class="page-number"/>')
.append($('<span/>')
.html(element.pageNum + 1 + ' / ' + element.pageCount)))
.append($('<button type="button" class="nav-link nav-page-next"/>')
.html('>')
.click(function () {
core.navigatePage(element, 1);
}))
.append($('<button type="button" class="nav-link nav-now"/>')
.html('●')
.click(function () {
core.navigateTo(element, 'now');
}))
.append($('<button type="button" class="nav-link nav-prev-week"/>')
.html('<<')
.click(function () {
if (settings.scale === 'hours') {
core.navigateTo(element, tools.getCellSize() * 8);
} else if (settings.scale === 'days') {
core.navigateTo(element, tools.getCellSize() * 30);
} else if (settings.scale === 'weeks') {
core.navigateTo(element, tools.getCellSize() * 12);
} else if (settings.scale === 'months') {
core.navigateTo(element, tools.getCellSize() * 6);
}
}))
.append($('<button type="button" class="nav-link nav-prev-day"/>')
.html('<')
.click(function () {
if (settings.scale === 'hours') {
core.navigateTo(element, tools.getCellSize() * 4);
} else if (settings.scale === 'days') {
core.navigateTo(element, tools.getCellSize() * 7);
} else if (settings.scale === 'weeks') {
core.navigateTo(element, tools.getCellSize() * 4);
} else if (settings.scale === 'months') {
core.navigateTo(element, tools.getCellSize() * 3);
}
})))
.append($('<div class="nav-slider-content" />')
.append($('<div class="nav-slider-bar" />')
.append($('<a class="nav-slider-button" />')
)
.mousedown(function (e) {
e.preventDefault();
element.scrollNavigation.scrollerMouseDown = true;
core.sliderScroll(element, e);
})
.mousemove(function (e) {
if (element.scrollNavigation.scrollerMouseDown) {
core.sliderScroll(element, e);
}
})
)
)
.append($('<div class="nav-slider-right" />')
.append($('<button type="button" class="nav-link nav-next-day"/>')
.html('>')
.click(function () {
if (settings.scale === 'hours') {
core.navigateTo(element, tools.getCellSize() * -4);
} else if (settings.scale === 'days') {
core.navigateTo(element, tools.getCellSize() * -7);
} else if (settings.scale === 'weeks') {
core.navigateTo(element, tools.getCellSize() * -4);
} else if (settings.scale === 'months') {
core.navigateTo(element, tools.getCellSize() * -3);
}
}))
.append($('<button type="button" class="nav-link nav-next-week"/>')
.html('>>')
.click(function () {
if (settings.scale === 'hours') {
core.navigateTo(element, tools.getCellSize() * -8);
} else if (settings.scale === 'days') {
core.navigateTo(element, tools.getCellSize() * -30);
} else if (settings.scale === 'weeks') {
core.navigateTo(element, tools.getCellSize() * -12);
} else if (settings.scale === 'months') {
core.navigateTo(element, tools.getCellSize() * -6);
}
}))
.append($('<button type="button" class="nav-link nav-zoomIn"/>')
.html('+')
.click(function () {
core.zoomInOut(element, -1);
}))
.append($('<button type="button" class="nav-link nav-zoomOut"/>')
.html('-')
.click(function () {
core.zoomInOut(element, 1);
}))
)
);
$(document).mouseup(function () {
element.scrollNavigation.scrollerMouseDown = false;
});
// Button navigation is provided by setting `settings.navigation='buttons'`
} else {
ganttNavigate = $('<div class="navigate" />')
.append($('<button type="button" class="nav-link nav-page-back"/>')
.html('<')
.click(function () {
core.navigatePage(element, -1);
}))
.append($('<div class="page-number"/>')
.append($('<span/>')
.html(element.pageNum + 1 + ' of ' + element.pageCount)))
.append($('<button type="button" class="nav-link nav-page-next"/>')
.html('>')
.click(function () {
core.navigatePage(element, 1);
}))
.append($('<button type="button" class="nav-link nav-begin"/>')
.html('|<')
.click(function () {
core.navigateTo(element, 'begin');
}))
.append($('<button type="button" class="nav-link nav-prev-week"/>')
.html('<<')
.click(function () {
core.navigateTo(element, tools.getCellSize() * 7);
}))
.append($('<button type="button" class="nav-link nav-prev-day"/>')
.html('<')
.click(function () {
core.navigateTo(element, tools.getCellSize());
}))
.append($('<button type="button" class="nav-link nav-now"/>')
.html('●')
.click(function () {
core.navigateTo(element, 'now');
}))
.append($('<button type="button" class="nav-link nav-next-day"/>')
.html('>')
.click(function () {
core.navigateTo(element, tools.getCellSize() * -1);
}))
.append($('<button type="button" class="nav-link nav-next-week"/>')
.html('>>')
.click(function () {
core.navigateTo(element, tools.getCellSize() * -7);
}))
.append($('<button type="button" class="nav-link nav-end"/>')
.html('>|')
.click(function () {
core.navigateTo(element, 'end');
}))
.append($('<button type="button" class="nav-link nav-zoomIn"/>')
.html('+')
.click(function () {
core.zoomInOut(element, -1);
}))
.append($('<button type="button" class="nav-link nav-zoomOut"/>')
.html('-')
.click(function () {
core.zoomInOut(element, 1);
}));
}
return $('<div class="bottom"/>').append(ganttNavigate);
},
// **Progress Bar**
// Return an element representing a progress of position within
// the entire chart
createProgressBar: function (days, id, cls, desc, label, dataObj) {
var cellWidth = tools.getCellSize();
var barMarg = tools.getProgressBarMargin() || 0;
var bar = $('<div class="bar"><div class="fn-label">' + label + '</div></div>')
.addClass(cls)
.attr({
'id': id,
'data-desc': desc,
'data-label': label,
})
.css({
width: ((cellWidth * days) - barMarg) + 2
})
.data("dataObj", dataObj);
if (desc) {
bar
.mouseover(function (e) {
var hint = $('<div class="fn-gantt-hint" />').html(desc);
$("body").append(hint);
hint.css("left", e.pageX);
hint.css("top", e.pageY);
hint.show();
})
.mouseout(function () {
$(".fn-gantt-hint").remove();
})
.mousemove(function (e) {
$(".fn-gantt-hint").css("left", e.pageX);
$(".fn-gantt-hint").css("top", e.pageY + 15);
});
}
bar.click(function (e) {
e.stopPropagation();
//settings.onItemClick($(this).data("dataObj"));
//settings.onItemClick($(this).attr('id'));
settings.onItemClick(this);
});
bar.dblclick(function (e) {
e.stopPropagation();
settings.onItemDblDlick(this);
});
return bar;
},
// Remove the `wd` (weekday) class and add `today` class to the
// current day/week/month (depending on the current scale)
markNow: function (element) {
switch (settings.scale) {
case "weeks":
var cd = Date.parse(new Date());
cd = (Math.floor(cd / 36400000) * 36400000);
$(element).find(':findweek("' + cd + '")').removeClass('wd').addClass('today');
break;
case "months":
$(element).find(':findmonth("' + new Date().getTime() + '")').removeClass('wd').addClass('today');
break;
default:
var cd = Date.parse(new Date());
cd = (Math.floor(cd / 36400000) * 36400000);
$(element).find(':findday("' + cd + '")').removeClass('wd').addClass('today');
break;
}
},
// **Fill the Chart**
// Parse the data and fill the data panel
fillData: function (element, datapanel, leftpanel /* <- never used? */) {
var invertColor = function (colStr) {
try {
colStr = colStr.replace("rgb(", "").replace(")", "");
var rgbArr = colStr.split(",");
var R = parseInt(rgbArr[0], 10);
var G = parseInt(rgbArr[1], 10);
var B = parseInt(rgbArr[2], 10);
var gray = Math.round((255 - (0.299 * R + 0.587 * G + 0.114 * B)) * 0.9);
return "rgb(" + gray + ", " + gray + ", " + gray + ")";
} catch (err) {
return "";
}
};
var darkerColor = function(colStr) {
try {
colStr = colStr.replace('rgb(','').replace(')','');
var rgbArr = colStr.split(',');
var R = parseInt(rgbArr[0]);
var G = parseInt(rgbArr[1]);
var B = parseInt(rgbArr[2]);
R = R-Math.round(parseInt(R)/7);
G = G-Math.round(parseInt(G)/7);
B = B-Math.round(parseInt(B)/7);
return 'rgb('+R+', '+G+', '+B+')';
} catch (err) {
return '';
}
};
$.each(element.data, function (i, entry) {
if (i >= element.pageNum * settings.itemsPerPage && i < (element.pageNum * settings.itemsPerPage + settings.itemsPerPage)) {
$.each(entry.values, function (j, day) {
var _bar = null;
switch (settings.scale) {
// **Hourly data**
case "hours":
var dFrom = tools.genId(tools.dateDeserialize(day.from).getTime(), element.scaleStep);
var from = $(element).find('#dh-' + dFrom);
var dTo = tools.genId(tools.dateDeserialize(day.to).getTime(), element.scaleStep);
var to = $(element).find('#dh-' + dTo);
console.log(dFrom, dTo);
var cFrom = from.attr("offset");
var cTo = to.attr("offset");
var dl = Math.floor((cTo - cFrom) / tools.getCellSize()) + 1;
_bar = core.createProgressBar(
dl,
day.id ? day.id : "",
day.customClass ? day.customClass : "",
day.desc ? day.desc : "",
day.label ? day.label : "",
day.dataObj ? day.dataObj : null
);
// find row
var topEl = $(element).find("#rowheader" + i);
var top = tools.getCellSize() * 5 + 2 + parseInt(topEl.attr("offset"), 10);
_bar.css({ 'top': top, 'left': Math.floor(cFrom) });
datapanel.append(_bar);
break;
// **Weekly data**
case "weeks":
var dtFrom = tools.dateDeserialize(day.from);
var dtTo = tools.dateDeserialize(day.to);
if (dtFrom.getDate() <= 3 && dtFrom.getMonth() === 0) {
dtFrom.setDate(dtFrom.getDate() + 4);
}
if (dtFrom.getDate() <= 3 && dtFrom.getMonth() === 0) {
dtFrom.setDate(dtFrom.getDate() + 4);
}
if (dtTo.getDate() <= 3 && dtTo.getMonth() === 0) {
dtTo.setDate(dtTo.getDate() + 4);
}
var from = $(element).find("#" + dtFrom.getWeekId());
var cFrom = from.attr("offset");
var to = $(element).find("#" + dtTo.getWeekId());
var cTo = to.attr("offset");
var dl = Math.round((cTo - cFrom) / tools.getCellSize()) + 1;
_bar = core.createProgressBar(
dl,
day.id ? day.id : "",
day.customClass ? day.customClass : "",
day.desc ? day.desc : "",
day.label ? day.label : "",
day.dataObj ? day.dataObj : null
);
// find row
var topEl = $(element).find("#rowheader" + i);
var top = tools.getCellSize() * 3 + 2 + parseInt(topEl.attr("offset"), 10);
_bar.css({ 'top': top, 'left': Math.floor(cFrom) });
datapanel.append(_bar);
break;
// **Monthly data**
case "months":
var dtFrom = tools.dateDeserialize(day.from);
var dtTo = tools.dateDeserialize(day.to);
if (dtFrom.getDate() <= 3 && dtFrom.getMonth() === 0) {
dtFrom.setDate(dtFrom.getDate() + 4);
}
if (dtFrom.getDate() <= 3 && dtFrom.getMonth() === 0) {
dtFrom.setDate(dtFrom.getDate() + 4);
}
if (dtTo.getDate() <= 3 && dtTo.getMonth() === 0) {
dtTo.setDate(dtTo.getDate() + 4);
}
var from = $(element).find("#dh-" + tools.genId(dtFrom.getTime()));
var cFrom = from.attr("offset");
var to = $(element).find("#dh-" + tools.genId(dtTo.getTime()));
var cTo = to.attr("offset");
var dl = Math.round((cTo - cFrom) / tools.getCellSize()) + 1;
_bar = core.createProgressBar(
dl,
day.id ? day.id : "",
day.customClass ? day.customClass : "",
day.desc ? day.desc : "",
day.label ? day.label : "",
day.dataObj ? day.dataObj : null
);
// find row
var topEl = $(element).find("#rowheader" + i);
var top = tools.getCellSize() * 2 + 2 + parseInt(topEl.attr("offset"), 10);
_bar.css({ 'top': top, 'left': Math.floor(cFrom) });
datapanel.append(_bar);
break;
// **Days**
default:
var dFrom = tools.genId(tools.dateDeserialize(day.from).getTime());
var dTo = tools.genId(tools.dateDeserialize(day.to).getTime());
var from = $(element).find("#dh-" + dFrom);
var cFrom = from.attr("offset");
var dl = Math.floor(((dTo / 1000) - (dFrom / 1000)) / 86400) + 1;
_bar = core.createProgressBar(
dl,
day.id ? day.id : "",
day.customClass ? day.customClass : "",
day.desc ? day.desc : "",
day.label ? day.label : "",
day.dataObj ? day.dataObj : null
);
// find row
var topEl = $(element).find("#rowheader" + i);
var top = tools.getCellSize() * 4 + 2 + parseInt(topEl.attr("offset"), 10);
_bar.css({ 'top': top, 'left': Math.floor(cFrom) });
datapanel.append(_bar);
break;
}
var $l = _bar.find(".fn-label");
if ($l && _bar.length) {
var gray = invertColor(_bar[0].style.backgroundColor);
$l.css("color", gray);
} else if ($l) {
$l.css("color", "");
}
});
}
});
},
// **Navigation**
navigateTo: function (element, val) {
var $rightPanel = $(element).find(".fn-gantt .rightPanel");
var $dataPanel = $rightPanel.find(".dataPanel");
$dataPanel.click = function () {
alert(arguments.join(""));
};
var rightPanelWidth = $rightPanel.width();
var dataPanelWidth = $dataPanel.width();
switch (val) {
case "begin":
$dataPanel.animate({
"margin-left": "0px"
}, "fast", function () { core.repositionLabel(element); });
element.scrollNavigation.panelMargin = 0;
break;
case "end":
var mLeft = dataPanelWidth - rightPanelWidth;
element.scrollNavigation.panelMargin = mLeft * -1;
$dataPanel.animate({
"margin-left": "-" + mLeft + "px"
}, "fast", function () { core.repositionLabel(element); });
break;
case "now":
if (!element.scrollNavigation.canScroll || !$dataPanel.find(".today").length) {
return false;
}
var max_left = (dataPanelWidth - rightPanelWidth) * -1;
var cur_marg = $dataPanel.css("margin-left").replace("px", "");
var val = $dataPanel.find(".today").offset().left - $dataPanel.offset().left;
val *= -1;
if (val > 0) {
val = 0;
} else if (val < max_left) {
val = max_left;
}
…
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In this committer's view, sideways scrolling with the mouse wheel should require holding the shift key so as not to interfere with page scrolling especially for large gantt charts.