markus/photofloat
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Added swiping on mobile, fixed index.html, small changes to css

Browse Source
This commit is contained in:
Markus Pawlata
2018-12-07 01:35:40 +01:00
parent 4961c398a5
commit d9a96b827f
6 changed files with 192 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
web/js/011-xwiper.js Normal file
View File

@ -0,0 +1,129 @@
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Xwiper = function () {
function Xwiper(element) {
_classCallCheck(this, Xwiper);
this.element = null;
this.touchStartX = 0;
this.touchStartY = 0;
this.touchEndX = 0;
this.touchEndY = 0;
this.sensitive = 50;
this.onSwipeLeftAgent = null;
this.onSwipeRightAgent = null;
this.onSwipeUpAgent = null;
this.onSwipeDownAgent = null;
this.onTapAgent = null;
this.onTouchStart = this.onTouchStart.bind(this);
this.onTouchEnd = this.onTouchEnd.bind(this);
this.onSwipeLeft = this.onSwipeLeft.bind(this);
this.onSwipeRight = this.onSwipeRight.bind(this);
this.onSwipeUp = this.onSwipeUp.bind(this);
this.onSwipeDown = this.onSwipeDown.bind(this);
this.onTap = this.onTap.bind(this);
this.destroy = this.destroy.bind(this);
this.handleGesture = this.handleGesture.bind(this);
this.element = document.querySelector(element);
this.element.addEventListener('touchstart', this.onTouchStart, false);
this.element.addEventListener('touchend', this.onTouchEnd, false);
}
_createClass(Xwiper, [{
key: 'onTouchStart',
value: function onTouchStart(event) {
this.touchStartX = event.changedTouches[0].screenX;
this.touchStartY = event.changedTouches[0].screenY;
}
}, {
key: 'onTouchEnd',
value: function onTouchEnd(event) {
this.touchEndX = event.changedTouches[0].screenX;
this.touchEndY = event.changedTouches[0].screenY;
this.handleGesture();
}
}, {
key: 'onSwipeLeft',
value: function onSwipeLeft(func) {
this.onSwipeLeftAgent = func;
}
}, {
key: 'onSwipeRight',
value: function onSwipeRight(func) {
this.onSwipeRightAgent = func;
}
}, {
key: 'onSwipeUp',
value: function onSwipeUp(func) {
this.onSwipeUpAgent = func;
}
}, {
key: 'onSwipeDown',
value: function onSwipeDown(func) {
this.onSwipeDownAgent = func;
}
}, {
key: 'onTap',
value: function onTap(func) {
this.onTapAgent = func;
}
}, {
key: 'destroy',
value: function destroy() {
this.element.removeEventListener('touchstart', this.onTouchStart);
this.element.removeEventListener('touchend', this.onTouchEnd);
}
}, {
key: 'handleGesture',
value: function handleGesture() {
/**
* swiped left
*/
if (this.touchEndX + this.sensitive <= this.touchStartX) {
this.onSwipeLeftAgent && this.onSwipeLeftAgent();
return 'swiped left';
}
/**
* swiped right
*/
if (this.touchEndX - this.sensitive >= this.touchStartX) {
this.onSwipeRightAgent && this.onSwipeRightAgent();
return 'swiped right';
}
/**
* swiped up
*/
if (this.touchEndY + this.sensitive <= this.touchStartY) {
this.onSwipeUpAgent && this.onSwipeUpAgent();
return 'swiped up';
}
/**
* swiped down
*/
if (this.touchEndY - this.sensitive >= this.touchStartY) {
this.onSwipeDownAgent && this.onSwipeDownAgent();
return 'swiped down';
}
/**
* tap
*/
if (this.touchEndY === this.touchStartY) {
this.onTapAgent && this.onTapAgent();
return 'tap';
}
}
}]);
return Xwiper;
}();

16
web/js/011-display.js → web/js/012-display.js
View File

@ -164,9 +164,9 @@ $(document).ready(function() {
$(window).bind("resize", scaleImage);
container = $("#photo-view");
if (image.css("width") !== "100%" && container.height() * image.attr("ratio") > container.width())
image.css("width", "100%").css("height", "auto").css("position", "absolute").css("bottom", 0);
image.css("width", "100%").css("height", "auto");
else if (image.css("height") !== "100%")
image.css("height", "100%").css("width", "auto").css("position", "").css("bottom", "");
image.css("height", "100%").css("width", "auto");
}
function scaleVideo() {
var video, container;
@ -318,6 +318,7 @@ $(document).ready(function() {
photoFloat.parseHash(location.hash, hashParsed, die);
});
$(window).hashchange();
/* Keyboard: Left / Right */
$(document).keydown(function(e){
if (currentPhoto === null)
return true;
@ -330,6 +331,7 @@ $(document).ready(function() {
}
return true;
});
/* Mousewheel */
$(document).mousewheel(function(event, delta) {
if (currentPhoto === null)
return true;
@ -342,6 +344,16 @@ $(document).ready(function() {
}
return true;
});
/* Swipe */
xwiper = new Xwiper('#photo-view');
xwiper.onSwipeLeft(function(event){
window.location.href = $("#next").attr("href");
});
xwiper.onSwipeRight(function(event){
window.location.href = $("#back").attr("href");
});
$("#photo-box").mouseenter(function() {
$("#photo-links").stop().fadeTo("slow", 0.50).css("display", "inline");
});