Permalink
Browse files

Renaming resizable, Grid and List updates

  • Loading branch information...
1 parent 55e4a8c commit 2401a4b3702f4681fcf2e78690c85d71c6947063 @daffl daffl committed Aug 2, 2012
View
@@ -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');
View
@@ -6,5 +6,5 @@ steal(
'canui/list',
'canui/grid',
'canui/positionable',
- 'canui/resize'
+ 'canui/resizable'
)
View
@@ -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;
View
@@ -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() {
View
@@ -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();
},
View
@@ -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>
@@ -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 {
@@ -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
@@ -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;
@@ -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>
View
@@ -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) {
View
@@ -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');
- })
+ });
})
View
@@ -7,7 +7,7 @@
*
* http://docs.jquery.com/UI/Position
*/
-(function( $, undefined ) {
+steal('jquery', function( $, undefined ) {
$.ui = $.ui || {};
@@ -387,4 +387,4 @@
}
};
-}( $ ) );
+});
@@ -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;
@@ -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>
@@ -1,4 +1,4 @@
-.can_ui_resize {
+.resizable {
position: relative;
}
Oops, something went wrong.

0 comments on commit 2401a4b

Please sign in to comment.