Implement bookmarklet

bookmarks/models.py

@@ -75,7 +75,9 @@ class BookmarkForm(forms.ModelForm):
                             required=False)
     description = forms.CharField(required=False,
                                   widget=forms.Textarea())
+    # Hidden field that determines whether to close window/tab after saving the bookmark
+    auto_close = forms.CharField(required=False)
 
     class Meta:
         model = Bookmark
-        fields = ['url', 'tag_string', 'title', 'description']
+        fields = ['url', 'tag_string', 'title', 'description', 'auto_close']

bookmarks/templates/bookmarks/bookmarklet.html

@@ -0,0 +1,24 @@
+{% extends "bookmarks/layout.html" %}
+
+{% block content %}
+    <div class="columns">
+        <section class="content-area column col-12">
+            <div class="content-area-header">
+                <h2>Bookmarklet</h2>
+            </div>
+            <p>The bookmarklet is a quick way to add new bookmarks without opening the linkding application
+                first. Here's how it works:</p>
+            <ul>
+                <li>Drag the bookmarklet below into your browsers bookmark bar / toolbar</li>
+                <li>Open the website that you want to bookmark</li>
+                <li>Click the bookmarklet in your browsers toolbar</li>
+                <li>linkding opens in a new window  or tab and allows you to add a bookmark for the site</li>
+                <li>After saving the bookmark the linkding window closes and you are back on your website</li>
+            </ul>
+            <p>Drag the following bookmarklet to your browsers toolbar:</p>
+            <a href="javascript: {% include 'bookmarks/bookmarklet.js' %}"
+               class="btn btn-primary">📎 Add bookmark</a>
+        </section>
+    </div>
+{% endblock %}
+

bookmarks/templates/bookmarks/bookmarklet.js

@@ -0,0 +1,9 @@
+(function() {
+    var bookmarkUrl = window.location;
+    var applicationUrl = '{{ application_url }}';
+
+    applicationUrl += '?url=' + bookmarkUrl;
+    applicationUrl += '&auto_close';
+
+    window.open(applicationUrl);
+})();

bookmarks/templates/bookmarks/close.html

@@ -0,0 +1,9 @@
+{% extends "bookmarks/layout.html" %}
+
+{% block content %}
+    <script type="application/javascript">
+        window.close()
+    </script>
+    <p>You can now close this window.</p>
+{% endblock %}
+

bookmarks/templates/bookmarks/form.html

@@ -2,6 +2,7 @@
 
 <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" }}
@@ -15,7 +16,8 @@
         <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
+            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 }}
@@ -43,7 +45,11 @@
         {{ 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>
 
@@ -56,7 +62,9 @@
             const titleInput = document.getElementById('{{ form.title.id_for_label }}');
             const descriptionInput = document.getElementById('{{ form.description.id_for_label }}');
 
-            urlInput.addEventListener('input', () => {
+            urlInput.addEventListener('input', updateMetadata);
+
+            function updateMetadata() {
                 toggleIcon(titleInput, true);
                 toggleIcon(descriptionInput, true);
 
@@ -70,12 +78,14 @@
                         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>

bookmarks/templates/bookmarks/layout.html

@@ -22,7 +22,7 @@
     {% if request.user.is_authenticated %}
         <section class="navbar-section">
             <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
-            <a href="/bookmarks" class="btn btn-link">Bookmarks</a>
+            <a href="/bookmarklet" class="btn btn-link">Bookmarklet</a>
             <a href="/settings" class="btn btn-link">Settings</a>
             <a href="/logout" class="btn btn-link">Logout</a>
         </section>

bookmarks/templates/bookmarks/new.html

@@ -8,7 +8,7 @@
                 <h2>New bookmark</h2>
             </div>
             <form action="{% url 'bookmarks:new' %}" method="post" class="col-6" novalidate>
-                {% bookmark_form form %}
+                {% bookmark_form form auto_close %}
             </form>
         </section>
     </div>

bookmarks/templatetags/bookmarks.py

@@ -8,9 +8,10 @@ register = template.Library()
 
 
 @register.inclusion_tag('bookmarks/form.html', name='bookmark_form')
-def bookmark_form(form: BookmarkForm):
+def bookmark_form(form: BookmarkForm, auto_close: bool = False):
     return {
         'form': form,
+        'auto_close': auto_close
     }
 
 

bookmarks/urls.py

@@ -11,8 +11,10 @@ urlpatterns = [
     # Bookmarks
     path('bookmarks', views.bookmarks_index, name='index'),
     path('bookmarks/new', views.bookmarks_new, name='new'),
+    path('bookmarks/close', views.bookmarks_close, name='close'),
     path('bookmarks/<int:bookmark_id>/edit', views.bookmarks_edit, name='edit'),
     path('bookmarks/<int:bookmark_id>/remove', views.bookmarks_remove, name='remove'),
+    path('bookmarklet', views.bookmarks_bookmarklet, name='bookmarklet'),
     # Settings
     path('settings', views.settings_index, name='settings_index'),
     path('settings/import', views.settings_bookmark_import, name='settings_import'),

bookmarks/views/bookmarks.py

@@ -35,16 +35,27 @@ def bookmarks_index(request):
 
 @login_required
 def bookmarks_new(request):
+    initial_url = request.GET.get('url')
+    initial_auto_close = 'auto_close' in request.GET
+
     if request.method == 'POST':
         form = BookmarkForm(request.POST)
+        auto_close = form.data['auto_close']
         if form.is_valid():
             current_user = request.user
             create_bookmark(form, current_user)
+            if auto_close:
+                return HttpResponseRedirect(reverse('bookmarks:close'))
+            else:
                 return HttpResponseRedirect(reverse('bookmarks:index'))
     else:
         form = BookmarkForm()
+        if initial_url:
+            form.initial['url'] = initial_url
+        if initial_auto_close:
+            form.initial['auto_close'] = 'true'
 
-    return render(request, 'bookmarks/new.html', {'form': form})
+    return render(request, 'bookmarks/new.html', {'form': form, 'auto_close': initial_auto_close})
 
 
 @login_required
@@ -67,3 +78,15 @@ def bookmarks_remove(request, bookmark_id: int):
     bookmark = Bookmark.objects.get(pk=bookmark_id)
     bookmark.delete()
     return HttpResponseRedirect(reverse('bookmarks:index'))
+
+
+@login_required
+def bookmarks_bookmarklet(request):
+    return render(request, 'bookmarks/bookmarklet.html', {
+        'application_url': request.build_absolute_uri("/bookmarks/new")
+    })
+
+
+@login_required
+def bookmarks_close(request):
+    return render(request, 'bookmarks/close.html')