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