The frontend/UI server, written in JS using the MarkoJS library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

117 lines
5.0 KiB

import moment from "moment"
<div class=["comment", "mode-" + input.mode.toLowerCase()]>
<if (input.mode === "Message")>
<div class="metadata">
<div class="options color-menu">
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("emit", "open", "editComment", input.comment) >Edit</a>
</if-permitted>
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("emit", "open", "removeComment", input.comment) >Remove</a>
</if-permitted>
</div>
<chapter-meta weak kind="date" value=input.comment.createdDate />
<chapter-meta weak kind="author" value=input.comment.author />
</div>
<div class="content color-blockquote">
<table class="header">
<tbody>
<tr if(input.comment.subject != "")>
<th>Subject:</th>
<td>${input.comment.subject}</td>
</tr>
<tr>
<th>From:</th>
<td>
<div if(input.comment.character != null) class="tooltip" style="display: inline-block">
<span>${input.comment.characterName}</span>
<div class="tooltip-content color-highlight-dark">
<h1>${input.comment.character.name}</h1>
<h2>${input.comment.character.author}</h2>
<markdown source=input.comment.character.description />
</div>
</div>
<div else>
<span class="tooltip color-primary">
<span>${input.comment.characterName}</span>
<div class="tooltip-content color-highlight-dark color-primary">
<h1>(Unknown Character)</h1>
<h2>${input.comment.author}</h2>
</div>
</span>
</div>
</td>
</tr>
<tr if(input.comment.fictionalDate != null)>
<th>Date:</th>
<td>${moment(input.comment.fictionalDate).format("MMM D, YYYY")}</td>
</tr>
</tbody>
</table>
<markdown class="body" source=input.comment.source />
</div>
</if>
<if(input.mode === "Chat")>
<div class="content">
<div class="options color-menu">
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("emit", "open", "editComment", input.comment) >Edit</a>
</if-permitted>
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("emit", "open", "removeComment", input.comment) >Remove</a>
</if-permitted>
</div>
<for (paragraph in state.paragraphs)>
<div class="message-text color-text">
<markdown class="body" source=paragraph>
<span class="decoration color-menu">[</span>
<date class="color-menu" value=input.comment.fictionalDate></date>
<span class="decoration color-menu">]&nbsp;</span>
<span class="decoration color-menu">&lt;</span>
<span if(input.comment.character != null) class="tooltip color-primary">
<span>${input.comment.characterName}</span>
<div class="tooltip-content color-highlight-dark color-primary">
<h1>${input.comment.character.name}</h1>
<h2>${input.comment.character.author}</h2>
<markdown source=input.comment.character.description />
</div>
</span>
<span class="tooltip color-primary" else>
<span>${input.comment.characterName}</span>
<div class="tooltip-content color-highlight-dark color-primary">
<h1>(Unknown Character)</h1>
<h2>${input.comment.author}</h2>
</div>
</span>
<span class="decoration color-menu">&gt;&nbsp;</span>
</markdown>
</div>
</for>
</div>
</if>
<if(input.mode === "Article")>
<div class="metadata">
<div class="options color-menu">
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("emit", "open", "editComment", input.comment) >Edit</a>
</if-permitted>
<if-permitted user=input.user author=input.comment.author permission="story.edit">
<a on-click("emit", "open", "removeComment", input.comment) >Remove</a>
</if-permitted>
</div>
<chapter-meta kind="title" value=input.comment.subject />
<chapter-meta kind="name" value=input.comment.characterName character=(input.comment.character) ukAuthor=input.comment.author />
<chapter-meta kind="date" value=input.comment.fictionalDate />
<chapter-meta weak kind="date" value=input.comment.createdDate />
<chapter-meta weak kind="author" value=input.comment.author />
</div>
<div class="content color-text">
<markdown class="body" source=input.comment.source />
</div>
</if>
</div>