[DRAFT] Ubiquitous use of reaction boxes

fec/data/templates/macros/reaction-box.jinja

@@ -1,8 +1,8 @@
-{% macro reaction_box(name, location) %}
+{% macro reaction_box(title, name, location) %}
   <div class="reaction-box js-reaction-box" data-name="{{ name }}" data-location="{{ location }}">
     <form>
       <div class="js-reaction-step-1">
-        <span class="reaction-box__heading">What do you think of this chart?</span>
+        <span class="reaction-box__heading">{{ title }}</span>
         <ul class="list--buttons">
           <li>
             <button type="button" class="button--standard button--informative js-reaction" data-reaction="informative">Informative</button>
@@ -19,7 +19,7 @@
         </ul>
       </div>
       <div class="js-reaction-step-2 u-fade-in" aria-hidden="true">
-        <span class="reaction-box__heading">What do you think of this chart?</span>
+        <span class="reaction-box__heading">{{ title }}</span>
         <p><label for="reaction-more-{{ name }}"></label></p>
         <textarea id="reaction-more-{{ name }}"></textarea>
         <ul class="list--buttons">

fec/fec/static/js/data-init.js

@@ -18,6 +18,7 @@ var dropdown = require('./modules/dropdowns');
 var siteNav = require('./modules/site-nav');
 var skipNav = require('./modules/skip-nav');
 var feedback = require('./modules/feedback');
+var reaction = require('./modules/reaction-box');
 var typeahead = require('./modules/typeahead');
 var toc = require('./modules/toc');
 var Search = require('./modules/search');
@@ -135,6 +136,41 @@ $(document).ready(function() {
     CycleSelect.build($(elm));
   });
 
+    /**
+ **************DONT FORGET TO EDIT THIS FOR HTML AND WAGTAIL !*********************
+ * To implement a reaction box:
+ * Add a reaction-box jinja macro to a template (use quoted strings for the name and location positional arguments)
+ * Include a reference to this JS file in the parent template(preferably in extra JS block)
+ * (The below function will use the name/location values of any
+ *  reaction box on the page to initiate it as a new ReactionBox())
+ */
+
+
+  var reactionBoxes = document.querySelectorAll('.reaction-box');
+
+  //iterate over the reaction box(es)
+  var names = [];
+  for (var box of reactionBoxes) {
+
+    var name = box.getAttribute('data-name');
+    console.log('name: ',  name);
+    var location = box.getAttribute('data-location');
+    //push name to names array
+    names.push(name);
+    //inititailize new ReactionBox
+    window[name] = new reaction.ReactionBox(
+      `[data-name="${name}"][data-location="${location}"]`
+    );
+  }
+  //use names array to define the submitReaction*() for each
+  console.log('names: ',  names);
+  names.forEach(function(nm) {
+    window['submitReaction' + nm] = function(token) {
+      window[nm].handleSubmit(token);
+    };
+    console.log('nm: ',nm)
+  });
+
   toggle.init();
   download.hydrate();
 });

fec/fec/static/js/init.js

@@ -12,6 +12,7 @@ var Glossary = require('glossary-panel');
 
 var terms = require('./data/terms');
 var feedback = require('./modules/feedback');
+var reaction = require('./modules/reaction-box');
 var skipNav = require('./modules/skip-nav');
 var siteNav = require('./modules/site-nav');
 var dropdown = require('./modules/dropdowns');
@@ -117,4 +118,40 @@ $(document).ready(function() {
     }
     $p.nextAll().remove()
   });
+
+  /**
+ **************DONT FORGET TO EDIT THIS FOR HTML AND WAGTAIL !*********************
+ * To implement a reaction box:
+ * Add a reaction-box jinja macro to a template (use quoted strings for the name and location positional arguments)
+ * Include a reference to this JS file in the parent template(preferably in extra JS block)
+ * (The below function will use the name/location values of any
+ *  reaction box on the page to initiate it as a new ReactionBox())
+ */
+
+
+  var reactionBoxes = document.querySelectorAll('.reaction-box');
+  var names = [];
+  for (var box of reactionBoxes) {
+
+    var name = box.getAttribute('data-name');
+    console.log('name: ',  name);
+    var location = box.getAttribute('data-location');
+    //push name to names array
+    names.push(name);
+    //inititailize new ReactionBox
+    window[name] = new reaction.ReactionBox(
+      `[data-name="${name}"][data-location="${location}"]`
+    );
+  }
+  //use names array to define the submitReaction*() for each
+  console.log('names: ',  names);
+  names.forEach(function(nm) {
+    window['submitReaction' + nm] = function(token) {
+      window[nm].handleSubmit(token);
+    };
+    console.log('nm: ',nm)
+  });
+
 });
+
+

