cynic
/
frontend
mirror of https://github.com/kurisufriend/frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6 from zhet1c/master

Browse Source 
fixed search
master
zhet1c 4 years ago committed by GitHub
parent 5398f3c4a4 b91c43f186
commit 1ca888ac8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 62 additions and 149 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      about.html
  2. 9
      catalog.html
  3. 14
      css/stylesheet.css
  4. 2
      css/title_list.css
  5. 4
      js/chapter_list.js
  6. 52
      js/search.js
  7. 22
      js/search_bar.js
  8. 8
      js/title_list.js
  9. 36
      search.html
  10. 7
      title.html

7
about.html
Unescape View File

@ -9,8 +9,10 @@
<body> <body>
<div id="header"> <div id="header">
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
<input id="search_bar" type="text" placeholder="Search"> <form action="/search.html">
<button id="search_button" onclick="search_bar()">Search</button> <input id="search_bar" type="search" name="title" placeholder="Search">
<button id="search_button" type="submit">Search</button>
</form>
<img id="logo" src="img/logo.png"/> <img id="logo" src="img/logo.png"/>
</div> </div>
@ -19,6 +21,5 @@
</div> </div>
</div> </div>
<script type="text/javacript" src="js/search_bar.js"></script>
</body> </body>
</html> </html>

9
catalog.html
Unescape View File

@ -10,8 +10,10 @@
<body> <body>
<div id="header"> <div id="header">
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
<input id="search_bar" type="text" placeholder="Search"> <form action="/search.html">
<button id="search_button" onclick="search_bar()">Search</button> <input id="search_bar" type="search" name="title" placeholder="Search">
<button id="search_button" type="submit">Search</button>
</form>
<img id="logo" src="img/logo.png"/> <img id="logo" src="img/logo.png"/>
</div> </div>
@ -39,9 +41,8 @@
</div> </div>
<script type="text/javascript" src="js/title_list.js"></script> <script type="text/javascript" src="js/title_list.js"></script>
<script type="text/javascript" src="js/search_bar.js"></script>
<script> <script>
document.onreadystatechange = load_titles("https://amangathing.ddns.net/instance"); document.onreadystatechange = load_titles("https://amangathing.ddns.net/instance/manga/search?title=a");
</script> </script>
</body> </body>
</html> </html>

14
css/stylesheet.css
Unescape View File

@ -50,10 +50,10 @@ a:visited {
#header { #header {
position: fixed; position: fixed;
top: 0%;
left: 0%;
width: 100%; width: 100%;
height: 5em; height: 5em;
top: 0%;
left: 0%;
background-color: var(--medium-grey); background-color: var(--medium-grey);
z-index: 100; z-index: 100;
overflow: hidden; overflow: hidden;
@ -61,39 +61,41 @@ a:visited {
#header #home { #header #home {
position: relative; position: relative;
top: 30%;
height: 40%; height: 40%;
top: 30%;
left: 2em; left: 2em;
} }
#header #search_bar { #header #search_bar {
position: absolute; position: absolute;
transform: translateY(50%);
background-color: white; background-color: white;
border: none; border: none;
padding: 1em; padding: 1em;
border-radius: 1em; border-radius: 1em;
left: 10em;
width: 50%; width: 50%;
height: 50%; height: 50%;
top: 30%;
left: 10em;
} }
#header #search_button { #header #search_button {
position: absolute; position: absolute;
height: 50%; height: 50%;
top: 30%;
left: calc(10em + 50% + 1em); left: calc(10em + 50% + 1em);
transform: translateY(50%);
} }
#header #logo { #header #logo {
position: absolute; position: absolute;
height: 180%; height: 180%;
right: 5%; right: 5%;
top: 5%;
} }
#content { #content {
position: absolute; position: absolute;
width: 80%; width: 80%;
height: auto;
left: 10%; left: 10%;
top: 5em; top: 5em;
bottom: 0em; bottom: 0em;

2
css/title_list.css
Unescape View File

