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

add place controls to map

Browse source
This commit is contained in:
rlx 2011-10-30 21:05:32 +00:00
parent 2555dbb4ea
commit 3c8430979b
5 changed files with 117 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
source/Ox.UI/css/Ox.UI.css
View file

@ -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 {

7
source/Ox.UI/js/Form/Ox.Select.js
View file

@ -148,15 +148,18 @@ Ox.Select = function(options, self) {
function changeMenu(data) {
//Ox.print('clickMenu: ', self.options.id, data)
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
self.options.title ? self.options.title : data.checked[0].title
);
that.triggerEvent('change', {
selected: data.checked
});
} else {
that.triggerEvent('click', data);
}
}
function hideMenu() {

70
source/Ox.UI/js/Map/Ox.Map.js
View file

@ -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(
$('<img>')
.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) {

3
source/Ox.UI/themes/classic/css/classic.css
View file

@ -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);

3
source/Ox.UI/themes/modern/css/modern.css
View file

@ -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);