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