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

make map fill parent element

Browse source
This commit is contained in:
rlx 2011-03-05 17:46:35 +00:00
parent 6496f4d0f6
commit 802600f19f
3 changed files with 110 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
build/css/ox.ui.css
View file

@ -963,6 +963,18 @@ Maps
================================================================================ ================================================================================
*/ */
.OxMap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.OxMap > * {
position: absolute;
}
.OxMapButton { .OxMapButton {
position: absolute; position: absolute;
width: 12px; width: 12px;

113
build/js/ox.ui.js
View file

@ -8982,6 +8982,7 @@ requires
selected: [], selected: [],
width: 256 width: 256
}) })
.addClass('OxListMap')
.options(options || {}) .options(options || {})
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
@ -9211,6 +9212,7 @@ requires
self.$map = new Ox.Map({ self.$map = new Ox.Map({
clickable: true, clickable: true,
editable: true, editable: true,
findPlaceholder: 'Find on Map',
height: self.options.height, height: self.options.height,
places: places, places: places,
statusbar: true, statusbar: true,
@ -9223,7 +9225,7 @@ requires
that.triggerEvent('addplace', data); that.triggerEvent('addplace', data);
}, },
resize: function() { resize: function() {
self.$map.resizeMap(); self.$map.resizeMap(); // fixme: don't need event
}, },
selectplace: selectPlace selectplace: selectPlace
}); });
@ -9334,23 +9336,19 @@ requires
// fixme: isClickable? hasZoombar? // fixme: isClickable? hasZoombar?
clickable: false, clickable: false,
editable: false, editable: false,
height: 256, findPlaceholder: 'Find',
labels: false, labels: false,
markers: 100, markers: 100,
places: [], places: [],
selected: null, selected: null,
statusbar: false, statusbar: false,
toolbar: false, toolbar: false,
width: 256,
zoombar: false zoombar: false
}) })
.options(options || {}) .options(options || {})
.css({ .addClass('OxMap')
width: self.options.width + 'px', .click(function(e) {
height: self.options.height + 'px' !$(e.target).is('input') && that.gainFocus();
})
.click(function() {
that.gainFocus();
}) })
.bindEvent({ .bindEvent({
key_0: function() { key_0: function() {
@ -9442,7 +9440,7 @@ requires
.appendTo(self.$toolbar) .appendTo(self.$toolbar)
self.$findInput = new Ox.Input({ self.$findInput = new Ox.Input({
clear: true, clear: true,
placeholder: 'Find on Map', placeholder: self.options.findPlaceholder,
width: 192 width: 192
}) })
.css({float: 'right', margin: '4px'}) .css({float: 'right', margin: '4px'})
@ -9454,8 +9452,10 @@ requires
self.$map = new Ox.Element('div') self.$map = new Ox.Element('div')
.css({ .css({
width: self.options.width + 'px', left: 0,
height: getMapHeight() + 'px' top: self.options.toolbar * 24 + 'px',
right: 0,
bottom: self.options.zoombar * 16 + self.options.statusbar * 24 + 'px'
}) })
.appendTo(that); .appendTo(that);
@ -9463,6 +9463,9 @@ requires
self.$zoombar = new Ox.Bar({ self.$zoombar = new Ox.Bar({
size: 16 size: 16
}) })
.css({
bottom: self.options.statusbar * 24 + 'px'
})
.appendTo(that); .appendTo(that);
} }
@ -9470,24 +9473,29 @@ requires
self.$statusbar = new Ox.Bar({ self.$statusbar = new Ox.Bar({
size: 24 size: 24
}) })
.css({
bottom: 0
})
.appendTo(that); .appendTo(that);
self.$placeNameInput = new Ox.Input({ self.$placeNameInput = new Ox.Input({
placeholder: 'Name', placeholder: 'Name',
width: Math.floor((self.options.width - 112) / 2) width: 96
}) })
.css({float: 'left', margin: '4px 2px 4px 4px'}) //.css({position: 'absolute', left: 4, top: 4})
.css({float: 'left', margin: '4px 1px 4px 4px'})
.appendTo(self.$statusbar); .appendTo(self.$statusbar);
self.$placeGeonameInput = new Ox.Input({ self.$placeGeonameInput = new Ox.Input({
placeholder: 'Geoname', placeholder: 'Geoname',
width: Math.ceil((self.options.width - 112) / 2) width: 96
}) })
.css({float: 'left', margin: '4px 2px 4px 2px'}) //.css({position: 'absolute', left: 104, top: 4})
.appendTo(self.$statusbar) .css({float: 'left', margin: '4px 1px 4px 4px'})
.appendTo(self.$statusbar);
self.$placeButton = new Ox.Button({ self.$placeButton = new Ox.Button({
title: 'New Place', title: 'New Place',
width: 96 width: 96
}) })
.css({float: 'left', margin: '4px 4px 4px 2px'}) .css({float: 'right', margin: '4px 4px 4px 2px'})
.bindEvent({ .bindEvent({
click: clickPlaceButton click: clickPlaceButton
}) })
@ -9592,7 +9600,6 @@ requires
self.resultPlace = place; self.resultPlace = place;
place.add(); place.add();
} }
Ox.print('EXISTS', exists, 'SELECTING', place.id)
selectPlace(place.id); selectPlace(place.id);
} }
@ -9624,6 +9631,8 @@ requires
} }
function centerChanged() { function centerChanged() {
Ox.print('CENTER CHANGED')
self.center = self.map.getCenter();
self.centerChanged = true; self.centerChanged = true;
} }
@ -9665,7 +9674,7 @@ requires
arrows: true, arrows: true,
max: self.maxZoom, max: self.maxZoom,
min: self.minZoom, min: self.minZoom,
size: self.options.width, size: that.width(),
thumbSize: 32, thumbSize: 32,
thumbValue: true, thumbValue: true,
value: self.map.getZoom() value: self.map.getZoom()
@ -9818,6 +9827,9 @@ requires
function initMap() { function initMap() {
var mapBounds; var mapBounds;
updateFormElements()
self.elevationService = new google.maps.ElevationService(); self.elevationService = new google.maps.ElevationService();
self.geocoder = new google.maps.Geocoder(); self.geocoder = new google.maps.Geocoder();
self.maxZoomService = new google.maps.MaxZoomService(); self.maxZoomService = new google.maps.MaxZoomService();
@ -9846,9 +9858,10 @@ requires
google.maps.event.addListener(self.map, 'click', clickMap); google.maps.event.addListener(self.map, 'click', clickMap);
google.maps.event.addListener(self.map, 'idle', mapChanged); google.maps.event.addListener(self.map, 'idle', mapChanged);
google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged); google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
google.maps.event.addListenerOnce(self.map, 'tilesloaded', tilesLoaded);
if (mapBounds) { if (mapBounds) {
self.map.fitBounds(mapBounds); self.map.fitBounds(mapBounds);
self.zoom = self.map.getZoom(); //self.zoom = self.map.getZoom();
} }
// fixme: use tilesloaded event! // fixme: use tilesloaded event!
/* /*
@ -9866,6 +9879,12 @@ requires
google.maps.event.trigger(self.map, 'resize'); google.maps.event.trigger(self.map, 'resize');
//that.gainFocus(); //that.gainFocus();
that.triggerEvent('load'); that.triggerEvent('load');
function tilesLoaded() {
return;
self.$placeNameInput.options({
size: 400
}).css({width: 400});
}
} }
function mapChanged() { function mapChanged() {
@ -9895,6 +9914,9 @@ requires
getMaxZoom(function(zoom) { getMaxZoom(function(zoom) {
if (zoom != self.maxZoom) { if (zoom != self.maxZoom) {
self.maxZoom = zoom; self.maxZoom = zoom;
if (self.map.getZoom() > zoom) {
self.map.setZoom(zoom);
}
constructZoomInput(); constructZoomInput();
} }
}); });
@ -9906,7 +9928,7 @@ requires
} }
function pan(x, y) { function pan(x, y) {
self.map.panBy(x * self.options.width / 2, y * self.mapHeight / 2); self.map.panBy(x * self.$map.width() / 2, y * self.$map.height() / 2);
}; };
function parseGeodata(data) { function parseGeodata(data) {
@ -9992,6 +10014,7 @@ requires
} }
function resizeMap() { function resizeMap() {
/*
Ox.print('resizeMap', self.options.width, self.options.height); Ox.print('resizeMap', self.options.width, self.options.height);
var center = self.map.getCenter(); var center = self.map.getCenter();
self.mapHeight = getMapHeight(); self.mapHeight = getMapHeight();
@ -10006,6 +10029,7 @@ requires
}); });
google.maps.event.trigger(self.map, 'resize'); google.maps.event.trigger(self.map, 'resize');
self.map.setCenter(center); self.map.setCenter(center);
*/
} }
function selectPlace(id) { function selectPlace(id) {
@ -10029,7 +10053,6 @@ requires
if (self.options.statusbar) { if (self.options.statusbar) {
place = getSelectedPlace(); place = getSelectedPlace();
if (place) { if (place) {
Ox.print('P L A C E', place)
title = place.id[0] == '_' ? 'Add Place' : 'Remove Place'; title = place.id[0] == '_' ? 'Add Place' : 'Remove Place';
} else { } else {
title = 'New Place'; title = 'New Place';
@ -10072,6 +10095,17 @@ requires
place.editing && place.undo(); place.editing && place.undo();
} }
function updateFormElements() {
var width = that.width();
self.$zoomInput && constructZoomInput();
self.$placeNameInput.options({
width: Math.floor((width - 112) / 2)
});
self.$placeGeonameInput.options({
width: Math.ceil((width - 112) / 2)
});
}
function zoom(z) { function zoom(z) {
self.map.setZoom(self.map.getZoom() + z); self.map.setZoom(self.map.getZoom() + z);
} }
@ -10099,9 +10133,9 @@ requires
} }
self.onChange = function(key, value) { self.onChange = function(key, value) {
if (key == 'height' || key == 'width') { /*if (key == 'height' || key == 'width') {
resizeMap(); resizeMap();
} else if (key == 'places') { } else */if (key == 'places') {
loadPlaces(); loadPlaces();
} else if (key == 'selected') { } else if (key == 'selected') {
selectPlace(value); selectPlace(value);
@ -10147,6 +10181,25 @@ requires
}; };
that.resizeMap = function() { that.resizeMap = function() {
/*
Ox.print('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);
*/
/*
Ox.print('Ox.Map.resizeMap()'); Ox.print('Ox.Map.resizeMap()');
var center = self.map.getCenter(); var center = self.map.getCenter();
self.options.height = that.$element.height(); self.options.height = that.$element.height();
@ -10161,6 +10214,9 @@ requires
self.options.zoombar && self.$zoomInput.options({ self.options.zoombar && self.$zoomInput.options({
size: self.options.width size: self.options.width
}); });
*/
updateFormElements();
google.maps.event.trigger(self.map, 'resize');
return that; return that;
} }
@ -10204,7 +10260,6 @@ requires
update(); update();
function update() { function update() {
Ox.print('PLACE UPDATE', that.marker);
that.points = { that.points = {
ne: new google.maps.LatLng(that.north, that.east), ne: new google.maps.LatLng(that.north, that.east),
sw: new google.maps.LatLng(that.south, that.west) sw: new google.maps.LatLng(that.south, that.west)
@ -10248,7 +10303,7 @@ requires
} }
that.add = function() { that.add = function() {
Ox.print('MapPlace add', that) //Ox.print('MapPlace add', that)
that.visible = true; that.visible = true;
that.marker.add(); that.marker.add();
return that; return that;
@ -10292,7 +10347,6 @@ requires
} }
that.remove = function() { that.remove = function() {
Ox.print('MapPlace remove', that)
that.editing && that.submit(); that.editing && that.submit();
that.selected && that.deselect(); that.selected && that.deselect();
that.visible = false; that.visible = false;
@ -10310,7 +10364,6 @@ requires
that.submit = function() { that.submit = function() {
if (editable()) { if (editable()) {
Ox.print('submit')
that.editing = false; that.editing = false;
that.marker.update(); that.marker.update();
that.rectangle.deselect(); that.rectangle.deselect();
@ -10437,7 +10490,7 @@ requires
} }
that.add = function() { that.add = function() {
Ox.print('MapMarker add', that) //Ox.print('MapMarker add', that)
that.marker.setMap(that.map.map); that.marker.setMap(that.map.map);
google.maps.event.addListener(that.marker, 'click', click); google.maps.event.addListener(that.marker, 'click', click);
return that; return that;

17
demos/map/js/map.js
View file

@ -60,6 +60,9 @@ $(function() {
zoombar: true zoombar: true
}) })
.bindEvent({ .bindEvent({
resize: function(event, data) {
map.resizeMap();
},
selectplace: function(event, data) { selectplace: function(event, data) {
Ox.print('DATA', data) Ox.print('DATA', data)
panel.replaceElement(1, list = new Ox.TreeList({ panel.replaceElement(1, list = new Ox.TreeList({
@ -83,7 +86,8 @@ $(function() {
} }
})); }));
} }
}), });
list = new Ox.TreeList({ list = new Ox.TreeList({
data: [], data: [],
width: 256 width: 256
@ -95,6 +99,8 @@ $(function() {
}, },
{ {
element: list, element: list,
resizable: true,
resize: [128, 256, 384],
size: 256 size: 256
} }
], ],
@ -102,14 +108,21 @@ $(function() {
}) })
.appendTo($('body')); .appendTo($('body'));
map.gainFocus();
//setTimeout(function() {
//map.appendTo($('body'));
map.gainFocus();
//}, 2000)
/*
$(window).resize(function() { $(window).resize(function() {
map.options({ map.options({
height: window.innerHeight, height: window.innerHeight,
width: window.innerWidth - 256 width: window.innerWidth - 256
}); });
}); });
*/
}); });