fec/fec/static/js/pages/reaction-box.js → fec/fec/static/js/modules/reaction-box.js

@@ -125,36 +125,4 @@ ReactionBox.prototype.handleReset = function() {
   this.$textarea.val('');
 };
 
-/**
- * To implement a reaction box:
- * Add a reaction-box jinja macro to a template (use quoted strings for the name and location positional arguments)
- * Include a reference to this JS file in the parent template(preferably in extra JS block)
- * (The below function will use the name/location values of any
- *  reaction box on the page to initiate it as a new ReactionBox())
- */
-
-/**
- * Document ready function called when document is loaded
- */
-$(document).ready(function() {
-  //find any reaction box(es) on the page
-  var reactionBoxes = document.querySelectorAll('.reaction-box');
-  var names = [];
-  //iterate over the reaction box(es)
-  for (var box of reactionBoxes) {
-    var name = box.getAttribute('data-name');
-    var location = box.getAttribute('data-location');
-    //push name to names array
-    names.push(name);
-    //inititailize new ReactionBox
-    window[name] = new ReactionBox(
-      `[data-name="${name}"][data-location="${location}"]`
-    );
-  }
-  //use names array to define the submitReaction*() for each
-  names.forEach(function(nm) {
-    window['submitReaction' + nm] = function(token) {
-      window[nm].handleSubmit(token);
-    };
-  });
-});
+module.exports = { ReactionBox: ReactionBox };

fec/home/blocks.py

@@ -209,6 +209,18 @@ class Meta:
         icon = 'pilcrow'
 
 
+class ReactionFeedback(blocks.StructBlock):
+    """Creates a ReactionFeedback box that submits to github
+    """
+    title = blocks.CharBlock(required=False)
+    name = blocks.CharBlock(required=False)
+    location = blocks.CharBlock(required=False)
+
+    class Meta:
+        template = 'blocks/reaction-block.html'
+        icon = 'openquote'
+
+
 class ResourceBlock(blocks.StructBlock):
     """A section of a ResourcePage"""
     title = blocks.CharBlock(required=True)
@@ -249,6 +261,7 @@ class ResourceBlock(blocks.StructBlock):
         ('image', ImageChooserBlock()),
         ('example_image', ExampleImage()),
         ('example_paragraph', ExampleParagraph()),
