Responsive Menu - Version 3.1.28

Version Description

(13th April 2020) = * Feature: Added keyboard accessibility

Download this release

Release Info

Developer expresstech
Plugin Icon 128x128 Responsive Menu
Version 3.1.28
Comparing to
See all releases

Code changes from version 3.1.27 to 3.1.28

Files changed (13) hide show
  1. app/Walkers/Walker.php +4 -3
  2. config/default_options.php +4 -0
  3. config/twig.php +1 -0
  4. public/css/admin/base.css +4 -0
  5. public/js/app.js.twig +87 -0
  6. readme.txt +4 -1
  7. responsive-menu.php +1 -1
  8. vendor/twig/twig/lib/Twig/Node.php +0 -0
  9. views/admin/macros.html.twig +22 -1
  10. views/admin/sections/desktop-menu.html.twig +3 -0
  11. views/app/button.html.twig +1 -1
  12. views/app/container.html.twig +1 -1
  13. views/app/search.html.twig +1 -1
app/Walkers/Walker.php CHANGED
@@ -41,7 +41,7 @@ class Walker extends \Walker_Nav_Menu {
41
 
42
  $id = ' id="responsive-menu-item-' . esc_attr( $item->ID ) . '"';
43
 
44
- $output .= '<li' . $id . $class_names .'>';
45
 
46
  $atts = array();
47
  $atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
@@ -49,7 +49,8 @@ class Walker extends \Walker_Nav_Menu {
49
  $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
50
  $atts['href'] = ! empty( $item->url ) ? $item->url : '';
51
  $atts['class'] = 'responsive-menu-item-link';
52
-
 
53
  $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args, $depth);
54
 
55
  $attributes = '';
@@ -98,7 +99,7 @@ class Walker extends \Walker_Nav_Menu {
98
  }
99
 
100
  public function start_lvl(&$output, $depth = 0, $args = array()) {
101
- $output .= "<ul class='responsive-menu-submenu responsive-menu-submenu-depth-" . ($depth + 1) . $this->getSubmenuClassOpenOrNot() . "'>";
102
  }
103
 
104
  public function end_el(&$output, $item, $depth = 0, $args = array()) {
41
 
42
  $id = ' id="responsive-menu-item-' . esc_attr( $item->ID ) . '"';
43
 
44
+ $output .= '<li' . $id . $class_names .' role="none">';
45
 
46
  $atts = array();
47
  $atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
49
  $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
50
  $atts['href'] = ! empty( $item->url ) ? $item->url : '';
51
  $atts['class'] = 'responsive-menu-item-link';
52
+ $atts['tabindex'] = 1;
53
+ $atts['role']= "menuitem";
54
  $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args, $depth);
55
 
56
  $attributes = '';
99
  }
100
 
101
  public function start_lvl(&$output, $depth = 0, $args = array()) {
102
+ $output .= "<ul aria-label='". esc_attr( $this->current_item->title) ."' role='menu' class='responsive-menu-submenu responsive-menu-submenu-depth-" . ($depth + 1) . $this->getSubmenuClassOpenOrNot() . "'>";
103
  }
104
 
105
  public function end_el(&$output, $item, $depth = 0, $args = array()) {
config/default_options.php CHANGED
@@ -265,6 +265,10 @@ function get_responsive_menu_default_options() {
265
  'desktop_menu_to_hide' => '',
266
  'desktop_menu_options' => '{}',
267
  'desktop_menu_positioning' => 'fixed',
 
 
 
 
268
  'desktop_menu_width' => '',
269
  'desktop_menu_width_unit' => 'px',
270
  'desktop_menu_side' => '',
265
  'desktop_menu_to_hide' => '',
266
  'desktop_menu_options' => '{}',
267
  'desktop_menu_positioning' => 'fixed',
268
+ 'desktop_menu_hide_and_show' => false,
269
+ 'desktop_submenu_open_on_click' => false,
270
+ 'desktop_submenu_open_animation' => '',
271
+ 'desktop_submenu_open_animation_speed' => '0ms',
272
  'desktop_menu_width' => '',
273
  'desktop_menu_width_unit' => 'px',
274
  'desktop_menu_side' => '',
config/twig.php CHANGED
@@ -32,6 +32,7 @@ if(!is_admin()):
32
  'depth' => $options['menu_depth'] ? $options['menu_depth'] : 0,
33
  'theme_location' => $options['theme_location_menu'] ? $options['theme_location_menu'] : null,
34
  'walker' => $walker,
 
35
  'echo' => false
36
  ]
37
  );
32
  'depth' => $options['menu_depth'] ? $options['menu_depth'] : 0,
33
  'theme_location' => $options['theme_location_menu'] ? $options['theme_location_menu'] : null,
34
  'walker' => $walker,
