gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #14470 from Piyush3079/Mod_Js_Config_Js

Browse Source 
Modularized Config.js and add build script
This commit is contained in:
Deven Bansod 2018-08-06 17:41:04 -07:00 committed by GitHub
commit 0e16cc519e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 1053 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
js/functions.js
View File

@ -5165,3 +5165,21 @@ function checkPasswordStrength (value, meter_obj, meter_object_label, username)
case 4: meter_object_label.html(PMA_messages.strStrong);
}
}
function isStorageSupported (type, warn) {
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) {
PMA_ajaxShowMessage(PMA_messages.strNoLocalStorage, false);
}
}
return false;
}

3
js/src/ajax.js
View File

@ -5,6 +5,8 @@ import { jQuery as $ } from './utils/JqueryExtended';
import { PMA_getImage } from './functions/get_image';
import { PMA_ensureNaviSettings, PMA_reloadNavigation,
PMA_disableNaviSettings } from './functions/navigation';
import { isStorageSupported } from './functions/config';
/**
* This object handles ajax requests for pages. It also
* handles the reloading of the main menu and scripts.
@ -92,7 +94,6 @@ export let AJAX = {
* @return self For chaining
*/
registerOnload: function (file, func) {
var eventName = 'onload_' + this.hash(file);
$(document).on(eventName, func);
if (this._debug) {

80
js/src/classes/Config.js Normal file
View File

@ -0,0 +1,80 @@
import { PMA_Messages as PMA_messages } from '../variables/export_variables';
import { PMA_sprintf } from '../utils/sprintf';
// form validator list
export var validators = {
// regexp: numeric value
_regexp_numeric: /^[0-9]+$/,
// regexp: extract parts from PCRE expression
_regexp_pcre_extract: /(.)(.*)\1(.*)?/,
/**
* Validates positive number
*
* @param {boolean} isKeyUp
*/
PMA_validatePositiveNumber: function (isKeyUp) {
if (isKeyUp && this.value === '') {
return true;
}
var result = this.value !== '0' && validators._regexp_numeric.test(this.value);
return result ? true : PMA_messages.error_nan_p;
},
/**
* Validates non-negative number
*
* @param {boolean} isKeyUp
*/
PMA_validateNonNegativeNumber: function (isKeyUp) {
if (isKeyUp && this.value === '') {
return true;
}
var result = validators._regexp_numeric.test(this.value);
return result ? true : PMA_messages.error_nan_nneg;
},
/**
* Validates port number
*
* @param {boolean} isKeyUp
*/
PMA_validatePortNumber: function () {
if (this.value === '') {
return true;
}
var result = validators._regexp_numeric.test(this.value) && this.value !== '0';
return result && this.value <= 65535 ? true : PMA_messages.error_incorrect_port;
},
/**
* Validates value according to given regular expression
*
* @param {boolean} isKeyUp
* @param {string} regexp
*/
PMA_validateByRegex: function (isKeyUp, regexp) {
if (isKeyUp && this.value === '') {
return true;
}
// convert PCRE regexp
var parts = regexp.match(validators._regexp_pcre_extract);
var valid = this.value.match(new RegExp(parts[2], parts[3])) !== null;
return valid ? true : PMA_messages.error_invalid_value;
},
/**
* Validates upper bound for numeric inputs
*
* @param {boolean} isKeyUp
* @param {int} max_value
*/
PMA_validateUpperBound: function (isKeyUp, max_value) {
var val = parseInt(this.value, 10);
if (isNaN(val)) {
return true;
}
return val <= max_value ? true : PMA_sprintf(PMA_messages.error_value_lte, max_value);
},
// field validators
_field: {
},
// fieldset validators
_fieldset: {
}
};

176
js/src/config.js Normal file
View File

@ -0,0 +1,176 @@
/* vim: set expandtab sw=4 ts=4 sts=4: */
import { isStorageSupported, updatePrefsDate, offerPrefsAutoimport,
savePrefsToLocalStorage, setupRestoreField, getFieldType,
setFieldValue, setupConfigTabs, adjustPrefsNotification, setTab,
setupValidation } from './functions/config';
import { defaultValues } from './variables/get_config';
/**
* Functions used in configuration forms and on user preferences pages
*/
/**
* Unbind all event handlers before tearing down a page
*/
export function teardown1 () {
$('.optbox input[id], .optbox select[id], .optbox textarea[id]').off('change').off('keyup');
$('.optbox input[type=button][name=submit_reset]').off('click');
$('div.tabs_contents').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');
}
export function onload1 () {
var $topmenu_upt = $('#topmenu2.user_prefs_tabs');
$topmenu_upt.find('li.active a').attr('rel', 'samepage');
$topmenu_upt.find('li:not(.active) a').attr('rel', 'newpage');
}
// ------------------------------------------------------------------
// Form validation and field operations
//
export function onload2 () {
setupValidation();
}
//
// END: Form validation and field operations
// ------------------------------------------------------------------
// ------------------------------------------------------------------
// Tabbed forms
//
export function onload3 () {
setupConfigTabs();
adjustPrefsNotification();
// tab links handling, check each 200ms
// (works with history in FF, further browser support here would be an overkill)
var prev_hash;
var tab_check_fnc = function () {
if (location.hash !== prev_hash) {
prev_hash = location.hash;
if (prev_hash.match(/^#tab_[a-zA-Z0-9_]+$/)) {
// session ID is sometimes appended here
var hash = prev_hash.substr(5).split('&')[0];
if ($('#' + hash).length) {
setTab(hash);
}
}
}
};
tab_check_fnc();
setInterval(tab_check_fnc, 200);
}
//
// END: Tabbed forms
// ------------------------------------------------------------------
// ------------------------------------------------------------------
// Form reset buttons
//
export function onload4 () {
$('.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]);
}
});
}
//
// END: Form reset buttons
// ------------------------------------------------------------------
// ------------------------------------------------------------------
// "Restore default" and "set value" buttons
//
export function onload5 () {
setupRestoreField();
}
//
// END: "Restore default" and "set value" buttons
// ------------------------------------------------------------------
// ------------------------------------------------------------------
// User preferences import/export
//
export function onload6 () {
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 enable_id = $(this).attr('id');
var disable_id;
if (enable_id.match(/local_storage$/)) {
disable_id = enable_id.replace(/local_storage$/, 'text_file');
} else {
disable_id = enable_id.replace(/text_file$/, 'local_storage');
}
$('#opts_' + disable_id).addClass('disabled').find('input').prop('disabled', true);
$('#opts_' + enable_id).removeClass('disabled').find('input').prop('disabled', false);
});
// detect localStorage state
var ls_supported = isStorageSupported('localStorage', true);
var ls_exists = ls_supported ? (window.localStorage.config || false) : false;
$('div.localStorage-' + (ls_supported ? 'un' : '') + 'supported').hide();
$('div.localStorage-' + (ls_exists ? 'empty' : 'exists')).hide();
if (ls_exists) {
updatePrefsDate();
}
$('form.prefs-form').on('change', function () {
var $form = $(this);
var disabled = false;
if (!ls_supported) {
disabled = $form.find('input[type=radio][value$=local_storage]').prop('checked');
} else if (!ls_exists && $form.attr('name') === 'prefs_import' &&
$('#import_local_storage')[0].checked
) {
disabled = true;
}
$form.find('input[type=submit]').prop('disabled', disabled);
}).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('.group')
.css('height', '')
.next('form')
.show();
});
}
//
// END: User preferences import/export
// ------------------------------------------------------------------

