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

improving listmap

Browse source
This commit is contained in:
rolux 2011-05-22 14:39:57 +02:00
parent c86c7d598d
commit 5915acd72c
12 changed files with 152 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
demos/listmap2/js/listmap.js
View file

@ -9,7 +9,7 @@ Ox.load('Geo', function() {
var listmap = new Ox.ListMap({
height: window.innerHeight,
places: data.map(function(city) {
places: data.map(function(city, id) {
var countryCode = city.country_code == 'XK' ? 'RS-KO' : city.country_code,
marker = city.population > 20000000 ? {size: 24, color: [255, 0, 0]} :
city.population > 10000000 ? {size: 22, color: [255, 32, 0]} :
@ -28,6 +28,7 @@ Ox.load('Geo', function() {
editable: true,
flag: countryCode,
geoname: city.name + ', ' + Ox.getCountryByCode(countryCode).name,
id: id,
markerColor: marker.color,
markerSize: marker.size,
name: city.name,

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

@ -266,8 +266,8 @@ Document
-webkit-user-select: text;
}
.OxDocument div {
border-style: solid;
border-width: 0;
border-style: solid;
//font-size: 12px;
line-height: 15px;
-moz-user-select: text;
@ -421,6 +421,8 @@ OxButton
--------------------------------------------------------------------------------
*/
.OxButton {
border-width: 1px;
border-style: solid;
text-align: center;
}
.OxButton.OxSymbol,
@ -534,6 +536,8 @@ div.OxCheckbox {
-webkit-border-radius: 8px;
}
input.OxCheckbox {
border-width: 1px;
border-style: solid;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
@ -553,6 +557,7 @@ input.OxCheckbox {
OxInput
--------------------------------------------------------------------------------
*/
div.OxInput {
height: 16px;
}
@ -573,6 +578,8 @@ div.OxInput > .OxInputLabel {
cursor: default;
}
input.OxInput {
border-width: 1px;
border-style: solid;
float: left;
}
/*
@ -593,7 +600,8 @@ OxLabel
*/
.OxLabel {
height: 14px;
border: 1px;
border-width: 1px;
border-style: solid;
padding: 0 6px 0 6px;
text-overflow: ellipsis;
cursor: default;
@ -648,6 +656,8 @@ OxRange
}
.OxRange > .OxTrack {
float: right;
border-width: 1px;
border-style: solid;
height: 14px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
@ -693,8 +703,10 @@ OxRange
OxSelect
--------------------------------------------------------------------------------
*/
.OxSelect.OxMedium {
.OxSelect {
height: 14px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
@ -706,6 +718,7 @@ OxSelect
float: left;
height: 14px;
padding-left: 6px;
border-width: 1px;
text-align: left;
text-overflow: ellipsis;
cursor: default;
@ -997,6 +1010,7 @@ Lists
width: 11px;
height: 16px;
border-width: 0 1px 0 0;
border-style: solid;
background: rgba(0, 0, 0, 0);
font-size: 11px;
text-align: center;
@ -1092,15 +1106,19 @@ Maps
border-radius: 0;
}
.OxMapButton {
input[type=image].OxMapButton {
position: absolute;
width: 12px;
height: 12px;
border: 2px solid rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.5);
width: 10px;
height: 10px;
padding: 1px;
border-width: 2px;
}
.OxMapLabel {
position: absolute;
height: 12px;
padding: 0 5px 0 5px;
font-size: 10px;
border-width: 2px;
}
/*

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

@ -131,7 +131,12 @@ Ox.ArrayInput = function(options, self) {
}
self.setOption = function(key, value) {
if (key == 'width') {
if (key == 'value') {
return Ox.map(self.$input, function($input) {
var value = $input.value();
return value === '' ? null : value;
});
} else if (key == 'width') {
setWidths();
}
}

8
source/Ox.UI/js/Form/Ox.Form.js
View file

@ -65,7 +65,7 @@ Ox.Form = function(options, self) {
});
});
function getItemPositionById(id) {
function getItemIndexById(id) {
return self.itemIds.indexOf(id);
}
@ -121,8 +121,10 @@ Ox.Form = function(options, self) {
//Ox.print('VALUES', values)
return values;
} else {
Ox.each(arguments[0], function(val, key) {
Ox.forEach(arguments[0], function(value, key) {
var index = getItemIndexById(key);
index > -1 && Ox.print(key, value)
index > -1 && self.options.items[index].options({value: value});
});
return that;
}

6
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -789,8 +789,10 @@ Ox.Input = function(options, self) {
} else if (key == 'placeholder') {
setPlaceholder();
} else if (key == 'value') {
val = self.$input.val(); // fixme: ??
self.$input.val(value);
if (self.options.type == 'float' && self.options.decimals) {
self.options.value = self.options.value.toFixed(self.options.decimals);
}
self.$input.val(self.options.value);
setPlaceholder();
} else if (key == 'width') {
that.css({width: self.options.width + 'px'});

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

@ -26,7 +26,7 @@ Ox.Select = function(options, self) {
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
var self = self || {},
that = new Ox.Element({
tooltip: options.tooltip || {}
tooltip: options.tooltip || ''
}, self) // fixme: do we use 'div', or {}, or '', by default?
.defaults({
id: '',

38
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -275,22 +275,32 @@ Ox.ListMap = function(options, self) {
values: [],
width: 240
}),
], ['Latitude', 'Longitude', 'South', 'West', 'North', 'East'].map(function(v) {
var key = (
], ['South', 'West', 'North', 'East', 'Latitude', 'Longitude'].map(function(v) {
var id = (
v == 'Latitude' ? 'lat' : v == 'Longitude' ? 'lng' : v
).toLowerCase(),
max = ['Latitude', 'South', 'North'].indexOf(v) > -1 ? Ox.MAX_LATITUDE : 180;
return Ox.Input({
decimals: 8,
disabled: ['Latitude', 'Longitude'].indexOf(v) > -1,
id: id,
label: v,
labelWidth: 80,
min: -max,
max: max,
type: 'float',
value: self.options.places[0][key].toFixed(8),
width: 240
});
}));
}), [
Ox.Input({
disabled: true,
id: 'size',
label: 'Size',
labelWidth: 80,
textAlign: 'right',
width: 240
})
]);
self.$placeForm = Ox.Form({
items: self.$placeFormItems,
@ -348,7 +358,7 @@ Ox.ListMap = function(options, self) {
findPlaceholder: 'Find on Map',
height: self.options.height,
places: places,
//statusbar: true,
statusbar: true,
toolbar: true,
width: self.options.width - 514,//self.mapResize[1],
zoombar: true
@ -357,6 +367,11 @@ Ox.ListMap = function(options, self) {
addplace: function(event, data) {
that.triggerEvent('addplace', data);
},
changeplace: function(event, data) {
self.$placeForm.values(Ox.map(data, function(val, key) {
return key == 'size' ? Ox.formatArea(val) : val;
}));
},
geocode: function(event, data) {
that.triggerEvent('geocode', data);
},
@ -409,7 +424,17 @@ Ox.ListMap = function(options, self) {
}
],
orientation: 'vertical'
})
.bindEvent({
// fixme: pass width through form
resize: function(foo, size) {
self.$placeFormItems.forEach(function($item) {
$item.options({width: size - 16});
});
}
}),
resizable: true,
resize: [128, 256, 384],
size: 256
}
],
@ -445,6 +470,9 @@ Ox.ListMap = function(options, self) {
data.id && data.id[0] != '_' && self.$list.options({
selected: data.id ? [data.id] : []
});
self.$placeForm.values(Ox.map(data, function(val, key) {
return key == 'size' ? Ox.formatArea(val) : val;
}));
}
function toFixed(val) {

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

@ -15,7 +15,6 @@ Ox.Map <function> Basic map object
clickable <b|false> If true, clicking on the map finds a place
editable <b|false> If true, places are editable
findPlaceholder <s|"Find"> Placeholder text for the find input element
labels <b|false> If true, show labels on the map
markers <n|100> Maximum number of markers to be displayed
places <[o]|[]> Array of place objects
countryCode <s> ISO 3166 country code
@ -32,6 +31,8 @@ Ox.Map <function> Basic map object
type <s> Type (like "city" or "country")
west <n> Longitude of the western boundary in degrees
selected <s|""> Id of the selected place
showControls <b|false> If true, show controls
showLabels <b|false> If true, show labels on the map
statusbar <b|false> If true, the map has a statusbar
toolbar <b|false> If true, the map has a toolbar
self <o|{}> Shared private variable
@ -93,10 +94,11 @@ Ox.Map = function(options, self) {
clickable: false,
editable: false,
findPlaceholder: 'Find',
labels: false,
markers: 100,
places: [],
selected: null,
showControls: false,
showLabels: false,
statusbar: false,
toolbar: false,
zoombar: false
@ -194,6 +196,21 @@ Ox.Map = function(options, self) {
size: 24
})
.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,
title: 'Options...',
width: 96
})
.css({float: 'left', margin: '4px'})
.appendTo(self.$toolbar);
/*
self.$labelsButton = new Ox.Checkbox({
title: 'Labels',
width: 64
@ -203,6 +220,7 @@ Ox.Map = function(options, self) {
change: toggleLabels
})
.appendTo(self.$toolbar)
*/
self.$findInput = new Ox.Input({
clear: true,
placeholder: self.options.findPlaceholder,
@ -314,16 +332,18 @@ Ox.Map = function(options, self) {
top: '24px',
})
};
Ox.forEach(self.$navigationButtons, function($button) {
$button.attr({
src: $button.attr('src').replace('/classic/', '/modern/')
});
});
self.$scaleLabel = new Ox.Label({
textAlign: 'center',
title: '...'
})
.addClass('OxMapLabel')
.css({
right: '4px',
top: '4px'
});
.css({right: '4px', top: '4px'});
if (!window.googleCallback) {
window.googleCallback = function() {
@ -490,7 +510,7 @@ Ox.Map = function(options, self) {
}
function getMapType() {
return self.options.labels ? 'HYBRID' : 'SATELLITE'
return self.options.showLabels ? 'HYBRID' : 'SATELLITE'
}
function getMaxZoom(point, callback) {
@ -892,7 +912,7 @@ Ox.Map = function(options, self) {
}
function toggleLabels() {
self.options.labels = !self.options.labels
self.options.showLabels = !self.options.showLabels
Ox.print('toggle', getMapType())
self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
/*

1
source/Ox.UI/js/Map/Ox.MapPlace.js
View file

@ -186,6 +186,7 @@ Ox.MapPlace = function(options) {
@*/
that.update = function() {
update();
that.map.triggerEvent('changeplace', that);
return that;
};

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

@ -86,12 +86,12 @@ Forms
.OxThemeClassic textarea,
.OxThemeClassic .OxLabel,
.OxThemeClassic .OxTrack {
border: 1px solid rgb(176, 176, 176);
border-color: rgb(176, 176, 176);
//border: 1px solid rgb(160, 160, 160);
color: rgb(64, 64, 64);
}
.OxThemeClassic .OxSelect {
border: 1px solid rgb(176, 176, 176);
border-color: rgb(176, 176, 176);
}
.OxThemeClassic .OxSelect > .OxTitle {
color: rgb(64, 64, 64);
@ -290,6 +290,23 @@ Lists
background: rgb(232, 232, 232);
}
/*
================================================================================
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);
}
/*
================================================================================
Menus

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

@ -117,11 +117,11 @@ Forms
.OxThemeModern .OxLabel,
.OxThemeModern .OxTrack {
//border: 1px solid rgb(80, 80, 80);
border: 1px solid rgb(48, 48, 48);
border-color: rgb(48, 48, 48);
color: rgb(192, 192, 192);
}
.OxThemeModern .OxSelect {
border: 1px solid rgb(48, 48, 48);
border-color: rgb(48, 48, 48);
}
.OxThemeModern .OxSelect > .OxTitle {
color: rgb(192, 192, 192);
@ -192,7 +192,7 @@ Forms
color: rgb(96, 96, 96)
}
.OxThemeModern .OxLabel {
border: 1px solid rgb(48, 48, 48);
border-color: rgb(48, 48, 48);
background: rgb(80, 80, 80);
color: rgb(192, 192, 192);
}
@ -297,6 +297,22 @@ Lists
}
/*
================================================================================
Maps
================================================================================
*/
.OxThemeModern .OxMapButton {
border-color: rgb(255, 255, 255);
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);
}
/*
================================================================================
Menus

13
source/Ox.js
View file

@ -2043,7 +2043,9 @@ Ox.formatArea <f> Formats a number of meters as square kilometers
@*/
Ox.formatArea = function(num, dec) {
return Ox.formatNumber(Ox.round(num / 1000000, dec)) + ' km\u00B2';
var km = num >= 1000000;
return Ox.formatNumber((km ? num / 1000000 : num).toPrecision(8)) +
' ' + (km ? 'k' : '') + 'm\u00B2';
}
/*@
@ -2271,14 +2273,15 @@ Ox.formatNumber <f> Formats a number with thousands separators
"123,456,789.000"
> Ox.formatNumber(-2000000 / 3, 3)
"-666,666.667"
> Ox.formatNumber(666666.666)
> Ox.formatNumber(666666.666, 0)
"666,667"
@*/
Ox.formatNumber = function(num, dec) {
// fixme: specify decimal and thousands separators
var str = Math.abs(num).toFixed(dec || 0),
spl = str.split('.'),
arr = [];
var arr = [],
abs = Math.abs(num),
str = Ox.isUndefined(dec) ? abs.toString() : abs.toFixed(dec),
spl = str.split('.');
while (spl[0]) {
arr.unshift(spl[0].substr(-3));
spl[0] = spl[0].substr(0, spl[0].length - 3);