+        ('reaction_feedback', ReactionFeedback()),
     ])
 
     aside = blocks.StreamBlock([

fec/home/migrations/0125_auto_20221207_2254.py

@@ -0,0 +1,30 @@
+# Generated by Django 3.2.16 on 2022-12-08 03:54
+
+from django.db import migrations
+import home.blocks
+import wagtail.contrib.table_block.blocks
+import wagtail.core.blocks
+import wagtail.core.fields
+import wagtail.documents.blocks
+import wagtail.images.blocks
+import wagtail.snippets.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0124_auto_20220706_0036'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='custompage',
+            name='body',
+            field=wagtail.core.fields.StreamField([('heading', wagtail.core.blocks.CharBlock(form_classname='full title', icon='title')), ('paragraph', wagtail.core.blocks.RichTextBlock()), ('html', wagtail.core.blocks.RawHTMLBlock()), ('example_image', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=False)), ('caption', wagtail.core.blocks.RichTextBlock(required=True)), ('image', wagtail.images.blocks.ImageChooserBlock(required=True))])), ('image', wagtail.images.blocks.ImageChooserBlock()), ('table', wagtail.contrib.table_block.blocks.TableBlock(table_options={'renderer': 'html'})), ('example_paragraph', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('paragraph', wagtail.core.blocks.RichTextBlock(required=True))])), ('example_forms', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('forms', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('url', wagtail.core.blocks.URLBlock()), ('media_type', wagtail.core.blocks.CharBlock()), ('text', wagtail.core.blocks.CharBlock())])))])), ('reporting_example_cards', wagtail.core.blocks.StructBlock([('card_width', wagtail.core.blocks.ChoiceBlock(choices=[(2, '1/2'), (3, '1/3')], help_text='Control the width of the cards')), ('cards', wagtail.core.blocks.ListBlock(wagtail.core.blocks.PageChooserBlock(), icon='doc-empty'))])), ('contact_info', wagtail.core.blocks.StructBlock([('label', wagtail.core.blocks.CharBlock(icon='title', required=False)), ('contact_items', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('item_label', wagtail.core.blocks.CharBlock(required=False)), ('item_icon', wagtail.core.blocks.ChoiceBlock(choices=[('email', 'Email'), ('fax', 'Fax'), ('hand', 'Hand delivery'), ('phone', 'Phone'), ('mail', 'Mail'), ('github', 'Github'), ('question-bubble', 'Question')])), ('item_info', wagtail.core.blocks.RichTextBlock(required=True))])))])), ('internal_button', wagtail.core.blocks.StructBlock([('internal_page', wagtail.core.blocks.PageChooserBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('external_button', wagtail.core.blocks.StructBlock([('url', wagtail.core.blocks.URLBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('reaction_feedback', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=False)), ('name', wagtail.core.blocks.CharBlock(required=False)), ('location', wagtail.core.blocks.CharBlock(required=False))])), ('contribution_limits_table', wagtail.snippets.blocks.SnippetChooserBlock('home.EmbedSnippet', icon='table', template='blocks/embed-table.html')), ('informational_message', wagtail.snippets.blocks.SnippetChooserBlock('home.EmbedSnippet', icon='warning', template='blocks/embed-info-message.html')), ('document_list', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())]), icon='doc-empty', template='blocks/document-list.html')), ('simple_document_list', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())]), icon='doc-empty', template='blocks/simple-document-list.html'))], null=True),
+        ),
+        migrations.AlterField(
+            model_name='resourcepage',
+            name='sections',
+            field=wagtail.core.fields.StreamField([('sections', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('hide_title', wagtail.core.blocks.BooleanBlock(help_text='Should the section title be displayed?', required=False)), ('content', wagtail.core.blocks.StreamBlock([('text', wagtail.core.blocks.RichTextBlock(blank=False, icon='pilcrow', null=False, required=False)), ('documents', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('url', wagtail.core.blocks.URLBlock()), ('media_type', wagtail.core.blocks.CharBlock()), ('text', wagtail.core.blocks.CharBlock())]), icon='doc-empty', template='blocks/section-documents.html')), ('contact_info', wagtail.core.blocks.StructBlock([('label', wagtail.core.blocks.CharBlock(icon='title', required=False)), ('contact_items', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('item_label', wagtail.core.blocks.CharBlock(required=False)), ('item_icon', wagtail.core.blocks.ChoiceBlock(choices=[('email', 'Email'), ('fax', 'Fax'), ('hand', 'Hand delivery'), ('phone', 'Phone'), ('mail', 'Mail'), ('github', 'Github'), ('question-bubble', 'Question')])), ('item_info', wagtail.core.blocks.RichTextBlock(required=True))])))])), ('internal_button', wagtail.core.blocks.StructBlock([('internal_page', wagtail.core.blocks.PageChooserBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('external_button', wagtail.core.blocks.StructBlock([('url', wagtail.core.blocks.URLBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('page', wagtail.core.blocks.PageChooserBlock(template='blocks/page-links.html')), ('disabled_page', wagtail.core.blocks.CharBlock(blank=False, help_text='Name of a disabled link', icon='placeholder', null=False, required=False, template='blocks/disabled-page-links.html')), ('document_list', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())]), icon='doc-empty', template='blocks/document-list.html')), ('simple_document_list', wagtail.core.blocks.ListBlock(wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock()), ('document', wagtail.documents.blocks.DocumentChooserBlock())]), icon='doc-empty', template='blocks/simple-document-list.html')), ('current_commissioners', home.blocks.CurrentCommissionersBlock()), ('fec_jobs', home.blocks.CareersBlock()), ('mur_search', home.blocks.MURSearchBlock()), ('audit_search', home.blocks.AuditSearchBlock()), ('af_search', home.blocks.AFSearchBlock()), ('table', wagtail.contrib.table_block.blocks.TableBlock(table_options={'renderer': 'html'})), ('custom_table', wagtail.core.blocks.StructBlock([('custom_table', wagtail.core.blocks.StreamBlock([('title', wagtail.core.blocks.CharBlock(icon='title', required=False)), ('table_intro', wagtail.core.blocks.RichTextBlock(required=False)), ('table', wagtail.contrib.table_block.blocks.TableBlock(table_options={'colHeaders': True, 'height': 108, 'language': 'en', 'renderer': 'html', 'rowHeaders': True, 'startCols': 6, 'startRows': 7})), ('footnote', wagtail.core.blocks.CharBlock(icon='superscript', required=False))]))])), ('html', wagtail.core.blocks.RawHTMLBlock()), ('reporting_example_cards', wagtail.core.blocks.StructBlock([('card_width', wagtail.core.blocks.ChoiceBlock(choices=[(2, '1/2'), (3, '1/3')], help_text='Control the width of the cards')), ('cards', wagtail.core.blocks.ListBlock(wagtail.core.blocks.PageChooserBlock(), icon='doc-empty'))])), ('contribution_limits_table', wagtail.snippets.blocks.SnippetChooserBlock('home.EmbedSnippet', icon='table', template='blocks/embed-table.html')), ('informational_message', wagtail.snippets.blocks.SnippetChooserBlock('home.EmbedSnippet', icon='warning', template='blocks/embed-info-message.html')), ('image', wagtail.images.blocks.ImageChooserBlock()), ('example_image', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=False)), ('caption', wagtail.core.blocks.RichTextBlock(required=True)), ('image', wagtail.images.blocks.ImageChooserBlock(required=True))])), ('example_paragraph', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=True)), ('paragraph', wagtail.core.blocks.RichTextBlock(required=True))])), ('reaction_feedback', wagtail.core.blocks.StructBlock([('title', wagtail.core.blocks.CharBlock(required=False)), ('name', wagtail.core.blocks.CharBlock(required=False)), ('location', wagtail.core.blocks.CharBlock(required=False))]))])), ('aside', wagtail.core.blocks.StreamBlock([('title', wagtail.core.blocks.CharBlock(icon='title', required=False)), ('document', wagtail.core.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('url', wagtail.core.blocks.URLBlock()), ('media_type', wagtail.core.blocks.CharBlock()), ('text', wagtail.core.blocks.CharBlock())])), ('link', wagtail.core.blocks.StructBlock([('link_type', wagtail.core.blocks.ChoiceBlock(choices=[('calculator', 'Calculator'), ('calendar', 'Calendar'), ('record', 'Record'), ('search', 'Search')], help_text='Set an icon', icon='link', required=False)), ('url', wagtail.core.blocks.URLBlock()), ('text', wagtail.core.blocks.CharBlock(required=True)), ('coming_soon', wagtail.core.blocks.BooleanBlock(required=False))]))], icon='placeholder', required=False, template='blocks/section-aside.html'))]))], blank=True, null=True),
+        ),
+    ]

