Customization Options / Javascript Events?

Mikepuglisi

My client is looking for the ability to set "Favorites" and/or "Thumbs up / Thumbs down" functionality.

Main Questions:

1) Are there javascript events I can listen for the "Image Viewer" (e.g., onOpen, onChange, etc)
2) Is there already a way to customize Image Viewer overlay content. For example, replace EXIF data with my own html elements?

I'm wondering what my customization options are for this script. At bare minimum, if there were javascript events I could listen to when the Image Viewer is opened or navigated I could inject some buttons and extend upon it from there. I don't see any events exposed in https://www.files.gallery/docs/javascript-config/

I considered hosting assets myself and just hacking them to suit my needs, but the code is obfuscated, which is understandable, but I'd like to be able to customize with custom functionality (buttons, thumbnail overlaid icons, etc).

Is this possible / practical?

Karl

Mikepuglisi My client is looking for the ability to set "Favorites" and/or "Thumbs up / Thumbs down" functionality.

I have been considering this, but this is incredibly fragile unless you use a database and let the application control the file system. How else are you going to store a "favorite" for a specific image also after someone renames the file? This is not useful or productive until we move Files Gallery some CMS-functionality.

I am thinking of adding localStorage-favorites, eg. favorites that get stored in the users browser (and only the browser).

Mikepuglisi 1) Are there javascript events I can listen for the "Image Viewer" (e.g., onOpen, onChange, etc)

Sorry, no. Maybe in the future, but this is currently beyond the scope of a file viewer and file manager with emphasis on simplicity.

Mikepuglisi 2) Is there already a way to customize Image Viewer overlay content. For example, replace EXIF data with my own html elements?

Sorry, no. This request seems to specific, as I can't see what you are going to replace it with, unless you are attempting to add CMS-like features with data extracted from database.

Mikepuglisi I'm wondering what my customization options are for this script. At bare minimum, if there were javascript events I could listen to when the Image Viewer is opened or navigated I could inject some buttons and extend upon it from there. I don't see any events exposed in https://www.files.gallery/docs/javascript-config/

Sorry, there are no events for image viewed. I can definitely add something like this in a future release if it seems to be useful. I probably can't recommend or officially support "injecting buttons" or arbitrary html elements.

Mikepuglisi Is this possible / practical?

I'm very sorry to disappoint, but it really isn't simple to add advanced custom features to Files Gallery. Not only because there aren't API options available, but it's near-impossible to plan for "custom design elements" in the already meticulously planned interface design.

Your option would be to hack the self-hosted javascript, which probably won't be a pretty process.

Mikepuglisi

The following hack seems promising. I added the following code to custom.js in order to observe dom changes.

Then I can observe for 'pswpcaptioncenter' and replace child elements with custom buttons. The proof of concept seems to work, but I'm interested to know if there are better solutions for this level of customization.

`
// Function to observe DOM changes
function observeDOM() {
const targetNode = document.body;
const config = {attributes: true, childList: true, subtree: true };

const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
                console.log('A child node has been added or removed.', mutation);
                console.log('mutation', mutation.target)
                if (mutation.target.className == 'pswp__caption__center') {
                    const alreadyPopulated = mutation.target.querySelector('#custom-controls');
                    const metaParent = mutation.target.querySelector('.popup-image-meta');
                    if (alreadyPopulated == null) {
                        metaParent.innerHTML = '<div id="custom-controls"></div>';
                        const thumbsUpButton = document.createElement("button");
                        thumbsUpButton.innerHTML = 'Thumbs Up';
                        thumbsUpButton.onclick = function () {
                            alert(window.location);// Here I can get the pid from the URL and perform custom actions.
                        }
                        metaParent.querySelector('#custom-controls').appendChild(thumbsUpButton);
                    }
                }
        } else if (mutation.type === 'attributes') {
                console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

// Later, you can stop observing
// observer.disconnect();

}

// Start observing
observeDOM();`