Skip to content
Browse files

Clean up Component.js and DataTable.js to only depend on jquery and j…

…query.haml
  • Loading branch information...
1 parent 222dd21 commit ca3c9aed40a4b44b45ab8fb01e245713a7500b2d Timothy Caswell committed Sep 23, 2009
Showing with 126 additions and 99 deletions.
  1. +37 −26 lib/TC/Component.js
  2. +89 −73 lib/TC/components/DataTable.js
View
63 lib/TC/Component.js
@@ -1,31 +1,42 @@
-// Parent constructor for all html components
-TC.Component = function (controller, data) {
- Util.mixin(this, data);
- var placeholder, self = this;
+/*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true */
+/*globals TC, jQuery */
+
+(function ($) {
- // This is called by the controller and passes the work on to the get_haml function
- // that's defined in the actual constructor implementation
- this.render = function (contents) {
-
- // Use a placeholder so we can redraw the component
- placeholder = $.haml.placeholder(function () {
- var haml = self.get_haml();
- return haml;
+ // Parent constructor for all html components
+ TC.Component = function (controller, data) {
+ var placeholder, self = this;
+
+ $.each(data, function (name, value) {
+ self[name] = value;
});
- this.element = placeholder.inject();
- return this.element;
- };
-
- this.render_children = function () {
- if (this.children) {
- return Util.map(this.children, function (child) {
- return child.render();
+
+ // This is called by the controller and passes the work on to the get_haml function
+ // that's defined in the actual constructor implementation
+ this.render = function (contents) {
+
+ // Use a placeholder so we can redraw the component
+ placeholder = $.haml.placeholder(function () {
+ var haml = self.get_haml();
+ return haml;
});
- }
+ this.element = placeholder.inject();
+ return this.element;
+ };
+
+ this.render_children = function () {
+ if (this.children) {
+ return $.map(this.children, function (child) {
+ return child.render();
+ });
+ }
+ };
+
+ this.update = function () {
+ self.element = placeholder.update();
+ return self.element;
+ };
};
+
- this.update = function () {
- self.element = placeholder.update();
- return self.element;
- };
-};
+}(jQuery));
View
162 lib/TC/components/DataTable.js
@@ -1,78 +1,73 @@
-// TODO: document
-// see contact_management.browse_groups for now
-TC.components.DataTable = function (controller, data) {
- var self, layout, params, css, table_model, columns, check_state, widths, sum;
- self = this;
-
- this.initialize = function () {
- check_state = false;
- params = this.params;
- if (params.observe) {
- controller.listen(params.observe.bound_variable, function (value) {
- params.on_observe(self, value);
- }, self);
- }
- widths = params.widths || {};
- sum = 0;
- Util.map_pairs(columns, function (name) {
- widths[name] = widths[name] || 1;
- sum += widths[name];
- });
- Util.map_pairs(columns, function (name) {
- widths[name] = Math.floor(100 * widths[name] / sum) + "%";
- });
-
- if (params.checked) {
- controller.listen(params.checked.bound_variable, function (value) {
- self.update();
- }, self);
- }
-
- };
+/*jslint white: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true */
+/*globals TC, jQuery */
+
+(function ($) {
+
+ TC.components.DataTable = function (controller, data) {
+ var self, layout, params, css, table_model, columns, check_state, widths, sum;
+ self = this;
+
+ this.initialize = function () {
+ check_state = false;
+ params = this.params;
+ if (params.observe) {
+ controller.listen(params.observe.bound_variable, function (value) {
+ params.on_observe(self, value);
+ }, self);
+ }
+ widths = params.widths || {};
+ sum = 0;
- this.get_haml = function () {
- layout = this.layout;
- css = parse_layout(layout);
- table_model = params.table_model;
- columns = params.columns;
- var num_rows = table_model.get_num_rows(self);
+ $.each(columns, function (name) {
+ widths[name] = widths[name] || 1;
+ sum += widths[name];
+ });
+ $.each(columns, function (name) {
+ widths[name] = Math.floor(100 * widths[name] / sum) + "%";
+ });
- function get_table_haml() {
- var checked, headers;
if (params.checked) {
- checked = params.checked.get();
+ controller.listen(params.checked.bound_variable, function (value) {
+ self.update();
+ }, self);
}
- css.overflow = "auto";
- function on_toggle_all(ev) {
- var id, index;
- check_state = !check_state;
+ };
- // Update the closure variable checked
- for (index = 0; index < num_rows; index += 1) {
- id = table_model.get_value_at(index, "id");
- if (check_state) {
- checked[id] = true;
- } else {
- delete(checked[id]);
- }
+ this.get_haml = function () {
+ layout = this.layout;
+ css = TC.parse_layout(layout);
+ table_model = params.table_model;
+ columns = params.columns;
+ var num_rows = table_model.get_num_rows(self);
+
+ function get_table_haml() {
+ var checked, headers, rows, index;
+ if (params.checked) {
+ checked = params.checked.get();
}
- // Update the state of all checkboxes in the dom too
- $(':checkbox', $(this).closest('table')).attr('checked', check_state);
- params.checked.set(checked, self);
- }
+ css.overflow = "auto";
+ function on_toggle_all(ev) {
+ var id, index;
+ check_state = !check_state;
+ // Update the closure variable checked
+ for (index = 0; index < num_rows; index += 1) {
+ id = table_model.get_value_at(index, "id");
+ if (check_state) {
+ checked[id] = true;
+ } else {
+ delete(checked[id]);
+ }
+ }
- headers = Util.map_pairs(columns, function (key, name) {
- return ["%th", {css: {width: widths[key]}}, name];
- });
- if (params.checked) {
- headers = [["%td", ["%input", {checked: check_state, $: {click: [on_toggle_all]}, type: "checkbox", style: "width:16px"}]]].concat(headers);
- }
- return ["%table.tc-datatable",
- ["%thead.ui-widget-header", ["%tr", headers]],
- ["%tbody", Util.map(Util.range(num_rows), function (index) {
+ // Update the state of all checkboxes in the dom too
+ $(':checkbox', $(this).closest('table')).attr('checked', check_state);
+ params.checked.set(checked, self);
+ }
+
+ function render_row(index) {
var id, cells, hover, events;
function on_click(ev) {
@@ -88,8 +83,9 @@ TC.components.DataTable = function (controller, data) {
id = table_model.get_value_at(index, "id");
- cells = Util.map_pairs(columns, function (key, name) {
- return ["%td", {css: {width: widths[key]}}, table_model.get_value_at(index, key)];
+ cells = [];
+ $.each(columns, function (key, name) {
+ cells.push(["%td", {css: {width: widths[key]}}, table_model.get_value_at(index, key)]);
});
if (params.checked) {
@@ -109,12 +105,32 @@ TC.components.DataTable = function (controller, data) {
events.click = [on_click];
}
return ["%tr", {$: events}, cells];
- })]
- ];
- }
+ }
+
+ headers = [];
+ $.each(columns, function (key, name) {
+ headers.push(["%th", {css: {width: widths[key]}}, name]);
+ });
+ if (params.checked) {
+ headers = [["%td", ["%input", {checked: check_state, $: {click: [on_toggle_all]}, type: "checkbox", style: "width:16px"}]]].concat(headers);
+ }
- return [".ui-widget-content", {css: css}, (num_rows === undefined) ? "Loading...": get_table_haml()];
+ rows = [];
+ for (index = 0; index < num_rows; index += 1) {
+ rows.push(render_row(index));
+ }
+
+ return ["%table.tc-datatable",
+ ["%thead.ui-widget-header", ["%tr", headers]],
+ ["%tbody", rows]
+ ];
+ }
+
+ return [".ui-widget-content", {css: css}, (num_rows === undefined) ? "Loading...": get_table_haml()];
+ };
+
+ TC.Component.apply(this, arguments);
};
- TC.Component.apply(this, arguments);
-};
+}(jQuery));
+

0 comments on commit ca3c9ae

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