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

Add a transition on panel closing (swipe close)

Browse Source
This commit is contained in:
Franzz
2022-09-27 17:23:21 +02:00
parent 69f811d1d5
commit 500c679cd6
5 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
masks/project.html
View File

@@ -207,8 +207,24 @@ function initPage(asHash) {
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 events
self.tmp('$Feed').onSwipe((oPos) => {if(oPos.xEnd - oPos.xStart > 100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleFeedPanel(false);}); self.tmp('$Feed').onSwipe(
self.tmp('$Settings').onSwipe((oPos) => {if(oPos.xEnd - oPos.xStart < -100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleSettingsPanel(false);}); (oPos) => {
self.tmp('$Feed').css('right', Math.min(oPos.xStart - oPos.xMove, 0)+'px');
},
(oPos) => {
if(oPos.xEnd - oPos.xStart > 100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleFeedPanel(false);
self.tmp('$Feed').css('right', '');
}
);
self.tmp('$Settings').onSwipe(
(oPos) => {
self.tmp('$Settings').css('left', Math.min(oPos.xMove - oPos.xStart, 0)+'px');
},
(oPos) => {
if(oPos.xEnd - oPos.xStart < -100 && Math.abs(oPos.yEnd - oPos.yStart) < 100) toggleSettingsPanel(false);
self.tmp('$Settings').css('left', '');
}
);
//Feed Panel //Feed Panel
initPosts(); initPosts();
@@ -933,7 +949,7 @@ function getPost(asPost) {
}, },
function(){ function(){
var oMarker = oSpot.tmp(['markers', $(this).data('id')]); var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
if(oMarker.isPopupOpen() && !$(this).data('clicked')) oMarker.closePopup(); if(oMarker && oMarker.isPopupOpen() && !$(this).data('clicked')) oMarker.closePopup();
$(this).data('clicked', false); $(this).data('clicked', false);
} }
); );

24
script/spot.js
View File

@@ -381,7 +381,7 @@ $.prototype.hoverSwap = function(sDefault, sHover)
.text(sDefault); .text(sDefault);
}; };
$.prototype.onSwipe = function(fOnEnd){ $.prototype.onSwipe = function(fOnMove, fOnEnd){
return $(this) return $(this)
.on('dragstart', (e) => { .on('dragstart', (e) => {
e.preventDefault(); e.preventDefault();
@@ -399,17 +399,25 @@ $.prototype.onSwipe = function(fOnEnd){
var oPos = getDragPosition(e); var oPos = getDragPosition(e);
$This.data('x-move', oPos.x); $This.data('x-move', oPos.x);
$This.data('y-move', oPos.y); $This.data('y-move', oPos.y);
fOnMove({
xStart: $This.data('x-start'),
yStart: $This.data('y-start'),
xMove: $This.data('x-move'),
yMove: $This.data('y-move')
});
} }
}) })
.on('mouseup mouseleave touchend', (e) => { .on('mouseup mouseleave touchend', (e) => {
var $This = $(this); var $This = $(this);
$This.data('moving', false).removeClass('moving'); if($This.data('moving')) {
fOnEnd({ $This.data('moving', false).removeClass('moving');
xStart: $This.data('x-start'), fOnEnd({
yStart: $This.data('y-start'), xStart: $This.data('x-start'),
xEnd: $This.data('x-move'), yStart: $This.data('y-start'),
yEnd: $This.data('y-move') xEnd: $This.data('x-move'),
}); yEnd: $This.data('y-move')
});
}
}); });
}; };

2
style/_mask_project.scss
View File

@@ -372,9 +372,11 @@ $legend-color: $post-color;
overflow: hidden; overflow: hidden;
z-index: 999; z-index: 999;
cursor: grab; cursor: grab;
user-select: none;
&.moving { &.moving {
cursor: grabbing; cursor: grabbing;
transition: none;
} }
input, textarea { input, textarea {

2
style/spot.css
View File

File diff suppressed because one or more lines are too long

2
style/spot.css.map
View File

File diff suppressed because one or more lines are too long