From 07b72cca237dc90c4744fe5184905ea15198e5d9 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 28 Nov 2010 15:06:47 +0000 Subject: [PATCH] some improvements to splitpanel --- build/css/ox.ui.css | 4 +- build/js/ox.js | 29 ++++ build/js/ox.ui.js | 363 +++++++++++++++++++++++++++++--------------- 3 files changed, 272 insertions(+), 124 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index e13078a..fd9dbe6 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -1121,11 +1121,11 @@ Panels } .OxCollapsePanel > .OxBar > .OxButton { float: left; - margin: 2px 0 0 4px; + margin: 0 0 0 0; } .OxCollapsePanel > .OxBar > .OxTitle { float: left; - margin: 3px 0 0 4px; + margin: 1px 0 0 0; font-weight: bold; } .OxCollapsePanel > .OxContent { diff --git a/build/js/ox.js b/build/js/ox.js index 9cb3b94..8f0d1e7 100644 --- a/build/js/ox.js +++ b/build/js/ox.js @@ -13,6 +13,8 @@ Constants Ox.AMPM = ["AM", "PM"]; Ox.DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; +Ox.EARTH_RADIUS = 6378137; +Ox.EARTH_CIRCUMFERENCE = Ox.EARTH_RADIUS * 2 * Math.PI; Ox.MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; Ox.WEEKDAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", @@ -1426,6 +1428,33 @@ Ox.formatValue = function(num, str) { return val; }; +/* +================================================================================ +Geo functions +================================================================================ +*/ + +Ox.getArea = function(point0, point1) { + +}; + +Ox.getCenter = function(point0, point1) { + +}; + +Ox.getDistance = function(point0, point1) { + point0 = point0.map(function(deg) { + return Ox.rad(deg); + }); + point1 = point1.map(function(deg) { + return Ox.rad(deg); + }); +} + +Ox.getMetersPerDegree = function(point) { + return Math.cos(point[0] * Math.PI / 180) * Ox.EARTH_CIRCUMFERENCE / 360; +}; + /* ================================================================================ Math functions diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index f845a60..9c2399a 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1534,10 +1534,13 @@ requires } function toggle() { + var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 0 : 1; + self.options.parent.toggle(self.ids[i]); + /* Ox.print('toggle'); if (Ox.isUndefined(self.options.position)) { self.options.position = parseInt(self.options.parent.css(self.options.edge)) + - (self.options.collapsed ? self.options.size : 0); + (self.options.collapsed ? self.options.size : 0); } var size = self.options.position - (self.options.collapsed ? 0 : self.options.size), @@ -1545,10 +1548,12 @@ requires Ox.print('s.o.e', self.options.edge); animate[self.options.edge] = size; self.options.parent.animate(animate, 200, function() { - var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 1 : 0; - Ox.Event.trigger(self.ids[i], 'resize', self.options.elements[i][self.dimensions[1]]()); + var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 0 : 1; self.options.collapsed = !self.options.collapsed; + Ox.Event.trigger(self.ids[i], 'toggle', self.options.collapsed); + Ox.Event.trigger(self.ids[1 - i], 'resize', self.options.elements[1 - i][self.dimensions[1]]()); }); + */ } return that; @@ -2527,6 +2532,7 @@ requires autocompleteSelectSubmit: false, autovalidate: null, clear: false, + disabled: false, key: '', min: 0, max: 100, @@ -3092,7 +3098,11 @@ requires self.onChange = function(key, value) { var inputWidth, val; - if (key == 'placeholder') { + if (key == 'disabled') { + self.$input.attr({ + disabled: value ? 'disabled' : '' + }); + } else if (key == 'placeholder') { setPlaceholder(); } else if (key == 'value') { val = self.$input.val(); @@ -3798,6 +3808,12 @@ requires })) .html(self.options.title); + self.onChange = function(key, value) { + if (key == 'title') { + that.html(value); + } + } + return that; }; @@ -7242,12 +7258,76 @@ requires var self = self || {} that = new Ox.Element('div', self) .defaults({ + clickable: false, places: [], type: 'satellite' }) - .options(options || {}); + .options(options || {}) + .addEvent({ + key_up: function() { + pan(0, -1); + }, + key_down: function() { + pan(0, 1); + }, + key_left: function() { + pan(-1, 0); + }, + key_right: function() { + pan(1, 0); + }, + key_0: reset, + key_minus: function() { + zoom(-1); + }, + key_equal: function() { + zoom(1); + }, + key_enter: focusOnPlace, + key_shift_enter: zoomToPlace, + key_escape: deselectPlace + }); - init(); + $.extend(self, { + geocoder: new google.maps.Geocoder(), + selected: -1 + }); + $.each(self.options.places, function(i, place) { + place.bounds = getBounds(), + place.center = place.bounds.getCenter(); + $.extend(place, { + marker: new Marker(place), + polygon: new Polygon(place) + }); + self.bounds = i == 0 ? getBounds() : self.bounds.union(place.bounds); + self.options.places[i] = place; + function getBounds() { + return new google.maps.LatLngBounds( + new google.maps.LatLng(place.points.southwest[0], place.points.southwest[1]), + new google.maps.LatLng(place.points.northeast[0], place.points.northeast[1]) + ); + } + }); + Ox.print('loadMap'); + Ox.print(self.bounds) + $.extend(self, { + map: new google.maps.Map(that.$element[0], { + center: self.bounds.getCenter(), + disableDefaultUI: true, + mapTypeId: google.maps.MapTypeId[self.options.type.toUpperCase()], + zoom: 0 + }) + }); + self.map.fitBounds(self.bounds); + self.center = self.map.getCenter(); + self.zoom = self.map.getZoom(); + google.maps.event.addListener(self.map, 'click', click); + google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged); + $.each(self.options.places, function(i, place) { + place.marker.add(); + }); + resize(); + that.gainFocus(); function canContain(outerBounds, innerBounds) { var outerSpan = outerBounds.toSpan(), @@ -7258,17 +7338,31 @@ requires function click(event) { Ox.print('event', event); - getLocationByLatLng(event.latLng, self.map.getBounds(), function(location) { - self.marker && self.marker.remove(); - self.polygon && self.polygon.remove(); - if (location) { - self.marker = location.marker.add(); - self.polygon = location.polygon.add(); - that.triggerEvent('select', location) - } - }) + that.gainFocus(); + if (self.options.clickable) { + getLocationByLatLng(event.latLng, self.map.getBounds(), function(location) { + self.marker && self.marker.remove(); + self.polygon && self.polygon.remove(); + if (location) { + self.marker = location.marker.add(); + self.polygon && self.polygon.remove(); + self.polygon = location.polygon.add(); + that.triggerEvent('select', location); + } + }); + } } + function deselectPlace() { + + } + + function focusOnPlace() { + if (self.selected > -1) { + self.map.panTo(self.options.places[self.selected].center); + } + } + function getLocationByLatLng(latlng, bounds, callback) { Ox.print('ll b', latlng, bounds) var callback = arguments.length == 3 ? callback : bounds, @@ -7320,119 +7414,107 @@ requires }); } - function init() { - var counter = 0, - length = self.options.places.length; - $.extend(self, { - geocoder: new google.maps.Geocoder(), - locations: [], - selectedMarker: null - }); - $.each(self.options.places, function(i, place) { - if (Ox.isString(place)) { - self.options.places[i] = { - name: place - }; - } else if (Ox.isArray(place)) { - self.options.places[i] = { - name: '', - point: place - }; - } - 'point' in self.options.places[i] ? - getLocationByPoint(self.options.places[i].point, callback) : - getLocationByName(self.options.places[i].name, callback); - }); - function callback(location) { - if (location) { - Ox.print('counter', counter, location) - self.locations.push(location); - self.bounds = counter == 0 ? location.rectangle.bounds : - self.bounds.union(location.rectangle.bounds); - } - if (counter++ == length - 1) { - loadMap(); - } - } - } + function getPositionByName(name) { + var position = -1; + $.each(self.options.places, function(i, place) { + if (place.name == name) { + position = i; + return false; + } + }); + return position; + } - function loadMap() { - Ox.print('loadMap'); - $.extend(self, { - map: new google.maps.Map(that.$element[0], { - center: self.bounds.getCenter(), - disableDefaultUI: true, - mapTypeId: google.maps.MapTypeId[self.options.type.toUpperCase()], - zoom: 0 - }) - }); - self.map.fitBounds(self.bounds) - google.maps.event.addListener(self.map, 'click', click); - google.maps.event.addListener(self.map, 'zoom_changed', zoom); - $.each(self.locations, function(i, location) { - location.marker.add(); - }); - resize(); - }; + function pan(x, y) { + self.map.panBy(x * 256, y * 256); + }; function resize() { google.maps.event.trigger(self.map, 'resize'); } - function zoom() { + function reset() { + Ox.print(self.map.getZoom(), self.zoom); + self.map.getZoom() == self.zoom ? + self.map.panTo(self.center) : + self.map.fitBounds(self.bounds); + } + + function zoomChanged() { that.triggerEvent('zoom', { value: self.map.getZoom() }); } - function Location(geocode) { - Ox.print('geocode', geocode); - var bounds = geocode.geometry.bounds || geocode.geometry.viewport, - area = [ - [bounds.getSouthWest().lat(), bounds.getSouthWest().lng()], - [bounds.getNorthEast().lat(), bounds.getNorthEast().lng()] - ], - location = { - geocode: geocode, - name: { - formatted: geocode.formatted_address, - long: $.map(geocode.address_components, function(v) { - return v.long_name; - }).join(', ') - }, - rectangle: new Rectangle(area), - }; - Ox.print('area', area) + function zoom(z) { + self.map.setZoom(self.map.getZoom() + z); + } + + function zoomToPlace() { + if (self.selected > -1) { + self.map.fitBounds(self.options.places[self.selected].bounds); + } + } + + function Location(geodata) { + Ox.print('geodata', geodata); + var bounds = geodata.geometry.bounds || geodata.geometry.viewport, + center = bounds.getCenter(), + location = { + bounds: bounds, + center: center, + geoname: geodata.formatted_address, + points: { + 'center': [center.lat(), center.lng()], + 'southwest': [bounds.getSouthWest().lat(), bounds.getSouthWest().lng()], + 'northeast': [bounds.getNorthEast().lat(), bounds.getNorthEast().lng()] + }, + name: geodata.formatted_address.split(', ')[0], + size: 0, + type: geodata.address_components[0].types.join(', ') + }; return $.extend(location, { marker: new Marker(location), polygon: new Polygon(location) }); } - function Marker(location) { + function Marker(place) { + Ox.print(place.center) var listeners = {}, marker = new google.maps.Marker({ icon: icon('red'), - position: location.rectangle.center, - title: location.name.formatted + position: place.center, + title: place.name }), selected = false; function click() { + Ox.print('click', self.selected, selected) selected = !selected; + selected && self.selected > -1 && self.options.places[self.selected].marker.deselect(); + self.selected = selected ? getPositionByName(place.name) : -1; marker.setOptions({ icon: icon(selected ? 'blue' : 'red') }); - location.polygon[selected ? 'add' : 'remove'](); + place.polygon[selected ? 'add' : 'remove'](); + that.triggerEvent(selected ? 'select' : 'deselect', place); } + function deselect() { + + } function dblclick() { - click(); - self.map.fitBounds(location.rectangle.bounds); + Ox.print('dblclick', place.bounds) + self.map.fitBounds(place.bounds); } + function select() { + + } function icon(color) { return oxui.path + 'png/ox.ui/marker' + Ox.toTitleCase(color) + '.png' } return { add: function() { + Ox.print('add Marker') marker.setMap(self.map); listeners = { click: google.maps.event.addListener(marker, 'click', click), @@ -7441,7 +7523,12 @@ requires return this; }, deselect: function() { - + self.selected = -1; + selected = false; + marker.setOptions({ + icon: icon('red') + }); + place.polygon.remove(); }, remove: function() { marker.setMap(null); @@ -7451,22 +7538,30 @@ requires return this; }, select: function() { - + if (self.selected > -1) { + self.options.places[self.selected].marker.deselect(); + } + self.selected = getPositionByName(place.name); + selected = true; + marker.setOptions({ + icon: icon('blue') + }); + place.polygon.add(); } }; } function Polygon(location) { var listeners = {}, - points = [ - location.rectangle.latlng.sw, - location.rectangle.latlng.nw, - location.rectangle.latlng.ne, - location.rectangle.latlng.se, - location.rectangle.latlng.sw + paths = [ + new google.maps.LatLng(location.points.southwest[0], location.points.southwest[1]), + new google.maps.LatLng(location.points.northeast[0], location.points.southwest[1]), + new google.maps.LatLng(location.points.northeast[0], location.points.northeast[1]), + new google.maps.LatLng(location.points.southwest[0], location.points.northeast[1]), + new google.maps.LatLng(location.points.southwest[0], location.points.southwest[1]) ], polygon = new google.maps.Polygon({ - paths: points + paths: paths }), selected = false; setOptions(); @@ -7524,7 +7619,7 @@ requires sc: new google.maps.LatLng(lat.sw, lng.mc), se: new google.maps.LatLng(lat.sw, lng.ne), mw: new google.maps.LatLng(lat.mc, lng.sw), - mw: new google.maps.LatLng(lat.mc, lng.ne), + me: new google.maps.LatLng(lat.mc, lng.ne), nw: new google.maps.LatLng(lat.ne, lng.sw), nc: new google.maps.LatLng(lat.ne, lng.mc), }); @@ -7555,9 +7650,10 @@ requires that.find = function(name, callback) { getLocationByName(name, function(location) { if (location) { + //self.marker = location.marker.add(); self.polygon && self.polygon.remove(); self.polygon = location.polygon.add(); - self.bounds = location.rectangle.bounds; + self.bounds = location.bounds; self.map.fitBounds(self.bounds); } callback(location); @@ -8659,7 +8755,7 @@ requires that = new Ox.Panel({}, self) .defaults({ collapsed: false, - size: 20, + size: 16, title: '' }) .options(options) @@ -8836,10 +8932,13 @@ requires v.size != 'auto' && that.$elements[i].css(self.dimensions[0], v.size + 'px'); if (i == 0) { that.$elements[i].css(self.edges[0], 0); - v.size != 'auto' && that.$elements[i].css( + that.$elements[i].css( self.edges[1], (getSize(self.options.elements[1]) + (length == 3 ? getSize(self.options.elements[2]) : 0)) + 'px' ); } else if (i == 1) { + that.$elements[i].css( + self.edges[0], 'auto' + ); self.options.elements[0].size != 'auto' && that.$elements[i].css( self.edges[0], getSize(self.options.elements[0]) + 'px' ); @@ -8847,6 +8946,9 @@ requires self.edges[1], (self.length == 3 ? getSize(self.options.elements[2]) : 0) + 'px' ); } else { + that.$elements[i].css( + self.edges[0], 'auto' + ); that.$elements[i].css(self.edges[1], 0); v.size != 'auto' && that.$elements[i].css( self.edges[0], (getSize(self.options.elements[0]) + getSize(self.options.elements[1])) + 'px' @@ -8859,7 +8961,8 @@ requires } that.isCollapsed = function(id) { - return self.options.elements[getPositionById(id)].collapsed; + var pos = Ox.isNumber(id) ? id : getPositionById(id); + return self.options.elements[pos].collapsed; }; that.replace = function(id, element) { @@ -8878,11 +8981,15 @@ requires that.size = function(id, size) { // one can pass pos instead of id var pos = Ox.isNumber(id) ? id : getPositionById(id); - // Ox.print('pos', pos, self.options.elements, $.map(self.options.elements, function(v, i) { return v.element.options('id'); })) - Ox.print('pos', pos, 'size', size) - self.options.elements[pos].size = size; - setSizes(); - return that; + Ox.print('pos', pos, 'size', size); + if (arguments.length == 1) { + Ox.print('size', self.options.elements[pos].element[self.dimensions[0]](), !that.isCollapsed(pos)) + return self.options.elements[pos].element[self.dimensions[0]]() * !that.isCollapsed(pos); + } else { + self.options.elements[pos].size = size; + setSizes(); + return that; + } }; that.toggle = function(id) { @@ -8899,13 +9006,21 @@ requires Ox.print('s.o.e', self.options.edge); */ var pos = getPositionById(id), - size = self.options.elements[pos].collapsed ? 0 : self.options.elements[pos].size, + element = self.options.elements[pos], + value = parseInt(that.css(self.edges[pos == 0 ? 0 : 1])) + + element.element[self.dimensions[0]]() * + (element.collapsed ? 1 : -1), animate = {}; - animate[self.edges[pos == 0 ? 0 : 1]] = size; - self.options.parent.animate(animate, 200, function() { - var i = (self.options.edge == 'left' || self.options.edge == 'top') ? 1 : 0; - that.triggerEvent('resize', self.options.elements[i][self.dimensions[1]]()); + Ox.print(parseInt(that.css(self.edges[0])), element.element[self.dimensions[0]]()) + animate[self.edges[pos == 0 ? 0 : 1]] = value; + Ox.print('animate', animate, 'value', value) + that.animate(animate, 200, function() { + var element = self.options.elements[pos == 0 ? 1 : pos - 1].element; self.options.elements[pos].collapsed = !self.options.elements[pos].collapsed; + element.triggerEvent( + 'resize', + element[self.dimensions[0]]() + ); }); }; @@ -9230,6 +9345,7 @@ requires }); that.css({ + width: (self.options.width + self.margin) + 'px', height: ((self.height + self.margin) * self.lines + 4) + 'px' }); @@ -9448,6 +9564,10 @@ requires function setWidth() { self.lines = Math.ceil(self.options.duration / self.options.width); + that.css({ + width: (self.options.width + self.margin) + 'px', + height: ((self.height + self.margin) * self.lines + 4) + 'px' + }); $.each(Ox.range(self.lines), function(i) { if (self.$lines[i]) { self.$lines[i].css({ @@ -9515,9 +9635,9 @@ requires .options(options || {}) .addClass('OxEditor') .css({ - height: self.options.height + 'px', - overflowY: 'auto', - width: self.options.width + 'px' + //height: self.options.height + 'px', + overflowY: 'scroll', + //width: self.options.width + 'px' }); $.extend(self, { @@ -9908,8 +10028,7 @@ requires } self.onChange = function(key, value) { - if (key == 'width') { - that.width(value); + if (key == 'width' || key == 'height') { setSizes(); } };