Renaming resizable, Grid and List updates

bitovi · Aug 2, 2012 · 2401a4b · 2401a4b
1 parent 55e4a8c
commit 2401a4b
Show file tree

Hide file tree

Showing 24 changed files with 119 additions and 93 deletions.
diff --git a/build/jakefile.js b/build/jakefile.js
@@ -15,7 +15,7 @@ var path = require("path"),
 	// Additional files to deploy to a release directory
 	deployFiles = {
 		'split/split.css' : 'split.css',
-		'resize/resize.css' : 'resize.css'
+		'resizable/resizable.css' : 'resizable.css'
 	};
 
 desc('Runs make.js to build the application');

diff --git a/canui.js b/canui.js
@@ -6,5 +6,5 @@ steal(
 	'canui/list',
 	'canui/grid',
 	'canui/positionable',
-	'canui/resize'
+	'canui/resizable'
 )
diff --git a/fills/fills1.html b/fills/fills1.html
@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
 	<title>filler</title>
-	<link type="text/css" href="../resize/resize.css" rel="stylesheet"/>
+	<link type="text/css" href="../resizable/resizable.css" rel="stylesheet"/>
 	<style type='text/css'>
 		.error {
 			border: solid 1px red;

diff --git a/grid/grid.html b/grid/grid.html
@@ -26,6 +26,8 @@
   <section style="height: 200px;">
     <table id="grid" class="table table-bordered"></table>
   </section>
+
+  <input id="page" type="text" />
 </div>
 
 
@@ -48,6 +50,12 @@
 
         can.fixture('GET /models', store.findAll);
 
+        var offset = 0,
+            paginator = new can.Observe({
+              offset : 0,
+              limit : 10
+            });
+
         var dfd = Model.findAll();
 
         $('#grid').grid({
@@ -64,10 +72,24 @@
                 return observe.attr('name') + ' ' + observe.attr('age');
               });
             }
+          }, {
+              header : 'Things',
+              content : function(observe) {
+                return observe._cid;
+            }
           }],
           scrollable : true,
-          list : dfd
+          list : can.compute(function() {
+            return Model.findAll({
+              offset : paginator.attr('offset'),
+              limit : paginator.attr('limit')
+            });
           })
+        })
+
+        $('#page').change(function() {
+          paginator.attr('offset', $(this).val());
+        });
 
 //        dfd.done(function(list) {
 //          setTimeout(function() {

diff --git a/grid/grid.js b/grid/grid.js
@@ -16,13 +16,14 @@ steal('jquery', 'can/control', 'canui/list', 'can/view/ejs', 'canui/table_scroll
 			view : function(observe) {
 				var row = [], self = this;
 				can.each(this.options.columns, function(col) {
-					row.push(can.isFunction(col.content) ?
+					var content = can.isFunction(col.content) ?
 						col.content.call(self, observe, col) :
 						can.compute(function() {
 							return observe.attr(col.content);
-						}));
+						});
+					row.push(content);
 				});
-				row.cid = observe.cid;
+				row.cid = observe._cid;
 				return can.view('//canui/grid/views/row.ejs', row);
 			},
 			headerContent : '//canui/grid/views/head.ejs',
@@ -42,10 +43,14 @@ steal('jquery', 'can/control', 'canui/list', 'can/view/ejs', 'canui/table_scroll
 			}
 			can.each(['emptyContent', 'loadingContent', 'footerContent'], function(name) {
 				var current = options[name] || self.constructor.defaults[name];
-				if(!can.$(current).length) {
-					options[name] = '<tr><td colspan="' + ops.columns.length
+				if(can.isFunction(current)) {
+					current = current.call(this, options);
+				}
+				if(!can.$(current).is('tr')) {
+					current = '<tr><td colspan="' + ops.columns.length
 						+ '">' + current + '</td></tr>';
 				}
+				options[name] = current;
 			});
 			if(!(options.columns instanceof can.Observe.List)) {
 				options.columns = new can.Observe.List(options.columns);
@@ -55,11 +60,13 @@ steal('jquery', 'can/control', 'canui/list', 'can/view/ejs', 'canui/table_scroll
 		},
 
 		init : function(el, ops) {
-			this.el.header.append(this._fnView('headerContent', this.options.columns));
+			var header = can.isFunction(this.options.headerContent) ?
+					this.options.headerContent.call(this, this.options.columms) :
+					can.view(this.options.headerContent, this.options.columns);
+			this.el.header.append(header);
 			this.control = {
 				list : this.el.body.control(can.ui.List)
 			}
-			// this.el.footer.append(this._fnView('footerContent', this.options.columns));
 			this.update();
 		},
 

diff --git a/grid/views/row.ejs b/grid/views/row.ejs
@@ -3,7 +3,7 @@
   <% if(current.isComputed) { %>
     <td><%== current() %></td>
   <% } else { %>
-    <td <%== (el) -> can.append(el, current) %>></td>
+    <td <%= (el) -> can.append(el, current) %>></td>
   <% } %>
 <% }); %>
 </tr>
