jQuery-Clickout/jquery.clickout.js at master · alvir/jQuery-Clickout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/**
 * |-----------------|
 * | jQuery-Clickout |
 * |-----------------|
 *  jQuery-Clickout is freely distributable under the MIT license.
 *
 *  <a href="https://github.com/chalbert/Backbone-Elements">More details & documentation</a>
 *
 * @author Nicolas Gilbert
 *
 * @requires jQuery
 */

(function(factory){
  'use strict';

  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else {
    factory($);
  }

})(function ($){
  'use strict';

     /**
      * A static counter is tied to the doc element to track click-out registration
      * @static
      */
  var counter = 0,

     /**
      * On mobile Touch browsers, 'click' are not triggered on every element.
      * Touchstart is.
      * @static
      */
      click = window.Touch ? 'touchstart' : 'mousedown';


  /**
   * Shortcut for .on('clickout')
   *
   * @param data
   * @param fn
   */

  $.fn.clickout = function(data, fn) {
    if (!fn) {
      fn = data;
      data = null;
    }

    if (arguments.length > 0) {
      this.on('clickout', data, fn);
    } else {
      return this.trigger('clickout');
    }

  };

  /**
   * Implements the 'special' jQuery event interface
   * Native way to add non-conventional events
   */
  jQuery.event.special.clickout = {

    /**
     * When the event is added
     * @param handleObj Event handler
     */

    add: function(handleObj){
      counter++;

      // Add counter to element
      var target = handleObj.selector
          ? $(this).find(handleObj.selector)
          : $(this);

      // When the click is inside, extend the Event object to mark it as so
      $(this).on(click + '.clickout' + counter, handleObj.selector, (function(id){
        return function(e){
          e.originalEvent.clickin = id;
        };
      })(counter));

      // Bind a click event to the document, to be cought after bubbling
      $(document).bind(click + '.clickout' + counter, (function(id){
      // A closure is used create a static id
        return function(e){
          // If the click is not inside the element, call the callback
          if (!(e.originalEvent.clickin && e.originalEvent.clickin == id) && $(handleObj.selector ? handleObj.selector : target).is(":visible")) {
            handleObj.handler.apply(target, arguments);
          }
        };
      })(counter));
    },

    /**
     * When the event is removed
     * @param handleObj Event handler
     */
    remove: function(handleObj) {
      var $this = $(this);
      var target = handleObj.selector
          ? $this.find(handleObj.selector)
          : $this;


      $.each(target,
        function (i, element) {
          $.map($._data(element, "events")['mousedown'],
            function (event) {
              if(event.namespace && event.namespace.indexOf('clickout') == 0) {
                var eventname = event.type + "." + event.namespace;
                $(document).unbind(eventname);
                $this.off(eventname, handleObj.selector);
              }
            }
          );
        }
      );

      return false;
    }
  };

  return $;

});