marcel/linkding
1
0
Fork 0
mirror of https://github.com/sissbruecker/linkding.git synced 2025-08-13 13:39:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Preview website title + description in bookmark form

Browse Source 
Fix unnecessary selects when rendering bookmarks
This commit is contained in:
Sascha Ißbrücker
2019-07-02 01:28:02 +02:00
parent 0e872c754b
commit e07da529f1
9 changed files with 145 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
bookmarks/templates/bookmarks/form.html
View File

@@ -1,40 +1,81 @@
{% load widget_tweaks %}
{% csrf_token %}
<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="bookmarks-form">
{% csrf_token %}
<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">
{{ form.url.errors }}
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>
{% 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 without the hash (#). If a tag does not exist it will be automatically created.
{{ form.tag_string.errors }}
</div>
{{ form.tag_string.errors }}
</div>
<div class="form-group">
<label for="{{ form.title.id_for_label }}" class="form-label">Custom title</label>
{{ form.title|add_class:"form-input" }}
<div class="form-input-hint">
Optional, leave empty to use title from website.
<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>
{{ form.title.errors }}
</div>
<div class="form-group">
<label for="{{ form.description.id_for_label }}" class="form-label">Custom description</label>
{{ form.description|add_class:"form-input"|attr:"rows:4" }}
<div class="form-input-hint">
Optional, leave empty to use description from website.
<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>
{{ form.description.errors }}
</div>
<div class="form-group mt-2">
<input type="submit" value="Save" class="btn btn-primary mr-2">
<a href="{% url 'bookmarks:index' %}" class="btn">Nevermind</a>
<div class="form-group mt-2">
<input type="submit" value="Save" class="btn btn-primary mr-2">
<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', () => {
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';
}
})();
</script>
</div>