├── .npmignore ├── .env ├── .travis.yml ├── karma.conf.js ├── .gitignore ├── gulpfile.js ├── dist ├── jquery-clickout.min.js └── jquery-clickout.min.js.map ├── src └── jquery-clickout.js ├── package.json ├── karma.sauce.conf.js ├── karma.base.conf.js ├── README.md └── test └── clickout.test.js /.npmignore: -------------------------------------------------------------------------------- 1 | .env 2 | .travis.yml 3 | test/ 4 | karma* 5 | gulpfile.js 6 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | SAUCE_USERNAME=YOUR_SAUCE_USERNAME 2 | SAUCE_ACCESS_KEY=YOUR_SAUCE_ACCESS_KEY 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "stable" 4 | after_script: 5 | - "npm run sauce-all" 6 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | 3 | var baseConf = require('./karma.base.conf') 4 | 5 | module.exports = function(config) { 6 | config.set(baseConf(config)) 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directories 27 | node_modules 28 | jspm_packages 29 | 30 | # Optional npm cache directory 31 | .npm 32 | 33 | # Optional REPL history 34 | .node_repl_history 35 | 36 | # Demo file 37 | demo.html -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp') 2 | var browserify = require('browserify') 3 | var source = require('vinyl-source-stream') 4 | var buffer = require('vinyl-buffer') 5 | var uglify = require('gulp-uglify') 6 | var sourcemaps = require('gulp-sourcemaps') 7 | var gutil = require('gulp-util') 8 | var dependify = require('dependify') 9 | 10 | gulp.task('js', function () { 11 | // set up the browserify instance on a task basis 12 | var b = browserify({ 13 | entries: './src/jquery-clickout.js', 14 | debug: true 15 | }) 16 | .plugin(dependify, { 17 | name: 'jQueryClickout', 18 | deps: { 19 | jquery: 'jQuery' 20 | } 21 | }) 22 | 23 | return b.bundle() 24 | .pipe(source('jquery-clickout.min.js')) 25 | .pipe(buffer()) 26 | .pipe(sourcemaps.init({loadMaps: true})) 27 | // Add transformation tasks to the pipeline here. 28 | .pipe(uglify()) 29 | .on('error', gutil.log) 30 | .pipe(sourcemaps.write('./')) 31 | .pipe(gulp.dest('./dist/')) 32 | }) 33 | -------------------------------------------------------------------------------- /dist/jquery-clickout.min.js: -------------------------------------------------------------------------------- 1 | !function(e,n){var t="function"==typeof require?require:function(e){return{jquery:jQuery}[e]};"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(t):"function"==typeof define&&define.amd?define(["jquery"],n.bind(e,t)):e.jQueryClickout=n(t)}(this,function(e,n,t,r){return function o(n,t,r){function u(c,f){if(!t[c]){if(!n[c]){var l="function"==typeof e&&e;if(!f&&l)return l(c,!0);if(i)return i(c,!0);var a=new Error("Cannot find module '"+c+"'");throw a.code="MODULE_NOT_FOUND",a}var d=t[c]={exports:{}};n[c][0].call(d.exports,function(e){var t=n[c][1][e];return u(t?t:e)},d,d.exports,o,n,t,r)}return t[c].exports}for(var i="function"==typeof e&&e,c=0;c 10 | 11 | Sauce Test Status 12 | 13 |

14 | 15 | jQuery plugin for handle outside clicks. It doesn't stop event propagation 16 | nor prevents default events. 17 | 18 | It extends the jQuery Events and adds a new custom event: `clickout`. 19 | 20 | You can use it normally with `on` and `off` methods: 21 | 22 | ```js 23 | // Add a clickout listener 24 | $('button').on('clickout', function (e) { 25 | console.log('click outside button') 26 | }) 27 | 28 | // Remove a clickout listener 29 | $('button').off('clickout') 30 | ``` 31 | 32 | The coolest feature is the multiple elements support: 33 | 34 | ```js 35 | $('.js-button, .js-menu').on('clickout', function (e) { 36 | console.log('click outside `js-button` and `js-menu`') 37 | this.addClass('is-hidden') // now both $button and $menu have `is-hidden` class 38 | }) 39 | 40 | 41 | $button.add($menu).on('clickout', function () { 42 | console.log('click outside `js-button` and `js-menu`') 43 | this.addClass('is-hidden') // now both $button and $menu have `is-hidden` class 44 | }) 45 | ``` 46 | 47 | ## Installation 48 | 49 | ```npm install jquery-clickout --save``` 50 | 51 | Or just copy `jquery-clickout.min.js` from this repository, in the `dist` 52 | folder. 53 | 54 | ## Usage 55 | 56 | Just use `clickout` like a normal event. Very very easy: 57 | 58 | ```javascript 59 | $('.my-element').on('clickout', function (e) { 60 | console.log('Outside element click') 61 | console.log(this) // jQuery instance of `.my-element` 62 | }) 63 | ``` 64 | -------------------------------------------------------------------------------- /test/clickout.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Dependencies. 3 | */ 4 | 5 | var $ = require('jquery') 6 | require('../src/jquery-clickout') 7 | 8 | describe('jQuery Clickout', function () { 9 | it('should add `clickout` special event', function () { 10 | expect($.event.special.clickout).not.toBeNull() 11 | }) 12 | 13 | it('should listen to `clickout` event', function () { 14 | 15 | var $button = $('