mirror of
https://github.com/sissbruecker/linkding.git
synced 2026-03-06 01:43:12 +08:00
3ae9cf0420
* start converting * small fixes * reorganize theme files * cleanup search bar * increase spacing * small tweaks * fix select styles in Chrome * cleanup menus * improve button icons * restore badges * remove unused classes * restore some overrides * restore bookmark form * add summary outline * avoid layout shifts * restore bookmark details * increase border radius for modals * improve details modal * restore reader mode * restore settings * cleanup variables * start with dark theme * more dark theme... * more light theme... * more dark theme... * add postcss build * remove sass processor * update docker build * fix alt color * remove endless symbol * fix tests * update assets * remove sass files * fix docker build * cleanup spacing * improve theme * update test scripts * update CI workflow * fix test
246 lines
10 KiB
HTML
246 lines
10 KiB
HTML
{% load widget_tweaks %}
|
|
{% load static %}
|
|
|
|
<div class="bookmarks-form">
|
|
{% csrf_token %}
|
|
{{ form.website_title }}
|
|
{{ form.website_description }}
|
|
{{ 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"|attr:"placeholder: " }}
|
|
{% 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.
|
|
The form has been pre-filled with the existing bookmark, and saving the form will update the existing bookmark.
|
|
</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"|attr:"ld-tag-autocomplete"|attr:"autocomplete:off"|attr:"autocapitalize:off" }}
|
|
<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>
|
|
<div class="form-input-hint auto-tags"></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"|attr:"autocomplete:off" }}
|
|
<i class="form-icon loading"></i>
|
|
<button type="button" class="btn btn-link form-icon" title="Edit title from website">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/>
|
|
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/>
|
|
<path d="M16 5l3 3"/>
|
|
</svg>
|
|
</button>
|
|
</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:2" }}
|
|
<i class="form-icon loading"></i>
|
|
<button type="button" class="btn btn-link form-icon" title="Edit description from website">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/>
|
|
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/>
|
|
<path d="M16 5l3 3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="form-input-hint">
|
|
Optional, leave empty to use description from website.
|
|
</div>
|
|
{{ form.description.errors }}
|
|
</div>
|
|
<div class="form-group">
|
|
<details class="notes"{% if form.has_notes %} open{% endif %}>
|
|
<summary>
|
|
<span class="form-label d-inline-block">Notes</span>
|
|
</summary>
|
|
<label for="{{ form.notes.id_for_label }}" class="text-assistive">Notes</label>
|
|
{{ form.notes|add_class:"form-input"|attr:"rows:8" }}
|
|
</details>
|
|
<div class="form-input-hint">
|
|
Additional notes, supports Markdown.
|
|
</div>
|
|
{{ form.notes.errors }}
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="{{ form.unread.id_for_label }}" class="form-checkbox">
|
|
{{ form.unread }}
|
|
<i class="form-icon"></i>
|
|
<span>Mark as unread</span>
|
|
</label>
|
|
<div class="form-input-hint">
|
|
Unread bookmarks can be filtered for, and marked as read after you had a chance to look at them.
|
|
</div>
|
|
</div>
|
|
{% if request.user_profile.enable_sharing %}
|
|
<div class="form-group">
|
|
<label for="{{ form.shared.id_for_label }}" class="form-checkbox">
|
|
{{ form.shared }}
|
|
<i class="form-icon"></i>
|
|
<span>Share</span>
|
|
</label>
|
|
<div class="form-input-hint">
|
|
{% if request.user_profile.enable_public_sharing %}
|
|
Share this bookmark with other registered users and anonymous users.
|
|
{% else %}
|
|
Share this bookmark with other registered users.
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="divider"></div>
|
|
<div class="form-group d-flex justify-between">
|
|
{% if auto_close %}
|
|
<input type="submit" value="Save and close" class="btn btn-primary btn-wide">
|
|
{% else %}
|
|
<input type="submit" value="Save" class="btn btn-primary btn btn-primary btn-wide">
|
|
{% endif %}
|
|
<a href="{{ cancel_url }}" class="btn">Nevermind</a>
|
|
</div>
|
|
<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
|
|
* - Setup buttons that allow editing of scraped website values
|
|
*/
|
|
(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 notesDetails = document.querySelector('form details.notes');
|
|
const notesInput = document.getElementById('{{ form.notes.id_for_label }}');
|
|
const unreadCheckbox = document.getElementById('{{ form.unread.id_for_label }}');
|
|
const sharedCheckbox = document.getElementById('{{ form.shared.id_for_label }}');
|
|
const websiteTitleInput = document.getElementById('{{ form.website_title.id_for_label }}');
|
|
const websiteDescriptionInput = document.getElementById('{{ form.website_description.id_for_label }}');
|
|
const editedBookmarkId = {{ bookmark_id }};
|
|
|
|
function toggleLoadingIcon(input, show) {
|
|
const icon = input.parentNode.querySelector('i.form-icon');
|
|
icon.style['visibility'] = show ? 'visible' : 'hidden';
|
|
}
|
|
|
|
function updatePlaceholder(input, value) {
|
|
if (value) {
|
|
input.setAttribute('placeholder', value);
|
|
} else {
|
|
input.removeAttribute('placeholder');
|
|
}
|
|
}
|
|
|
|
function updateInput(input, value) {
|
|
if (!input) {
|
|
return;
|
|
}
|
|
input.value = value;
|
|
}
|
|
|
|
function updateCheckbox(input, value) {
|
|
if (!input) {
|
|
return;
|
|
}
|
|
input.checked = value;
|
|
}
|
|
|
|
function checkUrl() {
|
|
toggleLoadingIcon(titleInput, true);
|
|
toggleLoadingIcon(descriptionInput, true);
|
|
updatePlaceholder(titleInput, null);
|
|
updatePlaceholder(descriptionInput, null);
|
|
|
|
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;
|
|
updatePlaceholder(titleInput, metadata.title);
|
|
updatePlaceholder(descriptionInput, metadata.description);
|
|
toggleLoadingIcon(titleInput, false);
|
|
toggleLoadingIcon(descriptionInput, false);
|
|
|
|
// Prefill form and display hint if URL is already bookmarked
|
|
const existingBookmark = data.bookmark;
|
|
const bookmarkExistsHint = document.querySelector('.form-input-hint.bookmark-exists');
|
|
|
|
if (existingBookmark && !editedBookmarkId) {
|
|
// Workaround: tag input will be replaced by tag autocomplete, so
|
|
// defer getting the input until we need it
|
|
const tagsInput = document.getElementById('{{ form.tag_string.id_for_label }}');
|
|
|
|
bookmarkExistsHint.style['display'] = 'block';
|
|
notesDetails.open = !!existingBookmark.notes;
|
|
updateInput(titleInput, existingBookmark.title);
|
|
updateInput(descriptionInput, existingBookmark.description);
|
|
updateInput(notesInput, existingBookmark.notes);
|
|
updateInput(tagsInput, existingBookmark.tag_names.join(" "));
|
|
updateCheckbox(unreadCheckbox, existingBookmark.unread);
|
|
updateCheckbox(sharedCheckbox, existingBookmark.shared);
|
|
} else {
|
|
bookmarkExistsHint.style['display'] = 'none';
|
|
}
|
|
|
|
// Preview auto tags
|
|
const autoTags = data.auto_tags;
|
|
const autoTagsHint = document.querySelector('.form-input-hint.auto-tags');
|
|
|
|
if (autoTags.length > 0) {
|
|
autoTags.sort();
|
|
autoTagsHint.style['display'] = 'block';
|
|
autoTagsHint.innerHTML = `Auto tags: ${autoTags.join(" ")}`;
|
|
} else {
|
|
autoTagsHint.style['display'] = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function setupEditAutoValueButton(input) {
|
|
const editAutoValueButton = input.parentNode.querySelector('.btn.form-icon');
|
|
if (!editAutoValueButton) return;
|
|
editAutoValueButton.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
input.value = input.getAttribute('placeholder');
|
|
input.focus();
|
|
input.select();
|
|
});
|
|
}
|
|
|
|
setupEditAutoValueButton(titleInput);
|
|
setupEditAutoValueButton(descriptionInput);
|
|
|
|
// Fetch initial website data if we have a URL, and we are not editing an existing bookmark
|
|
// For existing bookmarks we get the website metadata through hidden inputs
|
|
if (urlInput.value && !editedBookmarkId) {
|
|
checkUrl();
|
|
}
|
|
urlInput.addEventListener('input', checkUrl);
|
|
|
|
// Set initial website title and description for edited bookmarks
|
|
if (editedBookmarkId) {
|
|
updatePlaceholder(titleInput, websiteTitleInput.value);
|
|
updatePlaceholder(descriptionInput, websiteDescriptionInput.value);
|
|
}
|
|
})();
|
|
</script>
|
|
</div>
|