Last active
April 25, 2020 04:17
-
-
Save GoSubRoutine/5b18d019959031f517fc218667faa688 to your computer and use it in GitHub Desktop.
Create Vertical Radio Buttons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
height: 100 | |
scrolling: no | |
border: no |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script defer src=https://cdn.JsDelivr.net/npm/p5></script> | |
<script defer src=sketch.js></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Create Vertical Radio Buttons (v1.0.1) | |
* GoToLoop (2019-Apr-07) | |
* | |
* https://Discourse.Processing.org/t/ | |
* how-to-organize-radio-buttons-in-separate-lines/10041/5 | |
* | |
* https://Bl.ocks.org/GoSubRoutine/5b18d019959031f517fc218667faa688 | |
*/ | |
"use strict"; | |
let radio; | |
function setup() { | |
createCanvas(150, 100); | |
noLoop(); | |
radio = createRadio().position(20, 25).changed(redraw); | |
radio.option('male', color('cyan')); | |
radio.option('female', color('pink')).checked = true; | |
radio.option('prefer not to say', color('orange')); | |
encloseEachInputLabelPairIntoASubDiv(radio); | |
fixRadioDivElement(radio); | |
} | |
function draw() { | |
background(radio.value()); | |
} | |
function encloseEachInputLabelPairIntoASubDiv(radioDivElement) { | |
const inputs = selectAll('input', radioDivElement), | |
labels = selectAll('label', radioDivElement), | |
len = inputs.length; | |
for (let i = 0; i < len; ++i) | |
createDiv().parent(radioDivElement).child(inputs[i]).child(labels[i]); | |
} | |
function fixRadioDivElement(radioDivP5Element) { | |
radioDivP5Element._getInputChildrenArray = function () { | |
return this.elt.getElementsByTagName('input'); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@jbroux, according to p5::selectAll() method's reference, its optional 2nd parameter can be of 3 diff. datatypes:
https://p5js.org/reference/#p5/selectAll
On my sketch function encloseEachInputLabelPairIntoASubDiv() is invoked by passing variable radio as its argument:
And variable radio is of datatype p5.Element btW:
B/c p5::createRadio() (and also p5.Element::position() & p5.Element::changed()) returns an instance of p5.Element:
https://p5js.org/reference/#/p5/createRadio
Therefore my function encloseEachInputLabelPairIntoASubDiv() is fully compliant to p5js' docs when invoking p5::selectAll() method:
The message "selectAll() was expecting String for parameter #1 (zero-based index), received object instead." shouldn't happen!
B/c that 2nd parameter can be either a String or an object (p5.Element is an object btW).
If you want it, you can let them know about it:
https://github.com/processing/p5.js/issues