WhisperMaPhone/thoughts/templates/thoughts/index.html

{% extends "thoughts/page.html" %}
{% load static %}

{% block title %}Thoughts{% endblock %}

{% block navigation %}
    <h1 class="text" aria-current="page">Thoughts</h1>
    <a  class="text" href="/about">About</a>{% if authenticated %}
    <a  class="text" href="/post">Post</a>
{% endif %}
{% endblock %}

{% block head %}
    {% if not first_page %}
        <link rel="canonical" href="/?page={{ current_page_slug }}">
    {% else %}
        <link rel="canonical" href="/">
    {% endif %}

    <link href="{% static 'thoughts/codehighlight.css' %}" rel="stylesheet">

    <!-- Open Graph + Twitter card -->
    <meta name="twitter:card" content="summary">
    <meta content="Thoughts" property="og:title">
    <meta content="Thoughts" name="twitter:title">

    {% spaceless %}
    {% for thought in thoughts %}
        {% if thought.uuid == highlighted %}
            <meta content="{{ thought.text }}" property="og:description">
            <meta content="{{ thought.text }}" name="twitter:description">

            {% if thought.get_media_type == "png" or thought.get_media_type == "jpeg" %}
                <meta content="{{ thought.media.url }}" property="og:image">
                <meta content="{{ thought.media.url }}" name="twitter:image">
            {% endif %}
        {% endif %}
    {% endfor %}
    {% endspaceless %}

{% endblock %}

{% block main %}
    {% if not first_page %}
        <nav class="history-nav top" aria-label="History Navigation">
            <ul>
            {% for page in pages %}
                {% if page.slug == current_page_slug %}
                    <li><span class="current-page">{{ page.formatted_name }}</span></li>
                {% else %}
                    <li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
                {% endif %}
            {% endfor %}
                <li><a href="/search">Search</a></li>
            </ul>
        </nav>
    {% endif %}

    {% for thought in thoughts %}
    <div class="thought{% if thought.uuid == highlighted %} highlighted{% endif %}" id="{{ thought.uuid }}">
        {% if thought.uuid == highlighted %}
            {% if authenticated %}
                {{ thought.get_html_content_authenticated }}
            {% else %}
                {{ thought.get_html_content}}
            {% endif %}
        {% else %}
            {{ thought.html_content|safe }}
        {% endif %}
    </div>
    {% endfor %}

    <nav class="history-nav bottom" aria-label="History Navigation">
        <ul>
        {% for page in pages %}
            {% if page.slug == current_page_slug %}
                <li><span class="current-page">{{ page.formatted_name }}</span></li>
            {% else %}
                <li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
            {% endif %}
        {% endfor %}
            <li><a href="/search">Search</a></li>
        </ul>
    </nav>
{% endblock %}

{% block footer %}
{% endblock %}

{% block scripts %}
    <script>
        const els = document.querySelectorAll(".thought");

        for (let el of els) {
            const extended = el.querySelector(".extended");

            if (extended) {
                //Hide extended text
                extended.classList.add("hidden");
                //Add button to show extended text
                if (extended.childNodes.length) {
                    const main = el.querySelector(".main");
                    const showMoreButton = document.createElement("button");
                    showMoreButton.appendChild(document.createTextNode("Show More"));
                    showMoreButton.classList.add("show-more");
                    showMoreButton.addEventListener("click", evt => {
                        // Remove ourself
                        showMoreButton.parentNode.removeChild(showMoreButton);
                        // Show the extended text
                        extended.classList.remove("hidden");
                    });
                    main.appendChild(showMoreButton);
                }

                //Hydrate Show transcription button
                const transcriptButton = el.querySelector(".transcript-button");
                if (transcriptButton) {
                    const transcriptTitle = el.querySelector(".transcript-label");
                    const transcript = el.querySelector(".transcript");

                    const extendedParent = transcript.parentNode;

                    transcriptButton.addEventListener("click", function () {
                        extendedParent.appendChild(transcriptTitle);
                        extendedParent.appendChild(transcript);
                        extendedParent.removeChild(transcriptButton);
                    });

                    extendedParent.removeChild(transcriptTitle);
                    extendedParent.removeChild(transcript);
                }
            }
        }

        const highlighted = document.querySelector(".highlighted");
        if (highlighted) {
            highlighted.scrollIntoView();
            const showMoreButton = highlighted.querySelector(".show-more");
            if (showMoreButton) {
                showMoreButton.click();
            }
        }
    </script>
{% endblock %}