update map and calendar
This commit is contained in:
parent
f61e39a788
commit
30088ad0b1
5 changed files with 73 additions and 96 deletions
|
@ -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'
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
@ -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();
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
|
@ -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,29 +1106,9 @@ 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) {
|
||||||
|
@ -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() {
|
||||||
|
|
Loading…
Reference in a new issue