Skip to content

Fix small scope and time scaling issue #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
blueorbitz wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix small scope and time scaling issue #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b29d59c
added timeScale for scaling the table by factor of 2.
Apr 10, 2019
3ebb535
updated README.md
Apr 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ Make a timetable object, optionally set the scope in hours (the visible hours in
var timetable = new Timetable();
timetable.setScope(9, 17); // optional, only whole hours between 0 and 23
timetable.useTwelveHour(); //optional, displays hours in 12 hour format (1:00PM)
timetable.timeScale = 1; // optional, use factor of 2 (2 = 30min scale, 4 = 15min scale)
```
Add some locations:
```javascript
Expand All @@ -47,7 +48,7 @@ var options = {
id: 4,
ticketType: 'VIP'
},
onClick: function(event, timetable, clickEvent) {} // custom click handler, which is passed the event object and full timetable as context
onClick: function(event, timetable, clickEvent) {} // custom click handler, which is passed the event object and full timetable as context
};
timetable.addEvent('Jam Session', 'Nile', new Date(2015,7,17,21,15), new Date(2015,7,17,23,30), options);
```
Expand Down Expand Up @@ -87,7 +88,7 @@ $timetable-entry-padding: 10px !default
$timetable-background-color: white !default
```

The option `$timetable-use-sticky-header` makes the time indicator stick to the top of the screen while scrolling down, which can be very pleasant with large timetables or on mobile devices. Note that this is not yet widely supported in browsers, although all modern (non-IE) browsers support it. Browsers that don't support it will fall back to a non-sticky header automatically. [More info here](https://caniuse.com/#feat=css-sticky).
The option `$timetable-use-sticky-header` makes the time indicator stick to the top of the screen while scrolling down, which can be very pleasant with large timetables or on mobile devices. Note that this is not yet widely supported in browsers, although all modern (non-IE) browsers support it. Browsers that don't support it will fall back to a non-sticky header automatically. [More info here](https://caniuse.com/#feat=css-sticky).

Alternatively you could override the css styles manually.

Expand Down
74 changes: 44 additions & 30 deletions app/scripts/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ var Timetable = function() {
hourEnd: 17
};
this.usingTwelveHour = false;
this.timeScale = 1;
this.locations = [];
this.events = [];
};
Expand Down Expand Up @@ -107,21 +108,22 @@ Timetable.Renderer = function(tt) {
}
}

