Implement bookmarklet

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">
-        <input type="submit" value="Save" class="btn btn-primary mr-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>