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

2011-05-30 13:47:30 +02:00 · 2011-05-30 13:47:30 +02:00 · 60662a437a
commit 60662a437a
parent b299674717
4 changed files with 130 additions and 26 deletions
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/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;
--- a/source/Ox.UI/js/Form/Ox.Select.js
+++ b/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;

 };
--- a/source/Ox.UI/js/Map/Ox.ListMap.js
+++ b/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({
-            id: 'alternativeNames',
-            label: 'Alternative Names',
-            max: 10,
-            //sort: true,
-            values: [],
+        Ox.Select({
+            id: 'type',
+            items: [
+                {id: 'country', title: 'Country'},
+                {id: 'region', title: 'Region'},
+                {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({
--- a/source/Ox.UI/js/Map/Ox.Map.js
+++ b/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) {
-		            return Ox.toTitleCase(type.replace(/_/g, ' '));
-		        }),
+		        type: getType(data.address_components[0].types),
 		        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;
    }