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