From e6617fecc52a23df9c909cf5778faef7bef2b248 Mon Sep 17 00:00:00 2001 From: Mystikfluu Date: Tue, 7 Jun 2022 09:16:17 +0200 Subject: [PATCH] added search page --- css/search.css | 12 +++++++ js/addnavbar.js | 83 +++------------------------------------------ js/htmlescape.js | 2 ++ js/index.js | 2 +- js/markdown.js | 46 +++++++++++++++++++++++++ js/posts.js | 49 ++------------------------ js/search.js | 80 +++++++++++++++++++++++++++++++++++++++++++ views/login.html | 1 + views/posts.html | 5 +-- views/register.html | 2 +- views/search.html | 48 ++++++++++++++++++++++++++ 11 files changed, 201 insertions(+), 129 deletions(-) create mode 100644 css/search.css create mode 100644 js/markdown.js create mode 100644 js/search.js create mode 100644 views/search.html diff --git a/css/search.css b/css/search.css new file mode 100644 index 0000000..f3cce2c --- /dev/null +++ b/css/search.css @@ -0,0 +1,12 @@ +* { + font-family: Arial, Helvetica, sans-serif; +} + +body { + background-color: black; + color: black; +} + +.form_div { + text-align: center; +} diff --git a/js/addnavbar.js b/js/addnavbar.js index 31c17b9..dc3b9c9 100644 --- a/js/addnavbar.js +++ b/js/addnavbar.js @@ -1,87 +1,12 @@ -(function(funcName, baseObj) { - "use strict"; - // The public function name defaults to window.docReady - // but you can modify the last line of this function to pass in a different object or method name - // if you want to put them in a different namespace and those will be used instead of - // window.docReady(...) - funcName = funcName || "docReady"; - baseObj = baseObj || window; - var readyList = []; - var readyFired = false; - var readyEventHandlersInstalled = false; - - // call this when the document is ready - // this function protects itself against being called more than once - function ready() { - if (!readyFired) { - // this must be set to true before we start calling callbacks - readyFired = true; - for (var i = 0; i < readyList.length; i++) { - // if a callback here happens to add new ready handlers, - // the docReady() function will see that it already fired - // and will schedule the callback to run right after - // this event loop finishes so all handlers will still execute - // in order and no new ones will be added to the readyList - // while we are processing the list - readyList[i].fn.call(window, readyList[i].ctx); - } - // allow any closures held by these functions to free - readyList = []; - } - } - - function readyStateChange() { - if ( document.readyState === "complete" ) { - ready(); - } - } - - // This is the one public interface - // docReady(fn, context); - // the context argument is optional - if present, it will be passed - // as an argument to the callback - baseObj[funcName] = function(callback, context) { - if (typeof callback !== "function") { - throw new TypeError("callback for docReady(fn) must be a function"); - } - // if ready has already fired, then just schedule the callback - // to fire asynchronously, but right away - if (readyFired) { - setTimeout(function() {callback(context);}, 1); - return; - } else { - // add the function and context to the list - readyList.push({fn: callback, ctx: context}); - } - // if document already ready to go, schedule the ready function to run - // IE only safe when readyState is "complete", others safe when readyState is "interactive" - if (document.readyState === "complete" || (!document.attachEvent && document.readyState === "interactive")) { - setTimeout(ready, 1); - } else if (!readyEventHandlersInstalled) { - // otherwise if we don't have event handlers installed, install them - if (document.addEventListener) { - // first choice is DOMContentLoaded event - document.addEventListener("DOMContentLoaded", ready, false); - // backup is window load event - window.addEventListener("load", ready, false); - } else { - // must be IE - document.attachEvent("onreadystatechange", readyStateChange); - window.attachEvent("onload", ready); - } - readyEventHandlersInstalled = true; - } - } -})("docReady", window); - const navbar = `` function addnavbar() { document.body.innerHTML = navbar + document.body.innerHTML } -window.docReady(addnavbar) +document.addEventListener("DOMContentLoaded", addnavbar) diff --git a/js/htmlescape.js b/js/htmlescape.js index 71635ae..a95c84b 100644 --- a/js/htmlescape.js +++ b/js/htmlescape.js @@ -13,6 +13,8 @@ const esca = { const pe = m => esca[m]; const escape = es => replace.call(es, ca, pe); +const htmlesc = es => replace.call(es, ca, pe); + const unes = { '&': '&', diff --git a/js/index.js b/js/index.js index 42b6b02..e54da4f 100644 --- a/js/index.js +++ b/js/index.js @@ -6,6 +6,6 @@ window.addEventListener("load",async function(){ document.getElementById("NoAccount").style="" document.getElementById("hide_user").style="display:none;" document.getElementById("hide_posts").style="display:none;" - + document.getElementById("hide_search").style="display:none;" } }) diff --git a/js/markdown.js b/js/markdown.js new file mode 100644 index 0000000..b04809e --- /dev/null +++ b/js/markdown.js @@ -0,0 +1,46 @@ +function urlify(text) { + let textregex = /(([a-z]+:\/\/)(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal|tk|ga|xxx|to))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi + return text.replace(textregex,'$1 ') +} + +function newlineify(text) { + let textregex = /(\n)/gi + return text.replace(textregex,'
') +} + +function crossout(text) { + let textregex = /~([^~]*)~/gi + return text.replace(textregex,'$1') +} + +function italicify(text) { + let textregex = /\*([^\*]*)\*/gi + return text.replace(textregex,'$1 ') +} + +function boldify(text) { + let textregex = /\*\*([^\*]*)\*\*/gi + return text.replace(textregex,'$1 ') +} + +function filterMentions(text) { + let textregex = /(@[^\s]*)/gi //if you find an "@" select everything until you find a whitespace (and save as $1) + return text.replace(textregex,`$1 `) +} +function filterReplies(text) { + let textregex = /_@_([^\s]*)/gi + return text.replace(textregex,`$1 `) +} + +function filterPost(text) { + text = htmlesc(text) + text = newlineify(text) + text = urlify(text) + text = filterReplies(text) + text = filterMentions(text) + text = crossout(text) + text = boldify(text) + text = italicify(text) + + return text +} diff --git a/js/posts.js b/js/posts.js index 87efe74..b798b5a 100644 --- a/js/posts.js +++ b/js/posts.js @@ -14,41 +14,9 @@ socket.addEventListener("message", function (event) { } } }) -function urlify(text) { - let textregex = /(([a-z]+:\/\/)(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal|tk|ga|xxx|to))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi - return text.replace(textregex,'$1 ') -} -function newlineify(text) { - let textregex = /(\n)/gi - return text.replace(textregex,'
') -} -function crossout(text) { - let textregex = /~([^~]*)~/gi - return text.replace(textregex,'$1') -} - -function italicify(text) { - let textregex = /\*([^\*]*)\*/gi - return text.replace(textregex,'$1 ') -} - -function boldify(text) { - let textregex = /\*\*([^\*]*)\*\*/gi - return text.replace(textregex,'$1 ') -} - -function filterMentions(text) { - let textregex = /(@[^\s]*)/gi //if you find an "@" select everything until you find a whitespace (and save as $1) - return text.replace(textregex,`$1 `) -} -function filterReplies(text) { - let textregex = /_@_([^\s]*)/gi - return text.replace(textregex,`$1 `) -} - -document.getElementById("post-btn").addEventListener("click",async function() { +async function postMessage() { let len = document.getElementById("post-text").value.length if(len >= 1001) { alert(`Error, your message cant contain more than 1000 characters! (${len})`) @@ -57,21 +25,10 @@ document.getElementById("post-btn").addEventListener("click",async function() { let r = await post("/api/post",{"message":document.getElementById("post-text").value}) if(window.location.href.split("?mention=")[1])location.replace('/posts'); document.getElementById("post-text").value="" -}) - -function filterPost(text) { - text = escape(text) - text = newlineify(text) - text = urlify(text) - text = filterReplies(text) - text = filterMentions(text) - text = crossout(text) - text = boldify(text) - text = italicify(text) - - return text } +document.getElementById("post-btn").addEventListener("click",postMessage) + function spacerTextNode() { return document.createTextNode(" | ") } diff --git a/js/search.js b/js/search.js new file mode 100644 index 0000000..6725514 --- /dev/null +++ b/js/search.js @@ -0,0 +1,80 @@ +const valuetoText = { + ["user"]:"Username", + ["post"]:"Post" +} + +function changed() { + document.getElementById("selector").placeholder = valuetoText[document.getElementById("type").value]; +} + +async function getJSON(url) { + return await(await fetch(url)).json() +} + +async function submit() { + const type = document.getElementById("type").value + const selector = document.getElementById("selector").value + document.getElementById("output").innerHTML="" + const res = await getJSON(`/api/search?type=${type}&selector=${selector}`) + //document.getElementById("output").innerHTML = res + console.log(res); + for (let i = 0; i < res.length; i++) { + let obj = res[i] + if(type=="user") { + createPost(obj.User_Name,obj.User_Bio || "wow such empty",0) + } else { + createPost(decodeURIComponent(obj.post_user_name),decodeURIComponent(obj.post_text),obj.post_time,obj.post_special_text,obj.post_id) + } + } +} + +function keydown(event) { + if (event.key === "Enter") { + event.preventDefault() + submit() + } +} + +function spacerTextNode() { + return document.createTextNode(" | ") +} + +function createPost(username,text,time,specialtext,postid) { + if(!specialtext)specialtext="" + const newDiv = document.createElement("div"); + const newP = document.createElement("p"); + const newA = document.createElement("a"); + const newSpan2 = document.createElement("span"); + const newSpan3 = document.createElement("span"); + + const newUsername = document.createTextNode(username); + let timedate = new Date(time) + time = timedate + time = time.toString() + time = time.split(" ") + time = time[0] + " " + time[1] + " " + time[2] + " " + time[3] + " " + time[4] + if(timedate=="Thu Jan 01 1970 01:00:00 GMT+0100 (Central European Standard Time)")time="" + const newTime = document.createTextNode(time) + const newSpecialText = document.createTextNode(specialtext) + + newDiv.classList.add("result"); + newSpan3.classList.add("specialtext") + + newA.appendChild(newUsername) + + newA.href = `/users/${username}` + newSpan2.appendChild(newTime) + newSpan3.appendChild(newSpecialText) + + + newP.appendChild(newA) + if(time != "")newP.appendChild(spacerTextNode()) + newP.appendChild(newSpan2) + if(specialtext != "" && time != "")newP.appendChild(spacerTextNode()) + newP.appendChild(newSpan3) + + newDiv.appendChild(newP) + newDiv.innerHTML += filterPost(text) + newDiv.id = postid + document.getElementById("output").appendChild(newDiv) +} diff --git a/views/login.html b/views/login.html index df92b35..e0e941a 100644 --- a/views/login.html +++ b/views/login.html @@ -9,6 +9,7 @@ } + diff --git a/views/posts.html b/views/posts.html index 05251e6..01c6d41 100644 --- a/views/posts.html +++ b/views/posts.html @@ -7,14 +7,15 @@ - + +
Username:

- +
diff --git a/views/register.html b/views/register.html index dc07ef2..79e800b 100644 --- a/views/register.html +++ b/views/register.html @@ -9,8 +9,8 @@ } + -

Register

diff --git a/views/search.html b/views/search.html new file mode 100644 index 0000000..04832f7 --- /dev/null +++ b/views/search.html @@ -0,0 +1,48 @@ + + + + + + + Search + + + + + + + + + + +
+
+ +
+
+ +
+
+
+ +
+
+ + +