From d915e9f205ef03767a7d185fa04cad6ba3e95e42 Mon Sep 17 00:00:00 2001 From: rolux Date: Sat, 28 May 2011 01:49:36 +0200 Subject: [PATCH] some support for resizing --- demos/calendar/js/calendar.js | 39 +++++++++++++++++++-- source/Ox.UI/css/Ox.UI.css | 1 + source/Ox.UI/js/Calendar/Ox.Calendar.js | 45 +++++++++++++------------ 3 files changed, 61 insertions(+), 24 deletions(-) diff --git a/demos/calendar/js/calendar.js b/demos/calendar/js/calendar.js index 072cf023..ef987f18 100644 --- a/demos/calendar/js/calendar.js +++ b/demos/calendar/js/calendar.js @@ -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) + }); + } + }); }); \ No newline at end of file diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 811c4e4b..2d06b280 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -109,6 +109,7 @@ Calendar .OxCalendar { position: absolute; + overflow: hidden; } .OxCalendar > .OxCalendarContainer { diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index 8bb275b7..cb2fbd60 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js @@ -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') { }