some support for resizing
This commit is contained in:
rolux
parent
37ecdd99ac
commit
d915e9f205
3 changed files with 61 additions and 24 deletions
|
|
@ -11,7 +11,7 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
|
|||
|
||||
//Ox.print('$$$$', Ox.Calendar)
|
||||
|
||||
Ox.Calendar({
|
||||
var $calendar = Ox.Calendar({
|
||||
date: new Date(0),
|
||||
events: [
|
||||
|
||||
|
|
@ -623,8 +623,41 @@ Ox.load('UI', {debug: true, hideScreen: true, showScreen: true, theme: 'modern'}
|
|||
],
|
||||
height: window.innerHeight,
|
||||
range: [-5000, 5000],
|
||||
width: window.innerWidth,
|
||||
width: window.innerWidth - 257,
|
||||
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)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -109,6 +109,7 @@ Calendar
|
|||
|
||||
.OxCalendar {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.OxCalendar > .OxCalendarContainer {
|
||||
|
|
|
|||
|
|
@ -318,7 +318,7 @@ Ox.Calendar = function(options, self) {
|
|||
self.options.showTypes = data.selected.map(function(type) {
|
||||
return type.id;
|
||||
});
|
||||
self.lineEvents = getLineEvents();
|
||||
getLines();
|
||||
renderCalendar();
|
||||
}
|
||||
})
|
||||
|
|
@ -413,7 +413,7 @@ Ox.Calendar = function(options, self) {
|
|||
});
|
||||
|
||||
self.$lines = [];
|
||||
self.lineEvents = getLineEvents();
|
||||
getLines();
|
||||
renderCalendar();
|
||||
|
||||
function changeDate() {
|
||||
|
|
@ -599,9 +599,6 @@ Ox.Calendar = function(options, self) {
|
|||
paddingLeft = 0;
|
||||
width = getPosition(event.endTime, zoom) - left;
|
||||
}
|
||||
if (event.name == 'Martin Luther') {
|
||||
Ox.print('left', left, 'pL', paddingLeft, 'width', width)
|
||||
}
|
||||
return new Ox.Element()
|
||||
.addClass('OxEvent' +
|
||||
(event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) +
|
||||
|
|
@ -778,6 +775,7 @@ Ox.Calendar = function(options, self) {
|
|||
}
|
||||
|
||||
function panTo(date, line) {
|
||||
Ox.print('panning???')
|
||||
var delta = Math.round((date - self.options.date) / 1000 * getPixelsPerSecond()),
|
||||
// 250 ms for half the width of the visible area
|
||||
ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1);
|
||||
|
|
@ -802,18 +800,18 @@ Ox.Calendar = function(options, self) {
|
|||
};
|
||||
|
||||
function panToSelected() {
|
||||
if (self.options.selected !== '') {
|
||||
Ox.print('sos', self.options.selected, getSelectedEventElement())
|
||||
var line = getSelectedEventElement().data('line');
|
||||
panTo(getEventCenter(getSelectedEvent()), line);
|
||||
}
|
||||
// fixme: '0' should zoom to selected if selected is already centered
|
||||
// (both horizontally and vertically, the latter is a bit more work)
|
||||
self.options.selected !== '' && panTo(
|
||||
getEventCenter(getSelectedEvent()),
|
||||
getSelectedEventElement().data('line')
|
||||
);
|
||||
}
|
||||
|
||||
function renderBackground() {
|
||||
getBackgroundElements(self.options.zoom).forEach(function($element) {
|
||||
$element.appendTo(self.$background);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
|
|
@ -828,8 +826,8 @@ Ox.Calendar = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function getLineEvents() {
|
||||
var lineEvents = [];
|
||||
function getLines() {
|
||||
self.lineEvents = [];
|
||||
self.$content.find('.OxLine').remove();
|
||||
self.options.events.filter(function(event) {
|
||||
// filter out events with types not shown
|
||||
|
|
@ -852,9 +850,9 @@ Ox.Calendar = function(options, self) {
|
|||
return a.startTime - b.startTime;
|
||||
}
|
||||
}).forEach(function(event, i) {
|
||||
var line = lineEvents.length;
|
||||
var line = self.lineEvents.length;
|
||||
// traverse lines
|
||||
Ox.forEach(lineEvents, function(events, line_) {
|
||||
Ox.forEach(self.lineEvents, function(events, line_) {
|
||||
var fits = true;
|
||||
// traverse events in line
|
||||
Ox.forEach(events, function(event_) {
|
||||
|
|
@ -869,8 +867,8 @@ Ox.Calendar = function(options, self) {
|
|||
return false;
|
||||
}
|
||||
});
|
||||
if (line == lineEvents.length) {
|
||||
lineEvents[line] = [];
|
||||
if (line == self.lineEvents.length) {
|
||||
self.lineEvents[line] = [];
|
||||
self.$lines[line] = new Ox.Element()
|
||||
.addClass('OxLine')
|
||||
.css({
|
||||
|
|
@ -878,13 +876,12 @@ Ox.Calendar = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$content);
|
||||
}
|
||||
lineEvents[line].push(event);
|
||||
self.lineEvents[line].push(event);
|
||||
});
|
||||
self.contentHeight = Math.max(
|
||||
lineEvents.length * 16, self.$container.height()
|
||||
self.lineEvents.length * 16, self.$container.height()
|
||||
);
|
||||
self.$content.css({height: self.contentHeight + 'px'});
|
||||
return lineEvents;
|
||||
}
|
||||
|
||||
function renderEvents() {
|
||||
|
|
@ -970,7 +967,6 @@ Ox.Calendar = function(options, self) {
|
|||
} else {
|
||||
self.$container.$element[0].scrollTop = top;
|
||||
}
|
||||
Ox.print('scrollTo', top)
|
||||
}
|
||||
|
||||
function selectEvent(id, $element) {
|
||||
|
|
@ -1037,6 +1033,13 @@ Ox.Calendar = function(options, self) {
|
|||
self.setOption = function(key, val) {
|
||||
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') {
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue