289 lines
10 KiB
HTML
289 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="apple-mobile-web-app-title" content="ImgScroll">
|
|
<link rel="apple-touch-icon" sizes="200x200" href="/images/icons/favicon-200x200.png">
|
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" >
|
|
<link rel="icon" type="image/png" sizes="200x200" href="/images/icons/favicon-200x200.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png">
|
|
|
|
<meta name="msapplication-TileColor" content="#2b5797">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link rel="manifest" href="/manifest.json">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
|
|
integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous"/>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/simple-grid.css">
|
|
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css"
|
|
rel="stylesheet"/>
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
|
|
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.3.0-rc.1/jquery.visible.js"
|
|
integrity="sha256-q+RpExt086O3gG+Fns8mvpJPXbKd5fV6e/QyGGrIHlw=" crossorigin="anonymous"></script>
|
|
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript"
|
|
charset="utf-8"></script>
|
|
|
|
|
|
<title>ImgScroll</title>
|
|
</head>
|
|
<body>
|
|
<div id="top">
|
|
<div class="scroll-slider-container hidden">
|
|
<div class="scroll-slider-background"></div>
|
|
<div class="scroll-slider-slider">
|
|
<div class="center-center">
|
|
<div class="scroll-slider-element">
|
|
<div class="scroll-slider-completed" style="width: 30%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="scroll-slider-icons">
|
|
<div class="center-center"><i class="fa fa-pause"></i><i class="close fa fa-times"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="home-icon"><a href="/"><i class="fa fa-home"></i></a></div>
|
|
<div class="top">
|
|
<div class="top-overlay">
|
|
<div class="image-wrapper">
|
|
<img src="/images/top-big.jpg"/>
|
|
</div>
|
|
<div class="header">
|
|
<h1 class="header-single-item">ImgScroll</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-info-header" style="height: 223px;">
|
|
<div>
|
|
<div class="page-info-content">
|
|
<div class="page-info-line">
|
|
<strong>files: </strong>
|
|
<span id="fileCount"></span>
|
|
</div>
|
|
<div class="page-info-line">
|
|
<strong>subreddits: </strong>
|
|
<span id="subredditCount"></span>
|
|
</div>
|
|
<div class="page-info-line" id="subreddits">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
</div>
|
|
<div class="container footer-container clearfix">
|
|
<div class="row">
|
|
<div class="col-12 footer" id="scrollload" style="margin-bottom: 2em; display: none">
|
|
Neuer Kram wird geladen! 🙏
|
|
<br/>
|
|
|
|
<!--Indeterminate progress-bar-->
|
|
<div class="load-bar">
|
|
<div class="bar"></div>
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 footer" id="scrollnext" style="margin-bottom: 25em; display: none">
|
|
Scrolle weiter um auf die nächste Seite zu gelangen! 👇
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="checkme"></div>
|
|
|
|
<script>
|
|
var MAX_IMGS = 30;
|
|
|
|
|
|
$.urlParam = function (name) {
|
|
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
|
|
if (results == null) {
|
|
return null;
|
|
}
|
|
else {
|
|
return decodeURI(results[1]) || 0;
|
|
}
|
|
};
|
|
|
|
var lastCreated = $.urlParam('o') === null ? -1 : $.urlParam('o');
|
|
var waitForIMG = 0;
|
|
var loadedImages = 0;
|
|
var loading = false;
|
|
var sub = [];
|
|
var isMobile = false;
|
|
|
|
function imageLoaded(elm) {
|
|
loadedImages++;
|
|
|
|
waitForIMG--;
|
|
|
|
if (waitForIMG === 0) {
|
|
loading = false;
|
|
|
|
if (loadedImages >= MAX_IMGS) {
|
|
$("#scrollload").hide();
|
|
$("#scrollnext").show();
|
|
} else {
|
|
$("#scrollload").show();
|
|
}
|
|
|
|
resizeAllGridItems();
|
|
}
|
|
}
|
|
|
|
// https://codepen.io/anon/pen/pxejxg
|
|
function resizeGridItem(item) {
|
|
grid = document.getElementsByClassName("grid")[0];
|
|
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
|
|
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
|
|
rowSpan = Math.ceil((item.querySelector('.content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
|
|
item.style.gridRowEnd = "span " + rowSpan;
|
|
item.style.height = item.clientHeight + "px";
|
|
item.style.width = item.clientWidth + "px";
|
|
}
|
|
|
|
function resizeAllGridItems() {
|
|
$(".content").removeClass("h100");
|
|
allItems = document.getElementsByClassName("item");
|
|
for (x = 0; x < allItems.length; x++) {
|
|
resizeGridItem(allItems[x]);
|
|
}
|
|
$(".content").addClass("h100");
|
|
}
|
|
|
|
function loadImages() {
|
|
loading = true;
|
|
$.ajax({
|
|
url: '/api/get',
|
|
type: "GET",
|
|
async: true,
|
|
data: {
|
|
'subreddits': $.urlParam('r'),
|
|
'offset': lastCreated
|
|
},
|
|
success: function (data) {
|
|
$.each(data, function (key, value) {
|
|
$("#scrollload").hide();
|
|
|
|
var media = "";
|
|
var src = "/api/img?iid=" + value.iid + "&id=" + value.id;
|
|
|
|
if (value.webm || value.mp4) {
|
|
media = "<video muted autoplay loop onloadeddata='imageLoaded(this);'><source src='" + src + "' type='video/" + (value.mp4 ? "mp4" : "webm") + "'></video>";
|
|
} else {
|
|
media = "<a href='" + src + "' data-featherlight='image'><img src='" + src + "' onload='imageLoaded(this);'></a>";
|
|
}
|
|
|
|
var elm = $(".grid").append("<div class='item' id='" + value.iid + "'><div class='content'>" + media + "<div class='overlay' style='" + (isMobile ? "" : "display:none") + "'><a href='https://reddit.com/r/" + value.subreddit + "'>" + value.subreddit + "</a><a href='https://reddit.com/r/" + value.subreddit + "/comments/" + value.id + "' target='_blank' style='padding-left: 0.4em;'><i class='fa fa-external-link' aria-hidden='true'></i></a>\</div></div></div>");
|
|
lastCreated = value.iid;
|
|
waitForIMG++;
|
|
|
|
$("#" + value.iid).hover(function () {
|
|
$(this).find("img").addClass("hoverme");
|
|
$(this).find(".overlay").show();
|
|
},
|
|
function () {
|
|
$(this).find("img").removeClass("hoverme");
|
|
$(this).find(".overlay").hide();
|
|
});
|
|
|
|
if (value.webm || value.mp4) {
|
|
|
|
$("#" + value.iid).on("click", function (e) {
|
|
e.preventDefault();
|
|
$.featherlight($(this).find("video"));
|
|
});
|
|
}
|
|
});
|
|
},
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
console.log(textStatus, errorThrown);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
|
|
|
|
// window.addEventListener("resize", resizeAllGridItems);
|
|
|
|
$(window).scroll(function () {
|
|
if ($('#checkme').visible(true, false, 'vertical')) {
|
|
if (loadedImages >= MAX_IMGS) {
|
|
window.location = "/?r=" + $.urlParam('r') + "&o=" + lastCreated;
|
|
} else if (!loading) {
|
|
loadImages();
|
|
}
|
|
}
|
|
});
|
|
|
|
if ($.urlParam('r') !== null) {
|
|
sub = $.urlParam('r').split(",");
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/api/info',
|
|
type: "GET",
|
|
async: false,
|
|
data: {
|
|
'subreddits': $.urlParam('r'),
|
|
},
|
|
success: function (data) {
|
|
if ($.urlParam('r') == null) {
|
|
$("#fileCount").html(data.files + " <i>(all files in db)</i>");
|
|
} else {
|
|
$("#fileCount").html(data.files_subreddits + " <i>(all selected subreddits)</i>");
|
|
|
|
}
|
|
$("#subredditCount").html(data.subreddits_count);
|
|
|
|
$("#subreddits").append("<strong>subreddits: </strong>");
|
|
$.each(data.subreddits, function (key, value) {
|
|
var tagClass = "subreddit";
|
|
if (sub.indexOf(value) > -1) tagClass += " reddit-selected";
|
|
|
|
$("#subreddits").append("<a href='#' class='" + tagClass + "' data-val='" + value + "'>/r/" + value + "</a>, ");
|
|
});
|
|
},
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
console.log(textStatus, errorThrown);
|
|
}
|
|
});
|
|
|
|
$(".subreddit").on('click', function (e) {
|
|
e.preventDefault();
|
|
var subreddit = $(this).data("val");
|
|
|
|
if (sub.indexOf(subreddit) > -1) {
|
|
sub.splice(sub.indexOf(subreddit), 1);
|
|
} else {
|
|
sub.push(subreddit);
|
|
}
|
|
|
|
if (sub.length === 0) {
|
|
window.location = "/";
|
|
} else {
|
|
window.location = "/?r=" + sub.join(",");
|
|
|
|
}
|
|
});
|
|
|
|
if ($.urlParam('r') != null) loadImages();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |