62 lines
3.9 KiB
Plaintext
62 lines
3.9 KiB
Plaintext
<% if (plugins.reactions) { %>
|
|
<section>
|
|
<h2 class="field">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-3.5a.75.75 0 00-.53.22L3.5 11.44V9.25a.75.75 0 00-.75-.75h-1a.25.25 0 01-.25-.25v-5.5zM1.75 1A1.75 1.75 0 000 2.75v5.5C0 9.216.784 10 1.75 10H2v1.543a1.457 1.457 0 002.487 1.03L7.061 10h3.189A1.75 1.75 0 0012 8.25v-5.5A1.75 1.75 0 0010.25 1h-8.5zM14.5 4.75a.25.25 0 00-.25-.25h-.5a.75.75 0 110-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0114.25 12H14v1.543a1.457 1.457 0 01-2.487 1.03L9.22 12.28a.75.75 0 111.06-1.06l2.22 2.22v-2.19a.75.75 0 01.75-.75h1a.25.25 0 00.25-.25v-5.5z"></path></svg>
|
|
Overall users reactions from last <%= plugins.reactions?.comments %> comments
|
|
</h2>
|
|
<div class="row">
|
|
<section>
|
|
<% if (plugins.reactions.error) { %>
|
|
<div class="field error">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
|
|
<%= plugins.reactions.error.message %>
|
|
</div>
|
|
<% } else { %>
|
|
<div class="row fill-width">
|
|
<section class="categories">
|
|
<% for (const [reaction, icon] of Object.entries({HEART:"❤️", THUMBS_UP:"👍", THUMBS_DOWN:"👎", LAUGH:"😄", CONFUSED:"😕", EYES:"👀", ROCKET:"🚀", HOORAY:"🎉"})) { const {score = 0, value:count = 0} = plugins.reactions.list[reaction] ?? {} %>
|
|
<div class="categorie column">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
|
|
<circle class="gauge-base" r="53" cx="60" cy="60"></circle>
|
|
<% if (score > 0) { %>
|
|
<circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="<%= score * 329 %> 329"></circle>
|
|
<% if (plugins.reactions.twemoji) { %>
|
|
<metrics viewBox="0 0 70 70" x="30" y="30"><%= icon %></metrics>
|
|
<% } else { %>
|
|
<text x="60" y="60" dominant-baseline="central"><%= icon %></text>
|
|
<% } %>
|
|
<% } else { %>
|
|
<% if (plugins.reactions.twemoji) { %>
|
|
<metrics viewBox="0 0 70 70" x="30" y="30"><%= icon %></metrics>
|
|
<% } else { %>
|
|
<text x="60" y="60" dominant-baseline="central"><%= icon %></text>
|
|
<% } %>
|
|
<% } %>
|
|
</svg>
|
|
<% if (plugins.reactions.details.length) { const [primary, secondary] = plugins.reactions.details %>
|
|
<span class="title">
|
|
<% if (primary === "count") { %>
|
|
<%= count %>
|
|
<% } else if (primary === "percentage") { %>
|
|
<%= Math.round(score*100) %><small>%</small>
|
|
<% } %>
|
|
<% if (secondary) { %>
|
|
<small>
|
|
<% if (secondary === "count") { %>
|
|
(<%= count %>)
|
|
<% } else if (secondary === "percentage") { %>
|
|
(<%= Math.round(score*100) %><small>%</small>)
|
|
<% } %>
|
|
</small>
|
|
<% } %>
|
|
</span>
|
|
<% } %>
|
|
</div>
|
|
<% } %>
|
|
</section>
|
|
</div>
|
|
<% } %>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
<% } %> |