js/config.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2 /**
   3  * Functions used in configuration forms and on user preferences pages
   4  */
   5
   6 /**
   7  * checks whether browser supports web storage
   8  *
   9  * @param type the type of storage i.e. localStorage or sessionStorage
  10  *
  11  * @returns bool
  12  */
  13 function isStorageSupported (type, warn) {
  14     try {
  15         window[type].setItem('PMATest', 'test');
  16         // Check whether key-value pair was set successfully
  17         if (window[type].getItem('PMATest') === 'test') {
  18             // Supported, remove test variable from storage
  19             window[type].removeItem('PMATest');
  20             return true;
  21         }
  22     } catch (error) {
  23         // Not supported
  24         if (warn) {
  25             PMA_ajaxShowMessage(PMA_messages.strNoLocalStorage, false);
  26         }
  27     }
  28     return false;
  29 }
  30
  31 /**
  32  * Unbind all event handlers before tearing down a page
  33  */
  34 AJAX.registerTeardown('config.js', function () {
  35     $('.optbox input[id], .optbox select[id], .optbox textarea[id]').off('change').off('keyup');
  36     $('.optbox input[type=button][name=submit_reset]').off('click');
  37     $('div.tabs_contents').off();
  38     $('#import_local_storage, #export_local_storage').off('click');
  39     $('form.prefs-form').off('change').off('submit');
  40     $(document).off('click', 'div.click-hide-message');
  41     $('#prefs_autoload').find('a').off('click');
  42 });
  43
  44 AJAX.registerOnload('config.js', function () {
  45     var $topmenu_upt = $('#topmenu2.user_prefs_tabs');
  46     $topmenu_upt.find('li.active a').attr('rel', 'samepage');
  47     $topmenu_upt.find('li:not(.active) a').attr('rel', 'newpage');
  48 });
  49
  50 // default values for fields
  51 var defaultValues = {};
  52
  53 /**
  54  * Returns field type
  55  *
  56  * @param {Element} field
  57  */
  58 function getFieldType (field) {
  59     var $field = $(field);
  60     var tagName = $field.prop('tagName');
  61     if (tagName === 'INPUT') {
  62         return $field.attr('type');
  63     } else if (tagName === 'SELECT') {
  64         return 'select';
  65     } else if (tagName === 'TEXTAREA') {
  66         return 'text';
  67     }
  68     return '';
  69 }
  70
  71 /**
  72  * Enables or disables the "restore default value" button
  73  *
  74  * @param {Element} field
  75  * @param {boolean} display
  76  */
  77 function setRestoreDefaultBtn (field, display) {
  78     var $el = $(field).closest('td').find('.restore-default img');
  79     $el[display ? 'show' : 'hide']();
  80 }
  81
  82 /**
  83  * Marks field depending on its value (system default or custom)
  84  *
  85  * @param {Element} field
  86  */
  87 function markField (field) {
  88     var $field = $(field);
  89     var type = getFieldType($field);
  90     var isDefault = checkFieldDefault($field, type);
  91
  92     // checkboxes uses parent <span> for marking
  93     var $fieldMarker = (type === 'checkbox') ? $field.parent() : $field;
  94     setRestoreDefaultBtn($field, !isDefault);
  95     $fieldMarker[isDefault ? 'removeClass' : 'addClass']('custom');
  96 }
  97
  98 /**
  99  * Sets field value
 100  *
 101  * value must be of type:
 102  * o undefined (omitted) - restore default value (form default, not PMA default)
 103  * o String - if field_type is 'text'
 104  * o boolean - if field_type is 'checkbox'
 105  * o Array of values - if field_type is 'select'
 106  *
 107  * @param {Element} field
 108  * @param {String}  field_type  see {@link #getFieldType}
 109  * @param {String|Boolean}  value
 110  */
 111 function setFieldValue (field, field_type, value) {
 112     var $field = $(field);
 113     switch (field_type) {
 114     case 'text':
 115     case 'number':
 116         $field.val(value);
 117         break;
 118     case 'checkbox':
 119         $field.prop('checked', value);
 120         break;
 121     case 'select':
 122         var options = $field.prop('options');
 123         var i;
 124         var imax = options.length;
 125         var i, imax = options.length;
 126         for (i = 0; i < imax; i++) {
 127             options[i].selected = (value.indexOf(options[i].value) != -1);
 128         }
 129         break;
 130     }
 131     markField($field);
 132 }
 133
 134 /**
 135  * Gets field value
 136  *
 137  * Will return one of:
 138  * o String - if type is 'text'
 139  * o boolean - if type is 'checkbox'
 140  * o Array of values - if type is 'select'
 141  *
 142  * @param {Element} field
 143  * @param {String}  field_type returned by {@link #getFieldType}
 144  * @type Boolean|String|String[]
 145  */
 146 function getFieldValue (field, field_type) {
 147     var $field = $(field);
 148     switch (field_type) {
 149     case 'text':
 150     case 'number':
 151         return $field.prop('value');
 152     case 'checkbox':
 153         return $field.prop('checked');
 154     case 'select':
 155         var options = $field.prop('options');
 156         var i;
 157         var imax = options.length;
 158         var items = [];
 159         for (i = 0; i < imax; i++) {
 160             if (options[i].selected) {
 161                 items.push(options[i].value);
 162             }
 163         }
 164         return items;
 165     }
 166     return null;
 167 }
 168
 169 /**
 170  * Returns values for all fields in fieldsets
 171  */
 172 function getAllValues () {
 173     var $elements = $('fieldset input, fieldset select, fieldset textarea');
 174     var values = {};
 175     var type;
 176     var value;
 177     for (var i = 0; i < $elements.length; i++) {
 178         type = getFieldType($elements[i]);
 179         value = getFieldValue($elements[i], type);
 180         if (typeof value !== 'undefined') {
 181             // we only have single selects, fatten array
 182             if (type === 'select') {
 183                 value = value[0];
 184             }
 185             values[$elements[i].name] = value;
 186         }
 187     }
 188     return values;
 189 }
 190
 191 /**
 192  * Checks whether field has its default value
 193  *
 194  * @param {Element} field
 195  * @param {String}  type
 196  * @return boolean
 197  */
 198 function checkFieldDefault (field, type) {
 199     var $field = $(field);
 200     var field_id = $field.attr('id');
 201     if (typeof defaultValues[field_id] === 'undefined') {
 202         return true;
 203     }
 204     var isDefault = true;
 205     var currentValue = getFieldValue($field, type);
 206     if (type !== 'select') {
 207         isDefault = currentValue === defaultValues[field_id];
 208     } else {
 209         // compare arrays, will work for our representation of select values
 210         if (currentValue.length !== defaultValues[field_id].length) {
 211             isDefault = false;
 212         } else {
 213             for (var i = 0; i < currentValue.length; i++) {
 214                 if (currentValue[i] !== defaultValues[field_id][i]) {
 215                     isDefault = false;
 216                     break;
 217                 }
 218             }
 219         }
 220     }
 221     return isDefault;
 222 }
 223
 224 /**
 225  * Returns element's id prefix
 226  * @param {Element} element
 227  */
 228 function getIdPrefix (element) {
 229     return $(element).attr('id').replace(/[^-]+$/, '');
 230 }
 231
 232 // ------------------------------------------------------------------
 233 // Form validation and field operations
 234 //
 235
 236 // form validator assignments
 237 var validate = {};
 238
 239 // form validator list
 240 var validators = {
 241     // regexp: numeric value
 242     _regexp_numeric: /^[0-9]+$/,
 243     // regexp: extract parts from PCRE expression
 244     _regexp_pcre_extract: /(.)(.*)\1(.*)?/,
 245     /**
 246      * Validates positive number
 247      *
 248      * @param {boolean} isKeyUp
 249      */
 250     PMA_validatePositiveNumber: function (isKeyUp) {
 251         if (isKeyUp && this.value === '') {
 252             return true;
 253         }
 254         var result = this.value !== '0' && validators._regexp_numeric.test(this.value);
 255         return result ? true : PMA_messages.error_nan_p;
 256     },
 257     /**
 258      * Validates non-negative number
 259      *
 260      * @param {boolean} isKeyUp
 261      */
 262     PMA_validateNonNegativeNumber: function (isKeyUp) {
 263         if (isKeyUp && this.value === '') {
 264             return true;
 265         }
 266         var result = validators._regexp_numeric.test(this.value);
 267         return result ? true : PMA_messages.error_nan_nneg;
 268     },
 269     /**
 270      * Validates port number
 271      *
 272      * @param {boolean} isKeyUp
 273      */
 274     PMA_validatePortNumber: function (isKeyUp) {
 275         if (this.value === '') {
 276             return true;
 277         }
 278         var result = validators._regexp_numeric.test(this.value) && this.value !== '0';
 279         return result && this.value <= 65535 ? true : PMA_messages.error_incorrect_port;
 280     },
 281     /**
 282      * Validates value according to given regular expression
 283      *
 284      * @param {boolean} isKeyUp
 285      * @param {string}  regexp
 286      */
 287     PMA_validateByRegex: function (isKeyUp, regexp) {
 288         if (isKeyUp && this.value === '') {
 289             return true;
 290         }
 291         // convert PCRE regexp
 292         var parts = regexp.match(validators._regexp_pcre_extract);
 293         var valid = this.value.match(new RegExp(parts[2], parts[3])) !== null;
 294         return valid ? true : PMA_messages.error_invalid_value;
 295     },
 296     /**
 297      * Validates upper bound for numeric inputs
 298      *
 299      * @param {boolean} isKeyUp
 300      * @param {int} max_value
 301      */
 302     PMA_validateUpperBound: function (isKeyUp, max_value) {
 303         var val = parseInt(this.value, 10);
 304         if (isNaN(val)) {
 305             return true;
 306         }
 307         return val <= max_value ? true : PMA_sprintf(PMA_messages.error_value_lte, max_value);
 308     },
 309     // field validators
 310     _field: {
 311     },
 312     // fieldset validators
 313     _fieldset: {
 314     }
 315 };
 316
 317 /**
 318  * Registers validator for given field
 319  *
 320  * @param {String}  id       field id
 321  * @param {String}  type     validator (key in validators object)
 322  * @param {boolean} onKeyUp  whether fire on key up
 323  * @param {Array}   params   validation function parameters
 324  */
 325 function validateField (id, type, onKeyUp, params) {
 326     if (typeof validators[type] === 'undefined') {
 327         return;
 328     }
 329     if (typeof validate[id] === 'undefined') {
 330         validate[id] = [];
 331     }
 332     if (validate[id].length === 0) {
 333         validate[id].push([type, params, onKeyUp]);
 334     }
 335 }
 336
 337 /**
 338  * Returns validation functions associated with form field
 339  *
 340  * @param {String}  field_id     form field id
 341  * @param {boolean} onKeyUpOnly  see validateField
 342  * @type Array
 343  * @return array of [function, parameters to be passed to function]
 344  */
 345 function getFieldValidators (field_id, onKeyUpOnly) {
 346     // look for field bound validator
 347     var name = field_id && field_id.match(/[^-]+$/)[0];
 348     if (typeof validators._field[name] !== 'undefined') {
 349         return [[validators._field[name], null]];
 350     }
 351
 352     // look for registered validators
 353     var functions = [];
 354     if (typeof validate[field_id] !== 'undefined') {
 355         // validate[field_id]: array of [type, params, onKeyUp]
 356         for (var i = 0, imax = validate[field_id].length; i < imax; i++) {
 357             if (onKeyUpOnly && !validate[field_id][i][2]) {
 358                 continue;
 359             }
 360             functions.push([validators[validate[field_id][i][0]], validate[field_id][i][1]]);
 361         }
 362     }
 363
 364     return functions;
 365 }
 366
 367 /**
 368  * Displays errors for given form fields
 369  *
 370  * WARNING: created DOM elements must be identical with the ones made by
 371  * PhpMyAdmin\Config\FormDisplayTemplate::displayInput()!
 372  *
 373  * @param {Object} error_list list of errors in the form {field id: error array}
 374  */
 375 function displayErrors (error_list) {
 376     var tempIsEmpty = function (item) {
 377         return item !== '';
 378     };
 379
 380     for (var field_id in error_list) {
 381         var errors = error_list[field_id];
 382         var $field = $('#' + field_id);
 383         var isFieldset = $field.attr('tagName') === 'FIELDSET';
 384         var $errorCnt;
 385         if (isFieldset) {
 386             $errorCnt = $field.find('dl.errors');
 387         } else {
 388             $errorCnt = $field.siblings('.inline_errors');
 389         }
 390
 391         // remove empty errors (used to clear error list)
 392         errors = $.grep(errors, tempIsEmpty);
 393
 394         // CSS error class
 395         if (!isFieldset) {
 396             // checkboxes uses parent <span> for marking
 397             var $fieldMarker = ($field.attr('type') === 'checkbox') ? $field.parent() : $field;
 398             $fieldMarker[errors.length ? 'addClass' : 'removeClass']('field-error');
 399         }
 400
 401         if (errors.length) {
 402             // if error container doesn't exist, create it
 403             if ($errorCnt.length === 0) {
 404                 if (isFieldset) {
 405                     $errorCnt = $('<dl class="errors" />');
 406                     $field.find('table').before($errorCnt);
 407                 } else {
 408                     $errorCnt = $('<dl class="inline_errors" />');
 409                     $field.closest('td').append($errorCnt);
 410                 }
 411             }
 412
 413             var html = '';
 414             for (var i = 0, imax = errors.length; i < imax; i++) {
 415                 html += '<dd>' + errors[i] + '</dd>';
 416             }
 417             $errorCnt.html(html);
 418         } else if ($errorCnt !== null) {
 419             // remove useless error container
 420             $errorCnt.remove();
 421         }
 422     }
 423 }
 424
 425 /**
 426  * Validates fields and fieldsets and call displayError function as required
 427  */
 428 function setDisplayError() {
 429     var elements = $('.optbox input[id], .optbox select[id], .optbox textarea[id]');
 430     // run all field validators
 431     var errors = {};
 432     for (var i = 0; i < elements.length; i++) {
 433         validate_field(elements[i], false, errors);
 434     }
 435     // run all fieldset validators
 436     $('fieldset.optbox').each(function () {
 437         validate_fieldset(this, false, errors);
 438     });
 439     displayErrors(errors);
 440 }
 441
 442 /**
 443  * Validates fieldset and puts errors in 'errors' object
 444  *
 445  * @param {Element} fieldset
 446  * @param {boolean} isKeyUp
 447  * @param {Object}  errors
 448  */
 449 function validate_fieldset (fieldset, isKeyUp, errors) {
 450     var $fieldset = $(fieldset);
 451     if ($fieldset.length && typeof validators._fieldset[$fieldset.attr('id')] !== 'undefined') {
 452         var fieldset_errors = validators._fieldset[$fieldset.attr('id')].apply($fieldset[0], [isKeyUp]);
 453         for (var field_id in fieldset_errors) {
 454             if (typeof errors[field_id] === 'undefined') {
 455                 errors[field_id] = [];
 456             }
 457             if (typeof fieldset_errors[field_id] === 'string') {
 458                 fieldset_errors[field_id] = [fieldset_errors[field_id]];
 459             }
 460             $.merge(errors[field_id], fieldset_errors[field_id]);
 461         }
 462     }
 463 }
 464
 465 /**
 466  * Validates form field and puts errors in 'errors' object
 467  *
 468  * @param {Element} field
 469  * @param {boolean} isKeyUp
 470  * @param {Object}  errors
 471  */
 472 function validate_field (field, isKeyUp, errors) {
 473     var args;
 474     var result;
 475     var $field = $(field);
 476     var field_id = $field.attr('id');
 477     errors[field_id] = [];
 478     var functions = getFieldValidators(field_id, isKeyUp);
 479     for (var i = 0; i < functions.length; i++) {
 480         if (typeof functions[i][1] !== 'undefined' && functions[i][1] !== null) {
 481             args = functions[i][1].slice(0);
 482         } else {
 483             args = [];
 484         }
 485         args.unshift(isKeyUp);
 486         result = functions[i][0].apply($field[0], args);
 487         if (result !== true) {
 488             if (typeof result === 'string') {
 489                 result = [result];
 490             }
 491             $.merge(errors[field_id], result);
 492         }
 493     }
 494 }
 495
 496 /**
 497  * Validates form field and parent fieldset
 498  *
 499  * @param {Element} field
 500  * @param {boolean} isKeyUp
 501  */
 502 function validate_field_and_fieldset (field, isKeyUp) {
 503     var $field = $(field);
 504     var errors = {};
 505     validate_field($field, isKeyUp, errors);
 506     validate_fieldset($field.closest('fieldset.optbox'), isKeyUp, errors);
 507     displayErrors(errors);
 508 }
 509
 510 function loadInlineConfig () {
 511     if (!Array.isArray(configInlineParams)) {
 512         return;
 513     }
 514     for (var i = 0; i < configInlineParams.length; ++i) {
 515         if (typeof configInlineParams[i] === 'function') {
 516             configInlineParams[i]();
 517         }
 518     }
 519 }
 520
 521 function setupValidation () {
 522     validate = {};
 523     configScriptLoaded = true;
 524     if (configScriptLoaded && typeof configInlineParams !== 'undefined') {
 525         loadInlineConfig();
 526     }
 527     // register validators and mark custom values
 528     var $elements = $('.optbox input[id], .optbox select[id], .optbox textarea[id]');
 529     $elements.each(function () {
 530         markField(this);
 531         var $el = $(this);
 532         $el.on('change', function () {
 533             validate_field_and_fieldset(this, false);
 534             markField(this);
 535         });
 536         var tagName = $el.attr('tagName');
 537         // text fields can be validated after each change
 538         if (tagName === 'INPUT' && $el.attr('type') === 'text') {
 539             $el.keyup(function () {
 540                 validate_field_and_fieldset($el, true);
 541                 markField($el);
 542             });
 543         }
 544         // disable textarea spellcheck
 545         if (tagName === 'TEXTAREA') {
 546             $el.attr('spellcheck', false);
 547         }
 548     });
 549
 550     // check whether we've refreshed a page and browser remembered modified
 551     // form values
 552     var $check_page_refresh = $('#check_page_refresh');
 553     if ($check_page_refresh.length === 0 || $check_page_refresh.val() === '1') {
 554         // run all field validators
 555         var errors = {};
 556         for (var i = 0; i < $elements.length; i++) {
 557             validate_field($elements[i], false, errors);
 558         }
 559         // run all fieldset validators
 560         $('fieldset.optbox').each(function () {
 561             validate_fieldset(this, false, errors);
 562         });
 563
 564         displayErrors(errors);
 565     } else if ($check_page_refresh) {
 566         $check_page_refresh.val('1');
 567     }
 568 }
 569
 570 AJAX.registerOnload('config.js', function () {
 571     setupValidation();
 572 });
 573
 574 //
 575 // END: Form validation and field operations
 576 // ------------------------------------------------------------------
 577
 578 // ------------------------------------------------------------------
 579 // Tabbed forms
 580 //
 581
 582 /**
 583  * Sets active tab
 584  *
 585  * @param {String} tab_id
 586  */
 587 function setTab (tab_id) {
 588     $('ul.tabs').each(function () {
 589         var $this = $(this);
 590         if (!$this.find('li a[href="#' + tab_id + '"]').length) {
 591             return;
 592         }
 593         $this.find('li').removeClass('active').find('a[href="#' + tab_id + '"]').parent().addClass('active');
 594         $this.parent().find('div.tabs_contents fieldset').hide().filter('#' + tab_id).show();
 595         var hashValue = 'tab_' + tab_id;
 596         location.hash = hashValue;
 597         $this.parent().find('input[name=tab_hash]').val(hashValue);
 598     });
 599 }
 600
 601 function setupConfigTabs () {
 602     var forms = $('form.config-form');
 603     forms.each(function () {
 604         var $this = $(this);
 605         var $tabs = $this.find('ul.tabs');
 606         if (!$tabs.length) {
 607             return;
 608         }
 609         // add tabs events and activate one tab (the first one or indicated by location hash)
 610         $tabs.find('li').removeClass('active');
 611         $tabs.find('a')
 612             .click(function (e) {
 613                 e.preventDefault();
 614                 setTab($(this).attr('href').substr(1));
 615             })
 616             .filter(':first')
 617             .parent()
 618             .addClass('active');
 619         $this.find('div.tabs_contents fieldset').hide().filter(':first').show();
 620     });
 621 }
 622
 623 function adjustPrefsNotification () {
 624     var $prefsAutoLoad = $('#prefs_autoload');
 625     var $tableNameControl = $('#table_name_col_no');
 626     var $prefsAutoShowing = ($prefsAutoLoad.css('display') !== 'none');
 627
 628     if ($prefsAutoShowing && $tableNameControl.length) {
 629         $tableNameControl.css('top', '55px');
 630     }
 631 }
 632
 633 AJAX.registerOnload('config.js', function () {
 634     setupConfigTabs();
 635     adjustPrefsNotification();
 636
 637     // tab links handling, check each 200ms
 638     // (works with history in FF, further browser support here would be an overkill)
 639     var prev_hash;
 640     var tab_check_fnc = function () {
 641         if (location.hash !== prev_hash) {
 642             prev_hash = location.hash;
 643             if (prev_hash.match(/^#tab_[a-zA-Z0-9_]+$/)) {
 644                 // session ID is sometimes appended here
 645                 var hash = prev_hash.substr(5).split('&')[0];
 646                 if ($('#' + hash).length) {
 647                     setTab(hash);
 648                 }
 649             }
 650         }
 651     };
 652     tab_check_fnc();
 653     setInterval(tab_check_fnc, 200);
 654 });
 655
 656 //
 657 // END: Tabbed forms
 658 // ------------------------------------------------------------------
 659
 660 // ------------------------------------------------------------------
 661 // Form reset buttons
 662 //
 663
 664 AJAX.registerOnload('config.js', function () {
 665     $('.optbox input[type=button][name=submit_reset]').on('click', function () {
 666         var fields = $(this).closest('fieldset').find('input, select, textarea');
 667         for (var i = 0, imax = fields.length; i < imax; i++) {
 668             setFieldValue(fields[i], getFieldType(fields[i]), defaultValues[fields[i].id]);
 669         }
 670         setDisplayError();
 671     });
 672 });
 673
 674 //
 675 // END: Form reset buttons
 676 // ------------------------------------------------------------------
 677
 678 // ------------------------------------------------------------------
 679 // "Restore default" and "set value" buttons
 680 //
 681
 682 /**
 683  * Restores field's default value
 684  *
 685  * @param {String} field_id
 686  */
 687 function restoreField (field_id) {
 688     var $field = $('#' + field_id);
 689     if ($field.length === 0 || defaultValues[field_id] === undefined) {
 690         return;
 691     }
 692     setFieldValue($field, getFieldType($field), defaultValues[field_id]);
 693 }
 694
 695 function setupRestoreField () {
 696     $('div.tabs_contents')
 697         .on('mouseenter', '.restore-default, .set-value', function () {
 698             $(this).css('opacity', 1);
 699         })
 700         .on('mouseleave', '.restore-default, .set-value', function () {
 701             $(this).css('opacity', 0.25);
 702         })
 703         .on('click', '.restore-default, .set-value', function (e) {
 704             e.preventDefault();
 705             var href = $(this).attr('href');
 706             var field_sel;
 707             if ($(this).hasClass('restore-default')) {
 708                 field_sel = href;
 709                 restoreField(field_sel.substr(1));
 710             } else {
 711                 field_sel = href.match(/^[^=]+/)[0];
 712                 var value = href.match(/\=(.+)$/)[1];
 713                 setFieldValue($(field_sel), 'text', value);
 714             }
 715             $(field_sel).trigger('change');
 716         })
 717         .find('.restore-default, .set-value')
 718         // inline-block for IE so opacity inheritance works
 719         .css({ display: 'inline-block', opacity: 0.25 });
 720 }
 721
 722 AJAX.registerOnload('config.js', function () {
 723     setupRestoreField();
 724 });
 725
 726 //
 727 // END: "Restore default" and "set value" buttons
 728 // ------------------------------------------------------------------
 729
 730 // ------------------------------------------------------------------
 731 // User preferences import/export
 732 //
 733
 734 AJAX.registerOnload('config.js', function () {
 735     offerPrefsAutoimport();
 736     var $radios = $('#import_local_storage, #export_local_storage');
 737     if (!$radios.length) {
 738         return;
 739     }
 740
 741     // enable JavaScript dependent fields
 742     $radios
 743         .prop('disabled', false)
 744         .add('#export_text_file, #import_text_file')
 745         .click(function () {
 746             var enable_id = $(this).attr('id');
 747             var disable_id;
 748             if (enable_id.match(/local_storage$/)) {
 749                 disable_id = enable_id.replace(/local_storage$/, 'text_file');
 750             } else {
 751                 disable_id = enable_id.replace(/text_file$/, 'local_storage');
 752             }
 753             $('#opts_' + disable_id).addClass('disabled').find('input').prop('disabled', true);
 754             $('#opts_' + enable_id).removeClass('disabled').find('input').prop('disabled', false);
 755         });
 756
 757     // detect localStorage state
 758     var ls_supported = isStorageSupported('localStorage', true);
 759     var ls_exists = ls_supported ? (window.localStorage.config || false) : false;
 760     $('div.localStorage-' + (ls_supported ? 'un' : '') + 'supported').hide();
 761     $('div.localStorage-' + (ls_exists ? 'empty' : 'exists')).hide();
 762     if (ls_exists) {
 763         updatePrefsDate();
 764     }
 765     $('form.prefs-form').change(function () {
 766         var $form = $(this);
 767         var disabled = false;
 768         if (!ls_supported) {
 769             disabled = $form.find('input[type=radio][value$=local_storage]').prop('checked');
 770         } else if (!ls_exists && $form.attr('name') === 'prefs_import' &&
 771             $('#import_local_storage')[0].checked
 772         ) {
 773             disabled = true;
 774         }
 775         $form.find('input[type=submit]').prop('disabled', disabled);
 776     }).submit(function (e) {
 777         var $form = $(this);
 778         if ($form.attr('name') === 'prefs_export' && $('#export_local_storage')[0].checked) {
 779             e.preventDefault();
 780             // use AJAX to read JSON settings and save them
 781             savePrefsToLocalStorage($form);
 782         } else if ($form.attr('name') === 'prefs_import' && $('#import_local_storage')[0].checked) {
 783             // set 'json' input and submit form
 784             $form.find('input[name=json]').val(window.localStorage.config);
 785         }
 786     });
 787
 788     $(document).on('click', 'div.click-hide-message', function () {
 789         $(this)
 790             .hide()
 791             .parent('.group')
 792             .css('height', '')
 793             .next('form')
 794             .show();
 795     });
 796 });
 797
 798 /**
 799  * Saves user preferences to localStorage
 800  *
 801  * @param {Element} form
 802  */
 803 function savePrefsToLocalStorage (form) {
 804     $form = $(form);
 805     var submit = $form.find('input[type=submit]');
 806     submit.prop('disabled', true);
 807     $.ajax({
 808         url: 'prefs_manage.php',
 809         cache: false,
 810         type: 'POST',
 811         data: {
 812             ajax_request: true,
 813             server: PMA_commonParams.get('server'),
 814             submit_get_json: true
 815         },
 816         success: function (data) {
 817             if (typeof data !== 'undefined' && data.success === true) {
 818                 window.localStorage.config = data.prefs;
 819                 window.localStorage.config_mtime = data.mtime;
 820                 window.localStorage.config_mtime_local = (new Date()).toUTCString();
 821                 updatePrefsDate();
 822                 $('div.localStorage-empty').hide();
 823                 $('div.localStorage-exists').show();
 824                 var group = $form.parent('.group');
 825                 group.css('height', group.height() + 'px');
 826                 $form.hide('fast');
 827                 $form.prev('.click-hide-message').show('fast');
 828             } else {
 829                 PMA_ajaxShowMessage(data.error);
 830             }
 831         },
 832         complete: function () {
 833             submit.prop('disabled', false);
 834         }
 835     });
 836 }
 837
 838 /**
 839  * Updates preferences timestamp in Import form
 840  */
 841 function updatePrefsDate () {
 842     var d = new Date(window.localStorage.config_mtime_local);
 843     var msg = PMA_messages.strSavedOn.replace(
 844         '@DATE@',
 845         PMA_formatDateTime(d)
 846     );
 847     $('#opts_import_local_storage').find('div.localStorage-exists').html(msg);
 848 }
 849
 850 /**
 851  * Prepares message which informs that localStorage preferences are available and can be imported or deleted
 852  */
 853 function offerPrefsAutoimport () {
 854     var has_config = (isStorageSupported('localStorage')) && (window.localStorage.config || false);
 855     var $cnt = $('#prefs_autoload');
 856     if (!$cnt.length || !has_config) {
 857         return;
 858     }
 859     $cnt.find('a').click(function (e) {
 860         e.preventDefault();
 861         var $a = $(this);
 862         if ($a.attr('href') === '#no') {
 863             $cnt.remove();
 864             $.post('index.php', {
 865                 server: PMA_commonParams.get('server'),
 866                 prefs_autoload: 'hide'
 867             }, null, 'html');
 868             return;
 869         } else if ($a.attr('href') === '#delete') {
 870             $cnt.remove();
 871             localStorage.clear();
 872             $.post('index.php', {
 873                 server: PMA_commonParams.get('server'),
 874                 prefs_autoload: 'hide'
 875             }, null, 'html');
 876             return;
 877         }
 878         $cnt.find('input[name=json]').val(window.localStorage.config);
 879         $cnt.find('form').submit();
 880     });
 881     $cnt.show();
 882 }
 883
 884 //
 885 // END: User preferences import/export
 886 // ------------------------------------------------------------------