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