From 30088ad0b1f599bcf3a3223557ed3a89f996f762 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 13 Jan 2012 12:27:42 +0530 Subject: [PATCH] update map and calendar --- demos/form2/js/form.js | 1 + source/Ox.UI/js/Calendar/Ox.Calendar.js | 74 ++++++++++-------- source/Ox.UI/js/Calendar/Ox.ListCalendar.js | 2 - source/Ox.UI/js/Form/Ox.Select.js | 7 +- source/Ox.UI/js/Map/Ox.Map.js | 85 +++++++-------------- 5 files changed, 73 insertions(+), 96 deletions(-) diff --git a/demos/form2/js/form.js b/demos/form2/js/form.js index 25376516..54bd8053 100644 --- a/demos/form2/js/form.js +++ b/demos/form2/js/form.js @@ -1122,6 +1122,7 @@ Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() { {id: 'female', title: 'Female'}, {id: 'other', title: 'Other...'} ], + value: 'male', width: 256 }, title: 'SelectInput' diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index b2372d65..14e5e7ee 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js @@ -44,10 +44,12 @@ Ox.Calendar = function(options, self) { }) .options(options || {}) .addClass('OxCalendar') + /* .css({ - //width: self.options.width + 'px', - //height: self.options.height + 'px' + width: self.options.width + 'px', + height: self.options.height + 'px' }) + */ .bindEvent({ key_0: function() { panToSelected(); @@ -294,22 +296,21 @@ Ox.Calendar = function(options, self) { self.$typeSelect = Ox.Select({ items: [ - {id: 'date', title: 'Dates', checked: self.options.showTypes.indexOf('date') > -1}, - {id: 'place', title: 'Places', checked: self.options.showTypes.indexOf('place') > -1}, - {id: 'person', title: 'People', checked: self.options.showTypes.indexOf('person') > -1}, - {id: 'other', title: 'Other', checked: self.options.showTypes.indexOf('other') > -1} + {id: 'date', title: 'Dates'}, + {id: 'place', title: 'Places'}, + {id: 'person', title: 'People'}, + {id: 'other', title: 'Other'} ], max: -1, min: 1, title: 'Show...', + value: self.options.showTypes, width: 80 }) .css({float: 'left', margin: '4px'}) .bindEvent({ change: function(data) { - self.options.showTypes = data.value.map(function(type) { - return type.id; - }); + self.options.showTypes = data.value; getLines(); renderCalendar(); } @@ -589,7 +590,8 @@ Ox.Calendar = function(options, self) { self.$content.css({marginLeft: 0}); self.$scrollbar.css({marginLeft: 0}); self.options.date = new Date( - +self.options.date - (data.clientX - self.drag.x) * getSecondsPerPixel() * 1000 + +self.options.date + - (data.clientX - self.drag.x) * getSecondsPerPixel() * 1000 ); renderCalendar(); } @@ -628,7 +630,9 @@ Ox.Calendar = function(options, self) { self.$content.css({marginLeft: 0}); self.$scrollbar.css({marginLeft: 0}); self.options.date = new Date( - +self.options.date + (self.drag.x - data.clientX) * getSecondsPerPixel() * 1000 * getScrollbarFactor() + +self.options.date + + (self.drag.x - data.clientX) * getSecondsPerPixel() * 1000 + * getScrollbarFactor() ); renderCalendar(); } @@ -643,21 +647,21 @@ Ox.Calendar = function(options, self) { value = unit.value(self.options.date), width = Math.round(unit.seconds * getPixelsPerSecond(zoom)), n = Math.ceil(self.options.width * 1.5/* * 16*/ / width); - Ox.loop(-n, n + 1, function(i) { - if (u == 0 || Ox.mod(value + i, 2)) { - $elements.push( - Ox.Element() - .addClass( - u == 0 ? 'line' : '' - ) - .css({ - left: getPosition(unit.date(value + i), zoom) + 'px', - width: (u == 0 ? 1 : width) + 'px', - height: self.contentHeight + 'px' - }) - ); - } - }); + Ox.loop(-n, n + 1, function(i) { + if (u == 0 || Ox.mod(value + i, 2)) { + $elements.push( + Ox.Element() + .addClass( + u == 0 ? 'line' : '' + ) + .css({ + left: getPosition(unit.date(value + i), zoom) + 'px', + width: (u == 0 ? 1 : width) + 'px', + height: self.contentHeight + 'px' + }) + ); + } + }); }); return $elements; } @@ -869,8 +873,6 @@ Ox.Calendar = function(options, self) { value = unit.value(self.options.date), width = unit.seconds * getPixelsPerSecond(zoom), n = Math.ceil(self.options.width * 1.5/* * 16*/ / width); - //Ox.Log('Calendar', zoom, getUnits(zoom).map(function(u) {return u.name(value)}).join('/')) - //Ox.Log('Calendar', 'VALUE', value) Ox.loop(-n, n + 1, function(i) { $elements.push( getEventElement({ @@ -947,9 +949,11 @@ Ox.Calendar = function(options, self) { function overlaps(eventA, eventB) { return ( - eventA.startTime >= eventB.startTime && eventA.startTime < eventB.endTime + eventA.startTime >= eventB.startTime + && eventA.startTime < eventB.endTime ) || ( - eventB.startTime >= eventA.startTime && eventB.startTime < eventA.endTime + eventB.startTime >= eventA.startTime + && eventB.startTime < eventA.endTime ); } @@ -958,9 +962,13 @@ Ox.Calendar = function(options, self) { } function panTo(date, line) { - var delta = Math.round((date - self.options.date) / 1000 * getPixelsPerSecond()), + var delta = Math.round( + (date - self.options.date) / 1000 * getPixelsPerSecond() + ), // 250 ms for half the width of the visible area - ms = 250 * Math.min(Math.abs(delta) / (self.$content.width() / 2), 1); + ms = 250 * Math.min( + Math.abs(delta) / (self.$content.width() / 2), 1 + ); self.$scalebar.stop().animate({ marginLeft: -delta + 'px' }, ms); @@ -1203,7 +1211,7 @@ Ox.Calendar = function(options, self) { }; that.addEvent = function(event) { - Ox.Log('Calendar', 'CALENDAR ADD EVENT', event) + // Ox.Log('Calendar', 'CALENDAR ADD EVENT', event) event = getEventData(event); self.options.events.push(event); getLines(); diff --git a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js index e0d20855..63fe0908 100644 --- a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js +++ b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js @@ -31,8 +31,6 @@ Ox.ListCalendar = function(options, self) { self.durationCache = {}; - Ox.Log('Calendar', 'EVENT[0]', self.options.events[0]) - self.columns = [ { id: 'name', diff --git a/source/Ox.UI/js/Form/Ox.Select.js b/source/Ox.UI/js/Form/Ox.Select.js index d0806a14..5c4bd331 100644 --- a/source/Ox.UI/js/Form/Ox.Select.js +++ b/source/Ox.UI/js/Form/Ox.Select.js @@ -75,11 +75,12 @@ Ox.Select = function(options, self) { Ox.Log('Form', 'Ox.Select', self.options); self.options.items = self.options.items.map(function(item) { + var isObject = Ox.isObject(item); return Ox.isEmpty(item) ? item : { - id: 'id' in item ? item.id : item, - title: 'title' in item ? item.title : item, + id: isObject ? item.id : item, + title: isObject ? item.title : item, checked: Ox.toArray(self.options.value).indexOf( - 'id' in item ? item.id : item + isObject ? item.id : item ) > -1 }; }); diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 343bc9a0..4bd46416 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -186,12 +186,14 @@ Ox.Map = function(options, self) { self.isAsync = Ox.isFunction(self.options.places); self.mapHeight = getMapHeight(); + self.metaKey = false; self.minZoom = getMinZoom(); self.placeKeys = [ 'id', 'name', 'alternativeNames', 'geoname', 'countryCode', 'type', 'lat', 'lng', 'south', 'west', 'north', 'east', 'area', 'editable' ]; + self.resultPlace = null; self.scaleMeters = [ 50000000, 20000000, 10000000, 5000000, 2000000, 1000000, @@ -201,12 +203,7 @@ Ox.Map = function(options, self) { 500, 200, 100, 50, 20, 10 ]; - - Ox.extend(self, { - metaKey: false, - resultPlace: null, - shiftKey: false - }); + self.shiftKey = false; if (self.options.toolbar) { self.$toolbar = Ox.Bar({ @@ -513,7 +510,6 @@ Ox.Map = function(options, self) { self.places.push(place); self.resultPlace = null; that.triggerEvent('addplace', place) - //Ox.Log('Map', 'SSSS', self.options.selected) } function boundsChanged() { @@ -570,7 +566,6 @@ Ox.Map = function(options, self) { } function constructZoomInput() { - //Ox.Log('Map', 'constructZoomInput', self.minZoom, self.maxZoom) if (self.options.zoombar) { self.$zoomInput && self.$zoomInput.remove(); self.$zoomInput = Ox.Range({ @@ -676,17 +671,13 @@ Ox.Map = function(options, self) { } function getPlaceById(id) { - var place = Ox.getObjectById(self.places, id); - if (!place && self.resultPlace && self.resultPlace.id == id) { - place = self.resultPlace; - } - //Ox.Log('Map', 'getPlaceById', id, place) - return place; + return self.resultPlace && self.resultPlace.id == id + ? self.resultPlace + : Ox.getObjectById(self.places, id); } function getPlaceByLatLng(latlng, bounds, callback) { // gets the largest place at latlng that would fit in bounds - //Ox.Log('Map', 'll b', latlng, bounds) var callback = arguments.length == 3 ? callback : bounds, bounds = arguments.length == 3 ? bounds : null; self.geocoder.geocode({ @@ -775,8 +766,9 @@ Ox.Map = function(options, self) { } function getSelectedPlace() { - return self.options.selected ? - getPlaceById(self.options.selected) : null; + return self.options.selected + ? getPlaceById(self.options.selected) + : null; } function initMap() { @@ -903,9 +895,11 @@ Ox.Map = function(options, self) { self.places.sort(function(a, b) { var sort = { a: a.selected ? Infinity - : bounds.contains(a.center) ? a.area : -Infinity, + : bounds.contains(a.center) ? a.area + : -Infinity, b: b.selected ? Infinity - : bounds.contains(b.center) ? b.area : -Infinity, + : bounds.contains(b.center) ? b.area + : -Infinity, }; return sort.b - sort.a; }).forEach(function(place, i) { @@ -1052,6 +1046,14 @@ Ox.Map = function(options, self) { ] }, type = 'feature'; + function find(type) { + var ret; + Ox.forEach(types, function(v) { + ret = Ox.startsWith(v, type); + return !ret; + }); + return ret; + } Ox.forEach(strings, function(values, key) { Ox.forEach(values, function(value) { if (find(value)) { @@ -1062,14 +1064,6 @@ Ox.Map = function(options, self) { return type == 'feature'; }); return type; - function find(type) { - var ret; - Ox.forEach(types, function(v) { - ret = Ox.startsWith(v, type); - return !ret; - }); - return ret; - } } return place; } @@ -1105,7 +1099,6 @@ Ox.Map = function(options, self) { var place = getSelectedPlace(); place.id = '_' + place.id; self.options.selected = place.id; - //Ox.Log('Map', 'removePlace', Ox.getObjectById(self.places, place.id)) self.places.splice(Ox.getIndexById(self.places, place.id), 1); self.resultPlace && self.resultPlace.remove(); self.resultPlace = place; @@ -1113,31 +1106,11 @@ Ox.Map = function(options, self) { } function reset() { - //Ox.Log('Map', self.map.getZoom(), self.zoom); - self.map.getZoom() == self.zoom ? - self.map.panTo(self.center) : - self.map.fitBounds(self.bounds); + self.map.getZoom() == self.zoom + ? self.map.panTo(self.center) + : self.map.fitBounds(self.bounds); } - function resizeMap() { - /* - Ox.Log('Map', 'resizeMap', self.options.width, self.options.height); - var center = self.map.getCenter(); - self.mapHeight = getMapHeight(); - self.minZoom = getMinZoom(); - that.css({ - height: self.options.height + 'px', - width: self.options.width + 'px' - }); - self.$map.css({ - height: self.mapHeight + 'px', - width: self.options.width + 'px' - }); - google.maps.event.trigger(self.map, 'resize'); - self.map.setCenter(center); - */ - } - function selectPlace(id, zoom) { // id can be null (deselect) var place, @@ -1404,13 +1377,9 @@ Ox.Map = function(options, self) { }; that.getKey = function() { - var key = null; - if (self.shiftKey) { - key = 'shift' - } else if (self.metaKey) { - key = 'meta' - } - return key; + return self.shiftKey ? 'shift' + : self.metaKey ? 'meta' + : null; }; that.getSelectedPlace = function() {