nopaque/web/app/templates/macros/query_result_macro.html.j2

{% macro show_metadata(query_metadata) %}

<div class="col s12">
  <table class="highlight">
    <thead>
      <tr>
        <th style="width: 33%">Metadata Description</th>
        <th style="width: 66%">Value</th>
      </tr>
    </thead>
    <tbody>
      {% for pair in query_metadata|dictsort %}
      <tr>
        <td>{{ pair[0]|replace("_", " ")|upper() }}</td>
        {% if pair[0] == "corpus_all_texts"
           or pair[0] == "text_lookup"  %}
          <td>
            <ul class="collapsible">
            {% for key, value  in pair[1].items()  %}
              <li class="text-metadata"
                  data-metadata-key="{{ pair[0] }}"
                  data-text-key="{{ key }}">
                <div class="collapsible-header"
                     data-metadata-key="{{ pair[0] }}"
                     data-text-key="{{ key }}">
                  <i class="material-icons"
                     data-metadata-key="{{ pair[0] }}"
                     data-text-key="{{ key }}">info_outline</i>
                  {{ value['author'] }} - {{ value['publishing_year'] }}
                  - {{ value['title'] }}
                </div>
                <div class="collapsible-body">
                  <span>
                    <ul id="bibliographic-data-{{ pair[0] }}-{{ key }}"
                        style="column-count: 2;">
                    </ul>
                  </span>
                </div>
              </li>
            {% endfor %}
          </ul>
          </td>
        {% else %}
          <td>{{ pair[1] }}</td>
        {% endif %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let elems = document.querySelectorAll('.collapsible');
    let instances = M.Collapsible.init(elems, {accordion: false});
  });
let collapsibles = document.getElementsByClassName("text-metadata");
for (let collapsible of collapsibles) {
  collapsible.onclick = () => {
    let metadataKey = event.target.dataset.metadataKey;
    let textKey = event.target.dataset.textKey;
    let textData = {{ query_metadata|tojson|safe }}[metadataKey][textKey];
    let bibliographicData = document.getElementById(`bibliographic-data-${metadataKey}-${textKey}`);
    bibliographicData.innerHTML = "";
    for (let [key, value] of Object.entries(textData)) {
      bibliographicData.insertAdjacentHTML("afterbegin",
      `
      <li><span style="text-transform: capitalize;">${key}:</span> ${value}</li>
      `);
    }
  }
}
</script>
{% endmacro %}