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

make map controls work

Browse source
This commit is contained in:
rlx 2011-10-04 02:26:24 +00:00
parent bbef38f0a9
commit df3ea541b3
14 changed files with 177 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
source/Ox.Geo/json/Ox.Geo.json
View file

@ -4438,7 +4438,7 @@
"dissolved": [],
"east": 7.2271405,
"flagURL": "http://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg",
"googleName": "Netherlands",
"googleName": "The Netherlands",
"imdbCode": "nl",
"imdbName": "Netherlands",
"languages": [

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

@ -1255,15 +1255,37 @@ Maps
border-radius: 0;
}
input[type=image].OxMapButton {
.OxMap .OxButton.OxMapControl {
position: absolute;
width: 10px;
height: 10px;
padding: 1px;
border-width: 2px;
}
.OxMapLabel {
.OxMap .OxButton.OxMapControl.OxMapButtonCenter {
left: 24px;
top: 24px;
}
.OxMap .OxButton.OxMapControl.OxMapButtonEast {
left: 44px;
top: 24px;
}
.OxMap .OxButton.OxMapControl.OxMapButtonNorth {
left: 24px;
top: 4px;
}
.OxMap .OxButton.OxMapControl.OxMapButtonSouth {
left: 24px;
top: 44px;
}
.OxMap .OxButton.OxMapControl.OxMapButtonWest {
left: 4px;
top: 24px;
}
.OxMap .OxLabel.OxMapControl {
position: absolute;
right: 4px;
top: 4px;
height: 12px;
font-size: 10px;
border-width: 2px;

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

@ -105,8 +105,8 @@ Ox.Select = function(options, self) {
)) + 'px'
})
.html(
self.options.title ? self.options.title :
self.options.items[self.checked[0]].title
self.options.title ? self.options.title
: self.options.items[self.checked[0]].title
)
.click(showMenu)
.appendTo(that.$element);

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

