diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index f630e475..5a2a7258 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -1276,40 +1276,69 @@ Maps border-radius: 0; } -.OxMap .OxButton.OxMapControl { +.OxMap .OxMapControl, +.OxMap .OxPlaceControl { position: absolute; + border-width: 2px; +} +.OxMap .OxMapControl.OxButton, +.OxMap .OxPlaceControl.OxButton { width: 10px; height: 10px; padding: 1px; - border-width: 2px; } -.OxMap .OxButton.OxMapControl.OxMapButtonCenter { +.OxMap .OxMapControl.OxLabel, +.OxMap .OxPlaceControl.OxLabel { + height: 12px; + font-size: 10px; +} +.OxMap .OxMapControl.OxMapButtonCenter { left: 24px; top: 24px; } -.OxMap .OxButton.OxMapControl.OxMapButtonEast { +.OxMap .OxMapControl.OxMapButtonEast { left: 44px; top: 24px; } -.OxMap .OxButton.OxMapControl.OxMapButtonNorth { +.OxMap .OxMapControl.OxMapButtonNorth { left: 24px; top: 4px; } -.OxMap .OxButton.OxMapControl.OxMapButtonSouth { +.OxMap .OxMapControl.OxMapButtonSouth { left: 24px; top: 44px; } -.OxMap .OxButton.OxMapControl.OxMapButtonWest { +.OxMap .OxMapControl.OxMapButtonWest { left: 4px; top: 24px; } -.OxMap .OxLabel.OxMapControl { - position: absolute; +.OxMap .OxLabel.OxMapControl.OxMapScale { right: 4px; + bottom: 16px; +} + +.OxMap .OxPlaceControl.OxPlaceFlag { top: 4px; + right: 180px; + width: 12px; height: 12px; - font-size: 10px; - border-width: 2px; + border: 2px solid rgb(192, 192, 192); + border-radius: 8px; +} +.OxMap .OxPlaceControl.OxPlaceFlag > img { + width: 12px; + height: 12px; + border-radius: 6px; +} +.OxMap .OxPlaceControl.OxPlaceName { + top: 4px; + right: 24px; + width: 136px; + text-overflow: ellipsis; +} +.OxMap .OxPlaceControl.OxPlaceDeselectButton { + top: 4px; + right: 4px; } .OxFlag { diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index e7012ec2..cb9a6ed7 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -148,15 +148,18 @@ Ox.Select = function(options, self) { function changeMenu(data) { //Ox.print('clickMenu: ', self.options.id, data) - self.checked = self.optionGroup.checked(); - self.options.value = data.checked[0].id; - self.$title && self.$title.html( - self.options.title ? self.options.title : - data.checked[0].title - ); - that.triggerEvent('change', { - selected: data.checked - }); + if (self.options.selectable) { + self.checked = self.optionGroup.checked(); + self.options.value = data.checked[0].id; + self.$title && self.$title.html( + self.options.title ? self.options.title : data.checked[0].title + ); + that.triggerEvent('change', { + selected: data.checked + }); + } else { + that.triggerEvent('click', data); + } } function hideMenu() { diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 74925e9d..cbea6d6e 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -331,7 +331,7 @@ Ox.Map = function(options, self) { } self.$controls = { - 'center': Ox.Button({ + center: Ox.Button({ title: 'center', type: 'image' }) @@ -344,7 +344,7 @@ Ox.Map = function(options, self) { zoomToPlace(); } }), - 'east': Ox.Button({ + east: Ox.Button({ title: 'right', type: 'image' }) @@ -357,7 +357,7 @@ Ox.Map = function(options, self) { pan(2, 0); } }), - 'north': Ox.Button({ + north: Ox.Button({ title: 'up', type: 'image' }) @@ -370,7 +370,7 @@ Ox.Map = function(options, self) { pan(0, -2); } }), - 'south': Ox.Button({ + south: Ox.Button({ title: 'down', type: 'image' }) @@ -383,7 +383,7 @@ Ox.Map = function(options, self) { pan(0, 2); } }), - 'west': Ox.Button({ + west: Ox.Button({ title: 'left', type: 'image' }) @@ -396,16 +396,45 @@ Ox.Map = function(options, self) { pan(-2, 0); } }), - 'scale': Ox.Label({ - textAlign: 'center', - title: '...' // fixme ??? + scale: Ox.Label({ + textAlign: 'center' }) - .addClass('OxMapControl') + .addClass('OxMapControl OxMapScale') }; !self.options.showControls && Ox.forEach(self.$controls, function($control) { $control.css({opacity: 0}).hide(); }); + self.$placeControls = { + flag: Ox.Element() + .addClass('OxPlaceControl OxPlaceFlag'), + name: Ox.Label({ + textAlign: 'center' + }) + .addClass('OxPlaceControl OxPlaceName') + .bindEvent({ + singleclick: function() { + panToPlace(); + }, + doubleclick: function() { + zoomToPlace(); + } + }), + deselectButton: Ox.Button({ + title: 'close', + type: 'image', + }) + .addClass('OxPlaceControl OxPlaceDeselectButton') + .bindEvent({ + click: function() { + selectPlace(null); + } + }) + } + Ox.forEach(self.$placeControls, function($placeControl) { + $placeControl.css({opacity: 0}).hide(); + }); + if (!self.isAsync) { self.options.places.forEach(function(place) { if (Ox.isUndefined(place.id)) { @@ -808,6 +837,9 @@ Ox.Map = function(options, self) { // fixme: can add earlier, use don't replace map contents option Ox.forEach(self.$controls, function($control) { $control.appendTo(self.$map); + }); + Ox.forEach(self.$placeControls, function($placeControl) { + $placeControl.appendTo(self.$map); }); } } @@ -1117,12 +1149,32 @@ Ox.Map = function(options, self) { function select() { place && place.select(); self.options.selected = id; + setPlaceControls(place); setStatus(); that.triggerEvent('selectplace', place); // FIXME: all these events should rather pass {place: place} } }; + function setPlaceControls(place) { + var $placeControls = that.$element.find('.OxPlaceControl'), + isVisible = self.$placeControls.name.is(':visible'); + if (place) { + self.$placeControls.flag.empty().append( + $('') + .attr({ + src: Ox.getImageByGeoname('icon', 16, place.geoname) + }) + ).show(); + self.$placeControls.name.options({title: place.name}) + !isVisible && $placeControls.show().animate({opacity: 1}, 250); + } else { + isVisible && $placeControls.animate({opacity: 0}, 250, function() { + $placeControls.hide(); + }); + } + } + function setScale() { var metersPerPixel = getMetersPerPixel(); Ox.forEach(self.scaleMeters, function(meters) { diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index e300de89..30ecc80b 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -465,7 +465,8 @@ Maps ================================================================================ */ -.OxThemeClassic .OxMapControl { +.OxThemeClassic .OxMapControl, +.OxThemeClassic .OxPlaceControl { border-color: rgb(64, 64, 64); background: rgba(255, 255, 255, 0.75); color: rgb(64, 64, 64); diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index f76bfafb..65a24c4f 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -462,7 +462,8 @@ Maps ================================================================================ */ -.OxThemeModern .OxMapControl { +.OxThemeModern .OxMapControl, +.OxThemeModern .OxPlaceControl { border-color: rgb(192, 192, 192); background: rgba(0, 0, 0, 0.5); color: rgb(192, 192, 192);