improving listmap

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,

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;
+    width: 10px;
-    height: 12px;
+    height: 10px;
-    border: 2px solid rgb(255, 255, 255);
+    padding: 1px;
-    background: rgba(0, 0, 0, 0.5);
+    border-width: 2px;
 }
 .OxMapLabel {
     position: absolute;
+    height: 12px;
+    padding: 0 5px 0 5px;
+    font-size: 10px;
+    border-width: 2px;
 }
 
 /*

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();
         }
     }

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;
         }

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: ??
+            if (self.options.type == 'float' && self.options.decimals) {
-            self.$input.val(value);
+                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'});

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: '',

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) {
+    ], ['South', 'West', 'North', 'East', 'Latitude', 'Longitude'].map(function(v) {
-        var key = (
+        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) {

source/Ox.UI/js/Map/Ox.Map.js

@@ -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({
+        .css({right: '4px', top: '4px'});
-            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()]);
         /*

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;
     };
     

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

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

source/Ox.js

@@ -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),
+    var arr = [],
-        spl = str.split('.'),
+        abs = Math.abs(num),
-        arr = [];
+        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);