Skip to content
Browse files

Tons of work on Table.js for integration with front page, along with …

…other classes
  • Loading branch information...
1 parent fd62a7d commit e09294ce9bb6c00cfec970ee4b26588f91119e13 Winton Welsh committed May 20, 2008
Showing with 128 additions and 85 deletions.
  1. +3 −2 Dialog.js
  2. +11 −2 Gmap.js
  3. +1 −1 Lightbox.js
  4. +113 −80 Table.js
View
5 Dialog.js
@@ -85,6 +85,7 @@ var Dialog = Base.extend({
centered: false,
lightbox: false,
+ rerender: false,
reset: false,
inside: null,
@@ -170,7 +171,7 @@ var Dialog = Base.extend({
*/
hide: function(keep_lightbox) {
- if (this.el.dialog) this.fireEvent('onHide', [ this.el.dialog, keep_lightbox]);
+ if (this.el.dialog) this.fireEvent('onHide', [ this.el.dialog, keep_lightbox ]);
},
/*
@@ -268,7 +269,7 @@ var Dialog = Base.extend({
*/
show: function(data) {
- if (!this.el.dialog) this.render(data);
+ if (!this.el.dialog || this.options.rerender) this.render(data);
if (this.options.centered) {
this.el.dialog.setStyles({
display: '',
View
13 Gmap.js
@@ -21,7 +21,7 @@ var Gmap = new Class({
},
create: {
imageUrl: function(type, num, highlight) {
- return '/images/markers/' + type + '/' + (highlight ? 'highlight/' : '') + (num+1) + '.png';
+ return '/images/markers/' + type + '/' + (highlight ? 'highlights/' : '') + (num+1) + '.png';
},
icon: function(type, num) {
var icon = new GIcon();
@@ -62,7 +62,7 @@ var Gmap = new Class({
}
},
highlight: function(on, type, num) {
- this.markers[type][num].setImage(this.create.imageUrl(type, num));
+ this.markers[type][num].setImage(this.create.imageUrl(type, num, on));
},
changeZoomImage: function() {
this.map.addControl(new GSmallZoomControl());
@@ -98,6 +98,15 @@ var Gmap = new Class({
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);
View
2 Lightbox.js
@@ -30,7 +30,7 @@ var Lightbox = new Class({
fire: function() {
this.fireEvent('onClick');
},
- hide: function(dialog, fx, keep_lightbox) {
+ hide: function(dialog, keep_lightbox) {
if (!keep_lightbox) {
this.detach();
this.box.hide();
View
193 Table.js
@@ -4,43 +4,70 @@ var Table = Base.extend({
// .title (optional)
// .categories (optional)
// .header (optional)
- // .table
+ // .content
// (rows)
- // .paginate (optional)
initialize: function(container, options) {
this.container = container;
- this.options = { map: false, pagination_url: false };
+ this.options = {
+ map: false,
+ pagination_url: false,
+ row_height: 30,
+ tips: false,
+
+ onRowAdd: Class.empty,
+ onRowAddFinished: Class.empty,
+ onRowRemove: Class.empty,
+ onRowClick: Class.empty,
+ onRowOver: Class.empty,
+ onRowOut: Class.empty,
+ onTitleClick: Class.empty
+
+ };
this.elements = {
table: {
filter: container,
title: '.title',
categories: '.categories',
- table: '.table',
- paginate: '.paginate'
+ content: '.content'
}
};
this.parent();
this.setOptions(options);
+ if (this.options.tips)
+ this.setOptions({
+ onRowAddFinished: function() {
+ var images = $ES('.tip', this.container);
+ images.each(function(item, index) {
+ item.setProperty('title', "::<img src='" + item.getProperty('alt') + "' />");
+ item.setProperty('alt', '');
+ });
+ new Tips(images, {
+ fixed: false,
+ showDelay: 0,
+ hideDelay: 0,
+ onShow: function(t) { t.fadeIn(100); },
+ onHide: function(t) { if (t.fadeOut) t.fadeOut(100); }
+ });
+ }
+ });
+
if (this.options.map) {
- this.map = new Gmap(this.options.map);
- this.reload.delay(200, this);
+ this.map = this.options.map.width ? new Gmap(this.options.map) : this.options.map;
+ this.attach.delay(200, this);
} else
- this.reload();
-
- this.attachTitle();
+ this.attach();
},
onCategoriesClick: function(e) {
e.stop();
if (e.target.tagName != 'A') return;
var href = this.options.pagination_url + (this.options.pagination_url.indexOf('?') > -1 ? '&' : '?') + 'category=' + e.target.innerHTML;
var old_span = $ES('span', this.el.categories[0])[0];
var span = new Element('span');
- var a = new Element('a');
+ var a = new Element('a', { href: '#' });
span.setHTML(e.target.innerHTML);
a.setHTML(old_span.innerHTML);
- a.setProperty('href', '#');
old_span.replaceWith(a);
e.target.replaceWith(span);
Global.Indicator.show();
@@ -53,104 +80,110 @@ var Table = Base.extend({
}.bind(this)
}).request();
},
- reload: function() {
+ onTitleClick: function(e, el, els, disable_event) {
+ if (e) e.stop();
+
+ var shrink;
+ var on = $ES('.arrow .on', this.el.title);
+ var off = $ES('.arrow .off', this.el.title);
+
+ if (!on || !off) return;
+
+ // title fold
+ if (this.el.title.hasClass('on')) {
+ this.el.title.removeClass('on');
+ off.show();
+ on.hide();
+ shrink = true;
+ } else {
+ this.el.title.addClass('on');
+ on.show();
+ off.hide();
+ shrink = false;
+ }
+
+ this.el.content.getChildren().each(function(row) {
+ row.show();
+ $(row).getFx(300).start({ height: shrink ? 0 : this.options.row_height });
+ }, this);
+
+ if (!disable_event)
+ this.fireEvent('onTitleClick', [ this.el.title, shrink ]);
+ },
+ attach: function() {
this.loadElements('table');
- // rows mouseover
- this.el.table.getChildren().each(function(item, index) {
- this.fireEvent('onRowAdd', [ item, index, $ES('form', item)[0] ]);
-
+ var fn = function(item, index) {
+ var form = $ES('form', item)[0];
+ this.fireEvent('onRowAdd', [ item, index, form ]);
+
item.addEvent('click', function(e) {
+ e.stop();
if (item.getStyle('height').toInt() == 0) return;
- this.fireEvent('onRowClick', [ item, index, e ]);
+ this.fireEvent('onRowClick', [ item, index, form ]);
}.bindWithEvent(this));
-
+
item.addEvent('mouseover', function(e) {
if (item.getStyle('height').toInt() == 0) return;
item.addClass('mouseover');
- this.fireEvent('onRowOver', [ item, index ]);
+ this.fireEvent('onRowOver', [ item, index, form ]);
}.bindWithEvent(this));
-
+
item.addEvent('mouseout', function(e) {
if (item.getStyle('height').toInt() == 0) return;
item.removeClass('mouseover');
- this.fireEvent('onRowOut', [ item, index ]);
+ this.fireEvent('onRowOut', [ item, index, form ]);
}.bindWithEvent(this));
- }, this);
+ };
+ this.el.content.getChildren().each(fn, this);
this.fireEvent('onRowAddFinished');
- // pagination
this.attachPagination();
},
attachPagination: function() {
- content = $ES('.content', this.container)[0];
$ES('.pagination a', this.container).addEvent('click', function(e) {
e.stop();
- Global.Indicator.show();
- this.el.title.removeClass('on');
- var href = e.target.getProperty('href');
- if (this.options.pagination_url)
- href = this.options.pagination_url + (this.options.pagination_url.indexOf('?') > -1 ? '&' : '?') + href.split('?')[1];
- new Ajax(href, {
- method: 'get',
- onComplete: function(r) {
- var json = Json.evaluate(r);
- var slide = e.target.getParent().getChildren().filter(function(item) { return item.hasClass('current') || item == e.target; });
- slide = { 'margin-left': 600 * (slide[0] == e.target ? 1 : -1) };
- content.getFx(500).start(slide).chain(function() {
- this.reloadContent(json.pages);
- Global.Indicator.hide();
- }.bind(this));
- }.bind(this)
- }).request();
+ var slide = e.target.getParent().getChildren().filter(function(item) { return item.hasClass('current') || item == e.target; });
+ this.reload(e.target.getProperty('href'), slide[0] == e.target ? 1 : -1);
}.bindWithEvent(this));
},
- attachTitle: function() {
- if (!this.el.title) return;
- this.el.title.addEvent('click', function(e) {
- e.stop();
-
- var shrink = true;
- var on = $ES('.arrow .on', this.el.title);
- var off = $ES('.arrow .off', this.el.title);
-
- if (!on || !off) return;
-
- // title fold
- if (this.el.title.hasClass('on')) {
- this.el.title.removeClass('on');
- off.show();
- on.hide();
- shrink = false;
- } else {
- this.el.title.addClass('on');
- on.show();
- off.hide();
- }
-
- this.el.table.getChildren().each(function(row) {
- row.show();
- if (shrink && !this.offsetHeight) this.offsetHeight = row.offsetHeight;
- new Fx.Styles(row, {'duration': 300, 'wait': false}).start({
- height: shrink ? 0 : this.offsetHeight
- });
- });
- }.bindWithEvent(this));
+ reload: function(href, slide) {
+ href = href || '?';
+ slide = slide || 0;
+ if (this.options.pagination_url)
+ href = this.options.pagination_url + (this.options.pagination_url.indexOf('?') > -1 ? '&' : '?') + href.split('?')[1];
+ Global.Indicator.show();
+ this.el.title.removeClass('on');
+ new Ajax(href, {
+ method: 'get',
+ onComplete: function(r) {
+ var json = Json.evaluate(r);
+ slide = { 'margin-left': 600 * slide };
+ this.el.content.getFx(500).start(slide).chain(function() {
+ this.reloadContent(json.pages);
+ Global.Indicator.hide();
+ }.bind(this));
+ }.bind(this)
+ }).request();
},
reloadContent: function(content) {
- this.el.table.getChildren().each(function(item, index) {
+ this.el.content.getChildren().each(function(item, index) {
this.fireEvent('onRowRemove', [ item, index ]);
}, this);
+
+ 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);
- this.el.table.getPrevious().remove(); // hr
- this.el.table.getPrevious().remove(); // header
- if (this.el.table.getNext())
- this.el.table.getNext().remove(); // pagination
- this.el.table.remove();
div.getChildren().each(function(item) { item.injectInside(this.container); }, this);
- this.reload();
+ this.attach();
}
});

0 comments on commit e09294c

Please sign in to comment.
Something went wrong with that request. Please try again.