IFrame Lightboxes

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 лайк

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

5 лайков

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 лайков

@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 лайка

Почему это работает только на настольных компьютерах?

У меня была ошибка в этом компоненте темы: содержимое постов не отображалось.

Могу ли я просто открыть iframe по клику на любую ссылку?
Пользователь видит iframe только после клика на ссылку.

1 лайк

Эх… этот вопрос затерялся. Прошло уже много времени с момента последнего внимания к нему, и в Discourse многое изменилось.

Лучше поздно, чем никогда… :upside_down_face:

Я только что отправил обновление, которое должно устранить все проблемы.

Будет работать после обновления.

Теперь компонент самодостаточен и не требует внешних запросов.

После обновления он будет работать и на мобильных устройствах.

Должно исправиться после обновления.

Это выходит за рамки данного компонента. Для решения такой задачи вам понадобится другой компонент.

Приношу извинения за задержку и благодарю за обратную связь :+1:

7 лайков

Огромное спасибо!

Извиняться не нужно. Приятно видеть, что вы нашли время уделить этому внимание, несмотря на все остальные дела. Мы это очень ценим.

1 лайк

Существует ли уже компонент, который может открывать iframe в виде лайтбокса по ссылке таким образом?

Мне не известно о существовании компонентов, которые делают это, поэтому вам придется создать свой собственный или заказать такую работу в категории Marketplace.

Этот компонент темы проверяет теги iFrame в сообщении и сравнивает их атрибут src со списком допустимых источников, предоставленным администратором в настройках компонента. Если домен источника совпадает, добавляется кнопка лайтбокса. Отображение лайтбокса обрабатывается библиотекой featherlight.js. Featherlight отслеживает клики по элементам с атрибутом data-featherlight. Если один из таких элементов был нажат, открывается лайтбокс с содержимым этого iFrame.

То же самое можно сделать с тегами <a> в другом компоненте, приложив немного усилий. Если href ссылки совпадает с доменом, указанным в настройках компонента, она открывается в лайтбоксе внутри iFrame. В противном случае ссылка остается обычной. Вы же не хотите, чтобы все ссылки открывались в лайтбоксовом iFrame.

Большая часть необходимой работы уже реализована в этом компоненте, поэтому вы можете просто сделать форк и начать с него. В планы по добавлению этой функции в данный компонент не входит, так как он предназначен только для обработки тегов iFrame в сообщениях.

3 лайка

Вот один из способов вставки iFrame Lightbox внутрь кликабельного элемента встроенного текста…

Плагин Discourse Footnotes принимает как HTML, так и Markdown внутри всплывающих сносок.

Например, этот код…

… генерирует эту кликабельную всплывающую сноску, содержащую мини-iFrame с кнопкой Развернуть содержимое в правом верхнем углу…

Чтобы это работало, я в настройках сайта включил опции включить сноски Markdown и отображать сноски внутри текста

Затем я добавил доменное имя этого сайта (microchic.com) в список разрешённых iFrame в настройках сайта…

… а также в список доменов-источников iFrame в настройках плагина iFrame Lightbox…

Вы можете проверить это в реальном времени здесь…

Привет, хотел узнать, как вы форматируете посты. У меня получается пустое окно при использовании

Этот компонент всё ещё работает? Раньше он у меня работал, но по какой-то причине перестал. Похоже, последнее обновление было 3 года назад: hnb-ku/discourse-iframe-lightboxes (github.com). Разумно предположить, что что-то сломалось?

1 лайк

Это работало в мае, когда я использовал его здесь.

1 лайк

С моей стороны всё работает на последней версии Discourse.

Есть ли какая-либо ошибка в консоли браузера?

2 лайка

Не получается заставить это работать. Я следовал руководству буквально и добавил домен как в компонент темы, так и в настройку сайта. Вот что я получаю:

В консоли разработчика JS ошибок не зафиксировано.

В настройке сайта «allowed iframes» указан домен верхнего уровня:

https://example.biz/

В настройках компонента темы он указан без https, как в существующих примерах:

example.biz

Есть ли идеи, как это отладить?

1 лайк

В консоли ошибок нет.
Я использую это с предпросмотром PDF: Inline PDF Previews - #116 by Alon1
Ожидаю, что над PDF появятся стрелки для разворачивания

Но они просто не отображаются

Можете попробовать эту ветку вместо неё?

URL: https://github.com/Arkshine/discourse-iframe-lightboxes
Ветка: improve-compatibility

Если раньше всё работало, вам просто повезло!

Оба TC используют один и тот же API для оформления поста, поэтому порядок их установки имеет значение. Кроме того, источник iframe устанавливается динамически после загрузки PDF-файла и может быть недоступен сразу в этом TC IFrame Lightboxes.

Внесённые мной изменения сводятся к следующему:

  • Поиск элементов iframe в следующем цикле выполнения, чтобы гарантировать их доступность
  • Ожидание загрузки iframe для получения URL источника

Дайте знать, если теперь всё работает лучше. :+1:

4 лайка