add type field (still needs a better Ox.Select)

source/Ox.UI/css/Ox.UI.css

@@ -745,10 +745,15 @@ OxSelect
     -moz-border-radius: 8px;
     -webkit-border-radius: 8px;
 }
-.OxSelect.OxSelected {
+.OxSelect.OxSelected,
+.OxSelect.OxSelected > .OxLabel {
     -moz-border-radius: 8px 8px 0 0;
     -webkit-border-radius: 8px 8px 0 0;
 }
+.OxSelect > .OxLabel {
+    float: left;
+    margin: -1px;
+}
 .OxSelect > .OxTitle {
     float: left;
     height: 14px;

source/Ox.UI/js/Form/Ox.Select.js

@@ -27,7 +27,7 @@ Ox.Select = function(options, self) {
     var self = self || {},
         that = new Ox.Element({
                 tooltip: options.tooltip || ''
-            }, self) // fixme: do we use 'div', or {}, or '', by default?
+            }, self)
             .defaults({
                 id: '',
                 items: [],
@@ -74,11 +74,27 @@ Ox.Select = function(options, self) {
         self.checked = self.optionGroup.checked();
     }
 
+    if (self.options.label) {
+        self.$label = Ox.Label({
+            overlap: 'right',
+            textAlign: 'right',
+            title: self.options.label,
+            width: self.options.labelWidth
+        })
+        .click(function() {
+            // fixme: ???
+            // that.focus();
+        })
+        .appendTo(that);
+    };
+
     if (self.options.type == 'text') {
         self.$title = $('<div>')
             .addClass('OxTitle')
             .css({
-                width: (self.options.width - 22) + 'px'
+                width: (self.options.width - 22 - (
+                    self.options.label ? self.options.labelWidth : 0
+                )) + 'px'
             })
             .html(
                 self.options.title ? self.options.title :
@@ -152,7 +168,7 @@ Ox.Select = function(options, self) {
     }
 
     self.setOption = function(key, value) {
-        
+
     };
 
     /*@
@@ -174,7 +190,7 @@ Ox.Select = function(options, self) {
         id <s> item id
     @*/
     that.selectItem = function(id) {
-        //Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
+        Ox.print('selectItem', id, Ox.getObjectById(self.options.items, id).title)
         self.options.type == 'text' && self.$title.html(
             Ox.getObjectById(self.options.items, id).title[0] // fixme: title should not have become an array
         );
@@ -192,6 +208,19 @@ Ox.Select = function(options, self) {
     };
     */
 
+    that.value = function() {
+        if (arguments.length == 0) {
+            Ox.print('selected::', that.selected())
+            return that.selected()[0].id;
+        } else {
+            /*
+            Ox.print('ELSE');
+            that.selectItem(arguments[0]);
+            return that;
+            */
+        }
+    };
+
     return that;
 
 };

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

@@ -104,6 +104,16 @@ Ox.ListMap = function(options, self) {
             visible: true,
             width: 192
         },
+        {
+            format: function(value) {
+                return Ox.toTitleCase(value);
+            },
+            id: 'type',
+            operator: '+',
+            title: 'Type',
+            visible: true,
+            width: 64
+        },
         {
             align: 'right',
             format: toFixed,
@@ -181,7 +191,7 @@ Ox.ListMap = function(options, self) {
             operator: '-',
             title: 'Date Created',
             visible: false,
-            width: 192,
+            width: 128,
         },
         {
             format: function(value) {
@@ -191,7 +201,7 @@ Ox.ListMap = function(options, self) {
             operator: '-',
             title: 'Date Modified',
             visible: false,
-            width: 192,
+            width: 128,
         },
         {
             align: 'right',
@@ -291,7 +301,10 @@ Ox.ListMap = function(options, self) {
             self.$placeForm.values(data).show();
         },
         changeplaceend: function(data) {
-            editPlace(['lat', 'lng', 'south', 'west', 'north', 'east', 'area']);
+            var isResult = self.selectedPlace.id[0] == '_';
+            !isResult && editPlace([
+                'lat', 'lng', 'south', 'west', 'north', 'east', 'area'
+            ]);
         },
         geocode: function(data) {
             that.triggerEvent('geocode', data);
@@ -355,6 +368,24 @@ Ox.ListMap = function(options, self) {
                 self.$map.value(self.selectedPlace, 'name', data.value);
             }
         }),
+        Ox.ArrayInput({
+            id: 'alternativeNames',
+            label: 'Alternative Names',
+            max: 10,
+            //sort: true,
+            values: [],
+            width: 240
+        }).bindEvent({
+            change: function(data) {
+                var isResult = self.selectedPlace[0] == '_';
+                if (!self.isAsync) {
+                    
+                } else {
+                    !isResult && editPlace(['alternativeNames'])
+                }
+                self.$map.value(self.selectedPlace, 'alternativeNames', data.value);
+            }
+        }),
         Ox.Input({
             id: 'geoname',
             label: 'Geoname',
@@ -366,7 +397,6 @@ Ox.ListMap = function(options, self) {
                     country = Ox.getCountryByGeoname(geoname),
                     countryCode = country ? country.code : '',
                     isResult = self.selectedPlace[0] == '_';
-                //self.$map.value(self.selectedPlace, 'geoname', geoname);
                 self.$placeTitleFlag.attr({
                     src: Ox.getImageByGeoname('icon', 16, geoname)
                 });
@@ -387,12 +417,20 @@ Ox.ListMap = function(options, self) {
         Ox.Input({
             id: 'countryCode'
         }).hide(),
-        Ox.ArrayInput({
+        Ox.Select({
-            id: 'alternativeNames',
+            id: 'type',
-            label: 'Alternative Names',
+            items: [
-            max: 10,
+                {id: 'country', title: 'Country'},
-            //sort: true,
+                {id: 'region', title: 'Region'},
-            values: [],
+                {id: 'city', title: 'City'},
+                {id: 'borough', title: 'Borough'},
+                {id: 'street', title: 'Street'},
+                {id: 'premise', title: 'Premise'},
+                {id: 'feature', title: 'Feature'},
+                {id: 'other', title: 'Other'}
+            ],
+            label: 'Type',
+            labelWidth: 64,
             width: 240
         }).bindEvent({
             change: function(data) {
@@ -400,11 +438,11 @@ Ox.ListMap = function(options, self) {
                 if (!self.isAsync) {
                     
                 } else {
-                    !isResult && editPlace(['alternativeNames'])
+                    !isResult && editPlace(['type'])
                 }
-                self.$map.value(self.selectedPlace, 'alternativeNames', data.value);
+                self.$map.value(self.selectedPlace, 'type', data.selected[0]);
             }
-        }),
+        })
     ], ['South', 'West', 'North', 'East', 'Latitude', 'Longitude'].map(function(v) {
         var id = (
                 v == 'Latitude' ? 'lat' : v == 'Longitude' ? 'lng' : v
@@ -420,10 +458,6 @@ Ox.ListMap = function(options, self) {
             max: max,
             type: 'float',
             width: 240
-        }).bindEvent({
-            focus: function() {
-                Ox.print('---- FOCUS ----')
-            }
         });
     }), [
         self.$areaInput = Ox.Input({

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

@@ -858,9 +858,7 @@ Ox.Map = function(options, self) {
                 name: data.formatted_address.split(', ')[0],
 		        north: bounds.getNorthEast().lat(),
 		        south: bounds.getSouthWest().lat(),
-		        types: data.types.map(function(type) {
+		        type: getType(data.address_components[0].types),
-		            return Ox.toTitleCase(type.replace(/_/g, ' '));
-		        }),
 		        west: bounds.getSouthWest().lng()
             };
         function getCountryCode(components) {
@@ -883,7 +881,45 @@ Ox.Map = function(options, self) {
                 return !country && (
                     i == 0 || name != components[i - 1].long_name
                 ) ? name : null;
-	        }).join(', ')
+	        }).join(', ');
+        }
+        function getType(types) {
+            Ox.print('getType', types)
+            // see http://code.google.com/apis/maps/documentation/javascript/services.html#GeocodingAddressTypes
+            var strings = {
+                    'country': ['country'],
+                    'region': ['administrative_area'],
+                    'city': ['locality'],
+                    'borough': ['neighborhood', 'sublocality'],
+                    'street': [
+                        'intersection', 'route',
+                        'street_address', 'street_number'
+                    ],
+                    'premise': [
+                        'airport', 'establishment', 'park',
+                        'premise', 'subpremise'
+                    ],
+                    'feature': ['natural_feature']
+                },
+                type = 'other';
+            Ox.forEach(strings, function(values, key) {
+                Ox.forEach(values, function(value) {
+                    if (find(value)) {
+                        type = key;
+                        return false;
+                    }
+                });
+                return type == 'other';
+            });
+            return type;
+            function find(type) {
+                var ret;
+                Ox.forEach(types, function(v) {
+                    ret = Ox.startsWith(v, type);
+                    return !ret;
+                });
+                return ret;
+            }
         }
 	    return place;
     }