Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

kinda infinite-scrolling #15

Closed
wants to merge 1 commit into from
Closed

kinda infinite-scrolling #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

195 changes: 116 additions & 79 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,110 @@
<!DOCTYPE html>
<html lang="en">

<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Gelbooru Client</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/materialize.css">
<link rel="stylesheet" href="./assets/css/index.css">
</head>
<body id="root">

<body id="root">
<!-- HEADER -->
<header>
<nav id="drag">
<ul id="tagsResults" class="left">
<li><a class="tagResult"></a></li>
<li><a class="tagResult"></a></li>
<li><a class="tagResult"></a></li>
</ul>
<ul class="no-drag right">
<li><a id="win-minimize"><i class="material-icons">remove</i></a></li>
<li><a id="win-fullscreen"><i class="material-icons">crop_free</i></a></li>
<li><a id="win-close"><i class="material-icons">close</i></a></li>
</ul>
</nav>

<nav id="titlebar">
<div class="nav-wrapper">
<a class="brand-logo center">Gel<b>booru</b></a>
<ul id="nav-mobile">
<li class="active"><a id="openSidenav" href="#"><i class="material-icons">menu</i></a></li>
<li><a title="Click to search" id="clickSearch" href="#"><i class="material-icons">search</i></a></li>
<li><a title="Click to actualize" onclick="clickActualize()" href="#"><i class="material-icons">cached</i></a></li>
<li><a title="Click to change image limit" onclick="clickLimit()" href="#"><div id="displayLimit" class="chip">10 images</div></a></li>
<li><a title="Click to enable NSFW" onclick="clickRating()" href="#"><i id="displayRating" class="material-icons">lock_outline</i></a></li>
<li><a title="Click to change cards layout" onclick="clickLayout()" href="#"><i id="displayLayout" class="material-icons">view_module</i></a></li>
</ul>
<ul class="right">
<li><a title="Previous page" onclick="clickPrevious()" href="#"><i class="material-icons">keyboard_arrow_left</i></a></li>
<li><a title="Page ID" ><div id="displayPid" class="chip">Page 1</div></a></li>
<li><a title="Next page" onclick="clickNext()" href="#"><i class="material-icons">keyboard_arrow_right</i></a></li>
</ul>
</div>
</nav>

<ul class="sidenav">
<li>
<div class="user-view">
<div class="background"></div>
<span class="white-text name">Gel<b>booru</b> Client</span>
<span class="white-text email">v0.8.0</span>
</div>
</li>
<li><a class="subheader">Pages</a></li>
<li><a onclick="clickActualize()" class="waves-effect"><i class="material-icons left">home</i>All</a></li>
<li><a onclick="searchTop()" class="waves-effect"><i class="material-icons left">star</i>Top</a></li>
<li><a onclick="searchHot()" class="waves-effect"><i class="material-icons left">whatshot</i>Hot</a></li>
<li><a onclick="openBlacklistModal()" class="waves-effect"><i class="material-icons left">label</i>Exclude tags</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Settings</a></li>
<li><p class="sidenav-form"><label><input id="checkboxTheme" onclick="handleTheme()" type="checkbox" class="filled-in" /><span>Light theme</span></label></p></li>
<li><p class="sidenav-form"><label><input type="checkbox" class="filled-in" disabled /><span>Endless scrolling</span></label></p></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Links</a></li>
<li><a class="waves-effect" href="https://gelbooru.com/"><i class="material-icons">open_in_new</i>Gelbooru</a></li>
<li><a class="waves-effect" href="https://gelbooru.com/index.php?page=help&topic=cheatsheet"><i class="material-icons">open_in_new</i>How tags works ?</a></li>
<li><a class="waves-effect" href="https://github.com/KeziahMoselle/gelbooru-client"><i class="material-icons">open_in_new</i>GitHub</a></li>
<nav id="drag">
<ul id="tagsResults" class="left">
<li><a class="tagResult"></a></li>
<li><a class="tagResult"></a></li>
<li><a class="tagResult"></a></li>
</ul>
<!-- [End First navbar] -->

<!-- Search bar -->
<nav id="nav-search">
<div class="nav-wrapper primary-dark">
<div class="input-field">
<input id="searchBar" type="search">
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i id="closeSearchBar" class="material-icons">close</i>
</div>
<ul class="no-drag right">
<li><a id="win-minimize"><i class="material-icons">remove</i></a></li>
<li><a id="win-fullscreen"><i class="material-icons">crop_free</i></a></li>
<li><a id="win-close"><i class="material-icons">close</i></a></li>
</ul>
</nav>

<nav id="titlebar">
<div class="nav-wrapper">
<a class="brand-logo center">Gel<b>booru</b></a>
<ul id="nav-mobile">
<li class="active"><a id="openSidenav" href="#"><i class="material-icons">menu</i></a></li>
<li><a title="Click to search" id="clickSearch" href="#"><i class="material-icons">search</i></a></li>
<li><a title="Click to actualize" onclick="clickActualize()" href="#"><i class="material-icons">cached</i></a></li>
<li><a title="Click to change image limit" onclick="clickLimit()" href="#">
<div id="displayLimit" class="chip">10 images</div>
</a></li>
<li><a title="Click to enable NSFW" onclick="clickRating()" href="#"><i id="displayRating" class="material-icons">lock_outline</i></a></li>
<li><a title="Click to change cards layout" onclick="clickLayout()" href="#"><i id="displayLayout" class="material-icons">view_module</i></a></li>
</ul>
<ul class="right">
<li><a title="Previous page" onclick="clickPrevious()" href="#"><i class="material-icons">keyboard_arrow_left</i></a></li>
<li><a title="Page ID">
<div id="displayPid" class="chip">Page 1</div>
</a></li>
<li><a title="Next page" onclick="clickNext()" href="#"><i class="material-icons">keyboard_arrow_right</i></a></li>
</ul>
</div>
</nav>

<ul class="sidenav">
<li>
<div class="user-view">
<div class="background"></div>
<span class="white-text name">Gel<b>booru</b> Client</span>
<span class="white-text email">v0.8.0</span>
</div>
</nav>
<!-- End Search bar -->
</li>
<li><a class="subheader">Pages</a></li>
<li><a onclick="clickActualize()" class="waves-effect"><i class="material-icons left">home</i>All</a></li>
<li><a onclick="searchTop()" class="waves-effect"><i class="material-icons left">star</i>Top</a></li>
<li><a onclick="searchHot()" class="waves-effect"><i class="material-icons left">whatshot</i>Hot</a></li>
<li><a onclick="openBlacklistModal()" class="waves-effect"><i class="material-icons left">label</i>Exclude tags</a></li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Settings</a></li>
<li>
<p class="sidenav-form"><label><input id="checkboxTheme" onclick="handleTheme()" type="checkbox" class="filled-in" /><span>Light
theme</span></label></p>
</li>
<li>
<p class="sidenav-form"><label><input type="checkbox" class="filled-in" disabled /><span>Endless scrolling</span></label></p>
</li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Links</a></li>
<li><a class="waves-effect" href="https://gelbooru.com/"><i class="material-icons">open_in_new</i>Gelbooru</a></li>
<li><a class="waves-effect" href="https://gelbooru.com/index.php?page=help&topic=cheatsheet"><i class="material-icons">open_in_new</i>How
tags works ?</a></li>
<li><a class="waves-effect" href="https://github.com/KeziahMoselle/gelbooru-client"><i class="material-icons">open_in_new</i>GitHub</a></li>
</ul>
<!-- [End First navbar] -->

<!-- Search bar -->
<nav id="nav-search">
<div class="nav-wrapper primary-dark">
<div class="input-field">
<input id="searchBar" type="search">
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i id="closeSearchBar" class="material-icons">close</i>
</div>
</div>
</nav>
<!-- End Search bar -->
</header>
<!-- [END HEADER] -->

<!-- MAIN -->
<main class="row">

<!-- Hidden by default, show when searching #loading -->
<div id="loading" class="hide">
<div class="progress">
<div class="indeterminate"></div>
<div class="indeterminate"></div>
</div>
</div>
<!-- [End loading] -->
Expand All @@ -102,12 +118,15 @@
<!-- Sidenav with image details -->
<ul id="sidenavImageDetails" class="sidenav">
<li><a class="subheader">Image informations</a></li>
<li><a class="waves-effect sidenav-button" id="sidenavImageSaveAs" href="#"><i class="material-icons">save</i>Save as</a></li>
<li><a class="waves-effect sidenav-button" id="sidenavImageSaveAs" href="#"><i class="material-icons">save</i>Save
as</a></li>
<li><a class="waves-effect" id="sidenavImageSource" href="#"><i class="material-icons">open_in_new</i>Source</a></li>
<li><a class="waves-effect" id="sidenavImageDirectory" href="#"></a></li>
<li><a class="waves-effect" id="sidenavImageOwner" href="#"></a></li>
<li><a class="waves-effect" id="sidenavImageScore" href="#"></a></li>
<li><div class="divider"></div></li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader" href="#">Tags</a></li>
<ul id="TagsParent">
</ul>
Expand All @@ -125,7 +144,7 @@ <h1>Your Blacklist</h1>

<div class="col s10 offset-s1 modalInput">
<div class="input-field">
<div class="chips chips-placeholder"></div>
<div class="chips chips-placeholder"></div>
</div>
</div>

Expand All @@ -137,17 +156,17 @@ <h1>Your Blacklist</h1>
</div>
</div>
<!-- [End Blacklist tags modal] -->

</main>
<!-- [END MAIN] -->

<!-- Require MaterializeCSS & The renderer process -->
<script src="./assets/js/materialize.min.js"></script>
<script>
(function() {
(function () {
// MaterializeCSS
const sidenav = document.querySelector('.sidenav'),
instanceSidenav = M.Sidenav.init(sidenav);
instanceSidenav = M.Sidenav.init(sidenav);
document.getElementById('openSidenav').addEventListener('click', () => {
instanceSidenav.open();
});
Expand All @@ -163,15 +182,13 @@ <h1>Your Blacklist</h1>
const main = document.querySelector('main.row');
var marginTop = 0;
clickSearch.addEventListener('click', () => {
if (marginTop === 0)
{
if (marginTop === 0) {
marginTop = 70;
navSearch.style.marginTop = '70px';
main.style.paddingTop = '148px';
document.getElementById('searchBar').focus();
}
else
{
else {
marginTop = 0;
main.style.paddingTop = '90px';
navSearch.style.marginTop = '0px';
Expand All @@ -188,6 +205,26 @@ <h1>Your Blacklist</h1>

})();
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./renderer.js"></script>
<script>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can remove this too
















</script>
</body>

</html>
18 changes: 17 additions & 1 deletion src/renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
var currentURL='';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variable you created is not used, so you can remove it too :)

// Modules
const shell = require('electron').shell,
remote = require('electron').remote,
Expand Down Expand Up @@ -469,6 +470,7 @@ function getResults(url)
return;
}
})
currentURL = url;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What did you want to do here ?

}

/**
Expand Down Expand Up @@ -511,6 +513,7 @@ function emptyContainer()
while (container.firstChild)
{
container.removeChild(container.firstChild);
pid = 1;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This cause a problem with the pagination : see here preview

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I was trying to do was that, if you use infinite-scrolling lets say you end up on page 10 then when you select the Top section in the lateral navbar the page won't restart the pagination.

}
}

Expand Down Expand Up @@ -553,4 +556,17 @@ function isTagInSearchBar(tag)
{
return false;
}
}
}

$(document).ready(function(){
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 0.1) {
showLoading();
hideLoading();
let url = getUrl(tags, imgLimit, rating);
getResults(url + `&pid=${pid}`);
pid++;
displayPid.innerHTML = `Page ${pid}`;
}
})
})