Drag Area cannot be initialized by a script after page loads.

[JustAnEric]

Specification

• pywebview version: 4.0.2
• operating system: Windows 11
• web renderer: WinForms / Chromium

Description

PyWebView is unable to initialize a drag area after the page loads. I am trying to make a custom Spotify client and I initialize the drag area like this:

document.body.insertAdjacentHTML('beforeend', `
    <div class="pywebview-drag-region">
            
    </div>
`);

How can I make PyWebView sort of check for the pywebview-drag-region class name again or is there an alternative?

[r0x0r]

The drag area is checked on the application startup. Dynamic check is not implemented, but it can be done with MutationObserver

[JustAnEric]

@r0x0r Would you be kind enough to provide an example of this implementation so I can understand it further?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

The message to post on the issue when closing it. If none provided, will not comment when closing an issue.

[r0x0r]

@JustAnEric look at webview/js/events.py lines 26-29 where events are attached to drag selector. A mutation observer would look something like this (courtesy of ChatGPT, untested). I am not sure about performance implications, if this is enabled by default. This needs to be tested first.

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    for(var i = 0; i < mutationsList.length; i++) {
        var mutation = mutationsList[i];
        // Check if any of the added nodes have the class '.drag-region-selector'
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach(node => {
                if (node.nodeType === 1 && node.classList.contains('%(drag_selector)s')) {
                    node.addEventListener('mousedown', onMouseDown);
                }
            });
        } else if (mutation.type === 'attributes' && mutation.target.classList.contains('%(drag_selector)s')) {
            node.addEventListener('mousedown', onMouseDown);
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the document for configured mutations
observer.observe(document, config);

// Later, you can disconnect the observer when you don't need it anymore
// observer.disconnect();

[github-actions]

The message to post on the issue when closing it. If none provided, will not comment when closing an issue.

[JustAnEric]

How would PyWebView load that JavaScript in? I'm guessing util.inject_pywebview() ?