update map and calendar

This commit is contained in:
rolux 2012-01-13 12:27:42 +05:30
parent f61e39a788
commit 30088ad0b1
5 changed files with 73 additions and 96 deletions

View file

@ -1122,6 +1122,7 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
{id: 'female', title: 'Female'}, {id: 'female', title: 'Female'},
{id: 'other', title: 'Other...'} {id: 'other', title: 'Other...'}
], ],
value: 'male',
width: 256 width: 256
}, },
title: 'SelectInput' title: 'SelectInput'

View file

@ -44,10 +44,12 @@ Ox.Calendar = function(options, self) {
}) })
.options(options || {}) .options(options || {})
.addClass('OxCalendar') .addClass('OxCalendar')
/*
.css({ .css({
//width: self.options.width + 'px', width: self.options.width + 'px',
//height: self.options.height + 'px' height: self.options.height + 'px'
}) })
*/
.bindEvent({ .bindEvent({
key_0: function() { key_0: function() {
panToSelected(); panToSelected();
@ -294,22 +296,21 @@ Ox.Calendar = function(options, self) {
self.$typeSelect = Ox.Select({ self.$typeSelect = Ox.Select({
items: [ items: [
{id: 'date', title: 'Dates', checked: self.options.showTypes.indexOf('date') > -1}, {id: 'date', title: 'Dates'},
{id: 'place', title: 'Places', checked: self.options.showTypes.indexOf('place') > -1}, {id: 'place', title: 'Places'},
{id: 'person', title: 'People', checked: self.options.showTypes.indexOf('person') > -1}, {id: 'person', title: 'People'},
{id: 'other', title: 'Other', checked: self.options.showTypes.indexOf('other') > -1} {id: 'other', title: 'Other'}
], ],
max: -1, max: -1,
min: 1, min: 1,
title: 'Show...', title: 'Show...',
value: self.options.showTypes,
width: 80 width: 80
}) })
.css({float: 'left', margin: '4px'}) .css({float: 'left', margin: '4px'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
self.options.showTypes = data.value.map(function(type) { self.options.showTypes = data.value;
return type.id;
});
getLines(); getLines();
renderCalendar(); renderCalendar();
} }
@ -589,7 +590,8 @@ Ox.Calendar = function(options, self) {
self.$content.css({marginLeft: 0}); self.$content.css({marginLeft: 0});
self.$scrollbar.css({marginLeft: 0}); self.$scrollbar.css({marginLeft: 0});
self.options.date = new Date( self.options.date = new Date(
+self.options.date - (data.clientX - self.drag.x) * getSecondsPerPixel() * 1000 +self.options.date
- (data.clientX - self.drag.x) * getSecondsPerPixel() * 1000
); );
renderCalendar(); renderCalendar();
} }
@ -628,7 +630,9 @@ Ox.Calendar = function(options, self) {
self.$content.css({marginLeft: 0}); self.$content.css({marginLeft: 0});
self.$scrollbar.css({marginLeft: 0}); self.$scrollbar.css({marginLeft: 0});
self.options.date = new Date( self.options.date = new Date(
+self.options.date + (self.drag.x - data.clientX) * getSecondsPerPixel() * 1000 * getScrollbarFactor() +self.options.date
+ (self.drag.x - data.clientX) * getSecondsPerPixel() * 1000
* getScrollbarFactor()
); );
renderCalendar(); renderCalendar();
} }
@ -643,21 +647,21 @@ Ox.Calendar = function(options, self) {
value = unit.value(self.options.date), value = unit.value(self.options.date),
width = Math.round(unit.seconds * getPixelsPerSecond(zoom)), width = Math.round(unit.seconds * getPixelsPerSecond(zoom)),
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width); n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
Ox.loop(-n, n + 1, function(i) { Ox.loop(-n, n + 1, function(i) {
if (u == 0 || Ox.mod(value + i, 2)) { if (u == 0 || Ox.mod(value + i, 2)) {
$elements.push( $elements.push(
Ox.Element() Ox.Element()
.addClass( .addClass(
u == 0 ? 'line' : '' u == 0 ? 'line' : ''
) )
.css({ .css({
left: getPosition(unit.date(value + i), zoom) + 'px', left: getPosition(unit.date(value + i), zoom) + 'px',
width: (u == 0 ? 1 : width) + 'px', width: (u == 0 ? 1 : width) + 'px',
height: self.contentHeight + 'px' height: self.contentHeight + 'px'
}) })
); );
} }
}); });
}); });
return $elements; return $elements;
} }
@ -869,8 +873,6 @@ Ox.Calendar = function(options, self) {
value = unit.value(self.options.date), value = unit.value(self.options.date),
width = unit.seconds * getPixelsPerSecond(zoom), width = unit.seconds * getPixelsPerSecond(zoom),
n = Math.ceil(self.options.width * 1.5/* * 16*/ / width); n = Math.ceil(self.options.width * 1.5/* * 16*/ / width);
//Ox.Log('Calendar', zoom, getUnits(zoom).map(function(u) {return u.name(value)}).join('/'))
//Ox.Log('Calendar', 'VALUE', value)
Ox.loop(-n, n + 1, function(i) { Ox.loop(-n, n + 1, function(i) {
$elements.push( $elements.push(
getEventElement({ getEventElement({
@ -947,9 +949,11 @@ Ox.Calendar = function(options, self) {
function overlaps(eventA, eventB) { function overlaps(eventA, eventB) {
return ( return (
eventA.startTime >= eventB.startTime && eventA.startTime < eventB.endTime eventA.startTime >= eventB.startTime
&& eventA.startTime < eventB.endTime
) || ( ) || (
eventB.startTime >= eventA.startTime && eventB.startTime < eventA.endTime eventB.startTime >= eventA.startTime
&& eventB.startTime < eventA.endTime
); );
} }
@ -958,9 +962,13 @@ Ox.Calendar = function(options, self) {
} }
function panTo(date, line) { function panTo(date, line) {
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
);
self.$scalebar.stop().animate({ self.$scalebar.stop().animate({
marginLeft: -delta + 'px' marginLeft: -delta + 'px'
}, ms); }, ms);
@ -1203,7 +1211,7 @@ Ox.Calendar = function(options, self) {
}; };
that.addEvent = function(event) { that.addEvent = function(event) {
Ox.Log('Calendar', 'CALENDAR ADD EVENT', event) // Ox.Log('Calendar', 'CALENDAR ADD EVENT', event)
event = getEventData(event); event = getEventData(event);
self.options.events.push(event); self.options.events.push(event);
getLines(); getLines();

View file

@ -31,8 +31,6 @@ Ox.ListCalendar = function(options, self) {
self.durationCache = {}; self.durationCache = {};
Ox.Log('Calendar', 'EVENT[0]', self.options.events[0])
self.columns = [ self.columns = [
{ {
id: 'name', id: 'name',

View file

@ -75,11 +75,12 @@ Ox.Select = function(options, self) {
Ox.Log('Form', 'Ox.Select', self.options); Ox.Log('Form', 'Ox.Select', self.options);
self.options.items = self.options.items.map(function(item) { self.options.items = self.options.items.map(function(item) {
var isObject = Ox.isObject(item);
return Ox.isEmpty(item) ? item : { return Ox.isEmpty(item) ? item : {
id: 'id' in item ? item.id : item, id: isObject ? item.id : item,
title: 'title' in item ? item.title : item, title: isObject ? item.title : item,
checked: Ox.toArray(self.options.value).indexOf( checked: Ox.toArray(self.options.value).indexOf(
'id' in item ? item.id : item isObject ? item.id : item
) > -1 ) > -1
}; };
}); });

View file

@ -186,12 +186,14 @@ Ox.Map = function(options, self) {
self.isAsync = Ox.isFunction(self.options.places); self.isAsync = Ox.isFunction(self.options.places);
self.mapHeight = getMapHeight(); self.mapHeight = getMapHeight();
self.metaKey = false;
self.minZoom = getMinZoom(); self.minZoom = getMinZoom();
self.placeKeys = [ self.placeKeys = [
'id', 'name', 'alternativeNames', 'geoname', 'countryCode', 'type', 'id', 'name', 'alternativeNames', 'geoname', 'countryCode', 'type',
'lat', 'lng', 'south', 'west', 'north', 'east', 'area', 'lat', 'lng', 'south', 'west', 'north', 'east', 'area',
'editable' 'editable'
]; ];
self.resultPlace = null;
self.scaleMeters = [ self.scaleMeters = [
50000000, 20000000, 10000000, 50000000, 20000000, 10000000,
5000000, 2000000, 1000000, 5000000, 2000000, 1000000,
@ -201,12 +203,7 @@ Ox.Map = function(options, self) {
500, 200, 100, 500, 200, 100,
50, 20, 10 50, 20, 10
]; ];
self.shiftKey = false;
Ox.extend(self, {
metaKey: false,
resultPlace: null,
shiftKey: false
});
if (self.options.toolbar) { if (self.options.toolbar) {
self.$toolbar = Ox.Bar({ self.$toolbar = Ox.Bar({
@ -513,7 +510,6 @@ Ox.Map = function(options, self) {
self.places.push(place); self.places.push(place);
self.resultPlace = null; self.resultPlace = null;
that.triggerEvent('addplace', place) that.triggerEvent('addplace', place)
//Ox.Log('Map', 'SSSS', self.options.selected)
} }
function boundsChanged() { function boundsChanged() {
@ -570,7 +566,6 @@ Ox.Map = function(options, self) {
} }
function constructZoomInput() { function constructZoomInput() {
//Ox.Log('Map', 'constructZoomInput', self.minZoom, self.maxZoom)
if (self.options.zoombar) { if (self.options.zoombar) {
self.$zoomInput && self.$zoomInput.remove(); self.$zoomInput && self.$zoomInput.remove();
self.$zoomInput = Ox.Range({ self.$zoomInput = Ox.Range({
@ -676,17 +671,13 @@ Ox.Map = function(options, self) {
} }
function getPlaceById(id) { function getPlaceById(id) {
var place = Ox.getObjectById(self.places, id); return self.resultPlace && self.resultPlace.id == id
if (!place && self.resultPlace && self.resultPlace.id == id) { ? self.resultPlace
place = self.resultPlace; : Ox.getObjectById(self.places, id);
}
//Ox.Log('Map', 'getPlaceById', id, place)
return place;
} }
function getPlaceByLatLng(latlng, bounds, callback) { function getPlaceByLatLng(latlng, bounds, callback) {
// gets the largest place at latlng that would fit in bounds // gets the largest place at latlng that would fit in bounds
//Ox.Log('Map', 'll b', latlng, bounds)
var callback = arguments.length == 3 ? callback : bounds, var callback = arguments.length == 3 ? callback : bounds,
bounds = arguments.length == 3 ? bounds : null; bounds = arguments.length == 3 ? bounds : null;
self.geocoder.geocode({ self.geocoder.geocode({
@ -775,8 +766,9 @@ Ox.Map = function(options, self) {
} }
function getSelectedPlace() { function getSelectedPlace() {
return self.options.selected ? return self.options.selected
getPlaceById(self.options.selected) : null; ? getPlaceById(self.options.selected)
: null;
} }
function initMap() { function initMap() {
@ -903,9 +895,11 @@ Ox.Map = function(options, self) {
self.places.sort(function(a, b) { self.places.sort(function(a, b) {
var sort = { var sort = {
a: a.selected ? Infinity a: a.selected ? Infinity
: bounds.contains(a.center) ? a.area : -Infinity, : bounds.contains(a.center) ? a.area
: -Infinity,
b: b.selected ? Infinity b: b.selected ? Infinity
: bounds.contains(b.center) ? b.area : -Infinity, : bounds.contains(b.center) ? b.area
: -Infinity,
}; };
return sort.b - sort.a; return sort.b - sort.a;
}).forEach(function(place, i) { }).forEach(function(place, i) {
@ -1052,6 +1046,14 @@ Ox.Map = function(options, self) {
] ]
}, },
type = 'feature'; type = 'feature';
function find(type) {
var ret;
Ox.forEach(types, function(v) {
ret = Ox.startsWith(v, type);
return !ret;
});
return ret;
}
Ox.forEach(strings, function(values, key) { Ox.forEach(strings, function(values, key) {
Ox.forEach(values, function(value) { Ox.forEach(values, function(value) {
if (find(value)) { if (find(value)) {
@ -1062,14 +1064,6 @@ Ox.Map = function(options, self) {
return type == 'feature'; return type == 'feature';
}); });
return type; return type;
function find(type) {
var ret;
Ox.forEach(types, function(v) {
ret = Ox.startsWith(v, type);
return !ret;
});
return ret;
}
} }
return place; return place;
} }
@ -1105,7 +1099,6 @@ Ox.Map = function(options, self) {
var place = getSelectedPlace(); var place = getSelectedPlace();
place.id = '_' + place.id; place.id = '_' + place.id;
self.options.selected = place.id; self.options.selected = place.id;
//Ox.Log('Map', 'removePlace', Ox.getObjectById(self.places, place.id))
self.places.splice(Ox.getIndexById(self.places, place.id), 1); self.places.splice(Ox.getIndexById(self.places, place.id), 1);
self.resultPlace && self.resultPlace.remove(); self.resultPlace && self.resultPlace.remove();
self.resultPlace = place; self.resultPlace = place;
@ -1113,31 +1106,11 @@ Ox.Map = function(options, self) {
} }
function reset() { function reset() {
//Ox.Log('Map', self.map.getZoom(), self.zoom); self.map.getZoom() == self.zoom
self.map.getZoom() == self.zoom ? ? self.map.panTo(self.center)
self.map.panTo(self.center) : : self.map.fitBounds(self.bounds);
self.map.fitBounds(self.bounds);
} }
function resizeMap() {
/*
Ox.Log('Map', 'resizeMap', self.options.width, self.options.height);
var center = self.map.getCenter();
self.mapHeight = getMapHeight();
self.minZoom = getMinZoom();
that.css({
height: self.options.height + 'px',
width: self.options.width + 'px'
});
self.$map.css({
height: self.mapHeight + 'px',
width: self.options.width + 'px'
});
google.maps.event.trigger(self.map, 'resize');
self.map.setCenter(center);
*/
}
function selectPlace(id, zoom) { function selectPlace(id, zoom) {
// id can be null (deselect) // id can be null (deselect)
var place, var place,
@ -1404,13 +1377,9 @@ Ox.Map = function(options, self) {
}; };
that.getKey = function() { that.getKey = function() {
var key = null; return self.shiftKey ? 'shift'
if (self.shiftKey) { : self.metaKey ? 'meta'
key = 'shift' : null;
} else if (self.metaKey) {
key = 'meta'
}
return key;
}; };
that.getSelectedPlace = function() { that.getSelectedPlace = function() {