opendaylight/adsal/web/root/src/main/resources/js/lib.js

   1 // global
   2 var one = {
   3     // global variables
   4     global : {
   5         remoteAddress : "/"
   6     },
   7     role : null
   8 }
   9
  10 // one ui library
  11 one.lib = {};
  12
  13 // registry
  14 one.lib.registry = {};
  15
  16 /** DASHLET */
  17 one.lib.dashlet = {
  18     empty : function($dashlet) {
  19         $dashlet.empty();
  20     },
  21     append : function($dashlet, $content) {
  22         $dashlet.append($content);
  23     },
  24     header : function(header) {
  25         var $h4 = $(document.createElement('h4'));
  26         $h4.text(header);
  27         return $h4;
  28     },
  29     label : function(name, type) {
  30         var $span = $(document.createElement('span'));
  31         $span.addClass('label');
  32         if (type !== undefined) {
  33             $span.addClass(type);
  34         } else if (type !== null) {
  35             $span.addClass('label-info');
  36         }
  37         $span.append(name);
  38         return $span;
  39     },
  40     list : function(list) {
  41         var $ul = $(document.createElement('ul'));
  42         $(list).each(function(index, value) {
  43             var $li = $(document.createElement('li'));
  44             $li.append(value);
  45             $ul.append($li);
  46         });
  47         return $ul;
  48     },
  49     button : {
  50         config : function(name, id, type, size) {
  51             var button = {};
  52             button['name'] = name;
  53             button['id'] = id;
  54             button['type'] = type;
  55             button['size'] = size;
  56             return button;
  57         },
  58         single : function(name, id, type, size) {
  59             var buttonList = [];
  60             var button = one.lib.dashlet.button.config(name, id, type, size);
  61             buttonList.push(button);
  62             return buttonList;
  63         },
  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);
  75                 }
  76                 $buttonGroup.append($button);
  77             });
  78             return $buttonGroup;
  79         }
  80     },
  81     datagrid: {
  82         /*
  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
  86          * options: {
  87          * searchable: true/false,
  88          * pagination: turned off for now,
  89          * flexibleRowsPerPage: turned off
  90          * }
  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
  93          */
  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());
 111             }
 112             if(options.flexibleRowsPerPage == true) {
 113                 $footerth.append(one.lib.dashlet.datagrid._rowsPerPage(options.popout));
 114             }
 115             if(options.pagination == true) {
 116                 $footerth.append(one.lib.dashlet.datagrid._pagination());
 117             }
 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;
 125         },
 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>";
 128             return searchHTML;
 129         },
 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>';
 132             return html;
 133         },
 134         _rowsPerPage: function(popout) {
 135             if(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>';
 137             } else {
 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>';
 139             }
 140             return html;
 141         }
 142     },
 143     table : {
 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);
 149             });
 150             if (!(typeof id === 'undefined'))
 151                 $table.attr("id", id);
 152             return $table;
 153         },
 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'));
 159                 $th.append(value);
 160                 $tr.append($th);
 161             });
 162             $thead.append($tr);
 163             return $thead;
 164         },
 165         body : function(body, thead) {
 166             var $tbody = $(document.createElement('tbody'));
 167             // if empty
 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');
 174                 $tr.append($td);
 175                 $tbody.append($tr);
 176                 return $tbody;
 177             }
 178             // else, populate as usual
 179             $(body).each(function(index, value) {
 180                 var $tr = $(document.createElement('tr'));
 181                 $.each(value, function(key, value) {
 182                     if (key == 'type') {
 183                         // add classes
 184                         $(value).each(function(index, value) {
 185                             $tr.addClass(value);
 186                         });
 187                     } else if (key == 'entry') {
 188                         // add entries
 189                         $(value).each(function(index, value) {
 190                             var $td = $(document.createElement('td'));
 191                             $td.append(value);
 192                             $tr.append($td);
 193                         });
 194                     } else {
 195                         // data field
 196                         $tr.attr('data-' + key, value);
 197                     }
 198                     $tbody.append($tr);
 199                 });
 200             });
 201             return $tbody;
 202         }
 203     },
 204     description : function(description, horizontal) {
 205         var $dl = $(document.createElement('dl'));
 206         if (horizontal == true) {
 207             $dl.addClass("dl-horizontal");
 208         }
 209         $(description).each(function(index, value) {
 210             var $dt = $(document.createElement('dt'));
 211             $dt.text(value.dt);
 212             var $dd = $(document.createElement('dd'));
 213             $dd.text(value.dd);
 214             $dl.append($dt).append($dd);
 215         });
 216         return $dl;
 217     }
 218 }
 219
 220 /** MODAL */
 221 one.lib.modal = {
 222     // clone default modal
 223     clone : function(id) {
 224         var $clone = $("#modal").clone(true);
 225         $clone.attr("id", id);
 226         return $clone;
 227     },
 228     // populate modal
 229     populate : function($modal, header, $body, footer, ajax) {
 230       if (ajax === undefined && ajax !== false) {
 231         $.getJSON('/web.json'); // session check per modal
 232       }
 233         var $h3 = $modal.find("h3");
 234         $h3.text(header);
 235
 236         var $modalBody = $modal.find(".modal-body");
 237         $modalBody.append($body);
 238
 239         $(footer).each(function(index, value) {
 240             $modal.find(".modal-footer").append(value);
 241         });
 242     },
 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);
 249         });
 250         return $modal;
 251     },
 252     // empty modal
 253     empty : function($modal) {
 254         $modal.find("h3").empty();
 255         $modal.find(".modal-body").empty();
 256         $modal.find(".modal-footer").empty();
 257     },
 258     // injection
 259     inject : {
 260         body : function($modal, $body) {
 261             $modal.find(".modal-body").empty();
 262             $modal.find(".modal-body").append($body);
 263         }
 264     }
 265 }
 266
 267 /** FORM */
 268 one.lib.form = {
 269     // create select-option form element
 270     select : {
 271         create : function(options, multiple, sort) {
 272             // assert - auto assign
 273             if (options == undefined)
 274                 options = {};
 275
 276             var $select = $(document.createElement('select'));
 277             if (multiple == true) {
 278                 $select.attr("multiple", "multiple");
 279             }
 280             var optionArray = one.lib.form.select.options(options);
 281
 282             // If specified, sort the option elements based on their text field
 283             if (sort == true && optionArray.length > 1) {
 284                 var shifted = true;
 285                 var limit = optionArray.length;
 286                 while (shifted) {
 287                     shifted = false;
 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;
 293                             shifted = true;
 294                         }
 295                     }
 296                 }
 297             }
 298
 299             $(optionArray).each(function(index, value) {
 300                 $select.append(value);
 301             });
 302             return $select;
 303         },
 304         options : function(options) {
 305             var result = [];
 306             $.each(options, function(key, value) {
 307                 var $option = $(document.createElement('option'));
 308                 $option.attr("value", key);
 309                 $option.text(value);
 310                 result.push($option);
 311             });
 312             return result;
 313         },
 314         empty : function($select) {
 315             $select.empty();
 316         },
 317         inject : function($select, options) {
 318             $select.empty();
 319             var options = one.lib.form.select.options(options);
 320             $select.append(options);
 321         },
 322         prepend : function($select, options) {
 323             var options = one.lib.form.select.options(options);
 324             $select.prepend(options);
 325         },
 326         bubble : function($select, bubble) {
 327             $($select.find("option")).each(function(index, value) {
 328                 if ($(value).attr("value") == bubble) {
 329                     var option = $(value);
 330                     $(value).remove();
 331                     $select.prepend(option);
 332                     return;
 333                 }
 334             });
 335         }
 336     },
 337     // create legend form element
 338     legend : function(name) {
 339         var $legend = $(document.createElement('legend'));
 340         $legend.text(name);
 341         return $legend;
 342     },
 343     // create label form element
 344     label : function(name) {
 345         var $label = $(document.createElement('label'));
 346         $label.text(name);
 347         return $label;
 348     },
 349     // create help block form element
 350     help : function(help) {
 351         var $help = $(document.createElement('span'));
 352         $help.text(help);
 353         $help.addClass("help-block");
 354         return $help;
 355     },
 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);
 361         return $input;
 362     }
 363 }
 364
 365 /** NAV */
 366 one.lib.nav = {
 367     unfocus : function($nav) {
 368         $($nav.find("li")).each(function(index, value) {
 369             $(value).removeClass("active");
 370         });
 371     }
 372 }
 373
 374 one.lib.helper = {
 375     parseInt : function(value) {
 376         return (value != null && value.trim() !== '') ?
 377             parseInt(value) : ''
 378     },
 379     parseFloat : function(value) {
 380         return (value != null && value.trim() !== '') ?
 381             parseFloat(value) : ''
 382     }
 383 }
 384
 385
 386 /** ALERT */
 387 one.lib.alert = function(alert) {
 388     $("#alert p").text(alert);
 389     $("#alert").hide();
 390     $("#alert").slideToggle();
 391     clearTimeout(one.lib.registry.alert);
 392     one.lib.registry.alert = setTimeout(function() {
 393         $("#alert").slideUp();
 394     }, 8000);
 395 }