Documentation - remove all jQuery usage (#7658)

docs/advanced_topics/customisation/streamfield_blocks.rst

@@ -154,17 +154,17 @@ Here ``'myapp.blocks.AddressBlock'`` is the identifier for our JavaScript class
         render(placeholder, prefix, initialState, initialError) {
             const block = super.render(placeholder, prefix, initialState, initialError);
 
-            const stateField = $(document).find('#' + prefix + '-state');
-            const countryField = $(document).find('#' + prefix + '-country');
+            const stateField = document.getElementById(prefix + '-state');
+            const countryField = document.getElementById(prefix + '-country');
             const updateStateInput = () => {
-                if (countryField.val() == 'us') {
-                    stateField.removeAttr('disabled');
+                if (countryField.value == 'us') {
+                    stateField.removeAttribute('disabled');
                 } else {
-                    stateField.attr('disabled', true);
+                    stateField.setAttribute('disabled', true);
                 }
             }
             updateStateInput();
-            countryField.on('change', updateStateInput);
+            countryField.addEventListener('change', updateStateInput);
 
             return block;
         }

docs/extending/extending_hallo.rst

@@ -47,7 +47,7 @@ The constructor for ``HalloPlugin`` accepts the following keyword arguments:
 
 When writing the front-end code for the plugin, Wagtail’s Hallo implementation offers two extension points:
 
-* In JavaScript, use the ``[data-hallo-editor]`` attribute selector to target the editor, eg. ``var $editor = $('[data-hallo-editor]');``.
+* In JavaScript, use the ``[data-hallo-editor]`` attribute selector to target the editor, eg. ``var editor = document.querySelector('[data-hallo-editor]');``.
 * In CSS, use the ``.halloeditor`` class selector.
 
 

docs/reference/hooks.rst

@@ -506,7 +506,7 @@ Hooks for customising the editing interface for pages and snippets.
     @hooks.register('insert_editor_js')
     def editor_js():
         js_files = [
-            'demo/js/jquery.raptorize.1.0.js',
+            'js/fireworks.js', # https://fireworks.js.org
         ]
         js_includes = format_html_join('\n', '<script src="{0}"></script>',
             ((static(filename),) for filename in js_files)
@@ -514,8 +514,14 @@ Hooks for customising the editing interface for pages and snippets.
         return js_includes + mark_safe(
             """
             <script>
-                $(function() {
-                    $('button').raptorize();
+                window.addEventListener('DOMContentLoaded', (event) => {
+                    var container = document.createElement('div');
+                    container.style.cssText = 'position: fixed; width: 100%; height: 100%; z-index: 100; top: 0; left: 0; pointer-events: none;';
+                    container.id = 'fireworks';
+                    document.getElementById('main').prepend(container);
+                    var options = { "acceleration": 1.2, "autoresize": true, "mouse": { "click": true, "max": 3 } };
+                    var fireworks = new Fireworks(document.getElementById('fireworks'), options);
+                    fireworks.start();
                 });
             </script>
             """