From 153ff8d16138426c84ec77209b2ad2e6c485aee0 Mon Sep 17 00:00:00 2001 From: Hannah Cushman Garland Date: Thu, 21 Nov 2024 15:37:24 -0600 Subject: [PATCH 01/11] Transition alerts to Wagtail --- councilmatic/settings.py | 17 +++++------------ lametro/models/cms.py | 25 +++++++++++++++++++++++++ lametro/models/legislative.py | 14 -------------- lametro/templates/base.html | 4 ++-- requirements.txt | 3 ++- 5 files changed, 34 insertions(+), 29 deletions(-) diff --git a/councilmatic/settings.py b/councilmatic/settings.py index ca89a51f..c43fd441 100644 --- a/councilmatic/settings.py +++ b/councilmatic/settings.py @@ -125,7 +125,6 @@ "debug_toolbar", "template_profiler_panel", "captcha", - "markdownify.apps.MarkdownifyConfig", "wagtail.contrib.forms", "wagtail.contrib.redirects", "wagtail.contrib.typed_table_block", @@ -137,7 +136,9 @@ "wagtail.images", "wagtail.search", "wagtail.admin", + "wagtail.contrib.modeladmin", "wagtail", + "wagtailmarkdown", "modelcluster", "taggit", ) @@ -329,17 +330,9 @@ def custom_sampler(ctx): }, } - -# Allow some html tags to render in markdown. Mainly for alerts -MARKDOWNIFY = { - "default": { - "WHITELIST_TAGS": [ - "br", - "strong", - "em", - "a", - ] - } +WAGTAILMARKDOWN = { + "autodownload_fontawesome": True, + "allowed_tags": ["br", "strong", "em", "a"], } # Hard time limit on HTTP requests diff --git a/lametro/models/cms.py b/lametro/models/cms.py index dc2baab7..585b4dad 100644 --- a/lametro/models/cms.py +++ b/lametro/models/cms.py @@ -1,7 +1,11 @@ +from django.db import models + from wagtail.models import Page from wagtail.fields import StreamField from wagtail.admin.panels import FieldPanel +from wagtailmarkdown.widgets import MarkdownTextarea + from lametro.blocks import ArticleBlock @@ -18,3 +22,24 @@ class AboutPage(Page): content_panels = Page.content_panels + [ FieldPanel("body"), ] + + +class Alert(models.Model): + include_in_dump = True + + def __str__(self): + return f"{self.type} Alert - {self.description[:50]}" + + TYPE_CHOICES = [ + ("primary", "Primary"), + ("secondary", "Secondary"), + ("success", "Success"), + ("danger", "Danger"), + ("warning", "Warning"), + ("info", "Info"), + ] + + description = models.TextField(null=True, blank=True) + type = models.CharField(max_length=255, choices=TYPE_CHOICES) + + panels = [FieldPanel("type"), FieldPanel("description", widget=MarkdownTextarea)] diff --git a/lametro/models/legislative.py b/lametro/models/legislative.py index 7533db2b..6fb8d38c 100644 --- a/lametro/models/legislative.py +++ b/lametro/models/legislative.py @@ -1237,17 +1237,3 @@ def __str__(self): else: return self.name - - -class Alert(models.Model): - TYPE_CHOICES = [ - ("primary", "Primary"), - ("secondary", "Secondary"), - ("success", "Success"), - ("danger", "Danger"), - ("warning", "Warning"), - ("info", "Info"), - ] - - description = models.TextField(null=True, blank=True) - type = models.CharField(max_length=255, choices=TYPE_CHOICES) diff --git a/lametro/templates/base.html b/lametro/templates/base.html index 682765d2..03defd7c 100644 --- a/lametro/templates/base.html +++ b/lametro/templates/base.html @@ -1,4 +1,4 @@ -{% load adv_cache extras lametro_extras markdownify static wagtailcore_tags %} +{% load adv_cache extras lametro_extras static wagtailcore_tags wagtailmarkdown %} @@ -103,7 +103,7 @@ {% if alerts %} {% for alert in alerts|dictsort:"pk" %}
- {{alert.description|markdownify}} + {{alert.description|markdown}}
{% endfor %} {% endif %} diff --git a/requirements.txt b/requirements.txt index e92776e1..b1fc042c 100644 --- a/requirements.txt +++ b/requirements.txt @@ -20,8 +20,9 @@ django-environ whitenoise python-dotenv==0.20.0 esprima==4.0.1 -django-markdownify==0.9.3 +#django-markdownify==0.9.3 wagtail>=5.2,<5.3 +wagtail-markdown # Development django-debug-toolbar From ec69b5f6f42e631a638ed399739a2c22ef7222b4 Mon Sep 17 00:00:00 2001 From: Hannah Cushman Garland Date: Fri, 22 Nov 2024 09:49:14 -0600 Subject: [PATCH 02/11] Remove custom alert handling --- councilmatic/urls.py | 6 -- lametro/models/cms.py | 18 +++++- lametro/static/css/wagtail_custom.css | 57 +++++++++++++++++ .../static/js/markdowntextarea_overrides.js | 5 ++ lametro/static/js/wagtail_custom.js | 47 ++++++++++++++ .../templates/alerts/_alert_form_inputs.html | 31 --------- lametro/templates/alerts/alert_edit.html | 20 ------ lametro/templates/alerts/alerts.html | 62 ------------------ lametro/templates/base.html | 24 ++----- lametro/templates/lametro/about_page.html | 1 - lametro/views.py | 23 ------- lametro/wagtail_hooks.py | 63 +++++++++++++++++++ 12 files changed, 193 insertions(+), 164 deletions(-) create mode 100644 lametro/static/css/wagtail_custom.css create mode 100644 lametro/static/js/markdowntextarea_overrides.js create mode 100644 lametro/static/js/wagtail_custom.js delete mode 100644 lametro/templates/alerts/_alert_form_inputs.html delete mode 100644 lametro/templates/alerts/alert_edit.html delete mode 100644 lametro/templates/alerts/alerts.html create mode 100644 lametro/wagtail_hooks.py diff --git a/councilmatic/urls.py b/councilmatic/urls.py index 4e2aa204..e02a6f10 100644 --- a/councilmatic/urls.py +++ b/councilmatic/urls.py @@ -44,9 +44,6 @@ MinutesView, pong, test_logging, - AlertCreateView, - AlertDeleteView, - AlertUpdateView, ) from lametro.feeds import LAMetroPersonDetailFeed @@ -119,9 +116,6 @@ manual_event_live_link, name="manual_event_live_link", ), - path("alerts/", AlertCreateView.as_view(), name="alerts"), - path("alerts//delete/", AlertDeleteView.as_view(), name="delete_alert"), - path("alerts//update/", AlertUpdateView.as_view(), name="update_alert"), url( r"^pong/$", pong, diff --git a/lametro/models/cms.py b/lametro/models/cms.py index 585b4dad..2d19d920 100644 --- a/lametro/models/cms.py +++ b/lametro/models/cms.py @@ -1,9 +1,11 @@ from django.db import models +from django.utils.html import format_html from wagtail.models import Page from wagtail.fields import StreamField from wagtail.admin.panels import FieldPanel +from wagtailmarkdown.utils import render_markdown from wagtailmarkdown.widgets import MarkdownTextarea from lametro.blocks import ArticleBlock @@ -42,4 +44,18 @@ def __str__(self): description = models.TextField(null=True, blank=True) type = models.CharField(max_length=255, choices=TYPE_CHOICES) - panels = [FieldPanel("type"), FieldPanel("description", widget=MarkdownTextarea)] + panels = [ + FieldPanel( + "type", + help_text="Select a style for your alert.", + ), + FieldPanel("description", widget=MarkdownTextarea), + ] + + def content(self): + return format_html( + "
" + + render_markdown(self.description) + + f"{self.get_type_display()}" + + "
" + ) diff --git a/lametro/static/css/wagtail_custom.css b/lametro/static/css/wagtail_custom.css new file mode 100644 index 00000000..ced156e6 --- /dev/null +++ b/lametro/static/css/wagtail_custom.css @@ -0,0 +1,57 @@ +[class*="alert"] { + --font-color: #fff; + --a: 0.75; + background-color: rgba(var(--r), var(--g), var(--b), var(--a)); + color: var(--font-color); + border: 1px solid #fff!important; +} + +.button[class*="alert"]:hover { + background-color: rgba(var(--r), var(--g), var(--b), var(--a)); + color: var(--font-color); +} + +.alert-primary { + --r: 235; + --g: 104; + --b: 100; +} + +.alert-secondary { + --r: 170; + --g: 170; + --b: 170; +} + +.alert-success { + --r: 34; + --g: 178; + --b: 76; +} + +.alert-danger { + --r: 51; + --g: 153; + --b: 153; +} + +.alert-warning { + --font-color: #000; + --r: 245; + --g: 230; + --b: 37; +} + +.alert-info { + --r: 245; + --g: 122; + --b: 0; +} + +.list-display-wrapper { + font-weight: normal!important; +} + +.list-display-wrapper a { + color: var(--w-color-text-link-default)!important; +} diff --git a/lametro/static/js/markdowntextarea_overrides.js b/lametro/static/js/markdowntextarea_overrides.js new file mode 100644 index 00000000..ee223432 --- /dev/null +++ b/lametro/static/js/markdowntextarea_overrides.js @@ -0,0 +1,5 @@ +// See https://github.com/Ionaru/easy-markdown-editor?tab=readme-ov-file#configuration +window.wagtailMarkdown = window.wagtailMarkdown || {} +window.wagtailMarkdown.options = window.wagtailMarkdown.options || {} +// Update available shortcuts in the Markdown editor +window.wagtailMarkdown.options.toolbar = ["bold", "italic", "link", "|", "preview", "guide"] diff --git a/lametro/static/js/wagtail_custom.js b/lametro/static/js/wagtail_custom.js new file mode 100644 index 00000000..61d140fe --- /dev/null +++ b/lametro/static/js/wagtail_custom.js @@ -0,0 +1,47 @@ +ALERT_COLORS = { + "primary": "#eb6864", + "secondary": "#aaa", + "success": "#22b24c", + "danger": "#369", + "warning": "#f5e625", + "info": "#f57a00", +} + +function styleParent(e) { + console.log(e.target.classList) + if (e.target.classList.length > 0) { + e.target.classList = "" + } + e.target.classList.add(`alert-${e.target.value}`); + //e.target.style.backgroundColor = ALERT_COLORS[e.target.value] || "unset" + //e.target.style.color = "#333" + //e.target.style.opacity = "0.5" + //e.target.style.fontWeight = "700" +} + +// Select the node that will be observed for mutations +const targetNode = document.body; + +console.log(targetNode) + +// Options for the observer (which mutations to observe) +const config = { childList: true, subtree: true }; + +// Callback function to execute when mutations are observed +const callback = (mutationList, observer) => { + mutationList.map(mu => { + mu.addedNodes && mu.addedNodes.forEach(node => { + if (node.id === "id_type") { + styleParent({target: node}) + node.addEventListener("change", styleParent) + console.log("listening for changes") + } + }) + }) +}; + +// Create an observer instance linked to the callback function +const observer = new MutationObserver(callback); + +// Start observing the target node for configured mutations +observer.observe(targetNode, config); diff --git a/lametro/templates/alerts/_alert_form_inputs.html b/lametro/templates/alerts/_alert_form_inputs.html deleted file mode 100644 index da2009c3..00000000 --- a/lametro/templates/alerts/_alert_form_inputs.html +++ /dev/null @@ -1,31 +0,0 @@ -{% csrf_token %} -

