SigPlace/out/articles/test articles/test2.article

<div class="contentWrapper"><h1>Another test title</h1><div class="content" id="content_out/articles/test articles/test2.article">
<p class="color1">
    Sed lobortis nisi id nunc tincidunt volutpat. Mauris cursus felis quis condimentum posuere. Pellentesque vitae dolor et justo suscipit ultrices. Integer dapibus leo id felis varius, ut volutpat massa bibendum. Quisque sed nunc arcu. In sit amet faucibus magna, non venenatis massa. Cras sed placerat risus, id consectetur est. Pellentesque in nunc dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eget lorem ac urna posuere accumsan. Quisque sed imperdiet nisi.
</p>
</div><div class="datebar"></div><div class="date">1 May 2022 05:13AM</div>%CONDITIONAL_EXPAND%</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=test2.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)=>{
            fetchComments()
        })
    }
</script>
<div id="commentForm">
    <b>Leave a comment!</b><br/><br/>
    <label for="name">Display Name: </label><input id="name"><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><textarea id="msg"></textarea><br/><br/>
    <button id="submit" onload="changeColor()" 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=test2.comment").then((data)=>data.text())
        .then((data)=>{
            data=data.split("\n");
            document.getElementById("comments").innerHTML="";
            for (var i=0;i<data.length;i++) {
                if (i==0) {
                    document.getElementById("commentCounter").innerText=data[i]
                } else {
                    if (data[i].trim().length>0) {
                        if (i%2==1) {
                            document.getElementById("comments").innerHTML+="<div class=\"commentDisplayer\"><div class=\"commentData\">"+data[i]+"</div><br>"
                        } else {
                            document.getElementById("comments").innerHTML+="<div class=\"commentInfo\"><sup>- "+data[i]+"</sup></div></div><br>"
                        }
                    }
                }
            }
            document.getElementById("commentContainer").style.visibility="visible"
        })
    }
    fetchComments()
</script>