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