Skip to content

Commit

Permalink
Header classes, minor bugs
Browse files Browse the repository at this point in the history
Classes are now applied to grid containers depending on which header
they fall under. It's not an exceptionally clean method, but it can be
utilized entirely through CSS rather than attaching styles dynamically.
  • Loading branch information
Zallist committed Jun 8, 2013
1 parent b5425c5 commit 2f4c70c
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 21 deletions.
9 changes: 9 additions & 0 deletions css/calendar.css
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,12 @@ body {
.realtime-info {
display: none; }

.period-3day .time-sch-header-0-date-even {
background-color: #F0F0F0; }

.period-1week .time-sch-header-0-date-even {
background-color: #F0F0F0; }

.period-1month .time-sch-header-1-date-even {
background-color: #F0F0F0; }

12 changes: 11 additions & 1 deletion css/calendar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,14 @@ body {

.realtime-info {
display: none;
}
}

.period-3day .time-sch-header-0-date-even {
background-color: #F0F0F0;
}
.period-1week .time-sch-header-0-date-even {
background-color: #F0F0F0;
}
.period-1month .time-sch-header-1-date-even {
background-color: #F0F0F0;
}
2 changes: 2 additions & 0 deletions css/timelineScheduler.css
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@
height: 1em; }

.time-sch-item-content {
overflow: hidden;
white-space: nowrap;
position: relative;
z-index: 1; }

Expand Down
2 changes: 2 additions & 0 deletions css/timelineScheduler.scss
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,8 @@
height: 1em;
}
.time-sch-item-content {
overflow: hidden;
white-space: nowrap;
position: relative;
z-index: 1;
}
Expand Down
14 changes: 9 additions & 5 deletions js/calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ var Calendar = {
TimeframeHeaders: [
'Do MMM',
'HH'
]
],
Classes: 'period-3day'
},
{
Name: '1 week',
Expand All @@ -27,16 +28,19 @@ var Calendar = {
TimeframeHeaders: [
'MMM',
'Do'
]
],
Classes: 'period-1week'
},
{
Name: '1 month',
Label: '1 month',
TimeframePeriod: (60 * 24 * 7),
TimeframePeriod: (60 * 24 * 1),
TimeframeOverall: (60 * 24 * 28),
TimeframeHeaders: [
'Do MMM'
]
'MMM',
'Do'
],
Classes: 'period-1month'
}
],

Expand Down
101 changes: 89 additions & 12 deletions js/timelineScheduler.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,8 @@ var TimeScheduler = {
TimeframeHeaders: [
'Do MMM',
'HH'
]
],
Classes: 'time-sch-period-2day'
},
{
Name: '2 weeks',
Expand All @@ -93,7 +94,8 @@ var TimeScheduler = {
TimeframeHeaders: [
'MMM',
'Do'
]
],
Classes: 'time-sch-period-2week'
}
],

Expand Down Expand Up @@ -288,10 +290,57 @@ var TimeScheduler = {
return moment(start).tsAdd('minutes', period.TimeframeOverall);
},

AddHeaderClasses: function (td, columnCount, specificHeader) {
var trs, trArray, tr;
var tdArray, foundTD;
var prevIndex, nextIndex, colspan;
var complete, isEven;

trs = TimeScheduler.TableHeader.find('tr');

if (specificHeader !== undefined) {
trs = $(trs.get(specificHeader));
}

if (trs.length && trs.length > 0) {
trArray = $.makeArray(trs);

for (var trCount = 0; trCount < trArray.length; trCount++) {
complete = false;
nextIndex = 0;
tr = $(trArray[trCount]);
tdArray = $.makeArray(tr.find('.time-sch-date-header'));

for (var tdCount = 0; tdCount < tdArray.length && !complete; tdCount++) {
foundTD = $(tdArray[tdCount]);

colspan = Number(foundTD.attr('colspan'));
if (colspan && !isNaN(colspan) && colspan > 0) {
prevIndex = (nextIndex ? nextIndex : 0);
nextIndex = prevIndex + colspan;
}
else {
prevIndex = (nextIndex ? nextIndex : 0);
nextIndex = prevIndex + 1;
}

if (prevIndex <= columnCount && columnCount < nextIndex) {
complete = true;
isEven = tdCount % 2 === 0;

td.addClass('time-sch-header-' + trCount + '-date-column-' + tdCount)
.addClass('time-sch-header-' + trCount + '-date-' + (isEven ? 'even' : 'odd'));
}
}
}
}
},

