1 files changed, 60 insertions, 15 deletions

diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index b0b8d5dfc..9312d8390 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -11,7 +11,7 @@ $(document).ready(function() {
 			if($(window).width() < 992) {
 				$('main').css('width', $(window).width() + $('aside').outerWidth() );
 			} else {
-				$('main').css('width', '100%' );
+				$('main').css('width', '100%');
 			}
 		});
 	}
@@ -20,15 +20,15 @@ $(document).ready(function() {
 	stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_1')).getPropertyValue('padding-top')), 0);
 	stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', '.content', parseFloat(window.getComputedStyle(document.querySelector('#region_3')).getPropertyValue('padding-top')), 20);
 
-	$('#expand-aside').on('click', toggleAside);
-
-	$('section').on('click', function() {
+	$('#expand-aside').on('click', function() {
 		if($('main').hasClass('region_1-on')){
-			toggleAside();
+			toggleAside('left');
+		}
+		else {
+			toggleAside('right');
 		}
 	});
 
-
 	$('.usermenu').click(function() {
 		if($('#navbar-collapse-1, #navbar-collapse-2').hasClass('show')){
 			$('#navbar-collapse-1, #navbar-collapse-2').removeClass('show');
@@ -69,6 +69,49 @@ $(document).ready(function() {
 		}
 	}
 	setInterval(function () {checkNotify();}, 10 * 1000);
+
+	var touch_start = null;
+	var touch_max = window.innerWidth / 10;
+
+	window.addEventListener('touchstart', function(e) {
+		if (e.touches.length === 1){
+			//just one finger touched
+			touch_start = e.touches.item(0).clientX;
+			if (touch_start < touch_max) {
+				$('html, body').css('overflow-y', 'hidden');
+			}
+		}
+		else {
+			//a second finger hit the screen, abort the touch
+			touch_start = null;
+		}
+	});
+
+	window.addEventListener('touchend', function(e) {
+		$('html, body').css('overflow-y', '');
+
+		let touch_offset = 30; //at least 30px are a swipe
+		if (touch_start) {
+			//the only finger that hit the screen left it
+			let touch_end = e.changedTouches.item(0).clientX;
+
+			if (touch_end > (touch_start + touch_offset)) {
+				//a left -> right swipe
+				if (touch_start < touch_max) {
+					toggleAside('right');
+				}
+			}
+			if (touch_end < (touch_start - touch_offset)) {
+				//a right -> left swipe
+				//toggleAside('left');
+			}
+		}
+	});
+
+	$(document).on('hz:hqControlsClickAction', function(e) {
+		toggleAside('left');
+	});
+
 });
 
 function setStyle(element, cssProperty) {
@@ -136,16 +179,18 @@ function makeFullScreen(full) {
 	}
 }
 
-function toggleAside() {
-	$('#expand-aside-icon').toggleClass('fa-arrow-circle-right').toggleClass('fa-arrow-circle-left');
-	if($('main').hasClass('region_1-on')){
-		$('html, body').css('overflow-x', '');
-		$('main').removeClass('region_1-on')
+function toggleAside(swipe) {
+
+	if ($('main').hasClass('region_1-on') && swipe === 'left') {
+		$('#expand-aside-icon').addClass('fa-arrow-circle-right').removeClass('fa-arrow-circle-left');
+		$('html, body').css({ 'position': '', left: '' });
+		$('main').removeClass('region_1-on');
 		$('#overlay').remove();
 	}
-	else {
-		$('html, body').css('overflow-x', 'hidden');
-		$('main').addClass('region_1-on')
-		$('<div id="overlay"></div>').appendTo('section');
+	if (!$('main').hasClass('region_1-on') && swipe === 'right') {
+		$('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left');
+		$('html, body').css({ 'position': 'sticky',  'left': '0px'});
+		$('main').addClass('region_1-on');
+		$('<div id="overlay"></div>').appendTo('body').one('click', function() { toggleAside('left'); });
 	}
 }