single.html

{{ define "main" }}

{{ $articles := slice }}
{{ range $index, $article := $.Site.Data.c19dpes_literature.publications }}
  {{ $articles = $articles | append $article}}
{{ end }}

<main class="container">
  <h1>{{ .Title }}</h1>
  <article>{{ .Content }}</article>
  <div class="d-flex">
    {{ partial "last-update.html" (dict "context" . "last_update" (substr $.Site.Data.c19dpes_literature.timestamp 0 10)) }}
  </div>
  <div id="loading">
    <div class="d-flex justify-content-center">
      <div class="spinner-grow dp-background-color--primary" style="width: 10rem; height: 10rem;" role="status">
        <span class="sr-only">{{ i18n "loading" }}</span>
      </div>
    </div>
  </div>
  <div id="table-wrapper" class="row d-none">
    <section class="col-md-2">
      <h5>{{ i18n "funder" }}</h5>
      <div class="mb-2 ml-3 form-check">
        <div class="row">
          <input type="checkbox" class="form-check-input" name="funder" value="fondo-covid">
          <span>Fondo COVID19</span>
        </div>
      </div>
      <h5 class="mt-4">{{ i18n "type" }}</h5>
      <div class="mb-2 ml-3 form-check">
        <div class="row">
          <input type="checkbox" class="form-check-input" name="publication_type" value="article">
          <span>{{ i18n "articles" }}</span>
        </div>
        <div class="row">
          <input type="checkbox" class="form-check-input" name="publication_type" value="preprint">
          <span>{{ i18n "preprints" }}</span>
        </div>
      </div>
      <h5 class="mt-4">{{ i18n "availability_of" }}</h5>
      <div class="mb-2 ml-3 form-check">
        <div class="row">
          <input type="checkbox" class="form-check-input" name="abstract_available" value="abstract-available">
          <span>{{ i18n "abstract" }}</span>
        </div>
        <div class="row">
          <input type="checkbox" class="form-check-input" name="data_available" value="data-available">
          <span>{{ i18n "related_data" }}</span>
        </div>
      </div>
      <h5 class="mt-4">{{ i18n "year" }}</h5>
      <div class="mb-2 ml-3 form-check">
        <div class="row">
          <input type="checkbox" class="form-check-input" name="year" value="2020">
          <span>2020</span>
        </div>
        <div class="row">
          <input type="checkbox" class="form-check-input" name="year" value="2021">
          <span>2021</span>
        </div>
      </div>
    </section>
    <section class="col-md-10">
      <div class="container-fluid">
        <div class="row mb-2" id="actions">
          <div class="ml-auto">{{ partial "europepmc.html" }}</div>
        </div>
      </div>
      <table id="literature-table" class="table w-100">
        <thead class="thead-light">
          <tr>
            <th scope="col">{{ i18n "publication" }}</th>
            <th scope="col">{{ i18n "published"}}</th>

            <!-- This columns are not visible by DataTables but they are necessary for filtering and CSV downloading -->
            <th scope="col">{{ i18n "year" }}</th>
            <th scope="col">{{ i18n "funder" }}</th>
            <th scope="col">{{ i18n "publication_type" }}</th>
            <th scope="col">{{ i18n "available_abstract" }}</th>
            <th scope="col">{{ i18n "available_related_data" }}</th>
            <th scope="col">{{ i18n "doi" }}</th>
            <th scope="col">{{ i18n "title" }}</th>
            <th scope="col">{{ i18n "authors" }}</th>
            <th scope="col">{{ i18n "journal" }}</th>
          </tr>
        </thead>
        <tbody>
          {{ range $index, $article := $articles }}
          <tr>

            <!-- Mega column -->
            <td>

              <!-- Title with link to its DOI -->
              <a target="_blank" href="https://doi.org/{{ .doi }}"><b>{{ safeHTML .title }}</b></a>

              <!-- Authors comma-separated list -->
              <br>
              <span class="text-muted">
                {{ with .authors }}
                  {{ if gt (len .) 4}}
                    {{ range first 4 . }}
                      {{ . }},
                    {{ end }}
                  {{ range last 1 . }}
                    [...], {{ . }}
                  {{ end }}
                  {{ else }}
                    {{ $n := sub (len .) 1}}
                    {{ range first $n . }}
                      {{ . }},
                    {{ end }}
                    {{ range last 1 . }}
                      {{ . }}
                    {{ end }}
                  {{ end }}
                {{ end }}
              </span>

              <!-- Citation with preprint indicator (if this publication is a preprint) -->
              <br>
              {{ if eq .type "preprint"}}<span class="badge badge-secondary">preprint</span>&nbsp;{{ end }}
              <i>{{ .citation }}</i>

              <!-- DOI -->
              <br>
              <span>DOI: {{ .doi }}</span>

              <!-- Abstract and/or related data availability indicators (if this publication has available abstract and/or related data) -->
              {{ if or .abstract .available_data }}
              <div class="row">
                <div class="col">
                  {{ if .abstract }}
                  <a class="btn btn-primary btn-link badge badge-primary" data-toggle="collapse" href="#abstract{{ $index }}" role="button" aria-expanded="false" aria-controls="abstract{{ $index }}">
                    {{ i18n "abstract" }} <i class="bi bi-caret-down-fill"></i>
                  </a>
                  <div class="collapse" id="abstract{{ $index }}">
                    <div class="card card-body">{{ safeHTML .abstract }}</div>
                  </div>
                  {{ end }}
                  {{ if .available_data }}
                  <a class="btn btn-primary btn-link badge badge-success" data-toggle="collapse" href="#data{{ $index }}" role="button" aria-expanded="false" aria-controls="abstract{{ $index }}">
                    {{ i18n "related_data" }} <i class="bi bi-caret-down-fill"></i>
                  </a>
                  <div class="collapse list-group" id="data{{ $index }}">
                  {{ range .available_data }}
                  <a target="_blank" href="{{ .link }}" class="list-group-item list-group-item-action dp-list-group-item">
                    {{ .label }} <i class="bi bi-box-arrow-up-right"></i>
                  </a>
                  {{ end }}
                  </div>
                  {{ end }}
                </div>
              </div>
              {{ end }}
            </td>
            <td>{{ .publication_date }}</td>

            <!-- This columns are not visible by DataTables but they are necessary for filtering and CSV downloading -->
            <td>{{ slicestr .publication_date 0 4 }}</td>
            <td>{{ .funder }}</td>
            <td>{{ .type }}</td>
            <td>{{ if .abstract }}abstract-available{{ end }}</td>
            <td>{{ if .available_data }}data-available{{ end }}</td>
            <td>{{ .doi }}</td>
            <td>{{ .title }}</td>
            <td>{{ delimit .authors ", " }}</td>
            <td>{{ .citation }}</td>
          </tr>
          {{ end }}
        </tbody>
      </table>
    </section>
  </div>
