add option to define mouseover timeout for submenus

johndoh · Mar 9, 2018 · 3e7ca08 · 3e7ca08
1 parent 8dcf480
commit 3e7ca08
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 19 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -32,6 +32,7 @@ Roundcube Webmail ContextMenu
  * Add menu-change JS event listener
  * Support new Contacts toolbar with Copy/Move actions (req RC eb0228b)
  * Add menus to Settings screens
+ * Add contextmenu_mouseover_timeout config option to override default mouseover timeout for submenus
 
 Version 2.3 (2017-06-14, rc-1.3)
 =================================================

diff --git a/MANUAL.md b/MANUAL.md
@@ -60,6 +60,8 @@ The functions takes 2 parameters:
 
 `events` (optional) JSON object. Contextmenu triggers a number of events during execution, for example `command` is tiggered when the user clicks on an item in the menu. Full details of all the events can be found in the [Events](#events) section of this file. This parameters allows a plugin author to attach their own functions to the Contextmenu events, overriding the defaults.
 
+Displaying submenus on mouseover: A config value named `contextmenu_mouseover_timeout` can be set in your main Roundcube config file to define the default `mouseover_timeout` value as something other than `400`.
+
 Creating a simple Contextmenu looks like this:
 ```js
 var menu = rcmail.contextmenu.init(

diff --git a/contextmenu.js b/contextmenu.js
@@ -523,7 +523,7 @@ function rcube_context_menu(p) {
     this.menu_source = new Array();
     this.menu_source_obj = null;
     this.list_object = null;
-    this.mouseover_timeout = 400;
+    this.mouseover_timeout = rcmail.env.contextmenu_mouseover_timeout;
     this.classes = {
         source: 'contextRow context-source', // contextRow class depreciated in v3.0
         div: rcmail.contextmenu.settings.classes.container + ' popupmenu',
@@ -693,25 +693,22 @@ function rcube_context_menu(p) {
 
                             ref.submenu(a, e);
                             return false;
-                        });
-
-                        if (ref.mouseover_timeout > -1) {
-                            a.mouseover(function(e) {
-                                if (!$(this).hasClass(rcmail.contextmenu.settings.classes.button_active))
-                                    return;
-
-                                ref.timers['submenu_show'] = window.setTimeout(function(a, e) {
-                                    ref.submenu(a, e);
-                                }, ref.mouseover_timeout, a, e);
-                            });
+                        })
+                        .on('mouseover', function(e) {
+                            if (ref.mouseover_timeout < 0 || !$(this).hasClass(rcmail.contextmenu.settings.classes.button_active))
+                                return;
 
-                            a.mouseout(function() {
-                                if (!$(this).hasClass(rcmail.contextmenu.settings.classes.button_active))
-                                    return;
+                            ref.timers['submenu_show'] = window.setTimeout(function(a, e) {
+                                ref.submenu(a, e);
+                            }, ref.mouseover_timeout, a, e);
+                        })
+                        .on('mouseout', function() {
+                            if (ref.mouseover_timeout < 0 || !$(this).hasClass(rcmail.contextmenu.settings.classes.button_active))
+                                return;
 
-                                $(this).blur(); clearTimeout(ref.timers['submenu_show']);
-                            });
-                        }
+                            $(this).blur();
+                            clearTimeout(ref.timers['submenu_show']);
+                        });
                     }
                     else {
                         a.addClass('cmd_' + command.replace(/\./g, '-'));

diff --git a/contextmenu.php b/contextmenu.php
@@ -39,6 +39,7 @@ public function init()
             $this->include_stylesheet($this->local_skin_path() . '/contextmenu.css');
             $this->include_script($this->local_skin_path() . '/functions.js');
             $this->api->output->set_env('contextmenu', true);
+            $this->api->output->set_env('contextmenu_mouseover_timeout', $rcmail->config->get('contextmenu_mouseover_timeout', 400));
             $this->add_hook('render_page', array($this, 'additional_menus'));
         }
 

diff --git a/skins/elastic/functions.js b/skins/elastic/functions.js
@@ -89,10 +89,13 @@ $(document).ready(function() {
                     if (elem.attr('data-popup') || elem.attr('aria-haspopup'))
                         a.data('level', (p.ref.parents + 2));
                 },
-                '+beforeactivate': function() {
+                '+beforeactivate': function(p) {
                     // force toolbar display on small screens while the contextmenu renders
                     if (!$('#layout > .content').is(':visible'))
                         $('#layout > .content').addClass('contextmenu_content');
+
+                    // do not show submenus on mouseover for small screens
+                    p.ref.mouseover_timeout = $('html').is('.layout-small,.layout-phone') ? -1 : rcmail.env.contextmenu_mouseover_timeout;
                 },
                 '+afteractivate': function() {
                     $('#layout > .content').removeClass('contextmenu_content');