{"id":23434920,"url":"https://github.com/gpslab/gpslab-controller","last_synced_at":"2025-04-09T16:55:46.227Z","repository":{"id":57252791,"uuid":"80121044","full_name":"gpslab/gpslab-controller","owner":"gpslab","description":"JavaScript micro framework","archived":false,"fork":false,"pushed_at":"2019-08-07T08:39:19.000Z","size":58,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T09:46:38.743Z","etag":null,"topics":["es5","es6","framework","javascript","micro-framework"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gpslab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-26T14:22:54.000Z","updated_at":"2023-04-11T15:19:49.000Z","dependencies_parsed_at":"2022-08-31T22:11:02.118Z","dependency_job_id":null,"html_url":"https://github.com/gpslab/gpslab-controller","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpslab%2Fgpslab-controller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpslab%2Fgpslab-controller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpslab%2Fgpslab-controller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gpslab%2Fgpslab-controller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gpslab","download_url":"https://codeload.github.com/gpslab/gpslab-controller/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248074598,"owners_count":21043486,"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":["es5","es6","framework","javascript","micro-framework"],"created_at":"2024-12-23T12:33:57.896Z","updated_at":"2025-04-09T16:55:46.193Z","avatar_url":"https://github.com/gpslab.png","language":"JavaScript","readme":"Controller\n==========\n\n[![NPM](https://nodei.co/npm/gpslab-controller.png?downloads=true\u0026stars=true)](https://nodei.co/npm/gpslab-controller/)\n\nGpsLab Controller is a JavaScript micro framework. This framework allow to dynamic bind some controls to DOM elements.\n\nController find elements with attribute `data-control` and bind controls to this elements by control name from value\nof `data-control` attribute. For example, you can bind [the jQuery datepicker](https://jqueryui.com/datepicker/) to\nall date input tags and all input tags that will be added later. See the [Usage](#usage) section for more examples.\n\n## Installation\n\nInstall from [NPM](https://nodei.co/npm/gpslab-controller/):\n\n```\n$ npm install gpslab-controller\n```\n\nOr download the script [here](https://github.com/gpslab/gpslab-controller/blob/master/dist/controller.min.js) and include it (unless you are packaging scripts somehow else):\n\n```html\n\u003cscript src=\"/path/to/controller.js\"\u003e\u003c/script\u003e\n```\n\nOr include it via [jsDelivr CDN](https://www.jsdelivr.com/package/npm/gpslab-controller):\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/gpslab-controller@2/dist/controller.min.js\"\u003e\u003c/script\u003e\n```\n\n## ECMAScript 2016\n\nThis framework is written for ECMAScript 2016, but you can use the recompiled version for\n[ECMAScript 2015](dist/controller.es2015.min.js).\n\n## Methods\n\nThe library exposes these methods: `register()`, `registerControl()`, `registerControls()`, `singleBind()`, `bind()`.\n\n### Controller.register\n\nBind all controls for all elements after content loaded.\n\n* * *\n\n### Controller.registerControl\n\nRegister control by name.\n\n#### Arguments\n\n1. `name` (**string**) Control name\n2. `control` (**Function**) Control function\n\n#### Returns\n\n**boolean** : True, if the control is successfully registered.\n\n* * *\n\n### Controller.registerControls\n\nRegister multiple controls at the same time.\n\n#### Arguments\n\n1. `controls` (**Object.\u003cstring, Function\u003e**) The list of controls whose keys are the names of the controls, and the values ​​are controls.\n\n#### Returns\n\n**boolean** : True, if all controls is successfully registered.\n\n* * *\n\n### Controller.singleBind\n\nBinding the control for single specific element.\n\n#### Arguments\n\n1. `element` (**Element**) Element for binding.\n\n#### Returns\n\n**boolean** : True, if successfully binding the controls.\n\n* * *\n\n### Controller.bind\n\nFind the controls in element and children elements and binding it.\n\n#### Arguments\n\n1. `element` (**Element**) Element for binding.\n\n#### Returns\n\n**boolean** : True, if successfully binding the controls.\n\n## Usage\n\nCreate new control for bind [the jQuery datepicker](https://jqueryui.com/datepicker/) to input and register it in\ncontroller:\n\n```js\nController.registerControl('date-picker', element =\u003e $(element).datepicker({dateFormat: 'yy-mm-dd'}));\n\n// register Controller to find input and bind datepicker control to it\nController.register();\n```\n\nUse in HTML:\n\n```html\n\u003cform\u003e\n    \u003c!-- after document loaded Datepicker will be binded to this element --\u003e\n    \u003cinput type=\"date\" name=\"date\" data-control=\"date-picker\"\u003e\n    \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n### Binding new elements\n\nYou can bind controls for a new added elements:\n\n```js\nconst input = document.createElement('input');\ninput.setAttribute('type', 'date');\ninput.setAttribute('name', 'date');\ninput.setAttribute('data-control', 'date-picker');\n\n// add element to document first\n// sometimes controls incorrectly works if you binding them before add element to a document\ndocument.getElementById('my-form').appendChild(input);\n// binding the controls\nController.bind(input);\n// or you can single bind specific element if you know for sure that there are no nested controls\n//Controller.singleBind(input);\n```\n\n### Multi controls\n\nYou can bind several controls to one DOM element.\nUse spaces (` `) or commas (`,`) for separate control names in the `data` attribute.\n\n```html\n\u003cform\u003e\n    \u003c!-- set password and repeat it for sign up --\u003e\n    \u003cinput type=\"password\" name=\"password\" required=\"required\" data-control=\"show-password input-equal-to\" data-equal-to=\"#repeat_password\"\u003e\n    \u003cinput type=\"password\" name=\"repeat_password\" required=\"required\" data-control=\"show-password\" id=\"repeat_password\"\u003e\n    \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n```js\nController.registerControl('input-equal-to', element =\u003e {\n  const target = document.querySelectorAll(element.getAttribute('data-equal-to'));\n  // check that value of input element equal to value of target element\n});\nController.registerControl('show-password', element =\u003e {\n  // for example, you can add button for show password\n});\n\n// bind all controls for all elements\nController.register();\n```\n\n### Use classes for controls\n\nIt will be better create new classes for define control and encapsulate all logic in them:\n\n```js\nclass SomeControl {\n  constructor(element, dependency) {\n    this.element = element;\n    this.dependency = dependency;\n\n    this.element.onclick = () =\u003e this.onClick();\n  }\n\n  onClick() {\n    // do something...\n  }\n}\n\nController.registerControl('some', element =\u003e new SomeControl(element, dependency));\n```\n\n### Use data attributes\n\nOn mouse click to target element append to it new data input element and bind to it jQuery datepicker control:\n\n```js\nclass AppendControl {\n  constructor(element) {\n    this.element = element;\n    this.prototype_template = element.getAttribute('data-prototype').trim();\n\n    this.element.onclick = () =\u003e this.append();\n  }\n\n  append() {\n    // create element from HTML template\n    const template = document.createElement('template');\n    template.innerHTML = this.prototype_template;\n\n    Controller.bind(this.element.appendChild(template.firstChild));\n  }\n}\n\nController.registerControls({\n    'date-picker': element =\u003e $(element).datepicker({dateFormat: 'yy-mm-dd'}),\n    'append': element =\u003e new AppendControl(element),\n});\nController.register();\n```\n\nUse in HTML:\n\n```html\n\u003cbutton\n    type=\"button\"\n    data-control=\"append\"\n    data-prototype=\"\u003cinput type='date' name='date' data-control='date-picker'\u003e\"\n\u003eAppend\u003c/button\u003e\n```\n\n## Building\n\nFor contributors:\n\n* Run `npm install` to install all the dependencies.\n* Run `gulp`. The default task will build minify files.\n\nFor repo owners, after a code change:\n\n* Run `npm version` to tag the new release.\n* Run `npm login`, `npm publish` to release on npm.\n\n## License\n\nThis bundle is under the [MIT license](http://opensource.org/licenses/MIT). See the complete license in the file: LICENSE\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgpslab%2Fgpslab-controller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgpslab%2Fgpslab-controller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgpslab%2Fgpslab-controller/lists"}