2
js/src/consts/files.js
View File

@ -7,7 +7,7 @@
* @type {Object} files
*/
const files = {
global: ['error_report', 'navigation'],
global: ['error_report', 'navigation', 'config'],
server_privileges: ['server_privileges'],
server_databases: ['server_databases'],
server_status_advisor: ['server_status_advisor'],

2
js/src/functions/chart.js
View File

@ -63,4 +63,4 @@ export function PMA_createProfilingChart (target, data) {
]
});
return chart;
}
}

589
js/src/functions/config.js Normal file
View File

@ -0,0 +1,589 @@
import { PMA_ajaxShowMessage } from '../utils/show_ajax_messages';
import { PMA_Messages as PMA_messages } from '../variables/export_variables';
import { defaultValues, validate } from '../variables/get_config';
import { validators } from '../classes/Config';
/**
* checks whether browser supports web storage
*
* @param type the type of storage i.e. localStorage or sessionStorage
*
* @returns bool
*/
export function isStorageSupported (type, warn) {
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) {
PMA_ajaxShowMessage(PMA_messages.strNoLocalStorage, false);
}
}
return false;
}
/** ******************** Common Functions for Srttings page ****************** */
/**
* Checks whether field has its default value
*
* @param {Element} field
* @param {String} type
* @return boolean
*/
function checkFieldDefault (field, type) {
var $field = $(field);
var field_id = $field.attr('id');
if (typeof defaultValues[field_id] === 'undefined') {
return true;
}
var isDefault = true;
var currentValue = getFieldValue($field, type);
if (type !== 'select') {
isDefault = currentValue === defaultValues[field_id];
} else {
// compare arrays, will work for our representation of select values
if (currentValue.length !== defaultValues[field_id].length) {
isDefault = false;
} else {
for (var i = 0; i < currentValue.length; i++) {
if (currentValue[i] !== defaultValues[field_id][i]) {
isDefault = false;
break;
}
}
}
}
return isDefault;
}
/**
* Enables or disables the "restore default value" button
*
* @param {Element} field
* @param {boolean} display
*/
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} field
*/
export function markField (field) {
var $field = $(field);
var type = getFieldType($field);
var isDefault = checkFieldDefault($field, type);
// checkboxes uses parent <span> 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} field_type see {@link #getFieldType}
* @param {String|Boolean} value
*/
export function setFieldValue (field, field_type, value) {
var $field = $(field);
switch (field_type) {
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);
}
/**
* Returns field type
*
* @param {Element} field
*/
export 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 '';
}
/**
* 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} field_type returned by {@link #getFieldType}
* @type Boolean|String|String[]
*/
function getFieldValue (field, field_type) {
var $field = $(field);
switch (field_type) {
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
*/
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;
}
/**
* Returns element's id prefix
* @param {Element} element
*/
function getIdPrefix (element) {
return $(element).attr('id').replace(/[^-]+$/, '');
}
/** ******************** For the {MANAGE YOUR SETTINGS PAGE} ****************** */
/** Contains functions for saving configuration to localstorage */
/**
* Saves user preferences to localStorage
*
* @param {Element} form
*/
export function savePrefsToLocalStorage (form) {
var $form = $(form);
var submit = $form.find('input[type=submit]');
submit.prop('disabled', true);
$.ajax({
url: 'prefs_manage.php',
cache: false,
type: 'POST',
data: {
ajax_request: true,
server: PMA_commonParams.get('server'),
submit_get_json: true
},
success: function (data) {
if (typeof data !== 'undefined' && data.success === true) {
window.localStorage.config = data.prefs;
window.localStorage.config_mtime = data.mtime;
window.localStorage.config_mtime_local = (new Date()).toUTCString();
updatePrefsDate();
$('div.localStorage-empty').hide();
$('div.localStorage-exists').show();
var group = $form.parent('.group');
group.css('height', group.height() + 'px');
$form.hide('fast');
$form.prev('.click-hide-message').show('fast');
} else {
PMA_ajaxShowMessage(data.error);
}
},
complete: function () {
submit.prop('disabled', false);
}
});
}
/**
* Updates preferences timestamp in Import form
*/
export function updatePrefsDate () {
var d = new Date(window.localStorage.config_mtime_local);
var msg = PMA_messages.strSavedOn.replace(
'@DATE@',
PMA_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
*/
export function offerPrefsAutoimport () {
var has_config = (isStorageSupported('localStorage')) && (window.localStorage.config || false);
var $cnt = $('#prefs_autoload');
if (!$cnt.length || !has_config) {
return;
}
$cnt.find('a').on('click', function (e) {
e.preventDefault();
var $a = $(this);
if ($a.attr('href') === '#no') {
$cnt.remove();
$.post('index.php', {
server: PMA_commonParams.get('server'),
prefs_autoload: 'hide'
}, null, 'html');
return;
} else if ($a.attr('href') === '#delete') {
$cnt.remove();
localStorage.clear();
$.post('index.php', {
server: PMA_commonParams.get('server'),
prefs_autoload: 'hide'
}, null, 'html');
return;
}
$cnt.find('input[name=json]').val(window.localStorage.config);
$cnt.find('form').submit();
});
$cnt.show();
}
/** ******************** For resetting individual field to default ****************** */
/**
* Restores field's default value
*
* @param {String} field_id
*/
function restoreField (field_id) {
var $field = $('#' + field_id);
if ($field.length === 0 || defaultValues[field_id] === undefined) {
return;
}
setFieldValue($field, getFieldType($field), defaultValues[field_id]);
}
export function setupRestoreField () {
$('div.tabs_contents')
.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 field_sel;
if ($(this).hasClass('restore-default')) {
field_sel = href;
restoreField(field_sel.substr(1), defaultValues);
} else {
field_sel = href.match(/^[^=]+/)[0];
var value = href.match(/\=(.+)$/)[1];
setFieldValue($(field_sel), 'text', value);
}
$(field_sel).trigger('change');
})
.find('.restore-default, .set-value')
// inline-block for IE so opacity inheritance works
.css({ display: 'inline-block', opacity: 0.25 });
}
/** ******************** For Setting up Config tabs ****************** */
/**
* Sets active tab
*
* @param {String} tab_id
*/
export function setTab (tab_id) {
$('ul.tabs').each(function () {
var $this = $(this);
if (!$this.find('li a[href="#' + tab_id + '"]').length) {
return;
}
$this.find('li').removeClass('active').find('a[href="#' + tab_id + '"]').parent().addClass('active');
$this.parent().find('div.tabs_contents fieldset').hide().filter('#' + tab_id).show();
var hashValue = 'tab_' + tab_id;
location.hash = hashValue;
$this.parent().find('input[name=tab_hash]').val(hashValue);
});
}
export function setupConfigTabs () {
var forms = $('form.config-form');
forms.each(function () {
var $this = $(this);
var $tabs = $this.find('ul.tabs');
if (!$tabs.length) {
return;
}
// add tabs events and activate one tab (the first one or indicated by location hash)
$tabs.find('li').removeClass('active');
$tabs.find('a')
.on('click', function (e) {
e.preventDefault();
setTab($(this).attr('href').substr(1));
})
.filter(':first')
.parent()
.addClass('active');
$this.find('div.tabs_contents fieldset').hide().filter(':first').show();
});
}
export 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');
}
}
/** ******************** For Setting up Validations ****************** */
/**
* Returns validation functions associated with form field
*
* @param {String} field_id form field id
* @param {boolean} onKeyUpOnly see validateField
* @type Array
* @return array of [function, parameters to be passed to function]
*/
function getFieldValidators (field_id, onKeyUpOnly) {
// look for field bound validator
var name = field_id && field_id.match(/[^-]+$/)[0];
if (typeof validators._field[name] !== 'undefined') {
return [[validators._field[name], null]];
}
// look for registered validators
var functions = [];
if (typeof validate[field_id] !== 'undefined') {
// validate[field_id]: array of [type, params, onKeyUp]
for (var i = 0, imax = validate[field_id].length; i < imax; i++) {
if (onKeyUpOnly && !validate[field_id][i][2]) {
continue;
}
functions.push([validators[validate[field_id][i][0]], validate[field_id][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} error_list list of errors in the form {field id: error array}
*/
function displayErrors (error_list) {
var tempIsEmpty = function (item) {
return item !== '';
};
for (var field_id in error_list) {
var errors = error_list[field_id];
var $field = $('#' + field_id);
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 <span> 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 = $('<dl class="errors" />');
$field.find('table').before($errorCnt);
} else {
$errorCnt = $('<dl class="inline_errors" />');
$field.closest('td').append($errorCnt);
}
}
var html = '';
for (var i = 0, imax = errors.length; i < imax; i++) {
html += '<dd>' + errors[i] + '</dd>';
}
$errorCnt.html(html);
} else if ($errorCnt !== null) {
// remove useless error container
$errorCnt.remove();
}
}
}
/**
* Validates fieldset and puts errors in 'errors' object
*
* @param {Element} fieldset
* @param {boolean} isKeyUp
* @param {Object} errors
*/
function validate_fieldset (fieldset, isKeyUp, errors) {
var $fieldset = $(fieldset);
if ($fieldset.length && typeof validators._fieldset[$fieldset.attr('id')] !== 'undefined') {
var fieldset_errors = validators._fieldset[$fieldset.attr('id')].apply($fieldset[0], [isKeyUp]);
for (var field_id in fieldset_errors) {
if (typeof errors[field_id] === 'undefined') {
errors[field_id] = [];
}
if (typeof fieldset_errors[field_id] === 'string') {
fieldset_errors[field_id] = [fieldset_errors[field_id]];
}
$.merge(errors[field_id], fieldset_errors[field_id]);
}
}
}
/**
* Validates form field and puts errors in 'errors' object
*
* @param {Element} field
* @param {boolean} isKeyUp
* @param {Object} errors
*/
function validate_field (field, isKeyUp, errors) {
var args;
var result;
var $field = $(field);
var field_id = $field.attr('id');
errors[field_id] = [];
var functions = getFieldValidators(field_id, 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[field_id], result);
}
}
}
/**
* Validates form field and parent fieldset
*
* @param {Element} field
* @param {boolean} isKeyUp
*/
function validate_field_and_fieldset (field, isKeyUp) {
var $field = $(field);
var errors = {};
validate_field($field, isKeyUp, errors);
validate_fieldset($field.closest('fieldset.optbox'), isKeyUp, errors);
displayErrors(errors);
}
export function setupValidation () {
// 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 () {
validate_field_and_fieldset(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 () {
validate_field_and_fieldset($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 $check_page_refresh = $('#check_page_refresh');
if ($check_page_refresh.length === 0 || $check_page_refresh.val() === '1') {
// run all field validators
var errors = {};
for (var i = 0; i < $elements.length; i++) {
validate_field($elements[i], false, errors);
}
// run all fieldset validators
$('fieldset.optbox').each(function () {
validate_fieldset(this, false, errors);
});
displayErrors(errors);
} else if ($check_page_refresh) {
$check_page_refresh.val('1');
}
}

2
js/src/functions/import.js
View File

@ -38,4 +38,4 @@ export function matchFile (fname) {
changePluginOpts();
}
}
}
}

