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

   1 var SlideWindowClass = Class.create({
   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         repeaterEl: null,
  16         gridEl: null,
  17         checked: [],
  18         objects: {},
  19         windowSize: null,
  20
  21         size: {
  22                 widthNormal : '53%',
  23                 heightNormal : '325px',
  24                 widthHalf : '53%',
  25                 heightHalf : '586px',
  26                 widthFull : '100%',
  27                 heightFull : '586px',
  28                 menuWidth: '75px'
  29         },
  30
  31         elements : {
  32                 containerSuffix : '-slide-window-container',
  33                 configurationWindows : 'div.configuration',
  34                 configurationProgress: 'div.configuration-progress',
  35                 contentItems : 'slide-window-element',
  36                 contentAlternatingItems : 'slide-window-element-alternating',
  37                 toolsButtonSuffix : '-slide-window-tools',
  38                 optionsButtonSuffix : '-slide-window-options',
  39                 actionsSuffix : '-slide-window-actions',
  40                 toolbarSuffix : '-slide-window-toolbar',
  41                 titleSuffix : '-slide-window-title'
  42         },
  43
  44         initialize: function(windowId, data) {
  45                 if(typeof(windowId) == "undefined") {
  46                         return;
  47                 }
  48
  49                 this.windowId = windowId;
  50                 this.window = $(this.windowId + this.elements.containerSuffix);
  51                 this.tools = $(this.windowId + this.elements.toolsButtonSuffix);
  52                 this.options = $(this.windowId + this.elements.optionsButtonSuffix);
  53                 this.titlebar = $(this.windowId + this.elements.titleSuffix);
  54
  55                 if(data.hasOwnProperty('showId')) {
  56                                 this.showEl = $(data.showId);
  57                 } else {
  58                         alert('slide-window.js - "showId" property does not exists.');
  59                         return false;
  60                 }
  61
  62                 if(data.hasOwnProperty('hideId')) {
  63                         this.hideEl = $(data.hideId);
  64                 } else {
  65                         alert('slide-window.js - "hideId" property does not exists.');
  66                         return false;
  67                 }
  68
  69                 if(data.hasOwnProperty('fullSizeId')) {
  70                         this.fullSizeEl = $(data.fullSizeId);
  71                 } else {
  72                         alert('slide-window.js - "fullSizeId" property does not exists.');
  73                         return false;
  74                 }
  75
  76                 if(data.hasOwnProperty('search')) {
  77                         this.search = $(data.search);
  78                 } else {
  79                         alert('slide-window.js - "search" property does not exists.');
  80                         return false;
  81                 }
  82                 this.setEvents();
  83         },
  84
  85         objectExists: function(key) {
  86                 return this.objects.hasOwnProperty(key);
  87         },
  88
  89         registerObj: function(key, obj) {
  90                 if(this.objectExists(key) === false) {
  91                         this.objects[key] = obj;
  92                 }
  93         },
  94
  95         getObj: function(key) {
  96                 var obj = null;
  97                 if(this.objectExists(key) === true) {
  98                         obj = this.objects[key];
  99                 }
 100                 return obj;
 101         },
 102
 103         setEvents: function() {
 104                 this.showEl.observe('click', function(){
 105                         this.openWindow();
 106                 }.bind(this));
 107
 108                 this.hideEl.observe('click', function(){
 109                         this.closeWindow();
 110                 }.bind(this));
 111
 112                 this.fullSizeEl.observe('click', function(){
 113                         this.resetSize();
 114                 }.bind(this));
 115
 116                 this.titlebar.observe('dblclick', function() {
 117                         this.resetSize();
 118                 }.bind(this));
 119
 120                 this.search.observe('keyup', function(){
 121                         this.setSearch();
 122                 }.bind(this));
 123
 124                 this.tools.observe('click', function() {
 125                         this.toggleToolbar();
 126                 }.bind(this));
 127
 128                 this.options.observe('click', function() {
 129                         this.toggleToolbar();
 130                 }.bind(this));
 131         },
 132
 133         openWindow : function() {
 134                 this.hideOtherWindows();
 135                 Effect.toggle(this.window, 'slide', { duration: 0.3, afterFinish : function() {
 136                                 this.normalSizeWindow();
 137                         }.bind(this)
 138                 });
 139         },
 140
 141         closeWindow : function() {
 142                 Effect.toggle(this.window, 'slide', { duration: 0.3, afterFinish : function() {
 143                                 this.resetSize();
 144                         }.bind(this)
 145                 });
 146         },
 147
 148         isWindowOpen: function() {
 149                 return !(this.window.style.display === 'none');
 150         },
 151
 152         resetSize : function() {
 153                 if(this.isConfigurationOpen()) {
 154                         if(this.isFullSize()) {
 155                                 this.halfSizeWindow();
 156                         } else if(this.isHalfSize()) {
 157                                         this.normalSizeWindow();
 158                         } else if (this.isNormalSize()){
 159                                 this.halfSizeWindow();
 160                         } else {
 161                                 this.normalSizeWindow();
 162                         }
 163                 } else {
 164                         if(this.isFullSize()) {
 165                                 this.normalSizeWindow();
 166                         } else if(this.isHalfSize() || this.isNormalSize()) {
 167                                 this.fullSizeWindow();
 168                         }
 169                 }
 170         },
 171
 172         isNormalSize: function() {
 173                 return (this.windowSize == this.size.widthNormal && this.window.getHeight()  + 'px' == this.size.heightNormal);
 174         },
 175
 176         isHalfSize: function() {
 177                 return (this.windowSize == this.size.widthHalf && this.window.getHeight()  + 'px' == this.size.heightHalf);
 178         },
 179
 180         isFullSize: function() {
 181                 return (this.windowSize  == this.size.widthFull && this.window.getHeight()  + 'px' == this.size.heightFull);
 182         },
 183
 184         normalSizeWindow: function() {
 185                         new Effect.Morph(this.window, {style : 'width: ' + this.size.widthNormal + '; height: ' + this.size.heightNormal + ';', duration : 0.4});
 186                         this.windowSize = this.size.widthNormal;
 187         },
 188
 189         halfSizeWindow: function() {
 190                         new Effect.Morph(this.window, {style : 'width: ' + this.size.widthHalf + '; height: ' + this.size.heightHalf + ';', duration : 0.4});
 191                         this.windowSize = this.size.widthHalf;
 192         },
 193
 194         fullSizeWindow: function() {
 195                         new Effect.Morph(this.window, {style : 'width: ' + this.size.widthFull + '; height: ' + this.size.heightFull + ';', duration : 0.4});
 196                         this.windowSize = this.size.widthFull;
 197         },
 198
 199         hideOtherWindows: function() {
 200                 $$('.slide-window-container').each(function(el, index) {
 201                         el.setStyle({
 202                                 display : 'none',
 203                                 width : this.size.widthNormal,
 204                                 height : this.size.heightNormal
 205                         });
 206                 }.bind(this));
 207         },
 208
 209         setConfigurationObj: function(obj) {
 210                 this.configurationObj = obj;
 211         },
 212
 213         setWindowElementsEvent: function(repeaterEl, gridEl, requestObj) {
 214                 this.repeaterEl = repeaterEl;
 215                 this.gridEl = gridEl;
 216                 this.loadRequest = requestObj;
 217                 this.markAllChecked(false);
 218                 this.setLoadRequest();
 219                 this.postWindowOpen();
 220         },
 221
 222         setLoadRequest: function() {
 223                 var dataList = [];
 224                 if($(this.gridEl)) {
 225                         dataList = $(this.gridEl).select('tr');
 226                         this.makeSortable();
 227                 } else if ($(this.repeaterEl + '_Container')) {
 228                         dataList = $(this.repeaterEl + '_Container').select('div.slide-window-element');
 229                 }
 230
 231                 dataList.each(function(tr) {
 232                         $(tr).observe('click', function(index, clickedEl) {
 233                                 var target = clickedEl.target || clickedEl.srcElement;
 234                                 var clicked = $(target.id);
 235                                 // for element selection action (clicked checkbox) configuration window is not open
 236                                 if(clicked && clicked.hasAttribute('type') && clicked.readAttribute('type') == 'checkbox') {
 237                                         return;
 238                                 }
 239
 240                                 var el = $(tr).down('input[type=hidden]')
 241                                 if(el) {
 242                                         var val = el.getValue();
 243                                         this.loadRequest.ActiveControl.CallbackParameter = val;
 244                                         this.loadRequest.dispatch();
 245                                         this.configurationObj.openConfigurationWindow(this);
 246                                 }
 247                         }.bind(this, tr));
 248                 }.bind(this));
 249         },
 250
 251         isConfigurationOpen: function() {
 252                 var is_open = false;
 253                 $$(this.elements.configurationWindows, this.elements.configurationProgress).each(function(el) {
 254                         if(el.getStyle('display') == 'block') {
 255                                 is_open = true;
 256                                 throw $break;
 257                         }
 258                 }.bind(is_open));
 259                 return is_open;
 260         },
 261
 262         sortTable: function (col, reverse) {
 263                 var table = document.getElementById(this.gridEl);
 264                 var tb = table.tBodies[0], tr = Array.prototype.slice.call(tb.rows, 0), i;
 265                 reverse = -((+reverse) || -1);
 266                 tr = tr.sort(function (a, b) {
 267                         var val;
 268                         var val_a = a.cells[col].textContent.trim();
 269                         var val_b = b.cells[col].textContent.trim();
 270                         if (!isNaN(parseFloat(val_a)) && isFinite(val_a) && !isNaN(parseFloat(val_b)) && isFinite(val_b)) {
 271                                 val = val_a - val_b
 272                         } else {
 273                                 val = val_a.localeCompare(val_b);
 274                         }
 275                         return reverse * (val);
 276                 });
 277                 for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]);
 278         },
 279
 280         makeSortable: function () {
 281                 var self = this;
 282                 var table = document.getElementById(this.gridEl);
 283                 table.tHead.style.cursor = 'pointer';
 284                 var th = table.tHead, i;
 285                 th && (th = th.rows[0]) && (th = th.cells);
 286                 if (th) {
 287                         i = th.length;
 288                 } else {
 289                         return;
 290                 }
 291                 var downCounter = 0;
 292                 // skip first column if in column header is input (checkbox for elements mark)
 293                 if (th[0].childNodes[0].nodeName == "INPUT") {
 294                         downCounter = 1;
 295                 }
 296                 while (--i >= downCounter) (function (i) {
 297                         var dir = 1;
 298                         th[i].addEventListener('click', function () {
 299                                 self.sortTable(i, (dir = 1 - dir));
 300                         });
 301                 }(i));
 302         },
 303
 304         setSearch: function() {
 305                 var search_pattern = new RegExp(this.search.value)
 306                 $$('div[id="' + this.windowId + this.elements.containerSuffix + '"] div.' + this.elements.contentItems).each(function(value){
 307
 308                                 if(search_pattern.match(value.childNodes[2].textContent) == false) {
 309                                         value.setStyle({'display' : 'none'});
 310                                 } else {
 311                                         value.setStyle({'display' : ''});
 312                                 }
 313                         }.bind(search_pattern));
 314
 315                         $$('div[id="' + this.windowId + this.elements.containerSuffix + '"] tr.' + this.elements.contentItems + ', div[id="' + this.windowId + this.elements.containerSuffix + '"] tr.' + this.elements.contentAlternatingItems).each(function(value){
 316                                 if(search_pattern.match(value.down('div').innerHTML) == false) {
 317                                         value.setStyle({'display' : 'none'});
 318                                 } else {
 319                                         value.setStyle({'display' : ''});
 320                                 }
 321                         }.bind(search_pattern));
 322         },
 323         setElementsCount : function() {
 324                 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;
 325                 var count_el = $(this.windowId + this.elements.titleSuffix).getElementsByTagName('span')[0];
 326                 $(count_el).update(' (' + elements_count + ')');
 327         },
 328         toggleToolbar: function() {
 329                 if (this.isToolbarOpen() === false) {
 330                         this.markAllChecked(false);
 331                 }
 332                 Effect.toggle($(this.windowId + this.elements.toolbarSuffix), 'slide', { duration: 0.2});
 333         },
 334         isToolbarOpen: function() {
 335                 return $(this.windowId + this.elements.toolbarSuffix).visible();
 336         },
 337         setActions: function() {
 338                 var table = $(this.window).down('table');
 339                 var checkboxes = table.select('input[name="actions_checkbox"]');
 340                 checkboxes.each(function(el) {
 341                         el.observe('change', function() {
 342                                 var is_checked = this.is_any_checked(checkboxes);
 343                                 if(is_checked === true && !this.areActionsOpen()) {
 344                                         this.showActions();
 345                                 } else if (is_checked === false && this.areActionsOpen()) {
 346                                         this.hideActions();
 347                                 }
 348                         }.bind(this));
 349                 }.bind(this));
 350         },
 351         is_any_checked: function(checkboxes) {
 352                 var is_checked = false;
 353                 checkboxes.each(function(ch) {
 354                         if(ch.checked == true) {
 355                                 is_checked = true;
 356                                 throw $break;
 357                         }
 358                 });
 359                 return is_checked;
 360         },
 361
 362         markAllChecked: function(check) {
 363                 this.checked = [];
 364                 var table = $(this.window).down('table');
 365                 var checkboxes = table.select('input[name="actions_checkbox"]');
 366                 var containerId;
 367                 if(checkboxes.length > 0) {
 368                         checkboxes.each(function(ch, index) {
 369                                 if (ch.up('tr').visible()) {
 370                                         containerId = ch.getAttribute('rel');
 371                                         if (ch.checked == false && check == true) {
 372                                                 ch.checked = true;
 373                                         } else if (ch.checked == true && check == false) {
 374                                                 ch.checked = false;
 375                                         }
 376                                         this.markChecked(containerId, ch.checked, ch.value);
 377                                 }
 378                         }.bind(this));
 379                         if (containerId) {
 380                                 this.packChecked(containerId);
 381                         }
 382                 }
 383
 384                 if(check) {
 385                         this.showActions();
 386                 } else {
 387                         this.hideActions();
 388                 }
 389         },
 390         markChecked: function(containerId, checked, param, pack) {
 391                 if (this.checked.length == 0) {
 392                         if(checked == true) {
 393                                 this.checked.push(param);
 394                         }
 395                 } else {
 396                         index = this.checked.indexOf(param);
 397                         if(checked === true && index == -1) {
 398                                 this.checked.push(param);
 399                         } else if (checked === false && index > -1) {
 400                                 this.checked.splice(index, 1);
 401                         }
 402                 }
 403
 404                 if(checked == true) {
 405                         this.showActions();
 406                 } else if(this.checked.length == 0) {
 407                         this.hideActions();
 408                 }
 409
 410                 if (pack === true) {
 411                         this.packChecked(containerId);
 412                 }
 413         },
 414         packChecked: function(containerId) {
 415                 var values_packed = this.checked.join(';');
 416                 $(containerId).setValue(values_packed);
 417         },
 418         showActions: function() {
 419                 if (this.areActionsOpen()) {
 420                         return;
 421                 }
 422                 if (this.isToolbarOpen()) {
 423                         this.toggleToolbar();
 424                 }
 425                 Effect.toggle($(this.windowId + this.elements.actionsSuffix), 'slide', { duration: 0.2});
 426         },
 427         hideActions: function() {
 428                 if (!this.areActionsOpen()) {
 429                         return;
 430                 }
 431                 this.checked = [];
 432                 Effect.toggle($(this.windowId + this.elements.actionsSuffix), 'slide', { duration: 0.2});
 433         },
 434         areActionsOpen: function() {
 435                 return $(this.windowId + this.elements.actionsSuffix).visible();
 436         },
 437         postWindowOpen: function() {
 438                 this.setActions();
 439                 this.setElementsCount();
 440         }
 441 });
 442
 443 var SlideWindow = new SlideWindowClass()
 444
 445 document.observe("dom:loaded", function() {
 446         if(Prototype.Browser.IE  || Prototype.Browser.Gecko || Prototype.Browser.WebKit) {
 447                 $$('input[type=checkbox], input[type=submit], input[type=radio], a').each(function(el) {
 448                         el.observe('focus', function() {
 449                                 el.blur();
 450                         }.bind(el));
 451                 });
 452         }
 453 });
 454
 455 function setContentWidth() {
 456         var content_width = $('container').getWidth() - $('menu-left').getWidth() - 1;
 457         $('content').setStyle({'width': content_width + 'px'});
 458 }
 459
 460
 461 Event.observe(window, 'resize', function() {
 462         setContentWidth();
 463 });
 464
 465 document.observe("dom:loaded", function() {
 466         setContentWidth();
 467 });