From c749b06cbbb739415af31253fb9dc85fca3c005a Mon Sep 17 00:00:00 2001 From: Marcin Haba Date: Mon, 11 Nov 2019 03:00:55 +0100 Subject: [PATCH] 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) --- gui/baculum/protected/Web/JavaScript/misc.js | 65 +++++++++++++++++-- .../protected/Web/Pages/NewJobWizard.page | 1 + 2 files changed, 62 insertions(+), 4 deletions(-) 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" -- 2.47.3