Implement bookmarklet

This commit is contained in:
Sascha Ißbrücker 2019-07-05 22:29:21 +02:00
parent 4f8a66b3bd
commit 312ab3db17
10 changed files with 90 additions and 10 deletions

View File

@ -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']

View File

@ -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 %}

View File

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

View File

@ -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 %}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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
}

View File

@ -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'),

View File

@ -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')