Permalink
Browse files

Adding new Table and Gmap class, lots of other fixes

  • Loading branch information...
1 parent ff1b411 commit 7750564cae56c5257d0724faa67ff4ae2db6952e Winton Welsh committed May 6, 2008
Showing with 287 additions and 31 deletions.
  1. +2 −1 Base.js
  2. +45 −27 Dialog.js
  3. +4 −3 Element.js
  4. +118 −0 Gmap.js
  5. +118 −0 Table.js
View
@@ -54,7 +54,8 @@ var Base = new Class({
var eventName = 'on' + name.split('_').map(function(item) { return item.capitalize(); }).join('');
var regex = new RegExp(eventName + '[a-zA-Z]+');
- if (filter && !this.el[group + '_filter']) this.el[group + '_filter'] = $$(filter)[0];
+ if (filter && !this.el[group + '_filter'])
+ this.el[group + '_filter'] = $type(filter) == 'string' ? $$(filter)[0] : filter;
filter = this.el[group + '_filter'];
try { var elements = $ES(selector, filter); }
View
@@ -76,6 +76,7 @@ var Dialog = Base.extend({
onShow: Class.empty, // must call dialog.show(), this.ready()
onHide: Class.empty,
+ onReady: Class.empty,
onSubmit: Class.empty,
onRespond: Class.empty,
@@ -84,10 +85,11 @@ var Dialog = Base.extend({
centered: false,
lightbox: false,
+ reset: false,
- inside: null,
- validate: null,
- trigger: '#' + template,
+ inside: null,
+ validates: null,
+ trigger: '#' + template,
dialog_template: '#template_dialog',
method: 'post'
@@ -101,7 +103,7 @@ var Dialog = Base.extend({
inside: this.options.inside,
trigger: this.options.trigger
},
- dialog: { close: '.close', form: 'form', submit: '.submit', validate: this.options.validate }
+ dialog: { close: '.close', forms: 'form', submits: '.submit', validates: this.options.validates }
};
this.elements.dialog.filter = this.elements.container.dialog;
@@ -114,23 +116,26 @@ var Dialog = Base.extend({
Global.Lightbox.attachDialog(this);
if (this.options.trigger)
this.onTriggerClick = function(e) { e.stop(); this.show(); };
- if (this.options.validate) {
+ if (this.options.reset)
+ this.setOptions({ onShow: function() { this.reset(); } });
+ if (this.options.validates) {
this.setOptions({
- onValidationFailed: function(input, message) {
+ onValidationFailed: function(validation, input, message) {
var value = input.value;
input.getFx().start({ 'background-color': '#FFE2DF' });
input.addEvent('keyup', function() { if (input.value != value) input.setStyle('background-color', '#fff'); });
input.addEvent('focus', function() {
- if (message[0] == this.el.validate.innerHTML) return;
- this.el.validate.hide();
- this.el.validate.setHTML(message[0]);
- this.el.validate.fadeIn();
+ if (message[0] == validation.innerHTML) return;
+ validation.hide();
+ validation.setHTML(message[0]);
+ validation.fadeIn();
}.bind(this));
},
onValidationReset: function(input) {
input.removeEvents('keyup');
input.removeEvents('focus');
- input.addEvent('focus', function() { this.el.validate.setHTML(''); }.bind(this));
+ input.setStyle('background', '#fff');
+ input.addEvent('focus', function() { this.el.validates.setHTML(''); }.bind(this));
}
});
}
@@ -144,15 +149,16 @@ var Dialog = Base.extend({
e.stop();
this.hide();
},
- onFormKeyDown: function(e) {
+ onFormsKeyDown: function(e, el) {
if (e.key == 'esc') this.hide();
- if (e.key == 'enter' && e.target.tagName != 'TEXTAREA') this.submit(e);
+ if (e.key == 'enter' && e.target.tagName != 'TEXTAREA') this.onSubmitsClick(e, el);
},
- onFormSubmit: function(e) {
+ onFormsSubmit: function(e) {
e.stop();
},
- onSubmitClick: function(e) {
- this.submit(e);
+ onSubmitsClick: function(e, el) {
+ var form = el.tagName == 'FORM' ? el : el.childOf({ tag: 'form' });
+ this.submit(e, form);
},
/*
@@ -172,7 +178,14 @@ var Dialog = Base.extend({
Called by onShow. Focuses the form.
*/
- ready: function() { this.el.dialog.focusFirst(); },
+ ready: function() {
+ this.el.dialog.focusFirst();
+ this.fireEvent('onReady', [ this.el.dialog ]);
+
+ // table support
+ if (this.el.pages && !this.table)
+ this.table = new Table(this.el.pages, this.options.table);
+ },
/*
Property: render
@@ -188,6 +201,9 @@ var Dialog = Base.extend({
var dialog = this.el.dialog_template.render(data);
dialog.id = this.elements.container.dialog.substring(1);
+ var old = $(dialog.id);
+ if (old) old.remove();
+
if (this.el.dialog) {
this.el.dialog.replaceWith(dialog);
if (this.options.centered) this.el.dialog.center();
@@ -233,8 +249,10 @@ var Dialog = Base.extend({
},
reset: function() {
- this.el.form.reset();
- $ES('input, textarea', this.el.form).each(function(item) { this.fireEvent('onValidationReset', item); }, this);
+ this.el.forms.each(function(item) { item.reset(); });
+ $ES('input, textarea', this.el.forms).each(function(item) {
+ if (item.getProperty('type') != 'submit') this.fireEvent('onValidationReset', item);
+ }, this);
},
resize: function() {
@@ -272,31 +290,31 @@ var Dialog = Base.extend({
Submits the dialog form.
*/
- submit: function(e) {
+ submit: function(e, form) {
e.stop();
- if (this.el.form.hasClass('no_ajax'))
- this.el.form.submit();
+ if (form.hasClass('no_ajax'))
+ form.submit();
else {
this.fireEvent('onSubmit', this.el.dialog);
- this.el.form.send({
+ form.send({
method: this.options.method,
onComplete: function(r) {
var json = Json.evaluate(r);
this.fireEvent('onRespond', [ this.el.dialog, json ]);
if (json.errors) {
- var inputs = $ES('input, textarea', this.el.form).filter(function(item) {
+ var inputs = $ES('input, textarea', form).filter(function(item) {
return (item.getProperty('type') != 'submit');
});
inputs = inputs.sort(function(a, b) {
return a.getProperty('tabindex').toInt() - b.getProperty('tabindex').toInt();
});
- var index = 1000;
+ var index = 1000, validation = $ES(this.options.validates, form)[0];
inputs.each(function(item) { this.fireEvent('onValidationReset', item); }, this);
$each(json.errors, function(value, model) {
$each(value, function(messages, name) {
- var el = this.el.form[model + '[' + name + ']'];
+ var el = form[model + '[' + name + ']'];
index = inputs.indexOf(el) < index ? inputs.indexOf(el) : index;
- this.fireEvent('onValidationFailed', [ el , messages ]);
+ this.fireEvent('onValidationFailed', [ validation, el , messages ]);
}, this);
}, this);
inputs[index].select();
View
@@ -22,11 +22,12 @@ Element.extend({
isClass - (optional) Search by class name if true.
*/
- childOf: function(id, isClass) {
+ childOf: function(options) {
var element = this;
do {
- if (isClass && $(element).hasClass(id)) return element;
- if (!isClass && element.id == id) return element;
+ if (options.className && $(element).hasClass(options.className)) return element;
+ if (options.id && element.id == options.id) return element;
+ if (options.tag && element.tagName == options.tag.toUpperCase()) return element;
} while ((element.tagName != 'HTML') && (element = $(element.parentNode)));
return false;
},
View
118 Gmap.js
@@ -0,0 +1,118 @@
+var Gmap = new Class({
+ initialize: function(options) {
+ this.options = { id: 'map', width: 600, height: 300 };
+ this.setOptions(options);
+
+ $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);
+
+ 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;
+ },
+ create: {
+ imageUrl: function(type, num, highlight) {
+ return '/images/markers/' + type + '/' + (highlight ? 'highlight/' : '') + (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;
+ },
+ marker: function(latlng, type, num) {
+ var marker = new GMarker(latlng, { icon: this.create.icon(type, num), zIndexProcess: function() { return 100 - num; } });
+
+ GEvent.addListener(marker, 'mouseover', function() {
+ this.highlight(true, type, num);
+ this.fireEvent('onMarkerOver', [marker, type, num]);
+ }.bind(this));
+
+ GEvent.addListener(marker, 'mouseout', function() {
+ this.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);
+ this.markers[type][num] = marker;
+ this.map.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));
+ },
+ 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);
+ },
+ 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));
+ }
+});
+
+Gmap.implement(new Events);
+Gmap.implement(new Options);
Oops, something went wrong.

0 comments on commit 7750564

Please sign in to comment.