{"id":21156029,"url":"https://github.com/itsmunim/md-out-click","last_synced_at":"2025-07-09T12:32:12.728Z","repository":{"id":57293339,"uuid":"120200880","full_name":"itsmunim/md-out-click","owner":"itsmunim","description":"Define click handlers for clicks outside a specified element","archived":false,"fork":false,"pushed_at":"2018-03-26T10:13:20.000Z","size":246,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T15:21:15.410Z","etag":null,"topics":["angular","click","element","handler","javascript","npm-package","outside","region"],"latest_commit_sha":null,"homepage":"","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/itsmunim.png","metadata":{"files":{"readme":"ReadMe.md","changelog":"CHANGELOG.md","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":"2018-02-04T16:14:25.000Z","updated_at":"2019-07-23T08:40:14.000Z","dependencies_parsed_at":"2022-08-27T12:21:20.981Z","dependency_job_id":null,"html_url":"https://github.com/itsmunim/md-out-click","commit_stats":null,"previous_names":["itsmunim/md-out-click","dibosh/md-out-click"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmunim%2Fmd-out-click","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmunim%2Fmd-out-click/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmunim%2Fmd-out-click/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmunim%2Fmd-out-click/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsmunim","download_url":"https://codeload.github.com/itsmunim/md-out-click/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225539977,"owners_count":17485425,"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":["angular","click","element","handler","javascript","npm-package","outside","region"],"created_at":"2024-11-20T11:34:33.939Z","updated_at":"2024-11-20T11:34:34.513Z","avatar_url":"https://github.com/itsmunim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![mdOutClick Logo](https://raw.githubusercontent.com/dibosh/md-out-click/master/readme-logo.jpg)\n\n[![Build Status](https://travis-ci.org/dibosh/md-out-click.svg?branch=master)](https://travis-ci.org/dibosh/md-out-click)\n[![npm version](https://badge.fury.io/js/md-out-click.svg)](https://badge.fury.io/js/md-out-click)\n[![codecov](https://codecov.io/gh/dibosh/md-out-click/branch/master/graph/badge.svg)](https://codecov.io/gh/dibosh/md-out-click)\n[![all downloads](https://img.shields.io/npm/dt/md-out-click.svg)]()\n\n[mdOutClick](https://dibosh.github.io/md-out-click) is an AngularJS module, having a directive `on-out-click` \nand a service `OutClickService`; which enables you to capture click events outside of an element and fire handlers \nbased on that.\n\nExample- `\u003cbutton ng-click=\"doSomething()\" on-out-click=\"doSomethingElse()\"\u003e\u003c/button`\n\n### Installation\n- `npm install md-out-click`\n- **Webpack**:\n  1. Import the module in your `index.js` or `entry.js` file, import the module\n  right after where you imported `angular`\n    - `import mdOutClick from 'mdOutClick'` (ES6)\n    - `require('mdOutClick')` (ES5)\n    \n  2. Where you define your angular app, include `mdOutClick` as dependency.\n \n  ```\n  angular.module('yourApp', [\n     ...\n     // other dependencies\n     ...\n     'mdOutClick'\n  ]);\n  ```   \n    \n- **Legacy Way**:\n\n  1. Include the `md.out.click.min.js` file as script tag in between angular source\n  and your app specific script files.\n  \n  ```\n    ...\n    \u003cscript src=\"node_modules/angular/angular.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"node_modules/md-out-click/dist/md.out.click.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"app/app.index.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"app/controllers/index.js\"\u003e\u003c/script\u003e\n    ...\n  \u003c/body\u003e\n  ```\n  \n  2. In your `index.js` or `script.js` file where you define your angular app,\n  include `mdOutClick` as dependency.\n  \n  ```\n  angular.module('yourApp', [\n     ...\n     // other dependencies\n     ...\n     'mdOutClick'\n  ]);\n  ```\n\n### Usage\nDefine a handler or action on `on-out-click` attribute of an element. The handler\ncan be any valid Javascript expression.\n   ```\n   \u003caside class=\"sidenav\" ng-class=\"{'open': isSideNavOpen}\" on-out-click=\"closeSideNav()\"\u003e\u003c/aside\u003e\n   ```\nOr, this is also do-able-\n   ```\n   \u003caside class=\"sidenav\" ng-class=\"{'open': isSideNavOpen}\" on-out-click=\"isSideNavOpen = false\"\u003e\u003c/aside\u003e\n   ```\nUsing the `OutClickService`, you can apply different handlers for different `element` at the same time-\n\n  ```\n  // needs jquery support to get element like this\n  var elem1 = $document.find('#e1');\n  var elem2 = $document.find('#e2');\n  \n  OutClickService.register(elem1, function () {\n    // do something when click is outside elem1\n  });\n  \n  OutClickService.register(elem2, function () {\n    // do something when click is outside elem2\n  });\n  \n  ```\n\nTo learn more, check out the examples at - https://dibosh.github.io/md-out-click\n\n### The MIT License\n\nCopyright 2018 Munim Dibosh\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this \nsoftware and associated documentation files (the \"Software\"), to deal in the Software \nwithout restriction, including without limitation the rights to use, copy, modify, \nmerge, publish, distribute, sublicense, and/or sell copies of the Software, and to \npermit persons to whom the Software is furnished to do so, subject to the following \nconditions:\n\nThe above copyright notice and this permission notice shall be included in all copies \nor substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, \nINCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A \nPARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT \nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF \nCONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE \nOR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsmunim%2Fmd-out-click","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsmunim%2Fmd-out-click","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsmunim%2Fmd-out-click/lists"}