</main>

<script src="/js/dp-table-filters.js"></script>
<script>
  $(document).ready(() => {
    const table = $('#literature-table').DataTable({
      dom: `
        <".container-fluid"
          <".row my-2"
            <".mr-auto"i>
            <"#search.mr-2"f>
          >
          <".row"t>
          <".row"
            <".mr-auto"l>
            <".ml-auto"p>
          >
        >
      `,
      buttons: [
        {
          extend: 'csv',
          text: 'Download as CSV',
          titleAttr: 'Download table in comma-separated-values format',
          className: 'btn btn-primary',
          exportOptions: {
            columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ],
          },
        },
      ],
      processing: true,
      order: [[1, 'desc']],
      columnDefs: [

        // Hide columns that are present for filtering and for downloading the table as usable CSV.
        { visible: false, targets: [2, 3, 4, 5, 6, 7, 8, 9, 10] },

        // Remove ordering for first mega-column (sorting alphabetically by title makes no sense).
        { orderable: false, targets: 0 },
      ],
      initComplete: () => {
        document.querySelector('#loading').classList.add('d-none');
        document.querySelector('#table-wrapper').classList.remove('d-none');
      },
    });

    // When used with Bootstrap, datatables buttons must be appended to DOM to make them visible.
    table.buttons().container().appendTo('#actions');

    // Move datatable buttons next to filter search box.
    const downloadButtonGroup = document.querySelector('.dt-buttons');
    downloadButtonGroup.classList.remove('btn-group', 'flex-wrap');
    downloadButtonGroup.classList.add('d-flex');
    const search = document.querySelector('#search');
    search.insertAdjacentElement('afterend', downloadButtonGroup);

    // Define column indices and apply checkbox filters.
    const columnIndices = {
      year: 2,
      funder: 3,
      publication_type: 4,
      abstract_available: 5,
      data_available: 6,
    };
    applyFilters(table, columnIndices);
  });
</script>

{{ end }}