https://pizzadrive.fi/food1/js/cat_nav_mobile.js

1/*
2MOBILE SELECT MENU
3 */
4
5(function ($) {
6    //variable for storing the menu count when no ID is present
7    var menuCount = 0;
8
9    //plugin code
10    $.fn.mobileMenu = function (options) {
11
12        //plugin's default options
13        var settings = {
14            switchWidth: 767,
15            topOptionText: filter_by_mobile,
16            indentString: '   '
17        };
18
19
20        //function to check if selector matches a list
21        function isList($this) {
22            return $this.is('ul, ol');
23        }
24
25
26        //function to decide if mobile or not
27        function isMobile() {
28            return ($(window).width() < settings.switchWidth);
29        }
30
31
32        //check if dropdown exists for the current element
33        function menuExists($this) {
34
35            //if the list has an ID, use it to give the menu an ID
36            if ($this.attr('id')) {
37                return ($('#mobileMenu_' + $this.attr('id')).length > 0);
38            }
39
40            //otherwise, give the list and select elements a generated ID
41            else {
42                menuCount++;
43                $this.attr('id', 'mm' + menuCount);
44                return ($('#mobileMenu_mm' + menuCount).length > 0);
45            }
46        }
47
48
49        //change page on mobile menu selection
50        function goToPage($this) {
51            if ($this.val() !== null) {
52                document.location.href = $this.val()
53            }
54        }
55
56
57        //show the mobile menu
58        function showMenu($this) {
59            $this.css('display', 'none');
60            $('#mobileMenu_' + $this.attr('id')).show();
61        }
62
63
64        //hide the mobile menu
65        function hideMenu($this) {
66            $this.css('display', '');
67            $('#mobileMenu_' + $this.attr('id')).hide();
68        }
69
70
71        //create the mobile menu
72        function createMenu($this) {
73            if (isList($this)) {
74
75                //generate select element as a string to append via jQuery
76                var selectString = '<div class="styled-select-cat"><select id="mobileMenu_' + $this.attr('id') + '" class="mobileMenu">';
77
78                //create first option (no value)
79                selectString += '<option value="">

79' + settings.topOptionText + '</option>';
80
81                //loop through list items
82                $this.find('li').each(function () {
83
84                    //when sub-item, indent
85                    var levelStr = '';
86                    var len = $(this).parents('ul, ol').length;
87                    for (i = 1; i < len; i++) {
88                        levelStr += settings.indentString;
89                    }
90
91                    //get url and text for option
92                    var link = $(this).find('a:first-child').attr('href');
93                    var text = levelStr + $(this).clone().children('ul, ol').remove().end().text();
94
95                    //add option
96                    selectString += '<option value="' + link + '">' + text + '</option>';
97                });
98
99                selectString += '</select></div>';
100
101                //append select element to ul/ol's container
102                $this.parent().append(selectString);
103
104                //add change event handler for mobile menu
105                $('#mobileMenu_' + $this.attr('id')).change(function () {
106                    goToPage($(this));
107                });
108
109                //hide current menu, show mobile menu
110                showMenu($this);
111            } else {
112                alert('mobileMenu will only work with UL or OL elements!');
113            }
114        }
115
116
117        //plugin functionality
118        function run($this) {
119
120            //menu doesn't exist
121            if (isMobile() && !menuExists($this)) {
122                createMenu($this);
123            }
124
125            //menu already exists
126            else if (isMobile() && menuExists($this)) {
127                showMenu($this);
128            }
129
130            //not mobile browser
131            else if (!isMobile() && menuExists($this)) {
132                hideMenu($this);
133            }
134
135        }
136
137        //run plugin on each matched ul/ol
138        //maintain chainability by returning "this"
139        return this.each(function () {
140
141            //override the default settings if user provides some
142            if (options) {
143                $.extend(settings, options);
144            }
145
146            //cache "this"
147            var $this = $(this);
148
149            //bind event to browser resize
150            $(window).resize(function () {
151                run($this);
152            });
153
154            //run plugin
155            run($this);
156
157        });
158
159    };
160
161})(jQuery);