library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Replace span by label for form controls

Browse Source 
Using https://stackoverflow.com/questions/6248666/how-to-generate-short-uid-like-ax4j9z-in-js#answer-6248722, for short technical id generation with collision detection.
This commit is contained in:
Unknown 2017-08-16 17:09:02 +02:00
parent 2659494a80
commit 486d4e5bc0
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/dat/gui/GUI.js
View File

@ -996,6 +996,18 @@ function recallSavedValue(gui, controller) {
} }
} }
var _generatedUIDs = {};
function _generateUIDWithCollisionChecking() {
while (true) {
var uid = ("0000" + ((Math.random() * Math.pow(36, 4)) | 0).toString(36)).slice(-4);
if (!_generatedUIDs.hasOwnProperty(uid)) {
_generatedUIDs[uid] = true;
return uid;
}
}
}
function add(gui, object, property, params) { function add(gui, object, property, params) {
if (object[property] === undefined) { if (object[property] === undefined) {
throw new Error(`Object "${object}" has no property "${property}"`); throw new Error(`Object "${object}" has no property "${property}"`);
@ -1018,9 +1030,10 @@ function add(gui, object, property, params) {
dom.addClass(controller.domElement, 'c'); dom.addClass(controller.domElement, 'c');
const name = document.createElement('span'); const name = document.createElement('label');
dom.addClass(name, 'property-name'); dom.addClass(name, 'property-name');
name.innerHTML = controller.property; name.innerHTML = controller.property;
name.htmlFor = formControlId;
const container = document.createElement('div'); const container = document.createElement('div');
container.appendChild(name); container.appendChild(name);
@ -1039,6 +1052,12 @@ function add(gui, object, property, params) {
gui.__controllers.push(controller); gui.__controllers.push(controller);
var formControl = container.querySelectorAll('select, input')[0];
if (formControl != undefined)
{
formControl.id = formControlId;
}
return controller; return controller;
} }