typeUserAttrs bugfix (#851)

* Fix: typeUserAttrs field not showing when value omitted

* Add controls to dist/ update changelog, improve webpack output

* update changelog

CHANGELOG.md

@@ -1,5 +1,68 @@
 # Changelog
 
+- v2.10.1 - Bugfix typeUserAttrs [#851](https://github.com/kevinchappell/formBuilder/pull/851)
+- v2.10.0 - Release 2.10.0 [#842](https://github.com/kevinchappell/formBuilder/pull/842)
+  ## Fixed:
+  - inline checkbox/radio
+  - bug with clear() as reported in #750 and #828, control type check to clear() so that method doesn't reset the value for checkboxes and radio buttons, which caused the userData getter to work incorrectly.
+  - #530, Modified helpers.js::xmlSave() to serialize field data so any XML in a field's attributes is properly escaped. (#804)
+  - doubleclick event handler, resolves #535
+  - new option name, resolves #687
+  - name attribute for inputs with multiple, resolves #736
+  - current formData not carried over to new formBuilder instance on language change, resolves #735
+  - attrString util, resolves #739
+  - Lock dev dependency versions, prevents breaking changes introduced by node_modules
+  - Ensure custom attributes are included in exported data resolves #824 resolves #773
+  - Other option should hide input value when deselected, resolves #808
+  - do not disable className or name attributes- resolves #819
+  - ensure html from label is correctly escaped, resolves #816
+  - inputSet bug
+  - label saving, add esc to close data modal, resolves #757
+  - attribute placeholder typo, fix label added when it should be removed, resolves #763
+  - bug where empty className is not applied
+  - label overflow problem, resolves #779
+  - duplicate custom controls
+
+
+  ## Added:
+  - Deploy script
+  - formbuilder-languages module
+  - disableSubtypes option
+  - `onremove` to typeUserEvents
+  - `disableHTMLLabels` option, resolves #747
+  - `replaceFields` option
+  - `layout` and `layoutTemplates` docs
+  - `onOpenFieldEdit` and `scrollToFieldOnAdd` options, `closeAllFieldEdit` action
+  - `toggleAllFieldEdit` action
+  - `setData` and render actions to formRender, resolves #770
+  - `onFieldAdd` option and `toggleFieldEdit` action, resolves #772
+  - Enable multiple select field for typeUserAttrs, resolves #776
+  - `allowStageSort` option, resolves #777
+
+
+  ## Removed:
+  - remove mi18n network dependency
+  - package-lock.json
+  - replace comma, resolves #740
+  - unused modules
+  - gulp
+
+
+  ## Improved:
+  - Documentation
+  - xmlSave performance and code style
+  - Demo, moved to src so can transpile, inline style, more api buttons for manual testing
+  - Switch to yarn
+  - Use existing formBuilder instance instead of creating a new one on setLang, fixes memory leak where reference was maintained to old instance
+  - typeUserAttrs docs, resolves #810
+  - code style and cleanup
+  - use spaces instead of tabs for data formatting
+  - use both instance methods and jQuery plugin calls ie. `fbInstance.setData(formData)` and `$('.build-wrap').formBuilder('setData', formData)`
+  - update mi18n, add support checkbox custom attributes
+  - reduce file churn
+  - improve stickyControls
+  - use onRender instead of setTimeout
+
 - v2.9.8 - hotfix(inputSets): control icon [#634](https://github.com/kevinchappell/formBuilder/pull/634)
 - v2.9.7 - Merge branch 'hotfix/2.9.7'
 - v2.9.6 - Removed unused style, add get-data class to data button [#605](https://github.com/kevinchappell/formBuilder/pull/605)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formBuilder",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "main": "dist/form-builder.min.js",
   "files": [
     "dist/form-builder.min.js",
@@ -81,6 +81,7 @@
     ]
   },
   "scripts": {
+    "copy": "cp -a dist/* demo/assets/js/",
     "test": "yarn build",
     "font": "node tools/run icon-font",
     "deploy": "yarn build && babel-node -- tools/run deploy",
@@ -89,7 +90,7 @@
     "release:patch": "yarn run tag:patch --patch && yarn run deploy",
     "release:minor": "yarn run tag:minor --minor && yarn run deploy",
     "start": "webpack-dev-server --mode development --open --config tools/webpack.config",
-    "build": "webpack --mode production -p --progress --config tools/webpack.config && cp -a dist/*.js demo/assets/js/",
+    "build": "webpack --mode production -p --progress --config tools/webpack.config && yarn build:plugins && yarn copy",
     "build:analyze": "webpack --mode production -p --progress --config tools/webpack.config --analyze",
     "build:vendor": "babel-node -- tools/run build-vendor",
     "build:plugins": "webpack --mode production -p --display-entrypoints --progress --config tools/webpack.plugins.config"

src/js/form-builder.js

@@ -26,6 +26,8 @@ import {
   forceNumber,
 } from './utils'
 
+const DEFAULT_TIMEOUT = 333
+
 const FormBuilder = function(opts, element) {
   const formBuilder = this
   const i18n = mi18n.current
@@ -41,8 +43,8 @@ const FormBuilder = function(opts, element) {
 
   const h = new Helpers(formID, layoutEngine, formBuilder)
   const m = markup
-  data.layout = h.editorLayout(opts.controlPosition)
   opts = h.processOptions(opts)
+  data.layout = h.editorLayout(opts.controlPosition)
   h.editorUI(formID)
   data.formID = formID
   data.lastID = `${data.formID}-fld-1`
@@ -128,7 +130,7 @@ const FormBuilder = function(opts, element) {
 
   const cbWrap = m('div', d.controls, {
     id: `${data.formID}-cb-wrap`,
-    className: 'cb-wrap ' + data.layout.controls,
+    className: `cb-wrap ${data.layout.controls}`,
   })
 
   if (opts.showActionButtons) {
@@ -530,7 +532,7 @@ const FormBuilder = function(opts, element) {
         const attrValType = userAttrType(attribute, typeUserAttr[attribute])
         const orig = i18n[attribute]
         const tUA = typeUserAttr[attribute]
-        const origValue = tUA.value
+        const origValue = tUA.value || ''
         tUA.value = values[attribute] || tUA.value || ''
 
         if (tUA.label) {
@@ -591,7 +593,7 @@ const FormBuilder = function(opts, element) {
       if (Array.isArray(value) ? value.includes(val) : val === value) {
         attrs.selected = null
       }
-      return m('option', options[val], attrs).outerHTML
+      return m('option', options[val], attrs)
     })
 
     const selectAttrs = {
@@ -1032,7 +1034,7 @@ const FormBuilder = function(opts, element) {
   const previewSelectors = ['.form-elements input', '.form-elements select', '.form-elements textarea'].join(', ')
 
   // Save field on change
-  $stage.on('change blur keyup click', previewSelectors, throttle(saveAndUpdate, 333, { leading: false }))
+  $stage.on('change blur keyup click', previewSelectors, throttle(saveAndUpdate, DEFAULT_TIMEOUT, { leading: false }))
 
   // delete options
   $stage.on('click touchstart', '.remove', e => {
@@ -1363,11 +1365,14 @@ const FormBuilder = function(opts, element) {
 
   // set min-height on stage onRender
   d.onRender(d.controls, () => {
-    d.stage.style.minHeight = `${d.controls.clientHeight}px`
-    // If option set, controls will remain in view in editor
-    if (opts.stickyControls.enable) {
-      h.stickyControls($stage)
-    }
+    // Ensure style has loaded
+    setTimeout(() => {
+      d.stage.style.minHeight = `${d.controls.clientHeight}px`
+      // If option set, controls will remain in view in editor
+      if (opts.stickyControls.enable) {
+        h.stickyControls($stage)
+      }
+    }, 0)
   })
 
   return formBuilder

src/js/helpers.js

@@ -984,6 +984,7 @@ export default class Helpers {
     const d = this.d
     const data = this.data
     const id = formID || data.formID
+
     d.editorWrap = m('div', null, {
       id: `${data.formID}-form-wrap`,
       className: `form-wrap form-builder ${mobileClass()}`,

src/sass/_controls.scss

@@ -1,5 +1,4 @@
 .cb-wrap {
-  float: right;
   width: 26%;
   transition: transform 250ms;
 

tools/webpack.config.js

@@ -16,15 +16,17 @@ try {
   require('os').networkInterfaces = () => ({})
 }
 
+const root = resolve(__dirname, '../')
 const PRODUCTION = process.argv.includes('production')
 const ANALYZE = process.argv.includes('--analyze')
 const devtool = PRODUCTION ? false : 'inline-source-map'
-const outputDir = resolve(__dirname, '../', 'dist/')
+const outputDir = resolve(root, 'dist/')
 const camelCase = str => str.replace(/-([a-z])/g, (m, w) => w.toUpperCase())
 
 const bannerTemplate = ({ chunk }) => {
+  const name = chunk.name.substring(chunk.name.lastIndexOf('/') + 1, chunk.name.length)
   const banner = {
-    [`jQuery ${camelCase(chunk.name)}`]: pkg.homepage,
+    [`jQuery ${camelCase(name)}`]: pkg.homepage,
     Version: pkg.version,
     Author: pkg.author,
   }
@@ -37,13 +39,12 @@ const bannerTemplate = ({ chunk }) => {
 const webpackConfig = {
   context: outputDir,
   entry: {
-    'form-builder': resolve(__dirname, '../', pkg.config.files.formBuilder.js),
-    'form-render': resolve(__dirname, '../', pkg.config.files.formRender.js),
-    demo: resolve(__dirname, '../src/demo/', 'js/demo.js'),
+    'dist/form-builder': resolve(__dirname, '../', pkg.config.files.formBuilder.js),
+    'dist/form-render': resolve(__dirname, '../', pkg.config.files.formRender.js),
+    'demo/assets/js/demo': resolve(__dirname, '../src/demo/', 'js/demo.js'),
   },
   output: {
-    path: outputDir,
-    publicPath: '/dist',
+    path: root,
     filename: '[name].min.js',
   },
   module: {
@@ -109,13 +110,14 @@ const webpackConfig = {
       root: join(__dirname, '..'),
     }),
     new DefinePlugin({
-      FB_EN_US: JSON.stringify(langFiles['en-US'])
+      FB_EN_US: JSON.stringify(langFiles['en-US']),
     }),
     new HtmlWebpackPlugin({
       template: '../src/demo/index.html',
-      formBuilder: PRODUCTION ? 'assets/js/form-builder.min.js' : '../dist/form-builder.min.js',
-      formRender: PRODUCTION ? 'assets/js/form-render.min.js' : '../dist/form-render.min.js',
-      demo: PRODUCTION ? 'assets/js/demo.min.js' : '../dist/demo.min.js',
+      filename: '../demo/index.html',
+      formBuilder: PRODUCTION ? 'assets/js/form-builder.min.js' : 'dist/form-builder.min.js',
+      formRender: PRODUCTION ? 'assets/js/form-render.min.js' : 'dist/form-render.min.js',
+      demo: PRODUCTION ? 'assets/js/demo.min.js' : 'demo/assets/js/demo.min.js',
       alwaysWriteToDisk: true,
       inject: false,
       langFiles: Object.entries(langFiles).map(([key, val]) => ({