diff --git a/incubator/layout/fill/demo.html b/incubator/layout/fill/demo.html
@@ -3,7 +3,7 @@
 <html lang="en">
 	<head>
 		<title>fill</title>
-        <link type="text/css" href="../resize/resize.css" rel="stylesheet" />
+        <link type="text/css" href="../resizable/resizable.css" rel="stylesheet" />
 		<style type='text/css'>
             body {font-family: verdana}
             #box {

diff --git a/incubator/layout/fill/fill.html b/incubator/layout/fill/fill.html
@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
 	<title>fill</title>
-	<link type="text/css" href="../resize/resize.css" rel="stylesheet"/>
+	<link type="text/css" href="../resizable/resizable.css" rel="stylesheet"/>
 	<style type='text/css'>
 		body {
 			font-family: verdana

diff --git a/incubator/layout/fill/fill2.html b/incubator/layout/fill/fill2.html
@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
 	<title>filler</title>
-	<link type="text/css" href="../resize/resize.css" rel="stylesheet"/>
+	<link type="text/css" href="../resizable/resizable.css" rel="stylesheet"/>
 	<style type='text/css'>
 		.error {
 			border: solid 1px red;

diff --git a/incubator/layout/table_fill/table_fill.html b/incubator/layout/table_fill/table_fill.html
@@ -26,7 +26,7 @@
 
 			}
         </style>
-		<link type="text/css" href="../resize/resize.css" rel="stylesheet" />
+		<link type="text/css" href="../resizable/resizable.css" rel="stylesheet" />
 	</head>
 	<body>
 		<a href="javascript://" id='scrollable'>Make Scrollable</a>

diff --git a/list/list.js b/list/list.js
@@ -15,19 +15,12 @@ function($) {
 		/**
 		 * Updates the options and re-renders the list.
 		 *
-		 * @param {Object} [options] The updated options
+		 * @param {Object} [options] The options to udpate
 		 */
 		update : function(options) {
 			can.Control.prototype.update.call(this, options);
 			var list = this.options.list;
-			if(can.isFunction(list)) {
-				list = can.compute(list);
-			}
 			if(list && list.isComputed) {
-				// TODO doesn't trigger
-				this.on(list, 'change', can.proxy(function(ev, newVal) {
-					this._update(newVal);
-				}, this));
 				list = list();
 			}
 			this._update(list);
@@ -92,6 +85,12 @@ function($) {
 			return can.isFunction(val) ? val.apply(this, args || []) : val;
 		},
 
+		'{list} change' : function(target, ev, newVal) {
+			if(target.isComputed) {
+				this._update(newVal);
+			}
+		},
+
 		'{data} length' : function(list, ev, length) {
 			if(length === 0) {
 				this._render();
@@ -124,7 +123,7 @@ function($) {
 		},
 
 		/**
-		 * Returns all rows for a list of observables.
+		 * Returns all rows or all rows representing the given list of observables.
 		 *
 		 * @param arg
 		 * @return {*}
@@ -145,6 +144,13 @@ function($) {
 			return can.$(elements);
 		},
 
+		/**
+		 * Returns a `can.Observe.List` containing all observes (equivalent to `.list()`)
+		 * or all observes representing the given rows.
+		 *
+		 * @param {jQuery} rows The collection of row elements
+		 * @return {can.Observe.List}
+		 */
 		items : function(rows)
 		{
 			if(!rows) {
@@ -168,9 +174,9 @@ function($) {
 		},
 
 		/**
-		 * Returns all
+		 * Returns a `can.Observe.List` of the current list data.
 		 *
-		 * @param {Collection} rows An array or DOM element collection
+		 * @param {can.Observe.List|Array|can.compute|can.Deferred} newlist The list to replace
 		 * @return {can.Observe.List|can.Observe}
 		 */
 		list : function(newlist) {

diff --git a/list/list_test.js b/list/list_test.js
@@ -62,6 +62,29 @@ steal('jquery', 'funcunit', 'canui/list', 'can/view/ejs', function($) {
 		equal($.trim(container.find('li:first').html()), 'Deferred I', 'First li rendered');
 	});
 
+	test("Initialize with compute", function() {
+		var compute = can.compute([
+			{
+				name : 'Compute I',
+				age : 10
+			}, {
+				name : 'Compute II',
+				age : 18
+			}
+		]);
+
+		var container = $('<ul>').appendTo('#qunit-test-area').list({
+			view : '//canui/list/test.ejs',
+			loadingContent : '<li>Loading</li>',
+			emptyContent : '<li>Empty!</li>',
+			list : compute
+		});
+
+		equal($.trim(container.find('li:first').html()), 'Compute I', 'First li rendered');
+		compute([]);
+		equal($.trim(container.find('li:first').html()), 'Empty!', 'Showing empty content after updating compute');
+	});
+
 	test("items", function() {
 		var container = $('<ul>').appendTo('#qunit-test-area').list({
 			view : '//canui/list/test.ejs',
@@ -102,5 +125,5 @@ steal('jquery', 'funcunit', 'canui/list', 'can/view/ejs', function($) {
 
 		var el = container.list('rowElements', people[0]);
 		equal(can.$.trim(el.html()), 'John I', 'Got element with correct HTML');
-	})
+	});
 })
diff --git a/positionable/position.js b/positionable/position.js
@@ -7,7 +7,7 @@
  *
  * http://docs.jquery.com/UI/Position
  */
-(function( $, undefined ) {
+steal('jquery', function( $, undefined ) {
 
 	$.ui = $.ui || {};
 
@@ -387,4 +387,4 @@
 		}
 	};
 
-}( $ ) );
+});
diff --git a/positionable/positionable.html b/positionable/positionable.html
@@ -9,6 +9,7 @@
 				font-family: Verdana, Tahoma, sans-serif;
 				/*overflow: hidden;*/
 			}
+
 			div#parent {
 				width: 100px;
 				height: 100px;
@@ -42,9 +43,11 @@
 			form {
 				float: left;
 			}
+
 			fieldset {
 				font-family: monospace;
 			}
+
 			li {
 				list-style: none outside none;
 				padding: 2px 0;

diff --git a/resize/funcunit.html → resizable/funcunit.html b/resize/funcunit.html → resizable/funcunit.html
@@ -6,16 +6,16 @@
                 margin: 0px; padding: 0px;
             }
         </style>
-		<script type='text/javascript' src='../../steal/steal.js?canui/resize/resize_test.js'></script>
+		<script type='text/javascript' src='../../steal/steal.js?canui/resizable/resizable_test.js'></script>
     </head>
     <body>
 
-        <h1 id="qunit-header">resizable Test Suite</h1>
-    	<h2 id="qunit-banner"></h2>
-    	<div id="qunit-testrunner-toolbar"></div>
-    	<h2 id="qunit-userAgent"></h2>
+    <h1 id="qunit-header">resizable Test Suite</h1>
+    <h2 id="qunit-banner"></h2>
+    <div id="qunit-testrunner-toolbar"></div>
+    <h2 id="qunit-userAgent"></h2>
 		<div id="test-content"></div>
-        <ol id="qunit-tests"></ol>
+    <ol id="qunit-tests"></ol>
 		<div id="qunit-test-area"></div>
     </body>
 </html>
diff --git a/resize/resize.css → resizable/resizable.css b/resize/resize.css → resizable/resizable.css
@@ -1,4 +1,4 @@
-.can_ui_resize {
+.resizable {
 	position: relative;
 }