https://effecton.ru/theme/js/jquery_005.js

1/*
2 * Author: Evgeniy Gusarov StMechanus (Diversant)
3 * Under the MIT License
4 *
5 * Version: 1.0.1
6 *
7 */
8
9
10;
11(function ($) {
12
13    var settings = {
14            cntClass: 'rd-mobilemenu',
15            menuClass: 'rd-mobilemenu_ul',
16            submenuClass: 'rd-mobilemenu_submenu',
17            panelClass: 'rd-mobilepanel',
18            toggleClass: 'rd-mobilepanel_toggle',
19            titleClass: 'rd-mobilepanel_title'
20        },
21        lastY, dir;
22
23
24    var RDMobileMenu = function (element, options) {
25        this.options = options;
26
27        this.$source = $(element);
28    };
29
30    RDMobileMenu.prototype = {
31        init: function () {
32            var nav = this;
33            nav.createDOM();
34            nav.createListeners();
35        },
36
37        createDOM: function () {
38            var nav = this;
39
40            $('body')
41                .append($('<div/>', {
42                    'class': settings.cntClass
43                }).append(nav.createNavDOM()))
44                .append($('<div/>', {
45                    'class': settings.panelClass
46                })
47                    .append($('<button/>', {
48                        'class': settings.toggleClass
49                    }).append($('<span/>')))
50                    .append($('<h2/>', {
51                        'class': settings.titleClass,
52                        //'text': document.title
53                        // 'text': '8 (800) 555-0-558'
54                        'html': '<div class="brand"><a href="/"><img src="theme/images/logo.png"></a></div><img src="/theme/16+.png" class="icon-age"><a class="link_phone" href="tel:88005550558">8-800-555-0-558</a>'
55                    })));
56        },
57
58        createNavDOM: function () {
59            var nav = this;
60
61            var menu = $('<ul>', {'class': settings.menuClass});
62
63            var li = nav.$source.children();
64            for (var i = 0; i < li.length; i++) {
65                var o = li[i].children,
66                    item = null;
67                for (var j = 0; j < o.length; j++) {
68                    if (o[j].tagName) {
69                        if (!item) {
70                            item = document.createElement('li');
71                            if (li[i].className.indexOf('active') > -1) {
72                                item.className = 'active';
73                            }
74                        }
75
76                        switch (o[j].tagName.toLowerCase()) {
77                            case 'a':
78                                var link = o[j].cloneNode(true);
79                                item.appendChild(link);
80                                break;
81                            case 'ul':
82                                var submenu = o[j].cloneNode(true);
83                                submenu.className = settings.submenuClass;
84                                $(submenu).css({"display": "none"});
85                                item.appendChild(submenu);
86                                $(item).find('> a')
87                                    .each(function () {
88                                        $this = $(this);
89                                        $this.addClass('rd-with-ul')
90                                            .append($('<span/>', {class: 'rd-submenu-toggle'}))
91                                            .find('.rd-submenu-toggle')
92                                            .on('click', function (e) {
93                                                e.preventDefault();
94                                                $this = $(this).parent();
95
96                                                if ($this.hasClass('rd-with-ul') && !$this.hasClass('active')) {
97                                                    $('.rd-with-ul').removeClass('active');
98                                                    var submenu = $this.addClass('active').parent().find('.' + settings.submenuClass);
99                                                    submenu.stop().slideDown();
100                                                    $('.' + settings.submenuClass).not(submenu).stop().slideUp();
101                                                } else {
102                                                    var submenu = $this.removeClass('active').parent().find('.' + settings.submenuClass);
103                                                    submenu.stop().slideUp();
104                                                }
105                                            });
106                                    });
107
108                                break;
109                            default:
110                                break;
111                        }
112                    }
113                }
114
115                if (item) {
116                    menu.append(item);
117                }
118            }
119
120            return menu;
121        },
122
123        createListeners: function () {
124            var nav = this;
125
126            nav.createToggleListener();
127            nav.createResizeListener();
128        },
129
130        createToggleListener: function () {
131            var nav = this,
132                type;
133
134            if (nav.isMobile()){
135                type = 'touchstart';
136            }else{
137                type = 'click';
138            }
139
140            $('body').delegate('.' + settings.toggleClass, type, function () {
141                var o = $('.' + settings.cntClass);
142                $(this).toggleClass('active');
143
144                if (o.hasClass('active')) {
145                    $(this).removeClass('active');
146                    o.removeClass('active');
147                    $('body').undelegate('*', 'mousewheel', nav.scroll);
148                    $('body').undelegate('*', 'touchmove', nav.scroll);
149                    $('body').undelegate('*', 'touchend', nav.touchend);
150                    $('body').undelegate('*', 'touchstart', nav.close);
151                    $('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
152                } else {
153                    $(this).addClass('active');
154                    o.addClass('active');
155                    $('body').delegate('*', 'mousewheel', nav.scroll);
156                    $('body').delegate('*', 'touchmove', nav.scroll);
157                    $('body').delegate('*', 'touchend', nav.touchend);
158                    $('body').delegate('*', 'touchstart', {type: type}, nav.close);
159                    $('body').delegate('*:not(.' + settings.toggleClass + ' span)', 'click', {type: type}, nav.close);
160                }
161            });
162        },
163
164        createResizeListener: function () {
165            var nav = this;
166
167            $(window).on('resize', function () {
168                var o = $('.' + settings.cntClass);
169
170                if (o.css('display') == 'none') {
171                    o.removeClass('active');
172                    $('.' + settings.toggleClass).removeClass('active');
173                    $('body').undelegate('*', 'mousewheel', nav.scroll);
174                    $('body').undelegate('*', 'touchmove', nav.scroll);
175                    $('body').undelegate('*', 'touchend', nav.touchend);
176                    $('body').undelegate('*', 'touchstart', nav.close);
177                    $('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
178                }
179            });
180        },
181
182        scroll: function (e) {
183            e.preventDefault();
184            var menu = $('.' + settings.menuClass);
185
186            var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
187                y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
188
189            if (
190                y > menu.offset().top &&
191                y < (menu.offset().top + menu.outerHeight()) &&
192                x > menu.offset().left &&
193                x < (menu.offset().left + menu.outerWidth())
194            ) {
195                var delta = 0;
196                if (e.originalEvent.targetTouches) {
197                    if (!lastY) lastY = y;
198                    delta = (lastY - y);
199
200                    lastY = y;
201                    dir = delta > 0;
202
203                } else {
204                    delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail) * (-50)
205                }
206
207                menu.stop().scrollTop(menu.scrollTop() + delta);
208            }
209            return false;

210        },
211
212        touchend: function (e) {
213            var menu = $('.' + settings.menuClass);
214
215            menu.stop().animate({
216                scrollTop: menu.scrollTop() + (dir ? 100 : -100)
217            }, 3000, 'easeOutQuint');
218            lastY = undefined;
219        },
220
221        close: function (e) {
222            if (!e.originalEvent) {
223                return;
224            }
225
226            var menu = $('.' + settings.menuClass);
227            var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
228                y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
229
230            if (!(
231                y > menu.offset().top &&
232                y < (menu.offset().top + menu.outerHeight()) &&
233                x > menu.offset().left &&
234                x < (menu.offset().left + menu.outerWidth())
235                )
236            ) {
237                $('.' + settings.toggleClass).trigger(e.data.type);
238            }
239        },
240
241        isMobile: function () {
242            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
243        }
244    };
245
246    $.fn.rdparallax = function (option) {
247        var o = this;
248        if (o.length) {
249            new RDMobileMenu(o[0]).init();
250        }
251        return o;
252    };
253
254    window.RDMobilemenu_autoinit = function (selector) {
255        var o = $(selector);
256        if (o.length) {
257            new RDMobileMenu(o[0]).init();
258        }
259    };
260})(jQuery);
261
262$(document).ready(function () {
263    RDMobilemenu_autoinit('[data-type="navbar-menu"]');
264});