h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

more param types to check and style

Browse Source
This commit is contained in:
Davor Hrg
2021-08-04 00:11:55 +02:00
parent fd7954815a
commit 2b2080c232
3 changed files with 116 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/web/src/helpers/cadPackages/jscadParams.js
View File

@@ -1,4 +1,4 @@
const GROUP_SELECTOR = 'DIV[type="group"] LABEL'
const GROUP_SELECTOR = 'DIV[type="group"]'
const INPUT_SELECTOR = 'INPUT, SELECT'
function forEachInput(target, callback){
@@ -15,7 +15,7 @@ function applyRange(inp){
let label = inp.previousElementSibling
if(label.tagName == 'LABEL'){
let info = label.querySelector('I')
if(info) info.innerHTML = '('+inp.value+')'
if(info) info.innerHTML = inp.value
}
}
@@ -88,13 +88,15 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
}
def.closed = closed
html +=`<div class="form-line" type="${def.type}" closed="${closed ? 1:0}">`
html +=`<div class="form-line" type="${def.type}" closed="${closed ? 1:0}`
if(type == 'group') html += ` name="${name}"`
html +=`">`
html += `<label`
if(type == 'group') html += ` name="${name}"`
html += `>`
if(type == 'checkbox') html += funcs[type](def)
html += `${caption}<i></i></label>`
html += `${caption}<i>${def.value}</i></label>`
if(funcs[type] && type != 'checkbox') html += funcs[type](def)
@@ -141,7 +143,7 @@ export function genParams(defs, target, storedParams={}, callback=undefined, but
callback(getParams(target),true)
}
forEachGroup(target, label=>label.onclick=groupClick)
forEachGroup(target, div=>div.onclick=groupClick)
}
export function getParams(target){
@@ -150,7 +152,7 @@ export function getParams(target){
forEachGroup(target,elem=>{
let name = elem.getAttribute('name')
params[name] = (groupDiv.getAttribute('closed') == '1') ? 'closed':''
params[name] = (elem.getAttribute('closed') == '1') ? 'closed':''
})
forEachInput(target,elem=>{

21
app/web/src/helpers/hooks/useIdeState.ts
View File

@@ -70,7 +70,26 @@ const main = ({length=1}) => {
}
const getParameterDefinitions = ()=>{
return [
{type:'slider', name:'length', initial:210, caption:'Length', min:210, max:1500}
{type:'slider', name:'length', initial:210, caption:'Length', min:210, max:1500},
{ name: 'group1', type: 'group', caption: 'Group 1: Text Entry' },
{ name: 'text', type: 'text', initial: '', size: 20, maxLength: 20, caption: 'Plain Text:', placeholder: '20 characters' },
{ name: 'int', type: 'int', initial: 20, min: 1, max: 100, step: 1, caption: 'Integer:' },
{ name: 'number', type: 'number', initial: 2.0, min: 1.0, max: 10.0, step: 0.1, caption: 'Number:' },
{ name: 'date', type: 'date', initial: '2020-01-01', min: '2020-01-01', max: '2030-12-31', caption: 'Date:', placeholder: 'YYYY-MM-DD' },
{ name: 'email', type: 'email', initial: 'me@example.com', caption: 'Email:' },
{ name: 'url', type: 'url', initial: 'www.example.com', size: 40, maxLength: 40, caption: 'Url:', placeholder: '40 characters' },
{ name: 'password', type: 'password', initial: '', caption: 'Password:' },
{ name: 'group2', type: 'group', caption: 'Group 2: Interactive Controls' },
{ name: 'checkbox', type: 'checkbox', checked: true, initial: '20', caption: 'Checkbox:' },
{ name: 'color', type: 'color', initial: '#FFB431', caption: 'Color:' },
{ name: 'slider', type: 'slider', initial: 3, min: 1, max: 10, step: 1, caption: 'Slider:' },
{ name: 'choice1', type: 'choice', caption: 'Dropdown Menu:', values: [0, 1, 2, 3], captions: ['No', 'Yes', 'Maybe', 'So so'], initial: 2 },
{ name: 'choice3', type: 'choice', caption: 'Dropdown Menu:', values: ['No', 'Yes', 'Maybe', 'So so'], initial: 'No' },
{ name: 'choice2', type: 'radio', caption: 'Radio Buttons:', values:[0, 1, 2, 3], captions: ['No', 'Yes', 'Maybe', 'So so'], initial: 5 },
{ name: 'group3', type: 'group', initial: 'closed', caption: 'Group 3: Initially Closed Group' },
{ name: 'checkbox2', type: 'checkbox', checked: true, initial: '20', caption: 'Optional Checkbox:' },
]
}
module.exports = {main, getParameterDefinitions}