/** * Functions used in configuration forms and on user preferences pages */ /* exported PASSIVE_EVENT_LISTENERS */ var configInlineParams; var configScriptLoaded; /** * checks whether browser supports web storage * * @param {'localStorage' | 'sessionStorage'} type the type of storage i.e. localStorage or sessionStorage * @param {boolean} warn Wether to show a warning on error * * @return {boolean} */ function isStorageSupported(type) { let warn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; try { window[type].setItem('PMATest', 'test'); // Check whether key-value pair was set successfully if (window[type].getItem('PMATest') === 'test') { // Supported, remove test variable from storage window[type].removeItem('PMATest'); return true; } } catch (error) { // Not supported if (warn) { Functions.ajaxShowMessage(Messages.strNoLocalStorage, false); } } return false; } /** * Unbind all event handlers before tearing down a page */ AJAX.registerTeardown('config.js', function () { $('.optbox input[id], .optbox select[id], .optbox textarea[id]').off('change').off('keyup'); $('.optbox input[type=button][name=submit_reset]').off('click'); $('div.tab-content').off(); $('#import_local_storage, #export_local_storage').off('click'); $('form.prefs-form').off('change').off('submit'); $(document).off('click', 'div.click-hide-message'); $('#prefs_autoload').find('a').off('click'); }); AJAX.registerOnload('config.js', function () { var $topmenuUpt = $('#user_prefs_tabs'); $topmenuUpt.find('a.active').attr('rel', 'samepage'); $topmenuUpt.find('a:not(.active)').attr('rel', 'newpage'); }); // default values for fields var defaultValues = {}; /** * Returns field type * * @param {Element} field * * @return {string} */ function getFieldType(field) { var $field = $(field); var tagName = $field.prop('tagName'); if (tagName === 'INPUT') { return $field.attr('type'); } else if (tagName === 'SELECT') { return 'select'; } else if (tagName === 'TEXTAREA') { return 'text'; } return ''; } /** * Enables or disables the "restore default value" button * * @param {Element} field * @param {boolean} display * * @return {void} */ function setRestoreDefaultBtn(field, display) { var $el = $(field).closest('td').find('.restore-default img'); $el[display ? 'show' : 'hide'](); } /** * Marks field depending on its value (system default or custom) * * @param {Element | JQuery} field * * @return {void} */ function markField(field) { var $field = $(field); var type = getFieldType($field); var isDefault = checkFieldDefault($field, type); // checkboxes uses parent for marking var $fieldMarker = type === 'checkbox' ? $field.parent() : $field; setRestoreDefaultBtn($field, !isDefault); $fieldMarker[isDefault ? 'removeClass' : 'addClass']('custom'); } /** * Sets field value * * value must be of type: * o undefined (omitted) - restore default value (form default, not PMA default) * o String - if field_type is 'text' * o boolean - if field_type is 'checkbox' * o Array of values - if field_type is 'select' * * @param {Element} field * @param {string} fieldType see {@link #getFieldType} * @param {string | boolean} value */ function setFieldValue(field, fieldType, value) { var $field = $(field); switch (fieldType) { case 'text': case 'number': $field.val(value); break; case 'checkbox': $field.prop('checked', value); break; case 'select': var options = $field.prop('options'); var i; var imax = options.length; for (i = 0; i < imax; i++) { options[i].selected = value.indexOf(options[i].value) !== -1; } break; } markField($field); } /** * Gets field value * * Will return one of: * o String - if type is 'text' * o boolean - if type is 'checkbox' * o Array of values - if type is 'select' * * @param {Element} field * @param {string} fieldType returned by {@link #getFieldType} * * @return {boolean | string | string[] | null} */ function getFieldValue(field, fieldType) { var $field = $(field); switch (fieldType) { case 'text': case 'number': return $field.prop('value'); case 'checkbox': return $field.prop('checked'); case 'select': var options = $field.prop('options'); var i; var imax = options.length; var items = []; for (i = 0; i < imax; i++) { if (options[i].selected) { items.push(options[i].value); } } return items; } return null; } /** * Returns values for all fields in fieldsets * * @return {object} */ // eslint-disable-next-line no-unused-vars function getAllValues() { var $elements = $('fieldset input, fieldset select, fieldset textarea'); var values = {}; var type; var value; for (var i = 0; i < $elements.length; i++) { type = getFieldType($elements[i]); value = getFieldValue($elements[i], type); if (typeof value !== 'undefined') { // we only have single selects, fatten array if (type === 'select') { value = value[0]; } values[$elements[i].name] = value; } } return values; } /** * Checks whether field has its default value * * @param {Element} field * @param {string} type * * @return {boolean} */ function checkFieldDefault(field, type) { var $field = $(field); var fieldId = $field.attr('id'); if (typeof defaultValues[fieldId] === 'undefined') { return true; } var isDefault = true; var currentValue = getFieldValue($field, type); if (type !== 'select') { isDefault = currentValue === defaultValues[fieldId]; } else { // compare arrays, will work for our representation of select values if (currentValue.length !== defaultValues[fieldId].length) { isDefault = false; } else { for (var i = 0; i < currentValue.length; i++) { if (currentValue[i] !== defaultValues[fieldId][i]) { isDefault = false; break; } } } } return isDefault; } /** * Returns element's id prefix * @param {Element} element * * @return {string} */ // eslint-disable-next-line no-unused-vars function getIdPrefix(element) { return $(element).attr('id').replace(/[^-]+$/, ''); } // ------------------------------------------------------------------ // Form validation and field operations // // form validator assignments var validate = {}; // form validator list var validators = { // regexp: numeric value regExpNumeric: /^[0-9]+$/, // regexp: extract parts from PCRE expression regExpPcreExtract: /(.)(.*)\1(.*)?/, /** * Validates positive number * * @param {boolean} isKeyUp * * @return {boolean} */ validatePositiveNumber: function (isKeyUp) { if (isKeyUp && this.value === '') { return true; } var result = this.value !== '0' && validators.regExpNumeric.test(this.value); return result ? true : Messages.error_nan_p; }, /** * Validates non-negative number * * @param {boolean} isKeyUp * * @return {boolean} */ validateNonNegativeNumber: function (isKeyUp) { if (isKeyUp && this.value === '') { return true; } var result = validators.regExpNumeric.test(this.value); return result ? true : Messages.error_nan_nneg; }, /** * Validates port number * * @return {true|string} */ validatePortNumber: function () { if (this.value === '') { return true; } var result = validators.regExpNumeric.test(this.value) && this.value !== '0'; return result && this.value <= 65535 ? true : Messages.error_incorrect_port; }, /** * Validates value according to given regular expression * * @param {boolean} isKeyUp * @param {string} regexp * * @return {true|string} */ validateByRegex: function (isKeyUp, regexp) { if (isKeyUp && this.value === '') { return true; } // convert PCRE regexp var parts = regexp.match(validators.regExpPcreExtract); var valid = this.value.match(new RegExp(parts[2], parts[3])) !== null; return valid ? true : Messages.error_invalid_value; }, /** * Validates upper bound for numeric inputs * * @param {boolean} isKeyUp * @param {number} maxValue * * @return {true|string} */ validateUpperBound: function (isKeyUp, maxValue) { var val = parseInt(this.value, 10); if (isNaN(val)) { return true; } return val <= maxValue ? true : Functions.sprintf(Messages.error_value_lte, maxValue); }, // field validators field: {}, // fieldset validators fieldset: {} }; /** * Registers validator for given field * * @param {string} id field id * @param {string} type validator (key in validators object) * @param {boolean} onKeyUp whether fire on key up * @param {Array} params validation function parameters */ // eslint-disable-next-line no-unused-vars function registerFieldValidator(id, type, onKeyUp, params) { if (typeof validators[type] === 'undefined') { return; } if (typeof validate[id] === 'undefined') { validate[id] = []; } if (validate[id].length === 0) { validate[id].push([type, params, onKeyUp]); } } /** * Returns validation functions associated with form field * * @param {String} fieldId form field id * @param {boolean} onKeyUpOnly see registerFieldValidator * * @return {any[]} of [function, parameters to be passed to function] */ function getFieldValidators(fieldId, onKeyUpOnly) { // look for field bound validator var name = fieldId && fieldId.match(/[^-]+$/)[0]; if (typeof validators.field[name] !== 'undefined') { return [[validators.field[name], null]]; } // look for registered validators var functions = []; if (typeof validate[fieldId] !== 'undefined') { // validate[field_id]: array of [type, params, onKeyUp] for (var i = 0, imax = validate[fieldId].length; i < imax; i++) { if (onKeyUpOnly && !validate[fieldId][i][2]) { continue; } functions.push([validators[validate[fieldId][i][0]], validate[fieldId][i][1]]); } } return functions; } /** * Displays errors for given form fields * * WARNING: created DOM elements must be identical with the ones made by * PhpMyAdmin\Config\FormDisplayTemplate::displayInput()! * * @param {object} errorList list of errors in the form {field id: error array} */ function displayErrors(errorList) { var tempIsEmpty = function (item) { return item !== ''; }; for (var fieldId in errorList) { var errors = errorList[fieldId]; var $field = $('#' + fieldId); var isFieldset = $field.attr('tagName') === 'FIELDSET'; var $errorCnt; if (isFieldset) { $errorCnt = $field.find('dl.errors'); } else { $errorCnt = $field.siblings('.inline_errors'); } // remove empty errors (used to clear error list) errors = $.grep(errors, tempIsEmpty); // CSS error class if (!isFieldset) { // checkboxes uses parent for marking var $fieldMarker = $field.attr('type') === 'checkbox' ? $field.parent() : $field; $fieldMarker[errors.length ? 'addClass' : 'removeClass']('field-error'); } if (errors.length) { // if error container doesn't exist, create it if ($errorCnt.length === 0) { if (isFieldset) { $errorCnt = $('
'); $field.find('table').before($errorCnt); } else { $errorCnt = $('
'); $field.closest('td').append($errorCnt); } } var html = ''; for (var i = 0, imax = errors.length; i < imax; i++) { html += '
' + errors[i] + '
'; } $errorCnt.html(html); } else if ($errorCnt !== null) { // remove useless error container $errorCnt.remove(); } } } /** * Validates fields and fieldsets and call displayError function as required */ function setDisplayError() { var elements = $('.optbox input[id], .optbox select[id], .optbox textarea[id]'); // run all field validators var errors = {}; for (var i = 0; i < elements.length; i++) { validateField(elements[i], false, errors); } // run all fieldset validators $('fieldset.optbox').each(function () { validateFieldset(this, false, errors); }); displayErrors(errors); } /** * Validates fieldset and puts errors in 'errors' object * * @param {Element} fieldset * @param {boolean} isKeyUp * @param {object} errors */ function validateFieldset(fieldset, isKeyUp, errors) { var $fieldset = $(fieldset); if ($fieldset.length && typeof validators.fieldset[$fieldset.attr('id')] !== 'undefined') { var fieldsetErrors = validators.fieldset[$fieldset.attr('id')].apply($fieldset[0], [isKeyUp]); for (var fieldId in fieldsetErrors) { if (typeof errors[fieldId] === 'undefined') { errors[fieldId] = []; } if (typeof fieldsetErrors[fieldId] === 'string') { fieldsetErrors[fieldId] = [fieldsetErrors[fieldId]]; } $.merge(errors[fieldId], fieldsetErrors[fieldId]); } } } /** * Validates form field and puts errors in 'errors' object * * @param {Element} field * @param {boolean} isKeyUp * @param {object} errors */ function validateField(field, isKeyUp, errors) { var args; var result; var $field = $(field); var fieldId = $field.attr('id'); errors[fieldId] = []; var functions = getFieldValidators(fieldId, isKeyUp); for (var i = 0; i < functions.length; i++) { if (typeof functions[i][1] !== 'undefined' && functions[i][1] !== null) { args = functions[i][1].slice(0); } else { args = []; } args.unshift(isKeyUp); result = functions[i][0].apply($field[0], args); if (result !== true) { if (typeof result === 'string') { result = [result]; } $.merge(errors[fieldId], result); } } } /** * Validates form field and parent fieldset * * @param {Element} field * @param {boolean} isKeyUp */ function validateFieldAndFieldset(field, isKeyUp) { var $field = $(field); var errors = {}; validateField($field, isKeyUp, errors); validateFieldset($field.closest('fieldset.optbox'), isKeyUp, errors); displayErrors(errors); } function loadInlineConfig() { if (!Array.isArray(configInlineParams)) { return; } for (var i = 0; i < configInlineParams.length; ++i) { if (typeof configInlineParams[i] === 'function') { configInlineParams[i](); } } } function setupValidation() { validate = {}; configScriptLoaded = true; if (configScriptLoaded && typeof configInlineParams !== 'undefined') { loadInlineConfig(); } // register validators and mark custom values var $elements = $('.optbox input[id], .optbox select[id], .optbox textarea[id]'); $elements.each(function () { markField(this); var $el = $(this); $el.on('change', function () { validateFieldAndFieldset(this, false); markField(this); }); var tagName = $el.attr('tagName'); // text fields can be validated after each change if (tagName === 'INPUT' && $el.attr('type') === 'text') { $el.on('keyup', function () { validateFieldAndFieldset($el, true); markField($el); }); } // disable textarea spellcheck if (tagName === 'TEXTAREA') { $el.attr('spellcheck', false); } }); // check whether we've refreshed a page and browser remembered modified // form values var $checkPageRefresh = $('#check_page_refresh'); if ($checkPageRefresh.length === 0 || $checkPageRefresh.val() === '1') { // run all field validators var errors = {}; for (var i = 0; i < $elements.length; i++) { validateField($elements[i], false, errors); } // run all fieldset validators $('fieldset.optbox').each(function () { validateFieldset(this, false, errors); }); displayErrors(errors); } else if ($checkPageRefresh) { $checkPageRefresh.val('1'); } } AJAX.registerOnload('config.js', function () { setupValidation(); }); // // END: Form validation and field operations // ------------------------------------------------------------------ function adjustPrefsNotification() { var $prefsAutoLoad = $('#prefs_autoload'); var $tableNameControl = $('#table_name_col_no'); var $prefsAutoShowing = $prefsAutoLoad.css('display') !== 'none'; if ($prefsAutoShowing && $tableNameControl.length) { $tableNameControl.css('top', '55px'); } } AJAX.registerOnload('config.js', function () { adjustPrefsNotification(); }); // ------------------------------------------------------------------ // Form reset buttons // AJAX.registerOnload('config.js', function () { $('.optbox input[type=button][name=submit_reset]').on('click', function () { var fields = $(this).closest('fieldset').find('input, select, textarea'); for (var i = 0, imax = fields.length; i < imax; i++) { setFieldValue(fields[i], getFieldType(fields[i]), defaultValues[fields[i].id]); } setDisplayError(); }); }); // // END: Form reset buttons // ------------------------------------------------------------------ // ------------------------------------------------------------------ // "Restore default" and "set value" buttons // /** * Restores field's default value * * @param {string} fieldId * * @return {void} */ function restoreField(fieldId) { var $field = $('#' + fieldId); if ($field.length === 0 || defaultValues[fieldId] === undefined) { return; } setFieldValue($field, getFieldType($field), defaultValues[fieldId]); } function setupRestoreField() { $('div.tab-content').on('mouseenter', '.restore-default, .set-value', function () { $(this).css('opacity', 1); }).on('mouseleave', '.restore-default, .set-value', function () { $(this).css('opacity', 0.25); }).on('click', '.restore-default, .set-value', function (e) { e.preventDefault(); var href = $(this).attr('href'); var fieldSel; if ($(this).hasClass('restore-default')) { fieldSel = href; restoreField(fieldSel.substr(1)); } else { fieldSel = href.match(/^[^=]+/)[0]; var value = href.match(/=(.+)$/)[1]; setFieldValue($(fieldSel), 'text', value); } $(fieldSel).trigger('change'); }).find('.restore-default, .set-value') // inline-block for IE so opacity inheritance works .css({ display: 'inline-block', opacity: 0.25 }); } AJAX.registerOnload('config.js', function () { setupRestoreField(); }); // // END: "Restore default" and "set value" buttons // ------------------------------------------------------------------ // ------------------------------------------------------------------ // User preferences import/export // AJAX.registerOnload('config.js', function () { offerPrefsAutoimport(); var $radios = $('#import_local_storage, #export_local_storage'); if (!$radios.length) { return; } // enable JavaScript dependent fields $radios.prop('disabled', false).add('#export_text_file, #import_text_file').on('click', function () { var enableId = $(this).attr('id'); var disableId; if (enableId.match(/local_storage$/)) { disableId = enableId.replace(/local_storage$/, 'text_file'); } else { disableId = enableId.replace(/text_file$/, 'local_storage'); } $('#opts_' + disableId).addClass('disabled').find('input').prop('disabled', true); $('#opts_' + enableId).removeClass('disabled').find('input').prop('disabled', false); }); // detect localStorage state var lsSupported = isStorageSupported('localStorage', true); var lsExists = lsSupported ? window.localStorage.config || false : false; $('div.localStorage-' + (lsSupported ? 'un' : '') + 'supported').hide(); $('div.localStorage-' + (lsExists ? 'empty' : 'exists')).hide(); if (lsExists) { updatePrefsDate(); } $('form.prefs-form').on('change', function () { var $form = $(this); var disabled = false; if (!lsSupported) { disabled = $form.find('input[type=radio][value$=local_storage]').prop('checked'); } else if (!lsExists && $form.attr('name') === 'prefs_import' && $('#import_local_storage')[0].checked) { disabled = true; } $form.find('input[type=submit]').prop('disabled', disabled); }).on('submit', function (e) { var $form = $(this); if ($form.attr('name') === 'prefs_export' && $('#export_local_storage')[0].checked) { e.preventDefault(); // use AJAX to read JSON settings and save them savePrefsToLocalStorage($form); } else if ($form.attr('name') === 'prefs_import' && $('#import_local_storage')[0].checked) { // set 'json' input and submit form $form.find('input[name=json]').val(window.localStorage.config); } }); $(document).on('click', 'div.click-hide-message', function () { $(this).hide().parent('.card-body').css('height', '').next('form').show(); }); }); /** * Saves user preferences to localStorage * * @param {Element} form */ function savePrefsToLocalStorage(form) { var $form = $(form); var submit = $form.find('input[type=submit]'); submit.prop('disabled', true); $.ajax({ url: 'index.php?route=/preferences/manage', cache: false, type: 'POST', data: { 'ajax_request': true, 'server': CommonParams.get('server'), 'submit_get_json': true }, success: function (data) { if (typeof data !== 'undefined' && data.success === true) { window.localStorage.config = data.prefs; window.localStorage.configMtime = data.mtime; window.localStorage.configMtimeLocal = new Date().toUTCString(); updatePrefsDate(); $('div.localStorage-empty').hide(); $('div.localStorage-exists').show(); var group = $form.parent('.card-body'); group.css('height', group.height() + 'px'); $form.hide('fast'); $form.prev('.click-hide-message').show('fast'); } else { Functions.ajaxShowMessage(data.error); } }, complete: function () { submit.prop('disabled', false); } }); } /** * Updates preferences timestamp in Import form */ function updatePrefsDate() { var d = new Date(window.localStorage.configMtimeLocal); var msg = Messages.strSavedOn.replace('@DATE@', Functions.formatDateTime(d)); $('#opts_import_local_storage').find('div.localStorage-exists').html(msg); } /** * Prepares message which informs that localStorage preferences are available and can be imported or deleted */ function offerPrefsAutoimport() { var hasConfig = isStorageSupported('localStorage') && (window.localStorage.config || false); var $cnt = $('#prefs_autoload'); if (!$cnt.length || !hasConfig) { return; } $cnt.find('a').on('click', function (e) { e.preventDefault(); var $a = $(this); if ($a.attr('href') === '#no') { $cnt.remove(); $.post('index.php', { 'server': CommonParams.get('server'), 'prefs_autoload': 'hide' }, null, 'html'); return; } else if ($a.attr('href') === '#delete') { $cnt.remove(); localStorage.clear(); $.post('index.php', { 'server': CommonParams.get('server'), 'prefs_autoload': 'hide' }, null, 'html'); return; } $cnt.find('input[name=json]').val(window.localStorage.config); $cnt.find('form').trigger('submit'); }); $cnt.show(); } /** * @type {boolean} Support for passive event listener option */ var PASSIVE_EVENT_LISTENERS = function () { var passive = false; try { var options = Object.defineProperty({}, 'passive', { get: function () { return passive = true; } }); window.addEventListener('_', null, options); window.removeEventListener('_', null, options); } catch (error) {// passive not supported } return passive; }();