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.

120 lines
5.1 KiB

  1. import moment from "moment"
  2. <div class=["comment", "mode-" + input.mode.toLowerCase()]>
  3. <if (input.mode === "Message")>
  4. <div class="metadata">
  5. <div class="options color-menu">
  6. <if-permitted user=input.user author=input.comment.author permission="story.edit">
  7. <a on-click("emit", "open", "editComment", input.comment) >Edit</a>
  8. </if-permitted>
  9. <if-permitted user=input.user author=input.comment.author permission="story.edit">
  10. <a on-click("emit", "open", "removeComment", input.comment) >Remove</a>
  11. </if-permitted>
  12. </div>
  13. <chapter-meta weak kind="date" value=input.comment.createdDate />
  14. <chapter-meta weak kind="author" value=input.comment.author />
  15. </div>
  16. <div class="content color-blockquote">
  17. <table class="header">
  18. <tbody>
  19. <tr if(input.comment.subject != "")>
  20. <th>Subject:</th>
  21. <td>${input.comment.subject}</td>
  22. </tr>
  23. <tr>
  24. <th>From:</th>
  25. <td>
  26. <div if(input.comment.character != null) class="tooltip" style="display: inline-block">
  27. <span>${input.comment.characterName}</span>
  28. <div class="tooltip-content color-highlight-dark">
  29. <h1>${input.comment.character.name}</h1>
  30. <h2>${input.comment.character.author}</h2>
  31. <markdown source=input.comment.character.description />
  32. </div>
  33. </div>
  34. <div else>
  35. <span class="tooltip color-primary">
  36. <span>${input.comment.characterName}</span>
  37. <div class="tooltip-content color-highlight-dark color-primary">
  38. <h1>(Unknown Character)</h1>
  39. <h2>${input.comment.author}</h2>
  40. </div>
  41. </span>
  42. </div>
  43. </td>
  44. </tr>
  45. <tr if(input.comment.fictionalDate != null)>
  46. <th>Date:</th>
  47. <td>
  48. <date utc value=input.comment.fictionalDate></date>
  49. </td>
  50. </tr>
  51. </tbody>
  52. </table>
  53. <markdown class="body" source=input.comment.source />
  54. </div>
  55. </if>
  56. <if(input.mode === "Chat")>
  57. <div class="content">
  58. <div class="options color-menu">
  59. <if-permitted user=input.user author=input.comment.author permission="story.edit">
  60. <a on-click("emit", "open", "editComment", input.comment) >Edit</a>
  61. </if-permitted>
  62. <if-permitted user=input.user author=input.comment.author permission="story.edit">
  63. <a on-click("emit", "open", "removeComment", input.comment) >Remove</a>
  64. </if-permitted>
  65. </div>
  66. <for (paragraph in state.paragraphs)>
  67. <div class="message-text color-text">
  68. <markdown class="body" source=paragraph>
  69. <if (input.comment.fictionalDate)>
  70. <span class="decoration color-menu">[</span>
  71. <date utc class="color-menu" value=input.comment.fictionalDate></date>
  72. <span class="decoration color-menu">]&nbsp;</span>
  73. </if>
  74. <span class="decoration color-menu">&lt;</span>
  75. <span if(input.comment.character != null) class="tooltip color-primary">
  76. <span>${input.comment.characterName}</span>
  77. <div class="tooltip-content color-highlight-dark color-primary">
  78. <h1>${input.comment.character.name}</h1>
  79. <h2>${input.comment.character.author}</h2>
  80. <markdown source=input.comment.character.description />
  81. </div>
  82. </span>
  83. <span class="tooltip color-primary" else>
  84. <span>${input.comment.characterName}</span>
  85. <div class="tooltip-content color-highlight-dark color-primary">
  86. <h1>(Unknown Character)</h1>
  87. <h2>${input.comment.author}</h2>
  88. </div>
  89. </span>
  90. <span class="decoration color-menu">&gt;&nbsp;</span>
  91. </markdown>
  92. </div>
  93. </for>
  94. </div>
  95. </if>
  96. <if(input.mode === "Article")>
  97. <div class="metadata">
  98. <div class="options color-menu">
  99. <if-permitted user=input.user author=input.comment.author permission="story.edit">
  100. <a on-click("emit", "open", "editComment", input.comment) >Edit</a>
  101. </if-permitted>
  102. <if-permitted user=input.user author=input.comment.author permission="story.edit">
  103. <a on-click("emit", "open", "removeComment", input.comment) >Remove</a>
  104. </if-permitted>
  105. </div>
  106. <chapter-meta kind="title" value=input.comment.subject />
  107. <chapter-meta kind="name" value=input.comment.characterName character=(input.comment.character) ukAuthor=input.comment.author />
  108. <chapter-meta utc kind="date" value=input.comment.fictionalDate />
  109. <chapter-meta weak kind="date" value=input.comment.createdDate />
  110. <chapter-meta weak kind="author" value=input.comment.author />
  111. </div>
  112. <div class="content color-text">
  113. <markdown class="body" source=input.comment.source />
  114. </div>
  115. </if>
  116. </div>