@ndla/ui 56.0.148-alpha.0 → 56.0.149-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/AudioPlayer/AudioPlayer.mjs +5 -6
- package/es/AudioPlayer/AudioPlayer.mjs.map +1 -1
- package/es/AudioPlayer/Controls.mjs +1 -2
- package/es/AudioPlayer/Controls.mjs.map +1 -1
- package/es/AudioPlayer/SpeechControl.mjs +1 -2
- package/es/AudioPlayer/SpeechControl.mjs.map +1 -1
- package/es/Breadcrumb/Breadcrumb.mjs +3 -4
- package/es/Breadcrumb/Breadcrumb.mjs.map +1 -1
- package/es/Breadcrumb/BreadcrumbItem.mjs +1 -2
- package/es/Breadcrumb/BreadcrumbItem.mjs.map +1 -1
- package/es/Breadcrumb/HomeBreadcrumb.mjs +3 -4
- package/es/Breadcrumb/HomeBreadcrumb.mjs.map +1 -1
- package/es/CampaignBlock/CampaignBlock.mjs +1 -2
- package/es/CampaignBlock/CampaignBlock.mjs.map +1 -1
- package/es/CodeBlock/CodeBlock.mjs +2 -3
- package/es/CodeBlock/CodeBlock.mjs.map +1 -1
- package/es/Concept/Concept.mjs +7 -7
- package/es/Concept/Concept.mjs.map +1 -1
- package/es/CopyParagraphButton/CopyParagraphButton.mjs +1 -2
- package/es/CopyParagraphButton/CopyParagraphButton.mjs.map +1 -1
- package/es/Embed/AudioEmbed.mjs +6 -7
- package/es/Embed/AudioEmbed.mjs.map +1 -1
- package/es/Embed/BrightcoveEmbed.mjs +3 -4
- package/es/Embed/BrightcoveEmbed.mjs.map +1 -1
- package/es/Embed/CodeEmbed.mjs +5 -6
- package/es/Embed/CodeEmbed.mjs.map +1 -1
- package/es/Embed/ConceptEmbed.mjs +2 -2
- package/es/Embed/ConceptEmbed.mjs.map +1 -1
- package/es/Embed/ContentLinkEmbed.mjs +1 -2
- package/es/Embed/ContentLinkEmbed.mjs.map +1 -1
- package/es/Embed/CopyrightEmbed.mjs +1 -2
- package/es/Embed/CopyrightEmbed.mjs.map +1 -1
- package/es/Embed/EmbedErrorPlaceholder.mjs +1 -2
- package/es/Embed/EmbedErrorPlaceholder.mjs.map +1 -1
- package/es/Embed/ExternalEmbed.mjs +5 -6
- package/es/Embed/ExternalEmbed.mjs.map +1 -1
- package/es/Embed/FootnoteEmbed.mjs +1 -2
- package/es/Embed/FootnoteEmbed.mjs.map +1 -1
- package/es/Embed/GlossEmbed.mjs +5 -5
- package/es/Embed/GlossEmbed.mjs.map +1 -1
- package/es/Embed/H5pEmbed.mjs +3 -4
- package/es/Embed/H5pEmbed.mjs.map +1 -1
- package/es/Embed/IframeEmbed.mjs +5 -6
- package/es/Embed/IframeEmbed.mjs.map +1 -1
- package/es/Embed/ImageEmbed.mjs +3 -4
- package/es/Embed/ImageEmbed.mjs.map +1 -1
- package/es/Embed/RelatedContentEmbed.mjs +1 -2
- package/es/Embed/RelatedContentEmbed.mjs.map +1 -1
- package/es/Embed/UnknownEmbed.mjs +1 -2
- package/es/Embed/UnknownEmbed.mjs.map +1 -1
- package/es/Embed/UuDisclaimerEmbed.mjs +1 -2
- package/es/Embed/UuDisclaimerEmbed.mjs.map +1 -1
- package/es/FactBox/FactBox.mjs +1 -2
- package/es/FactBox/FactBox.mjs.map +1 -1
- package/es/Gloss/Gloss.mjs +5 -6
- package/es/Gloss/Gloss.mjs.map +1 -1
- package/es/Gloss/GlossExample.mjs +1 -2
- package/es/Gloss/GlossExample.mjs.map +1 -1
- package/es/KeyFigure/KeyFigure.mjs +1 -2
- package/es/KeyFigure/KeyFigure.mjs.map +1 -1
- package/es/LinkBlock/LinkBlock.mjs +1 -2
- package/es/LinkBlock/LinkBlock.mjs.map +1 -1
- package/es/LinkBlock/LinkBlockSection.mjs +1 -2
- package/es/LinkBlock/LinkBlockSection.mjs.map +1 -1
- package/es/ResourceBox/ResourceBox.mjs +1 -2
- package/es/ResourceBox/ResourceBox.mjs.map +1 -1
- package/es/index.mjs +31 -27
- package/es/locale/messages-en.mjs +38 -37
- package/es/locale/messages-en.mjs.map +1 -1
- package/es/locale/messages-nb.mjs +38 -37
- package/es/locale/messages-nb.mjs.map +1 -1
- package/es/locale/messages-nn.mjs +38 -37
- package/es/locale/messages-nn.mjs.map +1 -1
- package/es/locale/messages-se.mjs +38 -37
- package/es/locale/messages-se.mjs.map +1 -1
- package/es/model/SubjectCategories.mjs +9 -2
- package/es/model/SubjectCategories.mjs.map +1 -1
- package/es/model/SubjectTypes.mjs +9 -2
- package/es/model/SubjectTypes.mjs.map +1 -1
- package/es/model/WordClass.mjs +1 -1
- package/es/model/index.mjs +2 -3
- package/es/model/index.mjs.map +1 -1
- package/lib/AudioPlayer/AudioPlayer.d.ts +2 -2
- package/lib/AudioPlayer/AudioPlayer.js +3 -4
- package/lib/AudioPlayer/AudioPlayer.js.map +1 -1
- package/lib/AudioPlayer/Controls.d.ts +2 -2
- package/lib/AudioPlayer/Controls.js +1 -2
- package/lib/AudioPlayer/Controls.js.map +1 -1
- package/lib/AudioPlayer/SpeechControl.d.ts +2 -2
- package/lib/AudioPlayer/SpeechControl.js +1 -2
- package/lib/AudioPlayer/SpeechControl.js.map +1 -1
- package/lib/Breadcrumb/Breadcrumb.d.ts +2 -2
- package/lib/Breadcrumb/Breadcrumb.js +2 -3
- package/lib/Breadcrumb/Breadcrumb.js.map +1 -1
- package/lib/Breadcrumb/BreadcrumbItem.d.ts +2 -2
- package/lib/Breadcrumb/BreadcrumbItem.js +1 -2
- package/lib/Breadcrumb/BreadcrumbItem.js.map +1 -1
- package/lib/Breadcrumb/HomeBreadcrumb.d.ts +2 -2
- package/lib/Breadcrumb/HomeBreadcrumb.js +2 -3
- package/lib/Breadcrumb/HomeBreadcrumb.js.map +1 -1
- package/lib/CampaignBlock/CampaignBlock.d.ts +2 -2
- package/lib/CampaignBlock/CampaignBlock.js +1 -2
- package/lib/CampaignBlock/CampaignBlock.js.map +1 -1
- package/lib/CodeBlock/CodeBlock.d.ts +2 -2
- package/lib/CodeBlock/CodeBlock.js +2 -3
- package/lib/CodeBlock/CodeBlock.js.map +1 -1
- package/lib/Concept/Concept.js +2 -2
- package/lib/Concept/Concept.js.map +1 -1
- package/lib/CopyParagraphButton/CopyParagraphButton.d.ts +2 -2
- package/lib/CopyParagraphButton/CopyParagraphButton.js +1 -2
- package/lib/CopyParagraphButton/CopyParagraphButton.js.map +1 -1
- package/lib/Embed/AudioEmbed.d.ts +2 -2
- package/lib/Embed/AudioEmbed.js +4 -5
- package/lib/Embed/AudioEmbed.js.map +1 -1
- package/lib/Embed/BrightcoveEmbed.d.ts +2 -2
- package/lib/Embed/BrightcoveEmbed.js +2 -3
- package/lib/Embed/BrightcoveEmbed.js.map +1 -1
- package/lib/Embed/CodeEmbed.d.ts +2 -2
- package/lib/Embed/CodeEmbed.js +3 -4
- package/lib/Embed/CodeEmbed.js.map +1 -1
- package/lib/Embed/ConceptEmbed.js +1 -1
- package/lib/Embed/ConceptEmbed.js.map +1 -1
- package/lib/Embed/ContentLinkEmbed.d.ts +2 -2
- package/lib/Embed/ContentLinkEmbed.js +1 -2
- package/lib/Embed/ContentLinkEmbed.js.map +1 -1
- package/lib/Embed/CopyrightEmbed.d.ts +2 -2
- package/lib/Embed/CopyrightEmbed.js +1 -2
- package/lib/Embed/CopyrightEmbed.js.map +1 -1
- package/lib/Embed/EmbedErrorPlaceholder.d.ts +2 -2
- package/lib/Embed/EmbedErrorPlaceholder.js +1 -2
- package/lib/Embed/EmbedErrorPlaceholder.js.map +1 -1
- package/lib/Embed/ExternalEmbed.d.ts +2 -2
- package/lib/Embed/ExternalEmbed.js +3 -4
- package/lib/Embed/ExternalEmbed.js.map +1 -1
- package/lib/Embed/FootnoteEmbed.d.ts +2 -2
- package/lib/Embed/FootnoteEmbed.js +1 -2
- package/lib/Embed/FootnoteEmbed.js.map +1 -1
- package/lib/Embed/GlossEmbed.js +3 -3
- package/lib/Embed/GlossEmbed.js.map +1 -1
- package/lib/Embed/H5pEmbed.d.ts +2 -2
- package/lib/Embed/H5pEmbed.js +2 -3
- package/lib/Embed/H5pEmbed.js.map +1 -1
- package/lib/Embed/IframeEmbed.d.ts +2 -2
- package/lib/Embed/IframeEmbed.js +3 -4
- package/lib/Embed/IframeEmbed.js.map +1 -1
- package/lib/Embed/ImageEmbed.d.ts +2 -2
- package/lib/Embed/ImageEmbed.js +2 -3
- package/lib/Embed/ImageEmbed.js.map +1 -1
- package/lib/Embed/RelatedContentEmbed.d.ts +2 -2
- package/lib/Embed/RelatedContentEmbed.js +1 -2
- package/lib/Embed/RelatedContentEmbed.js.map +1 -1
- package/lib/Embed/UnknownEmbed.d.ts +2 -2
- package/lib/Embed/UnknownEmbed.js +1 -2
- package/lib/Embed/UnknownEmbed.js.map +1 -1
- package/lib/Embed/UuDisclaimerEmbed.d.ts +2 -2
- package/lib/Embed/UuDisclaimerEmbed.js +1 -2
- package/lib/Embed/UuDisclaimerEmbed.js.map +1 -1
- package/lib/FactBox/FactBox.d.ts +2 -2
- package/lib/FactBox/FactBox.js +1 -2
- package/lib/FactBox/FactBox.js.map +1 -1
- package/lib/Gloss/Gloss.d.ts +2 -2
- package/lib/Gloss/Gloss.js +3 -4
- package/lib/Gloss/Gloss.js.map +1 -1
- package/lib/Gloss/GlossExample.d.ts +2 -2
- package/lib/Gloss/GlossExample.js +1 -2
- package/lib/Gloss/GlossExample.js.map +1 -1
- package/lib/KeyFigure/KeyFigure.d.ts +1 -2
- package/lib/KeyFigure/KeyFigure.js +1 -2
- package/lib/KeyFigure/KeyFigure.js.map +1 -1
- package/lib/LinkBlock/LinkBlock.d.ts +2 -2
- package/lib/LinkBlock/LinkBlock.js +1 -2
- package/lib/LinkBlock/LinkBlock.js.map +1 -1
- package/lib/LinkBlock/LinkBlockSection.d.ts +2 -2
- package/lib/LinkBlock/LinkBlockSection.js +1 -2
- package/lib/LinkBlock/LinkBlockSection.js.map +1 -1
- package/lib/ResourceBox/ResourceBox.d.ts +1 -1
- package/lib/ResourceBox/ResourceBox.js +0 -2
- package/lib/ResourceBox/ResourceBox.js.map +1 -1
- package/lib/index.d.ts +30 -26
- package/lib/index.js +37 -27
- package/lib/locale/messages-en.d.ts +11 -9
- package/lib/locale/messages-en.js +47 -46
- package/lib/locale/messages-en.js.map +1 -1
- package/lib/locale/messages-nb.d.ts +11 -9
- package/lib/locale/messages-nb.js +47 -46
- package/lib/locale/messages-nb.js.map +1 -1
- package/lib/locale/messages-nn.d.ts +11 -9
- package/lib/locale/messages-nn.js +47 -46
- package/lib/locale/messages-nn.js.map +1 -1
- package/lib/locale/messages-se.d.ts +11 -9
- package/lib/locale/messages-se.js +47 -46
- package/lib/locale/messages-se.js.map +1 -1
- package/lib/model/SubjectCategories.d.ts +6 -0
- package/lib/model/SubjectCategories.js +9 -1
- package/lib/model/SubjectCategories.js.map +1 -1
- package/lib/model/SubjectTypes.d.ts +6 -0
- package/lib/model/SubjectTypes.js +9 -1
- package/lib/model/SubjectTypes.js.map +1 -1
- package/lib/model/WordClass.js +1 -0
- package/lib/model/index.d.ts +1 -2
- package/lib/model/index.js +2 -3
- package/lib/model/index.js.map +1 -1
- package/package.json +8 -8
- package/src/AudioPlayer/AudiPlayer.stories.tsx +1 -1
- package/src/AudioPlayer/AudioPlayer.tsx +3 -5
- package/src/AudioPlayer/Controls.tsx +1 -3
- package/src/AudioPlayer/SpeechControl.tsx +1 -3
- package/src/Breadcrumb/Breadcrumb.stories.tsx +1 -1
- package/src/Breadcrumb/Breadcrumb.tsx +2 -4
- package/src/Breadcrumb/BreadcrumbItem.tsx +1 -3
- package/src/Breadcrumb/HomeBreadcrumb.stories.tsx +1 -1
- package/src/Breadcrumb/HomeBreadcrumb.tsx +2 -4
- package/src/CampaignBlock/CampaignBlock.stories.tsx +1 -1
- package/src/CampaignBlock/CampaignBlock.tsx +1 -3
- package/src/CodeBlock/CodeBlock.stories.tsx +1 -1
- package/src/CodeBlock/CodeBlock.tsx +1 -3
- package/src/Concept/Concept.tsx +5 -5
- package/src/CopyParagraphButton/CopyParagraphButton.tsx +1 -3
- package/src/Embed/AudioEmbed.stories.tsx +1 -1
- package/src/Embed/AudioEmbed.tsx +3 -5
- package/src/Embed/BrightcoveEmbed.stories.tsx +1 -1
- package/src/Embed/BrightcoveEmbed.tsx +2 -4
- package/src/Embed/CodeEmbed.stories.tsx +1 -1
- package/src/Embed/CodeEmbed.tsx +3 -5
- package/src/Embed/ConceptEmbed.tsx +1 -1
- package/src/Embed/ContentLinkEmbed.tsx +1 -3
- package/src/Embed/CopyrightEmbed.tsx +1 -3
- package/src/Embed/EmbedErrorPlaceholder.tsx +1 -3
- package/src/Embed/ExternalEmbed.stories.tsx +1 -1
- package/src/Embed/ExternalEmbed.tsx +3 -4
- package/src/Embed/FootnoteEmbed.stories.tsx +1 -1
- package/src/Embed/FootnoteEmbed.tsx +1 -3
- package/src/Embed/GlossEmbed.tsx +2 -2
- package/src/Embed/H5pEmbed.stories.tsx +1 -1
- package/src/Embed/H5pEmbed.tsx +2 -4
- package/src/Embed/IframeEmbed.stories.tsx +1 -1
- package/src/Embed/IframeEmbed.tsx +3 -5
- package/src/Embed/ImageEmbed.stories.tsx +1 -1
- package/src/Embed/ImageEmbed.tsx +2 -4
- package/src/Embed/RelatedContentEmbed.stories.tsx +1 -1
- package/src/Embed/RelatedContentEmbed.tsx +1 -3
- package/src/Embed/UnknownEmbed.tsx +1 -3
- package/src/Embed/UuDisclaimerEmbed.stories.tsx +5 -5
- package/src/Embed/UuDisclaimerEmbed.tsx +1 -3
- package/src/FactBox/FactBox.tsx +1 -3
- package/src/FactBox/Factbox.stories.tsx +1 -1
- package/src/Gloss/Gloss.stories.tsx +2 -2
- package/src/Gloss/Gloss.tsx +3 -5
- package/src/Gloss/GlossExample.tsx +1 -3
- package/src/KeyFigure/KeyFigure.stories.tsx +1 -1
- package/src/KeyFigure/KeyFigure.tsx +1 -3
- package/src/LinkBlock/LinkBlock.stories.tsx +2 -2
- package/src/LinkBlock/LinkBlock.tsx +1 -3
- package/src/LinkBlock/LinkBlockSection.tsx +1 -3
- package/src/ResourceBox/ResourceBox.tsx +0 -2
- package/src/index.ts +30 -26
- package/src/locale/messages-en.ts +38 -38
- package/src/locale/messages-nb.ts +38 -38
- package/src/locale/messages-nn.ts +38 -38
- package/src/locale/messages-se.ts +38 -38
- package/src/model/SubjectCategories.ts +7 -0
- package/src/model/SubjectTypes.ts +7 -0
- package/src/model/index.ts +1 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrightcoveEmbed.mjs","names":[
|
|
1
|
+
{"version":3,"file":"BrightcoveEmbed.mjs","names":[],"sources":["../../src/Embed/BrightcoveEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n embed: BrightcoveMetaData;\n renderContext?: RenderContext;\n lang?: string;\n}\n\nconst LinkedVideoButton = styled(Button, {\n base: {\n marginBlockStart: \"3xsmall\",\n },\n});\n\nconst BrightcoveIframe = styled(\"iframe\", {\n base: {\n border: 0,\n height: \"auto\",\n width: \"100%\",\n },\n});\n\nexport const makeIframeString = (url: string, width: string | number, height: string | number, title = \"\") => {\n const strippedWidth = typeof width === \"number\" ? width : width.replace(/\\s*px/, \"\");\n const strippedHeight = typeof height === \"number\" ? height : height.replace(/\\s*px/, \"\");\n const urlOrTitle = title || url;\n return `<iframe title=\"${urlOrTitle}\" aria-label=\"${urlOrTitle}\" src=\"${url}\" width=\"${strippedWidth}\" height=\"${strippedHeight}\" allowfullscreen scrolling=\"no\" frameborder=\"0\" loading=\"lazy\"></iframe>`;\n};\n\nexport const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));\n\nconst getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {\n const { account, videoid, player = \"default\" } = data;\n\n const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a!.height! - b.height!)[0];\n\n return {\n src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,\n height: source?.height ?? \"480\",\n width: source?.width ?? \"640\",\n };\n};\nexport const BrightcoveEmbed = ({ embed, renderContext = \"article\", lang }: Props) => {\n const [showOriginalVideo, setShowOriginalVideo] = useState(true);\n const { t } = useTranslation();\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const { embedData } = embed;\n const fallbackTitle = `${t(\"embed.type.video\")}: ${embedData.videoid}`;\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n } else if (embed.status === \"success\" && embed.data.description) {\n return parse(embed.data.description);\n }\n }, [embed, renderContext]);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (iframe) {\n const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width}/${height}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n if (embed.status === \"error\") {\n return (\n <EmbedErrorPlaceholder type=\"video\">\n <BrightcoveIframe\n ref={iframeRef}\n title={embedData.alt || fallbackTitle}\n aria-label={embedData.alt || fallbackTitle}\n {...getIframeProps(embedData, [])}\n allow=\"fullscreen; encrypted-media\"\n />\n </EmbedErrorPlaceholder>\n );\n }\n const { data } = embed;\n\n const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;\n\n const originalVideoProps = getIframeProps(embedData, data.sources);\n const alternativeVideoProps = linkedVideoId\n ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)\n : undefined;\n\n const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);\n\n const title = data.name?.trim() ? `${t(\"embed.type.video\")}: ${data.name}` : fallbackTitle;\n\n return (\n <Figure data-embed-type=\"brightcove\" {...licenseProps}>\n <div className=\"brightcove-video\">\n <BrightcoveIframe\n ref={iframeRef}\n className=\"original\"\n title={title}\n aria-label={title}\n {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}\n allow=\"fullscreen; encrypted-media\"\n />\n </div>\n <EmbedByline type=\"video\" copyright={data.copyright!} description={parsedDescription}>\n <div>\n {!!linkedVideoId && (\n <LinkedVideoButton size=\"small\" variant=\"secondary\" onClick={() => setShowOriginalVideo((p) => !p)}>\n {t(`figure.button.${!showOriginalVideo ? \"original\" : \"alternative\"}`)}\n </LinkedVideoButton>\n )}\n </div>\n </EmbedByline>\n </Figure>\n );\n};\n"],"mappings":";;;;;;;;;;;AAyBA,MAAM,oBAAoB,OAAO,QAAQ,EACvC,MAAM,EACJ,kBAAkB,WACnB,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,UAAU,EACxC,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,OAAO;CACR,EACF,CAAC;AASF,MAAa,aAAa,UAAe,CAAC,OAAO,MAAM,QAAQ,OAAO,WAAW,MAAM,CAAC;AAExF,MAAM,kBAAkB,MAA2B,YAAqC;CACtF,MAAM,EAAE,SAAS,SAAS,SAAS,cAAc;CAEjD,MAAM,SAAS,QAAQ,QAAQ,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,GAAG,MAAM,EAAG,SAAU,EAAE,OAAQ,CAAC;AAErG,QAAO;EACL,KAAK,kCAAkC,QAAQ,GAAG,OAAO,8BAA8B;EACvF,QAAQ,QAAQ,UAAU;EAC1B,OAAO,QAAQ,SAAS;EACzB;;AAEH,MAAa,mBAAmB,EAAE,OAAO,gBAAgB,WAAW,WAAkB;CACpF,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,cAAc;CACtB,MAAM,gBAAgB,GAAG,EAAE,mBAAmB,CAAC,IAAI,UAAU;CAC7D,MAAM,oBAAoB,cAAc;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,UAAU,MAAM,MAAM,UAAU,QAAQ,GAAG;WACzD,MAAM,WAAW,aAAa,MAAM,KAAK,YAClD,QAAO,MAAM,MAAM,KAAK,YAAY;IAErC,CAAC,OAAO,cAAc,CAAC;AAE1B,iBAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,SAAS,OAAO,MAAM,EAAE,SAAS,OAAO,OAAO,CAAC;AACzE,UAAO,MAAM,cAAc,GAAG,MAAM,GAAG;AACvC,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AACN,KAAI,MAAM,WAAW,QACnB,QACE,oBAAC;EAAsB,MAAK;YAC1B,oBAAC;GACC,KAAK;GACL,OAAO,UAAU,OAAO;GACxB,cAAY,UAAU,OAAO;GAC7B,GAAI,eAAe,WAAW,EAAE,CAAC;GACjC,OAAM;IACN;GACoB;CAG5B,MAAM,EAAE,SAAS;CAEjB,MAAM,gBAAgB,UAAU,KAAK,MAAM,KAAK,GAAG,KAAK,MAAM,OAAO;CAErE,MAAM,qBAAqB,eAAe,WAAW,KAAK,QAAQ;CAClE,MAAM,wBAAwB,gBAC1B,eAAe;EAAE,GAAG;EAAW,SAAS;EAAe,EAAE,KAAK,QAAQ,GACtE;CAEJ,MAAM,eAAe,kBAAkB,MAAM,WAAW,QAAQ,SAAS,MAAM,UAAU,QAAQ;CAEjG,MAAM,QAAQ,KAAK,MAAM,MAAM,GAAG,GAAG,EAAE,mBAAmB,CAAC,IAAI,KAAK,SAAS;AAE7E,QACE,qBAAC;EAAO,mBAAgB;EAAa,GAAI;aACvC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,KAAK;IACL,WAAU;IACH;IACP,cAAY;IACZ,GAAK,yBAAyB,CAAC,oBAAoB,wBAAwB;IAC3E,OAAM;KACN;IACE,EACN,oBAAC;GAAY,MAAK;GAAQ,WAAW,KAAK;GAAY,aAAa;aACjE,oBAAC,mBACE,CAAC,CAAC,iBACD,oBAAC;IAAkB,MAAK;IAAQ,SAAQ;IAAY,eAAe,sBAAsB,MAAM,CAAC,EAAE;cAC/F,EAAE,iBAAiB,CAAC,oBAAoB,aAAa,gBAAgB;KACpD,GAElB;IACM;GACP"}
|
package/es/Embed/CodeEmbed.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder.mjs";
|
|
2
|
+
import { CodeBlock } from "../CodeBlock/CodeBlock.mjs";
|
|
3
3
|
import { codeLanguageOptions } from "../CodeBlock/codeLanguageOptions.mjs";
|
|
4
4
|
import { useEffect, useState } from "react";
|
|
5
5
|
import { Button, Figure } from "@ndla/primitives";
|
|
@@ -32,12 +32,12 @@ const CodeEmbed = ({ embed }) => {
|
|
|
32
32
|
};
|
|
33
33
|
}
|
|
34
34
|
}, [isCopied]);
|
|
35
|
-
if (embed.status === "error") return /* @__PURE__ */ jsx(
|
|
35
|
+
if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder, { type: "code" });
|
|
36
36
|
return /* @__PURE__ */ jsxs(StyledFigure, {
|
|
37
37
|
"data-embed-type": "code-block",
|
|
38
38
|
children: [
|
|
39
39
|
/* @__PURE__ */ jsx(StyledFigCaption, { children: embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat) }),
|
|
40
|
-
/* @__PURE__ */ jsx(
|
|
40
|
+
/* @__PURE__ */ jsx(CodeBlock, {
|
|
41
41
|
highlightedCode: embed.status === "success" ? embed.data.highlightedCode : "",
|
|
42
42
|
format: embed.embedData.codeFormat
|
|
43
43
|
}),
|
|
@@ -54,8 +54,7 @@ const CodeEmbed = ({ embed }) => {
|
|
|
54
54
|
]
|
|
55
55
|
});
|
|
56
56
|
};
|
|
57
|
-
var CodeEmbed_default = CodeEmbed;
|
|
58
57
|
|
|
59
58
|
//#endregion
|
|
60
|
-
export {
|
|
59
|
+
export { CodeEmbed };
|
|
61
60
|
//# sourceMappingURL=CodeEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEmbed.mjs","names":[
|
|
1
|
+
{"version":3,"file":"CodeEmbed.mjs","names":[],"sources":["../../src/Embed/CodeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { FileCopyLine, CheckLine } from \"@ndla/icons\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CodeMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\";\nimport { codeLanguageOptions, type ICodeLangugeOption } from \"../CodeBlock/codeLanguageOptions\";\n\ninterface Props {\n embed: CodeMetaData;\n}\n\nconst StyledFigCaption = styled(\"figcaption\", {\n base: {\n textStyle: \"label.large\",\n fontWeight: \"bold\",\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n // We apply margin here to allow for the float and size props on figure to work as intended.\n \"& > *:not(:where(:first-child))\": {\n marginBlockStart: \"xsmall\",\n },\n },\n});\n\nconst getTitleFromFormat = (format: string) => {\n const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);\n if (selectedLanguage) {\n return selectedLanguage.title;\n }\n return;\n};\n\nexport const CodeEmbed = ({ embed }: Props) => {\n const [isCopied, setIsCopied] = useState(false);\n const { t } = useTranslation();\n\n useEffect(() => {\n if (isCopied) {\n const timer = setInterval(() => setIsCopied(false), 3000);\n // ensure interval is cleared - also if unmounted\n return () => {\n clearTimeout(timer);\n };\n }\n }, [isCopied]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"code\" />;\n }\n\n return (\n <StyledFigure data-embed-type=\"code-block\">\n <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>\n <CodeBlock\n highlightedCode={embed.status === \"success\" ? embed.data.highlightedCode : \"\"}\n format={embed.embedData.codeFormat}\n />\n <Button\n variant=\"secondary\"\n onClick={async () => {\n if (embed.status === \"success\") {\n try {\n await navigator.clipboard.writeText(embed.data.decodedContent);\n setIsCopied(true);\n } catch {\n // do nothing\n }\n }\n }}\n >\n {isCopied ? <CheckLine /> : <FileCopyLine />}\n {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n </Button>\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,mBAAmB,OAAO,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,UACnB;CACF,EACF,CAAC;AAEF,MAAM,sBAAsB,WAAmB;CAC7C,MAAM,mBAAmB,oBAAoB,MAAM,SAA6B,KAAK,WAAW,OAAO;AACvG,KAAI,iBACF,QAAO,iBAAiB;;AAK5B,MAAa,aAAa,EAAE,YAAmB;CAC7C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,MAAM,gBAAgB;AAE9B,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,kBAAkB,YAAY,MAAM,EAAE,IAAK;AAEzD,gBAAa;AACX,iBAAa,MAAM;;;IAGtB,CAAC,SAAS,CAAC;AAEd,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAAsB,MAAK,SAAS;AAG9C,QACE,qBAAC;EAAa,mBAAgB;;GAC5B,oBAAC,8BAAkB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,WAAW,GAAoB;GAC9G,oBAAC;IACC,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;KACxB;GACF,qBAAC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,SAAI,MAAM,WAAW,UACnB,KAAI;AACF,YAAM,UAAU,UAAU,UAAU,MAAM,KAAK,eAAe;AAC9D,kBAAY,KAAK;aACX;;eAMX,WAAW,oBAAC,cAAY,GAAG,oBAAC,iBAAe,EAC3C,WAAW,EAAE,uBAAuB,GAAG,EAAE,qBAAqB;KACxD;;GACI"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder.mjs";
|
|
2
2
|
import { Concept } from "../Concept/Concept.mjs";
|
|
3
3
|
import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton.mjs";
|
|
4
4
|
import { GlossEmbed } from "./GlossEmbed.mjs";
|
|
@@ -22,7 +22,7 @@ const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }) => {
|
|
|
22
22
|
}, [embed]);
|
|
23
23
|
const parsedTitle = useMemo(() => embed.status === "success" ? parse(embed.data.concept.title.htmlTitle) : void 0, [embed]);
|
|
24
24
|
if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ jsx("span", { children });
|
|
25
|
-
if (embed.status === "error") return /* @__PURE__ */ jsx(
|
|
25
|
+
if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder, { type: "gloss" });
|
|
26
26
|
const { concept, visualElement } = embed.data;
|
|
27
27
|
if (embed.data.concept.glossData) return /* @__PURE__ */ jsx(GlossEmbed, { embed });
|
|
28
28
|
if (embed.embedData.type === "inline") return /* @__PURE__ */ jsx(InlineConcept, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConceptEmbed.mjs","names":[
|
|
1
|
+
{"version":3,"file":"ConceptEmbed.mjs","names":[],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed} />;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;AA+BA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,gBAAgB,cAAc;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO;AACpE,SAAO,MAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,cACX,MAAM,WAAW,YAAY,MAAM,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,QAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,oBAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,oBAAC,yBAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,oBAAC,cAAkB,QAAS;AAGrC,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,oBAAC;EACa;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;GACa;AAIpB,QACE,oBAAC;EACa;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,SAAY;EAC/C,QAAQ,QAAQ;YAEf;GACY;;AASnB,MAAa,gBAAgB,YAC1B,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,OAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,aAAa,OAAuB,KAAK;AAC/C,QACE,qBAAC;EAAY,sBAAsB,WAAW;aAE5C,oBAAC;GAAe;GAAa;GAAK,GAAI;aACpC,oBAAC,wCAA4B,cAAyC;IACvD,EACjB,oBAAC,oBACC,oBAAC;GAAqB,KAAK;aACzB,oBAAC;IACY;IACI;IACR;IACD;IACE;IACI;IAEX;KACO;IACW,GAChB;GACG;EAGnB;AAID,MAAa,eAAe,YAA4C,OAAO,QAC7E,oBAAC;CAAQ,GAAI;CAAO,mBAAgB;CAAe;EAAO,CAC1D"}
|
|
@@ -24,8 +24,7 @@ const ContentLinkEmbed = ({ embed, isOembed, children }) => {
|
|
|
24
24
|
children
|
|
25
25
|
});
|
|
26
26
|
};
|
|
27
|
-
var ContentLinkEmbed_default = ContentLinkEmbed;
|
|
28
27
|
|
|
29
28
|
//#endregion
|
|
30
|
-
export {
|
|
29
|
+
export { ContentLinkEmbed };
|
|
31
30
|
//# sourceMappingURL=ContentLinkEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentLinkEmbed.mjs","names":[],"sources":["../../src/Embed/ContentLinkEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { ContentLinkMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n embed: ContentLinkMetaData;\n isOembed?: boolean;\n children?: ReactNode;\n}\n\
|
|
1
|
+
{"version":3,"file":"ContentLinkEmbed.mjs","names":[],"sources":["../../src/Embed/ContentLinkEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { ContentLinkMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n embed: ContentLinkMetaData;\n isOembed?: boolean;\n children?: ReactNode;\n}\n\nexport const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return (\n <Text color=\"text.error\" asChild consumeCss>\n <span>\n <span>{`${t(\"embed.linkError\")}: `}</span>\n {children}\n </span>\n </Text>\n );\n }\n\n const { embedData, data } = embed;\n\n if (embedData.openIn === \"new-context\" || isOembed) {\n return (\n <a href={data.path} data-embed-type=\"content-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n {children}\n </a>\n );\n }\n\n return <a href={data.path}>{children}</a>;\n};\n"],"mappings":";;;;;AAmBA,MAAa,oBAAoB,EAAE,OAAO,UAAU,eAAsB;CACxE,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QACE,oBAAC;EAAK,OAAM;EAAa;EAAQ;YAC/B,qBAAC,qBACC,oBAAC,oBAAM,GAAG,EAAE,kBAAkB,CAAC,MAAW,EACzC,YACI;GACF;CAIX,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,WAAW,iBAAiB,SACxC,QACE,oBAAC;EAAE,MAAM,KAAK;EAAM,mBAAgB;EAAe,QAAO;EAAS,KAAI;EACpE;GACC;AAIR,QAAO,oBAAC;EAAE,MAAM,KAAK;EAAO;GAAa"}
|
|
@@ -16,8 +16,7 @@ const CopyrightEmbed = ({ embed, children }) => {
|
|
|
16
16
|
})]
|
|
17
17
|
});
|
|
18
18
|
};
|
|
19
|
-
var CopyrightEmbed_default = CopyrightEmbed;
|
|
20
19
|
|
|
21
20
|
//#endregion
|
|
22
|
-
export {
|
|
21
|
+
export { CopyrightEmbed };
|
|
23
22
|
//# sourceMappingURL=CopyrightEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyrightEmbed.mjs","names":[],"sources":["../../src/Embed/CopyrightEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightMetaData } from \"@ndla/types-embed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n embed: CopyrightMetaData;\n children?: ReactNode;\n}\n\nconst StyledCopyrightContent = styled(\"div\", {\n base: {\n marginBlockEnd: \"xsmall\",\n },\n});\n\
|
|
1
|
+
{"version":3,"file":"CopyrightEmbed.mjs","names":[],"sources":["../../src/Embed/CopyrightEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightMetaData } from \"@ndla/types-embed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n embed: CopyrightMetaData;\n children?: ReactNode;\n}\n\nconst StyledCopyrightContent = styled(\"div\", {\n base: {\n marginBlockEnd: \"xsmall\",\n },\n});\n\nexport const CopyrightEmbed = ({ embed, children }: Props) => {\n return (\n <figure data-embed-type=\"copyright\">\n <StyledCopyrightContent data-copyright-content=\"\">{children}</StyledCopyrightContent>\n <EmbedByline type=\"copyright\" copyright={embed.embedData.copyright} />\n </figure>\n );\n};\n"],"mappings":";;;;;AAkBA,MAAM,yBAAyB,OAAO,OAAO,EAC3C,MAAM,EACJ,gBAAgB,UACjB,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,eAAsB;AAC5D,QACE,qBAAC;EAAO,mBAAgB;aACtB,oBAAC;GAAuB,0BAAuB;GAAI;IAAkC,EACrF,oBAAC;GAAY,MAAK;GAAY,WAAW,MAAM,UAAU;IAAa;GAC/D"}
|
|
@@ -36,8 +36,7 @@ const EmbedErrorPlaceholder = ({ type, children, figureType, float }) => {
|
|
|
36
36
|
})]
|
|
37
37
|
});
|
|
38
38
|
};
|
|
39
|
-
var EmbedErrorPlaceholder_default = EmbedErrorPlaceholder;
|
|
40
39
|
|
|
41
40
|
//#endregion
|
|
42
|
-
export {
|
|
41
|
+
export { EmbedErrorPlaceholder };
|
|
43
42
|
//# sourceMappingURL=EmbedErrorPlaceholder.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmbedErrorPlaceholder.mjs","names":[],"sources":["../../src/Embed/EmbedErrorPlaceholder.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode } from \"react\";\nimport { ErrorWarningLine } from \"@ndla/icons\";\nimport { Figure, type FigureFloat, type FigureSize } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { EmbedByline, type EmbedBylineErrorProps } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n type: EmbedBylineErrorProps[\"type\"];\n figureType?: FigureSize;\n float?: FigureFloat;\n children?: ReactNode;\n}\n\nconst ErrorPlaceholder = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: \"background.subtle\",\n height: \"surface.xsmall\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n \"& svg\": {\n height: \"5xlarge\",\n width: \"5xlarge\",\n fill: \"stroke.default\",\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& > *:not(:first-child)\": {\n marginBlockStart: \"3xsmall\",\n },\n },\n});\n\
|
|
1
|
+
{"version":3,"file":"EmbedErrorPlaceholder.mjs","names":[],"sources":["../../src/Embed/EmbedErrorPlaceholder.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode } from \"react\";\nimport { ErrorWarningLine } from \"@ndla/icons\";\nimport { Figure, type FigureFloat, type FigureSize } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { EmbedByline, type EmbedBylineErrorProps } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n type: EmbedBylineErrorProps[\"type\"];\n figureType?: FigureSize;\n float?: FigureFloat;\n children?: ReactNode;\n}\n\nconst ErrorPlaceholder = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: \"background.subtle\",\n height: \"surface.xsmall\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n \"& svg\": {\n height: \"5xlarge\",\n width: \"5xlarge\",\n fill: \"stroke.default\",\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& > *:not(:first-child)\": {\n marginBlockStart: \"3xsmall\",\n },\n },\n});\n\nexport const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {\n return (\n <StyledFigure size={figureType} float={float} data-embed-type={type}>\n {children ?? (\n <ErrorPlaceholder data-embed-type={type}>\n <ErrorWarningLine />\n </ErrorPlaceholder>\n )}\n <EmbedByline error type={type} />\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;AAqBA,MAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,cAAc;CACd,SAAS;EACP,QAAQ;EACR,OAAO;EACP,MAAM;EACP;CACF,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,2BAA2B,EACzB,kBAAkB,WACnB,EACF,EACF,CAAC;AAEF,MAAa,yBAAyB,EAAE,MAAM,UAAU,YAAY,YAAmB;AACrF,QACE,qBAAC;EAAa,MAAM;EAAmB;EAAO,mBAAiB;aAC5D,YACC,oBAAC;GAAiB,mBAAiB;aACjC,oBAAC,qBAAmB;IACH,EAErB,oBAAC;GAAY;GAAY;IAAQ;GACpB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder.mjs";
|
|
2
|
+
import { ResourceBox } from "../ResourceBox/ResourceBox.mjs";
|
|
3
3
|
import { useEffect, useRef } from "react";
|
|
4
4
|
import { Figure } from "@ndla/primitives";
|
|
5
5
|
import { styled } from "@ndla/styled-system/jsx";
|
|
@@ -23,7 +23,7 @@ const ExternalEmbed = ({ embed }) => {
|
|
|
23
23
|
iframe.height = "";
|
|
24
24
|
}
|
|
25
25
|
}, []);
|
|
26
|
-
if (embed.status === "error") return /* @__PURE__ */ jsx(
|
|
26
|
+
if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder, { type: "external" });
|
|
27
27
|
const { embedData, data } = embed;
|
|
28
28
|
if (embedData.type === "fullscreen") {
|
|
29
29
|
const image = {
|
|
@@ -32,7 +32,7 @@ const ExternalEmbed = ({ embed }) => {
|
|
|
32
32
|
};
|
|
33
33
|
return /* @__PURE__ */ jsx(Figure, {
|
|
34
34
|
"data-embed-type": "external",
|
|
35
|
-
children: /* @__PURE__ */ jsx(
|
|
35
|
+
children: /* @__PURE__ */ jsx(ResourceBox, {
|
|
36
36
|
image,
|
|
37
37
|
title: embedData.title ?? "",
|
|
38
38
|
url: embedData.url,
|
|
@@ -47,8 +47,7 @@ const ExternalEmbed = ({ embed }) => {
|
|
|
47
47
|
dangerouslySetInnerHTML: { __html: data?.oembed?.html ?? "" }
|
|
48
48
|
});
|
|
49
49
|
};
|
|
50
|
-
var ExternalEmbed_default = ExternalEmbed;
|
|
51
50
|
|
|
52
51
|
//#endregion
|
|
53
|
-
export {
|
|
52
|
+
export { ExternalEmbed };
|
|
54
53
|
//# sourceMappingURL=ExternalEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalEmbed.mjs","names":[
|
|
1
|
+
{"version":3,"file":"ExternalEmbed.mjs","names":[],"sources":["../../src/Embed/ExternalEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const figRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const iframe = figRef.current?.querySelector(\"iframe\");\n if (iframe) {\n const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"external\" />;\n }\n\n const { embedData, data } = embed;\n\n if (embedData.type === \"fullscreen\") {\n const image = {\n src: data.iframeImage?.image.imageUrl,\n alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n };\n return (\n <Figure data-embed-type=\"external\">\n <ResourceBox\n image={image}\n title={embedData.title ?? \"\"}\n url={embedData.url}\n caption={embedData.caption ?? \"\"}\n buttonText={t(\"license.other.itemImage.ariaLabel\")}\n />\n </Figure>\n );\n }\n\n return (\n <StyledFigure\n data-embed-type=\"external\"\n ref={figRef}\n dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n />\n );\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,SAAS,OAAoB,KAAK;AAExC,iBAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,QAAQ,SAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;GAC3F;AACD,SACE,oBAAC;GAAO,mBAAgB;aACtB,oBAAC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACK;;AAIb,QACE,oBAAC;EACC,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;GAC7D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FootnoteEmbed.mjs","names":[],"sources":["../../src/Embed/FootnoteEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n base: {\n \"& a\": {\n textStyle: \"label.xsmall\",\n marginInlineStart: \"1\",\n },\n },\n});\n\
|
|
1
|
+
{"version":3,"file":"FootnoteEmbed.mjs","names":[],"sources":["../../src/Embed/FootnoteEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n base: {\n \"& a\": {\n textStyle: \"label.xsmall\",\n marginInlineStart: \"1\",\n },\n },\n});\n\nexport const FootnoteEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return <div>{t(\"error\")}</div>;\n }\n\n return (\n <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n <StyledSup>\n <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n </StyledSup>\n </span>\n );\n};\n"],"mappings":";;;;;AAgBA,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM,EACJ,OAAO;CACL,WAAW;CACX,mBAAmB;CACpB,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,mBAAK,EAAE,QAAQ,GAAO;AAGhC,QACE,oBAAC;EAAK,IAAI,MAAM,MAAM,KAAK;EAAY,mBAAgB;YACrD,oBAAC,uBACC,oBAAC;GAAE,MAAM,QAAQ,MAAM,KAAK;GAAY,QAAO;aAAS,IAAI,MAAM,KAAK,SAAS;IAAO,GAC7E;GACP"}
|
package/es/Embed/GlossEmbed.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder.mjs";
|
|
2
2
|
import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton.mjs";
|
|
3
|
-
import
|
|
3
|
+
import { Gloss } from "../Gloss/Gloss.mjs";
|
|
4
4
|
import { useRef } from "react";
|
|
5
5
|
import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
|
|
6
6
|
import { styled } from "@ndla/styled-system/jsx";
|
|
@@ -12,7 +12,7 @@ const StyledPopoverContent = styled(PopoverContent, { base: { width: "surface.xl
|
|
|
12
12
|
const GlossEmbed = ({ embed, children }) => {
|
|
13
13
|
const contentRef = useRef(null);
|
|
14
14
|
if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ jsx("span", { children });
|
|
15
|
-
if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ jsx(
|
|
15
|
+
if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ jsx(EmbedErrorPlaceholder, { type: "gloss" });
|
|
16
16
|
const { concept, visualElement } = embed.data;
|
|
17
17
|
const audio = visualElement?.status === "success" && visualElement.resource === "audio" ? {
|
|
18
18
|
src: visualElement.data.audioFile.url,
|
|
@@ -25,7 +25,7 @@ const GlossEmbed = ({ embed, children }) => {
|
|
|
25
25
|
children: /* @__PURE__ */ jsx(ConceptInlineTriggerButton, { children })
|
|
26
26
|
}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(StyledPopoverContent, {
|
|
27
27
|
ref: contentRef,
|
|
28
|
-
children: /* @__PURE__ */ jsx(Figure, { children: /* @__PURE__ */ jsx(
|
|
28
|
+
children: /* @__PURE__ */ jsx(Figure, { children: /* @__PURE__ */ jsx(Gloss, {
|
|
29
29
|
glossData: concept.glossData,
|
|
30
30
|
title: concept.title,
|
|
31
31
|
audio,
|
|
@@ -36,7 +36,7 @@ const GlossEmbed = ({ embed, children }) => {
|
|
|
36
36
|
});
|
|
37
37
|
return /* @__PURE__ */ jsx(Figure, {
|
|
38
38
|
"data-embed-type": "gloss",
|
|
39
|
-
children: /* @__PURE__ */ jsx(
|
|
39
|
+
children: /* @__PURE__ */ jsx(Gloss, {
|
|
40
40
|
glossData: concept.glossData,
|
|
41
41
|
title: concept.title,
|
|
42
42
|
audio,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlossEmbed.mjs","names":[
|
|
1
|
+
{"version":3,"file":"GlossEmbed.mjs","names":[],"sources":["../../src/Embed/GlossEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { Gloss } from \"../Gloss/Gloss\";\n\ninterface Props {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n const contentRef = useRef<HTMLDivElement>(null);\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\" || !embed.data.concept.glossData) {\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n const audio =\n visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n ? {\n src: visualElement.data.audioFile.url,\n title: visualElement.data.title.title,\n }\n : undefined;\n\n if (embed.embedData.type === \"inline\") {\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n <PopoverTrigger asChild>\n <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Figure>\n <Gloss\n glossData={concept.glossData}\n title={concept.title}\n audio={audio}\n exampleIds={embed.embedData.exampleIds}\n exampleLangs={embed.embedData.exampleLangs}\n />\n </Figure>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n }\n\n return (\n <Figure data-embed-type=\"gloss\">\n <Gloss\n glossData={concept.glossData}\n title={concept.title}\n audio={audio}\n exampleIds={embed.embedData.exampleIds}\n exampleLangs={embed.embedData.exampleLangs}\n variant=\"bordered\"\n />\n </Figure>\n );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,OAAO,kBACR,EACF,CAAC;AAEF,MAAa,cAAc,EAAE,OAAO,eAAsB;CACxD,MAAM,aAAa,OAAuB,KAAK;AAC/C,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,oBAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,UAClD,QAAO,oBAAC,yBAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;EACjC,GACD;AAEN,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,qBAAC;EAAY,sBAAsB,WAAW;aAC5C,oBAAC;GAAe;aACd,oBAAC,8BAA4B,WAAsC;IACpD,EACjB,oBAAC,oBACC,oBAAC;GAAqB,KAAK;aACzB,oBAAC,oBACC,oBAAC;IACC,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;KAC9B,GACK;IACY,GAChB;GACG;AAIlB,QACE,oBAAC;EAAO,mBAAgB;YACtB,oBAAC;GACC,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;IACR;GACK"}
|
package/es/Embed/H5pEmbed.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder.mjs";
|
|
2
2
|
import { Figure } from "@ndla/primitives";
|
|
3
3
|
import { styled } from "@ndla/styled-system/jsx";
|
|
4
4
|
import { useTranslation } from "react-i18next";
|
|
@@ -15,7 +15,7 @@ const FigureOembed = styled(Figure, { base: {
|
|
|
15
15
|
} });
|
|
16
16
|
const H5pEmbed = ({ embed }) => {
|
|
17
17
|
const { t } = useTranslation();
|
|
18
|
-
if (embed.status === "error") return /* @__PURE__ */ jsx(
|
|
18
|
+
if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder, { type: "h5p" });
|
|
19
19
|
if (embed.data.oembed) return /* @__PURE__ */ jsx(FigureOembed, {
|
|
20
20
|
"data-embed-type": "h5p",
|
|
21
21
|
dangerouslySetInnerHTML: { __html: embed.data.oembed.html ?? "" }
|
|
@@ -31,8 +31,7 @@ const H5pEmbed = ({ embed }) => {
|
|
|
31
31
|
})
|
|
32
32
|
});
|
|
33
33
|
};
|
|
34
|
-
var H5pEmbed_default = H5pEmbed;
|
|
35
34
|
|
|
36
35
|
//#endregion
|
|
37
|
-
export {
|
|
36
|
+
export { H5pEmbed };
|
|
38
37
|
//# sourceMappingURL=H5pEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"H5pEmbed.mjs","names":[
|
|
1
|
+
{"version":3,"file":"H5pEmbed.mjs","names":[],"sources":["../../src/Embed/H5pEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { H5pMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: H5pMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nconst FigureOembed = styled(Figure, {\n base: {\n width: \"100%\",\n \"& iframe\": {\n width: \"100%\",\n },\n },\n});\n\nexport const H5pEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"h5p\" />;\n }\n\n if (embed.data.oembed) {\n return <FigureOembed data-embed-type=\"h5p\" dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? \"\" }} />;\n }\n\n const title = embed.embedData.title?.trim()\n ? embed.embedData.title\n : embed.data.h5pLicenseInformation?.h5p.title?.trim()\n ? embed.data.h5pLicenseInformation.h5p.title\n : embed.embedData.url;\n\n const titleWithPrefix = `${t(\"embed.type.h5p\")}: ${title}`;\n\n return (\n <StyledFigure data-embed-type=\"h5p\">\n <iframe title={titleWithPrefix} aria-label={titleWithPrefix} src={embed.embedData.url} />\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;AAkBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,OAAO;CACP,YAAY,EACV,OAAO,QACR;CACF,EACF,CAAC;AAEF,MAAa,YAAY,EAAE,YAAmB;CAC5C,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAAsB,MAAK,QAAQ;AAG7C,KAAI,MAAM,KAAK,OACb,QAAO,oBAAC;EAAa,mBAAgB;EAAM,yBAAyB,EAAE,QAAQ,MAAM,KAAK,OAAO,QAAQ,IAAI;GAAI;CAGlH,MAAM,QAAQ,MAAM,UAAU,OAAO,MAAM,GACvC,MAAM,UAAU,QAChB,MAAM,KAAK,uBAAuB,IAAI,OAAO,MAAM,GACjD,MAAM,KAAK,sBAAsB,IAAI,QACrC,MAAM,UAAU;CAEtB,MAAM,kBAAkB,GAAG,EAAE,iBAAiB,CAAC,IAAI;AAEnD,QACE,oBAAC;EAAa,mBAAgB;YAC5B,oBAAC;GAAO,OAAO;GAAiB,cAAY;GAAiB,KAAK,MAAM,UAAU;IAAO;GAC5E"}
|
package/es/Embed/IframeEmbed.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder.mjs";
|
|
2
|
+
import { ResourceBox } from "../ResourceBox/ResourceBox.mjs";
|
|
3
3
|
import { useEffect, useRef } from "react";
|
|
4
4
|
import { Figure } from "@ndla/primitives";
|
|
5
5
|
import { styled } from "@ndla/styled-system/jsx";
|
|
@@ -24,7 +24,7 @@ const IframeEmbed = ({ embed }) => {
|
|
|
24
24
|
iframe.height = "";
|
|
25
25
|
}
|
|
26
26
|
}, []);
|
|
27
|
-
if (embed.status === "error") return /* @__PURE__ */ jsx(
|
|
27
|
+
if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder, { type: "external" });
|
|
28
28
|
const { embedData, data } = embed;
|
|
29
29
|
if (embedData.type === "fullscreen") {
|
|
30
30
|
const iframeImage = embed.status === "success" ? data.iframeImage : void 0;
|
|
@@ -35,7 +35,7 @@ const IframeEmbed = ({ embed }) => {
|
|
|
35
35
|
};
|
|
36
36
|
return /* @__PURE__ */ jsx(StyledFigure, {
|
|
37
37
|
"data-embed-type": "iframe",
|
|
38
|
-
children: /* @__PURE__ */ jsx(
|
|
38
|
+
children: /* @__PURE__ */ jsx(ResourceBox, {
|
|
39
39
|
image,
|
|
40
40
|
title: embedData.title ?? "",
|
|
41
41
|
url: embedData.url,
|
|
@@ -62,8 +62,7 @@ const IframeEmbed = ({ embed }) => {
|
|
|
62
62
|
})
|
|
63
63
|
});
|
|
64
64
|
};
|
|
65
|
-
var IframeEmbed_default = IframeEmbed;
|
|
66
65
|
|
|
67
66
|
//#endregion
|
|
68
|
-
export {
|
|
67
|
+
export { IframeEmbed };
|
|
69
68
|
//# sourceMappingURL=IframeEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IframeEmbed.mjs","names":["width","height"
|
|
1
|
+
{"version":3,"file":"IframeEmbed.mjs","names":["width","height"],"sources":["../../src/Embed/IframeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IframeMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n base: {\n width: \"100%\",\n border: 0,\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n },\n});\n\nexport const IframeEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const iframeRef = useRef<HTMLIFrameElement>(null);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (iframe) {\n const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"external\" />;\n }\n\n const { embedData, data } = embed;\n\n if (embedData.type === \"fullscreen\") {\n const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n return (\n <StyledFigure data-embed-type=\"iframe\">\n <ResourceBox\n image={image}\n title={embedData.title ?? \"\"}\n url={embedData.url}\n caption={embedData.caption ?? \"\"}\n buttonText={t(\"license.other.itemImage.ariaLabel\")}\n />\n </StyledFigure>\n );\n }\n\n const { width, height, url } = embedData;\n\n const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n return (\n <StyledFigure data-embed-type=\"iframe\">\n <StyledIframe\n ref={iframeRef}\n title={title}\n aria-label={title}\n src={url}\n width={strippedWidth}\n height={strippedHeight}\n allow=\"fullscreen; encrypted-media\"\n loading=\"lazy\"\n />\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAa,eAAe,EAAE,YAAmB;CAC/C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,YAAY,OAA0B,KAAK;AAEjD,iBAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACA,SAAOC,YAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAGD,UAAQA,UAAQ,GAAG,GAAGC,WAASA,WAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,yBAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK,cAAc;EACpE,MAAM,MAAM,UAAU,QAAQ,SAAY,UAAU,MAAM,aAAa,QAAQ;EAC/E,MAAM,QAAQ;GAAE,KAAK,aAAa,MAAM;GAAU,KAAK,OAAO;GAAI;AAClE,SACE,oBAAC;GAAa,mBAAgB;aAC5B,oBAAC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACW;;CAInB,MAAM,EAAE,OAAO,QAAQ,QAAQ;CAE/B,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,iBAAiB,OAAO,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,QAAQ,GAAG,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ;AAE1F,QACE,oBAAC;EAAa,mBAAgB;YAC5B,oBAAC;GACC,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;IACR;GACW"}
|
package/es/Embed/ImageEmbed.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EmbedByline } from "../LicenseByline/EmbedByline.mjs";
|
|
2
|
-
import
|
|
2
|
+
import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder.mjs";
|
|
3
3
|
import { licenseAttributes } from "../utils/licenseAttributes.mjs";
|
|
4
4
|
import { useMemo, useState } from "react";
|
|
5
5
|
import { Figure, Image } from "@ndla/primitives";
|
|
@@ -118,7 +118,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
118
118
|
if (embed.embedData.caption || renderContext === "article") return embed.embedData.caption ? parse(embed.embedData.caption) : void 0;
|
|
119
119
|
if (embed.status === "success" && embed.data.caption.caption) return parse(embed.data.caption.caption);
|
|
120
120
|
}, [embed, renderContext]);
|
|
121
|
-
if (embed.status === "error") return /* @__PURE__ */ jsx(
|
|
121
|
+
if (embed.status === "error") return /* @__PURE__ */ jsx(EmbedErrorPlaceholder, {
|
|
122
122
|
type: "image",
|
|
123
123
|
figureType: figureProps?.size,
|
|
124
124
|
float: figureProps?.float
|
|
@@ -171,8 +171,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
171
171
|
]
|
|
172
172
|
});
|
|
173
173
|
};
|
|
174
|
-
var ImageEmbed_default = ImageEmbed;
|
|
175
174
|
|
|
176
175
|
//#endregion
|
|
177
|
-
export {
|
|
176
|
+
export { ImageEmbed, getCrop, getFocalPoint };
|
|
178
177
|
//# sourceMappingURL=ImageEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageEmbed.mjs","names":["actualSize: FigureSize","EmbedErrorPlaceholder","sizes"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n embed: ImageMetaData;\n previewAlt?: boolean;\n lang?: string;\n renderContext?: RenderContext;\n children?: ReactNode;\n}\n\nexport interface Author {\n name: string;\n type: string;\n}\n\nexport const getLicenseCredits = (copyright?: {\n creators?: Author[];\n rightsholders?: Author[];\n processors?: Author[];\n}) => {\n return {\n creators: copyright?.creators ?? [],\n rightsholders: copyright?.rightsholders ?? [],\n processors: copyright?.processors ?? [],\n };\n};\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n return {\n float: actualFloat,\n // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n if (align && size === \"full\") {\n return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n }\n if (align && size === \"small\") {\n return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n }\n if (align && size === \"xsmall\") {\n return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n }\n return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n const focalX = Number.parseFloat(data.focalX ?? \"\");\n const focalY = Number.parseFloat(data.focalY ?? \"\");\n if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n return { x: focalX, y: focalY };\n }\n return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n if (\n !Number.isNaN(lowerRightX) &&\n !Number.isNaN(lowerRightY) &&\n !Number.isNaN(upperLeftX) &&\n !Number.isNaN(upperLeftY)\n ) {\n return {\n startX: lowerRightX,\n startY: lowerRightY,\n endX: upperLeftX,\n endY: upperLeftY,\n };\n }\n return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n overflow: \"hidden\",\n position: \"relative\",\n width: \"100%\",\n \"& img\": {\n width: \"100%\",\n },\n },\n variants: {\n svg: {\n true: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n false: {},\n },\n border: {\n true: {\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& img\": {\n borderRadius: \"0\",\n },\n },\n false: {},\n },\n expandable: {\n true: {\n cursor: \"pointer\",\n },\n false: {},\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n zIndex: \"docked\",\n _hover: {\n \"& [data-byline-button]\": {\n background: \"background.default\",\n },\n \"& button[data-expanded]\": {\n transform: \"scale(1.2)\",\n },\n },\n \"& button[data-expanded='true']\": {\n \"& svg\": {\n transform: \"rotate(-45deg)\",\n },\n },\n },\n});\n\nconst ExpandButton = styled(\n \"button\",\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n position: \"absolute\",\n padding: \"0\",\n top: \"xsmall\",\n right: \"xsmall\",\n width: \"medium\",\n height: \"medium\",\n border: \"2px solid\",\n borderColor: \"background.default\",\n transitionProperty: \"transform, background-color, color\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n color: \"background.default\",\n backgroundColor: \"surface.action\",\n borderRadius: \"large\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n },\n tabletDown: {\n display: \"none\",\n },\n },\n },\n { defaultProps: { type: \"button\" } },\n);\n\nconst ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);\n const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n const { t } = useTranslation();\n\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n }\n if (embed.status === \"success\" && embed.data.caption.caption) {\n return parse(embed.data.caption.caption);\n }\n }, [embed, renderContext]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n }\n\n const { data, embedData } = embed;\n\n const altText = embedData.alt || \"\";\n\n const sizes = getSizes(embedData.size, embedData.align);\n\n const focalPoint = getFocalPoint(embedData);\n const crop = getCrop(embedData);\n\n const toggleImageSize = () => {\n setImageSizes((sizes) => (!sizes ? expandedSizes : undefined));\n };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n return (\n <StyledFigure\n float={figureProps?.float}\n size={imageSizes ? \"full\" : figureSize}\n data-embed-type=\"image\"\n {...licenseProps}\n >\n {children}\n <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n <Image\n focalPoint={focalPoint}\n contentType={data.image.contentType}\n crop={crop}\n sizes={imageSizes ?? sizes}\n alt={altText}\n src={data.image.imageUrl}\n lang={lang}\n onClick={figureProps?.float ? toggleImageSize : undefined}\n variant=\"rounded\"\n />\n {(embedData.align === \"right\" || embedData.align === \"left\") && (\n <ExpandButton\n aria-label={t(`license.images.itemImage.zoom${imageSizes ? \"Out\" : \"\"}ImageButtonLabel`)}\n onClick={toggleImageSize}\n data-expanded={!!imageSizes}\n >\n <AddLine />\n </ExpandButton>\n )}\n </ImageWrapper>\n <EmbedByline\n type=\"image\"\n copyright={data.copyright}\n description={parsedDescription}\n hideDescription={embedData.hideCaption === \"true\"}\n hideCopyright={embedData.hideByline === \"true\"}\n visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n />\n </StyledFigure>\n );\n};\n\nexport default ImageEmbed;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ImageEmbed.mjs","names":["actualSize: FigureSize","sizes"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n embed: ImageMetaData;\n previewAlt?: boolean;\n lang?: string;\n renderContext?: RenderContext;\n children?: ReactNode;\n}\n\nexport interface Author {\n name: string;\n type: string;\n}\n\nexport const getLicenseCredits = (copyright?: {\n creators?: Author[];\n rightsholders?: Author[];\n processors?: Author[];\n}) => {\n return {\n creators: copyright?.creators ?? [],\n rightsholders: copyright?.rightsholders ?? [],\n processors: copyright?.processors ?? [],\n };\n};\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n return {\n float: actualFloat,\n // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n if (align && size === \"full\") {\n return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n }\n if (align && size === \"small\") {\n return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n }\n if (align && size === \"xsmall\") {\n return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n }\n return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n const focalX = Number.parseFloat(data.focalX ?? \"\");\n const focalY = Number.parseFloat(data.focalY ?? \"\");\n if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n return { x: focalX, y: focalY };\n }\n return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n if (\n !Number.isNaN(lowerRightX) &&\n !Number.isNaN(lowerRightY) &&\n !Number.isNaN(upperLeftX) &&\n !Number.isNaN(upperLeftY)\n ) {\n return {\n startX: lowerRightX,\n startY: lowerRightY,\n endX: upperLeftX,\n endY: upperLeftY,\n };\n }\n return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n overflow: \"hidden\",\n position: \"relative\",\n width: \"100%\",\n \"& img\": {\n width: \"100%\",\n },\n },\n variants: {\n svg: {\n true: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n false: {},\n },\n border: {\n true: {\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& img\": {\n borderRadius: \"0\",\n },\n },\n false: {},\n },\n expandable: {\n true: {\n cursor: \"pointer\",\n },\n false: {},\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n zIndex: \"docked\",\n _hover: {\n \"& [data-byline-button]\": {\n background: \"background.default\",\n },\n \"& button[data-expanded]\": {\n transform: \"scale(1.2)\",\n },\n },\n \"& button[data-expanded='true']\": {\n \"& svg\": {\n transform: \"rotate(-45deg)\",\n },\n },\n },\n});\n\nconst ExpandButton = styled(\n \"button\",\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n position: \"absolute\",\n padding: \"0\",\n top: \"xsmall\",\n right: \"xsmall\",\n width: \"medium\",\n height: \"medium\",\n border: \"2px solid\",\n borderColor: \"background.default\",\n transitionProperty: \"transform, background-color, color\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n color: \"background.default\",\n backgroundColor: \"surface.action\",\n borderRadius: \"large\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n },\n tabletDown: {\n display: \"none\",\n },\n },\n },\n { defaultProps: { type: \"button\" } },\n);\n\nexport const ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);\n const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n const { t } = useTranslation();\n\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n }\n if (embed.status === \"success\" && embed.data.caption.caption) {\n return parse(embed.data.caption.caption);\n }\n }, [embed, renderContext]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n }\n\n const { data, embedData } = embed;\n\n const altText = embedData.alt || \"\";\n\n const sizes = getSizes(embedData.size, embedData.align);\n\n const focalPoint = getFocalPoint(embedData);\n const crop = getCrop(embedData);\n\n const toggleImageSize = () => {\n setImageSizes((sizes) => (!sizes ? expandedSizes : undefined));\n };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n return (\n <StyledFigure\n float={figureProps?.float}\n size={imageSizes ? \"full\" : figureSize}\n data-embed-type=\"image\"\n {...licenseProps}\n >\n {children}\n <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n <Image\n focalPoint={focalPoint}\n contentType={data.image.contentType}\n crop={crop}\n sizes={imageSizes ?? sizes}\n alt={altText}\n src={data.image.imageUrl}\n lang={lang}\n onClick={figureProps?.float ? toggleImageSize : undefined}\n variant=\"rounded\"\n />\n {(embedData.align === \"right\" || embedData.align === \"left\") && (\n <ExpandButton\n aria-label={t(`license.images.itemImage.zoom${imageSizes ? \"Out\" : \"\"}ImageButtonLabel`)}\n onClick={toggleImageSize}\n data-expanded={!!imageSizes}\n >\n <AddLine />\n </ExpandButton>\n )}\n </ImageWrapper>\n <EmbedByline\n type=\"image\"\n copyright={data.copyright}\n description={parsedDescription}\n hideDescription={embedData.hideCaption === \"true\"}\n hideCopyright={embedData.hideByline === \"true\"}\n visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n />\n </StyledFigure>\n );\n};\n"],"mappings":"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"}
|
|
@@ -30,8 +30,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) =
|
|
|
30
30
|
});
|
|
31
31
|
return null;
|
|
32
32
|
};
|
|
33
|
-
var RelatedContentEmbed_default = RelatedContentEmbed;
|
|
34
33
|
|
|
35
34
|
//#endregion
|
|
36
|
-
export {
|
|
35
|
+
export { RelatedContentEmbed };
|
|
37
36
|
//# sourceMappingURL=RelatedContentEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RelatedContentEmbed.mjs","names":[],"sources":["../../src/Embed/RelatedContentEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport type { RelatedContentMetaData } from \"@ndla/types-embed\";\nimport { contentTypeMapping } from \"../model/ContentType\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n embed: RelatedContentMetaData;\n isOembed?: boolean;\n subject?: string;\n ndlaFrontendDomain?: string;\n}\n\
|
|
1
|
+
{"version":3,"file":"RelatedContentEmbed.mjs","names":[],"sources":["../../src/Embed/RelatedContentEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport type { RelatedContentMetaData } from \"@ndla/types-embed\";\nimport { contentTypeMapping } from \"../model/ContentType\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n embed: RelatedContentMetaData;\n isOembed?: boolean;\n subject?: string;\n ndlaFrontendDomain?: string;\n}\n\nexport const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return null;\n }\n\n const { data, embedData } = embed;\n\n if (embedData.articleId && data) {\n const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;\n const type = typeId ? contentTypeMapping[typeId] : undefined;\n const context = data.resource?.contexts.find((c) => c.rootId === subject);\n const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;\n return (\n <RelatedArticle\n title={data.article.title?.title ?? \"\"}\n introduction={data.article.metaDescription?.metaDescription ?? \"\"}\n target={isOembed ? \"_blank\" : undefined}\n to={`${ndlaFrontendDomain ?? \"\"}${url ?? \"\"}`}\n type={type}\n />\n );\n }\n if (typeof embedData.url === \"string\") {\n return (\n <RelatedArticle\n title={embedData.title ?? \"\"}\n introduction=\"\"\n to={embedData.url}\n target=\"_blank\"\n type=\"external\"\n linkInfo={`${t(\"related.linkInfo\")} ${embedData.urlDomain}`}\n />\n );\n }\n return null;\n};\n"],"mappings":";;;;;;AAoBA,MAAa,uBAAuB,EAAE,OAAO,UAAU,SAAS,yBAAgC;CAC9F,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,MAAM,OAAO,mBAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAAS,mBAAmB,UAAU;EAEnD,MAAM,OADU,KAAK,UAAU,SAAS,MAAM,MAAM,EAAE,WAAW,QAAQ,GACpD,OAAO,KAAK,UAAU,OAAO,YAAY,UAAU;AACxE,SACE,oBAAC;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW,WAAW;GAC9B,IAAI,GAAG,sBAAsB,KAAK,OAAO;GACnC;IACN;;AAGN,KAAI,OAAO,UAAU,QAAQ,SAC3B,QACE,oBAAC;EACC,OAAO,UAAU,SAAS;EAC1B,cAAa;EACb,IAAI,UAAU;EACd,QAAO;EACP,MAAK;EACL,UAAU,GAAG,EAAE,mBAAmB,CAAC,GAAG,UAAU;GAChD;AAGN,QAAO"}
|
|
@@ -13,8 +13,7 @@ const UnknownEmbed = ({ embed }) => {
|
|
|
13
13
|
children: /* @__PURE__ */ jsx("span", { children: t("embed.unsupported", { type: embed.resource }) })
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
|
-
var UnknownEmbed_default = UnknownEmbed;
|
|
17
16
|
|
|
18
17
|
//#endregion
|
|
19
|
-
export {
|
|
18
|
+
export { UnknownEmbed };
|
|
20
19
|
//# sourceMappingURL=UnknownEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UnknownEmbed.mjs","names":[],"sources":["../../src/Embed/UnknownEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n embed: MetaData<any, any>;\n}\n\
|
|
1
|
+
{"version":3,"file":"UnknownEmbed.mjs","names":[],"sources":["../../src/Embed/UnknownEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n embed: MetaData<any, any>;\n}\n\nexport const UnknownEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n return (\n <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n </Text>\n );\n};\n"],"mappings":";;;;;AAgBA,MAAa,gBAAgB,EAAE,YAAmB;CAChD,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,oBAAC;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;YAC1D,oBAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,UAAU,CAAC,GAAQ;GAC1D"}
|