PHP Classes

File: script/FormGenerator.js

Recommend this page to a friend!
  Classes of Stefan Kientzler   Complex PHP Form Design and Generator   script/FormGenerator.js   Download  
File: script/FormGenerator.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Complex PHP Form Design and Generator
Display and process complex HTML forms HTML forms
Author: By
Last change:
Date: 3 years ago
Size: 5,717 bytes
 

Contents

Class file image Download
/** global: g_oConfigFromPHP */ /** global: FormDataValidator */ /** global: jscolor */ /** global: CKEDITOR */ /** global: FormCKEditor */ /** global: RichFmConnector */ /** global: FormPicker */ var g_oCKEdit = null; var g_FDP = null; /** * post load some additional JS scripts after DOM is loaded... */ document.addEventListener('DOMContentLoaded', loadScriptfiles); function loadScriptfiles() { loadScript(g_oConfigFromPHP.JavaScript.Path + 'FormDataValidator.js'); if (g_oConfigFromPHP.Color !== undefined) { loadScript(g_oConfigFromPHP.JavaScript.Path + 'jscolor.js'); } if (g_oConfigFromPHP.DTSel !== undefined) { loadScript(g_oConfigFromPHP.JavaScript.Path + 'dtsel.js'); loadScript(g_oConfigFromPHP.JavaScript.Path + 'FormPicker.js'); } if (g_oConfigFromPHP.RichFilemanager !== undefined) { loadScript(g_oConfigFromPHP.JavaScript.Path + 'RichFmConnector.js'); } if (g_oConfigFromPHP.CKEditor !== undefined) { loadScript(g_oConfigFromPHP.CKEditor.Path + 'ckeditor.js'); loadScript(g_oConfigFromPHP.JavaScript.Path + 'FormCKEdit.js'); } } /** * Initialization. * For initialization we lisen to the window onload-event. At this point the * additionally loaded script files from the DOMContentLoaded-event should also be * available. * Dependent on the config from PHP we have to initialize some modules: * - FormDataValidation needs no initialization * - if form contains colorpicker(s) we have to initialize them * - contained date or time pickers also needs initialization * - embedded CKEditor have to be loaded and configured * - add Eventlistener to display value of range elements in assigned value label */ window.addEventListener('load', initFormGenerator); function initFormGenerator() { if (g_oConfigFromPHP.Color !== undefined) { jscolor.presets.default = g_oConfigFromPHP.Color; jscolor.init(); } if (g_oConfigFromPHP.DTSel !== undefined) { g_FDP = new FormPicker(g_oConfigFromPHP); g_FDP.init(); } if (g_oConfigFromPHP.CKEditor !== undefined) { g_oCKEdit = new FormCKEditor(g_oConfigFromPHP, CKEDITOR); g_oCKEdit.load(); } var oRanges = document.querySelector("input[type=range]"); oRanges.addEventListener('change', rangeChanged); oRanges.addEventListener('input', rangeChanged); } /** * Event - handler for the 'change' and 'input' event trigerred by each range element in the form. * If there exist a label element that is assigned to the triggering range through the 'for' attrib, * the value of the range element is set as content of the label. */ function rangeChanged() { var oRange = this; var oLabels = document.getElementsByTagName('label'); for (var i = 0; i < oLabels.length; i++) { if (oLabels[i].htmlFor == oRange.id) { oLabels[i].innerHTML = this.value; } } } /** * Helper function to create Error/Warning-Message in the document. * The Messeage is only created, if the debug mode is enabled. * @param string msg text to display * @param string level level for the message */ function displayJSError(msg, level) { if (g_oConfigFromPHP.DebugMode) { let div = document.createElement('div'); div.id = 'JSError'; let header = document.createElement('h1'); div.appendChild(header); let body = document.createElement('p'); div.appendChild(body); header.innerHTML = 'Javascript ' + level; body.innerHTML = msg; document.body.insertBefore(div, document.body.firstChild); } } /** * Validate the form. */ function validateForm() { var FDV = new FormDataValidator(g_oConfigFromPHP.FormDataValidation); return FDV.validate(); } /** * Call the filemanager to browse for a file on the server. */ function browseServer(editID, imgID, strExpand) { let FmConnector = new RichFmConnector(g_oConfigFromPHP.RichFilemanager.Path); FmConnector.editID = editID; FmConnector.imgID = imgID; FmConnector.browseServerModal(strExpand); } /** * Handler for the DTU button (Date,Time User) */ function onInsertDateTimeUser(id, strUsername) { let oEdit = document.getElementById(id); if (oEdit) { let date = new Date(); let strValue = oEdit.innerHTML = date.toLocaleString(); if (strUsername != '') { strValue += ' / ' + strUsername; } oEdit.value = strValue; } } /** * Handler for the reset - Button. * Used to to reset the content of readonly-inputs or images that get the value * from filebrowser or another picker etc. */ function resetElement(id) { let oElement = document.getElementById(id); if (oElement) { if (oElement.tagName.toLowerCase() === 'img') { oElement.src = oElement.getAttribute('data-default'); resetElement(oElement.getAttribute('data-bound-to')); } else { oElement.value = ''; } } } /** * Adjust the height of two columns. */ function adjustColumnHeight(col1, col2) { var oCol1 = document.getElementById(col1); var oCol2 = document.getElementById(col2); if (oCol1 && oCol2) { if (oCol1.offsetHeight > oCol2.offsetHeight) { oCol2.style.height = oCol1.offsetHeight + 'px'; } else { oCol1.style.height = oCol2.offsetHeight + 'px'; } } } /** * Dynamic loading of additional scripts. */ function loadScript(strScriptfile) { var oScript = document.createElement('script'); document.head.appendChild(oScript); // oScript.onload = function() {console.log('script ' + strScriptfile + ' loaded!');}; oScript.type = 'text/javascript'; oScript.src = strScriptfile; }