feat: Reimplement the Zooming Image Tool

[arbrandes]

Description

This recreates the Zooming Image Tool template for the HTML block. It does it in such a way that doesn't depend on any external resources: both the loupe code and sample image are inlined.

Some benefits to this version are:

• We can now maintain the loupe javascript code properly

• Because the javascript is included in the contents of the block itself, the course author can customize it as needed

• As opposed to the previous iteration, the magnified image URL is now optional: if it's not present, the regular image will be used for magnification

• There can now be two or more instances of the tool in the same unit.

This also removes some CSS left over from the previous iteration.

Testing

This can be tested in the sandbox:

🎓 LMS
📝 Studio

Just insert a new Text component in Studio and select the last option, "Zooming Image Tool". The instructions in the generated HTML should be self-explanatory.

Screenshot

[open-craft-grove]

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

[arbrandes]

Note to reviewer:

I tried using a placeholder image that already exists in the codebase, but there are issues when linking to local assets outside a course via bare /static/ URLs (see openedx/frontend-app-authoring#1265 (comment)).

This is the least egregious alternative to linking to some random image on the internet that I found: a base64 encode of an SVG with a small footprint (~5kb) that is still complex enough to illustrate the purpose of the tool.

[open-craft-grove]

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

[feanil]

Make sense to me.

[pdpinch]

What's the authoring flow for existing (broken) Zoom Images? Do they just create a new block with the template, and delete the old, broken block?

[arbrandes]

@pdpinch, if a text block that was created with the previous version of the Zooming Tool is currently working (which I'm told is the case at edx.org and at MIT), nothing needs to be done.

If a pre-existing text block is not working, then the easiest way will indeed be to recreate it with the new version of the tool after this patch merges. It would be difficult to automate this, given the nature of the thing: it's just HTML in the middle of other, arbitrary HTML. It is one of the downsides of the tool not being an XBlock: because the content is unstructured, there's no easy way to automatically account for existing content.

[open-craft-grove]

Sandbox deployment successful 🚀
🎓 LMS
📝 Studio
ℹ️ Grove Config, Tutor Config, Tutor Requirements

[mariajgrimaldi]

Working as expected! Thank you :)

[pdpinch]

if a text block that was created with the previous version of the Zooming Tool is currently working (which I'm told is the case at edx.org and at MIT), nothing needs to be done.

If a pre-existing text block is not working, then the easiest way will indeed be to recreate it with the new version of the tool

Seems like this is just a bug fix then and we needn't mention it in the release notes -- assuming it's merged by the time the release and release notes actually go out.

[edx-pipeline-bot]

2U Release Notice: This PR has been deployed to the edX staging environment in preparation for a release to production.

[edx-pipeline-bot]

2U Release Notice: This PR has been deployed to the edX production environment.

[edx-pipeline-bot]

2U Release Notice: This PR has been deployed to the edX production environment.