3
js/src/functions/navigation.js
View File

@ -4,6 +4,7 @@
* @returns void
*/
import { PMA_commonParams } from '../variables/common_params';
import { setupRestoreField, setupConfigTabs, setupValidation } from './config';
/**
* Traverse the navigation tree backwards to generate all the actual
@ -496,7 +497,6 @@ export function navFilterStateRestore () {
) {
let $obj = $('#pma_navigation_tree');
if (! $obj.data('fastFilter')) {
$obj.data(
'fastFilter',
new PMA_fastFilter.filter($obj, '')
@ -527,7 +527,6 @@ export function navFilterStateRestore () {
return true;
}
if (! $obj.data('fastFilter')) {
$obj.data(
'fastFilter',
new PMA_fastFilter.filter($obj, '')

1
js/src/index.js
View File

@ -1,5 +1,6 @@
import { AJAX } from './ajax';
import './variables/import_variables';
import './variables/get_config';
import { jQuery as $ } from './utils/JqueryExtended';
import files from './consts/files';
import Console from './console';

1
js/src/navigation.js
View File

@ -11,6 +11,7 @@ import { expandTreeNode,
import { PMA_Messages as PMA_messages } from './variables/export_variables';
import { PMA_commonParams } from './variables/common_params';
import { PMA_ajaxShowMessage, PMA_ajaxRemoveMessage, PMA_tooltip } from './utils/show_ajax_messages';
import { isStorageSupported } from './functions/config';
/**
* function used in or for navigation panel

33
js/src/variables/get_config.js Normal file
View File

@ -0,0 +1,33 @@
import { validators } from '../classes/Config';
import { PMA_Messages as PMA_messages } from './export_variables';
let defaultValues = {};
let validate = {};
/**
* 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
*/
function validateField (id, type, onKeyUp, params) {
if (typeof validators[type] === 'undefined') {
return;
}
if (typeof validate[id] === 'undefined') {
validate[id] = [];
}
validate[id].push([type, params, onKeyUp]);
}
window.getConfigData = function () {
for (var i = 0; i < arguments.length - 3; i++) {
validateField(...arguments[i]);
}
$.extend(PMA_messages, arguments[arguments.length - 2]);
$.extend(defaultValues, arguments[arguments.length - 1]);
};
export { defaultValues, validate };

