linkding/bookmarks/templates/bookmarks/form.html

{% load widget_tweaks %}
{% load static %}

<div class="bookmarks-form">
    {% csrf_token %}
    {{ form.auto_close|attr:"type:hidden" }}
    {{ form.return_url|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 class="form-input-hint bookmark-exists">
            This URL is already bookmarked. You can <a href="#">edit</a> it or you can overwrite the existing bookmark by saving this form.
        </div>
    </div>
    <div class="form-group">
        <label for="{{ form.tag_string.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>
    <br/>
    <div class="form-group">
        {% 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="{{ cancel_url }}" class="btn">Nevermind</a>
    </div>

    {# Replace tag input with auto-complete component #}
    <script src="{% static "bundle.js" %}"></script>
    <script type="application/javascript">
        const wrapper = document.createElement('div');
        const tagInput = document.getElementById('{{ form.tag_string.id_for_label }}');
        const allTagsString = '{{ all_tags }}';
        const allTags = allTagsString.split(' ');

        new linkding.TagAutoComplete({
            target: wrapper,
            props: {
                id: '{{ form.tag_string.id_for_label }}',
                name: '{{ form.tag_string.name }}',
                value: tagInput.value,
                tags: allTags
            }
        });

        tagInput.parentElement.replaceChild(wrapper, tagInput);
    </script>
    <script type="application/javascript">
        /**
         * - Pre-fill title and description placeholders with metadata from website as soon as URL changes
         * - Show hint if URL is already bookmarked
         */
        (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 }}');
            const editedBookmarkId = {{ bookmark_id }}

            urlInput.addEventListener('input', checkUrl);

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

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

                        // Display hint if URL is already bookmarked
                        const bookmarkExistsHint = document.querySelector('.form-input-hint.bookmark-exists')
                        const editExistingBookmarkLink = bookmarkExistsHint.querySelector('a')

                        if(data.bookmark && data.bookmark.id !== editedBookmarkId) {
                            bookmarkExistsHint.style['visibility'] = 'visible'
                            editExistingBookmarkLink.href = data.bookmark.edit_url
                        } else {
                            bookmarkExistsHint.style['visibility'] = 'hidden'
                        }
                    });
            }

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

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