https://aetp.ru/js/dropdown.js

1;(function (window, $, undefined) {
2
3    var pluginName = 'dropdown',
4        defaults = {
5            // Callbacks depends on dropdown container status
6            beforeOpen: '',
7            beforeClose: '',
8            onOpen: '',
9            onClose: '',
10            // Callback then clicking on dropdown item
11            clickItem: '',
12            // Active container class
13            activeClass:'active',
14            // Close container by clicking on <body> elem
15            closeOnBody: true,
16            // Will close dropdown container after click on one of item is triggered
17            closeOnItem: true
18        };
19
20    function Plugin( element, options ) {
21        this.element = element;
22        this.$el = $(element);
23        this.$toggle = $('.dropdown--toggle', this.$el);
24        this.$container = $('.dropdown--container', this.$el);
25        this.$arrow = $('.dropdown--arrow', this.$container);
26        this.toggleHeight = this.$toggle.outerHeight();
27        this.toggleWidth = this.$toggle.outerWidth();
28
29        this.options = $.extend( {}, defaults, this._options, this.$el.data());
30
31        this.isActive = false;
32        this._defaults = defaults;
33        this._options = options;
34        this._name = pluginName;
35
36        this.init();
37    }
38
39    Plugin.prototype = {
40        init: function () {
41            this.$toggle.on('mouseup', $.proxy(this.mouseUpToggle, this));
42            this.$toggle.on('click', $.proxy(this.click, this));
43            this.$toggle.on('blur', $.proxy(this.blur, this));
44            this.$container.on('mouseup', $.proxy(this.mouseUpContainer, this));
45            this.$container.on('click', '.dropdown--item', $.proxy(this.clickItem, this));
46            $('body').on('mouseup.dropdown', $.proxy(this.mouseUpBody, this));
47        },
48        /**
49         * Adds active classes to $toggle and $container,
50         * sets isActive status to true
51         */
52        show: function () {
53            if (this.options.beforeOpen) {
54                this.options.beforeOpen(this.$el);
55            }
56            this.$container
57                .addClass('active');
58
59            this.$toggle
60                .addClass(this.options.activeClass);
61
62
63            this.isActive = true;
64
65            this.$toggle.focus();
66
67            if (this.options.onOpen) {
68                this.options.onOpen(this.$el);
69            }
70        },
71        /**
72         * Removes active classes form elems
73         * adn sets isActive status to false
74         */
75        hide: function () {
76            if (this.options.beforeClose) {
77                this.options.beforeClose(this.$el);
78            }
79
80            this.$container
81                .removeClass('active');
82
83            this.$toggle
84                .removeClass(this.options.activeClass);
85
86            this.isActive = false;
87
88            if (this.options.onClose) {
89                this.options.onClose(this.$el);
90            }
91        },
92        /**
93         * Click on toggle
94         * @returns {boolean}
95         */
96        click: function (e) {
97            e.preventDefault();
98
99            if (!this.isActive) {
100                this.show();
101            } else {
102                this.hide();
103            }
104        },
105        /**
106         * Click on dropdown item
107         * @param {Event} e
108         */
109        clickItem: function (e) {
110            if (this.options.clickItem) {
111                this.options.clickItem($(this));
112            }
113        },
114        /**
115         * Prevents event bubbling for the case, then "closeOnBody" is true
116         * @param {Event} e
117         */
118        mouseUpContainer: function (e) {
119            if (!this.options.closeOnItem) {
120                e.stopPropagation();
121            }
122        },
123        /**
124         * Click on body
125         * @param {Event} e
126         */
127        mouseUpBody:function (e) {
128            console.log('mouseup');
129            if (this.options.closeOnBody && this.isActive) {
130                this.hide();
131            }
132        },
133        mouseUpToggle: function (e) {
134            if (this.isActive) {
135                e.stopPropagation();
136            }
137        }
138
139    };
140
141    $.fn[pluginName] = function ( options ) {
142        if (Plugin.prototype[options]) {
143            Plugin.prototype[options].apply(this.data('plugin-' + pluginName), Array.prototype.slice.call(arguments, 1));
144        } else {
145            return this.each(function () {
146                if (!$.data(this, 'plugin-' + pluginName)) {
147                    $.data(this, 'plugin-' + pluginName,
148                        new Plugin( this, options ));
149                } else {
150                    var _this = $.data(this, 'plugin-' + pluginName),
151                        oldOpts = _this.options;
152
153                    _this.options = $.extend({}, oldOpts, options);
154                }
155            });
156        }
157    };
158
159    jQuery(document).ready(function($) {
160       $('.dropdown').dropdown();
161    });

162
163})(window, jQuery);