@ -118,7 +118,7 @@ Ox.Map = function(options, self) {
})
.bindEvent({
key_0: function() {
that.panToPlace()
panToPlace()
},
key_down: function() {
pan(0, 1);
@ -158,7 +158,7 @@ Ox.Map = function(options, self) {
pan(0, 2);
},
key_shift_0: function() {
that.zoomToPlace();
zoomToPlace();
},
key_shift_equal: function() {
zoom(2);
@ -211,18 +211,41 @@ Ox.Map = function(options, self) {
})
.appendTo(that);
self.$select = Ox.Select({
items: [
{id: 'new Place', title: 'New Place...', keyboard: 'n'},
{},
{id: 'toggleLabels', title: 'Show Labels', keyboard: 'l', checked: self.options.showLabels},
{id: 'toggleControls', title: 'Show Controls', keyboard: 'c', checked: self.options.showControls},
],
min: 0,
max: 2,
items: Ox.merge(
self.options.editable
? [{id: 'new Place', title: 'New Place...', keyboard: 'n'}, {}]
: [],
[
{
id: 'toggleLabels',
title: self.options.showLabels
? ['Hide Labels', 'Show Labels']
: ['Show Labels', 'Hide Labels'],
keyboard: 'l'
},
{
id: 'toggleControls',
title: self.options.showLabels
? ['Hide Controls', 'Show Controls']
: ['Show Controls', 'Hide Controls'],
keyboard: 'c'
}
]
),
selectable: false,
title: 'Options...',
width: 96
})
.css({float: 'left', margin: '4px'})
.bindEvent({
click: function(data) {
if (data.id == 'toggleLabels') {
toggleLabels();
} else if (data.id == 'toggleControls') {
toggleControls();
}
}
})
.appendTo(self.$toolbar);
/*
self.$labelsButton = Ox.Checkbox({
@ -306,66 +329,82 @@ Ox.Map = function(options, self) {
.appendTo(self.$statusbar);
}
self.$navigationButtons = {
self.$controls = {
'center': Ox.Button({
title: 'close',
title: 'center',
type: 'image'
})
.addClass('OxMapButton')
.css({
left: '24px',
top: '24px'
.addClass('OxMapControl OxMapButtonCenter')
.bindEvent({
singleclick: function() {
panToPlace();
},
doubleclick: function() {
zoomToPlace();
}
}),
'east': Ox.Button({
title: 'right',
type: 'image'
})
.addClass('OxMapButton')
.css({
left: '44px',
top: '24px',
.addClass('OxMapControl OxMapButtonEast')
.bindEvent({
singleclick: function() {
pan(1, 0);
},
doubleclick: function() {
pan(2, 0);
}
}),
'north': Ox.Button({
title: 'up',
type: 'image'
})
.addClass('OxMapButton')
.css({
left: '24px',
top: '4px',
.addClass('OxMapControl OxMapButtonNorth')
.bindEvent({
singleclick: function() {
pan(0, -1);
},
doubleclick: function() {
pan(0, -2);
}
}),
'south': Ox.Button({
title: 'down',
type: 'image'
})
.addClass('OxMapButton')
.css({
left: '24px',
top: '44px',
.addClass('OxMapControl OxMapButtonSouth')
.bindEvent({
singleclick: function() {
pan(0, 1);
},
doubleclick: function() {
pan(0, 2);
}
}),
'west': Ox.Button({
title: 'left',
type: 'image'
})
.addClass('OxMapButton')
.css({
left: '4px',
top: '24px',
.addClass('OxMapControl OxMapButtonWest')
.bindEvent({
singleclick: function() {
pan(-1, 0);
},
doubleclick: function() {
pan(-2, 0);
}
}),
'scale': Ox.Label({
textAlign: 'center',
title: '...' // fixme ???
})
.addClass('OxMapControl')
};
Ox.forEach(self.$navigationButtons, function($button) {
$button.attr({
src: $button.attr('src').replace('/classic/', '/modern/')
});
!self.options.showControls && Ox.forEach(self.$controls, function($control) {
$control.css({opacity: 0}).hide();
});
self.$scaleLabel = Ox.Label({
textAlign: 'center',
title: '...' // fixme ???
})
.addClass('OxMapLabel')
.css({right: '4px', top: '4px'});
if (!self.isAsync) {
self.options.places.forEach(function(place) {
if (Ox.isUndefined(place.id)) {
@ -755,10 +794,9 @@ Ox.Map = function(options, self) {
function tilesLoaded() {
// fixme: can add earlier, use don't replace map contents option
Ox.forEach(self.$navigationButtons, function(button) {
button.appendTo(self.$map);
Ox.forEach(self.$controls, function($control) {
$control.appendTo(self.$map);
});
self.$scaleLabel.appendTo(self.$map);
}
}
@ -862,6 +900,11 @@ Ox.Map = function(options, self) {
self.map.panBy(x * self.$map.width() / 2, y * self.$map.height() / 2);
};
function panToPlace() {
var place = getSelectedPlace();
place && self.map.panTo(place.center);
}
function parseGeodata(data) {
var bounds = data.geometry.bounds || data.geometry.viewport,
northEast = bounds.getNorthEast(),
@ -1043,7 +1086,7 @@ Ox.Map = function(options, self) {
}, result.data.items[0])).add();
self.places.push(place);
select();
that.zoomToPlace();
zoomToPlace();
}
});
}
@ -1066,7 +1109,7 @@ Ox.Map = function(options, self) {
Ox.forEach(self.scaleMeters, function(meters) {
var scaleWidth = Math.round(meters / metersPerPixel);
if (scaleWidth <= self.options.width / 2 - 4) {
self.$scaleLabel
self.$controls.scale
.options({
title: '\u2190 ' + (
meters > 1000 ? Ox.formatNumber(meters / 1000) + ' k' : meters + ' '
@ -1123,16 +1166,28 @@ Ox.Map = function(options, self) {
});
}
function toggleLabels() {
self.options.showLabels = !self.options.showLabels
//Ox.print('toggle', getMapType())
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
/*
self.$labelsButton.options({
title: self.$labelsButton.options('title') == 'Show Labels' ?
'Hide Labels' : 'Show Labels'
function toggleControls() {
// fixme: that.find() doesn't work here
var $controls = that.$element.find('.OxMapControl');
self.options.showControls = !self.options.showControls;
if (self.options.showControls) {
$controls.show().animate({opacity: 1}, 250);
} else {
$controls.animate({opacity: 0}, 250, function() {
$controls.hide();
});
}
that.triggerEvent('togglecontrols', {
visible: self.options.showControls
});
}
function toggleLabels() {
self.options.showLabels = !self.options.showLabels;
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
that.triggerEvent('togglelabels', {
visible: self.options.showLabels
});
*/
}
function triggerGeocodeEvent(data) {
@ -1209,10 +1264,8 @@ Ox.Map = function(options, self) {
}
function zoomToPlace() {
Ox.print('zoomToPlace')
if (self.options.selected !== null) {
self.map.fitBounds(getPlaceById(self.options.selected).bounds);
}
var place = getSelectedPlace();
place && self.map.fitBounds(place.bounds);
}
self.setOption = function(key, value) {
@ -1276,9 +1329,7 @@ Ox.Map = function(options, self) {
};
that.panToPlace = function() {
Ox.print('panToPlace:', self.options.selected)
var place = getSelectedPlace();
place && self.map.panTo(place.center);
panToPlace();
return that;
};
@ -1348,9 +1399,7 @@ Ox.Map = function(options, self) {
}
that.zoomToPlace = function() {
Ox.print('zoomToPlace')
var place = getSelectedPlace();
place && self.map.fitBounds(place.bounds);
zoomToPlace();
return that;
};

2
source/Ox.UI/js/Menu/Ox.MenuItem.js
View file

@ -135,7 +135,7 @@ Ox.MenuItem = function(options, self) {
toggleTitle <f> toggleTitle
@*/
that.toggleTitle = function() {
that.options({title: self.options.title.reverse()});
that.options({title: Ox.clone(self.options.title).reverse()});
return that;
};

33
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -360,21 +360,24 @@ Ox.VideoEditor = function(options, self) {
});
self.$videoMenuButton = Ox.Select({
items: Ox.merge([
{id: 'toggleSize', title: 'Large Player', selected: self.options.playerSize == 'large', keyboard: 'shift +'},
{}
], self.resolutions, [
{},
{id: 'largeTimeline', title: 'Hide Large Timeline'},
{id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline'},
{},
{id: 'linkSelection', title: 'Link to Selection...'},
{id: 'embed', title: 'Embed Selection...'},
{id: 'downloadSelection', title: 'Download Selection...'},
{},
{id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
]),
items: Ox.merge(
[
{id: 'toggleSize', title: 'Large Player', selected: self.options.playerSize == 'large', keyboard: 'shift +'},
{}
],
self.resolutions,
[
{},
{id: 'largeTimeline', title: 'Hide Large Timeline'},
{id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline'},
{},
{id: 'linkSelection', title: 'Link to Selection...'},
{id: 'embed', title: 'Embed Selection...'},
{id: 'downloadSelection', title: 'Download Selection...'},
{},
{id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
]
),
selectable: false,
title: $('<img>').attr({
src: Ox.UI.getImageURL('symbolSet')

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

@ -443,14 +443,10 @@ Maps
================================================================================
*/
.OxThemeClassic .OxMapButton {
border-color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.5);
}
.OxThemeClassic .OxMapLabel {
border-color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.5);
color: rgb(255, 255, 255);
.OxThemeClassic .OxMapControl {
border-color: rgb(64, 64, 64);
background: rgba(255, 255, 255, 0.75);
color: rgb(64, 64, 64);
}
/*

11
source/Ox.UI/themes/classic/svg/symbolCenter.svg
View file

@ -1,10 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="translate(128, 128)">
<circle cx="0" cy="0" r="16" fill="#404040"/>
<rect x="-16" y="-16" width="32" height="32" fill="#404040"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#404040" transform="rotate(0)"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#404040" transform="rotate(90)"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#404040" transform="rotate(180)"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#404040" transform="rotate(270)"/>
</g>
</svg>
<circle cx="128" cy="128" r="80" fill="#404040"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 603 B

After

Width:  |  Height:  |  Size: 126 B

3
source/Ox.UI/themes/classic/svg/symbolRecord.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<circle cx="128" cy="128" r="80" fill="#404040"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 126 B

10
source/Ox.UI/themes/classic/svg/symbolZoom.svg
View file

@ -1,10 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="translate(128, 128)">
<circle cx="0" cy="0" r="16" fill="#404040"/>
<rect x="-16" y="-16" width="32" height="32" fill="#404040"/>
<polygon points="-128,-0 -64,-48 -64,48" fill="#404040" transform="rotate(0)"/>
<polygon points="-128,-0 -64,-48 -64,48" fill="#404040" transform="rotate(90)"/>
<polygon points="-128,-0 -64,-48 -64,48" fill="#404040" transform="rotate(180)"/>
<polygon points="-128,-0 -64,-48 -64,48" fill="#404040" transform="rotate(270)"/>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 603 B

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

@ -430,14 +430,10 @@ Maps
================================================================================
*/
.OxThemeModern .OxMapButton {
border-color: rgb(255, 255, 255);
.OxThemeModern .OxMapControl {
border-color: rgb(192, 192, 192);
background: rgba(0, 0, 0, 0.5);
}
.OxThemeModern .OxMapLabel {
border-color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.5);
color: rgb(255, 255, 255);
color: rgb(192, 192, 192);
}
/*

11
source/Ox.UI/themes/modern/svg/symbolCenter.svg
View file

@ -1,10 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="translate(128, 128)">
<circle cx="0" cy="0" r="16" fill="#C0C0C0"/>
<rect x="-16" y="-16" width="32" height="32" fill="#C0C0C0"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#C0C0C0" transform="rotate(0)"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#C0C0C0" transform="rotate(90)"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#C0C0C0" transform="rotate(180)"/>
<polygon points="-112,-48 -48,0 -112,48" fill="#C0C0C0" transform="rotate(270)"/>
</g>
</svg>
<circle cx="128" cy="128" r="80" fill="#C0C0C0"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 603 B

After

Width:  |  Height:  |  Size: 126 B

1
tools/geo/py/fix_json.py
View file

@ -1,5 +1,4 @@
import json
import ox
f = open('../json/countries.json')
data = json.loads(f.read())

1
tools/geo/py/geo.py
View file

@ -245,6 +245,7 @@ geo = {
'Kosovo': 'Kosova (Kosovo)',
'Macedonia': 'Former Yugoslav Republic of Macedonia',
'Myanmar': 'Burma',
'Netherlands': 'The Netherlands',
'Palestine': 'Palestinian Territories',
'Republic of the Congo': 'Congo',
'Sahrawi': 'Western Sahara',