- {{form.type.label_tag}} {{form.type}} -

- -

- {{form.description.label_tag}} -

- -
-
- - - - -
- - {{form.description}} -
- -{% for error in form.description.errors %} - *{{error|striptags}} -{% endfor %} diff --git a/lametro/templates/alerts/alert_edit.html b/lametro/templates/alerts/alert_edit.html deleted file mode 100644 index 25559d45..00000000 --- a/lametro/templates/alerts/alert_edit.html +++ /dev/null @@ -1,20 +0,0 @@ -{% extends "base_with_margins.html" %} -{% load static %} -{% block title %}Edit Alert{% endblock %} - -{% block content %} -

Edit Alert

-
-
- {% include "alerts/_alert_form_inputs.html" %} -
- Cancel - -
-
-
-{% endblock %} - -{% block extra_js %} - -{% endblock %} diff --git a/lametro/templates/alerts/alerts.html b/lametro/templates/alerts/alerts.html deleted file mode 100644 index f9f3d3e3..00000000 --- a/lametro/templates/alerts/alerts.html +++ /dev/null @@ -1,62 +0,0 @@ -{% extends "base_with_margins.html" %} -{% load static %} -{% block title %}Alert Manager{% endblock %} - -{% block content %} -

Alert Manager

- -
-
-
-

