Skip to content

Commit 0fac3fb

Browse files
TMaYaDSubhash Chandra
TMaYaD
authored and
Subhash Chandra
committedSep 7, 2009
Added licence
1 parent ce8d38d commit 0fac3fb

File tree

1 file changed

+126
-113
lines changed

1 file changed

+126
-113
lines changed
 

‎jquery.cardwall.js

100755100644
+126-113
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,126 @@
1-
jQuery.fn.cardwall = function (sectionHeading, options) {
2-
return this.each( function() {
3-
$table = $(this);
4-
$wall = $("<div id='wall'></div>");
5-
settings = $.extend({
6-
sections : [],
7-
controller : '',
8-
callback : function (data, textStatus) {this;},
9-
}, options);
10-
11-
/*
12-
* 1. index the headers
13-
* 2. get sections by unique values in a column
14-
* 3. create sections, make sortable and append to wall
15-
* 4. create cards from table rows
16-
* 5. add cards to sections
17-
* 6. add new button and modal form
18-
* 7. add trash/archive section
19-
*/
20-
21-
var header = {}
22-
// 1. index the headers
23-
$('thead th', $table).each( function(i){
24-
header[$(this).text()]=i+1;
25-
});
26-
27-
var colSelector = function (colName) {
28-
return ' td:nth-child('+ header[colName] +')';
29-
};
30-
31-
// 2. get sections by unique values in a column
32-
var sections = {};
33-
if(settings.sections.length) {
34-
settings.sections.forEach(function(name){
35-
sections[name]=1;
36-
});
37-
} else {
38-
$('tbody' + colSelector(sectionHeading), $table).each( function(){
39-
sections[$(this).text()] = 1;
40-
});
41-
};
42-
43-
// 3. create sections and append to wall
44-
for (name in sections) {
45-
sections[name] = $("<div id='"+name+"' class='section'></div>")
46-
.appendTo($wall)
47-
.sortable({
48-
connectWith: '.section',
49-
cursor: 'crosshair',
50-
receive: function(event, ui){
51-
var id = ui.item[0].id.substring(1);
52-
var url = settings.controller + "update/" + id;
53-
var data = {};
54-
data[sectionHeading] = event.target.id;
55-
$.get(url, data, settings.callback);
56-
},
57-
// update: logger,
58-
59-
});
60-
}
61-
62-
// 4. create cards from table rows
63-
$('tbody tr', $table).each(function(i){
64-
$row = $(this);
65-
var id = $row.id || i;
66-
//$title = $("<div class='title'>"+$(colSelector(settings.title),$row).text()+"</div>");
67-
68-
$dl=$("<dl></dl>");
69-
for (prop in header) {
70-
$dl.append($("<dt>"+prop+"</dt>").addClass(prop))
71-
.append($("<dd>"+$(colSelector(prop),$row).text()+"</dd>").addClass(prop));
72-
};
73-
74-
$more=$("<div></div>").addClass("more").html("<a href='#'>more &gt;&gt;&gt;</a>");
75-
76-
$card = $("<div id='c"+id+"' class='card'></div>")
77-
// .append($title)
78-
.append($dl)
79-
.append($more)
80-
.appendTo(sections[$(colSelector(sectionHeading), $row).text()]);
81-
});
82-
$table.replaceWith($wall);
83-
84-
// 6. add create new modal form and button
85-
var $fieldset = $("<fieldset></fieldset>");
86-
for (prop in header) {
87-
$fieldset.append($("<label for='"+prop+"'>"+prop+"</label>"))
88-
.append($("<input type='text' name='"+prop+"' id='new-"+prop+"' class='text ui-widget-content ui-corner-all' />"));
89-
};
90-
var $form = $("<form id='new-form'></form>").append($fieldset).appendTo($wall).dialog({
91-
autoOpen : false,
92-
modal : true,
93-
buttons: {
94-
'Create New' : function() {
95-
$(this).ajaxSubmit({
96-
url: settings.controller+'create',
97-
clearform: 'True',
98-
}).dialog('close');
99-
},
100-
'close' : function() {
101-
$(this).clearForm().dialog('close');
102-
},
103-
},
104-
});
105-
106-
$("<button id='create-new' class='ui-button ui-state-default ui-corner-all'>Create New</button>")
107-
.click(function() {
108-
$form.dialog('open');
109-
})
110-
.appendTo($wall);
111-
112-
});
113-
};
1+
/*
2+
* jQuery CardWall Plugin
3+
* version: 0.7 (September 07, 2009)
4+
* @requires jQuery v1.3.2 or later
5+
* @requires jQuery-UI v1.7.2 or later
6+
* @requires jQuery Form plugin
7+
*
8+
* Examples and documentation at: http://loonyb.in/
9+
* Dual licensed under the MIT and GPL licenses:
10+
* http://www.opensource.org/licenses/mit-license.php
11+
* http://www.gnu.org/licenses/gpl.html
12+
*/
13+
14+
jQuery.fn.cardwall = function (sectionHeading, options) {
15+
return this.each( function() {
16+
$table = $(this);
17+
$wall = $("<div id='wall'></div>");
18+
settings = $.extend({
19+
sections : [],
20+
controller : '',
21+
callback : function (data, textStatus) {this;},
22+
}, options);
23+
24+
/*
25+
* 1. index the headers
26+
* 2. get sections by unique values in a column
27+
* 3. create sections, make sortable and append to wall
28+
* 4. create cards from table rows
29+
* 5. add cards to sections
30+
* 6. add new button and modal form
31+
* 7. add trash/archive section
32+
*/
33+
34+
var header = {}
35+
// 1. index the headers
36+
$('thead th', $table).each( function(i){
37+
header[$(this).text()]=i+1;
38+
});
39+
40+
var colSelector = function (colName) {
41+
return ' td:nth-child('+ header[colName] +')';
42+
};
43+
44+
// 2. get sections by unique values in a column
45+
var sections = {};
46+
if(settings.sections.length) {
47+
settings.sections.forEach(function(name){
48+
sections[name]=1;
49+
});
50+
} else {
51+
$('tbody' + colSelector(sectionHeading), $table).each( function(){
52+
sections[$(this).text()] = 1;
53+
});
54+
};
55+
56+
// 3. create sections and append to wall
57+
for (name in sections) {
58+
sections[name] = $("<div id='"+name+"' class='section'></div>")
59+
.appendTo($wall)
60+
.sortable({
61+
connectWith: '.section',
62+
cursor: 'crosshair',
63+
receive: function(event, ui){
64+
var id = ui.item[0].id.substring(1);
65+
var url = settings.controller + "update/" + id;
66+
var data = {};
67+
data[sectionHeading] = event.target.id;
68+
$.get(url, data, settings.callback);
69+
},
70+
// update: logger,
71+
72+
});
73+
}
74+
75+
// 4. create cards from table rows
76+
$('tbody tr', $table).each(function(i){
77+
$row = $(this);
78+
var id = $row.id || i;
79+
//$title = $("<div class='title'>"+$(colSelector(settings.title),$row).text()+"</div>");
80+
81+
$dl=$("<dl></dl>");
82+
for (prop in header) {
83+
$dl.append($("<dt>"+prop+"</dt>").addClass(prop))
84+
.append($("<dd>"+$(colSelector(prop),$row).text()+"</dd>").addClass(prop));
85+
};
86+
87+
$more=$("<div></div>").addClass("more").html("<a href='#'>more &gt;&gt;&gt;</a>");
88+
89+
$card = $("<div id='c"+id+"' class='card'></div>")
90+
// .append($title)
91+
.append($dl)
92+
.append($more)
93+
.appendTo(sections[$(colSelector(sectionHeading), $row).text()]);
94+
});
95+
$table.replaceWith($wall);
96+
97+
// 6. add create new modal form and button
98+
var $fieldset = $("<fieldset></fieldset>");
99+
for (prop in header) {
100+
$fieldset.append($("<label for='"+prop+"'>"+prop+"</label>"))
101+
.append($("<input type='text' name='"+prop+"' id='new-"+prop+"' class='text ui-widget-content ui-corner-all' />"));
102+
};
103+
var $form = $("<form id='new-form'></form>").append($fieldset).appendTo($wall).dialog({
104+
autoOpen : false,
105+
modal : true,
106+
buttons: {
107+
'Create New' : function() {
108+
$(this).ajaxSubmit({
109+
url: settings.controller+'create',
110+
clearform: 'True',
111+
}).dialog('close');
112+
},
113+
'close' : function() {
114+
$(this).clearForm().dialog('close');
115+
},
116+
},
117+
});
118+
119+
$("<button id='create-new' class='ui-button ui-state-default ui-corner-all'>Create New</button>")
120+
.click(function() {
121+
$form.dialog('open');
122+
})
123+
.appendTo($wall);
124+
125+
});
126+
};

0 commit comments

Comments
 (0)
Please sign in to comment.