fec/home/models.py

@@ -33,7 +33,7 @@
     DocumentFeedBlurb, ExampleForms, ExampleImage, ExampleParagraph,
     ExternalButtonBlock, InternalButtonBlock, LinkBlock, OptionBlock,
     ReportingExampleCards, ResourceBlock, SnippetChooserBlock,
-    ThumbnailBlock, FeedDocumentBlock
+    ThumbnailBlock, FeedDocumentBlock, ReactionFeedback
 )
 
 logger = logging.getLogger(__name__)
@@ -606,6 +606,7 @@ class CustomPage(Page):
         ('contact_info', ContactInfoBlock()),
         ('internal_button', InternalButtonBlock()),
         ('external_button', ExternalButtonBlock()),
+        ('reaction_feedback', ReactionFeedback()),
         ('contribution_limits_table', SnippetChooserBlock(
             'home.EmbedSnippet',
             template='blocks/embed-table.html', icon='table')),

fec/home/templates/blocks/reaction-block.html

@@ -0,0 +1,7 @@
+{% load wagtailcore_tags %}
+{% load filters %}
+{% load static %}
+{% load reaction_feedback %}
+
+{% reaction_box page.content_type.model page.id %}
+

fec/home/templates/home/custom_page.html

@@ -20,9 +20,9 @@ <h1>{{ self.title }}</h1>
         {% for block in self.body %}
         <div class="block-{{ block.block_type }}">
           {% if block.block_type == 'paragraph' %}
-          <div class="rich-text">{{ block }}</div>
+          <div class="rich-text">{% include_block block %}</div>
           {% else %}
-          {{ block }}
+          {% include_block block %}
           {% endif %}
         </div>
         {% endfor %}
@@ -129,5 +129,6 @@ <h4 class="sidebar__title">Legal citations</h4>
 {% block extra_js %}
 {% if self.conditional_js %}
 <script type="text/javascript" src="{% asset_for_js self.get_conditional_js_display %}"></script>
+ <script> window.BASE_PATH = '/data' </script>
 {% endif %}
 {% endblock %}

fec/home/templates/home/home_page.html

@@ -28,11 +28,13 @@ <h2 id="hero-heading">Protecting the integrity of the campaign finance process</
         </div>
       {% endif %}
     {% endfor %}
+
     <div class="container">
       <div class="heading--section heading--with-action">
         <h2 class="heading__left">News and announcements</h2>
         <a class="button--cta button--updates heading__right" href="/updates">All news</a>
       </div>
+
 
       {% home_page_news %}
 

fec/home/templates/home/resource_page.html

@@ -1,5 +1,6 @@
 {% extends "long_page.html" %}
 {% load wagtailcore_tags %}
+{% load filters %}
 {% load static %}
 {% block body_class %}template-{{ self.get_verbose_name | slugify }}{% endblock %}
 
@@ -97,3 +98,7 @@ <h2>Related topics</h2>
   {% endfor %}
 </div>
 {% endblock %}
+{% block extra_js %}
+  <script> window.BASE_PATH = '/data' </script>
+
+{% endblock %}