setup/scripts.js

   1 /**
   2  * functions used in setup script
   3  *
   4  * @version $Id$
   5  */
   6
   7 // show this window in top frame
   8 if (top != self) {
   9     window.top.location.href = location;
  10 }
  11
  12 // default values for fields
  13 var defaultValues = {};
  14
  15 // language strings
  16 var PMA_messages = {};
  17
  18 /**
  19  * Returns field type
  20  *
  21  * @param Element field
  22  */
  23 function getFieldType(field) {
  24     if (field.tagName == 'INPUT') {
  25         return field.getProperty('type');
  26     } else if (field.tagName == 'SELECT') {
  27         return 'select';
  28     } else if (field.tagName == 'TEXTAREA') {
  29         return 'text';
  30     }
  31     return '';
  32 }
  33
  34 /**
  35  * Sets field value
  36  *
  37  * value must be of type:
  38  * o undefined (omitted) - restore default value (form default, not PMA default)
  39  * o String - if type is 'text'
  40  * o boolean - if type is 'checkbox'
  41  * o Array of values - if type is 'select'
  42  *
  43  * @param Element field
  44  * @param String  field_type  see getFieldType
  45  * @param mixed   value
  46  */
  47 function setFieldValue(field, field_type, value) {
  48     switch (field_type) {
  49         case 'text':
  50             field.value = $defined(value) ? value : field.defaultValue;
  51             break;
  52         case 'checkbox':
  53             field.checked = $defined(value) ? value : field.defaultChecked;
  54             break;
  55         case 'select':
  56             var i, imax = field.options.length;
  57             if (!$defined(value)) {
  58                 for (i = 0; i < imax; i++) {
  59                     field.options[i].selected = field.options[i].defaultSelected;
  60                 }
  61             } else {
  62                 for (i = 0; i < imax; i++) {
  63                     field.options[i].selected = (value.indexOf(field.options[i].value) != -1);
  64                 }
  65             }
  66             break;
  67     }
  68     markField(field);
  69 }
  70
  71 /**
  72  * Gets field value
  73  *
  74  * Will return one of:
  75  * o String - if type is 'text'
  76  * o boolean - if type is 'checkbox'
  77  * o Array of values - if type is 'select'
  78  *
  79  * @param Element field
  80  * @param String  field_type  see getFieldType
  81  * @return mixed
  82  */
  83 function getFieldValue(field, field_type) {
  84     switch (field_type) {
  85         case 'text':
  86             return field.value;
  87         case 'checkbox':
  88             return field.checked;
  89         case 'select':
  90             var i, imax = field.options.length, items = [];
  91             for (i = 0; i < imax; i++) {
  92                 if (field.options[i].selected) {
  93                     items.push(field.options[i].value);
  94                 }
  95             }
  96             return items;
  97     }
  98 }
  99
 100 /**
 101  * Returns values for all fields in fieldsets
 102  */
 103 function getAllValues() {
 104     var elements = $$('fieldset input, fieldset select, fieldset textarea');
 105     var values = {}
 106     var type, value;
 107     for (var i = 0; i < elements.length; i++) {
 108         type = getFieldType(elements[i]);
 109         value = getFieldValue(elements[i], type);
 110         if (typeof value != 'undefined') {
 111             // we only have single selects, fatten array
 112             if (type == 'select') {
 113                 value = value[0];
 114             }
 115             values[elements[i].name] = value;
 116         }
 117     }
 118     return values;
 119 }
 120
 121 /**
 122  * Checks whether field has its default value
 123  *
 124  * @param Element field
 125  * @param String  type
 126  * @return boolean
 127  */
 128 function checkFieldDefault(field, type) {
 129     if (!$defined(defaultValues[field.id])) {
 130         return true;
 131     }
 132     var isDefault = true
 133     var currentValue = getFieldValue(field, type);
 134     if (type != 'select') {
 135         isDefault = currentValue == defaultValues[field.id];
 136     } else {
 137         // compare arrays, will work for our representation of select values
 138         if (currentValue.length != defaultValues[field.id].length) {
 139             isDefault = false;
 140         }
 141         else {
 142             for (var i = 0; i < currentValue.length; i++) {
 143                 if (currentValue[i] != defaultValues[field.id][i]) {
 144                     isDefault = false;
 145                     break;
 146                 }
 147             }
 148         }
 149     }
 150     return isDefault;
 151 }
 152
 153 /**
 154  * Returns element's id prefix
 155  * @param Element element
 156  */
 157 function getIdPrefix(element) {
 158     return element.id.replace(/[^-]+$/, '');
 159 }
 160
 161 // ------------------------------------------------------------------
 162 // Messages
 163 //
 164
 165 // stores hidden message ids
 166 var hiddenMessages = [];
 167
 168 window.addEvent('domready', function() {
 169     var hidden = hiddenMessages.length;
 170     for (var i = 0; i < hidden; i++) {
 171         $(hiddenMessages[i]).style.display = 'none';
 172     }
 173     if (hidden > 0) {
 174         var link = $('show_hidden_messages');
 175         link.addEvent('click', function(e) {
 176             e.stop();
 177             for (var i = 0; i < hidden; i++) {
 178                 $(hiddenMessages[i]).style.display = '';
 179             }
 180             this.dispose();
 181         });
 182         link.set('html', link.get('html').replace('#MSG_COUNT', hidden));
 183         link.style.display = '';
 184     }
 185 });
 186
 187 //
 188 // END: Messages
 189 // ------------------------------------------------------------------
 190
 191 // ------------------------------------------------------------------
 192 // Form validation and field operations
 193 //
 194
 195 // form validator assignments
 196 var validate = {};
 197
 198 // form validator list
 199 var validators = {
 200     /**
 201      * Validates positive number
 202      *
 203      * @param boolean isKeyUp
 204      */
 205     validate_positive_number: function (isKeyUp) {
 206         var result = this.value.test('^[0-9]*$') && this.value != '0';
 207         return result ? true : PMA_messages['error_nan_p'];
 208     },
 209     /**
 210      * Validates non-negative number
 211      *
 212      * @param boolean isKeyUp
 213      */
 214     validate_non_negative_number: function (isKeyUp) {
 215         var result = this.value.test('^[0-9]*$');
 216         return result ? true : PMA_messages['error_nan_nneg'];
 217     },
 218     /**
 219      * Validates port number
 220      *
 221      * @param boolean isKeyUp
 222      */
 223     validate_port_number: function(isKeyUp) {
 224         var result = this.value.test('^[0-9]*$') && this.value != '0';
 225         if (!result || this.value > 65536) {
 226             result = PMA_messages['error_incorrect_port'];
 227         }
 228         return result;
 229     },
 230     // field validators
 231     _field: {
 232         /**
 233          * hide_db field
 234          *
 235          * @param boolean isKeyUp
 236          */
 237         hide_db: function(isKeyUp) {
 238             if (!isKeyUp && this.value != '') {
 239                 var data = {};
 240                 data[this.id] = this.value;
 241                 ajaxValidate(this, 'Servers/1/hide_db', data);
 242             }
 243             return true;
 244         },
 245                 /**
 246          * TrustedProxies field
 247          *
 248          * @param boolean isKeyUp
 249          */
 250         TrustedProxies: function(isKeyUp) {
 251             if (!isKeyUp && this.value != '') {
 252                 var data = {};
 253                 data[this.id] = this.value;
 254                 ajaxValidate(this, 'TrustedProxies', data);
 255             }
 256             return true;
 257         },
 258     },
 259     // fieldset validators
 260     _fieldset: {
 261         /**
 262          * Validates Server fieldset
 263          *
 264          * @param boolean isKeyUp
 265          */
 266         Server: function(isKeyUp) {
 267             if (!isKeyUp) {
 268                 ajaxValidate(this, 'Server', getAllValues());
 269             }
 270             return true;
 271         },
 272         /**
 273          * Validates Server_login_options fieldset
 274          *
 275          * @param boolean isKeyUp
 276          */
 277         Server_login_options: function(isKeyUp) {
 278             return validators._fieldset.Server.bind(this)(isKeyUp);
 279         },
 280         /**
 281          * Validates Server_pmadb fieldset
 282          *
 283          * @param boolean isKeyUp
 284          */
 285         Server_pmadb: function(isKeyUp) {
 286             if (isKeyUp) {
 287                 return true;
 288             }
 289
 290             var prefix = getIdPrefix(this.getElement('input'));
 291             var pmadb_active = $(prefix + 'pmadb').value != '';
 292             if (pmadb_active) {
 293                 ajaxValidate(this, 'Server_pmadb', getAllValues());
 294             }
 295
 296             return true;
 297         }
 298     }
 299 }
 300
 301 /**
 302  * Calls server-side validation procedures
 303  *
 304  * @param Element parent  input field in <fieldset> or <fieldset>
 305  * @param String id       validator id
 306  * @param Object values   values hash (element_id: value)
 307  */
 308 function ajaxValidate(parent, id, values) {
 309     // ensure that parent is a fieldset
 310     if (parent.tagName != 'FIELDSET') {
 311         parent = parent.getParent('fieldset');
 312         if (!parent) {
 313             return false;
 314         }
 315     }
 316     // ensure that we have a Request object
 317     if (typeof parent.request == 'undefined') {
 318         parent.validate = {
 319             request: new Request.JSON({
 320                 url: 'validate.php',
 321                 autoCancel: true,
 322                 onSuccess: function(response) {
 323                     if (response == null) {
 324                         return;
 325                     }
 326                     var error = {};
 327                     if ($type(response) != 'object') {
 328                         error[parent.id] = [response];
 329                     } else if (typeof response['error'] != 'undefined') {
 330                         error[parent.id] = [response['error']];
 331                     } else {
 332                         $each(response, function(value, key) {
 333                             error[key] = $type(value) == 'array' ? value : [value];
 334                         });
 335                     }
 336                     displayErrors(error);
 337                 }}),
 338             token: parent.getParent('form').token.value
 339         };
 340     }
 341
 342     parent.validate.request.send({
 343         data: {
 344             token: parent.validate.token,
 345             id: id,
 346             values: JSON.encode(values)}
 347     });
 348
 349     return true;
 350 }
 351
 352 /**
 353  * Registers validator for given field
 354  *
 355  * @param String  id       field id
 356  * @param String  type     validator (key in validators object)
 357  * @param boolean onKeyUp  whether fire on key up
 358  * @param mixed   params   validation function parameters
 359  */
 360 function validateField(id, type, onKeyUp, params) {
 361     if (typeof validators[type] == 'undefined') {
 362         return;
 363     }
 364     if (typeof validate[id] == 'undefined') {
 365         validate[id] = [];
 366     }
 367     validate[id].push([type, params, onKeyUp]);
 368 }
 369
 370 /**
 371  * Returns valdiation functions associated with form field
 372  *
 373  * @param  String  field_id     form field id
 374  * @param  boolean onKeyUpOnly  see validateField
 375  * @return Array  array of [function, paramseters to be passed to function]
 376  */
 377 function getFieldValidators(field_id, onKeyUpOnly) {
 378     // look for field bound validator
 379     var name = field_id.match(/[^-]+$/)[0];
 380     if (typeof validators._field[name] != 'undefined') {
 381         return [[validators._field[name], null]];
 382     }
 383
 384     // look for registered validators
 385     var functions = [];
 386     if (typeof validate[field_id] != 'undefined') {
 387         // validate[field_id]: array of [type, params, onKeyUp]
 388         for (var i = 0, imax = validate[field_id].length; i < imax; i++) {
 389             if (onKeyUpOnly && !validate[field_id][i][2]) {
 390                 continue;
 391             }
 392             functions.push([validators[validate[field_id][i][0]], validate[field_id][i][1]]);
 393         }
 394     }
 395
 396     return functions;
 397 }
 398
 399 /**
 400  * Displays errors for given form fields
 401  *
 402  * WARNING: created DOM elements must be identical with the ones made by
 403  * display_input() in FormDisplay.tpl.php!
 404  *
 405  * @param Object  error list (key: field id, value: error array)
 406  */
 407 function displayErrors(errors) {
 408     $each(errors, function(errors, field_id) {
 409         var field = $(field_id);
 410         var isFieldset = field.tagName == 'FIELDSET';
 411         var errorCnt = isFieldset
 412             ? field.getElement('dl.errors')
 413             : field.getNext('.inline_errors');
 414
 415         // remove empty errors (used to clear error list)
 416         errors = errors.filter(function(item) {
 417             return item != '';
 418         });
 419
 420         if (errors.length) {
 421             // if error container doesn't exist, create it
 422             if (errorCnt === null) {
 423                 if (isFieldset) {
 424                     errorCnt = new Element('dl', {
 425                         'class': 'errors'
 426                     });
 427                     errorCnt.inject(field.getElement('table'), 'before');
 428                 } else {
 429                     errorCnt = new Element('dl', {
 430                         'class': 'inline_errors'
 431                     });
 432                     errorCnt.inject(field.getParent('td'), 'bottom');
 433                 }
 434             }
 435
 436             var html = '';
 437             for (var i = 0, imax = errors.length; i < imax; i++) {
 438                 html += '<dd>' + errors[i] + '</dd>';
 439             }
 440             errorCnt.set('html', html);
 441         } else if (errorCnt !== null) {
 442             // remove useless error container
 443             errorCnt.dispose();
 444         }
 445     });
 446 }
 447
 448 /**
 449  * Validates fieldset and puts errors in 'errors' object
 450  *
 451  * @param Element field
 452  * @param boolean isKeyUp
 453  * @param Object  errors
 454  */
 455 function validate_fieldset(fieldset, isKeyUp, errors) {
 456     if (fieldset && typeof validators._fieldset[fieldset.id] != 'undefined') {
 457         var fieldset_errors = validators._fieldset[fieldset.id].bind(fieldset)(isKeyUp);
 458         $each(fieldset_errors, function(field_errors, field_id) {
 459             if (typeof errors[field_id] == 'undefined') {
 460                 errors[field_id] = [];
 461             }
 462             errors[field_id][$type(field_errors) == 'array' ? 'extend' : 'push'](field_errors);
 463         });
 464     }
 465 }
 466
 467 /**
 468  * Validates form field and puts errors in 'errors' object
 469  *
 470  * @param Element field
 471  * @param boolean isKeyUp
 472  * @param Object  errors
 473  */
 474 function validate_field(field, isKeyUp, errors) {
 475     errors[field.id] = [];
 476     var functions = getFieldValidators(field.id, isKeyUp);
 477     for (var i = 0; i < functions.length; i++) {
 478         var result = functions[i][0].bind(field)(isKeyUp, functions[i][1]);
 479         if (result !== true) {
 480             errors[field.id][$type(result) == 'array' ? 'extend' : 'push'](result);
 481         }
 482     }
 483 }
 484
 485 /**
 486  * Validates form field and parent fieldset
 487  *
 488  * @param Element field
 489  * @param boolean isKeyUp
 490  */
 491 function validate_field_and_fieldset(field, isKeyUp) {
 492     var errors = {};
 493     validate_field(field, isKeyUp, errors);
 494     validate_fieldset(field.getParent('fieldset'), isKeyUp, errors);
 495     displayErrors(errors);
 496 }
 497
 498 /**
 499  * Marks field depending on its value (system default or custom)
 500  *
 501  * @param Element field
 502  */
 503 function markField(field) {
 504     var type = getFieldType(field);
 505     var isDefault = checkFieldDefault(field, type);
 506
 507     // checkboxes uses parent <span> for marking
 508     var fieldMarker = (type == 'checkbox') ? field.getParent() : field;
 509     setRestoreDefaultBtn(field, !isDefault);
 510     fieldMarker[isDefault ? 'removeClass' : 'addClass']('custom');
 511 }
 512
 513 /**
 514  * Enables or disables the "restore default value" button
 515  *
 516  * @param Element field
 517  * @param bool    display
 518  */
 519 function setRestoreDefaultBtn(field, display) {
 520     var td = field.getParent('td');
 521     if (!td) return;
 522     var el = td.getElement('.restore-default');
 523     if (!el) return;
 524     el.style.display = (display ? '' : 'none');
 525 }
 526
 527 window.addEvent('domready', function() {
 528     var elements = $$('input[id], select[id], textarea[id]');
 529     var elements_count = elements.length;
 530
 531     // register validators and mark custom values
 532     for (var i = 0; i < elements_count; i++) {
 533         var el = elements[i];
 534         markField(el);
 535         el.addEvent('change', function(e) {
 536             validate_field_and_fieldset(this, false);
 537             markField(this);
 538         });
 539         // text fields can be validated after each change
 540         if (el.tagName == 'INPUT' && el.type == 'text') {
 541             el.addEvent('keyup', function(e) {
 542                 validate_field_and_fieldset(this, true);
 543                 markField(el);
 544             });
 545         }
 546         // disable textarea spellcheck
 547         if (el.tagName == 'TEXTAREA') {
 548             el.setProperty('spellcheck', false)
 549         }
 550     }
 551
 552         // check whether we've refreshed a page and browser remembered modified
 553         // form values
 554         var check_page_refresh = $('check_page_refresh');
 555         if (!check_page_refresh || check_page_refresh.value == '1') {
 556                 // run all field validators
 557                 var errors = {};
 558                 for (var i = 0; i < elements_count; i++) {
 559                         validate_field(elements[i], false, errors);
 560                 }
 561                 // run all fieldset validators
 562                 $$('fieldset').each(function(el){
 563                         validate_fieldset(el, false, errors);
 564                 });
 565
 566                 displayErrors(errors);
 567         } else if (check_page_refresh) {
 568                 check_page_refresh.value = '1';
 569         }
 570 });
 571
 572 //
 573 // END: Form validation and field operations
 574 // ------------------------------------------------------------------
 575
 576 // ------------------------------------------------------------------
 577 // Tabbed forms
 578 //
 579
 580 /**
 581  * Sets active tab
 582  *
 583  * @param Element tab_link
 584  */
 585 function setTab(tab_link) {
 586     var tabs_menu = tab_link.getParent('.tabs');
 587
 588     var links = tabs_menu.getElements('a');
 589     var contents;
 590     for (var i = 0, imax = links.length; i < imax; i++) {
 591         contents = $(links[i].getProperty('href').substr(1));
 592         if (links[i] == tab_link) {
 593             links[i].addClass('active');
 594             contents.style.display = 'block';
 595         } else {
 596             links[i].removeClass('active');
 597             contents.style.display = 'none';
 598         }
 599     }
 600     location.hash = 'tab_' + tab_link.getProperty('href').substr(1);
 601 }
 602
 603 window.addEvent('domready', function() {
 604     var tabs = $$('.tabs');
 605     var url_tab = location.hash.match(/^#tab_.+/)
 606         ? $$('a[href$="' + location.hash.substr(5) + '"]') : null;
 607     if (url_tab) {
 608         url_tab = url_tab[0];
 609     }
 610     // add tabs events and activate one tab (the first one or indicated by location hash)
 611     for (var i = 0, imax = tabs.length; i < imax; i++) {
 612         var links = tabs[i].getElements('a');
 613         var selected_tab = links[0];
 614         for (var j = 0, jmax = links.length; j < jmax; j++) {
 615             links[j].addEvent('click', function(e) {
 616                 e.stop();
 617                 setTab(this);
 618             });
 619             if (links[j] == url_tab) {
 620                 selected_tab = links[j];
 621             }
 622         }
 623         setTab(selected_tab);
 624     }
 625     // tab links handling, check each 200ms
 626     // (works with history in FF, further browser support here would be an overkill)
 627     var prev_hash = location.hash;
 628     (function() {
 629         if (location.hash != prev_hash) {
 630             prev_hash = location.hash;
 631             var url_tab = location.hash.match(/^#tab_.+/)
 632                 ? $$('a[href$="' + location.hash.substr(5) + '"]') : null;
 633             if (url_tab) {
 634                 setTab(url_tab[0]);
 635             }
 636         }
 637     }).periodical(200);
 638 });
 639
 640 //
 641 // END: Tabbed forms
 642 // ------------------------------------------------------------------
 643
 644 // ------------------------------------------------------------------
 645 // Form reset buttons
 646 //
 647
 648 window.addEvent('domready', function() {
 649     var buttons = $$('input[type=button]');
 650     for (var i = 0, imax = buttons.length; i < imax; i++) {
 651         buttons[i].addEvent('click', function(e) {
 652             var fields = this.getParent('fieldset').getElements('input, select, textarea');
 653             for (var i = 0, imax = fields.length; i < imax; i++) {
 654                 setFieldValue(fields[i], getFieldType(fields[i]));
 655             }
 656         });
 657     }
 658 });
 659
 660 //
 661 // END: Form reset buttons
 662 // ------------------------------------------------------------------
 663
 664 // ------------------------------------------------------------------
 665 // "Restore default" and "set value" buttons
 666 //
 667
 668 /**
 669  * Restores field's default value
 670  *
 671  * @param String field_id
 672  */
 673 function restoreField(field_id) {
 674     var field = $(field_id);
 675     if (!field || !$defined(defaultValues[field_id])) {
 676         return;
 677     }
 678     setFieldValue(field, getFieldType(field), defaultValues[field_id]);
 679 }
 680
 681 window.addEvent('domready', function() {
 682     var buttons = $$('.restore-default, .set-value');
 683     var fixIE = Browser.Engine.name == 'trident' && Browser.Engine.version == 4;
 684     for (var i = 0, imax = buttons.length; i < imax; i++) {
 685         buttons[i].set('opacity', 0.25);
 686         if (!buttons[i].hasClass('restore-default')) {
 687             // restore-default is handled by markField
 688             buttons[i].style.display = '';
 689         }
 690         buttons[i].addEvents({
 691             mouseenter: function(e) {this.set('opacity', 1);},
 692             mouseleave: function(e) {this.set('opacity', 0.25);},
 693             click: function(e) {
 694                 e.stop();
 695                 var href = this.getProperty('href').substr(1);
 696                 var field_id;
 697                 if (this.hasClass('restore-default')) {
 698                     field_id = href;
 699                     restoreField(field_id);
 700                 } else {
 701                     field_id = href.match(/^[^=]+/)[0];
 702                     var value = href.match(/=(.+)$/)[1];
 703                     setFieldValue($(field_id), 'text', value);
 704                 }
 705                 $(field_id).fireEvent('change');
 706             }
 707         });
 708         // fix IE showing <img> alt text instead of link title
 709         if (fixIE) {
 710             buttons[i].getChildren('img')[0].alt = buttons[i].title;
 711         }
 712     }
 713 });
 714
 715 //
 716 // END: "Restore default" and "set value" buttons
 717 // ------------------------------------------------------------------