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
django-highlights-0.0.8.tar.gz
(43.9 kB
view hashes)
Built Distribution
Close
Hashes for django_highlights-0.0.8-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | ff1b5807b9258933223dc1f3248fec4b3e188cd0236e65cae0d5335cb4c385b6 |
|
MD5 | a02e01f70c8406b897187c5fe3681457 |
|
BLAKE2b-256 | bbe917a429df8eac1b2faa919ff542210d982b6392c49e29e3fe1262b9817360 |