8
libraries/classes/Config/FormDisplay.php
View File

@ -355,12 +355,12 @@ class FormDisplay
foreach ($this->_jsLangStrings as $strName => $strValue) {
$jsLang[] = "'$strName': '" . Sanitize::jsFormat($strValue, false) . '\'';
}
$js[] = "$.extend(PMA_messages, {\n\t"
. implode(",\n\t", $jsLang) . '})';
$js[] = "{\n\t"
. implode(",\n\t", $jsLang) . '}';
}
$js[] = "$.extend(defaultValues, {\n\t"
. implode(",\n\t", $jsDefault) . '})';
$js[] = "{\n\t"
. implode(",\n\t", $jsDefault) . '}';
$htmlOutput .= $this->formDisplayTemplate->displayJavascript($js);
return $htmlOutput;

2
libraries/classes/Config/FormDisplayTemplate.php
View File

@ -483,7 +483,7 @@ class FormDisplayTemplate
$vArgs[] = Sanitize::escapeJsString($arg);
}
$vArgs = $vArgs ? ", ['" . implode("', '", $vArgs) . "']" : '';
$jsArray[] = "validateField('$fieldId', '$vName', true$vArgs)";
$jsArray[] = "['$fieldId', '$vName', true$vArgs]";
}
}

2
libraries/classes/Header.php
View File

