0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

calendar updates

Browse source
This commit is contained in:
rlx 2011-04-21 03:10:49 +00:00
commit 0cbf31e981
4 changed files with 212 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

20
build/css/ox.ui.css
View file

@ -119,6 +119,17 @@ Calendar
overflow: hidden;
}
.OxCalendar .OxBackground {
position: absolute;
top: 0;
bottom: 0;
}
.OxCalendar .OxBackground > div {
position: absolute;
top: 0;
bottom: 0;
}
.OxCalendar .OxLine {
position: absolute;
}
@ -131,12 +142,11 @@ Calendar
white-space: nowrap;
cursor: pointer;
}
.OxCalendar .OxLine:nth-child(even) .OxDate {
background-color: rgb(255, 0, 0);
}
.OxCalendar .OxLine:nth-child(odd) .OxDate {
background-color: rgb(255, 64, 64);
.OxCalendar .OxLine > .OxDate {
background: -moz-linear-gradient(top, rgba(255, 64, 64, 0.75), rgba(255, 0, 0, 0.75));
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 32, 32, 1)), to(rgba(224, 0, 0, 1)));
}
.OxCalendar .OxTimeline {
position: absolute;
height: 16px;

18
build/css/ox.ui.modern.css
View file

@ -37,16 +37,24 @@ Calendar
================================================================================
*/
.OxThemeModern .OxCalendar .OxTimeline > div.even {
.OxThemeModern .OxCalendar .OxTimeline > div.odd {
background: -moz-linear-gradient(top, rgb(64, 64, 64), rgb(32, 32, 32));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(64, 64, 64)), to(rgb(32, 32, 32)));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(64, 64, 64)), to(rgb(16, 16, 16)));
}
.OxThemeModern .OxCalendar .OxTimeline > div.odd {
background: -moz-linear-gradient(top, rgb(56, 56, 56), rgb(24, 24, 24));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(56, 56, 56)), to(rgb(24, 24, 24)));
.OxThemeModern .OxCalendar .OxTimeline > div.even {
background: -moz-linear-gradient(top, rgb(48, 48, 48), rgb(24, 24, 24));
background: -webkit-gradient(linear, left top, left bottom, from(rgb(48, 48, 48)), to(rgb(16, 16, 16)));
}
.OxThemeModern .OxCalendar .OxBackground > div.odd {
background: rgb(16, 16, 16);
}
.OxThemeModern .OxCalendar .OxBackground > div.even {
background: rgb(24, 24, 24);
}
/*
================================================================================
Dialog

212
build/js/ox.ui.js
View file

@ -10968,7 +10968,8 @@ requires
id: 'day',
seconds: 86400,
date: function(i) {
return i * 86400000;
// adjust for timezone difference
return i * 86400000 + +new Date().getTimezoneOffset() * 60000;
},
name: function(i) {
return Ox.formatDate(new Date(i * 86400000), '%b %e, %Y');
@ -11025,6 +11026,7 @@ requires
bottom: '40px'
})
.bind({
dblclick: dblclick,
mouseleave: mouseleave,
mousemove: mousemove,
mousewheel: mousewheel
@ -11041,6 +11043,10 @@ requires
.addClass('OxCalendarContent')
.appendTo(self.$container);
self.$background = new Ox.Element()
.addClass('OxBackground')
.appendTo(self.$content);
self.$scalebar = new Ox.Element()
.addClass('OxTimeline')
.css({
@ -11124,9 +11130,7 @@ requires
textAlign: 'center'
});
sortDates();
renderTimelines();
renderDates();
renderCalendar();
function changeDate() {
@ -11134,9 +11138,19 @@ requires
function changeZoom(event, data) {
self.options.zoom = data.value;
$('.OxDate').remove();
renderTimelines();
renderDates();
renderCalendar();
}
function dblclick(e) {
if ($(e.target).is(':not(.OxLine > .OxDate)')) {
if (self.options.zoom < self.maxZoom) {
self.options.date = new Date(
(+self.options.date + +getMouseDate(e)) / 2
);
self.options.zoom++;
}
renderCalendar();
}
}
function dragstart(event, e) {
@ -11147,34 +11161,50 @@ requires
function drag(event, e) {
if (self.drag) {
///*
self.$content.css({
marginLeft: (e.clientX - self.drag.x) + 'px'
});
self.$scrollbar.css({
marginLeft: Math.round((e.clientX - self.drag.x) / 16) + 'px'
});
});
//*/
/*
self.options.date = new Date(
+self.options.date - e.clientDX * getSecondsPerPixel() * 1000
);
*/
//self.drag = {x: e.clientX};
}
}
function dragpause(event, e) {
return;
if (self.drag) {
Ox.print('dragpause')
dragafter();
dragafter(e);
self.drag = {x: e.clientX};
}
}
function dragend(event, e) {
if (self.drag) {
self.options.date = new Date(
+self.options.date + (self.drag.x - e.clientX) * getSecondsPerPixel() * 1000
);
dragafter(e);
self.drag = null;
dragafter();
}
}
function dragafter(e) {
self.options.date = new Date(
+self.options.date - (e.clientX - self.drag.x) * getSecondsPerPixel() * 1000
);
self.$content.css({
marginLeft: 0
});
self.$scrollbar.css({
marginLeft: 0
});
renderCalendar();
}
function dragstartScrollbar(event, e) {
self.drag = {x: e.clientX};
}
@ -11189,33 +11219,27 @@ requires
}
function dragpauseScrollbar(event, e) {
return;
dragafterScrollbar(e);
self.drag = {x: e.clientX};
dragafter();
}
function dragendScrollbar(event, e) {
dragafterScrollbar(e);
self.drag = null;
}
function dragafterScrollbar(e) {
self.options.date = new Date(
+self.options.date + (self.drag.x - e.clientX) * getSecondsPerPixel() * 1000 * 16
);
self.drag = null;
dragafter();
}
function dragafter() {
// fixme: duplicated
self.$content.css({
marginLeft: 0
});
self.$scrollbar.css({
marginLeft: 0
});
$('.OxDate').remove();
renderTimelines();
renderDates();
var calendarDate = getCalendarDate();
self.$statusbar.html(
calendarDate.start + ' | ' + self.options.date + ' | ' + calendarDate.stop
);
renderCalendar();
}
function formatDate(date) {
@ -11284,10 +11308,10 @@ requires
}
function getPosition(date, zoom) {
zoom = zoom || self.options.zoom
return Math.round(
self.options.width / 2 +
(date - self.options.date) / 1000 * getPixelsPerSecond(zoom)
(date - self.options.date) / 1000 *
getPixelsPerSecond(zoom || self.options.zoom)
);
}
@ -11295,15 +11319,42 @@ requires
return 1 / getPixelsPerSecond(zoom);
}
function getBackgroundElements(zoom) {
// fixme: duplicated
var $elements = [],
pixelsPerSecond = getPixelsPerSecond(zoom),
n, unit, value, width;
Ox.forEach(self.units, function(v, i) {
width = Math.round(v.seconds * pixelsPerSecond);
if (width < 64) {
unit = v;
return false;
}
});
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
value = unit.value(self.options.date);
Ox.loop(-n, n + 1, function(i) {
$elements.push(
new Ox.Element()
.addClass(Ox.mod(value + i, 2) == 0 ? 'even' : 'odd')
.css({
left: getPosition(new Date(unit.date(value + i)), zoom) + 'px',
width: width + 'px'
})
);
});
return $elements;
}
function getTimelineElements(zoom) {
var $elements = [],
pixelsPerSecond = getPixelsPerSecond(zoom),
n, unit, value, width;
self.units = self.units.reverse();
Ox.forEach(self.units, function(v) {
width = v.seconds * pixelsPerSecond;
width = Math.round(v.seconds * pixelsPerSecond);
if (width >= 64) {
unit = Ox.getObjectById(self.units, v.id);
unit = v;
return false;
}
});
@ -11313,7 +11364,7 @@ requires
Ox.loop(-n, n + 1, function(i) {
$elements.push(
getDateElement({
name: unit.name(value + i)/* + unit.date(value + i) + '-' + unit.date(value + i + 1)*/,
name: unit.name(value + i),
start: new Date(unit.date(value + i)),
stop: new Date(unit.date(value + i + 1))
}, zoom)
@ -11344,18 +11395,22 @@ requires
}
function mousewheel(e, delta, deltaX, deltaY) {
Ox.print('mousewheel', delta, deltaX, deltaY);
//Ox.print('mousewheel', delta, deltaX, deltaY);
var deltaZ = 0;
if (!self.mousewheel && deltaY && Math.abs(deltaY) > Math.abs(deltaX)) {
self.options.date = deltaY < 0 ?
new Date(2 * +self.options.date - +getMouseDate(e)) :
new Date((+self.options.date + +getMouseDate(e)) / 2)
self.options.zoom = Ox.limit(self.options.zoom + (
deltaY < 0 ? -1 : 1
), 0, self.maxZoom);
self.$zoomInput.options({value: self.options.zoom});
$('.OxDate').remove();
renderTimelines();
renderDates();
if (deltaY < 0 && self.options.zoom > 0) {
deltaZ = -1
} else if (deltaY > 0 && self.options.zoom < self.maxZoom) {
deltaZ = 1
}
if (deltaZ) {
self.options.date = deltaZ == -1 ?
new Date(2 * +self.options.date - +getMouseDate(e)) :
new Date((+self.options.date + +getMouseDate(e)) / 2)
self.options.zoom += deltaZ;
self.$zoomInput.options({value: self.options.zoom});
renderCalendar();
}
}
self.mousewheel = true;
setTimeout(function() {
@ -11371,14 +11426,37 @@ requires
);
}
function renderCalendar() {
$('.OxBackground').empty();
$('.OxDate').remove();
renderBackground();
renderTimelines();
renderDates();
}
function renderBackground() {
getBackgroundElements(self.options.zoom).forEach(function($element) {
$element.appendTo(self.$background);
});
}
function renderDates() {
self.lineDates = [];
self.$lines = [];
self.options.dates.forEach(function(date, i) {
var line = self.$lines.length;
Ox.forEach(self.lineDates, function(dates, line_) {
var calendarDate = getCalendarDate();
lineDates = [];
self.options.dates.filter(function(date) {
// filter out dates outside the visible area
return overlaps(date, calendarDate);
}).sort(function(a, b) {
// sort dates by duration, descending
return (b.stop - b.start) - (a.stop - a.start);
}).forEach(function(date, i) {
var line = lineDates.length;
// traverse lines
Ox.forEach(lineDates, function(dates, line_) {
var fits = true;
// traverse dates in line
Ox.forEach(dates, function(date_) {
// if overlaps, check next line
if (overlaps(date, date_)) {
fits = false;
return false;
@ -11389,24 +11467,30 @@ requires
return false;
}
});
if (line == self.$lines.length) {
self.lineDates[line] = [];
self.$lines[line] = new Ox.Element()
.addClass('OxLine')
.css({
top: ((line + 1) * 16) + 'px'
});
if (line == lineDates.length) {
lineDates[line] = [];
}
self.lineDates[line].push(date);
self.$lines[line].append(getDateElement(date));
lineDates[line].push(date);
});
$('.OxLine').remove();
self.$lines.forEach(function($line) {
$line.appendTo(self.$content);
lineDates.forEach(function(dates, line) {
var $line = new Ox.Element()
.addClass('OxLine')
.css({
top: ((line + 1) * 16) + 'px'
})
.appendTo(self.$content);
dates.sort(function(a, b) {
// sort dates by start, ascending
return a.start - b.start;
}).forEach(function(date) {
getDateElement(date).appendTo($line);
});
});
}
function renderTimelines() {
Ox.print(self.options.zoom, Math.max(self.options.zoom - 4, 0))
getTimelineElements(self.options.zoom).forEach(function($element) {
$element.appendTo(self.$scalebar.$element);
});
@ -11415,12 +11499,6 @@ requires
});
}
function sortDates() {
self.options.dates.sort(function(a, b) {
return (b.stop - b.start) - (a.stop - a.start);
});
}
self.onChange = function(key, val) {
if (key == 'date') {