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