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