Skip to content
This repository has been archived by the owner on Oct 18, 2024. It is now read-only.

fix(pixabay): Shrink pixabay source button #344

Merged
merged 2 commits into from
Feb 27, 2024
Merged

fix(pixabay): Shrink pixabay source button #344

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c9f069
fix(pixabay): Shrink pixabay source button
Feb 27, 2024
b136107
fix(pixabay): Left align button
Feb 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 40 additions & 2 deletions src/frontend/plugins/edusharing-asset/renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ import IframeResizer from 'iframe-resizer-react'

type RenderMethod = 'dangerously-set-inner-html' | 'iframe'

type EmbeddedContent = {
detailsSnippet: string
[key: string]: any
}

export function EdusharingAssetRenderer(props: {
nodeId?: string
repositoryId?: string
Expand Down Expand Up @@ -53,7 +58,7 @@ export function EdusharingAssetRenderer(props: {

// HTML snipped returned by edu-sharing cannot be used as it is.
const { html, renderMethod, defineContainerHeight } =
embedHtmlAndRenderMethod(result.detailsSnippet)
embedHtmlAndRenderMethod(result)

setEmbedHtml(html)
setRenderMethod(renderMethod)
Expand Down Expand Up @@ -83,11 +88,13 @@ export function EdusharingAssetRenderer(props: {
</figure>
)

function embedHtmlAndRenderMethod(detailsSnippet: string): {
function embedHtmlAndRenderMethod(content: EmbeddedContent): {
html: string
renderMethod: RenderMethod
defineContainerHeight: boolean
} {
let { detailsSnippet } = content

// Remove all min-width
detailsSnippet = detailsSnippet.replaceAll(/min-width[^;]*;/g, '')

Expand All @@ -97,13 +104,43 @@ export function EdusharingAssetRenderer(props: {
'edusharing_rendering_content_footer { display: none;',
)

if (
content?.mimeType === 'image/jpeg' &&
content?.node?.remote?.repository?.repositoryType === 'PIXABAY'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not know that we could get the type info from this. Nice find!

) {
// Positions the button to the right, makes it smaller and removes bg
// color + padding
const shrinkPixabaySourceButton = `
<style>
#edusharing_rendering_content_href {
margin-left: 0px !important;
text-align: left !important;
margin-top: 10px !important;
display: block !important;
width: fit-content !important;
background-color: transparent !important;
padding: 0px !important;
color: #007bff !important;
font-size: 0.7rem !important;
}
</style>
`

return {
html: detailsSnippet + shrinkPixabaySourceButton,
renderMethod: 'dangerously-set-inner-html',
defineContainerHeight: false,
}
}

const parser = new DOMParser()
const htmlDocument = parser.parseFromString(detailsSnippet, 'text/html')

// Image
const image = htmlDocument.querySelector<HTMLImageElement>(
'.edusharing_rendering_content_wrapper > img',
)

const isImageSnippet =
image && !image.classList.contains('edusharing_rendering_content_preview')
if (isImageSnippet) {
Expand Down Expand Up @@ -146,6 +183,7 @@ export function EdusharingAssetRenderer(props: {
'get_resource = function(authstring)',
'function get_resource(authstring)',
)

// Add iframe resizer script
const newEmbedHtml =
detailsSnippet +
Expand Down
Loading