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








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:

모든 문제를 수정해야 할 업데이트를 방금 push했습니다.

업데이트를 적용하면 기능할 것입니다.

이제 이 컴포넌트는 외부 요청 없이 자체적으로 포함되는(self-contained) 형태입니다.

업데이트를 적용하면 모바일에서도 작동합니다.

업데이트를 적용하면 수정될 것입니다.

이것은 이 컴포넌트의 범위를 벗어납니다. 이를 처리하려면 다른 컴포넌트가 필요합니다.

지연에 대해 사과드리며, 피드백에 감사드립니다 :+1:

7개의 좋아요

정말 감사드립니다!

사과하실 필요 없습니다. 다른 많은 일들이 진행되고 있는 와중에도 시간을 내어 신경 써주셔서 기쁩니다. 정말 감사드립니다.

1개의 좋아요

링크를 통해 iframe 라이트박스를 여는 기능이 이미 있는 컴포넌트가 있나요?

그 기능을 수행하는 기존 컴포넌트가 있는지 모르겠으므로, Marketplace 카테고리에서 해당 컴포넌트를 직접 만들거나 개발을 의뢰해야 합니다.

이 테마 컴포넌트는 게시글 내의 iFrame 태그를 확인하고, 그 src 속성을 관리자 설정에서 제공한 대상 소스 목록과 비교합니다. 소스 도메인이 일치하면 라이트박스 버튼을 추가합니다. 라이트박스를 표시하는 동작은 featherlight.js가 처리합니다. Featherlight는 data-featherlight 속성이 있는 요소의 클릭 이벤트를 감지하며, 해당 요소가 클릭되면 해당 iFrame의 내용을 라이트박스로 엽니다.

조금만 손보면 다른 컴포넌트에서 <a> 태그에도 동일한 방식으로 적용할 수 있습니다. 링크의 href가 컴포넌트 설정에 지정된 도메인과 일치하면 iframe으로 라이트박스를 띄우고, 그렇지 않으면 일반 링크로 남겨두세요. 모든 링크가 라이트박스된 iframe에서 열리도록 하는 것은 바람직하지 않습니다.

필요한 대부분의 작업은 이미 이 컴포넌트에서 처리되고 있으므로, 하드 포크(hard-fork)하여 이를 기반으로 시작하면 됩니다. 이 컴포넌트는 게시글의 iFrame 태그만 처리하도록 설계되었기 때문에 해당 기능을 추가할 계획은 없습니다.

3개의 좋아요

클릭 가능한 인라인 텍스트 요소 안에 iFrame 라이트박스를 포함하는 방법 중 하나는 다음과 같습니다 …

Discourse Footnotes 플러그인은 팝업 각주 안에 HTML과 마크다운을 모두 지원합니다.

예를 들어 이 코드 …

… 는 오른쪽 상단에 콘텐츠 확장 버튼이 있는 미니 iFrame을 포함하는 이 클릭 가능한 팝업 각주를 생성합니다 …

이를 작동시키기 위해 저는 (사이트 설정에서) 마크다운 각주 사용과 각주 인라인 표시를 모두 활성화했습니다 …

그런 다음 해당 사이트의 도메인 이름(microchic.com)을 사이트 설정의 허용된 iframe 목록에 추가했습니다 …

… 그리고 iFrame Lightbox 플러그인 설정의 iframe 원본 도메인 목록에도 추가했습니다 …

여기서 실시간으로 테스트해 볼 수 있습니다 …

안녕하세요, 게시글을 어떻게 포맷팅해야 하는지 궁금해서 질문드립니다. < >로 감싸서 iframe src="url"을 사용해도 빈 박스만 표시됩니다. 메인 사이트 화이트리스트에 포함된 codepen.io의 iframe을 사용해도 마찬가지입니다.

이 컴포넌트가 아직 작동하나요? 예전에는 제게 잘 작동했지만, 어떤 이유에서인지 갑자기 멈췄습니다.
마지막 업데이트가 3년 전인 것 같네요: hnb-ku/discourse-iframe-lightboxes (github.com) 그래서 뭔가 깨진 것 같다고 추측하는 게 합리적일까요?

1개의 좋아요

5월에 여기에서 사용했을 때 정상적으로 작동했습니다.

1개의 좋아요

저희 쪽에서는 최신 Discourse 버전에서 정상적으로 작동합니다.

브라우저 콘솔에 오류가 있나요?

2개의 좋아요

이걸 작동시킬 수 없어요. 가이드를 정확히 따라 하고 테마 컴포넌트와 사이트 설정 모두에 도메인을 추가했는데, 이런 결과가 나옵니다:

JS 개발자 콘솔에는 오류가 기록되지 않았습니다.

허용된 iframe 사이트 설정에는 최상위 도메인이 다음과 같이 포함되어 있습니다:

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가 다운로드된 후에 동적으로 설정되므로, 이 IFrame Lighboxes TC에서는 즉시 사용 가능하지 않을 수 있습니다.

제가 만든 변경 사항은 기본적으로 다음과 같습니다:

  • 다음 실행 루프에서 iframe 요소를 검색하여 iframe이 사용 가능하도록 보장합니다.
  • iframe이 로드될 때까지 기다려 소스 URL을 가져올 수 있도록 합니다.

더 잘 작동하는지 알려주세요. :+1:

5개의 좋아요