Lightboxes com IFrame

This is a theme component that adds the ability to open iFrames in lightboxes.

Samples

This component adds an “expand” button on top of the iframes you enable it on.

Clicking the button will open the iframe in fullscreen in a lightbox.

Clicking either the dark area around the iframe or the x at the top right corner closes the lightbox. The same way it works for default image lightboxes.

Settings

There’s only one setting. You add the domains that you want to have this functionality on there.

:warning: Whatever domains you specify here also need to be whitelisted in the allowed_iframes site setting to show up in posts in the first place.

Usage examples:

Here’s a couple of examples besides the CodePen iframe above

Google forms iframe:

Embedding the entire weather.gov website:

Credit:

This component uses Noël Bossart’s fantastic Featherlight library (MIT license - 3kb gzip)

31 curtidas

I suppose these iframes still also need to be activated in the allowed iframes site setting?

5 curtidas

Correct, this component will not mess with any whitelisting settings at all.

In order for any iframe to show up in the cooked content of a post - expandable or not - it has to be on the list of allowed_iframes setting like you pointed out.

I’ll add a note about this to the topic.

5 curtidas

@Johani is this component still functional? If so, any thoughts on why I am not getting the pop-out diagonal-arrows in the upper-right, but rather a blank/dead box?

Here is what I’ve tried:

  • Updated themes/components.
  • Made sure src links were white-listed in the component and the Discourse settings.
  • Tried a few different links, including Google Maps.
  • Tried several scenarios with the Media Overlay on/off + Lightbox alone on/off.

Below are some screenshots.

Thx!
-Patrick





image
image
image
image

Dear @Johani,

thank you very much for conceiving and maintaining this theme component.

After installing it on https://community.hiveeyes.org/ the other day, some users recently started to complain that the overall appearance of the head of the page looked different for them. They finally found out the reason was that they blocked cloudflare altogether, so all requests to https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js would fail.

So, we are humbly asking if there would be a way for you to provide this component in a self-contained variant?

With kind regards,
Andreas.

3 curtidas

Why is it desktop-only?

I had a bug this theme component, post contents weren’t showing.

Could I trigger open iframe in a any link simply?
User just see iframe only when click at link

1 curtida

Welp… this one fell through the cracks. It’s been a while since it got any attention, and a lot has changed in Discourse.

Better late than never… :upside_down_face:

I just pushed an update that should fix all the problems.

It will be after you update.

The component is now self-contained with no external requests.

After you update, it will work on mobile too.

Should be fixed after you update

This is out of the scope of this component. You need a different component to handle that.

Apologies for the delay, and thanks for the feedback :+1:

7 curtidas

Muito obrigado!

Não precisa se desculpar, é bom ver que você conseguiu dar um pouco de atenção a ele, entre todas as outras coisas que estão acontecendo. Nós realmente apreciamos.

1 curtida

Já existe um componente que pode abrir um lightbox de iframe em um link dessa forma?

Não estou ciente de nenhum componente existente que faça isso, então você teria que criar um ou encomendar esse trabalho na categoria Marketplace.

Este componente de tema verifica iFrame em uma postagem e compara seu atributo src com uma lista de fontes elegíveis fornecida pelo administrador nas configurações do componente. Se o domínio da fonte corresponder, ele adiciona o botão lightbox. A exibição do lightbox é tratada pelo featherlight.js. Featherlight escuta cliques em elementos com o atributo data-featherlight. Se um desses for clicado, ele abre o lightbox com o conteúdo desse iFrame.

Você pode fazer o mesmo com tags <a> em um componente diferente com um pouco de esforço. Se o href do link corresponder a um domínio listado nas configurações do componente, exiba-o em um lightbox de iframe. Caso contrário, deixe-o como um link normal. Você não quer que todos os links abram em um iframe com lightbox.

A maior parte do trabalho necessário já é tratada por este componente, então você pode simplesmente fazer um fork dele e começar a partir daí. Não há planos para adicionar esse recurso a este componente porque ele se destina apenas a lidar com tags iFrame em postagens.

3 curtidas

Aqui está um método para incluir um Lightbox iFrame dentro de um elemento de texto inline clicável…

O Discourse Footnotes Plugin aceita HTML, bem como Markdown dentro de notas de rodapé pop-up.

Então, por exemplo, este código…

… gera esta nota de rodapé pop-up clicável contendo um mini iFrame com o botão Expand content no canto superior direito…

Para fazer isso funcionar, eu (nas configurações do site) ativei tanto enable markdown footnotes quanto display footnotes inline

Então eu adicionei o nome de domínio desse site (microchic.com) à lista allowed iframes nas configurações do site…

… e também na lista de iframe origin domains nas configurações do iFrame Lightbox Plugin…

Você pode experimentá-lo ao vivo aqui…

Oi, estava me perguntando como você formata posts. Recebo uma caixa em branco usando

iframe src=" url" cercado por < > Isso acontece mesmo quando uso codepen.io, que está na lista de permissões de iframes do site principal.

Este componente ainda está funcionando? Costumava funcionar para mim no passado, mas parou de funcionar por algum motivo.

Parece que a última atualização foi há 3 anos: hnb-ku/discourse-iframe-lightboxes (github.com) Então é razoável supor que algo quebrou?

1 curtida

Estava funcionando em maio, pois usei aqui.

1 curtida

Funciona do meu lado com a versão mais recente do Discourse.

Há algum erro no console do navegador?

2 curtidas

Não consigo fazer isso funcionar, segui o guia precisamente e adicionei o domínio tanto ao componente do tema quanto à configuração do site. Eis o que recebo:

Nenhum erro registrado no console do desenvolvedor de JS.

A configuração do site allowed iframes tem o domínio de nível superior:

https://example.biz/

As configurações do componente do tema o têm sem https, conforme os exemplos existentes:

example.biz

Alguma ideia de como depurar?

1 curtida

sem erros no console.
Estou usando com pré-visualizações de PDF: Inline PDF Previews - #116 by Alon1
Espero obter as setas de expansão acima do PDF

Mas elas simplesmente não aparecem

Você pode tentar este fork em vez disso?

URL: https://github.com/Arkshine/discourse-iframe-lightboxes
Branch: improve-compatibility

Você teve sorte antes se estava funcionando!

Ambos os TCs usam a mesma API para decorar uma postagem, então a ordem em que você os instala seria necessária. Além disso, a origem do iframe é definida dinamicamente assim que o PDF é baixado e pode não estar imediatamente disponível neste TC de IFrame Lightboxes.

As alterações que fiz são basicamente:

  • Procure por elementos iframe no próximo loop de execução, então o iframe tem garantia de estar disponível
  • Espere o iframe carregar para que você possa recuperar o URL de origem

Me diga se funciona melhor. :+1:

4 curtidas