js/config.js

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