git.sur5r.net Git - bacula/bacula/blob - gui/baculum/protected/Web/JavaScript/slide-window.js

   1 var SlideWindowClass = jQuery.klass({
   2
   3         windowId: null,
   4         window: null,
   5         showEl: null,
   6         hideEl: null,
   7         fullSizeEl : null,
   8         search: null,
   9         toolbar: null,
  10         tools: null,
  11         titlebar: null,
  12         options: null,
  13         configurationObj: null,
  14         loadRequest : null,
  15         actionsRequest: null,
  16         repeaterEl: null,
  17         gridEl: null,
  18         checked: [],
  19         objects: {},
  20         windowSize: null,
  21         initElementId: null,
  22
  23         size: {
  24                 widthNormal : '53%',
  25                 heightNormal : '325px',
  26                 widthHalf : '53%',
  27                 heightHalf : '586px',
  28                 widthFull : '100%',
  29                 heightFull : '586px',
  30                 menuWidth: '75px'
  31         },
  32
  33         elements : {
  34                 content: 'div.slide-window-content',
  35                 containerSuffix: '-slide-window-container',
  36                 containerProgressSuffix: '-slide-window-progress',
  37                 configurationWindows: 'div.configuration',
  38                 configurationProgress: 'div.configuration-progress',
  39                 contentItems: 'slide-window-element',
  40                 contentAlternatingItems: 'slide-window-element-alternating',
  41                 toolsButtonSuffix: '-slide-window-tools',
  42                 optionsButtonSuffix: '-slide-window-options',
  43                 actionsSuffix: '-slide-window-actions',
  44                 toolbarSuffix: '-slide-window-toolbar',
  45                 titleSuffix: '-slide-window-title',
  46                 actionsButton : 'actions_btn'
  47         },
  48
  49         initialize: function(windowId, data) {
  50                 if(typeof(windowId) == "undefined") {
  51                         return;
  52                 }
  53
  54                 this.windowId = windowId;
  55                 this.window = $('#' + this.windowId + this.elements.containerSuffix);
  56                 this.tools = $('#' + this.windowId + this.elements.toolsButtonSuffix);
  57                 this.options = $('#' + this.windowId + this.elements.optionsButtonSuffix);
  58                 this.titlebar = $('#' + this.windowId + this.elements.titleSuffix);
  59
  60                 if(data.hasOwnProperty('showId')) {
  61                                 this.showEl = $('#' + data.showId);
  62                 } else {
  63                         alert('slide-window.js - "showId" property does not exists.');
  64                         return false;
  65                 }
  66
  67                 if(data.hasOwnProperty('hideId')) {
  68                         this.hideEl = $('#' + data.hideId);
  69                 } else {
  70                         alert('slide-window.js - "hideId" property does not exists.');
  71                         return false;
  72                 }
  73
  74                 if(data.hasOwnProperty('fullSizeId')) {
  75                         this.fullSizeEl = $('#' + data.fullSizeId);
  76                 } else {
  77                         alert('slide-window.js - "fullSizeId" property does not exists.');
  78                         return false;
  79                 }
  80
  81                 if(data.hasOwnProperty('search')) {
  82                         this.search = $('#' + data.search);
  83                 } else {
  84                         alert('slide-window.js - "search" property does not exists.');
  85                         return false;
  86                 }
  87                 this.setEvents();
  88                 this.halfSizeWindow();
  89         },
  90
  91         objectExists: function(key) {
  92                 return this.objects.hasOwnProperty(key);
  93         },
  94
  95         registerObj: function(key, obj) {
  96                 if(this.objectExists(key) === false) {
  97                         this.objects[key] = obj;
  98                 }
  99         },
 100
 101         getObj: function(key) {
 102                 var obj = null;
 103                 if(this.objectExists(key) === true) {
 104                         obj = this.objects[key];
 105                 }
 106                 return obj;
 107         },
 108
 109         setEvents: function() {
 110                 this.showEl.on('click', function(){
 111                         this.openWindow();
 112                 }.bind(this));
 113
 114                 this.hideEl.on('click', function(){
 115                         this.closeWindow();
 116                 }.bind(this));
 117
 118                 this.fullSizeEl.on('click', function(){
 119                         this.resetSize();
 120                 }.bind(this));
 121
 122                 this.titlebar.on('dblclick', function() {
 123                         this.resetSize();
 124                 }.bind(this));
 125
 126                 this.search.on('keyup', function(){
 127                         this.setSearch();
 128                 }.bind(this));
 129
 130                 this.tools.on('click', function() {
 131                         this.toggleToolbar();
 132                 }.bind(this));
 133
 134                 this.options.on('click', function() {
 135                         this.toggleToolbar();
 136                 }.bind(this));
 137
 138                 this.setActionsBtnEvents();
 139         },
 140
 141         setActionsBtnEvents: function() {
 142                 var self = this;
 143                 var actions_btn_container = this.window[0].getElementsByClassName(this.elements.actionsButton);
 144                 if (actions_btn_container.length === 1) {
 145                         var actions_btn = actions_btn_container[0].getElementsByTagName('INPUT');
 146                         if (actions_btn.length === 1) {
 147                                 actions_btn[0].addEventListener('mouseup', function(e) {
 148                                         var row = self.getGridRowUnderCursor(e);
 149                                         var el = $(row).find('input[type=hidden]');
 150                                         if(el.length === 1) {
 151                                                 self.actionsRequest.setCallbackParameter(el[0].value);
 152                                                 self.actionsRequest.dispatch();
 153                                         }
 154                                 });
 155                         }
 156                 }
 157         },
 158
 159         openWindow : function() {
 160                 this.hideOtherWindows();
 161                 this.window.slideToggle({duration: 100, done: function() {
 162                                 this.halfSizeWindow();
 163                         }.bind(this)
 164                 });
 165         },
 166
 167         closeWindow : function() {
 168                 this.window.slideToggle({done: function() {
 169                                 this.resetSize();
 170                         }.bind(this)
 171                 });
 172         },
 173
 174         isWindowOpen: function() {
 175                 return !(this.window[0].style.display === 'none');
 176         },
 177
 178         showProgress: function(show) {
 179                 var progress = $('#' + this.windowId + this.elements.containerProgressSuffix);
 180                 if (show === true) {
 181                         progress.css({display: 'block'});
 182                 } else if (show === false) {
 183                         progress.hide();
 184                 }
 185         },
 186
 187         resetSize : function() {
 188                 if(this.isConfigurationOpen()) {
 189                         if(this.isFullSize()) {
 190                                 this.halfSizeWindow();
 191                         } else if(this.isHalfSize()) {
 192                                         this.normalSizeWindow();
 193                         } else if (this.isNormalSize()){
 194                                 this.halfSizeWindow();
 195                         } else {
 196                                 this.normalSizeWindow();
 197                         }
 198                 } else {
 199                         if(this.isFullSize()) {
 200                                 this.normalSizeWindow();
 201                         } else if(this.isHalfSize() || this.isNormalSize()) {
 202                                 this.fullSizeWindow();
 203                         }
 204                 }
 205         },
 206
 207         isNormalSize: function() {
 208                 return (this.windowSize == this.size.widthNormal && this.window.height()  + 'px' == this.size.heightNormal);
 209         },
 210
 211         isHalfSize: function() {
 212                 return (this.windowSize == this.size.widthHalf && this.window.height()  + 'px' == this.size.heightHalf);
 213         },
 214
 215         isFullSize: function() {
 216                 return (this.windowSize  == this.size.widthFull && this.window.height()  + 'px' == this.size.heightFull);
 217         },
 218
 219         normalSizeWindow: function() {
 220                         this.window.animate({width: this.size.widthNormal, height: this.size.heightNormal}, {duration : 400});
 221                         this.windowSize = this.size.widthNormal;
 222         },
 223
 224         halfSizeWindow: function() {
 225                         this.window.animate({width: this.size.widthHalf, height: this.size.heightHalf}, {duration : 400});
 226                         this.windowSize = this.size.widthHalf;
 227         },
 228
 229         fullSizeWindow: function() {
 230                         this.window.animate({width: this.size.widthFull, height: this.size.heightFull}, {duration : 400});
 231                         this.windowSize = this.size.widthFull;
 232         },
 233
 234         hideOtherWindows: function() {
 235                 $('.slide-window-container').css({
 236                         display : 'none',
 237                         width : this.size.widthNormal,
 238                         height : this.size.heightNormal
 239                 });
 240         },
 241
 242         setConfigurationObj: function(obj) {
 243                 this.configurationObj = obj;
 244         },
 245
 246         setWindowElementsEvent: function(opts) {
 247                 this.repeaterEl = opts.repeater_id + '_Container';
 248                 this.gridEl = opts.grid_id;
 249                 this.loadRequest = opts.request_obj;
 250                 if (opts.hasOwnProperty('actions_obj')) {
 251                         this.actionsRequest = opts.actions_obj;
 252                 }
 253
 254                 if (this.initElementId) {
 255                         this.openConfigurationById(this.initElementId);
 256                         this.initElementId = null;
 257                         // for open window by init element, default set second tab
 258                         this.configurationObj.switchTabByNo(2);
 259                 }
 260
 261                 this.showProgress(false);
 262                 this.markAllChecked(false);
 263                 this.setLoadRequest();
 264                 this.postWindowOpen();
 265         },
 266
 267         setLoadRequest: function() {
 268                 var dataList = [];
 269                 var repeater = $('#' + this.repeaterEl);
 270                 var grid = $('#' + this.gridEl);
 271                 if(grid.length === 1) {
 272                         dataList = grid.find('tr');
 273                         this.makeSortable();
 274                 } else if (repeater) {
 275                         dataList = repeater.find('div.slide-window-element');
 276                 }
 277
 278                 var set_callback_parameter = function(element) {
 279                         var el = $(element).find('input[type=hidden]')
 280                         if(el.length === 1) {
 281                                 var val = el[0].value;
 282                                 this.openConfigurationById(val);
 283                         }
 284                 }.bind(this);
 285                 this.setSearch();
 286                 dataList.each(function(index, tr) {
 287                         $(tr).on('click', function(event) {
 288                                 var target = event.target || event.srcElement;
 289                                 var clicked = document.getElementById(target.id);
 290                                 // for element selection action (clicked checkbox) configuration window is not open
 291                                 if(clicked && clicked.hasAttribute('type') && clicked.getAttribute('type') == 'checkbox') {
 292                                         return;
 293                                 }
 294                                 set_callback_parameter(tr);
 295                         });
 296                 }.bind(this));
 297                 Formatters.set_formatters();
 298                 this.revertSortingFromCookie();
 299         },
 300
 301         openConfigurationById: function(id) {
 302                 this.loadRequest.setCallbackParameter(id);
 303                 this.loadRequest.dispatch();
 304                 this.configurationObj.openConfigurationWindow(this);
 305         },
 306
 307         isConfigurationOpen: function() {
 308                 var is_open = false;
 309                 $(this.elements.configurationWindows + ', '+ this.elements.configurationProgress).each(function(index, el) {
 310                         if($(el).css('display') == 'block') {
 311                                 is_open = true;
 312                                 return false;
 313                         }
 314                 }.bind(is_open));
 315                 return is_open;
 316         },
 317
 318         sortTable: function (grid_id, col, reverse, set_cookie) {
 319                 var table = document.getElementById(grid_id);
 320                 var tb = table.tBodies[0], tr = Array.prototype.slice.call(tb.rows, 0), i;
 321                 reverse = -((+reverse) || -1);
 322                 tr = tr.sort(function (a, b) {
 323                         var val, val_a, val_b, el_a, el_b;
 324                         el_a = a.cells[col].childNodes[1];
 325                         el_b = b.cells[col].childNodes[1];
 326                         if (el_a && el_b && el_a.nodeType === 1 && el_b.nodeType === 1 && el_a.hasAttribute('rel') && el_b.hasAttribute('rel')) {
 327                                 val_a = el_a.getAttribute('rel');
 328                                 val_b = el_b.getAttribute('rel');
 329                         } else {
 330                                 val_a = a.cells[col].textContent.trim();
 331                                 val_b = b.cells[col].textContent.trim();
 332                         }
 333                         if (!isNaN(parseFloat(val_a)) && isFinite(val_a) && !isNaN(parseFloat(val_b)) && isFinite(val_b)) {
 334                                 val = val_a - val_b
 335                         } else {
 336                                 val = val_a.localeCompare(val_b);
 337                         }
 338                         return reverse * (val);
 339                 });
 340                 var even;
 341                 for (i = 0; i < tr.length; i++) {
 342                         even = ((i % 2) == 0);
 343                         if (even) {
 344                                 tr[i].className = this.elements.contentItems;
 345                         } else {
 346                                 tr[i].className = this.elements.contentAlternatingItems;
 347                         }
 348                         tb.appendChild(tr[i]);
 349                 }
 350                 if (set_cookie === true) {
 351                         Cookies.set_cookie(this.gridEl, col + ':' + reverse);
 352                 }
 353         },
 354
 355         makeSortable: function (grid) {
 356                 var self = this;
 357                 var grid_id, set_cookie;
 358                 if (grid) {
 359                         grid_id = grid;
 360                         // for external grids (non-slide) do not remember sorting order
 361                         set_cookie = false;
 362                 } else {
 363                         grid_id = this.gridEl;
 364                         set_cookie = true;
 365                 }
 366                 var table = document.getElementById(grid_id);
 367                 table.tHead.style.cursor = 'pointer';
 368                 var th = table.tHead, i;
 369                 th && (th = th.rows[0]) && (th = th.cells);
 370                 if (th) {
 371                         i = th.length;
 372                 } else {
 373                         return;
 374                 }
 375                 var downCounter = 0;
 376                 // skip first column if in column header is input (checkbox for elements mark)
 377                 if (th[0].childNodes[0].nodeName == "INPUT") {
 378                         downCounter = 1;
 379                 }
 380                 while (--i >= downCounter) (function (i) {
 381                         var dir = 1;
 382                         th[i].addEventListener('click', function () {
 383                                 self.sortTable(grid_id, i, (dir = 1 - dir), set_cookie);
 384                         });
 385                 }(i));
 386         },
 387
 388         revertSortingFromCookie: function() {
 389                 var sorting = Cookies.get_cookie(this.gridEl);
 390                 if (sorting != null) {
 391                         var sort_param = sorting.split(':');
 392                         var col = parseInt(sort_param[0], 10);
 393                         var order = -(parseInt(sort_param[1], 10));
 394                         this.sortTable(this.gridEl, col, order);
 395                 }
 396         },
 397
 398         setSearch: function() {
 399                 var search_pattern = new RegExp(this.search[0].value, 'i');
 400                 var repeater = $('#' + this.repeaterEl);
 401                 var grid = $('#' + this.gridEl);
 402                 if (repeater.length === 1) {
 403                         repeater.find('div.' + this.elements.contentItems).each(function(index, value){
 404
 405                                 if(search_pattern.test(value.childNodes[2].textContent) == false) {
 406                                         $(value).css({'display' : 'none'});
 407                                 } else {
 408                                         $(value).css({'display' : ''});
 409                                 }
 410                         }.bind(search_pattern));
 411                 }
 412
 413                 if (grid.length === 1) {
 414                         grid.find('tbody tr').each(function(index, value) {
 415                                 var tds = $(value).find('td');
 416                                 var td;
 417                                 var found = false;
 418                                 for (var i = 0; i < tds.length; i++) {
 419                                         td = tds[i].textContent.trim();
 420                                         if(search_pattern.test(td) == true) {
 421                                                 found = true;
 422                                                 break;
 423                                         }
 424                                 }
 425
 426                                 if(found === true) {
 427                                         $(value).show();
 428                                 } else {
 429                                         $(value).hide();
 430                                 }
 431                         }.bind(search_pattern));
 432                 }
 433         },
 434         setElementsCount : function() {
 435                 var elements_count = $('div[id="' + this.windowId + this.elements.containerSuffix + '"] div.' + this.elements.contentItems).length || $('div[id="' + this.windowId + this.elements.containerSuffix + '"] tr.' + this.elements.contentItems + ', div[id="' + this.windowId + this.elements.containerSuffix + '"] tr.' + this.elements.contentAlternatingItems).length;
 436                 var count_el = document.getElementById(this.windowId + this.elements.titleSuffix).getElementsByTagName('span')[0];
 437                 count_el.textContent = ' (' + elements_count + ')';
 438         },
 439         toggleToolbar: function() {
 440                 if (this.isToolbarOpen() === false) {
 441                         this.markAllChecked(false);
 442                 }
 443                 $('#' + this.windowId + this.elements.toolbarSuffix).slideToggle({duration: 200});
 444         },
 445         isToolbarOpen: function() {
 446                 return $('#' + this.windowId + this.elements.toolbarSuffix).is(':visible');
 447         },
 448         setActions: function() {
 449                 var checkboxes = this.getCheckboxes();
 450                 checkboxes.each(function(index, el) {
 451                         $(el).on('change', function() {
 452                                 var is_checked = this.isAnyChecked(checkboxes);
 453                                 if(is_checked === true && !this.areActionsOpen()) {
 454                                         this.showActions();
 455                                 } else if (is_checked === false && this.areActionsOpen()) {
 456                                         this.hideActions();
 457                                 }
 458                         }.bind(this));
 459                 }.bind(this));
 460         },
 461         isAnyChecked: function(checkboxes) {
 462                 var is_checked = false;
 463                 $(checkboxes).each(function(index, ch) {
 464                         if(ch.checked == true) {
 465                                 is_checked = true;
 466                                 return false;
 467                         }
 468                 });
 469                 return is_checked;
 470         },
 471
 472         getCheckboxes: function() {
 473                 var grid = $('#' + this.gridEl);
 474                 var checkboxes = [];
 475                 if (grid.length === 1) {
 476                         checkboxes = grid.find('input[name="actions_checkbox"]');
 477                 }
 478                 return checkboxes;
 479         },
 480
 481         areCheckboxesChecked: function() {
 482                 var checkboxes = this.getCheckboxes();
 483                 return this.isAnyChecked(checkboxes);
 484         },
 485
 486         markAllChecked: function(check) {
 487                 this.checked = [];
 488                 var checkboxes = this.getCheckboxes();
 489                 var containerId;
 490                 if(checkboxes.length > 0) {
 491                         checkboxes.each(function(index, ch) {
 492                                 if ($(ch).parents('tr').is(':visible')) {
 493                                         containerId = ch.getAttribute('rel');
 494                                         if (ch.checked == false && check == true) {
 495                                                 ch.checked = true;
 496                                         } else if (ch.checked == true && check == false) {
 497                                                 ch.checked = false;
 498                                         }
 499                                         this.markChecked(containerId, ch.checked, ch.value);
 500                                 }
 501                         }.bind(this));
 502                         if (containerId) {
 503                                 this.packChecked(containerId);
 504                         }
 505                 }
 506
 507                 if(check) {
 508                         this.showActions();
 509                 } else {
 510                         this.hideActions();
 511                 }
 512         },
 513         markChecked: function(containerId, checked, param, pack) {
 514                 if (this.checked.length == 0) {
 515                         if(checked == true) {
 516                                 this.checked.push(param);
 517                         }
 518                 } else {
 519                         index = this.checked.indexOf(param);
 520                         if(checked === true && index == -1) {
 521                                 this.checked.push(param);
 522                         } else if (checked === false && index > -1) {
 523                                 this.checked.splice(index, 1);
 524                         }
 525                 }
 526
 527                 if(checked == true) {
 528                         this.showActions();
 529                 } else if(this.checked.length == 0) {
 530                         this.hideActions();
 531                 }
 532
 533                 if (pack === true) {
 534                         this.packChecked(containerId);
 535                 }
 536         },
 537         packChecked: function(containerId) {
 538                 var values_packed = this.checked.join(';');
 539                 document.getElementById(containerId).value = values_packed;
 540         },
 541         showActions: function() {
 542                 if (this.areActionsOpen()) {
 543                         return;
 544                 }
 545                 if (this.isToolbarOpen()) {
 546                         this.toggleToolbar();
 547                 }
 548                 $('#' + this.windowId + this.elements.actionsSuffix).slideDown({duration: 200});
 549         },
 550         hideActions: function() {
 551                 if (!this.areActionsOpen()) {
 552                         return;
 553                 }
 554                 this.checked = [];
 555                 $('#' + this.windowId + this.elements.actionsSuffix).slideUp({duration: 200});
 556         },
 557         areActionsOpen: function() {
 558                 return $('#' + this.windowId + this.elements.actionsSuffix).is(':visible');
 559         },
 560         postWindowOpen: function() {
 561                 this.setActions();
 562                 this.setElementsCount();
 563                 this.setOptionsBtn();
 564         },
 565         setOptionsBtn: function() {
 566                 var options_btn = this.window[0].getElementsByClassName(this.elements.actionsButton);
 567                 var table_window = $('#' + this.windowId + this.elements.containerSuffix).children(this.elements.content);
 568                 if (options_btn.length === 1) {
 569                         var self = this;
 570                         options_btn = options_btn[0];
 571                         table_window.off('mouseover');
 572                         table_window.on('mouseover', function(e) {
 573                                 var el = self.getGridRowUnderCursor(e);
 574                                 if (el.length === 1 && (el[0].className == self.elements.contentItems || el[0].className == self.elements.contentAlternatingItems)) {
 575                                         el[0].style.backgroundColor = '#aeb2b6';
 576                                         options_btn.style.display = '';
 577                                         var scroll_y = $(document).scrollTop();
 578                                         var y = ($(el).offset().top + scroll_y - 57).toString() + 'px';
 579                                         options_btn.style.top = y;
 580                                 } else {
 581                                         options_btn.style.display = 'none';
 582                                 }
 583                         });
 584                         table_window.off('mouseout');
 585                         table_window.on('mouseout', function(e) {
 586                                 table_window.find('tr').each(function(index, el) {
 587                                         el.style.backgroundColor = '';
 588                                 });;
 589                                 options_btn.style.display = 'none';
 590                         });
 591                 }
 592         },
 593         getGridRowUnderCursor: function(e) {
 594                 var x = e.clientX - 100;
 595                 var y = e.clientY;
 596                 var element_mouse_is_over = document.elementFromPoint(x, y);
 597                 var el = [];
 598                 var el_over = $(element_mouse_is_over);
 599                 if (el_over.length === 1 && el_over[0].nodeName != 'TR') {
 600                         el = el_over.children('tr');
 601                         if (el.length === 0) {
 602                                 el = el_over.parents('tr');
 603                         }
 604                 }
 605                 return el;
 606         },
 607         setInitElementId: function(id) {
 608                 this.initElementId = id;
 609         },
 610         quickJumpToElement: function(id, btn_id, panel_obj) {
 611                 this.setInitElementId(id);
 612                 panel_obj.show('container');
 613                 if (this.isWindowOpen() === true) {
 614                         this.openConfigurationById(id);
 615                 } else {
 616                         $('#' + btn_id).click();
 617                 }
 618         }
 619 });
 620
 621 var SlideWindow = new SlideWindowClass()
 622
 623 $(function() {
 624         if(navigator.userAgent.search("MSIE") > -1  || navigator.userAgent.search("Firefox") > -1 || navigator.userAgent.search("Chrome") > -1) {
 625                 $('input[type=checkbox], input[type=submit], input[type=radio], input[type=image], a').each(function(el) {
 626                         $(el).on('focus', function() {
 627                                 el.blur();
 628                         }.bind(el));
 629                 });
 630         }
 631 });
 632
 633 function setContentWidth() {
 634         var content_width = $('#container').width() - $('#workspace-menu-left').width() - 1;
 635         $('#content').css({'width': content_width + 'px'});
 636 }
 637
 638
 639 $(window).resize(function() {
 640         setContentWidth();
 641 });
 642
 643 $(function() {
 644         setContentWidth();
 645 });