{"id":19346342,"url":"https://github.com/canjs/can-control-modifier","last_synced_at":"2025-04-23T04:36:53.620Z","repository":{"id":30975743,"uuid":"34533991","full_name":"canjs/can-control-modifier","owner":"canjs","description":"Control action modifiers","archived":false,"fork":false,"pushed_at":"2019-05-10T17:43:12.000Z","size":43,"stargazers_count":3,"open_issues_count":3,"forks_count":1,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-10T09:08:12.771Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/can-control-modifier","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/canjs.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":"2015-04-24T18:08:54.000Z","updated_at":"2019-03-02T18:51:07.000Z","dependencies_parsed_at":"2022-09-15T22:20:45.139Z","dependency_job_id":null,"html_url":"https://github.com/canjs/can-control-modifier","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canjs%2Fcan-control-modifier","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canjs%2Fcan-control-modifier/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canjs%2Fcan-control-modifier/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canjs%2Fcan-control-modifier/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/canjs","download_url":"https://codeload.github.com/canjs/can-control-modifier/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250372530,"owners_count":21419719,"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":[],"created_at":"2024-11-10T04:09:41.674Z","updated_at":"2025-04-23T04:36:53.301Z","avatar_url":"https://github.com/canjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# can-control-modifier\n\n_\\*This plugin is experimental and not **official** or **supported**\\*_\n\n\nThe can-control-modifier plugin, allows you to augment methods and event callbacks declaritivly. This is most commonly used in conjunction with the [can-util-function plugin](https://github.com/canjs/can-util-function) to debounce, throttle and defer method or event callbacks:\n\n```javascript\nvar can = require('can');\nrequire('can-control-modifier'); // augments can.Control\nrequire('can-util-function'); // augments can itself\n\nvar MyControl = can.Control.extend({\n\n}, {\n    'search:debounce(100)': function(searchTerm) {\n        applySearch(searchTerm);\n    },\n    'button click:throttle(30)': function(el, ev) {\n        selectElement(el);\n    }\n});\n```\n\n...but can also be used in clever ways like the modifier/key plugin (packaged with this plugin) which allows you to easily bind keyboard events to your controls in a nice easy to read way:\n\n```javascript\nvar KeyboardControl = can.Control.extend({\n    'keyup:(arrow-up)': function (el, ev) {\n        moveUp();\n    },\n    'keydown:(shift+p)': function (el, ev) {\n        log('shift key and p: event pressed!');\n    }\n});\n```\n\n## API\n\nAfter the method name, or event name, add `:` + **the method name** + `({value to pass to the method})`.\n\n```javascript\n'element eventname:debounce(100)': function() {},\n'method:throttle(50)': function() {},\n\n```\n\nThe method name provided will be searched for in the following order:\n\n1. on the **options** object passed into the control on instatiation\n2. on the **can** framework object (which in many cases is augmented by the [can-util-function plugin](https://github.com/canjs/can-util-function) or other plugins)\n3. on the **window** or **global** object\n\nSo you can either pass the method in with the options, provide it in defaults, extend **can** itself, or have the method globally available.\n\n-------------------\n\n\nLicensing\n---------\n\n  MIT - Please see the file called LICENSE.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanjs%2Fcan-control-modifier","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanjs%2Fcan-control-modifier","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanjs%2Fcan-control-modifier/lists"}