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

some support for resizing

Browse source
This commit is contained in:
rolux 2011-05-28 01:49:36 +02:00
parent 37ecdd99ac
commit d915e9f205
3 changed files with 61 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
demos/calendar/js/calendar.js
View file

@ -11,7 +11,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
//Ox.print('$$$$', Ox.Calendar) //Ox.print('$$$$', Ox.Calendar)
Ox.Calendar({ var $calendar = Ox.Calendar({
date: new Date(0), date: new Date(0),
events: [ events: [
@ -623,8 +623,41 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
], ],
height: window.innerHeight, height: window.innerHeight,
range: [-5000, 5000], range: [-5000, 5000],
width: window.innerWidth, width: window.innerWidth - 257,
zoom: 2 zoom: 2
}).appendTo(Ox.UI.$body).gainFocus(); });
var $panel = Ox.SplitPanel({
elements: [
{
element: $calendar
},
{
collapsible: true,
element: Ox.Element(),
resizable: true,
resize: [128, 256, 384],
size: 256
}
],
orientation: 'horizontal'
}).appendTo(Ox.UI.$body);
$calendar
.bindEvent({
resize: function(foo, size) {
$calendar.options({width: window.innerWidth - $panel.getSize(1)});
}
})
.gainFocus();
Ox.UI.$window.bind({
resize: function(e) {
$calendar.options({
height: window.innerHeight,
width: window.innerWidth - $panel.getSize(1)
});
}
});
}); });

1
source/Ox.UI/css/Ox.UI.css
View file

@ -109,6 +109,7 @@ Calendar
.OxCalendar { .OxCalendar {
position: absolute; position: absolute;
overflow: hidden;
} }
.OxCalendar > .OxCalendarContainer { .OxCalendar > .OxCalendarContainer {

45
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -318,7 +318,7 @@ Ox.Calendar = function(options, self) {
self.options.showTypes = data.selected.map(function(type) { self.options.showTypes = data.selected.map(function(type) {
return type.id; return type.id;
}); });
self.lineEvents = getLineEvents(); getLines();
renderCalendar(); renderCalendar();
} }
}) })
@ -413,7 +413,7 @@ Ox.Calendar = function(options, self) {
}); });
self.$lines = []; self.$lines = [];
self.lineEvents = getLineEvents(); getLines();
renderCalendar(); renderCalendar();
function changeDate() { function changeDate() {
@ -599,9 +599,6 @@ Ox.Calendar = function(options, self) {
paddingLeft = 0; paddingLeft = 0;
width = getPosition(event.endTime, zoom) - left; width = getPosition(event.endTime, zoom) - left;
} }
if (event.name == 'Martin Luther') {
Ox.print('left', left, 'pL', paddingLeft, 'width', width)
}
return new Ox.Element() return new Ox.Element()
.addClass('OxEvent' + .addClass('OxEvent' +
(event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) + (event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) +
@ -778,6 +775,7 @@ Ox.Calendar = function(options, self) {
} }
function panTo(date, line) { function panTo(date, line) {
Ox.print('panning???')
var delta = Math.round((date - self.options.date) / 1000 * getPixelsPerSecond()), var delta = Math.round((date - self.options.date) / 1000 * getPixelsPerSecond()),
// 250 ms for half the width of the visible area // 250 ms for half the width of the visible area
ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1); ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1);
@ -802,18 +800,18 @@ Ox.Calendar = function(options, self) {
}; };
function panToSelected() { function panToSelected() {
if (self.options.selected !== '') { // fixme: '0' should zoom to selected if selected is already centered
Ox.print('sos', self.options.selected, getSelectedEventElement()) // (both horizontally and vertically, the latter is a bit more work)
var line = getSelectedEventElement().data('line'); self.options.selected !== '' && panTo(
panTo(getEventCenter(getSelectedEvent()), line); getEventCenter(getSelectedEvent()),
} getSelectedEventElement().data('line')
);
} }
function renderBackground() { function renderBackground() {
getBackgroundElements(self.options.zoom).forEach(function($element) { getBackgroundElements(self.options.zoom).forEach(function($element) {
$element.appendTo(self.$background); $element.appendTo(self.$background);
}); });
} }
function renderCalendar() { function renderCalendar() {
@ -828,8 +826,8 @@ Ox.Calendar = function(options, self) {
}); });
} }
function getLineEvents() { function getLines() {
var lineEvents = []; self.lineEvents = [];
self.$content.find('.OxLine').remove(); self.$content.find('.OxLine').remove();
self.options.events.filter(function(event) { self.options.events.filter(function(event) {
// filter out events with types not shown // filter out events with types not shown
@ -852,9 +850,9 @@ Ox.Calendar = function(options, self) {
return a.startTime - b.startTime; return a.startTime - b.startTime;
} }
}).forEach(function(event, i) { }).forEach(function(event, i) {
var line = lineEvents.length; var line = self.lineEvents.length;
// traverse lines // traverse lines
Ox.forEach(lineEvents, function(events, line_) { Ox.forEach(self.lineEvents, function(events, line_) {
var fits = true; var fits = true;
// traverse events in line // traverse events in line
Ox.forEach(events, function(event_) { Ox.forEach(events, function(event_) {
@ -869,8 +867,8 @@ Ox.Calendar = function(options, self) {
return false; return false;
} }
}); });
if (line == lineEvents.length) { if (line == self.lineEvents.length) {
lineEvents[line] = []; self.lineEvents[line] = [];
self.$lines[line] = new Ox.Element() self.$lines[line] = new Ox.Element()
.addClass('OxLine') .addClass('OxLine')
.css({ .css({
@ -878,13 +876,12 @@ Ox.Calendar = function(options, self) {
}) })
.appendTo(self.$content); .appendTo(self.$content);
} }
lineEvents[line].push(event); self.lineEvents[line].push(event);
}); });
self.contentHeight = Math.max( self.contentHeight = Math.max(
lineEvents.length * 16, self.$container.height() self.lineEvents.length * 16, self.$container.height()
); );
self.$content.css({height: self.contentHeight + 'px'}); self.$content.css({height: self.contentHeight + 'px'});
return lineEvents;
} }
function renderEvents() { function renderEvents() {
@ -970,7 +967,6 @@ Ox.Calendar = function(options, self) {
} else { } else {
self.$container.$element[0].scrollTop = top; self.$container.$element[0].scrollTop = top;
} }
Ox.print('scrollTo', top)
} }
function selectEvent(id, $element) { function selectEvent(id, $element) {
@ -1037,6 +1033,13 @@ Ox.Calendar = function(options, self) {
self.setOption = function(key, val) { self.setOption = function(key, val) {
if (key == 'date') { if (key == 'date') {
} else if (key == 'height') {
that.css({height: self.options.height + 'px'});
} else if (key == 'width') {
that.css({width: self.options.width + 'px'});
self.$zoomInput.options({size: self.options.width});
getLines();
renderCalendar();
} else if (key == 'zoom') { } else if (key == 'zoom') {
} }