Permalink
Browse files

A few Dialog fixes, major speed improvements in Gmap (asyncronous loa…

…ding), a benchmark class (Bench), and some Table improvements
  • Loading branch information...
Winton Welsh
Winton Welsh committed May 30, 2008
1 parent e09294c commit 52ad7d9231393c6826dbb07a7e6058451e0e430c
Showing with 175 additions and 122 deletions.
  1. +25 −0 Bench.js
  2. +6 −11 Dialog.js
  3. +128 −103 Gmap.js
  4. +16 −8 Table.js
View
@@ -0,0 +1,25 @@
+var Bench = {
+ /*
+ Property: time
+ Starts a timer.
+ Argument:
+ name - the name of the timer
+ */
+
+ time: function(name){
+ this.timers = this.timers || [];
+ this.timers[name] = new Date().getTime();
+ },
+
+ /*
+ Property: timeEnd
+ Ends a timer and logs that value to the console.
+ Argument:
+ name - the name of the timer
+ */
+
+ timeEnd: function(name){
+ if (this.timers[name]) console.log('%s: %s', name, new Date().getTime() - this.timers[name]);
+ else console.log('no such timer: %s', name);
+ }
+};
View
@@ -179,8 +179,8 @@ var Dialog = Base.extend({
Called by onShow. Focuses the form.
*/
- ready: function() {
- this.el.dialog.focusFirst();
+ ready: function(select) {
+ this.el.dialog.focusFirst(select);
this.fireEvent('onReady', [ this.el.dialog ]);
// table support
@@ -228,19 +228,14 @@ var Dialog = Base.extend({
url - The URL for the remote request.
*/
- render_remote: function(options) {
+ render_remote: function(url, onComplete) {
Global.Indicator.show();
- var url = options.url;
- delete options.url;
-
new Ajax(url, {
onComplete: function(response) {
- response = Json.evaluate(response).content;
-
- this.render(Object.extend(options, { content: response }));
- this.show();
-
+ response = Json.evaluate(response);
+ this.render({ content: response.content });
+ onComplete.bind(this)(response);
Global.Indicator.hide();
}.bind(this),
method: 'get'
View
231 Gmap.js
@@ -1,127 +1,152 @@
var Gmap = new Class({
initialize: function(options) {
- this.options = { id: 'map', width: 600, height: 300 };
- this.setOptions(options);
+ if (!Global.google_maps_loaded)
+ new Asset.javascript(Global.google_maps_js, { id: 'gmap_js' });
- $each(this.create, function(item, key) { this.create[key] = this.create[key].bind(this); }, this);
- $each(this.remove, function(item, key) { this.remove[key] = this.remove[key].bind(this); }, this);
+ var timer;
+ timer = (function() {
+ if (Gmap.loaded) { clearTimeout(timer); Gmap.queue.each(function(item) { item(); }); }
+ }).periodical(10);
+
+ $each([ 'map', 'marker' ], function(obj) {
+ $each(this[obj], function(item, key) { this[obj][key] = Gmap.waitUntilLoaded(this[obj][key], this); }, this);
+ }, this);
- this.container = $(this.options.id);
- this.map = new GMap2(this.container, { size: new GSize(this.options.width, this.options.height) });
- this.geocoder = new GClientGeocoder();
-
- this.map.setCenter(new GLatLng(0, 0), 4);
- this.markers = {};
-
- this.changeZoomImage();
- this.elasticizeMap();
- this.killGoogleLogo();
-
- document.body.onunload = GUnload;
+ Gmap.waitUntilLoaded(function() {
+ this.options = { id: 'map', width: 600, height: 300 };
+ this.setOptions(options);
+
+ this.container = $(this.options.id);
+ this.gmap = new GMap2(this.container, { size: new GSize(this.options.width, this.options.height) });
+ this.geocoder = new GClientGeocoder();
+
+ this.gmap.setCenter(new GLatLng(0, 0), 4);
+ this.markers = {};
+
+ this.map.changeZoomImage();
+ this.map.elasticize();
+ this.map.killGoogleLogo();
+
+ window.onunload = function() { GUnload(); };
+ }, this)();
},
- create: {
- imageUrl: function(type, num, highlight) {
- return '/images/markers/' + type + '/' + (highlight ? 'highlights/' : '') + (num+1) + '.png';
- },
- icon: function(type, num) {
- var icon = new GIcon();
- icon.image = this.create.imageUrl(type, num);
- icon.shadow = '/images/markers/shadow.png';
- icon.shadowSize = new GSize(45, 34);
- icon.iconSize = new GSize(27, 34);
- icon.iconAnchor = new GPoint(5, 33);
- return icon;
+ map: {
+ changeZoomImage: function() {
+ this.gmap.addControl(new GSmallZoomControl());
+ var map_last = $('map').getLast();
+ map_last.hide();
+
+ var timer;
+ timer = (function() {
+ if (map_last.getFirst()) {
+ $clear(timer);
+ map_last.getFirst().setProperty('src', '/images/map_zoom.png');
+ map_last.show();
+ }
+ }).periodical(100);
+ },
+ elasticize: function() {
+ var fx = new Fx.Styles($('map'), { duration: 1500, wait: false, transition: Fx.Transitions.Elastic.easeOut });
+ var og_top = this.container.getPosition().y;
+ window.addEvent('scroll', function() {
+ var top = window.getScrollTop();
+ if (top > og_top) fx.start({ top: top - og_top + 15 });
+ else fx.start({ top: 0 });
+ }.bind(this));
+ },
+ killGoogleLogo: function() {
+ var children = $('map').getChildren();
+ children[1].setStyle('opacity', 0);
+ children[2].setStyle('opacity', 0);
+ },
+ showAddress: function(address) {
+ this.geocoder.getLatLng(address,
+ function(point) {
+ if (!point)
+ alert(address + " not found");
+ else
+ this.gmap.setCenter(point, 13);
+ }.bind(this));
},
- marker: function(latlng, type, num) {
- var marker = new GMarker(latlng, { icon: this.create.icon(type, num), zIndexProcess: function() { return 100 - num; } });
+ zoomAllMarkers: function() {
+ var bounds = new GLatLngBounds();
+ this.marker.each(function(marker) { bounds.extend(marker.getPoint()); }, this);
+
+ var center = bounds.getCenter();
+ this.gmap.setCenter(center);
+ this.gmap.setZoom(this.gmap.getBoundsZoomLevel(bounds));
+
+ var new_top = this.gmap.fromContainerPixelToLatLng(new GPoint(0, -25));
+ bounds.extend(new GLatLng(new_top.lat(), center.lng()));
+
+ this.gmap.setCenter(bounds.getCenter());
+ this.gmap.setZoom(this.gmap.getBoundsZoomLevel(bounds));
+ }
+ },
+ marker: {
+ create: function(latlng, type, num) {
+ var marker = new GMarker(latlng, {
+ icon: this.marker.icon(type, num), zIndexProcess: function() { return 100 - num; }
+ });
GEvent.addListener(marker, 'mouseover', function() {
- this.highlight(true, type, num);
+ this.marker.highlight(true, type, num);
this.fireEvent('onMarkerOver', [marker, type, num]);
}.bind(this));
GEvent.addListener(marker, 'mouseout', function() {
- this.highlight(false, type, num);
+ this.marker.highlight(false, type, num);
this.fireEvent('onMarkerOut', [marker, type, num]);
}.bind(this));
this.markers[type] = this.markers[type] || {};
- if (this.markers[type][num]) this.remove.marker(type, num);
+ if (this.markers[type][num]) this.marker.remove(type, num);
this.markers[type][num] = marker;
- this.map.addOverlay(marker);
+ this.gmap.addOverlay(marker);
return marker;
- }
- },
- remove: {
- marker: function(type, num) {
- this.map.removeOverlay(this.markers[type][num]);
},
- markers: function() {
- this.eachMarker(function(marker, type, num) { this.remove.marker(type, num); }, this);
- }
- },
- highlight: function(on, type, num) {
- this.markers[type][num].setImage(this.create.imageUrl(type, num, on));
- },
- changeZoomImage: function() {
- this.map.addControl(new GSmallZoomControl());
- var map_last = $('map').getLast();
- map_last.hide();
-
- var timer;
- timer = (function() {
- if (map_last.getFirst()) {
- $clear(timer);
- map_last.getFirst().setProperty('src', '/images/map_zoom.png');
- map_last.show();
- }
- }).periodical(100);
- },
- eachMarker: function(fn, bind) {
- if (!this.markers) return;
- $each(this.markers, function(value, key) {
- $each(value, function(v, k) { fn.bind(bind)(this.markers[key][k], key, k); }, this);
- }, this);
- },
- elasticizeMap: function() {
- var fx = new Fx.Styles($('map'), { duration: 1500, wait: false, transition: Fx.Transitions.Elastic.easeOut });
- var og_top = this.container.getPosition().y;
- window.addEvent('scroll', function() {
- var top = window.getScrollTop();
- if (top > og_top) fx.start({ top: top - og_top + 15 });
- else fx.start({ top: 0 });
- }.bind(this));
- },
- killGoogleLogo: function() {
- var children = $('map').getChildren();
- children[1].setStyle('opacity', 0);
- children[2].setStyle('opacity', 0);
- },
- showAddress: function(address) {
- this.geocoder.getLatLng(address,
- function(point) {
- if (!point)
- alert(address + " not found");
- else
- this.map.setCenter(point, 13);
- }.bind(this));
- },
- zoomAllMarkers: function() {
- var bounds = new GLatLngBounds();
- this.eachMarker(function(marker) { bounds.extend(marker.getPoint()); }, this);
-
- var center = bounds.getCenter();
- this.map.setCenter(center);
- this.map.setZoom(this.map.getBoundsZoomLevel(bounds));
-
- var new_top = this.map.fromContainerPixelToLatLng(new GPoint(0, -25));
- bounds.extend(new GLatLng(new_top.lat(), center.lng()));
-
- this.map.setCenter(bounds.getCenter());
- this.map.setZoom(this.map.getBoundsZoomLevel(bounds));
+ remove: function(type, num) {
+ this.gmap.removeOverlay(this.markers[type][num]);
+ },
+ remove_all: function() {
+ this.marker.each(function(marker, type, num) { this.marker.remove(type, num); }, this);
+ },
+ highlight: function(on, type, num) {
+ this.markers[type][num].setImage(this.marker.imageUrl(type, num, on));
+ },
+ imageUrl: function(type, num, highlight) {
+ return '/images/markers/' + type + '/' + (highlight ? 'highlights/' : '') + (num+1) + '.png';
+ },
+ icon: function(type, num) {
+ var icon = new GIcon();
+ icon.image = this.marker.imageUrl(type, num);
+ icon.shadow = '/images/markers/shadow.png';
+ icon.shadowSize = new GSize(45, 34);
+ icon.iconSize = new GSize(27, 34);
+ icon.iconAnchor = new GPoint(5, 33);
+ return icon;
+ },
+ each: function(fn, bind) {
+ if (!this.markers) return;
+ $each(this.markers, function(value, key) {
+ $each(value, function(v, k) { fn.bind(bind)(this.markers[key][k], key, k); }, this);
+ }, this);
+ }
}
});
Gmap.implement(new Events);
-Gmap.implement(new Options);
+Gmap.implement(new Options);
+
+Gmap.queue = [];
+Gmap.googleMapsLoaded = function() { Gmap.loaded = true; };
+Gmap.waitUntilLoaded = function(fn, bind) {
+ return function() {
+ bind = bind || this;
+ var args = $A(arguments);
+ if (Gmap.loaded) return fn.pass(args, bind)();
+ else Gmap.queue.push(fn.pass(args, bind));
+ return false;
+ };
+};
View
@@ -175,15 +175,23 @@ var Table = Base.extend({
var hr = $ES('.hr', this.container)[0];
var header = $ES('.header', this.container)[0];
var pagination = $ES('.pagination', this.container)[0];
- if (hr) hr.remove();
- if (header) header.remove();
- if (pagination) pagination.remove();
- this.el.content.remove();
- var div = new Element('div');
- div.setHTML(content);
- div.getChildren().each(function(item) { item.injectInside(this.container); }, this);
- this.attach();
+ this.el.content.getFx(600).start({ opacity:0, 'margin-left':150 }).chain(function() {
+ var div = new Element('div');
+ div.setHTML(content);
+ div.getChildren().each(function(item) {
+ item.setStyle('opacity', 0);
+ item.injectInside(this.container);
+ item.fadeIn();
+ }, this);
+
+ if (hr) hr.remove();
+ if (header) header.remove();
+ if (pagination) pagination.remove();
+ this.el.content.remove();
+
+ this.attach();
+ }.bind(this));
}
});

0 comments on commit 52ad7d9

Please sign in to comment.