Skip to content

Allow reaction box widget in html templates and Wagtail html block #5492

Open
@johnnyporkchops

Description

@johnnyporkchops

Summary

Currently the reaction-box widgets can only be placed in Jinja templates. To allow use in Django html templates and even in a Wagtail html block, we can reference the script in data-init.js and init.js the same way the feedback.js is referenced.

In addition to expanding the locations the widget can be added , it will also make adding/removing much simpler because now to implement a reactrion-box on a page, all one has to do is add the macro or html code to a page .It will be detected and the JS takes care of itself.

Exporting ReactionBox as a module will allow us to write tests for it as well

Current Situation

Currently the reaction-box widgets can only be placed in Jinja templates and requires adding a reference to the JS file on that page as well.

Use Case

UX or Content team want a reaction box on a non-Jinja template, or on a specific Wagtail page

Misc

This has been tested locally and seems to work as expected
If it has not been deleted yet, there is a WIP branch test/reaction-box

Tech steps:

  • Move the document ready function for reaction box from reaction-box.js to data-init.js and init.js
  • Move reaction-box.js from /pages to /modules and export it as a module module.exports = { ReactionBox: ReactionBox };
  • Require reaction-box module in data-init.js and init.js the same way the feedback.js is required
  • Optional: Consider making a templatetag for html(non-Jinja) implementations so one does not have to copy html from Macro. This can also be a block for Wagtail, like Careers block, but user would need access to some config fields there to add name/location attrs.
  • Update comments and docstrings for instructions on adding a reaction-box to templates and Wagtail
  • Test on both local host and dev, stage r feature.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    🗄️ PI backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions