{"id":19273945,"url":"https://github.com/lnxgrl/Controls.js","last_synced_at":"2026-07-01T08:30:19.516Z","repository":{"id":128919889,"uuid":"167407863","full_name":"ninivert/Controls.js","owner":"ninivert","description":"ES6 class to make animating and interacting with inputs easier","archived":false,"fork":false,"pushed_at":"2019-02-11T18:36:49.000Z","size":20,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-05T14:28:51.807Z","etag":null,"topics":["dom-manipulation","library"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ninivert.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-24T17:27:31.000Z","updated_at":"2019-02-26T22:54:45.000Z","dependencies_parsed_at":"2023-03-24T04:47:43.783Z","dependency_job_id":null,"html_url":"https://github.com/ninivert/Controls.js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninivert%2FControls.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninivert%2FControls.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninivert%2FControls.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ninivert%2FControls.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ninivert","download_url":"https://codeload.github.com/ninivert/Controls.js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240378873,"owners_count":19792039,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-manipulation","library"],"created_at":"2024-11-09T20:44:32.347Z","updated_at":"2026-07-01T08:30:19.467Z","avatar_url":"https://github.com/ninivert.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# owo what's this ?\n\nA JavaScript library to allow animators to easily create and interact with user-based inputs on the page.\\\nHere is a [live example](https://ninivert.github.io/Controls.js/) of what that might look like.\\\n\nFeatures:\n\n- Support for all the major input types + a few customs (more coming soon)\n- `get` and `set` methods to update the inputs\n- Automatic labels and live JavaScript values\n- Styling via explicit CSS classes\n- Support for all the input attributes\n\n# How do I use it ?\n\n```javascript\nconst controls = new DOMControls(options, parent, globalCallback, DOMNames);\n\n...\n\ncontrols.set(\"moo_number_input\", 1.2);\ncontrols.set(\"foo_text_input\", \"hello world\");\ncontrols.get(\"moo_number_input\"); // 1.2\ncontrols.get(\"foo_text_input\"); // \"hello world\"\n```\n\n## `options` object (required)\n\n```javascript\nconst options = {\n\t\"foo_btn\": {\n\t\ttype: \"button\",\n\t\tvalue: \"click me!\"\n\t},\n\t\"goo_radio\": {\n\t\ttype: \"radio\",\n\t\tvalue: \"option1\", // option1 will be checked\n\t\tvalues: [\"option1\", \"option2\", \"option3\"],\n\t},\n\t\"moo_range\": {\n\t\ttype: \"range\",\n\t\tvalue: 1,\n\t\tlabel: \"Select a number\",\n\t\tshowValue: true,\n\t\tattributes: {\n\t\t\tmin: 0,\n\t\t\tmax: 10,\n\t\t\tstep: 0.1\n\t\t}\n\t}\n};\n```\n\n| Name | Function |\n| --- | --- |\n| type | Specifies the input type. Required |\n| value | Initial input value. Required |\n| callback | Callback function, called with the current input value |\n| default | Default value for the input shown after reset.  Defaults to the initial value |\n| label | Text of the input label |\n| showValue | Enable input value display (useful for `range` inputs) |\n| attributes | An object of HTML attributes to add to the input |\n| ignoreGlobalCallback | By default, every input will trigger the `globalCallback` after its own callback. Setting this to true will disable `globalCallback` from being executed for this input. (useful for automatically updating canvas renderings) |\n| ignoreReset | By default, clicking on the `reset`-typed input will set every input to its default value. Setting this to true will prevent this for this input. |\n\n## `parent` element (required)\n\nAll the inputs will be appended to the parent element. I'd recommend to create a separate `div` for this.\n\n```javascript\nconst parent = document.getElementById(\"container\");\n```\n\n## `globalCallback` function (optional)\n\nWhen given, every input will trigger this function after its own callback. I often use this to refresh a `canvas` element.\n\n```javascript\nconst globalCallback = function() {\n\t// do stuff after each input\n\tconsole.log(\"global callback !\");\n}\n```\n\n## `DOMNames` object (optional)\n\nNames used for the generation of the inputs, labels and wrappers. Have a look at the [live example](https://ninivert.github.io/Controls.js/) to see how it affects the generated HTML. Default is:\n\n```javascript\n{\n\tIDPrefix: [\"option\"],\n\twrapper: [\"option\"],\n\tinputWrapper: [\"option__input_wrapper\"],\n\tlabelWrapper: [\"option__label_wrapper\"],\n\tvalueWrapper: [\"option__value_wrapper\"],\n\tradioWrapper: [\"option__radio_wrapper\"]\n}\n```\n\n# Input types\n\n## Button\n\n`value` specifies the button text.\n\n```javascript\n\"foo\": {\n\ttype: \"button\",\n\tvalue: \"Click me!\",\n\tlabel: \"Click dat button below\",\n}\n```\n\n## Checkbox\n\n`value` specifies the checkbox being ticked or not.\n\n```javascript\n\"moo\": {\n\ttype: \"checkbox\",\n\tvalue: true\n\tlabel: \"Check me!\",\n}\n```\n\n## Radio\n\n`value` specifies which option is checked first. The `values` array specifies all the other values.\n\n```javascript\n\"goo\": {\n\ttype: \"radio\",\n\tvalue: \"option1\",\n\tvalues: [\"option1\", \"option2\", \"option3\"]\n}\n```\n\n## Number\n\nThe attributes are very useful to limit the size of the number, as well as its precision.\n\n```javascript\n\"loo\": {\n\ttype: \"number\",\n\tvalue: 1,\n\tattributes: {\n\t\tmin: 0,\n\t\tmax: 10,\n\t\tstep: 0.1\n\t}\n}\n```\n\n## Range\n\nHere the `showValue` option is very useful for the user.\n\n```javascript\n\"woo\": {\n\ttype: \"range\",\n\tvalue: 1,\n\tshowValue: true,\n\tattributes: {\n\t\tmin: 0,\n\t\tmax: 10,\n\t\tstep: 0.1\n\t}\n}\n```\n\n## Text-based inputs\n\n`text`, `email`, `password`, `tel`, `search`, `url` all are text-based inputs\n\n```javascript\n\"soo\": {\n\ttype: \"text\",\n\tvalue: \"hello world\",\n\tlabel: \"Enter text here\",\n\tattributes: {\n\t\tmaxlength: 10,\n\t\tplaceholder: \"Write something\"\n\t}\n}\n```\n\n## Date and time\n\n`time`, `date`, `datetime-local`, `month`, `week` are time-based inputs.\\\nUsing an empty string for the value works as well.\n\n```javascript\n\"zoo\": {\n\ttype: \"time\",\n\tvalue: \"\",\n\tshowValue: true // Useful for debugging the format\n}\n```\n\n## Color\n\n`color` will use the native color input for your system.\n\n```javascript\n\"too\": {\n\ttype: \"color\",\n\tvalue: \"#000000\"\n}\n```\n\n## File\n\nThe callback function is executed once the uploaded file has been loaded. Here I display an uploaded image on the document body.\n\n```javascript\n\"roo\": {\n\ttype: \"file\",\n\tvalue: \"\",\n\tcallback: function(e) {\n\t\tconst img = new Image();\n\t\timg.src = e.target.result;\n\t\tdocument.body.appendChild(img);\n\t},\n\tattributes: {\n\t\taccept: \"image/*\"\n\t}\n}\n```\n\n## Reset\n\nResets the entire field of options to their respective default values\n\n```javascript\n\"boo\": {\n\ttype: \"reset\",\n\tvalue: \"Reset to default\",\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flnxgrl%2FControls.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flnxgrl%2FControls.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flnxgrl%2FControls.js/lists"}