@ -204,7 +204,7 @@ class Header
} else {
$theme_id = 'default';
}
$this->_scripts->addFile('config.js');
$this->_scripts->addFile('config');
$this->_scripts->addFile('doclinks.js');
$this->_scripts->addFile('functions.js');
$this->_scripts->addFile('navigation');

2
package.json
View File

@ -7,7 +7,7 @@
"license": "GPL-2.0",
"scripts": {
"dev:wds": "webpack-dev-server --progress",
"prod:build": "del js/lib js/dist && babel js/src/ -d js/lib --ignore .test.js && cross-env NODE_ENV=production webpack -p --progress",
"prod:build": "del js/lib js/dist && babel js/src/ -d js/lib --ignore .test.js && cross-env NODE_ENV=production webpack -p --env.production --progress",
"lint:check": "eslint js/src/*.js",
"lint:fix": "eslint js/src/*.js --fix"
},

2
prefs_forms.php
View File

@ -70,7 +70,7 @@ if ($form_display->process(false) && !$form_display->hasErrors()) {
$response = Response::getInstance();
$header = $response->getHeader();
$scripts = $header->getScripts();
$scripts->addFile('config.js');
$scripts->addFile('config');
require 'libraries/user_preferences.inc.php';
if ($error) {

2
prefs_manage.php
View File

@ -208,7 +208,7 @@ if (isset($_POST['submit_export'])
$response = Response::getInstance();
$header = $response->getHeader();
$scripts = $header->getScripts();
$scripts->addFile('config.js');
$scripts->addFile('config');
require 'libraries/user_preferences.inc.php';
if ($error) {

42
scripts/build-js.sh Executable file
View File

@ -0,0 +1,42 @@
#!/bin/sh
#
# vim: expandtab sw=4 ts=4 sts=4:
#
# Do not run as CGI
if [ -n "$GATEWAY_INTERFACE" ] ; then
echo 'Can not invoke as CGI!'
exit 1
fi
if [ -f package.json ] ; then
echo "Running Yarn Install"
yarn install
if [ -d node_modules ] ; then
echo "Creating production build of js files"
yarn prod:build
fi
fi
#Performing cleanup
#Removing yarn files
if [ -f yarn.lock ] ; then
rm -f yarn.lock
fi
if [ -f yarn-error.log ] ; then
rm -f yarn-error.log
fi
#Removing node_modules from the directory
rm -rf node_modules
#Removing the babel transcompiled code
rm -rf js/lib
#Removing JavaScript source code
rm -rf js/src
#Removing babel files as they are not required in production
rm -f .babelrc
rm -f webpack.config.babel.js
rm -f .jshintrc
echo "Finished building js files"

8
scripts/create-release.sh
View File

@ -216,7 +216,7 @@ rm -rf .github
rm -rf PMAStandard
# Testsuite setup
rm -f .travis.yml .coveralls.yml .scrutinizer.yml .jshintrc .weblate codecov.yml
rm -f .travis.yml .coveralls.yml .scrutinizer.yml .weblate codecov.yml
# Remove readme for github
rm -f README.rst
@ -274,10 +274,7 @@ if [ ! -d libraries/tcpdf ] ; then
fi
fi
if [ -f package.json ] ; then
echo "* Running Yarn"
yarn install --production
fi
./scripts/build-js.sh
# Remove git metadata
rm .git
@ -334,7 +331,6 @@ for kit in $KITS ; do
rm doc/html/.buildinfo doc/html/objects.inv
# Javascript sources
rm -rf js/vendor/openlayers/src/
rm -rf node_modules
fi
# Remove developer scripts

8
templates/javascript/display.twig
View File

@ -1,7 +1,5 @@
<script type="text/javascript">
if (typeof configInlineParams === "undefined" || !Array.isArray(configInlineParams)) configInlineParams = [];
configInlineParams.push(function() {
{{ js_array|join(';\n')|raw }};
});
if (typeof configScriptLoaded !== "undefined" && configInlineParams) loadInlineConfig();
getConfigData(
{{ js_array|join(',\n')|raw }}
);
</script>

21
test/classes/Config/FormDisplayTemplateTest.php
View File

@ -539,10 +539,10 @@ class FormDisplayTemplateTest extends TestCase
$this->assertEquals(
[
'validateField(\'testID\', \'PMA_\\\';\', true, '
'[\'testID\', \'PMA_\\\';\', true, '
. '[\'\\\\r\\\\n\\\\\\\''
. '<scrIpt></\\\' + \\\'script>\'])',
'validateField(\'testID\', \'PMA_\', true)'
. '<scrIpt></\\\' + \\\'script>\']]',
'[\'testID\', \'PMA_\', true]'
],
$js
);
@ -564,16 +564,11 @@ class FormDisplayTemplateTest extends TestCase
$this->assertEquals(
'<script type="text/javascript">' . "\n"
. 'if (typeof configInlineParams === "undefined"'
. ' || !Array.isArray(configInlineParams)) '
. 'configInlineParams = [];' . "\n"
. 'configInlineParams.push(function() {' . "\n"
. 'var i = 1;' . "\n"
. 'i++;' . "\n"
. '});' . "\n"
. 'if (typeof configScriptLoaded !== "undefined"'
. ' && configInlineParams) loadInlineConfig();'
. "\n" . '</script>' . "\n",
. 'getConfigData(' . "\n"
. 'var i = 1,' . "\n"
. 'i++' . "\n"
. ');' . "\n"
. '</script>' . "\n",
$result
);
}

6
test/classes/Config/PageSettingsTest.php
View File

@ -73,9 +73,9 @@ class PageSettingsTest extends PmaTestCase
);
$this->assertContains(
"validateField('MaxRows', 'PMA_validatePositiveNumber', true);\n"
. "validateField('RepeatCells', 'PMA_validateNonNegativeNumber', true);\n"
. "validateField('LimitChars', 'PMA_validatePositiveNumber', true);\n",
"['MaxRows', 'PMA_validatePositiveNumber', true],\n"
. "['RepeatCells', 'PMA_validateNonNegativeNumber', true],\n"
. "['LimitChars', 'PMA_validatePositiveNumber', true],\n",
$html
);
}

153
webpack.config.babel.js
View File

@ -2,84 +2,95 @@ import path from 'path';
import webpack from 'webpack';
import BundleAnalyzerPlugin from 'webpack-bundle-analyzer';
let BindleAnalyzer = BundleAnalyzerPlugin.BundleAnalyzerPlugin;
function WebpackConfig (env) {
let BundleAnalyzer = BundleAnalyzerPlugin.BundleAnalyzerPlugin;
// environment either development or production
var MODE = 'development';
// environment either development or production
var MODE;
if (typeof env !== 'undefined'
&& env.production === true
) {
MODE = 'production';
} else {
MODE = 'development';
}
var WEBPACK_HOST = 'http://localhost';
var WEBPACK_HOST = 'http://localhost';
// port number of dev server
// let dev server port be 3307
var WEBPACK_PORT = 3307;
// port number of dev server
// let dev server port be 3307
var WEBPACK_PORT = 3307;
var PUBLIC_PATH;
var PUBLIC_PATH;
if (MODE === 'development') {
PUBLIC_PATH = WEBPACK_HOST + ':' + WEBPACK_PORT + '/js/dist/';
} else {
PUBLIC_PATH = 'js/dist/';
}
if (MODE === 'development') {
PUBLIC_PATH = WEBPACK_HOST + ':' + WEBPACK_PORT + '/js/dist/';
} else {
PUBLIC_PATH = 'js/dist/';
}
var module = {
rules: [
{ test: /\.(js)$/, use: 'babel-loader', exclude: /node_modules/ }
]
};
var devServer = {
port: WEBPACK_PORT,
hot: false,
headers: {
'Access-Control-Allow-Origin': '*'
},
var module = {
rules: [
{ test: /\.(js)$/, use: 'babel-loader', exclude: /node_modules/ }
]
};
var devServer = {
port: WEBPACK_PORT,
hot: false,
headers: {
'Access-Control-Allow-Origin': '*'
},
};
var plugins = [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
];
if (MODE === 'development') {
plugins.push(new BindleAnalyzer());
}
};
var plugins = [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
];
if (MODE === 'development') {
plugins.push(new BundleAnalyzer());
}
export default [{
mode: MODE,
entry: {
index_new: './js/src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'js/dist'),
publicPath: PUBLIC_PATH
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
return {
mode: MODE,
entry: {
index_new: './js/src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'js/dist'),
publicPath: PUBLIC_PATH
},
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
},
module: module,
resolve: {
extensions: ['.js']
},
devServer: devServer,
plugins: plugins
}];
},
module: module,
resolve: {
extensions: ['.js']
},
devServer: devServer,
plugins: plugins
};
};
export default WebpackConfig;