Skip to main content

Text selection and save as highlight via htmx

Project description

django-highlights

Add a generic relation Highlight to arbitrary models.

  1. Selecting the highlight is done with custom javascript.
  2. Saving the highlightted snippet (without page refresh) is done with htmx with a dash of hyperscript 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:

  1. a unique SlugField named slug - this will be used for creating the highlight url
  2. 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

  1. The <article> tag will contain the scope or the highlightable text field.
  2. The <footer> will contain the url or the submission of highlights to the server.
  3. The specific DOM nodes have event listeners found in textSelector.js.
  4. Any text selection inside the scoped <article> will reflect in the <footer>'s hidden <input>.
  5. When highlight maker is ready with text selection, click on footer <button> submits highlight stored in <input>.
  6. The submission is done through htmx's hx-post without refreshing or swapping content, i.e. a POST request is sent to the save_highlight view c/o the passed highlight_url.
  7. The request adds a new Highlight (from an authenticated highlight maker) to the highlightable model instance, e.g. Sentinel pk=2.
  8. The successful POST request sends a header trigger to the client to alert the maker.

Project details


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 details)

Uploaded Source

Built Distribution

django_highlights-0.0.8-py3-none-any.whl (45.1 kB view details)

Uploaded Python 3

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

Hashes for django-highlights-0.0.8.tar.gz
Algorithm Hash digest
SHA256 83b864b4a69c7fdf821051c36e5ec51a3d7525c9ee2db0f22b443ea7f0f16d5e
MD5 a7de71df412127414a4d12141be0b7ee
BLAKE2b-256 393233efaf47fd70eb2a47227143ccf38b4401048d1ccc1e3a6e0aab80520f09

See more details on using hashes here.

File details

Details for the file django_highlights-0.0.8-py3-none-any.whl.

File metadata

File hashes

Hashes for django_highlights-0.0.8-py3-none-any.whl
Algorithm Hash digest
SHA256 ff1b5807b9258933223dc1f3248fec4b3e188cd0236e65cae0d5335cb4c385b6
MD5 a02e01f70c8406b897187c5fe3681457
BLAKE2b-256 bbe917a429df8eac1b2faa919ff542210d982b6392c49e29e3fe1262b9817360

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page