Commit 565eec86 authored by Bas Lijnse's avatar Bas Lijnse

Unified radiobutton group and checkbox group into a single check group

parent ebacf156
......@@ -39,9 +39,10 @@ itasks.Dropdown = {
}
};
itasks.RadioGroup = {
itasks.CheckGroup = {
domTag: 'ul',
cssCls: 'choice-radiogroup',
cssCls: 'checkgroup',
multiple: false,
initDOMEl: function() {
var me = this,
el = me.domEl,
......@@ -52,7 +53,7 @@ itasks.RadioGroup = {
var liEl,inputEl,labelEl;
liEl = document.createElement('li');
inputEl = document.createElement('input');
inputEl.type = 'radio';
inputEl.type = me.multiple ? 'checkbox' : 'radio';
inputEl.value = idx;
inputEl.name = inputName;
inputEl.id = inputName + "-option-" + idx;
......@@ -60,7 +61,8 @@ itasks.RadioGroup = {
inputEl.checked = true;
}
inputEl.addEventListener('click',function(e) {
me.doEditEvent(me.taskId,me.editorId,idx);
me.select([idx],me.multiple);
me.doEditEvent(me.taskId,me.editorId,me.value);
});
liEl.appendChild(inputEl);
......@@ -72,45 +74,33 @@ itasks.RadioGroup = {
el.appendChild(liEl);
});
},
select: function (selection, toggle = false) {
var me = this,
options = me.domEl.children,
numOptions = options.length,
oldSelection = me.value.slice(0),
i;
if(toggle) {
//Unselect items in the toggle set
me.value = me.value.filter(function(x) {return !selection.includes(x)});
//Add the items from the selection that were not already selected
me.value = me.value.concat(selection.filter(function(x) {return !oldSelection.includes(x)}));
} else {
me.value = selection;
}
//Update DOM
for(i = 0; i < numOptions; i++) {
options[i].children[0].checked = me.value.includes(i);
}
},
onAttributeChange: function(name,value) {
console.log(name,value);
if(name == 'value') {
me.select(value,false);
}
}
};
itasks.CheckboxGroup = {
domTag: 'ul',
cssCls: 'choice-checkboxgroup',
initDOMEl: function() {
var me = this,
el = me.domEl,
inputName = "choice-" + me.taskId + "-" + me.editorId,
value = me.value || [];
me.options.forEach(function(option,idx) {
var liEl,inputEl,labelEl;
liEl = document.createElement('li');
inputEl = document.createElement('input');
inputEl.type = 'checkbox';
inputEl.value = idx;
inputEl.id = inputName + "-option-" + idx;
if(value.indexOf(idx) !== -1) {
inputEl.checked = true;
}
inputEl.addEventListener('click',function(e) {
me.doEditEvent(me.taskId,me.editorId,[idx,e.target.checked]);
});
liEl.appendChild(inputEl);
labelEl = document.createElement('label');
labelEl.setAttribute('for',inputName + "-option-" + idx);
labelEl.innerHTML = option;
liEl.appendChild(labelEl);
el.appendChild(liEl);
});
}
};
itasks.Grid = {
cssCls: 'choicegrid',
width: 'flex',
......
.#{$prefix}choice-radiogroup, .#{$prefix}choice-checkboxgroup {
.#{$prefix}checkgroup, {
margin: 0;
padding: 0;
}
.#{$prefix}choice-radiogroup li, .#{$prefix}choice-checkboxgroup li {
.#{$prefix}checkgroup li {
list-style: none;
}
.#{$prefix}choice-radiogroup label, .#{$prefix}choice-checkboxgroup label {
.#{$prefix}checkgroup label {
margin-left: 5px;
}
.#{$prefix}choicegrid {
......
......@@ -530,14 +530,14 @@ div.itasks-loader-spinner {
.itasks-button-disabled .itasks-button-icon {
opacity: 0.5; }
.itasks-choice-radiogroup, .itasks-choice-checkboxgroup {
.itasks-checkgroup {
margin: 0;
padding: 0; }
.itasks-choice-radiogroup li, .itasks-choice-checkboxgroup li {
.itasks-checkgroup li {
list-style: none; }
.itasks-choice-radiogroup label, .itasks-choice-checkboxgroup label {
.itasks-checkgroup label {
margin-left: 5px; }
.itasks-choicegrid {
......
......@@ -84,8 +84,7 @@ derive class iTask UIChange, UIAttributeChange, UIChildChange
| UIProgressBar // - Progress (non editable progress bar)
// Selection components (implemented in itasks-components-selection.js)
| UIDropdown // - Dropdown (choice from a list of alternatives)
| UIRadioGroup // - A mutually exclusive set of radio buttons
| UICheckboxGroup // - A group of checkboxes that indicate a multiple selection
| UICheckGroup // - A group of radio buttons or checkboxes (depends on multiple attribute)
| UIChoiceList // - A mutually exclusive set of radio buttons
| UIGrid // - Grid (selecting an item in a table)
| UITree // - Tree (selecting a node in a tree structure)
......
......@@ -278,8 +278,7 @@ where
toString UIProgressBar = "ProgressBar"
toString UIDropdown = "Dropdown"
toString UIRadioGroup = "RadioGroup"
toString UICheckboxGroup = "CheckboxGroup"
toString UICheckGroup = "CheckGroup"
toString UIChoiceList = "ChoiceList"
toString UIGrid = "Grid"
toString UITree = "Tree"
......
......@@ -53,7 +53,7 @@ dropdown :: UIAttributes -> Editor ([String], [Int])
dropdown attr = choiceComponent (const attr) id JSONString (\o i -> i >= 0 && i < length o) UIDropdown
checkGroup :: UIAttributes -> Editor ([String],[Int])
checkGroup attr = choiceComponent (const attr) id JSONString (\o i -> i >= 0 && i < length o) UIRadioGroup
checkGroup attr = choiceComponent (const attr) id JSONString (\o i -> i >= 0 && i < length o) UICheckGroup
choiceList :: UIAttributes -> Editor ([String],[Int])
choiceList attr = choiceComponent (const attr) id JSONString (\o i -> i >= 0 && i < length o) UIChoiceList
......
......@@ -125,7 +125,7 @@ isIntermediate (UI type _ _) = isMember type [UIInteract,UIStep,UIParallel]
isFormComponent (UI type _ _) = isMember type
[UITextField,UITextArea,UIPasswordField,UIIntegerField,UIDecimalField
,UICheckbox,UISlider,UIDocumentField,UIDropdown,UIRadioGroup,UICheckboxGroup
,UICheckbox,UISlider,UIDocumentField,UIDropdown,UICheckGroup
,UITextView,UIHtmlView
]
instance == UINodeType where (==) x y = x === y
......
......@@ -14,6 +14,7 @@ testBuiltinEditors = testsuite "Builtin editors" "These tests check if the built
,testCheckbox,testSlider,testButton,testLabel,testIcon
,testTextView,testHtmlView,testProgressBar
,testDropdown,testCheckGroup,testChoiceList,testGrid,testTree
,testCheckGroupMulti,testChoiceListMulti,testGridMulti,testTreeMulti
]
testTextField = itest "Text field" "Check if the textfield is ok" "You should be able to edit" tut
......@@ -114,3 +115,27 @@ where
,{ChoiceNode|id=2,label="B",icon=Nothing,expanded=False,children=[]}
,{ChoiceNode|id=3,label="C",icon=Nothing,expanded=False,children=[]}
],[]) Update
testCheckGroupMulti = itest "Check group (multiple)" "Check if the checkgroup works" "You should be able to select multiple" tut
where
tut :: Task ([String],[Int])
tut = testEditor (checkGroup (multipleAttr True)) (["A","B","C"],[]) Update
testChoiceListMulti = itest "Choice list (multiple)" "Check if the choice list works" "You should be able to select multiple" tut
where
tut :: Task ([String],[Int])
tut = testEditor (choiceList (multipleAttr True)) (["A","B","C"],[]) Update
testGridMulti = itest "Grid (multiple)" "Check if the grid works" "You should be able to select multiple" tut
where
tut :: Task (ChoiceGrid,[Int])
tut = testEditor (grid (multipleAttr True)) ({ChoiceGrid|header=["Key","Value"],rows=[[Text "A",Text "1"],[Text "B",Text "2"],[Text "C",Text "3"]]},[]) Update
testTreeMulti = itest "Tree (multiple)" "Check if the tree works" "You should be able to select multiple" tut
where
tut :: Task ([ChoiceNode],[Int])
tut = testEditor (tree (multipleAttr True))
([{ChoiceNode|id=1,label="A",icon=Nothing,expanded=False,children=[]}
,{ChoiceNode|id=2,label="B",icon=Nothing,expanded=False,children=[]}
,{ChoiceNode|id=3,label="C",icon=Nothing,expanded=False,children=[]}
],[]) Update
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment