Added swiping on mobile, fixed index.html, small changes to css
This commit is contained in:
Markus Pawlata
parent
4961c398a5
commit
d9a96b827f
@ -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:
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#!/usr/bin/env python2
|
||||
#!./venv/bin/python
|
||||
|
||||
from TreeWalker import TreeWalker
|
||||
from CachePath import message
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -1,44 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="medium" content="image" />
|
||||
<title>Photos</title>
|
||||
<link href="css/styles.min.css" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="js/scripts.min.js"></script>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="medium" content="image" />
|
||||
<title>Photos</title>
|
||||
<link href="css/styles.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="js/scripts.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="title">Photos</div>
|
||||
<div id="photo-view">
|
||||
<div id="photo-box">
|
||||
<a id="next-photo"><img id="photo" /></a>
|
||||
<div id="photo-bar">
|
||||
<div id="photo-links">
|
||||
<a id="metadata-link" href="javascript:void(0)">show metadata</a> | <a id="original-link" target="_blank">download original</a><span id="fullscreen-divider"> | </span><a id="fullscreen" href="javascript:void(0)">fullscreen</a>
|
||||
</div>
|
||||
<div id="metadata"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="video-box">
|
||||
<div id="video-box-inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a id="back">‹</a>
|
||||
<a id="next">›</a>
|
||||
</div>
|
||||
<div id="album-view">
|
||||
<div id="thumbs">
|
||||
<div id="loading">Loading...</div>
|
||||
</div>
|
||||
<div id="subalbums"></div>
|
||||
<div id="powered-by">Powered by <a href="http://www.zx2c4.com/projects/photofloat/" target="_blank">PhotoFloat</a></div>
|
||||
</div>
|
||||
<div id="title">Photos</div>
|
||||
<div id="photo-view">
|
||||
<div id="photo-box">
|
||||
<a id="next-photo">
|
||||
<img id="photo" alt="Dynamic image, no alt available" src="./img/image-placeholder.png" />
|
||||
</a>
|
||||
<div id="photo-bar">
|
||||
<div id="photo-links">
|
||||
<a id="metadata-link" href="javascript:void(0)">show metadata</a> | <a id="original-link" target="_blank">download original</a><span id="fullscreen-divider"> | </span><a id="fullscreen" href="javascript:void(0)">fullscreen</a>
|
||||
</div>
|
||||
<div id="metadata"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="video-box">
|
||||
<div id="video-box-inner">
|
||||
</div>
|
||||
</div>
|
||||
<a id="back">‹</a>
|
||||
<a id="next">›</a>
|
||||
</div>
|
||||
|
||||
<div id="error-overlay"></div>
|
||||
<div id="error-text">Forgot my camera.</div>
|
||||
<div id="auth-text"><form id="auth-form"><input id="password" type="password" /><input type="submit" value="Login" /></form</div>
|
||||
<div id="album-view">
|
||||
<div id="thumbs">
|
||||
<div id="loading">Loading...</div>
|
||||
</div>
|
||||
<div id="subalbums"></div>
|
||||
<div id="powered-by">Powered by <a href="http://www.zx2c4.com/projects/photofloat/" target="_blank">PhotoFloat</a></div>
|
||||
</div>
|
||||
|
||||
<div id="error-overlay"></div>
|
||||
<div id="error-text">Forgot my camera.</div>
|
||||
<div id="auth-text">
|
||||
<form id="auth-form">
|
||||
<input id="password" type="password" />
|
||||
<input type="submit" value="Login" />
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
129
web/js/011-xwiper.js
Normal file
129
web/js/011-xwiper.js
Normal 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;
|
||||
}();
|
||||
@ -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");
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user