linkding/bookmarks/templates/bookmarks/form.html

{% load widget_tweaks %}

<div class="bookmarks-form">
    {% csrf_token %}
    {{ form.auto_close|attr:"type:hidden" }}
    <div class="form-group {% if form.url.errors %}has-error{% endif %}">
        <label for="{{ form.url.id_for_label }}" class="form-label">URL</label>
        {{ form.url|add_class:"form-input"|attr:"autofocus" }}
        {% if form.url.errors %}
            <div class="form-input-hint">
                {{ form.url.errors }}
            </div>
        {% endif %}
    </div>
    <div class="form-group">
        <label for="{{ form.title.id_for_label }}" class="form-label">Tags</label>
        {{ form.tag_string|add_class:"form-input" }}
        <div class="form-input-hint">
            Enter any number of tags separated by space and <strong>without</strong> the hash (#). If a tag does not
            exist it will be
            automatically created.
        </div>
        {{ form.tag_string.errors }}
    </div>
    <div class="form-group has-icon-right">
        <label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
        <div class="has-icon-right">
            {{ form.title|add_class:"form-input" }}
            <i class="form-icon loading"></i>
        </div>
        <div class="form-input-hint">
            Optional, leave empty to use title from website.
        </div>
        {{ form.title.errors }}
    </div>
    <div class="form-group">
        <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
        <div class="has-icon-right">
            {{ form.description|add_class:"form-input"|attr:"rows:4" }}
            <i class="form-icon loading"></i>
        </div>
        <div class="form-input-hint">
            Optional, leave empty to use description from website.
        </div>
        {{ form.description.errors }}
    </div>
    <div class="form-group mt-2">
        {% if auto_close %}
            <input type="submit" value="Save and close" class="btn btn-primary mr-2">
        {% else %}
            <input type="submit" value="Save" class="btn btn-primary mr-2">
        {% endif %}
        <a href="{% url 'bookmarks:index' %}" class="btn">Nevermind</a>
    </div>

    <script type="application/javascript">
        /**
         * Pre-fill title and description placeholders with metadata from website as soon as URL changes
         */
        (function init() {
            const urlInput = document.getElementById('{{ form.url.id_for_label }}');
            const titleInput = document.getElementById('{{ form.title.id_for_label }}');
            const descriptionInput = document.getElementById('{{ form.description.id_for_label }}');

            urlInput.addEventListener('input', updateMetadata);

            function updateMetadata() {
                toggleIcon(titleInput, true);
                toggleIcon(descriptionInput, true);

                const websiteUrl = urlInput.value;
                const requestUrl = `{% url 'bookmarks:api.website_metadata' %}?url=${websiteUrl}`;
                fetch(requestUrl)
                    .then(response => response.json())
                    .then(metadata => {
                        titleInput.setAttribute('placeholder', metadata.title || '');
                        descriptionInput.setAttribute('placeholder', metadata.description || '');
                        toggleIcon(titleInput, false);
                        toggleIcon(descriptionInput, false);
                    });
            }

            function toggleIcon(input, show) {
                const icon = input.parentNode.querySelector('i.form-icon');
                icon.style['visibility'] = show ? 'visible' : 'hidden';
            }

            if (urlInput.value) updateMetadata();
        })();
    </script>
</div>