Existing Alerts

- {% if alerts %} - - - - - - - - {% for alert in alerts|dictsort:"pk" %} - - - - - - {% endfor %} - -
TypeDescription
{{alert.type|title}}{{alert.description}} - - Edit - -
- {% csrf_token %} - -
-
- {% else %} -

No Alerts Added

- {% endif %} -
- -
-

Add New

-
- {% include "alerts/_alert_form_inputs.html" %} -
- -
- -
-
-
- -
- -
-
-{% endblock %} - -{% block extra_js %} - -{% endblock %} diff --git a/lametro/templates/base.html b/lametro/templates/base.html index 03defd7c..2b5dbcf1 100644 --- a/lametro/templates/base.html +++ b/lametro/templates/base.html @@ -1,4 +1,4 @@ -{% load adv_cache extras lametro_extras static wagtailcore_tags wagtailmarkdown %} +{% load adv_cache extras lametro_extras static wagtailcore_tags wagtailmarkdown wagtailuserbar %} @@ -73,25 +73,7 @@ {% nocache %} - {% if user.is_authenticated %} -
  • - - -
    • -
  • - - Logout - -
    • - {% else %} -
    • - {% endif %} +
    • {% endnocache %} @@ -115,6 +97,8 @@ {% endblock %} + {% wagtailuserbar 'bottom-left' %} +