HFS Remote Folder Selection

[cbr00t]

Hi all,

This is a small add-on that sends the path information of the selected Remote HFS Virtual Folder to an external application as a callback.

Since I am new to HFS Plugin structures, I tried to do this job with a simple script with Custom HTML. I think it would be useful to add a similar feature as a plugin.

Usage

let encodedCallbackURL = encodeURIComponent(`https://localhost:1234/myRestServer/remoteFolderSelectCallback/?path=$url`); window.open(`https://server-ip/hfs-folder/path/to/?callback=${encodedCallbackURL}`)

Script/HTML Codes

[Style]

button#select-callback { font-weight: bold; color: #5c85ff }
button#select-callback:active { color: lightgreen }

[Html Head]

<script>
function readQSDict() {
    const vars = {}, hashes = location.href.slice(location.href.indexOf('?') + 1).split('&');
    for (let i = 0; i < hashes.length; i++) { let hash = hashes[i].split('='); vars[decodeURIComponent(hash[0])] = hash[1] == null ? true : decodeURIComponent(hash[1]) }
    return vars
}
var qs = readQSDict(), callbackURL = qs.callback
</script>

[After Menu Bar]

<button id="select-callback" hidden></button>
<script>
if (callbackURL) {
    let btn = document.getElementById('select-callback'), menu = document.getElementById('menu-bar');
    menu.prepend(btn); btn.innerHTML = HFS.t('Use This Folder'); btn.removeAttribute('hidden');
    btn.addEventListener('click', evt => {
        let path = location.pathname; if (path?.length > 1 && path.at(-1) == '/') { path = path.slice(0, -1) }
        let url = callbackURL.replaceAll('$url', path);
        let script = document.createElement('script'); script.src = url; script.crossOrigin = '';
        script.onload = script.onerror = evt => evt.currentTarget?.remove();
        document.head.appendChild(script)
    })
    /*HFS.watchState('uri', e => { let {uri} = e; if (uri && !uri.includes('?callback=')) { uri += encodeURIComponent(callbackURL); e.uri = uri } })*/
}
</script>

Screenshots

[rejetto]

hey! thanks for sharing your work.
I see that you want to add something inside the menu-bar.
Consider that this can create a layout problem on smaller screens, like phones.
Anyway, I will add in next version an "appendMenuBar" that will insert inside, not outside like afterMenuBar. Even if it's append (and not prepend), one can easily move it to the left using css order: -1.