Adding custom JS to Lychee

[3246]

Hello Cloudriders.

I want to add a piece of custom JS (with a tiny bit of HTML) to Lychee and tried the 'add JS' function in settings. Since Cloudron has a read-only file system I wondered how this might be achieved?

[nebulon]

Do you have more information on what the Add JS functionality does?

[3246]

Hey @nebulon, yes - it's to embed a commenting field

Ref. https://cusdis.com/doc#/advanced/sdk

[girish]

Curiosly, the 'Personalize CSS' works. It saves it in /app/data/user.css

[girish]

@3246 Fixed in latest package

[3246]

Amazing, thank you @girish

[3246]

OK, this is working and I wondered if somebody with better JS skills can help me complete this code piece to add comments to Lychee:

document.getElementById("footer").innerHTML += " <div id='cusdis_thread' data-host='https://cusdis.com' data-app-id='RANDOMSTRINGOFNUMBERS' data-page-url='URLHERE"' data-page-title='TITLEHERE'></div><script async defer src='https://cusdis.com/js/cusdis.es.js'></script> ";

I need to include the current page URL (window.location.href) in the data-page-url attribute and title (document.title) in the data-page-title. I unsuccessfully tried my limited skills to solve this and so far only ended up including the code without the needed references on the page.

Not sure where to stick this reference either to display the comment field on an individual photo page only but that's probably doable using an if statement somewhere

PS I think the lychee sidebar (lychee_sidebar) also needs a CSS style adding to scroll when the window is smaller than its contents (e.g. overflow: auto;).

[girish]

@3246 I would simply test it step by step.

For a start does a basic document.getElementById("footer").innerHTML += "<p>FOO</p>" work ? If that works, then do:

var curl_url = window.location.href;
var myHTML = "<p>" + curl_url + "</p>";
document.getElementById("footer").innerHTML += myHTML;

and so on

[3246]

Thanks @girish. It works on the main page but not a gallery or photo page. Also, the toolbar seems missing (it has class .h-0 == height=0px oddly???).

The gallery homepage

An album page

This is the same for individual photo pages as they get loaded in a lightbox (but seem to have their own URL).

[girish]

@3246 Just had a quick look . It seems the script gets injected in the pages using <script defer type="text/javascript" src="https://xxx/dist/custom.js"></script> at the very top. If you put alert('foo'); then it shows it all the pages. But the issue as you found is that the gallery page and individual photo page don't have the footer element. The footer is only in albums page it seems. I guess you have to ask upstream about this design/layout.