DOM manipulation of privatebin.js via appendChild messes with custom template

[cloudscape-germany]

Describe the problem/question

In line 2999 of privatebin.js version 2.0.3 in setAttachment method:

PrivateBin/js/privatebin.js

Line 2999 in c0d26b5

template[0].appendChild(fileInfo);

This alternates custom templates in an unwanted way (ie text floating next to custom download-attachement button). Would it be possible not alter View of custom templates from the Model-Controller, ie. sparate concerns more in a way that enables full customisation of the View?

Did you use the FAQ section?

• Yes, I have read the FAQ and I found no solution/answer there.

What you did?

1. Write custom template, using a custom button style

What happens

When attachment is providede by user, the text and size info of the file will be positioned outside of button

What should happen

We shouldnt need to alter privatebin.js to alter behaviour of View. (HTML)

Issue reproducibility

Yes, I can reproduce it on https://privatebin.net.

[cloudscape-germany]

Has been solved like this, but it is a ugly Workaround, I would much prefer seperation of concerns (model/controller and view):

1. Add this CSS Class to your attachmentTemplate button element: attachment-label, i.e.:

<div id="attachmenttemplate" class="hidden d-inline-block" style="margin-left: 5px;">
    <a class="btn btn-secondary d-flex justify-content-center align-items-center gap-1">
        <svg width="16" height="16" fill="currentColor" aria-hidden="true"><use href="img/bootstrap-icons.svg#download" /></svg>
        <span class="attachment-label">Download attachment</span>
    </a>
</div>

2. Add this to your template's custom JavaScript:

// Observe attachment container for changes
const attachmentContainer = document.getElementById('attachment');
if (attachmentContainer) {
    const attachmentObserver = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    // Find the attachment link and file info text
                    const attachmentLink = node.querySelector('a');
                    const attachmentLabel = node.querySelector('.attachment-label');
                    
                    if (attachmentLink && attachmentLabel) {
                        // Get all text nodes (contains filename and size)
                        const textNodes = Array.from(node.childNodes).filter(
                            child => child.nodeType === Node.TEXT_NODE && child.textContent.trim()
                        );
                        
                        if (textNodes.length > 0) {
                            // Extract filename and size from text node
                            const fileInfoText = textNodes.map(n => n.textContent.trim()).join(' ');
                            
                            // Update button text with file info
                            attachmentLabel.textContent = 'Download attachment' + fileInfoText;
                            
                            // Remove the text nodes
                            textNodes.forEach(textNode => textNode.remove());
                        }
                    }
                }
            });
        });
    });
    
    attachmentObserver.observe(attachmentContainer, {
        childList: true,
        subtree: true
    });
}

[rugk]

Hmm, generally yes, I'd agree the codestyle is not perfect here, and indeed a separation of the view from controller logic is generally good.

The question I have is just: What is your actual aim/problem here? What do you want to modify? A custom button design? For the "download attachment" button?

If so, yeah, maybe proper spans for the data and adjusting the JS to add the wanted data there would be a better code. A MutationObserver just for modifying that is really an overkill.

In general, feel free to submit a PR to improve the separation of concerns/code style.

Some unrelated tips though:

1. If you link to code of PrivateBin, you can do so here directly on GitHub by finding that file/line: https://github.com/PrivateBin/PrivateBin See the help here e.g.
2. If you paste own code in markdown, I'd suggest using proper Markdown formatting available on GitHub, including for code blocks/console commands respectively it's output. This makes your post much more readable, and generally contributes to how a good question should be asked.

[cloudscape-germany]

Yes, in our template we use a custom button design, to be honest, just your old design. There are no plans for us to upgrade the UI to your latest templates, until then the new privatebin.js breakes the old template. As written, the file size and filename are not formatted inside the "download attachement" button, but outside, non-clickable, text-only. (as the code in line 2999 just appends bland "file-info"). Maybe this could be solved via CSS more elegantly.

[rugk]

Which template was it based on? If base don bootstrap3 note it is technically kinda deprecated and you should migrate to the latest bootstrap version.

And yes it can certainly solved more elegantly, by inserting the data into pre-existing spans that already exist. As said, a PR is much appreciated!

[cloudscape-germany]

#1786