{"id":21277943,"url":"https://github.com/b13/breakpointlistener","last_synced_at":"2025-03-15T13:25:39.636Z","repository":{"id":20039361,"uuid":"23307545","full_name":"b13/breakpointlistener","owner":"b13","description":null,"archived":false,"fork":false,"pushed_at":"2015-08-24T15:09:37.000Z","size":348,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-09T23:38:55.902Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"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/b13.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}},"created_at":"2014-08-25T08:46:42.000Z","updated_at":"2015-04-07T13:24:59.000Z","dependencies_parsed_at":"2022-08-27T03:17:54.130Z","dependency_job_id":null,"html_url":"https://github.com/b13/breakpointlistener","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fbreakpointlistener","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fbreakpointlistener/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fbreakpointlistener/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/b13%2Fbreakpointlistener/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/b13","download_url":"https://codeload.github.com/b13/breakpointlistener/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243734438,"owners_count":20339292,"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-21T10:08:20.485Z","updated_at":"2025-03-15T13:25:39.589Z","avatar_url":"https://github.com/b13.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Breakpoint Listener\n===================\n\nIntroduction\n------------\n\nThe breakpointListener is a small tool to listen to breakpoint changes in JS code in a resource economic way. Its \npurpose is to register handlers that will be called on breakpoint changes.\n\n### Initialization with AMD\n\n\trequire(['breakpointlistener'], function(BPL){\n\t\tvar BreakpointListener = new BPL({\n\t\t\tbreakpoints: {\n\t\t\t\t\"xs\": 0,\n\t\t\t\t\"sm\": 480,\n\t\t\t\t\"md\": 768,\n\t\t\t\t\"lg\": 1024\n\t\t\t}\n\t\t});\n\t});\n\t\nSimply load the breakpoint listener as AMD module and create new instances of it. It is required to define the \nbreakpoints like in the following example, but it is not required to define 4 breakpoints you could define any number of \nbreakpoints that is bigger than 1. You could chose any name you want for the breakpoints, but it is recommended to use\nthe commonly used identifiers xs, sm, md and lg.\n\n### Getting the current breakpoint\n\t\n\tBreakpointListener.getCurrentBreakpoint();\n\nReturns a string representation of the current breakpoint. \n\n\n### Binding breakpoint change handlers\n\n\tBreakpointListener.onChangeBreakpoint(function(evt){\n\t\tswitch(evt.currentBreakpoint){\n\t\t\tcase \"xs\":\n\t\t\t\tif(evt.lastBreakpoint === \"sm\"){\n\t\t\t\t\t. . .\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase \"sm\":\n\t\t\t\t. . .\n\t\t\t\tbreak;\n\t\t\tcase \"md\":\n\t\t\t\t. . .\n\t\t\t\tbreak;\n\t\t\tcase \"lg\":\n\t\t\t\t. . .\n\t\t\t\tbreak;\n\t\t}\n\t\t\n\t\t. . .\n\t});\n\nregisterBreakpointHandler(handler); is equivalent to onChangeBreakpoint(handler);\n\n\tBreakpointListener.registerBreakpointHandler(function(evt){\n\t\t. . .\n\t});\n\nSimply register callbacks to listen to breakpoint changes. The callback will receive an evt parameter, that contains:\n- currentBreakpoint\t// The breakpoint that is now active\n- lastBreakpoint\t// The breakpoint that was active before the breakpoint change\n- timestamp\t\t\t// Time when the change occurred\n\nFunctions\n---------\n\nFunction name | Return value | Description\n------------- | ------------ | -----------\ngetCurrentBreakpoint() | String | Returns the current breakpoint. Possible values are: 'xs', 'sm', 'md', 'lg'\ngetCssViewPortHeight() | number | Returns the height of the viewport. This value corresponds to the height value that is used in css media queries.\ngetCssViewPortWidth() | number | Returns the width of the viewport. This value corresponds to the width value that is used in css media queries. \noffChangeBreakpoint(function:handlerFunction) | function/undefined | Same as unregisterBreakpointHandler(function:handlerFunction). Unbinds the given handler from the onChangeBreakpoint event and returns it, if it was bound before. \nonChangeBreakpoint(function:handlerFunction) | function | Same as registerBreakpointHandler(function:handlerFunction). Binds the given handler to the onChangeBreakpoint event and returns it. \nregisterBreakpointHandler(function:handlerFunction) | function | Binds the given handler to the onChangeBreakpoint event and returns it.\nunregisterBreakpointHandler(function:handlerFunction) | function/undefined | Unbinds the given handler from the onChangeBreakpoint event and returns it, if it was bound before.\nupdateBreakpoint(boolean:preventEvent) | String | Forces the breakpoint handler to update the breakpoint value and and to trigger the onChangeBreakpoint event if the breakpoint changed and if the given preventEvent argument is false.\n\t","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13%2Fbreakpointlistener","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fb13%2Fbreakpointlistener","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fb13%2Fbreakpointlistener/lists"}