1 /* vim: set expandtab sw=4 ts=4 sts=4: */
3 * Functions used in configuration forms and on user preferences pages
6 var configInlineParams;
7 var configScriptLoaded;
10 * checks whether browser supports web storage
12 * @param type the type of storage i.e. localStorage or sessionStorage
16 function isStorageSupported (type, warn) {
18 window[type].setItem('PMATest', 'test');
19 // Check whether key-value pair was set successfully
20 if (window[type].getItem('PMATest') === 'test') {
21 // Supported, remove test variable from storage
22 window[type].removeItem('PMATest');
28 Functions.ajaxShowMessage(Messages.strNoLocalStorage, false);
35 * Unbind all event handlers before tearing down a page
37 AJAX.registerTeardown('config.js', function () {
38 $('.optbox input[id], .optbox select[id], .optbox textarea[id]').off('change').off('keyup');
39 $('.optbox input[type=button][name=submit_reset]').off('click');
40 $('div.tabs_contents').off();
41 $('#import_local_storage, #export_local_storage').off('click');
42 $('form.prefs-form').off('change').off('submit');
43 $(document).off('click', 'div.click-hide-message');
44 $('#prefs_autoload').find('a').off('click');
47 AJAX.registerOnload('config.js', function () {
48 var $topmenuUpt = $('#topmenu2.user_prefs_tabs');
49 $topmenuUpt.find('li.active a').attr('rel', 'samepage');
50 $topmenuUpt.find('li:not(.active) a').attr('rel', 'newpage');
53 // default values for fields
54 var defaultValues = {};
59 * @param {Element} field
61 function getFieldType (field) {
62 var $field = $(field);
63 var tagName = $field.prop('tagName');
64 if (tagName === 'INPUT') {
65 return $field.attr('type');
66 } else if (tagName === 'SELECT') {
68 } else if (tagName === 'TEXTAREA') {
75 * Enables or disables the "restore default value" button
77 * @param {Element} field
78 * @param {boolean} display
80 function setRestoreDefaultBtn (field, display) {
81 var $el = $(field).closest('td').find('.restore-default img');
82 $el[display ? 'show' : 'hide']();
86 * Marks field depending on its value (system default or custom)
88 * @param {Element} field
90 function markField (field) {
91 var $field = $(field);
92 var type = getFieldType($field);
93 var isDefault = checkFieldDefault($field, type);
95 // checkboxes uses parent <span> for marking
96 var $fieldMarker = (type === 'checkbox') ? $field.parent() : $field;
97 setRestoreDefaultBtn($field, !isDefault);
98 $fieldMarker[isDefault ? 'removeClass' : 'addClass']('custom');
104 * value must be of type:
105 * o undefined (omitted) - restore default value (form default, not PMA default)
106 * o String - if field_type is 'text'
107 * o boolean - if field_type is 'checkbox'
108 * o Array of values - if field_type is 'select'
110 * @param {Element} field
111 * @param {String} fieldType see {@link #getFieldType}
112 * @param {String|Boolean} value
114 function setFieldValue (field, fieldType, value) {
115 var $field = $(field);
122 $field.prop('checked', value);
125 var options = $field.prop('options');
127 var imax = options.length;
128 for (i = 0; i < imax; i++) {
129 options[i].selected = (value.indexOf(options[i].value) !== -1);
139 * Will return one of:
140 * o String - if type is 'text'
141 * o boolean - if type is 'checkbox'
142 * o Array of values - if type is 'select'
144 * @param {Element} field
145 * @param {String} fieldType returned by {@link #getFieldType}
146 * @type Boolean|String|String[]
148 function getFieldValue (field, fieldType) {
149 var $field = $(field);
153 return $field.prop('value');
155 return $field.prop('checked');
157 var options = $field.prop('options');
159 var imax = options.length;
161 for (i = 0; i < imax; i++) {
162 if (options[i].selected) {
163 items.push(options[i].value);
172 * Returns values for all fields in fieldsets
174 // eslint-disable-next-line no-unused-vars
175 function getAllValues () {
176 var $elements = $('fieldset input, fieldset select, fieldset textarea');
180 for (var i = 0; i < $elements.length; i++) {
181 type = getFieldType($elements[i]);
182 value = getFieldValue($elements[i], type);
183 if (typeof value !== 'undefined') {
184 // we only have single selects, fatten array
185 if (type === 'select') {
188 values[$elements[i].name] = value;
195 * Checks whether field has its default value
197 * @param {Element} field
198 * @param {String} type
201 function checkFieldDefault (field, type) {
202 var $field = $(field);
203 var fieldId = $field.attr('id');
204 if (typeof defaultValues[fieldId] === 'undefined') {
207 var isDefault = true;
208 var currentValue = getFieldValue($field, type);
209 if (type !== 'select') {
210 isDefault = currentValue === defaultValues[fieldId];
212 // compare arrays, will work for our representation of select values
213 if (currentValue.length !== defaultValues[fieldId].length) {
216 for (var i = 0; i < currentValue.length; i++) {
217 if (currentValue[i] !== defaultValues[fieldId][i]) {
228 * Returns element's id prefix
229 * @param {Element} element
231 // eslint-disable-next-line no-unused-vars
232 function getIdPrefix (element) {
233 return $(element).attr('id').replace(/[^-]+$/, '');
236 // ------------------------------------------------------------------
237 // Form validation and field operations
240 // form validator assignments
243 // form validator list
245 // regexp: numeric value
246 regExpNumeric: /^[0-9]+$/,
247 // regexp: extract parts from PCRE expression
248 regExpPcreExtract: /(.)(.*)\1(.*)?/,
250 * Validates positive number
252 * @param {boolean} isKeyUp
254 validatePositiveNumber: function (isKeyUp) {
255 if (isKeyUp && this.value === '') {
258 var result = this.value !== '0' && validators.regExpNumeric.test(this.value);
259 return result ? true : Messages.error_nan_p;
262 * Validates non-negative number
264 * @param {boolean} isKeyUp
266 validateNonNegativeNumber: function (isKeyUp) {
267 if (isKeyUp && this.value === '') {
270 var result = validators.regExpNumeric.test(this.value);
271 return result ? true : Messages.error_nan_nneg;
274 * Validates port number
276 validatePortNumber: function () {
277 if (this.value === '') {
280 var result = validators.regExpNumeric.test(this.value) && this.value !== '0';
281 return result && this.value <= 65535 ? true : Messages.error_incorrect_port;
284 * Validates value according to given regular expression
286 * @param {boolean} isKeyUp
287 * @param {string} regexp
289 validateByRegex: function (isKeyUp, regexp) {
290 if (isKeyUp && this.value === '') {
293 // convert PCRE regexp
294 var parts = regexp.match(validators.regExpPcreExtract);
295 var valid = this.value.match(new RegExp(parts[2], parts[3])) !== null;
296 return valid ? true : Messages.error_invalid_value;
299 * Validates upper bound for numeric inputs
301 * @param {boolean} isKeyUp
302 * @param {int} maxValue
304 validateUpperBound: function (isKeyUp, maxValue) {
305 var val = parseInt(this.value, 10);
309 return val <= maxValue ? true : Functions.sprintf(Messages.error_value_lte, maxValue);
314 // fieldset validators
320 * Registers validator for given field
322 * @param {String} id field id
323 * @param {String} type validator (key in validators object)
324 * @param {boolean} onKeyUp whether fire on key up
325 * @param {Array} params validation function parameters
327 // eslint-disable-next-line no-unused-vars
328 function registerFieldValidator (id, type, onKeyUp, params) {
329 if (typeof validators[type] === 'undefined') {
332 if (typeof validate[id] === 'undefined') {
335 if (validate[id].length === 0) {
336 validate[id].push([type, params, onKeyUp]);
341 * Returns validation functions associated with form field
343 * @param {String} fieldId form field id
344 * @param {boolean} onKeyUpOnly see registerFieldValidator
346 * @return array of [function, parameters to be passed to function]
348 function getFieldValidators (fieldId, onKeyUpOnly) {
349 // look for field bound validator
350 var name = fieldId && fieldId.match(/[^-]+$/)[0];
351 if (typeof validators.field[name] !== 'undefined') {
352 return [[validators.field[name], null]];
355 // look for registered validators
357 if (typeof validate[fieldId] !== 'undefined') {
358 // validate[field_id]: array of [type, params, onKeyUp]
359 for (var i = 0, imax = validate[fieldId].length; i < imax; i++) {
360 if (onKeyUpOnly && !validate[fieldId][i][2]) {
363 functions.push([validators[validate[fieldId][i][0]], validate[fieldId][i][1]]);
371 * Displays errors for given form fields
373 * WARNING: created DOM elements must be identical with the ones made by
374 * PhpMyAdmin\Config\FormDisplayTemplate::displayInput()!
376 * @param {Object} errorList list of errors in the form {field id: error array}
378 function displayErrors (errorList) {
379 var tempIsEmpty = function (item) {
383 for (var fieldId in errorList) {
384 var errors = errorList[fieldId];
385 var $field = $('#' + fieldId);
386 var isFieldset = $field.attr('tagName') === 'FIELDSET';
389 $errorCnt = $field.find('dl.errors');
391 $errorCnt = $field.siblings('.inline_errors');
394 // remove empty errors (used to clear error list)
395 errors = $.grep(errors, tempIsEmpty);
399 // checkboxes uses parent <span> for marking
400 var $fieldMarker = ($field.attr('type') === 'checkbox') ? $field.parent() : $field;
401 $fieldMarker[errors.length ? 'addClass' : 'removeClass']('field-error');
405 // if error container doesn't exist, create it
406 if ($errorCnt.length === 0) {
408 $errorCnt = $('<dl class="errors"></dl>');
409 $field.find('table').before($errorCnt);
411 $errorCnt = $('<dl class="inline_errors"></dl>');
412 $field.closest('td').append($errorCnt);
417 for (var i = 0, imax = errors.length; i < imax; i++) {
418 html += '<dd>' + errors[i] + '</dd>';
420 $errorCnt.html(html);
421 } else if ($errorCnt !== null) {
422 // remove useless error container
429 * Validates fields and fieldsets and call displayError function as required
431 function setDisplayError () {
432 var elements = $('.optbox input[id], .optbox select[id], .optbox textarea[id]');
433 // run all field validators
435 for (var i = 0; i < elements.length; i++) {
436 validateField(elements[i], false, errors);
438 // run all fieldset validators
439 $('fieldset.optbox').each(function () {
440 validateFieldset(this, false, errors);
442 displayErrors(errors);
446 * Validates fieldset and puts errors in 'errors' object
448 * @param {Element} fieldset
449 * @param {boolean} isKeyUp
450 * @param {Object} errors
452 function validateFieldset (fieldset, isKeyUp, errors) {
453 var $fieldset = $(fieldset);
454 if ($fieldset.length && typeof validators.fieldset[$fieldset.attr('id')] !== 'undefined') {
455 var fieldsetErrors = validators.fieldset[$fieldset.attr('id')].apply($fieldset[0], [isKeyUp]);
456 for (var fieldId in fieldsetErrors) {
457 if (typeof errors[fieldId] === 'undefined') {
458 errors[fieldId] = [];
460 if (typeof fieldsetErrors[fieldId] === 'string') {
461 fieldsetErrors[fieldId] = [fieldsetErrors[fieldId]];
463 $.merge(errors[fieldId], fieldsetErrors[fieldId]);
469 * Validates form field and puts errors in 'errors' object
471 * @param {Element} field
472 * @param {boolean} isKeyUp
473 * @param {Object} errors
475 function validateField (field, isKeyUp, errors) {
478 var $field = $(field);
479 var fieldId = $field.attr('id');
480 errors[fieldId] = [];
481 var functions = getFieldValidators(fieldId, isKeyUp);
482 for (var i = 0; i < functions.length; i++) {
483 if (typeof functions[i][1] !== 'undefined' && functions[i][1] !== null) {
484 args = functions[i][1].slice(0);
488 args.unshift(isKeyUp);
489 result = functions[i][0].apply($field[0], args);
490 if (result !== true) {
491 if (typeof result === 'string') {
494 $.merge(errors[fieldId], result);
500 * Validates form field and parent fieldset
502 * @param {Element} field
503 * @param {boolean} isKeyUp
505 function validateFieldAndFieldset (field, isKeyUp) {
506 var $field = $(field);
508 validateField($field, isKeyUp, errors);
509 validateFieldset($field.closest('fieldset.optbox'), isKeyUp, errors);
510 displayErrors(errors);
513 function loadInlineConfig () {
514 if (!Array.isArray(configInlineParams)) {
517 for (var i = 0; i < configInlineParams.length; ++i) {
518 if (typeof configInlineParams[i] === 'function') {
519 configInlineParams[i]();
524 function setupValidation () {
526 configScriptLoaded = true;
527 if (configScriptLoaded && typeof configInlineParams !== 'undefined') {
530 // register validators and mark custom values
531 var $elements = $('.optbox input[id], .optbox select[id], .optbox textarea[id]');
532 $elements.each(function () {
535 $el.on('change', function () {
536 validateFieldAndFieldset(this, false);
539 var tagName = $el.attr('tagName');
540 // text fields can be validated after each change
541 if (tagName === 'INPUT' && $el.attr('type') === 'text') {
542 $el.on('keyup', function () {
543 validateFieldAndFieldset($el, true);
547 // disable textarea spellcheck
548 if (tagName === 'TEXTAREA') {
549 $el.attr('spellcheck', false);
553 // check whether we've refreshed a page and browser remembered modified
555 var $checkPageRefresh = $('#check_page_refresh');
556 if ($checkPageRefresh.length === 0 || $checkPageRefresh.val() === '1') {
557 // run all field validators
559 for (var i = 0; i < $elements.length; i++) {
560 validateField($elements[i], false, errors);
562 // run all fieldset validators
563 $('fieldset.optbox').each(function () {
564 validateFieldset(this, false, errors);
567 displayErrors(errors);
568 } else if ($checkPageRefresh) {
569 $checkPageRefresh.val('1');
573 AJAX.registerOnload('config.js', function () {
578 // END: Form validation and field operations
579 // ------------------------------------------------------------------
581 // ------------------------------------------------------------------
588 * @param {String} tabId
590 function setTab (tabId) {
591 $('ul.tabs').each(function () {
593 if (!$this.find('li a[href="#' + tabId + '"]').length) {
596 $this.find('li').removeClass('active').find('a[href="#' + tabId + '"]').parent().addClass('active');
597 $this.parent().find('div.tabs_contents fieldset').hide().filter('#' + tabId).show();
598 var hashValue = 'tab_' + tabId;
599 location.hash = hashValue;
600 $this.parent().find('input[name=tab_hash]').val(hashValue);
604 function setupConfigTabs () {
605 var forms = $('form.config-form');
606 forms.each(function () {
608 var $tabs = $this.find('ul.tabs');
612 // add tabs events and activate one tab (the first one or indicated by location hash)
613 $tabs.find('li').removeClass('active');
615 .on('click', function (e) {
617 setTab($(this).attr('href').substr(1));
622 $this.find('div.tabs_contents fieldset').hide().filter(':first').show();
626 function adjustPrefsNotification () {
627 var $prefsAutoLoad = $('#prefs_autoload');
628 var $tableNameControl = $('#table_name_col_no');
629 var $prefsAutoShowing = ($prefsAutoLoad.css('display') !== 'none');
631 if ($prefsAutoShowing && $tableNameControl.length) {
632 $tableNameControl.css('top', '55px');
636 AJAX.registerOnload('config.js', function () {
638 adjustPrefsNotification();
640 // tab links handling, check each 200ms
641 // (works with history in FF, further browser support here would be an overkill)
643 var tabCheckFnc = function () {
644 if (location.hash !== prevHash) {
645 prevHash = location.hash;
646 if (prevHash.match(/^#tab_[a-zA-Z0-9_]+$/)) {
647 // session ID is sometimes appended here
648 var hash = prevHash.substr(5).split('&')[0];
649 if ($('#' + hash).length) {
656 setInterval(tabCheckFnc, 200);
661 // ------------------------------------------------------------------
663 // ------------------------------------------------------------------
664 // Form reset buttons
667 AJAX.registerOnload('config.js', function () {
668 $('.optbox input[type=button][name=submit_reset]').on('click', function () {
669 var fields = $(this).closest('fieldset').find('input, select, textarea');
670 for (var i = 0, imax = fields.length; i < imax; i++) {
671 setFieldValue(fields[i], getFieldType(fields[i]), defaultValues[fields[i].id]);
678 // END: Form reset buttons
679 // ------------------------------------------------------------------
681 // ------------------------------------------------------------------
682 // "Restore default" and "set value" buttons
686 * Restores field's default value
688 * @param {String} fieldId
690 function restoreField (fieldId) {
691 var $field = $('#' + fieldId);
692 if ($field.length === 0 || defaultValues[fieldId] === undefined) {
695 setFieldValue($field, getFieldType($field), defaultValues[fieldId]);
698 function setupRestoreField () {
699 $('div.tabs_contents')
700 .on('mouseenter', '.restore-default, .set-value', function () {
701 $(this).css('opacity', 1);
703 .on('mouseleave', '.restore-default, .set-value', function () {
704 $(this).css('opacity', 0.25);
706 .on('click', '.restore-default, .set-value', function (e) {
708 var href = $(this).attr('href');
710 if ($(this).hasClass('restore-default')) {
712 restoreField(fieldSel.substr(1));
714 fieldSel = href.match(/^[^=]+/)[0];
715 var value = href.match(/=(.+)$/)[1];
716 setFieldValue($(fieldSel), 'text', value);
718 $(fieldSel).trigger('change');
720 .find('.restore-default, .set-value')
721 // inline-block for IE so opacity inheritance works
722 .css({ display: 'inline-block', opacity: 0.25 });
725 AJAX.registerOnload('config.js', function () {
730 // END: "Restore default" and "set value" buttons
731 // ------------------------------------------------------------------
733 // ------------------------------------------------------------------
734 // User preferences import/export
737 AJAX.registerOnload('config.js', function () {
738 offerPrefsAutoimport();
739 var $radios = $('#import_local_storage, #export_local_storage');
740 if (!$radios.length) {
744 // enable JavaScript dependent fields
746 .prop('disabled', false)
747 .add('#export_text_file, #import_text_file')
748 .on('click', function () {
749 var enableId = $(this).attr('id');
751 if (enableId.match(/local_storage$/)) {
752 disableId = enableId.replace(/local_storage$/, 'text_file');
754 disableId = enableId.replace(/text_file$/, 'local_storage');
756 $('#opts_' + disableId).addClass('disabled').find('input').prop('disabled', true);
757 $('#opts_' + enableId).removeClass('disabled').find('input').prop('disabled', false);
760 // detect localStorage state
761 var lsSupported = isStorageSupported('localStorage', true);
762 var lsExists = lsSupported ? (window.localStorage.config || false) : false;
763 $('div.localStorage-' + (lsSupported ? 'un' : '') + 'supported').hide();
764 $('div.localStorage-' + (lsExists ? 'empty' : 'exists')).hide();
768 $('form.prefs-form').on('change', function () {
770 var disabled = false;
772 disabled = $form.find('input[type=radio][value$=local_storage]').prop('checked');
773 } else if (!lsExists && $form.attr('name') === 'prefs_import' &&
774 $('#import_local_storage')[0].checked
778 $form.find('input[type=submit]').prop('disabled', disabled);
779 }).submit(function (e) {
781 if ($form.attr('name') === 'prefs_export' && $('#export_local_storage')[0].checked) {
783 // use AJAX to read JSON settings and save them
784 savePrefsToLocalStorage($form);
785 } else if ($form.attr('name') === 'prefs_import' && $('#import_local_storage')[0].checked) {
786 // set 'json' input and submit form
787 $form.find('input[name=json]').val(window.localStorage.config);
791 $(document).on('click', 'div.click-hide-message', function () {
802 * Saves user preferences to localStorage
804 * @param {Element} form
806 function savePrefsToLocalStorage (form) {
808 var submit = $form.find('input[type=submit]');
809 submit.prop('disabled', true);
811 url: 'prefs_manage.php',
815 'ajax_request': true,
816 'server': CommonParams.get('server'),
817 'submit_get_json': true
819 success: function (data) {
820 if (typeof data !== 'undefined' && data.success === true) {
821 window.localStorage.config = data.prefs;
822 window.localStorage.configMtime = data.mtime;
823 window.localStorage.configMtimeLocal = (new Date()).toUTCString();
825 $('div.localStorage-empty').hide();
826 $('div.localStorage-exists').show();
827 var group = $form.parent('.group');
828 group.css('height', group.height() + 'px');
830 $form.prev('.click-hide-message').show('fast');
832 Functions.ajaxShowMessage(data.error);
835 complete: function () {
836 submit.prop('disabled', false);
842 * Updates preferences timestamp in Import form
844 function updatePrefsDate () {
845 var d = new Date(window.localStorage.configMtimeLocal);
846 var msg = Messages.strSavedOn.replace(
848 Functions.formatDateTime(d)
850 $('#opts_import_local_storage').find('div.localStorage-exists').html(msg);
854 * Prepares message which informs that localStorage preferences are available and can be imported or deleted
856 function offerPrefsAutoimport () {
857 var hasConfig = (isStorageSupported('localStorage')) && (window.localStorage.config || false);
858 var $cnt = $('#prefs_autoload');
859 if (!$cnt.length || !hasConfig) {
862 $cnt.find('a').on('click', function (e) {
865 if ($a.attr('href') === '#no') {
867 $.post('index.php', {
868 'server': CommonParams.get('server'),
869 'prefs_autoload': 'hide'
872 } else if ($a.attr('href') === '#delete') {
874 localStorage.clear();
875 $.post('index.php', {
876 'server': CommonParams.get('server'),
877 'prefs_autoload': 'hide'
881 $cnt.find('input[name=json]').val(window.localStorage.config);
882 $cnt.find('form').trigger('submit');