Text selection and save as highlight via htmx
Project description
django-highlights
Add a generic relation Highlight
to arbitrary models.
- Selecting the highlight is done with custom javascript.
- Saving the highlightted snippet (without page refresh) is done with
htmx
with a dash ofhyperscript
for dealing with the return trigger.
Setup
Install
.venv> poetry add django-highlights # pip3 install django-highlights
Add app to project settings
# in project_folder/settings.py
INSTALLED_APPS = [
...,
'highlights'
]
Add highlight model to database
.venv> python manage.py migrate
Configuration
Initialize model
Ensure model, e.g. Sentinel
, with:
- a unique SlugField named
slug
- this will be used for creating thehighlight url
- a TextField, e.g.
content
/description
- this is the field that will be highlightable
Add mixin
Make the initialized model inherit from the AbstractHighlightable
abstract base model :
from django_extensions.db.models import TitleSlugDescriptionModel
from highlights.models import AbstractHighlightable # import
class Sentinel(TitleSlugDescriptionModel, AbstractHighlightable): # add
pass
Each Sentinel
instance, i.e. pk=1, pk=2, etc., will now have generic relations to a Highlight
model and have access to a pre-named, slug
-based highlight_url
. The Sentinel
class will now have a @highlight_path
property to be used in urlpatterns
so that each instances highlight_url
is recognized by the project.
Setup url
# sentinels/urls.py
from .apps import SentinelsConfig # already built when you previously created `sentinels` via python manage.py startapp sentinels
from .models import Sentinel
app_name = SentinelsConfig.name # new
urlpatterns = [
Sentinel.highlight_path, # new
...
]
Use article id with highighter and notice
<!-- sentinels/templates/sentinel_detail.html -->
<!-- Note the `object` as the context_object_name -->
<main class="container">
<h1>Title: {{ object.title }}</h1>
<!-- 1. article id will be the scope monitored for user highlights -->
<article id="highlightable">
{{object.description}}
</article>
</main>
{% if user.is_authenticated %}
<!-- 2. a toast box will be triggered on a successful highlight -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
<div id="highlight-notice" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
<span class="me-auto">Highlight added!</span>
<button type="button" class="btn-close float-end" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<!-- 3. the footer is unhidden when text within the scope is selected, and will contain a button to highlight -->
{% load highlighter %}
{% highlight_btn_show url=object.highlight_url %}
{% endif %}
Flow
- The
<article>
tag will contain thescope
or the highlightable text field. - The
<footer>
will contain theurl
or the submission of highlights to the server. - The specific DOM nodes have event listeners found in
textSelector.js
. - Any text selection inside the scoped
<article>
will reflect in the<footer>
's hidden<input>
. - When highlight
maker
is ready with text selection, click on footer<button>
submits highlight stored in<input>
. - The submission is done through
htmx
'shx-post
without refreshing or swapping content, i.e. a POST request is sent to thesave_highlight
view c/o the passedhighlight_url
. - The request adds a new
Highlight
(from an authenticated highlightmaker
) to the highlightable model instance, e.g. Sentinel pk=2. - The successful POST request sends a header trigger to the client to alert the
maker
.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
File details
Details for the file django-highlights-0.0.8.tar.gz
.
File metadata
- Download URL: django-highlights-0.0.8.tar.gz
- Upload date:
- Size: 43.9 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: poetry/1.2.0a2 CPython/3.10.2 Darwin/21.2.0
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 83b864b4a69c7fdf821051c36e5ec51a3d7525c9ee2db0f22b443ea7f0f16d5e |
|
MD5 | a7de71df412127414a4d12141be0b7ee |
|
BLAKE2b-256 | 393233efaf47fd70eb2a47227143ccf38b4401048d1ccc1e3a6e0aab80520f09 |
File details
Details for the file django_highlights-0.0.8-py3-none-any.whl
.
File metadata
- Download URL: django_highlights-0.0.8-py3-none-any.whl
- Upload date:
- Size: 45.1 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: poetry/1.2.0a2 CPython/3.10.2 Darwin/21.2.0
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | ff1b5807b9258933223dc1f3248fec4b3e188cd0236e65cae0d5335cb4c385b6 |
|
MD5 | a02e01f70c8406b897187c5fe3681457 |
|
BLAKE2b-256 | bbe917a429df8eac1b2faa919ff542210d982b6392c49e29e3fe1262b9817360 |