https://empirecafe.com/wp-content/themes/empire-cafe/assets/js/scripts.js?ver=1.1

1jQuery(document).ready(function($) {
2
3  /////////////////////////////////////////
4  // Scroll to the desired section on click
5  function scrollToSection(event) {
6    event.preventDefault();
7
8    var $section = $($(this).attr('href'));
9
10    $('html, body').animate({
11      scrollTop: $section.offset().top - 52
12    }, 500);
13  }
14
15  $('.scroll-to-section').on('click', scrollToSection);
16
17
18  // Close menu category nav when the user clicks an option (mobile)
19  $('.food-menu .scroll-to-section').on('click', function() {
20    var $nav = $('.js--main-nav');
21    var $icon = $('.js--nav-icon i')
22
23    if ($icon.hasClass('fa-bars')) {
24      $icon.addClass('fa-times');
25      $icon.removeClass('fa-bars');
26    }
27    else {
28      $icon.addClass('fa-bars');
29      $icon.removeClass('fa-times');
30    }
31
32    $nav.slideUp(200);
33  });
34
35  ///////////////////////
36  // Mobile food menu nav
37  function mobileNav(event) {
38    event.preventDefault();
39
40    var $nav = $('.js--main-nav')
41    var $icon = $('.js--nav-icon i')
42
43    $nav.slideToggle(200);
44
45    if ($icon.hasClass('fa-bars')) {
46      $icon.addClass('fa-times');
47      $icon.removeClass('fa-bars');
48    }
49    else {
50      $icon.addClass('fa-bars');
51      $icon.removeClass('fa-times');
52    }
53  }
54
55  $('.js--nav-icon').on('click', mobileNav);
56
57  /////////////////////////////////
58  // Hide/show Breakfast and Dinner
59  function showMeals() {
60    // Start off by showing Breakfast
61    $('[data-show-for="breakfast"]').show();
62    $('[data-show-for="dinner"]').hide();
63
64    // Our buttons
65    var $button = $('[data-target]');
66
67    function targetMeals(event) {
68      event.preventDefault();
69      var meal = $(this).attr('data-target');
70      if(meal == 'breakfast') {
71        var otherMeal = 'dinner';
72      } else if(meal == 'dinner') {
73        var otherMeal = 'breakfast';
74      }
75
76      // Toggle button classes for style
77      $('[data-target="' + otherMeal + '"]').addClass('btn-ghost').removeClass('btn-full');
78      $('[data-target="' + meal + '"]').addClass('btn-full').removeClass('btn-ghost');
79
80      // Toggle visible meal options
81      $('[data-show-for="' + meal + '"]').show(400);
82      $('[data-show-for="' + otherMeal + '"]').hide(400);
83    }
84    $button.on('click', targetMeals);
85  }
86  showMeals();
87
88
89  ///////////////////////////////////////////
90  // Sticky Nav for Menu Categories (Desktop)
91  function stickyMenuNav() {
92    function initSticky() {
93
94      function setMenuCatWidth() {
95        var $stickyElemInner = $('.js--sticky-container .js--sticky');
96        var $empireMenu = $('#empire-menu');
97        var $menuBg = $('.menu .menu-nav-bg');
98        var stickyWidth = $empireMenu.offset().left - 22;
99        $stickyElemInner.css({
100          'width': stickyWidth + 'px'
101        });
102        $menuBg.css({
103          'width': stickyWidth + 'px'
104        });
105      }
106
107      if($(window).width() > 767 && $('.js--sticky-container .js--sticky').length > 0) {
108        var $stickyBounds = $('#sticky-bounds');
109        var $stickyElemInner = $('.js--sticky-container .js--sticky');
110
111        // Set positions
112        var stickyTop = $stickyBounds.offset().top;
113        var stickyBottom = $stickyBounds.offset().top + $stickyElemInner.outerHeight(true);
114        var elemHeight = $stickyElemInner.outerHeight(true);
115        var topStick = $stickyBounds.offset().top;
116        var bottomStick = ( $stickyBounds.offset().top + $stickyBounds.outerHeight(true) ) - elemHeight;
117        var bottomPos = bottomStick - elemHeight;
118
119        setMenuCatWidth();
120
121        function stickBar() {
122          var currentPos = $(window).scrollTop();
123
124          setMenuCatWidth();
125
126          // Reset positions
127          stickyBottom = $stickyBounds.offset().top + $stickyElemInner.outerHeight(true);
128          elemHeight = $stickyElemInner.outerHeight(true);
129          bottomStick = ( $stickyBounds.offset().top + $stickyBounds.outerHeight(true) ) - elemHeight;
130          bottomPos = bottomStick - elemHeight;
131
132
133          // When Sidebar is not at top or bottom - Sticky
134          if( currentPos > topStick && currentPos < bottomStick ) {
135            $stickyElemInner.css({
136              'position': 'fixed',
137              top: '0',
138              left: '0'
139            });
140          }
141
142          // When Sidebar is at the top of the post
143          if( currentPos < topStick ) {
144            $stickyElemInner.css({
145              'position': 'relative'
146            });
147          }
148
149          // When Sidebar reaches bottom of the post
150          if( currentPos > bottomStick ) {
151            $stickyElemInner.css({
152              'position': 'absolute',
153              'left': '0',
154              'top': bottomPos + 'px'
155            });
156          }
157        }
158
159        $(window).on('scroll', stickBar);
160        if($(window).width() > 767) {
161          $(window).on('resize', stickBar);
162          $('[data-target]').on('resize', stickBar);
163        }
164      }
165    }
166
167    initSticky();
168    $(window).on('resize', initSticky);
169    $('[data-target]').on('click', initSticky);
170  }
171  stickyMenuNav();
172
173
174  //////////////////////////////////////////
175  // Sticky Nav for Menu Categories (Mobile)
176  function mblStickyMenuNav() {
177    function initSticky() {
178
179      function setMenuCatWidth() {
180        var $stickyElemInner = $('.js--sticky-container .js--sticky');
181        var $menuBg = $('.menu .menu-nav-bg');
182        $stickyElemInner.css({
183          'width': '100%'
184        });
185        $menuBg.css({
186          'width': '100%'
187        });
188      }
189
190      if($(window).width() < 768) {
191        var $stickyBounds = $('#sticky-bounds');
192        var $stickyElemInner = $('.js--mbl-sticky');
193
194        // Set positions
195        var stickyTop = $stickyBounds.offset().top;
196        var stickyBottom = $stickyBounds.offset().top - $stickyElemInner.outerHeight(true);
197        var elemHeight = $stickyElemInner.outerHeight(true);
198        var topStick = $stickyBounds.offset().top;
199        var bottomStick = ( $stickyBounds.offset().top + $stickyBounds.outerHeight(true) ) - elemHeight;
200        var bottomPos = bottomStick - elemHeight;
201
202        setMenuCatWidth();
203
204
205        function stickBar() {
206          var currentPos = $(window).scrollTop();
207
208          setMenuCatWidth();
209
210          // When Sidebar is not at top or bottom - Sticky
211          if( currentPos > topStick && currentPos < bottomStick ) {
212            $stickyElemInner.css({
213              'position': 'fixed',
214              top: '0',
215              left: '0',
216            });
217          }
218
219          // When Sidebar is at the top of the post
220          if( currentPos < topStick ) {
221            $stickyElemInner.css({
222              'position': 'relative'
223            });
224          }
225
226          // When Sidebar reaches bottom of the post
227          if( currentPos > bottomStick ) {
228            $stickyElemInner.css({
229              'position': 'absolute',
230              'left': '0',
231              'top': bottomPos + 'px'
232            });
233          }
234        }
235
236        $(window).on('scroll', stickBar);
237        if($(window).width() < 768) {
238          $(window).on('resize', stickBar);
239        }
240      }
241    }
242
243    initSticky();
244    $(window).on('resize', initSticky);
245  }
246  mblStickyMenuNav();
247
248}(jQuery));