From 5915acd72c47b38566f86cf34858c147ca559863 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 22 May 2011 14:39:57 +0200 Subject: [PATCH] improving listmap --- demos/listmap2/js/listmap.js | 3 +- source/Ox.UI/css/Ox.UI.css | 34 +++++++++++++----- source/Ox.UI/js/Form/Ox.ArrayInput.js | 7 +++- source/Ox.UI/js/Form/Ox.Form.js | 8 +++-- source/Ox.UI/js/Form/Ox.Input.js | 6 ++-- source/Ox.UI/js/Form/Ox.Select.js | 2 +- source/Ox.UI/js/Map/Ox.ListMap.js | 38 ++++++++++++++++++--- source/Ox.UI/js/Map/Ox.Map.js | 36 ++++++++++++++----- source/Ox.UI/js/Map/Ox.MapPlace.js | 1 + source/Ox.UI/themes/classic/css/classic.css | 21 ++++++++++-- source/Ox.UI/themes/modern/css/modern.css | 22 ++++++++++-- source/Ox.js | 13 ++++--- 12 files changed, 152 insertions(+), 39 deletions(-) diff --git a/demos/listmap2/js/listmap.js b/demos/listmap2/js/listmap.js index 2c268e9f..bef5ed67 100644 --- a/demos/listmap2/js/listmap.js +++ b/demos/listmap2/js/listmap.js @@ -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, diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 10d7c7d2..42bbe7e3 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -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; } /* diff --git a/source/Ox.UI/js/Form/Ox.ArrayInput.js b/source/Ox.UI/js/Form/Ox.ArrayInput.js index cf2a481d..e6beb960 100644 --- a/source/Ox.UI/js/Form/Ox.ArrayInput.js +++ b/source/Ox.UI/js/Form/Ox.ArrayInput.js @@ -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(); } } diff --git a/source/Ox.UI/js/Form/Ox.Form.js b/source/Ox.UI/js/Form/Ox.Form.js index a4deb3c6..4245f165 100644 --- a/source/Ox.UI/js/Form/Ox.Form.js +++ b/source/Ox.UI/js/Form/Ox.Form.js @@ -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; } diff --git a/source/Ox.UI/js/Form/Ox.Input.js b/source/Ox.UI/js/Form/Ox.Input.js index 23ff73b0..b97a0339 100644 --- a/source/Ox.UI/js/Form/Ox.Input.js +++ b/source/Ox.UI/js/Form/Ox.Input.js @@ -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'}); diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index 92a6140c..aad6a936 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -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: '', diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index 312dec03..948fa358 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/source/Ox.UI/js/Map/Ox.ListMap.js @@ -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) { diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 2b84601f..1e6653ea 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -15,7 +15,6 @@ Ox.Map Basic map object clickable If true, clicking on the map finds a place editable If true, places are editable findPlaceholder Placeholder text for the find input element - labels If true, show labels on the map markers Maximum number of markers to be displayed places <[o]|[]> Array of place objects countryCode ISO 3166 country code @@ -32,6 +31,8 @@ Ox.Map Basic map object type Type (like "city" or "country") west Longitude of the western boundary in degrees selected Id of the selected place + showControls If true, show controls + showLabels If true, show labels on the map statusbar If true, the map has a statusbar toolbar If true, the map has a toolbar self 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()]); /* diff --git a/source/Ox.UI/js/Map/Ox.MapPlace.js b/source/Ox.UI/js/Map/Ox.MapPlace.js index c669221c..56610da9 100644 --- a/source/Ox.UI/js/Map/Ox.MapPlace.js +++ b/source/Ox.UI/js/Map/Ox.MapPlace.js @@ -186,6 +186,7 @@ Ox.MapPlace = function(options) { @*/ that.update = function() { update(); + that.map.triggerEvent('changeplace', that); return that; }; diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 350be26d..ece6123c 100644 --- a/source/Ox.UI/themes/classic/css/classic.css +++ b/source/Ox.UI/themes/classic/css/classic.css @@ -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 diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 2828c1f5..b6ff4f2c 100644 --- a/source/Ox.UI/themes/modern/css/modern.css +++ b/source/Ox.UI/themes/modern/css/modern.css @@ -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 diff --git a/source/Ox.js b/source/Ox.js index c8d7d257..a24cac17 100644 --- a/source/Ox.js +++ b/source/Ox.js @@ -2043,7 +2043,9 @@ Ox.formatArea 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 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);