diff --git a/.gitignore b/.gitignore index 02ba47c8b..06b3944d1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,10 @@ node_modules bower_components npm-debug.log -demo/ +/demo/ dist/ site .DS_Store yarn-error.log .idea -.jest \ No newline at end of file +.jest diff --git a/package-lock.json b/package-lock.json index 23b1a5c82..47053ec2d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2599,9 +2599,9 @@ } }, "node_modules/@eslint/eslintrc/node_modules/globals": { - "version": "13.23.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", - "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==", + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", "dev": true, "dependencies": { "type-fest": "^0.20.2" @@ -2613,6 +2613,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@eslint/eslintrc/node_modules/ignore": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", + "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/@eslint/eslintrc/node_modules/type-fest": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", @@ -5012,15 +5021,6 @@ "node": ">= 14" } }, - "node_modules/@semantic-release/github/node_modules/ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", - "dev": true, - "engines": { - "node": ">= 4" - } - }, "node_modules/@semantic-release/github/node_modules/indent-string": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz", @@ -5987,9 +5987,9 @@ } }, "node_modules/acorn": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", - "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", + "version": "8.11.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", + "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "dev": true, "bin": { "acorn": "bin/acorn" @@ -6008,18 +6008,6 @@ "acorn-walk": "^8.0.2" } }, - "node_modules/acorn-globals/node_modules/acorn": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", - "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", @@ -9723,9 +9711,9 @@ } }, "node_modules/eslint/node_modules/globals": { - "version": "13.23.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", - "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==", + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", "dev": true, "dependencies": { "type-fest": "^0.20.2" @@ -9746,6 +9734,15 @@ "node": ">=8" } }, + "node_modules/eslint/node_modules/ignore": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", + "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, "node_modules/eslint/node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -9784,6 +9781,18 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/espree/node_modules/acorn": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -10610,17 +10619,17 @@ } }, "node_modules/flat-cache": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.0.tgz", - "integrity": "sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", + "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", "dev": true, "dependencies": { - "flatted": "^3.2.7", + "flatted": "^3.2.9", "keyv": "^4.5.3", "rimraf": "^3.0.2" }, "engines": { - "node": ">=12.0.0" + "node": "^10.12.0 || >=12.0.0" } }, "node_modules/flat-cache/node_modules/rimraf": { @@ -10639,9 +10648,9 @@ } }, "node_modules/flatted": { - "version": "3.2.9", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz", - "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", + "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, "node_modules/follow-redirects": { @@ -11689,9 +11698,9 @@ } }, "node_modules/ignore": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", - "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", + "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==", "dev": true, "engines": { "node": ">= 4" @@ -16697,18 +16706,6 @@ } } }, - "node_modules/jsdom/node_modules/acorn": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", - "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/jsesc": { "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", @@ -16807,9 +16804,9 @@ } }, "node_modules/keyv": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz", - "integrity": "sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==", + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", "dev": true, "dependencies": { "json-buffer": "3.0.1" @@ -22692,9 +22689,9 @@ } }, "node_modules/prettier": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", - "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", "dev": true, "peer": true, "bin": { @@ -25738,9 +25735,9 @@ "dev": true }, "node_modules/table": { - "version": "6.8.1", - "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz", - "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==", + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", + "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==", "dev": true, "dependencies": { "ajv": "^8.0.1", @@ -25943,18 +25940,6 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, - "node_modules/terser/node_modules/acorn": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", - "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/terser/node_modules/commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", @@ -26921,18 +26906,6 @@ "node": ">= 10.13.0" } }, - "node_modules/webpack-bundle-analyzer/node_modules/acorn": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", - "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/webpack-bundle-analyzer/node_modules/commander": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", @@ -27263,18 +27236,6 @@ "node": ">=10.13.0" } }, - "node_modules/webpack/node_modules/acorn": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", - "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/webpack/node_modules/acorn-import-assertions": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", diff --git a/src/demo/index.html b/src/demo/index.html index 78657b06a..fd57b15df 100644 --- a/src/demo/index.html +++ b/src/demo/index.html @@ -1,63 +1,63 @@ - - - + - - jQuery formBuilder/formRender Demo - + + - -
- -
- dataType: - -
-
- Language: - + +
+
+ dataType: + +
+
+ Language: + -
-
-
-

- jQuery formBuilder - - -

-

- jQuery formRender - - -

-
-
-
-

Actions

-
-
-
-

Actions

-
-
+
-
- + +
+

+ jQuery formBuilder - + +

+

+ jQuery formRender - + +

+
+
+
+

Actions

+
+
+
+

Actions

+
+
+
+
+ + + + + + + - - - - - diff --git a/src/demo/js/actionButtons.js b/src/demo/js/actionButtons.js index e21da9f8a..42ac1b073 100644 --- a/src/demo/js/actionButtons.js +++ b/src/demo/js/actionButtons.js @@ -114,8 +114,8 @@ export const demoActions = { console.log('Can submit: ', form.checkValidity()) // Display the key/value pairs console.log('FormData:') - for (var pair of formData.entries()) { - console.log(`${pair[0]}: ${pair[1]}`) + for (const [key, val] of formData.entries()) { + console.log(`${key}: ${val}`) } }, resetDemo: () => { @@ -166,15 +166,15 @@ export const generateActionTable = (actions, columns) => { code.appendChild(document.createTextNode(key)) const action = { content: code } let actionDemoTrigger = document.getElementById(key) - if (!actionDemoTrigger) { + if (!actionDemoTrigger && apiBtns[key]) { actionDemoTrigger = document.createElement('button') actionDemoTrigger.id = key actionDemoTrigger.textContent = titleCase(key) - actionDemoTrigger.addEventListener('click', e => apiBtns[key] && apiBtns[key](e)) + actionDemoTrigger.addEventListener('click', e => apiBtns[key](e)) } else { const trigger = actionDemoTrigger.querySelector('.trigger') - if (trigger) { - trigger.addEventListener('click', e => apiBtns[key] && apiBtns[key](e)) + if (trigger && apiBtns[key]) { + trigger.addEventListener('click', e => apiBtns[key](e)) } } const demo = { content: actionDemoTrigger } diff --git a/src/demo/js/demo.js b/src/demo/js/demo.js index fd7139aeb..8fdfb96b1 100644 --- a/src/demo/js/demo.js +++ b/src/demo/js/demo.js @@ -11,26 +11,13 @@ const changeDataType = ({ target }) => { window.sessionStorage.setItem('dataType', target.value) demoActions.resetDemo() } -for (let i = 0; i < dataTypes.length; i++) { - if (dataType === dataTypes[i].value) { - dataTypes[i].checked = true +for (const dataType of dataTypes) { + if (dataType.value === dataType) { + dataType.checked = true } - dataTypes[i].addEventListener('click', changeDataType, false) + dataType.addEventListener('click', changeDataType, false) } -const toggleBootStrap = ({ target }) => { - if (!target.checked) { - removeStyle('bootstrap') - } else { - insertStyle({ - src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', - id: 'bootstrap', - }) - } -} - -document.getElementById('toggleBootstrap').addEventListener('click', toggleBootStrap, false) - jQuery(function ($) { const fields = [ { @@ -273,6 +260,11 @@ jQuery(function ($) { fbOptions.formData = formData } + const buildWrap = document.querySelector('.build-wrap') + const $buildWrap = $(buildWrap) + const renderWrap = document.querySelector('.render-wrap') + const $renderWrap = $(renderWrap) + /** * Toggles the edit mode for the demo * @return {Boolean} editMode @@ -280,20 +272,45 @@ jQuery(function ($) { function toggleEdit() { document.body.classList.toggle('form-rendered', editing) if (!editing) { - $('.build-wrap').formBuilder('setData', $('.render-wrap').formRender('userData')) + $buildWrap.formBuilder('setData', $renderWrap.formRender('userData')) } else { - const formRenderData = $('.build-wrap').formBuilder('getData', dataType) - $('.render-wrap').formRender({ + const formRenderData = $buildWrap.formBuilder('getData', dataType) + $renderWrap.formRender({ formData: formRenderData, templates: templates, dataType, }) window.sessionStorage.setItem('formData', formRenderData) } - return (editing = !editing) + editing = !editing + return editing + } + + let formBuilder = $buildWrap.formBuilder(fbOptions) + const toggleEnhancedBootstrapGrid = document.getElementById('toggleEnhancedBootstrapEnabled') + const toggleEnhancedBootstrapGridHandler = ({ target }) => { + $buildWrap.empty() + formBuilder = $buildWrap.formBuilder({ + ...fbOptions, + formData: formBuilder.formData, + enableEnhancedBootstrapGrid: target.checked, + }) + } + + const toggleBootstrap = ({ target }) => { + toggleEnhancedBootstrapGrid.parentElement.style.display = target.checked ? 'inline-block' : 'none' + if (!target.checked) { + removeStyle('bootstrap') + } else { + insertStyle({ + src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', + id: 'bootstrap', + }) + } } - const formBuilder = $('.build-wrap').formBuilder(fbOptions) + document.getElementById('toggleBootstrap').addEventListener('click', toggleBootstrap, false) + toggleEnhancedBootstrapGrid.addEventListener('change', toggleEnhancedBootstrapGridHandler, false) const fbPromise = formBuilder.promise diff --git a/src/demo/sass/demo.scss b/src/demo/sass/demo.scss index 336985107..e61cb3d95 100644 --- a/src/demo/sass/demo.scss +++ b/src/demo/sass/demo.scss @@ -73,3 +73,8 @@ body { .form-builder-dialog { overflow-y: auto; } + +label[for='toggleEnhancedBootstrapEnabled'] { + margin-left: 1rem; + display: none; +} diff --git a/src/js/form-builder.js b/src/js/form-builder.js index 1761fdfe3..b44a5c0b1 100644 --- a/src/js/form-builder.js +++ b/src/js/form-builder.js @@ -33,14 +33,14 @@ import { safename, forceNumber, getContentType, - generateSelectorClassNames, firstNumberOrUndefined, + generateSelectorClassNames, + firstNumberOrUndefined, } from './utils' import { attributeWillClobber, setElementContent, setSanitizerConfig } from './sanitizer' import fontConfig from '../fonts/config.json' const css_prefix_text = fontConfig.css_prefix_text -const { rowWrapperClass, colWrapperClass, tmpRowPlaceholderClass, invisibleRowPlaceholderClass } = - gridClassNames +const { rowWrapperClass, colWrapperClass, tmpRowPlaceholderClass, invisibleRowPlaceholderClass } = gridClassNames const { rowWrapperClassSelector, @@ -55,7 +55,7 @@ function FormBuilder(opts, element, $) { const formID = `frmb-${Date.now()}` const data = new Data(formID) const d = new Dom(formID) - const config = instanceConfig[formID] = {} + const config = (instanceConfig[formID] = {}) /** @var formRows Allocated rows IDs in the builder */ let formRows = [] @@ -110,10 +110,10 @@ function FormBuilder(opts, element, $) { beforeStop: (evt, ui) => h.beforeStop.call(h, evt, ui), start: (evt, ui) => h.startMoving.call(h, evt, ui), stop: (evt, ui) => h.stopMoving.call(h, evt, ui), - change: function(event, ui) { + change: function (event, ui) { if (opts.prepend && ui.placeholder.index() < 1) { $('li.form-prepend').after(ui.placeholder) - } else if (opts.append && ui.placeholder.index() >= ($stage.children('li').length - 1)) { + } else if (opts.append && ui.placeholder.index() >= $stage.children('li').length - 1) { $('li.form-append').before(ui.placeholder) } }, @@ -143,10 +143,10 @@ function FormBuilder(opts, element, $) { revert: 150, beforeStop: (evt, ui) => h.beforeStop.call(h, evt, ui), distance: 3, - change: function(event, ui) { + change: function (event, ui) { if (opts.prepend && ui.placeholder.index() < 1) { $('li.form-prepend').after(ui.placeholder) - } else if (opts.append && ui.placeholder.index() >= ($stage.children('li').length - 1)) { + } else if (opts.append && ui.placeholder.index() >= $stage.children('li').length - 1) { $('li.form-append').before(ui.placeholder) } }, @@ -156,8 +156,8 @@ function FormBuilder(opts, element, $) { } if ($(ui.item).closest('.stage-wrap') && $(ui.item).closest(rowWrapperClassSelector).length === 0) { - h.doCancel = true - processControl(ui.item) + h.doCancel = true + processControl(ui.item) } else { if (enhancedBootstrapEnabled()) { hideInvisibleRowPlaceholders() @@ -458,12 +458,12 @@ function FormBuilder(opts, element, $) { 'options', ], text: defaultAttrs.concat(['subtype', 'maxlength']), - date: defaultAttrs.concat(['subtype','min', 'max', 'step']), + date: defaultAttrs.concat(['subtype', 'min', 'max', 'step']), file: defaultAttrs.concat(['multiple']), header: ['label', 'subtype', 'className', 'access'], hidden: ['name', 'value', 'access'], paragraph: ['label', 'subtype', 'className', 'access'], - number: defaultAttrs.concat(['subtype','min', 'max', 'step']), + number: defaultAttrs.concat(['subtype', 'min', 'max', 'step']), select: defaultAttrs.concat(['multiple', 'options']), textarea: defaultAttrs.concat(['subtype', 'maxlength', 'rows']), } @@ -590,10 +590,11 @@ function FormBuilder(opts, element, $) { const numAttrs = ['min', 'max', 'step'] numAttrs.forEach(numAttr => { - advFieldMap[numAttr] = type === 'number' ? () => numberAttribute(numAttr, values) : () => textAttribute(numAttr, values) + advFieldMap[numAttr] = + type === 'number' ? () => numberAttribute(numAttr, values) : () => textAttribute(numAttr, values) }) - const noDisable = ['name', 'className', 'subtype', ] + const noDisable = ['name', 'className', 'subtype'] const typeUserAttrs = Object.assign({}, opts.typeUserAttrs['*'], opts.typeUserAttrs[type]) @@ -652,13 +653,11 @@ function FormBuilder(opts, element, $) { * @return {string} type of user attr */ function userAttrType(attrData) { - return ( - [ - ['array', ({ options }) => !!options], - ['boolean', ({ type }) => type === 'checkbox'], // automatic bool if checkbox - [typeof attrData.value, () => true], // string, number, - ].find(typeCondition => typeCondition[1](attrData))[0] - ) + return [ + ['array', ({ options }) => !!options], + ['boolean', ({ type }) => type === 'checkbox'], // automatic bool if checkbox + [typeof attrData.value, () => true], // string, number, + ].find(typeCondition => typeCondition[1](attrData))[0] } /** @@ -898,7 +897,7 @@ function FormBuilder(opts, element, $) { */ const numberAttribute = (attribute, values) => { const { class: classname, className, ...attrs } = values - const attrVal = (Number.isNaN(attrs[attribute])) ? undefined : attrs[attribute] + const attrVal = Number.isNaN(attrs[attribute]) ? undefined : attrs[attribute] const attrLabel = mi18n.get(attribute) || attribute const placeholder = mi18n.get(`placeholder.${attribute}`) @@ -1095,7 +1094,7 @@ function FormBuilder(opts, element, $) { id: data.lastID + '-sort-lower', className: `sort-button sort-button-lower btn ${css_prefix_text}sort-lower`, title: 'Move Lower', - }) + }), ) } @@ -1224,12 +1223,12 @@ function FormBuilder(opts, element, $) { SetupInvisibleRowPlaceholders(rowWrapperNode) if (opts.enableColumnInsertMenu) { $(rowWrapperNode).off('mouseenter') - $(rowWrapperNode).on('mouseenter', function(e) { + $(rowWrapperNode).on('mouseenter', function (e) { setupColumnInserts($(e.currentTarget)) }) $(rowWrapperNode).off('mouseleave') - $(rowWrapperNode).on('mouseleave', function(e) { + $(rowWrapperNode).on('mouseleave', function (e) { hideColumnInsertButtons($(e.currentTarget)) }) } @@ -1288,7 +1287,10 @@ function FormBuilder(opts, element, $) { } function hideInvisibleRowPlaceholders() { - $stage.find(tmpRowPlaceholderClassSelector + ':not(:last-child)').css('height','1px').addClass(invisibleRowPlaceholderClass) + $stage + .find(tmpRowPlaceholderClassSelector + ':not(:last-child)') + .css('height', '1px') + .addClass(invisibleRowPlaceholderClass) } function SetupInvisibleRowPlaceholders(rowWrapperNode) { @@ -1450,7 +1452,7 @@ function FormBuilder(opts, element, $) { const rowId = h.getRowValue(rowWrapperNode.className) if (rowId !== '0') { - $(rowWrapperNode).attr('data-row-id',rowId) + $(rowWrapperNode).attr('data-row-id', rowId) } } @@ -1480,23 +1482,23 @@ function FormBuilder(opts, element, $) { const rowColumns = $(rowWrapper).children(colWrapperClassSelector) rowColumns.each((i, elem) => { - const colWrapper = $(elem) - colWrapper.addClass('colWithInsertButtons') - - if (rowColumns.index(colWrapper) === 0) { - $( - ``, - ).insertBefore(colWrapper) - } + const colWrapper = $(elem) + colWrapper.addClass('colWithInsertButtons') + if (rowColumns.index(colWrapper) === 0) { $( ``, - ).insertAfter(colWrapper) - }) + )}" prepend="true" style='visibility: ${hide ? 'hidden' : 'visible'}'>`, + ).insertBefore(colWrapper) + } + + $( + ``, + ).insertAfter(colWrapper) + }) } function removeColumnInsertButtons(rowWrapper) { @@ -1524,8 +1526,10 @@ function FormBuilder(opts, element, $) { if (formRows.length === 0) { nextRow = 1 } else { - const numericalRows = formRows.filter(value => !isNaN(value) && !isNaN(parseInt(value))).map(str => parseInt(str)) - nextRow = (Math.max(...numericalRows, 0) + 1) + const numericalRows = formRows + .filter(value => !isNaN(value) && !isNaN(parseInt(value))) + .map(str => parseInt(str)) + nextRow = Math.max(...numericalRows, 0) + 1 } result.rowUniqueId = nextRow.toString() @@ -1706,7 +1710,10 @@ function FormBuilder(opts, element, $) { }) $stage.on('dblclick', 'li.form-field', e => { - if (['select', 'input', 'label','textarea',].includes(e.target.tagName.toLowerCase()) || e.target.isContentEditable === true) { + if ( + ['select', 'input', 'label', 'textarea'].includes(e.target.tagName.toLowerCase()) || + e.target.isContentEditable === true + ) { return } e.stopPropagation() @@ -2192,7 +2199,7 @@ function FormBuilder(opts, element, $) { formRows = formRows.filter(x => x !== rowValue) $(elem).remove() } else { - setupColumnInserts($(elem),true) + setupColumnInserts($(elem), true) } }) } @@ -2396,7 +2403,7 @@ function FormBuilder(opts, element, $) { const $optionWrap = $(e.target).closest('.field-options') const $multiple = $('[name="multiple"]', $optionWrap) const $firstOption = $('.option-selected:eq(0)', $optionWrap) - const isMultiple = ($multiple.length) ? $multiple.prop('checked') : $firstOption.attr('type') === 'checkbox' + const isMultiple = $multiple.length ? $multiple.prop('checked') : $firstOption.attr('type') === 'checkbox' const optionTemplate = { selected: false, label: '', value: '' } const $sortableOptions = $('.sortable-options', $optionWrap) @@ -2491,14 +2498,16 @@ function FormBuilder(opts, element, $) { return formBuilder } -const pluginInit = function(options,elem) { +const pluginInit = function (options, elem) { const _this = this const { i18n, ...opts } = jQuery.extend({}, defaultOptions, options, true) this.i18nOpts = jQuery.extend({}, defaultI18n, i18n, true) const notInitialised = () => { console.error('formBuilder is still initialising') - console.info('See https://formbuilder.online/docs/formBuilder/actions/getData/#wont-work and https://formbuilder.online/docs/formBuilder/promise/ for more information on formBuilder asynchronous loading') + console.info( + 'See https://formbuilder.online/docs/formBuilder/actions/getData/#wont-work and https://formbuilder.online/docs/formBuilder/promise/ for more information on formBuilder asynchronous loading', + ) } const actionList = [ @@ -2519,12 +2528,15 @@ const pluginInit = function(options,elem) { ] this.instance = { - actions: actionList.reduce((actions, currentAction) => { actions[currentAction] = notInitialised; return actions }, {}), + actions: actionList.reduce((actions, currentAction) => { + actions[currentAction] = notInitialised + return actions + }, {}), markup, get formData() { return _this.instance.actions.getData !== notInitialised && _this.instance.actions.getData('json') }, - promise: new Promise(function(resolve, reject) { + promise: new Promise(function (resolve, reject) { mi18n .init(_this.i18nOpts) .then(() => { @@ -2539,7 +2551,7 @@ const pluginInit = function(options,elem) { reject(err) opts.notify.error(err) }) - }) + }), } }