opendaylight/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     list : function(list) {
  30         var $ul = $(document.createElement('ul'));
  31         $(list).each(function(index, value) {
  32             var $li = $(document.createElement('li'));
  33             $li.append(value);
  34             $ul.append($li);
  35         });
  36         return $ul;
  37     },
  38     button : {
  39         config : function(name, id, type, size) {
  40             var button = {};
  41             button['name'] = name;
  42             button['id'] = id;
  43             button['type'] = type;
  44             button['size'] = size;
  45             return button;
  46         },
  47         single : function(name, id, type, size) {
  48             var buttonList = [];
  49             var button = one.lib.dashlet.button.config(name, id, type, size);
  50             buttonList.push(button);
  51             return buttonList;
  52         },
  53         button : function(buttonList) {
  54             var $buttonGroup = $(document.createElement('div'));
  55             $buttonGroup.addClass("btn-group");
  56             $(buttonList).each(function(index, value) {
  57                 var $button = $(document.createElement('button'));
  58                 $button.text(value.name);
  59                 $button.addClass('btn');
  60                 $button.addClass(value['type']);
  61                 $button.addClass(value['size']);
  62                 if (!(typeof value.id === 'undefined')) {
  63                     $button.attr('id', value.id);
  64                 }
  65                 $buttonGroup.append($button);
  66             });
  67             return $buttonGroup;
  68         }
  69     },
  70     datagrid: {
  71         /*
  72          * The init function returns HTML markup for the datagrid per the options provided. Each consumer
  73          * of the datagrid must first call init and then provide the datasource for the grid.
  74          * id: this is the id of the table
  75          * options: {
  76          * searchable: true/false,
  77          * pagination: turned off for now,
  78          * flexibleRowsPerPage: turned off
  79          * }
  80          * classes : String containing bootstrap related classes. For ex: "table-striped table-condensed"
  81          * The classes "table", "table-bordered" and "datagrid" will be added by default
  82          */
  83         init: function(id, options, classes) {
  84             var $fuelGridContainerDiv = $(document.createElement("div"));
  85             $fuelGridContainerDiv.addClass("fuelux");
  86             $table = $(document.createElement("table"));
  87             $table.attr("id", id);
  88             $table.addClass("table table-bordered datagrid");
  89             $table.addClass(classes);
  90             // create datagrid header
  91             $thead = $(document.createElement("thead"));
  92             $headertr = $(document.createElement("tr"));
  93             $headerth = $(document.createElement("th"));
  94             // create datagrid footer
  95             $tfoot = $(document.createElement("tfoot"));
  96             $footertr = $(document.createElement("tr"));
  97             $footerth = $(document.createElement("th"));
  98             if(options.searchable == true) {
  99                 $headerth.append(one.lib.dashlet.datagrid._searchable());
 100             }
 101             if(options.flexibleRowsPerPage == true) {
 102                 $footerth.append(one.lib.dashlet.datagrid._rowsPerPage(options.popout));
 103             }
 104             if(options.pagination == true) {
 105                 $footerth.append(one.lib.dashlet.datagrid._pagination());
 106             }
 107             $headertr.append($headerth);
 108             $thead.append($headertr);
 109             $footertr.append($footerth);
 110             $tfoot.append($footertr);
 111             $table.append($thead).append($tfoot);
 112             $fuelGridContainerDiv.append($table);
 113             return $fuelGridContainerDiv;
 114         },
 115         _searchable: function() {
 116             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>";
 117             return searchHTML;
 118         },
 119         _pagination: function() {
 120             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>';
 121             return html;
 122         },
 123         _rowsPerPage: function(popout) {
 124             if(popout) {
 125                 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>';
 126             } else {
 127                 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>';
 128             }
 129             return html;
 130         }
 131     },
 132     table : {
 133         table : function(classes, id) {
 134             var $table = $(document.createElement('table'));
 135             $table.addClass("table");
 136             $(classes).each(function(index, value) {
 137                 $table.addClass(value);
 138             });
 139             if (!(typeof id === 'undefined'))
 140                 $table.attr("id", id);
 141             return $table;
 142         },
 143         header : function(headers) {
 144             var $thead = $(document.createElement('thead'));
 145             var $tr = $(document.createElement('tr'));
 146             $(headers).each(function(index, value) {
 147                 $th = $(document.createElement('th'));
 148                 $th.append(value);
 149                 $tr.append($th);
 150             });
 151             $thead.append($tr);
 152             return $thead;
 153         },
 154         body : function(body, thead) {
 155             var $tbody = $(document.createElement('tbody'));
 156             // if empty
 157             if (body.length == 0 && !(typeof thead === 'undefined')) {
 158                 var $tr = $(document.createElement('tr'));
 159                 var $td = $(document.createElement('td'));
 160                 $td.attr('colspan', thead.length);
 161                 $td.text('No data available');
 162                 $td.addClass('empty');
 163                 $tr.append($td);
 164                 $tbody.append($tr);
 165                 return $tbody;
 166             }
 167             // else, populate as usual
 168             $(body).each(function(index, value) {
 169                 var $tr = $(document.createElement('tr'));
 170                 $.each(value, function(key, value) {
 171                     if (key == 'type') {
 172                         // add classes
 173                         $(value).each(function(index, value) {
 174                             $tr.addClass(value);
 175                         });
 176                     } else if (key == 'entry') {
 177                         // add entries
 178                         $(value).each(function(index, value) {
 179                             var $td = $(document.createElement('td'));
 180                             $td.append(value);
 181                             $tr.append($td);
 182                         });
 183                     } else {
 184                         // data field
 185                         $tr.attr('data-' + key, value);
 186                     }
 187                     $tbody.append($tr);
 188                 });
 189             });
 190             return $tbody;
 191         }
 192     },
 193     description : function(description, horizontal) {
 194         var $dl = $(document.createElement('dl'));
 195         if (horizontal == true) {
 196             $dl.addClass("dl-horizontal");
 197         }
 198         $(description).each(function(index, value) {
 199             var $dt = $(document.createElement('dt'));
 200             $dt.text(value.dt);
 201             var $dd = $(document.createElement('dd'));
 202             $dd.text(value.dd);
 203             $dl.append($dt).append($dd);
 204         });
 205         return $dl;
 206     }
 207 }
 208
 209 /** MODAL */
 210 one.lib.modal = {
 211     // clone default modal
 212     clone : function(id) {
 213         var $clone = $("#modal").clone(true);
 214         $clone.attr("id", id);
 215         return $clone;
 216     },
 217     // populate modal
 218     populate : function($modal, header, $body, footer) {
 219         var $h3 = $modal.find("h3");
 220         $h3.text(header);
 221
 222         var $modalBody = $modal.find(".modal-body");
 223         $modalBody.append($body);
 224
 225         $(footer).each(function(index, value) {
 226             $modal.find(".modal-footer").append(value);
 227         });
 228     },
 229     // clone and populate modal
 230     spawn : function(id, header, $body, footer) {
 231         var $modal = one.lib.modal.clone(id);
 232         one.lib.modal.populate($modal, header, $body, footer);
 233         return $modal;
 234     },
 235     // empty modal
 236     empty : function($modal) {
 237         $modal.find("h3").empty();
 238         $modal.find(".modal-body").empty();
 239         $modal.find(".modal-footer").empty();
 240     },
 241     // injection
 242     inject : {
 243         body : function($modal, $body) {
 244             $modal.find(".modal-body").empty();
 245             $modal.find(".modal-body").append($body);
 246         }
 247     }
 248 }
 249
 250 /** FORM */
 251 one.lib.form = {
 252     // create select-option form element
 253     select : {
 254         create : function(options, multiple) {
 255             // assert - auto assign
 256             if (options == undefined)
 257                 options = {};
 258
 259             var $select = $(document.createElement('select'));
 260             if (multiple == true) {
 261                 $select.attr("multiple", "multiple");
 262             }
 263             var optionArray = one.lib.form.select.options(options);
 264             $(optionArray).each(function(index, value) {
 265                 $select.append(value);
 266             });
 267             return $select;
 268         },
 269         options : function(options) {
 270             var result = [];
 271             $.each(options, function(key, value) {
 272                 var $option = $(document.createElement('option'));
 273                 $option.attr("value", key);
 274                 $option.text(value);
 275                 result.push($option);
 276             });
 277             return result;
 278         },
 279         empty : function($select) {
 280             $select.empty();
 281         },
 282         inject : function($select, options) {
 283             $select.empty();
 284             var options = one.lib.form.select.options(options);
 285             $select.append(options);
 286         },
 287         prepend : function($select, options) {
 288             var options = one.lib.form.select.options(options);
 289             $select.prepend(options);
 290         },
 291         bubble : function($select, bubble) {
 292             $($select.find("option")).each(function(index, value) {
 293                 if ($(value).attr("value") == bubble) {
 294                     var option = $(value);
 295                     $(value).remove();
 296                     $select.prepend(option);
 297                     return;
 298                 }
 299             });
 300         }
 301     },
 302     // create legend form element
 303     legend : function(name) {
 304         var $legend = $(document.createElement('legend'));
 305         $legend.text(name);
 306         return $legend;
 307     },
 308     // create label form element
 309     label : function(name) {
 310         var $label = $(document.createElement('label'));
 311         $label.text(name);
 312         return $label;
 313     },
 314     // create help block form element
 315     help : function(help) {
 316         var $help = $(document.createElement('span'));
 317         $help.text(help);
 318         $help.addClass("help-block");
 319         return $help;
 320     },
 321     // create generic text input
 322     input : function(placeholder) {
 323         var $input = $(document.createElement('input'));
 324         $input.attr('type', 'text');
 325         $input.attr('placeholder', placeholder);
 326         return $input;
 327     }
 328 }
 329
 330 /** NAV */
 331 one.lib.nav = {
 332     unfocus : function($nav) {
 333         $($nav.find("li")).each(function(index, value) {
 334             $(value).removeClass("active");
 335         });
 336     }
 337 }
 338
 339 /** ALERT */
 340 one.lib.alert = function(alert) {
 341     $("#alert p").text(alert);
 342     $("#alert").hide();
 343     $("#alert").slideToggle();
 344     clearTimeout(one.lib.registry.alert);
 345     one.lib.registry.alert = setTimeout(function() {
 346         $("#alert").slideUp();
 347     }, 8000);
 348 }