function prettyFormatHour(hour, usingTwelveHour) {
function prettyFormatHour(hour, minute, usingTwelveHour) {
var prettyHour;
if(usingTwelveHour) {
var period = hour >= 12 ? 'PM':'AM';
prettyHour = ((hour + 11) % 12 + 1) + ':00' + period;
} else {
var prefix = hour < 10 ? '0' : '';
prettyHour = prefix + hour + ':00';
}
var prefixHr = hour < 10 ? '0' : '';
var prefixMn = minute < 10 ? '0' : '';
if(usingTwelveHour) {
var period = hour >= 12 ? 'PM' : 'AM';
prettyHour = ((hour + 11) % 12 + 1) + ':' + prefixMn + minute + period;
} else {
return prefixHr + hour + ':' + prefixMn + minute;
}
return prettyHour;
}

Timetable.Renderer.prototype = {
draw: function(selector) {
var timetable = this.timetable;
var timetable = this.timetable;

function checkContainerPrecondition(container) {
if (container === null) {
Expand All @@ -134,58 +136,70 @@ Timetable.Renderer = function(tt) {
appendRowHeaders(asideULNode);
}
function appendRowHeaders(ulNode) {
for (var k=0; k<timetable.locations.length; k++) {
for (var k = 0; k < timetable.locations.length; k++) {
var liNode = ulNode.appendChild(document.createElement('li'));
var spanNode = liNode.appendChild(document.createElement('span'));
spanNode.className = 'row-heading';
spanNode.textContent = timetable.locations[k];
}
}
function appendTimetableSection(container) {
var sectionNode = container.appendChild(document.createElement('section'));
var sectionNode = container.appendChild(document.createElement('section'));
var headerNode = appendColumnHeaders(sectionNode);
var timeNode = sectionNode.appendChild(document.createElement('time'));
timeNode.className = 'syncscroll';
timeNode.setAttribute('name', 'scrollheader');
var width = headerNode.scrollWidth + 'px';
timeNode.className = 'syncscroll';
timeNode.setAttribute('name', 'scrollheader');
var width = headerNode.firstChild.offsetWidth + 'px';
appendTimeRows(timeNode, width);
}
function appendColumnHeaders(node) {
var headerNode = node.appendChild(document.createElement('header'));
headerNode.className = 'syncscroll';
headerNode.setAttribute('name', 'scrollheader');
headerNode.setAttribute('name', 'scrollheader');
var headerULNode = headerNode.appendChild(document.createElement('ul'));

var completed = false;
var looped = false;

for (var hour=timetable.scope.hourStart; !completed;) {
var minute = 0,
mloop = 0;
for (var hour = timetable.scope.hourStart; !completed;) {
var liNode = headerULNode.appendChild(document.createElement('li'));
var spanNode = liNode.appendChild(document.createElement('span'));
spanNode.className = 'time-label';
spanNode.textContent = prettyFormatHour(hour, timetable.usingTwelveHour);
spanNode.textContent = prettyFormatHour(hour, minute, timetable.usingTwelveHour);

if (hour === timetable.scope.hourEnd && (timetable.scope.hourStart !== timetable.scope.hourEnd || looped)) {
completed = true;
}
if (++hour === 24) {

if (++mloop === timetable.timeScale) {
hour++;
mloop = minute = 0;
} else {
minute += (60 / timetable.timeScale);
}

if (hour === 24) {
hour = 0;
looped = true;
}
}
return headerNode;
}

function appendTimeRows(node, width) {
var ulNode = node.appendChild(document.createElement('ul'));
ulNode.style.width = width;
ulNode.style.width = width;
ulNode.className = 'room-timeline';
for (var k=0; k<timetable.locations.length; k++) {
for (var k = 0; k < timetable.locations.length; k++) {
var liNode = ulNode.appendChild(document.createElement('li'));
appendLocationEvents(timetable.locations[k], liNode);/**/
appendLocationEvents(timetable.locations[k], liNode);
}
}

function appendLocationEvents(location, node) {
for (var k=0; k<timetable.events.length; k++) {
for (var k = 0; k < timetable.events.length; k++) {
var event = timetable.events[k];
if (event.location === location) {
appendEvent(event, node);
Expand All @@ -212,17 +226,17 @@ Timetable.Renderer = function(tt) {
eventNode.href = event.options.url;
}

if (hasDataAttributes){
if (hasDataAttributes) {
for (var key in event.options.data) {
eventNode.setAttribute('data-'+key, event.options.data[key]);
eventNode.setAttribute('data-' + key, event.options.data[key]);
}
}

if (hasClickHandler) {
eventNode.addEventListener('click', function(e) {
event.options.onClick(event, timetable, e);
});
}
eventNode.addEventListener('click', function(e) {
event.options.onClick(event, timetable, e);
});
}

eventNode.className = hasAdditionalClass ? 'time-entry ' + event.options.class : 'time-entry';
eventNode.style.width = computeEventBlockWidth(event);
Expand All @@ -241,7 +255,7 @@ Timetable.Renderer = function(tt) {
function computeEventBlockOffset(event) {
var scopeStartHours = timetable.scope.hourStart;
var eventStartHours = event.startDate.getHours() + (event.startDate.getMinutes() / 60);
var hoursBeforeEvent = getDurationHours(scopeStartHours, eventStartHours);
var hoursBeforeEvent = getDurationHours(scopeStartHours, eventStartHours);
return hoursBeforeEvent / scopeDurationHours * 100 + '%';
}

Expand All @@ -255,4 +269,4 @@ Timetable.Renderer = function(tt) {
}
};

})();
})();
4 changes: 2 additions & 2 deletions app/styles/plugin.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ $timetable-background-color: white !default
time
display: block
width: 100%
overflow-x: scroll
overflow-x: auto
-webkit-overflow-scrolling: touch

> header
Expand All @@ -131,7 +131,7 @@ $timetable-background-color: white !default
transform-style: preserve-3d

ul
display: flex
display: inline-flex
height: $timetable-hour-row-height
align-items: center

Expand Down
2 changes: 1 addition & 1 deletion dist/scripts/timetable.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading