Skip to content

Commit

Permalink
(v0.5.0) Add image information (sidenav) & Actualize btn
Browse files Browse the repository at this point in the history
  • Loading branch information
KeziahMoselle committed Feb 17, 2018
1 parent bae6f4a commit ee656c3
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 35 deletions.
11 changes: 11 additions & 0 deletions assets/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ body::-webkit-scrollbar {background-color: #242424; width: 0.5em;}
body::-webkit-scrollbar-thumb {background-color: #6688EC;}
ul.sidenav::-webkit-scrollbar {background-color: #242424; width: 0.5em;}
ul.sidenav::-webkit-scrollbar-thumb {background-color: #6688EC;}
ul#dropdownTagsParent::-webkit-scrollbar {background-color: #242424; width: 0.5em;}
ul#dropdownTagsParent::-webkit-scrollbar-thumb {background-color: #6688EC;}
::selection {background: #FFF;}

body {
Expand Down Expand Up @@ -118,6 +120,15 @@ div#loading {
text-align: center;
}

.card-image img {
cursor: pointer;
transition: filter 0.2s;
}
.card-image img:hover {
filter: brightness(80%)
}


/*
* MATERIALIZE CSS
*/
Expand Down
27 changes: 23 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
<ul id="nav-mobile" class="left hide-on-med-and-down">
<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>
Expand All @@ -47,11 +48,15 @@
<div class="user-view">
<div class="background dark"></div>
<span class="white-text name">Gelbooru Client</span>
<span class="white-text email">v0.4.1</span>
<span class="white-text email">v0.5.0</span>
</div>
</li>
<li><a class="subheader">Settings</a></li>
<li><label><input id="themeBtn" type="checkbox" class="filled-in" /><span>Enable light mode</span></label></li>
<li><a onclick="dontExist()" class="waves-effect"><i class="material-icons left">favorite</i>Favorites</a></li>
<li><a onclick="dontExist()" class="waves-effect"><i class="material-icons left">folder</i>Change download folder</a></li>
<li><a onclick="dontExist()" class="waves-effect"><i class="material-icons left">label</i>Exclude tags</a></li>
<li><a onclick="dontExist()" class="waves-effect"><i class="material-icons left">library_add</i>Add sources</a></li>
<li><a onclick="handleTheme()" id="displayTheme" class="waves-effect"><i class="material-icons left">invert_colors</i>Enable light theme</a></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>
Expand Down Expand Up @@ -90,19 +95,32 @@
<!-- If empty: waiting for a request -->
</div>
<!-- End list image cards -->

<!-- Sidenav with image details -->
<ul id="sidenavImageDetails" class="sidenav">
<li><a class="subheader">Image informations</a></li>
<li><a class="waves-effect" id="sidenavImageSource" class="waves-effect" href=""><i class="material-icons">open_in_new</i>Source</a></li>
<li><a class="waves-effect" id="sidenavImageDirectory"></a></li>
<li><a class="waves-effect" id="sidenavImageOwner"></a></li>
<li><a class="waves-effect" id="sidenavImageScore"></a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Tags</a></li>
<ul id="TagsParent">
</ul>
</ul>
<!-- [End Sidenav with image details ] -->

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


<!-- Require MaterializeCSS & The renderer process -->
<script src="./assets/js/materialize.min.js"></script>
<script src="./renderer.js"></script>
<script>
(function() {
// MaterializeCSS
const sidenav = document.querySelector('.sidenav');
var instanceSidenav = M.Sidenav.init(sidenav);
const instanceSidenav = M.Sidenav.init(sidenav);
document.getElementById('openSidenav').addEventListener('click', () => {
instanceSidenav.open();
});
Expand Down Expand Up @@ -136,5 +154,6 @@

})();
</script>
<script src="./renderer.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gelbooru-client",
"version": "0.4.1",
"version": "0.5.0",
"description": "You already know what it is.",
"main": "main.js",
"dependencies": {
Expand Down
111 changes: 81 additions & 30 deletions renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,16 @@
searchBar = document.getElementById('searchBar'), // Input type text
loading = document.getElementById('loading'), // Display loading or not
container = document.getElementById('container'), // Container of images
enableNsfw = document.getElementById('enableNsfw'), // Checkbox for nsfw
themeBtn = document.getElementById('themeBtn'), // Checkbox for theme
themeBtn = document.getElementById('themeBtn'), // Btn for theme
displayRating = document.getElementById('displayRating'), // Display Rating
displayLimit = document.getElementById('displayLimit'), // Display Image limit chip
displayLayout = document.getElementById('displayLayout'), // Display Card Layout
displayPid = document.getElementById('displayPid'), // Display chip
tagsResults = document.getElementById('tagsResults');
displayTheme = document.getElementById('displayTheme'), // Display actual theme
tagsResults = document.getElementById('tagsResults'), // Displays popular tags
sidenavImg = document.getElementById('sidenavImg'),
sidenavImageSource = document.getElementById('sidenavImageSource'),
sidenavImageTagsParent = document.getElementById('sidenavImageTagsParent');

// Value
var tags,
Expand All @@ -30,13 +33,10 @@

const store = new Store({
configName: 'settings',
defaults: {
theme: ''
}
defaults: {theme: ''}
});

var theme = store.get('theme');

var lastTheme = store.get('theme');
// Events

// Window events
Expand Down Expand Up @@ -91,20 +91,65 @@ var theme = store.get('theme');
}
};

function clickActualize()
{
emptyContainer();
tags = searchBar.value;
console.log(`Actualize with: ${tags} and ${rating}`);
var url = getUrl(tags, imgLimit, rating);
getResults(url);
}

// Sidenav image details

// Listen to the click on img and launch openImageDetails()
document.addEventListener('click', (event) => {
if (event.target.localName === 'img')
{
openImageDetails(event);
}
});

function openImageDetails(event)
{
// Fetch image informations with ID
var image_id = event.target.id;
axios.get(`https://gelbooru.com/index.php?page=dapi&s=post&q=index&id=${image_id}&json=1`)
.then((response) => { console.log(response.data[0]);
// Setting up values
var image = response.data[0],
tags = image.tags.split(' ');
// Update values
sidenavImageSource.setAttribute('href', `https://gelbooru.com/index.php?page=post&s=view&id=${image.id}`);
sidenavImageDirectory.innerHTML = `<i class="material-icons">folder</i> Directory: ${image.directory}`;
sidenavImageOwner.innerHTML = `<i class="material-icons">account_circle</i> Owner: ${image.owner}`;
sidenavImageScore.innerHTML = `<i class="material-icons">show_chart</i> Score: ${image.score}`;
tags.forEach(tag => {
document.getElementById('TagsParent').insertAdjacentHTML('beforeend', `
<li><a class="waves-effect">${tag}</a></li>
`);
});
});
// Open sidenav
const sidenavImageDetails = document.querySelector('#sidenavImageDetails.sidenav');
var instanceSidenavImageDetails = M.Sidenav.init(sidenavImageDetails);
instanceSidenavImageDetails.open();
}

// GET rating
function clickRating()
{
if (rating === 'rating:safe')
{
displayRating.innerHTML = 'lock_open';
rating = 'rating:explicit';
console.log(`Rating is now ${rating}`);
M.toast({html: `Rating is now ${rating}`});
}
else
{
displayRating.innerHTML = 'lock_outline';
rating = 'rating:safe';
console.log(`Rating is now ${rating}`);
M.toast({html: `Rating is now ${rating}`});
}
}

Expand Down Expand Up @@ -218,31 +263,42 @@ var theme = store.get('theme');
imgLimit = 10;
break;
}
console.log(`Image limit is now ${imgLimit}`);
M.toast({html: `Image limit is now ${imgLimit}`})
}

// Light & Dark Mode
if (theme === 'light-mode')

// Enable light theme if enabled before
if (lastTheme === 'light-mode')
{
root.classList.add('light-mode');
themeBtn.checked = true;
console.log('Theme : Light mode enabled.');
}

themeBtn.addEventListener('change', () => {
if (themeBtn.checked)
{
root.classList.add('light-mode');
store.set('theme','light-mode');
console.log('Theme : Light mode enabled.');
}
else
{
// Add / Remove light theme
function handleTheme()
{
var actualTheme = store.get('theme');
if (actualTheme === 'light-mode')
{ // Actual theme = Light Mode -> Switch on Dark Mode
root.classList.remove('light-mode');
displayTheme.innerHTML = '<i class="material-icons left">invert_colors</i> Enable light theme';
M.toast({html: 'Dark theme activated'});
store.set('theme','dark-mode');
console.log('Theme : Dark mode enabled.');
}
});
else
{ // Actual theme = Dark Mode -> Switch on Light Mode
root.classList.add('light-mode');
displayTheme.innerHTML = '<i class="material-icons left">invert_colors</i> Enable dark theme';
M.toast({html: 'Light theme activated'});
store.set('theme','light-mode');
}
}

function dontExist()
{
M.toast({html: 'This feature is not implemented yet !'});
}

// Handle links
document.addEventListener('click', (event) => {
Expand Down Expand Up @@ -322,16 +378,11 @@ function getResults(url)
container.insertAdjacentHTML('beforeend', `<div class="card-view">
<div class="card">
<div class="card-image">
<img src="${isSampleExist(sample_url) ? sample_url : image.file_url}">
</div>
<div class="card-action">
<a href="https://gelbooru.com/index.php?page=post&s=view&id=${image.id}">Source</a>
<a href="${image.file_url}">Save as</a>
<img id="${image.id}" src="${isSampleExist(sample_url) ? sample_url : image.file_url}">
</div>
</div>
</div>`);
}

});
}
else
Expand Down

0 comments on commit ee656c3

Please sign in to comment.