Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Renaming resizable, Grid and List updates
  • Loading branch information
daffl committed Aug 2, 2012
1 parent 55e4a8c commit 2401a4b
Show file tree
Hide file tree
Showing 24 changed files with 119 additions and 93 deletions.
2 changes: 1 addition & 1 deletion build/jakefile.js
Expand Up @@ -15,7 +15,7 @@ var path = require("path"),
// Additional files to deploy to a release directory // Additional files to deploy to a release directory
deployFiles = { deployFiles = {
'split/split.css' : 'split.css', 'split/split.css' : 'split.css',
'resize/resize.css' : 'resize.css' 'resizable/resizable.css' : 'resizable.css'
}; };


desc('Runs make.js to build the application'); desc('Runs make.js to build the application');
Expand Down
2 changes: 1 addition & 1 deletion canui.js
Expand Up @@ -6,5 +6,5 @@ steal(
'canui/list', 'canui/list',
'canui/grid', 'canui/grid',
'canui/positionable', 'canui/positionable',
'canui/resize' 'canui/resizable'
) )
2 changes: 1 addition & 1 deletion fills/fills1.html
Expand Up @@ -3,7 +3,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>filler</title> <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'> <style type='text/css'>
.error { .error {
border: solid 1px red; border: solid 1px red;
Expand Down
24 changes: 23 additions & 1 deletion grid/grid.html
Expand Up @@ -26,6 +26,8 @@
<section style="height: 200px;"> <section style="height: 200px;">
<table id="grid" class="table table-bordered"></table> <table id="grid" class="table table-bordered"></table>
</section> </section>

<input id="page" type="text" />
</div> </div>




Expand All @@ -48,6 +50,12 @@


can.fixture('GET /models', store.findAll); can.fixture('GET /models', store.findAll);


var offset = 0,
paginator = new can.Observe({
offset : 0,
limit : 10
});

var dfd = Model.findAll(); var dfd = Model.findAll();


$('#grid').grid({ $('#grid').grid({
Expand All @@ -64,10 +72,24 @@
return observe.attr('name') + ' ' + observe.attr('age'); return observe.attr('name') + ' ' + observe.attr('age');
}); });
} }
}, {
header : 'Things',
content : function(observe) {
return observe._cid;
}
}], }],
scrollable : true, 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) { // dfd.done(function(list) {
// setTimeout(function() { // setTimeout(function() {
Expand Down
21 changes: 14 additions & 7 deletions grid/grid.js
Expand Up @@ -16,13 +16,14 @@ steal('jquery', 'can/control', 'canui/list', 'can/view/ejs', 'canui/table_scroll
view : function(observe) { view : function(observe) {
var row = [], self = this; var row = [], self = this;
can.each(this.options.columns, function(col) { 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) : col.content.call(self, observe, col) :
can.compute(function() { can.compute(function() {
return observe.attr(col.content); 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); return can.view('//canui/grid/views/row.ejs', row);
}, },
headerContent : '//canui/grid/views/head.ejs', headerContent : '//canui/grid/views/head.ejs',
Expand All @@ -42,10 +43,14 @@ steal('jquery', 'can/control', 'canui/list', 'can/view/ejs', 'canui/table_scroll
} }
can.each(['emptyContent', 'loadingContent', 'footerContent'], function(name) { can.each(['emptyContent', 'loadingContent', 'footerContent'], function(name) {
var current = options[name] || self.constructor.defaults[name]; var current = options[name] || self.constructor.defaults[name];
if(!can.$(current).length) { if(can.isFunction(current)) {
options[name] = '<tr><td colspan="' + ops.columns.length current = current.call(this, options);
}
if(!can.$(current).is('tr')) {
current = '<tr><td colspan="' + ops.columns.length
+ '">' + current + '</td></tr>'; + '">' + current + '</td></tr>';
} }
options[name] = current;
}); });
if(!(options.columns instanceof can.Observe.List)) { if(!(options.columns instanceof can.Observe.List)) {
options.columns = new can.Observe.List(options.columns); options.columns = new can.Observe.List(options.columns);
Expand All @@ -55,11 +60,13 @@ steal('jquery', 'can/control', 'canui/list', 'can/view/ejs', 'canui/table_scroll
}, },


init : function(el, ops) { 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 = { this.control = {
list : this.el.body.control(can.ui.List) list : this.el.body.control(can.ui.List)
} }
// this.el.footer.append(this._fnView('footerContent', this.options.columns));
this.update(); this.update();
}, },


Expand Down
2 changes: 1 addition & 1 deletion grid/views/row.ejs
Expand Up @@ -3,7 +3,7 @@
<% if(current.isComputed) { %> <% if(current.isComputed) { %>
<td><%== current() %></td> <td><%== current() %></td>
<% } else { %> <% } else { %>
<td <%== (el) -> can.append(el, current) %>></td> <td <%= (el) -> can.append(el, current) %>></td>
<% } %> <% } %>
<% }); %> <% }); %>
</tr> </tr>
2 changes: 1 addition & 1 deletion incubator/layout/fill/demo.html
Expand Up @@ -3,7 +3,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>fill</title> <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'> <style type='text/css'>
body {font-family: verdana} body {font-family: verdana}
#box { #box {
Expand Down
2 changes: 1 addition & 1 deletion incubator/layout/fill/fill.html
Expand Up @@ -3,7 +3,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>fill</title> <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'> <style type='text/css'>
body { body {
font-family: verdana font-family: verdana
Expand Down
2 changes: 1 addition & 1 deletion incubator/layout/fill/fill2.html
Expand Up @@ -3,7 +3,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>filler</title> <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'> <style type='text/css'>
.error { .error {
border: solid 1px red; border: solid 1px red;
Expand Down
2 changes: 1 addition & 1 deletion incubator/layout/table_fill/table_fill.html
Expand Up @@ -26,7 +26,7 @@


} }
</style> </style>
<link type="text/css" href="../resize/resize.css" rel="stylesheet" /> <link type="text/css" href="../resizable/resizable.css" rel="stylesheet" />
</head> </head>
<body> <body>
<a href="javascript://" id='scrollable'>Make Scrollable</a> <a href="javascript://" id='scrollable'>Make Scrollable</a>
Expand Down
28 changes: 17 additions & 11 deletions list/list.js
Expand Up @@ -15,19 +15,12 @@ function($) {
/** /**
* Updates the options and re-renders the list. * Updates the options and re-renders the list.
* *
* @param {Object} [options] The updated options * @param {Object} [options] The options to udpate
*/ */
update : function(options) { update : function(options) {
can.Control.prototype.update.call(this, options); can.Control.prototype.update.call(this, options);
var list = this.options.list; var list = this.options.list;
if(can.isFunction(list)) {
list = can.compute(list);
}
if(list && list.isComputed) { if(list && list.isComputed) {
// TODO doesn't trigger
this.on(list, 'change', can.proxy(function(ev, newVal) {
this._update(newVal);
}, this));
list = list(); list = list();
} }
this._update(list); this._update(list);
Expand Down Expand Up @@ -92,6 +85,12 @@ function($) {
return can.isFunction(val) ? val.apply(this, args || []) : val; 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) { '{data} length' : function(list, ev, length) {
if(length === 0) { if(length === 0) {
this._render(); this._render();
Expand Down Expand Up @@ -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 * @param arg
* @return {*} * @return {*}
Expand All @@ -145,6 +144,13 @@ function($) {
return can.$(elements); 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) items : function(rows)
{ {
if(!rows) { if(!rows) {
Expand All @@ -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} * @return {can.Observe.List|can.Observe}
*/ */
list : function(newlist) { list : function(newlist) {
Expand Down
25 changes: 24 additions & 1 deletion list/list_test.js
Expand Up @@ -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'); 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() { test("items", function() {
var container = $('<ul>').appendTo('#qunit-test-area').list({ var container = $('<ul>').appendTo('#qunit-test-area').list({
view : '//canui/list/test.ejs', view : '//canui/list/test.ejs',
Expand Down Expand Up @@ -102,5 +125,5 @@ steal('jquery', 'funcunit', 'canui/list', 'can/view/ejs', function($) {


var el = container.list('rowElements', people[0]); var el = container.list('rowElements', people[0]);
equal(can.$.trim(el.html()), 'John I', 'Got element with correct HTML'); equal(can.$.trim(el.html()), 'John I', 'Got element with correct HTML');
}) });
}) })
4 changes: 2 additions & 2 deletions positionable/position.js
Expand Up @@ -7,7 +7,7 @@
* *
* http://docs.jquery.com/UI/Position * http://docs.jquery.com/UI/Position
*/ */
(function( $, undefined ) { steal('jquery', function( $, undefined ) {


$.ui = $.ui || {}; $.ui = $.ui || {};


Expand Down Expand Up @@ -387,4 +387,4 @@
} }
}; };


}( $ ) ); });
3 changes: 3 additions & 0 deletions positionable/positionable.html
Expand Up @@ -9,6 +9,7 @@
font-family: Verdana, Tahoma, sans-serif; font-family: Verdana, Tahoma, sans-serif;
/*overflow: hidden;*/ /*overflow: hidden;*/
} }

div#parent { div#parent {
width: 100px; width: 100px;
height: 100px; height: 100px;
Expand Down Expand Up @@ -42,9 +43,11 @@
form { form {
float: left; float: left;
} }

fieldset { fieldset {
font-family: monospace; font-family: monospace;
} }

li { li {
list-style: none outside none; list-style: none outside none;
padding: 2px 0; padding: 2px 0;
Expand Down
12 changes: 6 additions & 6 deletions resize/funcunit.html → resizable/funcunit.html
Expand Up @@ -6,16 +6,16 @@
margin: 0px; padding: 0px; margin: 0px; padding: 0px;
} }
</style> </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> </head>
<body> <body>


<h1 id="qunit-header">resizable Test Suite</h1> <h1 id="qunit-header">resizable Test Suite</h1>
<h2 id="qunit-banner"></h2> <h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div> <div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2> <h2 id="qunit-userAgent"></h2>
<div id="test-content"></div> <div id="test-content"></div>
<ol id="qunit-tests"></ol> <ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div> <div id="qunit-test-area"></div>
</body> </body>
</html> </html>
2 changes: 1 addition & 1 deletion resize/resize.css → resizable/resizable.css
@@ -1,4 +1,4 @@
.can_ui_resize { .resizable {
position: relative; position: relative;
} }


Expand Down

0 comments on commit 2401a4b

Please sign in to comment.