CreateCalendar: function () {
var tr, td, thisTime, header;
var minuteDiff, splits, period, end;
var prevDate = null, colspan = 0;
var currentTimeIndex;

period = TimeScheduler.GetSelectedPeriod();
end = TimeScheduler.GetEndOfPeriod(TimeScheduler.Options.Start, period);
Expand Down Expand Up @@ -325,7 +374,10 @@ var TimeScheduler = {

for (var headerCount = 0; headerCount < period.TimeframeHeaders.length; headerCount++) {
prevDate = null;
isEven = true;
colspan = 0;
currentTimeIndex = 0;

header = period.TimeframeHeaders[headerCount];

tr = $(document.createElement('tr'))
Expand All @@ -351,9 +403,21 @@ var TimeScheduler = {
prevDate = thisTime;

td = $(document.createElement('td'))
.data('header-row', headerCount)
.data('column-count', i)
.data('column-is-even', isEven)
.addClass('time-sch-date time-sch-date-header')
.append(thisTime)
.appendTo(tr);

td.addClass('time-sch-header-' + headerCount + '-date-column-' + currentTimeIndex)
.addClass('time-sch-header-' + headerCount + '-date-' + ((currentTimeIndex % 2 === 0) ? 'even' : 'odd'));

for (var prevHeader = 0; prevHeader < headerCount; prevHeader++) {
TimeScheduler.AddHeaderClasses(td, i, prevHeader);
}

currentTimeIndex += 1;
}

colspan += 1;
Expand Down Expand Up @@ -400,6 +464,8 @@ var TimeScheduler = {
td = $(document.createElement('td'))
.addClass('time-sch-date time-sch-date-content')
.appendTo(tr);

TimeScheduler.AddHeaderClasses(td, time);
}

TimeScheduler.Sections[sections[i].id] = {
Expand All @@ -409,8 +475,7 @@ var TimeScheduler = {
}

TimeScheduler.SectionWrap.css({
/*top: TimeScheduler.Table.find('thead').height(),
*/left: TimeScheduler.Options.Element.find('.time-sch-section').outerWidth()
left: TimeScheduler.Options.Element.find('.time-sch-section').outerWidth()
});

if (TimeScheduler.Options.ShowCurrentTime) {
Expand Down Expand Up @@ -701,7 +766,12 @@ var TimeScheduler = {
});

if (TimeScheduler.Options.DisableOnMove) {
ui.draggable.draggable('disable').resizable('disable');
if (ui.draggable.data('uiDraggable')) {
ui.draggable.draggable('disable');
}
if (ui.draggable.data('uiResizable')) {
ui.draggable.resizable('disable');
}
}
ui.draggable.show();

Expand Down Expand Up @@ -769,31 +839,38 @@ var TimeScheduler = {
stop: function (event, ui) {
var item, start, end;
var period, periodEnd, minuteDiff, section;
var $this;

$this = $(this);

period = TimeScheduler.GetSelectedPeriod();
periodEnd = TimeScheduler.GetEndOfPeriod(TimeScheduler.Options.Start, period);
minuteDiff = Math.abs(TimeScheduler.Options.Start.diff(periodEnd, 'minutes'));

item = $(this).data('item');
item = $this.data('item');

if (ui.position.left !== ui.originalPosition.left) {
// Left handle moved

start = moment(TimeScheduler.Options.Start).tsAdd('minutes', minuteDiff * ($(this).position().left / TimeScheduler.SectionWrap.width()));
start = moment(TimeScheduler.Options.Start).tsAdd('minutes', minuteDiff * ($this.position().left / TimeScheduler.SectionWrap.width()));
end = item.end;
}
else {
// Right handle moved

start = item.start;
end = moment(TimeScheduler.Options.Start).tsAdd('minutes', minuteDiff * (($(this).position().left + $(this).width()) / TimeScheduler.SectionWrap.width()));
end = moment(TimeScheduler.Options.Start).tsAdd('minutes', minuteDiff * (($this.position().left + $this.width()) / TimeScheduler.SectionWrap.width()));
}

if (TimeScheduler.Options.DisableOnMove) {
$(this)
.resizable('disable')
.draggable('disable')
.find('.time-sch-item-event').show();
if ($this.data('uiDraggable')) {
$this.draggable('disable');
}
if ($this.data('uiResizable')) {
$this.resizable('disable');
}

$this.find('.time-sch-item-event').show();
}

if (TimeScheduler.Options.Events.ItemMovementEnd) {
Expand Down
2 changes: 1 addition & 1 deletion js/timelineScheduler.min.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions js/timelineScheduler.min.js.map

Large diffs are not rendered by default.

0 comments on commit 2f4c70c

Please sign in to comment.