SigPlace/out/articles/curabitur vel tempus ex.article

<div class="contentWrapper"><h1>Curabitur vel tempus ex</h1><div class="content" id="content_out/articles/curabitur vel tempus ex.article">
<p class="color1">
Curabitur vel tempus ex. Duis cursus sapien nisl, ut pulvinar dui porttitor ut. Nullam odio purus, tristique non turpis sit amet, malesuada ultricies purus. Mauris ut nulla nisl. Aenean sit amet est egestas justo volutpat consequat. Suspendisse in sagittis augue, et mattis tortor. Nullam viverra metus et nibh fringilla iaculis.
</p>
<br/>
<p class="color2">
<pre>
&lt;>&lt;Test><span class="string">"&lt;/test>&lt;/test2>&lt;test3>"</span>
            </pre>   
</p>
</div><div class="datebar"></div><div class="date">29 Apr 2022 7:37PM</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=curabitur vel tempus ex.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">&nbsp;<b>B</b>&nbsp;</span>
                <span class="toolbarItem" onclick="insert('**','**')" title="Italics">&nbsp;<i>I</i>&nbsp;</span>
                <span class="toolbarItem" onclick="insert('__','__')" title="Underline">&nbsp;<u>U</u>&nbsp;</span>
                <span class="toolbarItem" onclick="insert('~~','~~')" title="Code">&nbsp;&lt;code&gt;&nbsp;</span>
                <span class="toolbarItem" onclick="insert('[[',']]')" title="Link">&nbsp;&lt;http://&gt;&nbsp;</span>
                <span class="toolbarItem" onclick="insert('😊')" title="Smiley Face Emoji">&nbsp;😊&nbsp;</span>
                <span class="toolbarItem" onclick="insert('😔')" title="Sad Face Emoji">&nbsp;😔&nbsp;</span>
                <span class="toolbarItem" onclick="insert('👍')" title="Thumbs Up Emoji">&nbsp;👍&nbsp;</span>
                <span class="toolbarItem" onclick="insert('❤️')" title="Heart Emoji">&nbsp;❤️&nbsp;</span>
                <span class="toolbarItem" onclick="insert('😡')" title="Pouting Emoji">&nbsp;😡&nbsp;</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=curabitur vel tempus ex.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>