14 one.lib.registry = {};
18 empty : function($dashlet) {
21 append : function($dashlet, $content) {
22 $dashlet.append($content);
24 header : function(header) {
25 var $h4 = $(document.createElement('h4'));
29 label : function(name, type) {
30 var $span = $(document.createElement('span'));
31 $span.addClass('label');
32 if (type !== undefined) {
34 } else if (type !== null) {
35 $span.addClass('label-info');
40 list : function(list) {
41 var $ul = $(document.createElement('ul'));
42 $(list).each(function(index, value) {
43 var $li = $(document.createElement('li'));
50 config : function(name, id, type, size) {
52 button['name'] = name;
54 button['type'] = type;
55 button['size'] = size;
58 single : function(name, id, type, size) {
60 var button = one.lib.dashlet.button.config(name, id, type, size);
61 buttonList.push(button);
64 button : function(buttonList) {
65 var $buttonGroup = $(document.createElement('div'));
66 $buttonGroup.addClass("btn-group");
67 $(buttonList).each(function(index, value) {
68 var $button = $(document.createElement('button'));
69 $button.text(value.name);
70 $button.addClass('btn');
71 $button.addClass(value['type']);
72 $button.addClass(value['size']);
73 if (!(typeof value.id === 'undefined')) {
74 $button.attr('id', value.id);
76 $buttonGroup.append($button);
83 * The init function returns HTML markup for the datagrid per the options provided. Each consumer
84 * of the datagrid must first call init and then provide the datasource for the grid.
85 * id: this is the id of the table
87 * searchable: true/false,
88 * pagination: turned off for now,
89 * flexibleRowsPerPage: turned off
91 * classes : String containing bootstrap related classes. For ex: "table-striped table-condensed"
92 * The classes "table", "table-bordered" and "datagrid" will be added by default
94 init: function(id, options, classes) {
95 var $fuelGridContainerDiv = $(document.createElement("div"));
96 $fuelGridContainerDiv.addClass("fuelux");
97 $table = $(document.createElement("table"));
98 $table.attr("id", id);
99 $table.addClass("table table-bordered datagrid");
100 $table.addClass(classes);
101 // create datagrid header
102 $thead = $(document.createElement("thead"));
103 $headertr = $(document.createElement("tr"));
104 $headerth = $(document.createElement("th"));
105 // create datagrid footer
106 $tfoot = $(document.createElement("tfoot"));
107 $footertr = $(document.createElement("tr"));
108 $footerth = $(document.createElement("th"));
109 if(options.searchable == true) {
110 $headerth.append(one.lib.dashlet.datagrid._searchable());
112 if(options.flexibleRowsPerPage == true) {
113 $footerth.append(one.lib.dashlet.datagrid._rowsPerPage(options.popout));
115 if(options.pagination == true) {
116 $footerth.append(one.lib.dashlet.datagrid._pagination());
118 $headertr.append($headerth);
119 $thead.append($headertr);
120 $footertr.append($footerth);
121 $tfoot.append($footertr);
122 $table.append($thead).append($tfoot);
123 $fuelGridContainerDiv.append($table);
124 return $fuelGridContainerDiv;
126 _searchable: function() {
127 var searchHTML = "<div class='datagrid-header-left'><div class='input-append search datagrid-search'> <input type='text' class='input-medium' placeholder='Search'><button type='button' class='btn'><i class='icon-search'></i></button></div></div>";
130 _pagination: function() {
131 var html = '<div class="datagrid-footer-right" style="display:none;"><div class="grid-pager"><button type="button" class="btn grid-prevpage"><i class="icon-chevron-left"></i></button><span>Page</span> <div style="display:inline-block;"><input type="text" name="pagenumber" style="width:25px;margin-bottom:-10px;vertical-align:middle;margin-right:5px;"></div><span>of <span class="grid-pages"></span></span><button type="button" class="btn grid-nextpage"><i class="icon-chevron-right"></i></button></div></div>';
134 _rowsPerPage: function(popout) {
136 var html = '<div class="datagrid-footer-left" style="display:none;"><div class="grid-controls"><span><span class="grid-start"></span>-<span class="grid-end"></span> of <span class="grid-count"></span></span><div class="select grid-pagesize" data-resize="auto" style="visibility:hidden;"><button type="button" data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label"></span><span class="caret"></span></button><ul class="dropdown-menu"><li data-value="10" data-selected="true"><a href="#">5</a></li><li data-value="10"><a href="#">10</a></li><li data-value="20"><a href="#">20</a></li><li data-value="50"><a href="#">50</a></li><li data-value="100"><a href="#">100</a></li></ul></div><span style="display:none;">Per Page</span></div></div>';
138 var html = '<div class="datagrid-footer-left" style="display:none;"><div class="grid-controls"><span><span class="grid-start"></span>-<span class="grid-end"></span> of <span class="grid-count"></span></span><div class="select grid-pagesize" data-resize="auto" style="visibility:hidden;"><button type="button" data-toggle="dropdown" class="btn dropdown-toggle"><span class="dropdown-label"></span><span class="caret"></span></button><ul class="dropdown-menu"><li data-value="5" data-selected="true"><a href="#">5</a></li><li data-value="10"><a href="#">10</a></li><li data-value="20"><a href="#">20</a></li><li data-value="50"><a href="#">50</a></li><li data-value="100"><a href="#">100</a></li></ul></div><span style="display:none;">Per Page</span></div></div>';
144 table : function(classes, id) {
145 var $table = $(document.createElement('table'));
146 $table.addClass("table");
147 $(classes).each(function(index, value) {
148 $table.addClass(value);
150 if (!(typeof id === 'undefined'))
151 $table.attr("id", id);
154 header : function(headers) {
155 var $thead = $(document.createElement('thead'));
156 var $tr = $(document.createElement('tr'));
157 $(headers).each(function(index, value) {
158 $th = $(document.createElement('th'));
165 body : function(body, thead) {
166 var $tbody = $(document.createElement('tbody'));
168 if (body.length == 0 && !(typeof thead === 'undefined')) {
169 var $tr = $(document.createElement('tr'));
170 var $td = $(document.createElement('td'));
171 $td.attr('colspan', thead.length);
172 $td.text('No data available');
173 $td.addClass('empty');
178 // else, populate as usual
179 $(body).each(function(index, value) {
180 var $tr = $(document.createElement('tr'));
181 $.each(value, function(key, value) {
184 $(value).each(function(index, value) {
187 } else if (key == 'entry') {
189 $(value).each(function(index, value) {
190 var $td = $(document.createElement('td'));
196 $tr.attr('data-' + key, value);
204 description : function(description, horizontal) {
205 var $dl = $(document.createElement('dl'));
206 if (horizontal == true) {
207 $dl.addClass("dl-horizontal");
209 $(description).each(function(index, value) {
210 var $dt = $(document.createElement('dt'));
212 var $dd = $(document.createElement('dd'));
214 $dl.append($dt).append($dd);
222 // clone default modal
223 clone : function(id) {
224 var $clone = $("#modal").clone(true);
225 $clone.attr("id", id);
229 populate : function($modal, header, $body, footer, ajax) {
230 if (ajax === undefined && ajax !== false) {
231 $.getJSON('/web.json'); // session check per modal
233 var $h3 = $modal.find("h3");
236 var $modalBody = $modal.find(".modal-body");
237 $modalBody.append($body);
239 $(footer).each(function(index, value) {
240 $modal.find(".modal-footer").append(value);
243 // clone and populate modal
244 spawn : function(id, header, $body, footer) {
245 var $modal = one.lib.modal.clone(id);
246 one.lib.modal.populate($modal, header, $body, footer);
247 $modal.on('hide', function () {
248 $('.modal-body').scrollTop(0);
253 empty : function($modal) {
254 $modal.find("h3").empty();
255 $modal.find(".modal-body").empty();
256 $modal.find(".modal-footer").empty();
260 body : function($modal, $body) {
261 $modal.find(".modal-body").empty();
262 $modal.find(".modal-body").append($body);
269 // create select-option form element
271 create : function(options, multiple, sort) {
272 // assert - auto assign
273 if (options == undefined)
276 var $select = $(document.createElement('select'));
277 if (multiple == true) {
278 $select.attr("multiple", "multiple");
280 var optionArray = one.lib.form.select.options(options);
282 // If specified, sort the option elements based on their text field
283 if (sort == true && optionArray.length > 1) {
285 var limit = optionArray.length;
288 for ( var i = 1; i < limit; i++) {
289 if (optionArray[i - 1].text() > optionArray[i].text()) {
290 var swap = optionArray[i - 1];
291 optionArray[i - 1] = optionArray[i];
292 optionArray[i] = swap;
299 $(optionArray).each(function(index, value) {
300 $select.append(value);
304 options : function(options) {
306 $.each(options, function(key, value) {
307 var $option = $(document.createElement('option'));
308 $option.attr("value", key);
310 result.push($option);
314 empty : function($select) {
317 inject : function($select, options) {
319 var options = one.lib.form.select.options(options);
320 $select.append(options);
322 prepend : function($select, options) {
323 var options = one.lib.form.select.options(options);
324 $select.prepend(options);
326 bubble : function($select, bubble) {
327 $($select.find("option")).each(function(index, value) {
328 if ($(value).attr("value") == bubble) {
329 var option = $(value);
331 $select.prepend(option);
337 // create legend form element
338 legend : function(name) {
339 var $legend = $(document.createElement('legend'));
343 // create label form element
344 label : function(name) {
345 var $label = $(document.createElement('label'));
349 // create help block form element
350 help : function(help) {
351 var $help = $(document.createElement('span'));
353 $help.addClass("help-block");
356 // create generic text input
357 input : function(placeholder) {
358 var $input = $(document.createElement('input'));
359 $input.attr('type', 'text');
360 $input.attr('placeholder', placeholder);
367 unfocus : function($nav) {
368 $($nav.find("li")).each(function(index, value) {
369 $(value).removeClass("active");
375 one.lib.alert = function(alert) {
376 $("#alert p").text(alert);
378 $("#alert").slideToggle();
379 clearTimeout(one.lib.registry.alert);
380 one.lib.registry.alert = setTimeout(function() {
381 $("#alert").slideUp();