HGKeeper

pidgin/nest

Separate JS from plugin table logic

2019-12-31, Jason

5850f7a89c81

Separate JS from plugin table logic

{{/*** Templates ***/}}

{{ define "trusted" }}

<span aria-label="{{ T "Trusted" }}" class="tooltipped tooltipped-s">

<i class="fas fa-check-circle " style="color:#784a85"></i>

</span>

{{ end }}

{{ define "community" }}

<span aria-label="{{ T "Community" }}" class="tooltipped tooltipped-s">

<i class="fas fa-users" style="color:green"></i>

</span>

{{ end }}

{{/*** Content ***/}}

<p>

{{ T "Plugin-Info" }}

</p>

<ul>

<li>{{ template "trusted" }} {{ T "Trusted-Info" }}</li>

<li>{{ template "community" }} {{ T "Community-Info" }}</li>

</ul>

<div id="plugin-filters">

<div id="publisher-selector">

<label style="display: inline-block;">

<input type="radio" id="all" name="publisher" style="margin-right: 0; margin-left: 0.75rem;" value="all" checked>

All

</label>

<label style="display: inline-block;">

<input type="radio" id="pidgin" name="publisher" style="margin-right: 0; margin-left: 0.75rem;" value="pidgin">

{{ template "trusted" }}

{{ T "Trusted" }}

</label>

<label style="display: inline-block;">

<input type="radio" id="community" name="publisher" style="margin-right: 0; margin-left: 0.75rem;"

value="community">

{{ template "community" }}

{{ T "Community" }}

</label>

</div>

<input type="text" id="plugin-filter-search" placeholder="{{ T "Search-placeholder" }}" />

<div id="plugin-selector"></div>

</div>

<table id="plugin-table">

<thead>

<th></th>

<th>{{ T "Name" }}</th>

<th></th>

<th>{{ T "Type" }}</th>

<th>{{ T "Info" }}</th>

<th>{{ T "Maintainer" }}</th>

</thead>

<tbody>

{{ range .Site.Data.plugins }}

<tr data-type="{{ .type }}" {{ if .isTrusted }}isTrusted="true"{{ end }}>

<td class="plugin-icon">

{{ if .logo }}<img src="{{ .logo }}" alt="{{ .heading | safeHTMLAttr }} logo" />{{ else }} {{ end }}

</td>

<td class="plugin-heading">

{{ if .repo }}

<a href="{{ .repo }}">{{ .heading }}</a>

{{ else }}

{{ .heading }}

{{ end }}

</td>

<td class="plugin-publisher">

{{ if eq true .isTrusted }}

{{ template "trusted" }}

{{ else }}

{{ template "community" }}

{{ end }}

</td>

<td class="plugin-type">

{{ .type }}

</td>

<td class="plugin-info">

{{ with .info }}{{ . | markdownify }}{{ end }}

</td>

<td class="plugin-repo">

{{ .maintainer }}

</td>

</tr>

{{ end }}

</tbody>

</table>

<script src="/js/plugin-table.js"></script>

<style>

.filter-hide {

display: none;

}

#plugin-filters {

text-align: right;

}

#plugin-filter-search {

text-align: right;

max-width: 250px;

display: inline-block;

}

#plugin-selector label {

text-align: right;

display: inline-block;

}

#plugin-selector input {

margin: 8px;

display: inline-block;

}

</style>