@ -43,7 +43,7 @@ th {
#title_list img.thumbnail { #title_list img.thumbnail {
height: 100px; height: 100px;
width: 85px; width: 70px;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
padding-top: 2px; padding-top: 2px;

4
js/chapter_list.js
Unescape View File

@ -36,10 +36,10 @@ function load_info(remote, id) {
document.createElement("p"), document.createElement("p"),
{textContent: "Status: " + manga["publication_status"]} {textContent: "Status: " + manga["publication_status"]}
)); ));
var date = new Date(1000 * manga["last_updated"])
text.appendChild(Object.assign( text.appendChild(Object.assign(
document.createElement("p"), document.createElement("p"),
{textContent: "Last Updated: " + manga["last_updated"]} {textContent: "Last Updated: "+date.toLocaleTimeString("en-US")+" "+date.toLocaleDateString("en-US")}
)); ));
var tags = document.createElement("p"); var tags = document.createElement("p");

52
js/search.js
Unescape View File

@ -1,52 +0,0 @@
// ----------------------------------------------------
// Search function
// ----------------------------------------------------
function search_full() {
var parameter = [];
//get search string
var title = document.querySelector("#search input.title").value;
if(title != ""){
title = title.toLowerCase().replaceAll(" ", "+");
parameter.push("title="+title);
}
//get author
var author = document.querySelector("#search input.author").value;
if(author != ""){
author = author.toLowerCase().split(",").map(s => s.trim()).map(s => s.replaceAll(" ", "+"));
parameter.push("authors="+author.join(","));
}
//get artist
var artist = document.querySelector("#search input.artist").value;
if(artist != ""){
artist = artist.toLowerCase().split(",").map(s => s.trim()).map(s => s.replaceAll(" ", "+"));
parameter.push("artists="+artist.join(","));
}
//get tags
var tag = document.querySelector("#search input.tags").value;
if(tag != ""){
tag = tag.toLowerCase().split(/(?=\+|\-)/).map(s => s.trim()).map(s => s.replaceAll(" ", "+"));
parameter.push("tags="+tag.join(","));
}
//sort
var sort = document.querySelector("#content select.sort").value;
if(sort != ""){
parameter.push("sortby="+sort);
}
var query = parameter.join("&");
return query;
}
// ----------------------------------------------------
// Event handlers
// ----------------------------------------------------
var fields = document.getElementsByTagName("input");
Array.from(fields).map(field => field.addEventListener("keydown", function (e) {
e = e || window.event;
if(e.keyCode == 13){
e.preventDefault();
search_full();
}
}));

22
js/search_bar.js
Unescape View File

@ -1,22 +0,0 @@
// -------------------------------------------------------------
// Search bar function
// -------------------------------------------------------------
function search_bar() {
var query = document.querySelector("#header #search_bar").value;
if(query != ""){
query = query.toLowerCase().replaceAll(" ", "+");
var url = "https://amangathing.ddns.net/search.html?title=" + query;
console.log(query);
window.location.href = url;
}
}
document.querySelector("#header #search_bar").addEventListener("keydown", function (e) {
e = e || window.event;
if(e.keyCode == 13){
search_bar();
e.preventDefault();
}
});

8
js/title_list.js
Unescape View File

