aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMario Vavti <mario@mariovavti.com>2021-07-03 14:27:55 +0200
committerMario Vavti <mario@mariovavti.com>2021-07-03 14:27:55 +0200
commit081d82218bc2e00169614f268278f7d9dc1e5402 (patch)
tree24d564957a0859499f47d8141ad5513d95eff5e3
parentcca3eb8c56f429e12d69033facb62ceda56cb27c (diff)
downloadvolse-hubzilla-081d82218bc2e00169614f268278f7d9dc1e5402.tar.gz
volse-hubzilla-081d82218bc2e00169614f268278f7d9dc1e5402.tar.bz2
volse-hubzilla-081d82218bc2e00169614f268278f7d9dc1e5402.zip
implement a very simple swipe mechanism for bringing in left aside
-rw-r--r--view/theme/redbasic/js/redbasic.js64
1 files changed, 53 insertions, 11 deletions
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 35811b524..1ce1a6d89 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,11 +20,18 @@ $(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);
+ $('#expand-aside').on('click', function() {
+ if($('main').hasClass('region_1-on')){
+ toggleAside('left');
+ }
+ else {
+ toggleAside('right');
+ }
+ });
$('section').on('click', function() {
if($('main').hasClass('region_1-on')){
- toggleAside();
+ toggleAside('left');
}
});
@@ -69,6 +76,39 @@ $(document).ready(function() {
}
}
setInterval(function () {checkNotify();}, 10 * 1000);
+
+ var touch_start = null;
+ window.addEventListener('touchstart', function(e) {
+ if (e.touches.length === 1){
+ //just one finger touched
+ touch_start = e.touches.item(0).clientX;
+ }
+ else {
+ //a second finger hit the screen, abort the touch
+ touch_start = null;
+ }
+ });
+
+ window.addEventListener('touchend', function(e) {
+ let touch_offset = 50; //at least 100px are a swipe
+ let touch_max = 100;
+ 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');
+ }
+ }
+ });
+
});
function setStyle(element, cssProperty) {
@@ -136,16 +176,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({ 'position': '', 'left': '' });
- $('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('overflow-x', '');
+ $('main').removeClass('region_1-on');
$('#overlay').remove();
}
- else {
- $('html, body').css({ 'position': 'sticky', 'left': 0 });
- $('main').addClass('region_1-on')
+ if (!$('main').hasClass('region_1-on') && swipe === 'right') {
+ $('#expand-aside-icon').removeClass('fa-arrow-circle-right').addClass('fa-arrow-circle-left');
+ $('html, body').css('overflow-x', 'hidden');
+ $('main').addClass('region_1-on');
$('<div id="overlay"></div>').appendTo('section');
}
}