From 781de045f74cafd355aac32c91fbf8ce35f6c215 Mon Sep 17 00:00:00 2001 From: Robert Rollins Date: Tue, 21 Feb 2023 12:30:38 -0800 Subject: [PATCH 1/2] Applied several fixes to make the fixed-position toolbar work properly on Wagtail 4. The fixes include: * Increased the height of the top-padding which gets added when the toolbar appears. This makes room for it always being two rows in Wagtail 4, due to the limited width of rich text editors. * Removed the .object prefix on the CSS we apply, since Wagtail 4 page editors don't use that class any more. * Added 44px to the 'top' position set by the JS for the toolbar, to account for the changes in Wagtail 4's editor UI. * Made the scroll and resize events trigger for both the `window` object and '.content-wrapper', since the window doesn't scroll any more in Wagtail 4. The window events are retained because I think they're still relevant in Wagtail 3. --- wagtail_hallo/static/css/hallo.css | 16 ++++++++-------- wagtail_hallo/static/js/hallo-editor.js | 5 +++-- wagtail_hallo/static/js/vendor/hallo.js | 9 +++++---- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/wagtail_hallo/static/css/hallo.css b/wagtail_hallo/static/css/hallo.css index 5ddc46f..81b1668 100644 --- a/wagtail_hallo/static/css/hallo.css +++ b/wagtail_hallo/static/css/hallo.css @@ -201,7 +201,7 @@ display: block; } -/* +/* These styles correspond to the image formats defined in wagtailimages/formats.py, so that images displayed in the rich text field receive more or less the same styling that they would receive on the site front-end. @@ -231,27 +231,27 @@ } /* Page Editor */ -.object .halloeditor { +.halloeditor { padding-top: 1em; padding-bottom: 1em; } -.object .halloeditor.expanded { - padding-top: 5em; +.halloeditor.expanded { + padding-top: 7em; padding-bottom: 2em; } -.object.full .halloeditor { +.full .halloeditor { padding-top: 3em; padding-bottom: 3em; } -.object.full .halloeditor.expanded { +.full .halloeditor.expanded { padding-top: 5em; padding-bottom: 5em; } -.object.full .error .halloeditor { +.full .error .halloeditor { background-color: #ffe6e6; } @@ -273,7 +273,7 @@ font-family: Roboto Slab, Georgia, serif; } @media screen and (min-width: breakpoint-min(sm)) { - .object.full .halloeditor { + .full .halloeditor { border-width: 0 1px; } } diff --git a/wagtail_hallo/static/js/hallo-editor.js b/wagtail_hallo/static/js/hallo-editor.js index d6d1d32..1e92357 100644 --- a/wagtail_hallo/static/js/hallo-editor.js +++ b/wagtail_hallo/static/js/hallo-editor.js @@ -88,12 +88,13 @@ /* Hallo's toolbar will reposition itself on the scroll event. This is useful since animating the fields can cause it to be positioned badly initially. */ - $(window).trigger('scroll'); + // Adding .content-wrapper as a triggered element makes this work in Wagtail 4. + $(window).add('.content-wrapper').trigger('scroll'); }); }) .on('hallodeactivated', function (event) { $(event.target).removeClass('expanded', 200, function () { - $(window).trigger('scroll'); + $(window).add('.content-wrapper').trigger('scroll'); }); }); setupLinkTooltips(editor); diff --git a/wagtail_hallo/static/js/vendor/hallo.js b/wagtail_hallo/static/js/vendor/hallo.js index 6c4bb84..4126dc0 100644 --- a/wagtail_hallo/static/js/vendor/hallo.js +++ b/wagtail_hallo/static/js/vendor/hallo.js @@ -3184,10 +3184,11 @@ this.toolbar.show(); jQuery(this.options.parentElement).append(this.toolbar); this._bindEvents(); - jQuery(window).on('resize', function (event) { + // Adding .content-wrapper as a triggering element makes these work in Wagtail 4. + jQuery(window).add('.content-wrapper').on('resize', function (event) { return _this.setPosition(); }); - jQuery(window).on('scroll', function (event) { + jQuery(window).add('.content-wrapper').on('scroll', function (event) { return _this.setPosition(); }); if (this.options.parentElement === 'body') { @@ -3232,9 +3233,10 @@ return; } this.toolbar.css('position', 'absolute'); + // The 44 is to account for the changes to the Page Editor UI in Wagtail 4. this.toolbar.css( 'top', - this.element.offset().top - this.toolbar.outerHeight(), + this.element.offset().top - this.toolbar.outerHeight() + 44 ); if (this.options.affix) { scrollTop = jQuery(window).scrollTop(); @@ -3249,7 +3251,6 @@ this.toolbar.css('position', 'fixed'); this.toolbar.css('top', this.options.affixTopOffset); } - } else { } return this.toolbar.css('left', this.element.offset().left - 2); From 413dc5e75183131ca4c665ed4d20eaf6b8e23003 Mon Sep 17 00:00:00 2001 From: Robert Rollins Date: Tue, 21 Feb 2023 14:30:42 -0800 Subject: [PATCH 2/2] Applied required formatting fixes. Reluctantly. --- wagtail_hallo/static/js/hallo-editor.js | 3 +- wagtail_hallo/static/js/vendor/hallo.js | 76 +++++++++++++------------ 2 files changed, 43 insertions(+), 36 deletions(-) diff --git a/wagtail_hallo/static/js/hallo-editor.js b/wagtail_hallo/static/js/hallo-editor.js index 1e92357..3da43ca 100644 --- a/wagtail_hallo/static/js/hallo-editor.js +++ b/wagtail_hallo/static/js/hallo-editor.js @@ -88,7 +88,8 @@ /* Hallo's toolbar will reposition itself on the scroll event. This is useful since animating the fields can cause it to be positioned badly initially. */ - // Adding .content-wrapper as a triggered element makes this work in Wagtail 4. + // Adding .content-wrapper as a triggered element makes this work + // in Wagtail 4. $(window).add('.content-wrapper').trigger('scroll'); }); }) diff --git a/wagtail_hallo/static/js/vendor/hallo.js b/wagtail_hallo/static/js/vendor/hallo.js index 4126dc0..0ad69dc 100644 --- a/wagtail_hallo/static/js/vendor/hallo.js +++ b/wagtail_hallo/static/js/vendor/hallo.js @@ -459,7 +459,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -598,7 +598,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -627,7 +627,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -735,7 +735,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -787,7 +787,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -838,7 +838,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -913,7 +913,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1023,7 +1023,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1301,7 +1301,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1672,7 +1672,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1808,7 +1808,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -1951,7 +1951,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2042,7 +2042,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2521,7 +2521,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2583,7 +2583,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2620,7 +2620,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2781,7 +2781,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2825,7 +2825,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2942,7 +2942,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -2979,7 +2979,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3034,7 +3034,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3163,7 +3163,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3184,13 +3184,18 @@ this.toolbar.show(); jQuery(this.options.parentElement).append(this.toolbar); this._bindEvents(); - // Adding .content-wrapper as a triggering element makes these work in Wagtail 4. - jQuery(window).add('.content-wrapper').on('resize', function (event) { - return _this.setPosition(); - }); - jQuery(window).add('.content-wrapper').on('scroll', function (event) { - return _this.setPosition(); - }); + // Adding .content-wrapper as a triggering element makes these work + // in Wagtail 4. + jQuery(window) + .add('.content-wrapper') + .on('resize', function (event) { + return _this.setPosition(); + }); + jQuery(window) + .add('.content-wrapper') + .on('scroll', function (event) { + return _this.setPosition(); + }); if (this.options.parentElement === 'body') { el = jQuery(this.element); widthToAdd = parseFloat(el.css('padding-left')); @@ -3233,10 +3238,11 @@ return; } this.toolbar.css('position', 'absolute'); - // The 44 is to account for the changes to the Page Editor UI in Wagtail 4. + // The 44 is to account for the changes to the Page Editor UI in + // Wagtail 4. this.toolbar.css( 'top', - this.element.offset().top - this.toolbar.outerHeight() + 44 + this.element.offset().top - this.toolbar.outerHeight() + 44, ); if (this.options.affix) { scrollTop = jQuery(window).scrollTop(); @@ -3268,7 +3274,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3397,7 +3403,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3583,7 +3589,7 @@ }, }); })(jQuery); -}.call(this)); +}).call(this); (function () { (function (jQuery) { @@ -3677,4 +3683,4 @@ }, }); })(jQuery); -}.call(this)); +}).call(this);