ImgScroll/html/index.html

289 lines
10 KiB
HTML
Raw Permalink Normal View History

<!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! &#128591;
<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! &#128071;
<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;
}
};
2018-10-11 21:35:04 +02:00
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>");
2018-10-11 21:35:04 +02:00
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>