35
+ 'items_wrap' => '<ul id="%1$s" role="menubar" aria-label="'. $menu .'">%3$s</ul>',
36
  'echo' => false
37
  ]
38
  );
public/css/admin/base.css CHANGED
@@ -98,6 +98,10 @@
98
  width: 100px !important;
99
  }
100
 
 
 
 
 
101
  #responsive-menu-admin td {
102
  vertical-align: middle;
103
  }
98
  width: 100px !important;
99
  }
100
 
101
+ #responsive-menu-admin .bootstrap-select.is-animation-input {
102
+ width: 45% !important;
103
+ }
104
+
105
  #responsive-menu-admin td {
106
  vertical-align: middle;
107
  }
public/js/app.js.twig CHANGED
@@ -187,6 +187,93 @@ jQuery(document).ready(function($) {
187
  self.triggerSubArrow($(this).children('.responsive-menu-subarrow').first());
188
  });
189
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
190
  }
191
  };
192
  ResponsiveMenu.init();
187
  self.triggerSubArrow($(this).children('.responsive-menu-subarrow').first());
188
  });
189
  }
190
+
191
+ {# Handle accessibility for slidebar menu. #}
192
+ if (jQuery('#responsive-menu-button').css('display') != 'none') {
193
+ $('#responsive-menu-button,#responsive-menu a.responsive-menu-item-link, #responsive-menu-wrapper input').focus( function() {
194
+ $(this).addClass('is-active');
195
+ $('html').addClass('responsive-menu-open');
196
+ $('#responsive-menu li').css({"opacity": "1", "margin-left": "0"});
197
+ });
198
+
199
+ $('#responsive-menu-button, a.responsive-menu-item-link,#responsive-menu-wrapper input').focusout( function() {
200
+ if ( $(this).last('#responsive-menu-button a.responsive-menu-item-link') ) {
201
+ $(this).removeClass('is-active');
202
+ $('html').removeClass('responsive-menu-open');
203
+ }
204
+ });
205
+ }
206
+
207
+ {# Handling menu with arrow keys #}
208
+ $('#responsive-menu a.responsive-menu-item-link').keydown(function(event) {
209
+ console.log( event.keyCode );
210
+ if ( [13,27,32,35,36,37,38,39,40].indexOf( event.keyCode) == -1) {
211
+ return;
212
+ }
213
+ var link = $(this);
214
+ switch(event.keyCode) {
215
+ case 13:
216
+ {# Press enter key to activate the link. #}
217
+ link.click();
218
+ break;
219
+ case 27:
220
+ {# Escape key to close the active submenu. #}
221
+ var dropdown = link.parent('li').parents('.responsive-menu-submenu');
222
+ if ( dropdown.length > 0 ) {
223
+ dropdown.hide();
224
+ dropdown.prev().focus();
225
+ }
226
+ break;
227
+
228
+ case 32:
229
+ {# Space enter key to open submenu. #}
230
+ var dropdown = link.parent('li').find('.responsive-menu-submenu');
231
+ if ( dropdown.length > 0 ) {
232
+ dropdown.show();
233
+ dropdown.find('a, input, button, textarea').first().focus();
234
+ }
235
+ break;
236
+
237
+ case 35:
238
+ {# End key to move the focus on last menu item. #}
239
+ var dropdown = link.parent('li').find('.responsive-menu-submenu');
240
+ if ( dropdown.length > 0 ) {
241
+ dropdown.hide();
242
+ }
243
+ $(this).parents('#responsive-menu').find('a.responsive-menu-item-link').filter(':visible').last().focus();
244
+ break;
245
+ case 36:
246
+ {# Home key move the focus on first element of menu. #}
247
+ var dropdown = link.parent('li').find('.responsive-menu-submenu');
248
+ if( dropdown.length > 0 ) {
249
+ dropdown.hide();
250
+ }
251
+ $(this).parents('#responsive-menu').find('a.responsive-menu-item-link').filter(':visible').first().focus();
252
+ break;
253
+ case 37:
254
+ case 38:
255
+ event.preventDefault();
256
+ event.stopPropagation();
257
+ {# Handle left/up arrow key event. #}
258
+ if ( link.parent('li').prevAll('li').filter(':visible').first().length == 0) {
259
+ link.parent('li').nextAll('li').filter(':visible').last().find('a').first().focus();
260
+ } else {
261
+ link.parent('li').prevAll('li').filter(':visible').first().find('a').first().focus();
262
+ }
263
+ break;
264
+ case 39:
265
+ case 40:
266
+ event.preventDefault();
267
+ event.stopPropagation();
268
+ {# Handle right/down arrow key event. #}
269
+ if( link.parent('li').nextAll('li').filter(':visible').first().length == 0) {
270
+ link.parent('li').prevAll('li').filter(':visible').last().find('a').first().focus();
271
+ } else {
272
+ link.parent('li').nextAll('li').filter(':visible').first().find('a').first().focus();
273
+ }
274
+ break;
275
+ }
276
+ });
277
  }
278
  };
279
  ResponsiveMenu.init();
readme.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: expresstech,responsivemenu
3
  Tags: responsive, mega menu, navigation, mobile, hamburger
4
  Requires at least: 3.6
5
  Tested up to: 5.4
6
- Stable tag: 3.1.27
7
  Requires PHP: 5.5
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -111,6 +111,9 @@ To view our FAQ, please go to [https://responsive.menu/faq/](https://responsive.
111
 
112
  == Changelog ==
113
 
 
 
 
114
  = 3.1.27 (19th Mar 2020) =
115
  * Fix: PHP v7.4 Compatibility
116
 
3
  Tags: responsive, mega menu, navigation, mobile, hamburger
4
  Requires at least: 3.6
5
  Tested up to: 5.4
6
+ Stable tag: 3.1.28
7
  Requires PHP: 5.5
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
111
 
112
  == Changelog ==
113
 
114
+ = 3.1.28 (13th April 2020) =
115
+ * Feature: Added keyboard accessibility
116
+
117
  = 3.1.27 (19th Mar 2020) =
118
  * Fix: PHP v7.4 Compatibility
119
 
responsive-menu.php CHANGED
@@ -4,7 +4,7 @@
4
  Plugin Name: Responsive Menu
5
  Plugin URI: https://expresstech.io
6
  Description: Highly Customisable Responsive Menu Plugin for WordPress
7
- Version: 3.1.27
8
  Author: ExpressTech
9
  Text Domain: responsive-menu
10
  Author URI: https://responsive.menu
4
  Plugin Name: Responsive Menu
5
  Plugin URI: https://expresstech.io
6
  Description: Highly Customisable Responsive Menu Plugin for WordPress
7
+ Version: 3.1.28
8
  Author: ExpressTech
9
  Text Domain: responsive-menu
10
  Author URI: https://responsive.menu
vendor/twig/twig/lib/Twig/Node.php CHANGED
File without changes
views/admin/macros.html.twig CHANGED
@@ -48,7 +48,7 @@
48
  {% endmacro %}
49
 
50
  {% macro select(name, value, choices, class='') %}
51
- <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick {{ class }}' name='menu[{{ name }}]'>
52
  {% for key, display in choices %}
53
  <option value='{{ key }}' {% if key == value %}selected='selected'{% endif %}>
54
  {{ display }}
@@ -203,6 +203,27 @@
203
  'centre': 'Centre'
204
  } %}
205
  {{ macros.select(name, options[name], choices) }}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
206
  {% elseif select_type == 'position' %}
207
  <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick' name='menu[{{ name }}]'>
208
  <option data-subtext='Will stay in position as you scroll down the page.' value='fixed' {% if options[name] == 'fixed' %}selected='selected'{% endif %}>Fixed</option>
48
  {% endmacro %}
49
 
50
  {% macro select(name, value, choices, class='') %}
51
+ <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick {{' '}} {{ class }}' name='menu[{{ name }}]'>
52
  {% for key, display in choices %}
53
  <option value='{{ key }}' {% if key == value %}selected='selected'{% endif %}>
54
  {{ display }}
203
  'centre': 'Centre'
204
  } %}
205
  {{ macros.select(name, options[name], choices) }}
206
+ {% elseif select_type == 'mega_standard_menu_animation' %}
207
+ {% set choices = {
208
+ 'fade': 'Fade',
209
+ 'fadeUp': 'FadeUp',
210
+ 'slideDown': 'SlideDown',
211
+ 'slideUp': 'SlideUp'
212
+ } %}
213
+ {{ macros.select(name, options[name], choices, 'is-animation-input') }}
214
+ {% set choices = {
215
+ '100ms': '100ms',
216
+ '200ms': '200ms',
217
+ '300ms': '300ms',
218
+ '400ms': '400ms',
219
+ '500ms': '500ms',
220
+ '600ms': '600ms',
221
+ '700ms': '700ms',
222
+ '800ms': '800ms',
223
+ '900ms': '900ms',
224
+ '1000ms': '1000ms',
225
+ } %}
226
+ {{ macros.select(name ~ '_speed', options[name ~ '_speed'], choices, 'is-animation-input') }}
227
  {% elseif select_type == 'position' %}
228
  <select id='responsive-menu-{{ name|replace({'_': '-'}) }}' class='selectpicker show-tick' name='menu[{{ name }}]'>
229
  <option data-subtext='Will stay in position as you scroll down the page.' value='fixed' {% if options[name] == 'fixed' %}selected='selected'{% endif %}>Fixed</option>
views/admin/sections/desktop-menu.html.twig CHANGED
@@ -24,8 +24,11 @@
24
  {{ macros.header('General Setup', section) }}
25
  <table class='table table-bordered table-hover'>
26
  {{ macros.row('desktop_menu_positioning', 'Positioning', 'select', options, errors, '', 'pro', 'position', '', 'Specify how you want the menu to stick to your page.', '', '', 'Using relative positioning is useful when combined with the shortcode.') }}
 
27
  {{ macros.row('desktop_menu_width', 'Width', 'input', options, errors, 'has-unit', 'pro', '', 'percentage', 'Set the width of the desktop menu and it\'s unit.', '', '', 'Leave blank to keep the width auto.') }}
28
  {{ macros.row('desktop_menu_side', 'Side', 'select', options, errors, '', 'pro', 'left_right_centre_with_none', '', 'Set which side of the screen the desktop menu will show on.') }}
 
 
29
  </table>
30
  </div>
31
 
24
  {{ macros.header('General Setup', section) }}
25
  <table class='table table-bordered table-hover'>
26
  {{ macros.row('desktop_menu_positioning', 'Positioning', 'select', options, errors, '', 'pro', 'position', '', 'Specify how you want the menu to stick to your page.', '', '', 'Using relative positioning is useful when combined with the shortcode.') }}
27
+ {{ macros.row('desktop_menu_hide_and_show', 'Hide on Scroll Down / Show on Scroll Up', 'checkbox', options, errors, '', 'pro', '', '', 'Enable this feature for fixed header.') }}
28
  {{ macros.row('desktop_menu_width', 'Width', 'input', options, errors, 'has-unit', 'pro', '', 'percentage', 'Set the width of the desktop menu and it\'s unit.', '', '', 'Leave blank to keep the width auto.') }}
29
  {{ macros.row('desktop_menu_side', 'Side', 'select', options, errors, '', 'pro', 'left_right_centre_with_none', '', 'Set which side of the screen the desktop menu will show on.') }}
30
+ {{ macros.row('desktop_submenu_open_on_click', 'Open Sub Menu Items On Click', 'checkbox', options, errors, '', 'pro', '', '', 'Enable this option to open Mega menu and Standard menu items on click.', '', '', ' Default will be on hover.') }}
31
+ {{ macros.row('desktop_submenu_open_animation', 'Animation Effect for Desktop Menu', 'select', options, errors, '', 'pro', 'mega_standard_menu_animation', '', 'Select animation type for Mega and Standard menu items open', '', '', ' Default will be none.') }}
32
  </table>
33
  </div>
34
 
views/app/button.html.twig CHANGED
@@ -1,4 +1,4 @@
1
- <button id="responsive-menu-button"
2
  class="responsive-menu-button responsive-menu-{{ options.button_click_animation }}
3
  {% if options.button_title_position == 'left' or options.button_title_position == 'right' %} responsive-menu-accessible{% endif %}"
4
  type="button"
1
+ <button id="responsive-menu-button" tabindex="1"
2
  class="responsive-menu-button responsive-menu-{{ options.button_click_animation }}
3
  {% if options.button_title_position == 'left' or options.button_title_position == 'right' %} responsive-menu-accessible{% endif %}"
4
  type="button"
views/app/container.html.twig CHANGED
@@ -1,5 +1,5 @@
1
  <div id="responsive-menu-container" class="{{ options.animation_type }}-{{ options.menu_appear_from }}">
2
- <div id="responsive-menu-wrapper">
3
  {% for key, selected in options.items_order|json_decode %}
4
  {% if selected == 'on' %}
5
  {% include 'app/%s.html.twig'|format(key|replace({' ': '-'})) %}
1
  <div id="responsive-menu-container" class="{{ options.animation_type }}-{{ options.menu_appear_from }}">
2
+ <div id="responsive-menu-wrapper" role="navigation" aria-label="{{ options.menu_to_use }}">
3
  {% for key, selected in options.items_order|json_decode %}
4
  {% if selected == 'on' %}
5
  {% include 'app/%s.html.twig'|format(key|replace({' ': '-'})) %}
views/app/search.html.twig CHANGED
@@ -1,6 +1,6 @@
1
  <div id="responsive-menu-search-box">
2
  <form action="{{ search_url }}" class="responsive-menu-search-form" role="search">
3
- <input type="search" name="s" title="Search"
4
  placeholder="{{ options.menu_search_box_text|translate('menu_search_box_text') }}"
5
  class="responsive-menu-search-box">
6
  </form>
1
  <div id="responsive-menu-search-box">
2
  <form action="{{ search_url }}" class="responsive-menu-search-form" role="search">
3
+ <input type="search" name="s" title="Search" tabindex="1"
4
  placeholder="{{ options.menu_search_box_text|translate('menu_search_box_text') }}"
5
  class="responsive-menu-search-box">
6
  </form>