fetch previews only once per page load

[e-five256]

this is a simple change where, after clicking the preview button once, further clicking will only hide and show the content, with no further AJAX calls to fetch the content again. If it fails, it will act as it did before showing a click to retry prompt (clicking preview will hide and show this prompt, but clicking on the prompt itself works to refetch the content)

@asdfzdfj since you touched the preview stuff recently, want to check with you that this makes sense

edit: tested this with asdfzdfj's example post of linked youtube with 2 image inlines and it appears to work, fetched each preview only once and correctly hid/made visible the previews after that

[asdfzdfj]

given a bit of test drive, seems to be working fine

come to think of it, maybe the wording of the retry link label should be adjusted: "Click here to retry." since hiding and reopening the preview now no longer refresh the preview content and only that link would trigger refresh

mbin/assets/controllers/preview_controller.js

Lines 72 to 80 in 824905b

	let failedHtml =
	`<div class="preview">
	<a class="retry-failed" href="#"
	data-action="preview#retry"
	data-preview-url-param="${event.params.url}"
	data-preview-ratio-param="${event.params.ratio}">
	Failed to load. Click to retry.
	</a>
	</div>`

[e-five256]

It'd be nice if it could be a loc token but I didn't see a quick example of that via JS. maybe it needs to load a twig template instead?

[asdfzdfj]

It'd be nice if it could be a loc token but I didn't see a quick example of that via JS. maybe it needs to load a twig template instead?

some ways I could think of:

• using symfony ux translator to expose some translations to js and then do it in the controller
• template translation in twig and pass it to preview controller by controller values, something like:

<div data-controller="preview"
     data-preview-retry-label-value="{{ 'preview_click_to_retry'|trans }}">...</div>

export default class extends Controller {
    static values = {
        retryLabel: String,
    };
    // ...
    async show(event) {
        // ...
        let failedHtml = `<div><a>${this.retryLabelValue}</a></div>`
        // ...
    }
}

[e-five256]

This seems to work except for inline embeds. I'm stuck on adding it to https://github.com/MbinOrg/mbin/blob/main/src/Markdown/CommonMark/EmbedElement.php#L15-L19

I have 'data-preview-retry-label-value' => $this->translator->trans('preview_click_to_retry'), but it doesn't seem to add any attributes, even tried just adding 'data-foo' => 'bar', and still nothing.

Then again, maybe it doesn't effect past content if that markdown is parsed only once... hmm no even posting new content doesn't add any attributes to that html 😕 it renders <span class="preview" data-controller="preview"> regardless of what I do. maybe I'm looking at the wrong file... but if that's the case I have no idea what is rendering it, I can't find any other locations of data-controller preview

[e-five256]

Maybe I should just change the hardcoded wording here, leave it alone for now, and open a separate PR for translating it to take a look at?

[asdfzdfj]

it should be that file (EmbedElement) that's used for render links, but a more thorough cache flush/reload might be needed
(I tend to use something like php bin/console cache:clear && sudo service php-fpm reload && ( . ./.env.local; REDISCLI_AUTH=$REDIS_PASSWORD redis-cli FLUSHDB ) to flush/reload cache when I'm tinkering)

using ux-translator for this is starting to look like a better option...

[e-five256]

Alright not saying I'm giving up but pulling in an experimental bundle for this also seems like it'd require a lot of testing, but it's possible we want to do that anyways, we probably have more hardcoded copy elsewhere

I just went with changing the hardcoded copy for now to keep the changes here simple

[asdfzdfj]

Maybe I should just change the hardcoded wording here, leave it alone for now, and open a separate PR for translating it to take a look at?

yeah I think that'd be good enough for now (the changes I pulled from kbin side is also hardcoded too)

Alright not saying I'm giving up but pulling in an experimental bundle for this also seems like it'd require a lot of testing, but it's possible we want to do that anyways, we probably have more hardcoded copy elsewhere

I also found another bundle: https://github.com/willdurand/BazingaJsTranslationBundle if you want to play around