|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<link rel="stylesheet" type="text/css" href="/reset.css">
|
|
|
<link rel="stylesheet" type="text/css" href="/sig.css">
|
|
|
<meta charset="UTF-8">
|
|
|
<script type="text/javascript">
|
|
|
function loadCodeBackground() {
|
|
|
fetch("/codeBackground").then((data)=>data.text())
|
|
|
.then((data)=>{
|
|
|
document.getElementById("codeForeground").innerText=data
|
|
|
document.getElementById("codeBackground").innerText=data
|
|
|
})
|
|
|
}
|
|
|
loadCodeBackground();
|
|
|
</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="contentBody">
|
|
|
<div class="contentWrapper"><h1>And More</h1><div class="expandedContent" id="content_out/articles/test articles/test3.article">
|
|
|
<p class="color1">
|
|
|
Curabitur suscipit quam tellus, non rhoncus diam vehicula in. Aliquam ut dapibus tortor. Cras accumsan arcu vel ante maximus ornare. Nam tempus fermentum leo maximus euismod. Donec vehicula pretium est a ultrices. Nunc blandit nibh lorem, nec blandit leo posuere quis. Sed mauris ligula, euismod eu aliquam vel, rhoncus eget magna. Proin eget tortor ut ligula suscipit mattis. Integer rutrum aliquet eleifend. Suspendisse leo libero, placerat nec mi id, sagittis malesuada felis. Quisque euismod ante cursus elit lobortis, eu tempus ligula condimentum. Mauris viverra metus et dignissim efficitur. Ut placerat nunc nunc, eu tempus neque ultrices nec. Suspendisse et magna risus. Phasellus in ullamcorper tortor. Sed lobortis ut mi in blandit.
|
|
|
</p>
|
|
|
</div><div class="datebar"></div><div class="date">30 Apr 2022 6:14PM</div></div>
|
|
|
<hr/>
|
|
|
<script type="text/javascript">
|
|
|
function changeColor() {
|
|
|
document.getElementById("submit").style.borderColor=document.getElementById("msg").style.borderColor=document.getElementById("name").style.borderColor=document.getElementById("col").style.borderColor=document.getElementById("col").options[document.getElementById("col").selectedIndex].text
|
|
|
}
|
|
|
function submit() {
|
|
|
document.getElementById("submit").disabled=
|
|
|
document.getElementById("name").disabled=
|
|
|
document.getElementById("col").disabled=
|
|
|
document.getElementById("msg").disabled=true;
|
|
|
fetch("/COMMENTS?submit=true&article=test3.comment&message="+encodeURIComponent(document.getElementById("msg").value)+"&name="
|
|
|
+encodeURIComponent(document.getElementById("name").value)+"&color="
|
|
|
+encodeURIComponent(document.getElementById("col").options[document.getElementById("col").selectedIndex].text)
|
|
|
).then((data)=>data.text())
|
|
|
.then((data)=>{
|
|
|
document.getElementById("msg").value=""
|
|
|
document.getElementById("name").value=""
|
|
|
document.getElementById("submit").disabled=
|
|
|
document.getElementById("name").disabled=
|
|
|
document.getElementById("col").disabled=
|
|
|
document.getElementById("msg").disabled=false;
|
|
|
fetchComments()
|
|
|
})
|
|
|
}
|
|
|
function insert(c1,c2) {
|
|
|
if (document.getElementById("msg").selectionStart==document.getElementById("msg").selectionEnd) {
|
|
|
//No highlighting. Insert here.
|
|
|
if (c2!=undefined) {
|
|
|
document.getElementById("msg").value=document.getElementById("msg").value.substring(0,document.getElementById("msg").selectionStart)+c1+c2+document.getElementById("msg").value.substring(document.getElementById("msg").selectionStart)
|
|
|
} else {
|
|
|
document.getElementById("msg").value=document.getElementById("msg").value.substring(0,document.getElementById("msg").selectionStart)+c1+document.getElementById("msg").value.substring(document.getElementById("msg").selectionStart)
|
|
|
}
|
|
|
} else {
|
|
|
if (c2!=undefined) {
|
|
|
document.getElementById("msg").value=document.getElementById("msg").value.substring(0,document.getElementById("msg").selectionStart)+c1+document.getElementById("msg").value.substring(document.getElementById("msg").selectionStart,document.getElementById("msg").selectionEnd)+c2+document.getElementById("msg").value.substring(document.getElementById("msg").selectionEnd)
|
|
|
} else {
|
|
|
document.getElementById("msg").value=document.getElementById("msg").value.substring(0,document.getElementById("msg").selectionStart)+c1+document.getElementById("msg").value.substring(document.getElementById("msg").selectionStart)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<div id="commentForm">
|
|
|
<b>Leave a comment!</b><br/><br/>
|
|
|
<label for="name">Display Name: </label><input id="name"></input><br/><br/>
|
|
|
<label for="col">Display Color: </label><select id="col" onchange="changeColor()">
|
|
|
<option value="RED">RED</option>
|
|
|
<option value="GREEN" selected>GREEN</option>
|
|
|
<option value="YELLOW">YELLOW</option>
|
|
|
<option value="BLUE">BLUE</option>
|
|
|
<option value="MAGENTA">MAGENTA</option>
|
|
|
<option value="CYAN">CYAN</option>
|
|
|
<option value="WHITE">WHITE</option>
|
|
|
</select><br/><br/>
|
|
|
<label for="msg" style="vertical-align:top;display:inline;">Message: </label>
|
|
|
<div>
|
|
|
<div class="toolbar">
|
|
|
<span class="toolbarItem" onclick="insert('^^','^^')" title="Bold"> <b>B</b> </span>
|
|
|
<span class="toolbarItem" onclick="insert('**','**')" title="Italics"> <i>I</i> </span>
|
|
|
<span class="toolbarItem" onclick="insert('__','__')" title="Underline"> <u>U</u> </span>
|
|
|
<span class="toolbarItem" onclick="insert('~~','~~')" title="Code"> <code> </span>
|
|
|
<span class="toolbarItem" onclick="insert('[[',']]')" title="Link"> <http://> </span>
|
|
|
<span class="toolbarItem" onclick="insert('😊')" title="Smiley Face Emoji"> 😊 </span>
|
|
|
<span class="toolbarItem" onclick="insert('😔')" title="Sad Face Emoji"> 😔 </span>
|
|
|
<span class="toolbarItem" onclick="insert('👍')" title="Thumbs Up Emoji"> 👍 </span>
|
|
|
<span class="toolbarItem" onclick="insert('❤️')" title="Heart Emoji"> ❤️ </span>
|
|
|
<span class="toolbarItem" onclick="insert('😡')" title="Pouting Emoji"> 😡 </span>
|
|
|
</div>
|
|
|
<textarea id="msg"></textarea>
|
|
|
</div><br/><br/>
|
|
|
<button id="submit" onclick="submit()">POST</button>
|
|
|
</div><br/><br/>
|
|
|
<div id="commentContainer" style="visibility:hidden;">
|
|
|
<h2>Comments <sub>(<span class="commentCounter" id="commentCounter">0</span>)</sub></h2>
|
|
|
<div class="comments" id="comments"></div>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
function fetchComments() {
|
|
|
fetch("/COMMENTS?article=test3.comment").then((data)=>data.text())
|
|
|
.then((data)=>{
|
|
|
data=data.split("\n");
|
|
|
document.getElementById("comments").innerHTML="";
|
|
|
document.getElementById("commentCounter").innerText=data[0]
|
|
|
for (var i=data.length-3;i>=1;i-=2) {
|
|
|
if (data[i].trim().length>0&&data[i+1].trim().length>0) {
|
|
|
document.getElementById("comments").innerHTML+="<div id=\"msg"+((i+1)/2)+"\" class=\"commentDisplayer\"><div class=\"commentData\">"+decodeURIComponent(data[i])+"</div><br>"
|
|
|
data2=data[i+1].split(";");
|
|
|
document.getElementById("msg"+((i+1)/2)).style.borderColor=data2[1]
|
|
|
document.getElementById("comments").innerHTML+="<div class=\"commentInfo\"><sup>- "+decodeURIComponent(data2[0])+"</sup></div></div><br>"
|
|
|
}
|
|
|
}
|
|
|
document.getElementById("commentContainer").style.visibility="visible"
|
|
|
})
|
|
|
}
|
|
|
fetchComments()
|
|
|
changeColor()
|
|
|
</script>
|
|
|
|
|
|
</div> <!--End Content Body-->
|
|
|
<div class="codeForeground" id="codeForeground"></div>
|
|
|
<div class="codeBackground" id="codeBackground"></div>
|
|
|
</body>
|
|
|
<footer>
|
|
|
|
|
|
</footer>
|
|
|
</html>
|
|
|
|
