From: Marcin Haba <marcin.haba@bacula.pl>
Date: Mon, 11 Nov 2019 02:00:55 +0000 (+0100)
Subject: baculum: Implement swipe event and use it to hide main menu on mobile devices
X-Git-Tag: Release-9.6.0~81
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c749b06cbbb739415af31253fb9dc85fca3c005a;p=thirdparty%2Fbacula.git

baculum: Implement swipe event and use it to hide main menu on mobile devices

Also fix visibility config action buttons on pages without main menu (for example wizards)
---

diff --git a/gui/baculum/protected/Web/JavaScript/misc.js b/gui/baculum/protected/Web/JavaScript/misc.js
index e4246f029..7095262b5 100644
--- a/gui/baculum/protected/Web/JavaScript/misc.js
+++ b/gui/baculum/protected/Web/JavaScript/misc.js
@@ -776,13 +776,25 @@ var W3SideBar = {
 		if (hide == 1) {
 			this.close();
 		}
+		if (!this.sidebar) {
+			// on pages without sidebar always show page main elements with 100% width.
+			this.page_main.css({'margin-left': '0', 'width': '100%'});
+		}
+		this.set_events();
+	},
+	set_events: function() {
+		this.sidebar.addEventListener('touchstart', handle_touch_start);
+		this.sidebar.addEventListener('touchmove', function(e) {
+			handle_touch_move(e, {
+				'swipe_left': function() {
+					this.close();
+				}.bind(this)
+			});
+		}.bind(this));
 	},
 	open: function() {
 		if (this.sidebar.style.display === 'block' || this.sidebar.style.display === '') {
-			Cookies.set_cookie('baculum_side_bar_hide', 1);
-			this.sidebar.style.display = 'none';
-			this.overlay_bg.style.display = 'none';
-			this.page_main.css({'margin-left': '0', 'width': '100%'});
+			this.close();
 		} else {
 			Cookies.set_cookie('baculum_side_bar_hide', 0);
 			this.sidebar.style.display = 'block';
@@ -987,6 +999,51 @@ function set_icon_css() {
 	$('.w3-spin').removeClass('w3-spin').addClass('fa-spin');
 }
 
+var touch_start_x = null;
+var touch_start_y = null;
+
+function handle_touch_start(e) {
+	// browser API or jQuery
+	var first_touch =  e.touches || e.originalEvent.touches
+	touch_start_x = first_touch[0].clientX;
+	touch_start_y = first_touch[0].clientY;
+}
+
+function handle_touch_move(e, callbacks) {
+	if (!touch_start_x || !touch_start_y || typeof(callbacks) !== 'object') {
+		// no touch type event or no callbacks
+		return;
+	}
+
+	var touch_end_x = e.touches[0].clientX;
+	var touch_end_y = e.touches[0].clientY;
+
+	var touch_diff_x = touch_start_x - touch_end_x;
+	var touch_diff_y = touch_start_y - touch_end_y;
+
+	if (Math.abs(touch_diff_x) > Math.abs(touch_diff_y)) {
+		if (touch_diff_x > 0 && callbacks.hasOwnProperty('swipe_left')) {
+			// left swipe
+			callbacks.swipe_left();
+		} else if (callbacks.hasOwnProperty('swipe_right')) {
+			// right swipe
+			callbacks.swipe_right();
+		}
+	} else {
+		if (touch_diff_y > 0 && callbacks.hasOwnProperty('swipe_up')) {
+			// up swipe
+			callbacks.swipe_up()
+		} else if (callbacks.hasOwnProperty('swipe_down')) {
+			// down swipe
+			callbacks.swipe_down()
+		}
+	}
+
+	// reset values
+	touch_start_x = null;
+	touch_start_y = null;
+}
+
 $(function() {
 	W3SideBar.init();
 	set_sbbr_compatibility();
diff --git a/gui/baculum/protected/Web/Pages/NewJobWizard.page b/gui/baculum/protected/Web/Pages/NewJobWizard.page
index 74279d6b2..cc778dace 100644
--- a/gui/baculum/protected/Web/Pages/NewJobWizard.page
+++ b/gui/baculum/protected/Web/Pages/NewJobWizard.page
@@ -5,6 +5,7 @@
 		StepStyle.CssClass="steps"
 		HeaderStyle.CssClass="wizard-body"
 		NavigationStyle.CssClass="navigation"
+		NavigationStyle.CustomStyle="margin-bottom: 55px"
 		UseDefaultLayout="false"
 		ShowSideBar="false"
 		OnPreviousButtonClick="wizardPrev"