From 60662a437ae2e931944ab6cfdbdf6f47dbe44c94 Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 30 May 2011 13:47:30 +0200 Subject: [PATCH] add type field (still needs a better Ox.Select) --- source/Ox.UI/css/Ox.UI.css | 7 +++- source/Ox.UI/js/Form/Ox.Select.js | 37 +++++++++++++++-- source/Ox.UI/js/Map/Ox.ListMap.js | 68 +++++++++++++++++++++++-------- source/Ox.UI/js/Map/Ox.Map.js | 44 ++++++++++++++++++-- 4 files changed, 130 insertions(+), 26 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 3406079b..f8d1cb10 100644 --- 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; diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index aad6a936..8429a146 100644 --- 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 = $('
') .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 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; }; diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index 8f6f03bb..31657f06 100644 --- 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({ diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 233b9036..baea2aa3 100644 --- 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; }