franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Slide leaflet controls with panels

Browse Source
This commit is contained in:
Franzz
2022-11-24 20:03:03 +01:00
parent 4d8b374a2f
commit cee962ff50
2 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
masks/project.html
View File

@@ -206,23 +206,41 @@ function initPage(asHash) {
//Add "Loading" Post //Add "Loading" Post
getPost({type: 'loading', headerless: true, formatted_time: '', relative_time: ''}).appendTo($('#loading')); getPost({type: 'loading', headerless: true, formatted_time: '', relative_time: ''}).appendTo($('#loading'));
//Mobile events //Mobile Touchscreen Events
self.tmp('$Feed').onSwipe( self.tmp('$Feed').onSwipe(
(oPos) => { (oPos) => {
self.tmp('$Feed').css('right', Math.min(oPos.xStart - oPos.xMove, 0)+'px'); this.$Panels = $('.leaflet-right').add(self.tmp('$Feed')).each(function() {
$(this).data('initial-offset', parseInt($(this).css('right')));
});
},
(oPos) => {
this.$Panels.each(function(){
$(this).css({'right': ($(this).data('initial-offset') + Math.min(oPos.xStart - oPos.xMove, 0))+'px', 'transition': 'none'});
});
}, },
(oPos) => { (oPos) => {
if(oPos.xEnd - oPos.xStart > 100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleFeedPanel(false); if(oPos.xEnd - oPos.xStart > 100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleFeedPanel(false);
self.tmp('$Feed').css('right', ''); this.$Panels.each(function(){
$(this).css({'right': '', 'transition': ''});
});
} }
); );
self.tmp('$Settings').onSwipe( self.tmp('$Settings').onSwipe(
(oPos) => { (oPos) => {
self.tmp('$Settings').css('left', Math.min(oPos.xMove - oPos.xStart, 0)+'px'); this.$Panels = $('.leaflet-left').add(self.tmp('$Settings')).each(function() {
$(this).data('initial-offset', parseInt($(this).css('left')));
});
},
(oPos) => {
this.$Panels.each(function(){
$(this).css({'left': ($(this).data('initial-offset') + Math.min(oPos.xMove - oPos.xStart, 0))+'px', 'transition': 'none'});
});
}, },
(oPos) => { (oPos) => {
if(oPos.xEnd - oPos.xStart < -100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleSettingsPanel(false); if(oPos.xEnd - oPos.xStart < -100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleSettingsPanel(false);
self.tmp('$Settings').css('left', ''); this.$Panels.each(function(){
$(this).css({'left': '', 'transition': ''});
});
} }
); );

6
script/spot.js
View File

@@ -381,7 +381,7 @@ $.prototype.hoverSwap = function(sDefault, sHover)
.text(sDefault); .text(sDefault);
}; };
$.prototype.onSwipe = function(fOnMove, fOnEnd){ $.prototype.onSwipe = function(fOnStart, fOnMove, fOnEnd){
return $(this) return $(this)
.on('dragstart', (e) => { .on('dragstart', (e) => {
e.preventDefault(); e.preventDefault();
@@ -394,6 +394,10 @@ $.prototype.onSwipe = function(fOnMove, fOnEnd){
$This.data('x-move', oPos.x); $This.data('x-move', oPos.x);
$This.data('y-move', oPos.y); $This.data('y-move', oPos.y);
$This.data('moving', true).addClass('moving'); $This.data('moving', true).addClass('moving');
fOnStart({
xStart: $This.data('x-start'),
yStart: $This.data('y-start')
});
}) })
.on('touchmove mousemove', (e) => { .on('touchmove mousemove', (e) => {
var $This = $(this); var $This = $(this);