mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-29 15:30:47 +00:00
sets checked class for radio widget wrapper / label (#2182)
* sets checked ckass for radio widget wrapper * added tc-radio as standard class for radio widgets * removed selectedClass again, as suggested @pmario ;-)
This commit is contained in:
parent
ea763d0eab
commit
f092d08358
@ -33,12 +33,15 @@ RadioWidget.prototype.render = function(parent,nextSibling) {
|
|||||||
this.computeAttributes();
|
this.computeAttributes();
|
||||||
// Execute our logic
|
// Execute our logic
|
||||||
this.execute();
|
this.execute();
|
||||||
|
var isChecked = this.getValue() === this.radioValue;
|
||||||
// Create our elements
|
// Create our elements
|
||||||
this.labelDomNode = this.document.createElement("label");
|
this.labelDomNode = this.document.createElement("label");
|
||||||
this.labelDomNode.setAttribute("class",this.radioClass);
|
this.labelDomNode.setAttribute("class",
|
||||||
|
"tc-radio " + this.radioClass + (isChecked ? " tc-radio-selected" : "")
|
||||||
|
);
|
||||||
this.inputDomNode = this.document.createElement("input");
|
this.inputDomNode = this.document.createElement("input");
|
||||||
this.inputDomNode.setAttribute("type","radio");
|
this.inputDomNode.setAttribute("type","radio");
|
||||||
if(this.getValue() == this.radioValue) {
|
if(isChecked) {
|
||||||
this.inputDomNode.setAttribute("checked","true");
|
this.inputDomNode.setAttribute("checked","true");
|
||||||
}
|
}
|
||||||
this.labelDomNode.appendChild(this.inputDomNode);
|
this.labelDomNode.appendChild(this.inputDomNode);
|
||||||
@ -92,10 +95,6 @@ RadioWidget.prototype.execute = function() {
|
|||||||
this.radioIndex = this.getAttribute("index");
|
this.radioIndex = this.getAttribute("index");
|
||||||
this.radioValue = this.getAttribute("value");
|
this.radioValue = this.getAttribute("value");
|
||||||
this.radioClass = this.getAttribute("class","");
|
this.radioClass = this.getAttribute("class","");
|
||||||
if(this.radioClass !== "") {
|
|
||||||
this.radioClass += " ";
|
|
||||||
}
|
|
||||||
this.radioClass += "tc-radio";
|
|
||||||
// Make the child widgets
|
// Make the child widgets
|
||||||
this.makeChildWidgets();
|
this.makeChildWidgets();
|
||||||
};
|
};
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
caption: radio
|
caption: radio
|
||||||
created: 20131212195353929
|
created: 20131212195353929
|
||||||
modified: 20161217112444671
|
modified: 20170115095809695
|
||||||
tags: Widgets
|
tags: Widgets
|
||||||
title: RadioWidget
|
title: RadioWidget
|
||||||
type: text/vnd.tiddlywiki
|
type: text/vnd.tiddlywiki
|
||||||
@ -18,7 +18,7 @@ The content of the `<$radio>` widget is displayed within an HTML `<label>` eleme
|
|||||||
|field |The field of the //tiddler// bound to the radio button|
|
|field |The field of the //tiddler// bound to the radio button|
|
||||||
|index|<<.from-version "5.1.14">> The index of the //tiddler// being [[DataTiddler|DataTiddlers]] bound to the radio button<<.tip "takes precedence over //field//">>|
|
|index|<<.from-version "5.1.14">> The index of the //tiddler// being [[DataTiddler|DataTiddlers]] bound to the radio button<<.tip "takes precedence over //field//">>|
|
||||||
|value |The value for the //field// or //index// of the //tiddler//|
|
|value |The value for the //field// or //index// of the //tiddler//|
|
||||||
|class |CSS classes to be assigned to the label around the radio button |
|
|class |The CSS classes assigned to the label around the radio button<$macrocall $name=".tip" _="""<<.from-version "5.1.14">> `tc-radio` is always applied by default, as well as `tc-radio-selected` when selected"""/>|
|
||||||
|
|
||||||
!! Field Mode
|
!! Field Mode
|
||||||
|
|
||||||
@ -27,7 +27,6 @@ This example uses the radio widget to change the `modifier` field of this tiddle
|
|||||||
<<wikitext-example-without-html """<$radio field="modifier" value="JoeBloggs"> Joe Bloggs</$radio>
|
<<wikitext-example-without-html """<$radio field="modifier" value="JoeBloggs"> Joe Bloggs</$radio>
|
||||||
<$radio field="modifier" value="JaneBloggs"> Jane Bloggs</$radio>""">>
|
<$radio field="modifier" value="JaneBloggs"> Jane Bloggs</$radio>""">>
|
||||||
|
|
||||||
|
|
||||||
!! Index Mode
|
!! Index Mode
|
||||||
|
|
||||||
Using the radio widget in index mode requires the //index// attribute to specify the name of the index of a [[DataTiddler|DataTiddlers]] to which the specified //value// is assigned.
|
Using the radio widget in index mode requires the //index// attribute to specify the name of the index of a [[DataTiddler|DataTiddlers]] to which the specified //value// is assigned.
|
||||||
|
Loading…
Reference in New Issue
Block a user