From 8a586b5997b70fd2c49988df4fe84668915d0f19 Mon Sep 17 00:00:00 2001
From: Nate <github@najo.com>
Date: Mon, 25 May 2020 13:17:01 -0600
Subject: [PATCH] Theme: Side Menu updates.

---
 resources/classes/menu.php    |  2 +-
 resources/footer.php          |  9 ++++++---
 themes/default/app_config.php | 18 +++++++++++++++++-
 themes/default/template.php   | 21 ++++++++++++++++++---
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/resources/classes/menu.php b/resources/classes/menu.php
index ad7307f5e8..2a57a077d8 100644
--- a/resources/classes/menu.php
+++ b/resources/classes/menu.php
@@ -1134,7 +1134,7 @@ if (!class_exists('menu')) {
 					$html .= "	<div style='height: 100px;'></div>\n";
 				}
 			$html .= "</div>\n";
-			$html .= "<div id='content_container' ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "onclick=\"if ($(window).width() >= 576 && document.getElementById('menu_side_state_current').value != 'expanded') { menu_side_contract(); }\"" : null).">\n";
+			$html .= "<div id='content_container' ".($_SESSION['theme']['menu_side_state']['text'] != 'expanded' ? "onclick=\"clearTimeout(menu_side_contract_timer); if ($(window).width() >= 576 && document.getElementById('menu_side_state_current').value != 'expanded') { menu_side_contract(); }\"" : null).">\n";
 			$html .= "	<div id='content_header'>\n";
 			//header: left
 				$html .= "<div class='float-left'>\n";
diff --git a/resources/footer.php b/resources/footer.php
index 6ad90e2138..be056574e1 100644
--- a/resources/footer.php
+++ b/resources/footer.php
@@ -120,6 +120,9 @@
 								if (isset($setting['text']) && $setting['text'] != '') {
 									$settings['theme'][$subcategory] = escape($setting['text']);
 								}
+								else if (isset($setting['numeric']) && is_numeric($setting['numeric'])) {
+									$settings['theme'][$subcategory] = $setting['numeric'];
+								}
 								else if (isset($setting['boolean'])) {
 									$settings['theme'][$subcategory] = $setting['boolean'] == 'true' ? true : false;
 								}
@@ -134,6 +137,8 @@
 				$settings['theme']['message_delay'] = is_numeric($settings['theme']['message_delay']) ? 1000 * (float) $settings['theme']['message_delay'] : 3000;
 				$settings['theme']['menu_side_width_contracted'] = is_numeric($settings['theme']['menu_side_width_contracted']) ? $settings['theme']['menu_side_width_contracted'] : '60';
 				$settings['theme']['menu_side_width_expanded'] = is_numeric($settings['theme']['menu_side_width_expanded']) ? $settings['theme']['menu_side_width_expanded'] : '225';
+				$settings['theme']['menu_side_toggle_hover_delay_expand'] = is_numeric($settings['theme']['menu_side_toggle_hover_delay_expand']) ? $settings['theme']['menu_side_toggle_hover_delay_expand'] : '300';
+				$settings['theme']['menu_side_toggle_hover_delay_contract'] = is_numeric($settings['theme']['menu_side_toggle_hover_delay_contract']) ? $settings['theme']['menu_side_toggle_hover_delay_contract'] : '1000';
 				$settings['theme']['menu_style'] = $settings['theme']['menu_style'] != '' ? $settings['theme']['menu_style'] : 'fixed';
 				$settings['theme']['menu_position'] = $settings['theme']['menu_position'] != '' ? $settings['theme']['menu_position'] : 'top';
 				$settings['theme']['footer'] = $settings['theme']['footer'] != '' ? $settings['theme']['footer'] : '&copy; '.$text['theme-label-copyright'].' 2008 - '.date('Y')." <a href='http://www.fusionpbx.com' class='footer' target='_blank'>fusionpbx.com</a> ".$text['theme-label-all_rights_reserved'];
