Re-add afterLoad to loadNote for compatibility

[chriszs]

In the process of restoring a legacy piece of custom journalism, I started debugging inline document citation links that no longer functioned. This was one of the earliest pieces to use this style of proof, which I believe is an important piece of journalism history to preserve. They work by calling dc.embed.loadNote, which miraculously still works, and then positioning the note after the load with an afterLoad callback, which sadly no longer does. To temporarily address this, I've shimmed the original script with a ridiculous workaround, but it'd be better and potentially not that hard to restore the original afterLoad callback, which is what I propose to do.

[eyeseast]

It looks like the notes are loading in the linked story. Do we still need this?

[chriszs]

@eyeseast It works (semi-unreliably) because there's a workaround in there that looks like this:

(function() {
    // we're extending the `show` method to give us a reference to Backbone View,
    // which we need later to call `afterLoad()`
    const proto = propublica.views.annotationHover.prototype;
    const originalShow = proto.show;

    let activeView = null;

    proto.show = function(e) {
        activeView = this;
        return originalShow.apply(this, arguments);
    };

    const popup = document.getElementById("annotation_popup");
    if (!popup) return;

    // setting up a resize observer which will call `afterLoad` when the iframe resizes
    const resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
            if (activeView) {
                activeView.afterLoad();
                // ...
                return;
            }
        }
    });

    // setting up a mutation observer to listen for the iframe insertion
    const observer = new MutationObserver(function(mutations) {
        for (var i = 0; i < mutations.length; i++) {
            var added = mutations[i].addedNodes;
            for (var j = 0; j < added.length; j++) {
                var node = added[j];
                if (node.nodeType === 1 && node.tagName && node.tagName.toLowerCase() == "iframe" && node.parentElement.classList.contains("DC-note-container") && activeView) {
                    // adding a DC-note wrapper for styling compatibility
                    const wrapper = document.createElement('div');
                    wrapper.classList.add('DC-note');
                    node.replaceWith(wrapper);
                    wrapper.appendChild(node);

                    resizeObserver.observe(node);

                    return;
                }
            }
        }
    });

    observer.observe(popup, {
        childList: true,
        subtree: true
    });
})();

I'd like to contribute to the product such that we can delete this, if, as I hope, the patch won't be too complicated. This issue is to give context to a hopefully simple PR, which is still in progress because I realized it needs to account for iframe resizing after all.

[eyeseast]

If you look at how embeds are generated now, this is what the code looks like:

<iframe src="https://embed.documentcloud.org/documents/797614/annotations/121138/?embed=1" style="border: 1px solid #d8dee2; border-radius: 0.5rem; width: 100%; height: 300px; box-sizing: content-box;"></iframe>
<script src="https://embed.documentcloud.org/embed/dc-resize.js"></script>

We don't use a script to build the iframe at all anymore, so the connection points might be different.