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": [], "dissolved": [],
"east": 7.2271405, "east": 7.2271405,
"flagURL": "http://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg", "flagURL": "http://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg",
"googleName": "Netherlands", "googleName": "The Netherlands",
"imdbCode": "nl", "imdbCode": "nl",
"imdbName": "Netherlands", "imdbName": "Netherlands",
"languages": [ "languages": [

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

@ -1255,15 +1255,37 @@ Maps
border-radius: 0; border-radius: 0;
} }
input[type=image].OxMapButton { .OxMap .OxButton.OxMapControl {
position: absolute; position: absolute;
width: 10px; width: 10px;
height: 10px; height: 10px;
padding: 1px; padding: 1px;
border-width: 2px; 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; position: absolute;
right: 4px;
top: 4px;
height: 12px; height: 12px;
font-size: 10px; font-size: 10px;
border-width: 2px; border-width: 2px;

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

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

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

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

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

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

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"> <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="translate(128, 128)"> <circle cx="128" cy="128" r="80" fill="#404040"/>
<circle cx="0" cy="0" r="16" fill="#404040"/> </svg>
<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>
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 { .OxThemeModern .OxMapControl {
border-color: rgb(255, 255, 255); border-color: rgb(192, 192, 192);
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} color: rgb(192, 192, 192);
.OxThemeModern .OxMapLabel {
border-color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.5);
color: rgb(255, 255, 255);
} }
/* /*

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"> <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<g transform="translate(128, 128)"> <circle cx="128" cy="128" r="80" fill="#C0C0C0"/>
<circle cx="0" cy="0" r="16" fill="#C0C0C0"/> </svg>
<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>
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 json
import ox
f = open('../json/countries.json') f = open('../json/countries.json')
data = json.loads(f.read()) data = json.loads(f.read())

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

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