@@ -182,15 +187,13 @@
 		//build menu by style
 			switch ($_SESSION['theme']['menu_style']['text']) {
 				case 'side':
-					$menu_side_toggle = $_SESSION['theme']['menu_side_toggle']['text'] == 'hover' ? " onmouseenter=\"if ($('#menu_side_container').width() < 100) { menu_side_expand(); }\" onmouseleave=\"if ($('#menu_side_container').width() > 100 && $('#menu_side_state_current').val() != 'expanded') { menu_side_contract(); }\"" : null;
+					$menu_side_toggle = $_SESSION['theme']['menu_side_toggle']['text'] == 'hover' ? " onmouseenter=\"clearTimeout(menu_side_contract_timer); if ($('#menu_side_container').width() < 100) { menu_side_expand_start(); }\" onmouseleave=\"clearTimeout(menu_side_expand_timer); if ($('#menu_side_container').width() > 100 && $('#menu_side_state_current').val() != 'expanded') { menu_side_contract_start(); }\"" : null;
 					$container_open = "<div id='menu_side_container' class='hide-xs' ".$menu_side_toggle." >\n";
 					$menu = new menu;
 					$menu->text = $text;
 					$menu_html = $menu->menu_vertical($_SESSION['menu']['array']);
 					unset($menu);
 					$view->assign('menu_side_state', (isset($_SESSION['theme']['menu_side_state']['text']) && $_SESSION['theme']['menu_side_state']['text'] != '' ? $_SESSION['theme']['menu_side_state']['text'] : 'contracted'));
-					$view->assign('menu_side_item_main_sub_icon_expand', (isset($_SESSION['theme']['menu_side_item_main_sub_icon_expand']['text']) && $_SESSION['theme']['menu_side_item_main_sub_icon_expand']['text'] != '' ? $_SESSION['theme']['menu_side_item_main_sub_icon_expand']['text'] : 'chevron-down'));
-					$view->assign('menu_side_item_main_sub_icon_contract', (isset($_SESSION['theme']['menu_side_item_main_sub_icon_contract']['text']) && $_SESSION['theme']['menu_side_item_main_sub_icon_contract']['text'] != '' ? $_SESSION['theme']['menu_side_item_main_sub_icon_contract']['text'] : 'chevron-up'));
 					break;
 				case 'inline':
 					$container_open = "<div class='container-fluid' style='padding: 0;' align='".($_SESSION['theme']['logo_align']['text'] != '' ? $_SESSION['theme']['logo_align']['text'] : 'left')."'>\n";
diff --git a/themes/default/app_config.php b/themes/default/app_config.php
index c2ff1dbc36..89787d7356 100644
--- a/themes/default/app_config.php
+++ b/themes/default/app_config.php
@@ -1741,7 +1741,23 @@
 		$apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
 		$apps[$x]['default_settings'][$y]['default_setting_value'] = "hover";
 		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
-		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set whether the Side Menu opens & closes with a click (focus) or by mouse over/out (hover).";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set whether the Side Menu opens and closes with a 'Click' or with a mouse over/out ('Hover').";
+		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "902e6d1b-d019-4d7f-9d83-38bab5db112e";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "menu_side_toggle_hover_delay_expand";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "numeric";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "300";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the delay in milliseconds before the Side Menu expands on mouse over (requires menu_side_toggle be set to 'Hover').";
+		$y++;
+		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "8dd2d3be-19c2-4758-9c71-5d2d3cf8af73";
+		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
+		$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "menu_side_toggle_hover_delay_contract";
+		$apps[$x]['default_settings'][$y]['default_setting_name'] = "numeric";
+		$apps[$x]['default_settings'][$y]['default_setting_value'] = "1000";
+		$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true";
+		$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the delay in milliseconds before the Side Menu contracts on mouse out (requires menu_side_toggle be set to 'Hover').";
 		$y++;
 		$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "994acf94-09df-42ec-b2c1-c3fc7d665cb9";
 		$apps[$x]['default_settings'][$y]['default_setting_category'] = "theme";
diff --git a/themes/default/template.php b/themes/default/template.php
index 81710fff8d..dc3a3b0c99 100644
--- a/themes/default/template.php
+++ b/themes/default/template.php
@@ -82,8 +82,17 @@
 
 		{if $settings.theme.menu_style == 'side'}
 			//side menu visibility toggle
+				var menu_side_expand_timer;
+				var menu_side_contract_timer;
 				var menu_side_state_current = '{$menu_side_state}';
 				{literal}
+
+				function menu_side_contract_start() {
+					menu_side_contract_timer = setTimeout(function() {
+						menu_side_contract();
+						}, {/literal}{$settings.theme.menu_side_toggle_hover_delay_contract}{literal});
+				}
+
 				function menu_side_contract() {
 					if (menu_side_state_current == 'expanded') {
 						$('.menu_side_sub').slideUp(180);
@@ -108,7 +117,7 @@
 						{literal}
 						$('.menu_side_control_state').hide();
 						$('.menu_side_item_main_sub_icons').hide();
-						$('.sub_arrows').removeClass('fa-{/literal}{$menu_side_item_main_sub_icon_contract}{literal}').addClass('fa-{/literal}{$menu_side_item_main_sub_icon_expand}{literal}');
+						$('.sub_arrows').removeClass('fa-{/literal}{$settings.theme.menu_side_item_main_sub_icon_contract}{literal}').addClass('fa-{/literal}{$settings.theme.menu_side_item_main_sub_icon_expand}{literal}');
 						$('#menu_side_container').animate({ width: '{/literal}{$settings.theme.menu_side_width_contracted}{literal}px' }, 180, function() {
 							menu_side_state_current = 'contracted';
 						});
@@ -123,6 +132,12 @@
 					}
 				}
 
+				function menu_side_expand_start() {
+					menu_side_expand_timer = setTimeout(function() {
+						menu_side_expand();
+						}, {/literal}{$settings.theme.menu_side_toggle_hover_delay_expand}{literal});
+				}
+
 				function menu_side_expand() {
 					{/literal}
 					{if $settings.theme.menu_brand_type == 'image_text'}
@@ -160,8 +175,8 @@
 				}
 
 				function menu_side_item_toggle(item_id) {
-					$('#sub_arrow_'+item_id).toggleClass(['fa-{/literal}{$menu_side_item_main_sub_icon_contract}{literal}','fa-{/literal}{$menu_side_item_main_sub_icon_expand}{literal}']);
-					$('.sub_arrows').not('#sub_arrow_'+item_id).removeClass('fa-{/literal}{$menu_side_item_main_sub_icon_contract}{literal}').addClass('fa-{/literal}{$menu_side_item_main_sub_icon_expand}{literal}');
+					$('#sub_arrow_'+item_id).toggleClass(['fa-{/literal}{$settings.theme.menu_side_item_main_sub_icon_contract}{literal}','fa-{/literal}{$settings.theme.menu_side_item_main_sub_icon_expand}{literal}']);
+					$('.sub_arrows').not('#sub_arrow_'+item_id).removeClass('fa-{/literal}{$settings.theme.menu_side_item_main_sub_icon_contract}{literal}').addClass('fa-{/literal}{$settings.theme.menu_side_item_main_sub_icon_expand}{literal}');
 					$('#sub_'+item_id).slideToggle(180, function() {
 						if (!$(this).is(':hidden')) {
 							$('.menu_side_sub').not($(this)).slideUp(180);