@ -6,8 +6,6 @@ function load_titles(remote) {
if(remote == ""){ if(remote == ""){
return; return;
} }
base = remote;
remote += "/manga/search?title=a";
fetch(remote) fetch(remote)
.then(res => res.json()) .then(res => res.json())
.then(function (res) { .then(function (res) {
@ -25,11 +23,11 @@ function load_titles(remote) {
)) ))
.appendChild(Object.assign( .appendChild(Object.assign(
document.createElement("a"), document.createElement("a"),
{href: "./title.html?id="+manga["id"]} {href: "/title.html?id="+manga["id"]}
)) ))
.appendChild(Object.assign( .appendChild(Object.assign(
document.createElement("img"), document.createElement("img"),
{className: "thumbnail", src: base+"/thumbnail/"+manga["id"]+".webp"} {className: "thumbnail", src: "/instance/thumbnail/"+manga["id"]+".webp"}
)); ));
//title //title
first_row.appendChild(Object.assign( first_row.appendChild(Object.assign(
@ -38,7 +36,7 @@ function load_titles(remote) {
)) ))
.appendChild(Object.assign( .appendChild(Object.assign(
document.createElement("a"), document.createElement("a"),
{href: "./title.html?id="+manga["id"]} {href: "/title.html?id="+manga["id"]}
)) ))
.appendChild(Object.assign( .appendChild(Object.assign(
document.createElement("b"), document.createElement("b"),

36
search.html
Unescape View File

@ -15,35 +15,37 @@
</div> </div>
<div id="content"> <div id="content">
<form action="/search.html">
<div id="search"> <div id="search">
<div class="one"> <div class="one">
<p class="title">Title:</p> <p class="title">Title:</p>
<input class="title" type="text" placeholder="Title"></input> <input class="title" type="search" name="title" placeholder="Title"></input>
</div> </div>
<div class="two"> <div class="two">
<p class="artist">Artist:</p> <p class="artist">Artist:</p>
<input class="artist" type="text" placeholder="Artist"></input> <input class="artist" type="search" name="artist" placeholder="Artist"></input>
<p class="author">Author:</p> <p class="author">Author:</p>
<input class="author" type="text" placeholder="Author"> <input class="author" type="search" name="author" placeholder="Author">
</div> </div>
<div class="three"> <div class="three">
<p class="tags">Tags:</p> <p class="tags">Tags:</p>
<input class="tags" type="text" placeholder="Tags"></input> <input class="tags" type="search" name="tags" placeholder="Tags"></input>
</div> </div>
<div class="four"> <div class="four">
<p class="sort">Sort:</p> <p class="sort">Sort:</p>
<select class="sort"> <select name="sort" class="sort">
<option value="name">name</option> <option value="name">name</option>
<option value="date">date</option> <option value="date">date</option>
<option value="status">status</option> <option value="status">status</option>
</select> </select>
</div> </div>
<button onclick="load_results();">Search</button> <button type="submit">Search</button>
</div> </div>
</form>
<h2 id="label"></h2> <h2 id="label"></h2>
@ -69,34 +71,16 @@
</div> </div>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript" src="js/title_list.js"></script> <script type="text/javascript" src="js/title_list.js"></script>
<script> <script>
var prefix = "https://amangathing.ddns.net/instance/manga/search?";
function load_results() {
var query = search_full()
if(query != ""){
console.log("on search", query);
load_titles(prefix+query);
document.querySelector("#title_list").style.visibility = "visible";
document.querySelector("#label").textContent = "Result";
}
}
document.onreadystatechange = function () { document.onreadystatechange = function () {
if(document.readyState == "interactive") { if(document.readyState == "interactive") {
var url = window.location.href; console.log("on load");
if(url.includes("?")){ load_titles("https://amangathing.ddns.net/instance/manga/search"+window.location.search);
var query = url.split("?")[1];
console.log("on load", query);
load_titles(prefix+query);
document.querySelector("#title_list").style.visibility = "visible"; document.querySelector("#title_list").style.visibility = "visible";
document.querySelector("#label").textContent = "Result"; document.querySelector("#label").textContent = "Result";
} }
} }
};
</script> </script>
</body> </body>
</html> </html>

7
title.html
Unescape View File

@ -11,8 +11,10 @@
<div id="header"> <div id="header">
<a href="./catalog.html"><img id="home" src="img/home.png"/></a> <a href="./catalog.html"><img id="home" src="img/home.png"/></a>
<input id="search_bar" type="text" placeholder="Search"> <form action="/search.html">
<button id="search_button" onclick="search_bar()">Search</button> <input id="search_bar" type="search" name="title" placeholder="Search">
<button id="search_button" type="submit">Search</button>
</form>
<img id="logo" src="img/logo.png"/> <img id="logo" src="img/logo.png"/>
</div> </div>
@ -46,7 +48,6 @@
</div> </div>
<script type="text/javascript" src="js/chapter_list.js"></script> <script type="text/javascript" src="js/chapter_list.js"></script>
<script type="text/javascript" src="js/search_bar.js"></script>
<script> <script>
document.onreadystatechange = load("https://amangathing.ddns.net/instance"); document.onreadystatechange = load("https://amangathing.ddns.net/instance");
</script> </script>

Write Preview
Loading…
Cancel
Save