Skip to content

Commit

Permalink
feat: getCurrentFieldId
Browse files Browse the repository at this point in the history 
fix: typeUserAttr checkbox behavior, resolves #571
  • Loading branch information
@kevinchappell
kevinchappell committed Jan 26, 2020
1 parent 1c2d1ad commit c0148b3
Show file tree
Hide file tree
Showing 17 changed files with 402 additions and 188 deletions.
6 changes: 0 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,6 @@
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"eslint": "^5.16.0",
"eslint-config-google": "^0.12.0",
"eslint-config-prettier": "^4.2.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-prettier": "^3.0.1",
Expand Down Expand Up @@ -158,7 +157,6 @@
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"google",
"prettier"
],
"plugins": [
Expand Down
169 changes: 111 additions & 58 deletions src/demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,118 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
media="screen"
href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.1/jquery.rateyo.min.css"
/>

<head>
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.1/jquery.rateyo.min.css">
<meta
name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<title>jQuery formBuilder/formRender Demo</title>
</head>

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>jQuery formBuilder/formRender Demo</title>
</head>

<body>
<label for="toggleBootstrap">Toggle Bootstrap <input type="checkbox" id="toggleBootstrap" /></label> |
dataType: <label>XML <input type="radio" name="demo-dataType" value="xml" class="demo-dataType" /></label><label>JSON <input type="radio" name="demo-dataType" value="json" class="demo-dataType" /></label>
<div class="content">
<h1 class="formbuilder-title">jQuery formBuilder -
<button class="editForm">Render</button>
</h1>
<h1 class="formrender-title">jQuery formRender -
<button class="editForm">Edit</button>
</h1>
<div class="build-wrap"></div>
<form class="render-wrap"></form>
<div class="action-buttons formbuilder-actions">
<h2>Actions</h2>
<button id="getFieldTypes" type="button">Get Field Types</button>
<button id="showData" type="button">Show Data</button>
<button id="clearFields" type="button">Clear All Fields</button>
<button id="getData" type="button">Get Data</button>
<button id="getXML" type="button">Get XML Data</button>
<button id="getJSON" type="button">Get JSON Data</button>
<button id="getJS" type="button">Get JS Data</button>
<button id="setData" type="button">Set Data</button>
<button id="toggleAllEdit" type="button">Toggle All Field Edit</button>
<button id="toggleEdit" type="button">Toggle Field Edit</button>
<input type="text" placeholder="current field id" id="currentFieldId" />
<button id="addField" type="button">Add Field</button>
<button id="removeField" type="button">Remove Field</button>
<button id="resetDemo" type="button">Reset Demo</button>
<h2>i18n</h2>
<select id="setLanguage">
<% _.forEach(htmlWebpackPlugin.options.langFiles, function(langFile) { %>
<option value="<%- langFile.locale %>"><%- langFile.nativeName %></option>
<% }); %>
</select>
</div>
<div class="action-buttons formrender-actions">
<h2>Actions</h2>
<button id="loadUserForm" type="button">Load User Form</button>
<button id="showUserData" type="button">Show User Data</button>
<button id="renderUserForm" type="button">Render User Form</button>
<button id="getHTML" type="button">Get HTML</button>
<button id="clearUserForm" type="button">Clear Form</button>
<button id="testSubmit" type="submit">Test Submit</button>
<body>
<header class="demo-header">
<label for="toggleBootstrap">Toggle Bootstrap <input type="checkbox" id="toggleBootstrap"/></label>
<div>
dataType:
<label>XML <input type="radio" name="demo-dataType" value="xml" class="demo-dataType"/></label
><label>JSON <input type="radio" name="demo-dataType" value="json" class="demo-dataType"/></label>
</div>
<div>
Language:
<select id="setLanguage">
<% _.forEach(htmlWebpackPlugin.options.langFiles, function(langFile) { %>
<option value="<%- langFile.locale %>"><%- langFile.nativeName %></option>
<% }); %>
</select>
</div>
</header>
<div class="content">
<h1 class="formbuilder-title">
jQuery formBuilder -
<button class="editForm">Render</button>
</h1>
<h1 class="formrender-title">
jQuery formRender -
<button class="editForm">Edit</button>
</h1>
<div class="build-wrap"></div>
<form class="render-wrap"></form>
<div class="action-buttons formbuilder-actions">
<h2>Actions</h2>
<table id="action-api" class="api-table"></table>
<div id="toggleEdit">
<button class="trigger">Toggle Field Edit</button>
<input type="text" placeholder="current field id" class="current-field-id" />
</div>
<div id="removeField">
<button class="trigger">Remove Field</button>
<input type="text" placeholder="current field id" class="current-field-id" />
</div>
<div id="setData">
<button class="trigger">Set Form Data</button>
<textarea id="set-form-data-value">
[
{
"type": "text",
"label": "Full Name",
"subtype": "text",
"className": "form-control",
"name": "text-1476748004559"
},
{
"type": "select",
"label": "Occupation",
"className": "form-control",
"name": "select-1476748006618",
"values": [
{
"label": "Street Sweeper",
"value": "option-1",
"selected": true
},
{
"label": "Moth Man",
"value": "option-2"
},
{
"label": "Chemist",
"value": "option-3"
}
]
},
{
"type": "textarea",
"label": "Short Bio",
"rows": "5",
"className": "form-control",
"name": "textarea-1476748007461"
}
]</textarea
>
</div>
</div>
<div class="action-buttons formrender-actions">
<h2>Actions</h2>
<button id="loadUserForm" type="button">Load User Form</button>
<button id="showUserData" type="button">Show User Data</button>
<button id="renderUserForm" type="button">Render User Form</button>
<button id="getHTML" type="button">Get HTML</button>
<button id="clearUserForm" type="button">Clear Form</button>
<button id="testSubmit" type="submit">Test Submit</button>
</div>
</div>
</div>
<div id="formbuilder-options"></div>
<script src="assets/js/vendor.js"></script>

<script src="<%= htmlWebpackPlugin.options.formBuilder %>"></script>
<script src="<%= htmlWebpackPlugin.options.formRender %>"></script>
<script src="<%= htmlWebpackPlugin.options.demo %>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.1/jquery.rateyo.min.js"></script>
</body>
<div id="formbuilder-options"></div>
<script src="assets/js/vendor.js"></script>

<script src="<%= htmlWebpackPlugin.options.formBuilder %>"></script>
<script src="<%= htmlWebpackPlugin.options.formRender %>"></script>
<script src="<%= htmlWebpackPlugin.options.demo %>"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.1/jquery.rateyo.min.js"></script>
</body>
</html>
81 changes: 73 additions & 8 deletions src/demo/js/actionButtons.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
const setFormData =
'[{"type":"text","label":"Full Name","subtype":"text","className":"form-control","name":"text-1476748004559"},{"type":"select","label":"Occupation","className":"form-control","name":"select-1476748006618","values":[{"label":"Street Sweeper","value":"option-1","selected":true},{"label":"Moth Man","value":"option-2"},{"label":"Chemist","value":"option-3"}]},{"type":"textarea","label":"Short Bio","rows":"5","className":"form-control","name":"textarea-1476748007461"}]'

const currentFieldId = document.getElementById('currentFieldId')
import { titleCase } from './utils'

export const builderActions = {
showData: () => $('.build-wrap').formBuilder('showData'),
Expand All @@ -10,7 +7,9 @@ export const builderActions = {
console.log($('.build-wrap').formBuilder('getData'))
},
setData: () => {
$('.build-wrap').formBuilder('setData', setFormData)
const { value } = document.getElementById('set-form-data-value')
window.sessionStorage.setItem('formData', value)
$('.build-wrap').formBuilder('setData', value)
},
addField: () => {
const field = {
Expand All @@ -21,8 +20,8 @@ export const builderActions = {
$('.build-wrap').formBuilder('addField', field)
},
removeField: () => {
const fieldId = currentFieldId.value
$('.build-wrap').formBuilder('removeField', fieldId)
const currentFieldId = $('.build-wrap').formBuilder('getCurrentFieldId')
$('.build-wrap').formBuilder('removeField', currentFieldId)
},
getXML: () => {
alert($('.build-wrap').formBuilder('getData', 'xml'))
Expand All @@ -35,7 +34,8 @@ export const builderActions = {
console.log($('.build-wrap').formBuilder('getData'))
},
toggleEdit: () => {
$('.build-wrap').formBuilder('toggleFieldEdit', currentFieldId.value)
const currentFieldId = $('.build-wrap').formBuilder('getCurrentFieldId')
$('.build-wrap').formBuilder('toggleFieldEdit', currentFieldId)
},
toggleAllEdit: () => $('.build-wrap').formBuilder('toggleAllFieldEdit'),
getFieldTypes: () => console.log($('.build-wrap').formBuilder('getFieldTypes')),
Expand Down Expand Up @@ -87,3 +87,68 @@ export const demoActions = {
location.reload()
},
}

const processCell = cellData => {
let cell = cellData
if (typeof cell === 'string') {
cell = { attrs: { scope: 'col' }, content: titleCase(cellData) }
}

if (typeof cell.content === 'string') {
cell.content = document.createTextNode(cell.content)
}

return { attrs: {}, ...cell }
}

const generateTr = (columns, isHeader = false) =>
columns.reduce((acc, cur) => {
const column = processCell(cur)
const type = isHeader ? 'th' : 'td'
const td = document.createElement(type)
td.appendChild(column.content)
Object.entries(column.attrs).forEach(([key, val]) => {
td.setAttribute(key, val)
})
acc.appendChild(td)
return acc
}, document.createElement('tr'))

const apiBtns = {
...builderActions,
...renderActions,
...demoActions,
}

export const generateActionTable = (actions, columns) => {
const fragment = document.createDocumentFragment()
const thead = document.createElement('thead')
thead.appendChild(generateTr(columns, true))
const actionApiRows = Object.entries(actions).reduce((acc, [key, content]) => {
const description = { content }
const code = document.createElement('code')
code.appendChild(document.createTextNode(key))
const action = { content: code }
let actionDemoTrigger = document.getElementById(key)
if (!actionDemoTrigger) {
actionDemoTrigger = document.createElement('button')
actionDemoTrigger.id = key
actionDemoTrigger.textContent = titleCase(key)
actionDemoTrigger.addEventListener('click', e => apiBtns[key] && apiBtns[key](e))
} else {
const trigger = actionDemoTrigger.querySelector('.trigger')
if (trigger) {
trigger.addEventListener('click', e => apiBtns[key] && apiBtns[key](e))
}
}
const demo = { content: actionDemoTrigger }
acc.appendChild(generateTr([action, description, demo]))
return acc
}, document.createDocumentFragment())
const tbody = document.createElement('tbody')
tbody.appendChild(actionApiRows)

fragment.appendChild(thead)
fragment.appendChild(tbody)
return fragment
}
Loading

0 comments on commit c0148b3

Please sign in to comment.