From d9a96b827fa1171620094789338eca16e20929dc Mon Sep 17 00:00:00 2001 From: Markus Pawlata Date: Fri, 7 Dec 2018 01:35:40 +0100 Subject: [PATCH] Added swiping on mobile, fixed index.html, small changes to css --- scanner/floatapp/endpoints.py | 2 +- scanner/main.py | 2 +- web/css/000-controls.css | 12 +- web/index.html | 76 +++++++------ web/js/011-xwiper.js | 129 ++++++++++++++++++++++ web/js/{011-display.js => 012-display.js} | 16 ++- 6 files changed, 192 insertions(+), 45 deletions(-) create mode 100644 web/js/011-xwiper.js rename web/js/{011-display.js => 012-display.js} (97%) diff --git a/scanner/floatapp/endpoints.py b/scanner/floatapp/endpoints.py index e41693a..e98be8c 100644 --- a/scanner/floatapp/endpoints.py +++ b/scanner/floatapp/endpoints.py @@ -35,7 +35,7 @@ def scan_photos(): @app.route("/auth") def login(): - if request.args.get('logout'): + if 'logout' in request.args: logout_user() if current_user.is_authenticated: diff --git a/scanner/main.py b/scanner/main.py index 785af80..797d240 100755 --- a/scanner/main.py +++ b/scanner/main.py @@ -1,4 +1,4 @@ -#!/usr/bin/env python2 +#!./venv/bin/python from TreeWalker import TreeWalker from CachePath import message diff --git a/web/css/000-controls.css b/web/css/000-controls.css index a428fd9..ccc56ea 100644 --- a/web/css/000-controls.css +++ b/web/css/000-controls.css @@ -40,7 +40,7 @@ a:hover { padding: 0; } .current-thumb { - border-top: 1px solid #FFAD27 !important; + border-top: 4px solid #FFAD27 !important; } #subalbums { padding-top: 1.5em; @@ -63,7 +63,7 @@ a:hover { #next, #back { position: absolute; width: auto; - font-size: 4.5em; + font-size: 12em; line-height: 0; top: 40%; font-weight: bold; @@ -86,7 +86,6 @@ a:hover { bottom: 150px; top: 2.5em; overflow: hidden; - margin-bottom: 0.5em; left: 0; right: 0; text-align: center; @@ -102,9 +101,9 @@ a:hover { #photo-links { background-color: #000000; font-weight: bold; - height: 10px; - font-size: 10px; - line-height: 7px; + height: 12px; + font-size: 12px; + line-height: 10px; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; @@ -167,6 +166,7 @@ a:hover { white-space: nowrap; padding: 0 !important; text-align: center; + background-color: #999999; } #powered-by { diff --git a/web/index.html b/web/index.html index 2bcd2ac..f4d2f7f 100644 --- a/web/index.html +++ b/web/index.html @@ -1,44 +1,50 @@ - - - - Photos - - + + + + Photos + + -
Photos
-
- -
-
-
-
- - ‹ - -
-
-
-
Loading...
-
-
-
Powered by PhotoFloat
-
+
Photos
+
+ +
+
+
+
+ ‹ + +
-
-
Forgot my camera.
-
+
+
+
Loading...
+
+
+
Powered by PhotoFloat
+
+
+
Forgot my camera.
+
+ + + + +
diff --git a/web/js/011-xwiper.js b/web/js/011-xwiper.js new file mode 100644 index 0000000..e095b2a --- /dev/null +++ b/web/js/011-xwiper.js @@ -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; +}(); diff --git a/web/js/011-display.js b/web/js/012-display.js similarity index 97% rename from web/js/011-display.js rename to web/js/012-display.js index 7111572..f8bb2f8 100644 --- a/web/js/011-display.js +++ b/web/js/012-display.js @@ -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"); });