diff --git a/junior/app/components/challenge/challenge-embed-simulator/component.js b/junior/app/components/challenge/challenge-embed-simulator/component.js index 5fd02f48667..efd6b3c5c62 100644 --- a/junior/app/components/challenge/challenge-embed-simulator/component.js +++ b/junior/app/components/challenge/challenge-embed-simulator/component.js @@ -1,3 +1,4 @@ +import { action } from '@ember/object'; import { htmlSafe } from '@ember/template'; import Component from '@glimmer/component'; @@ -8,4 +9,30 @@ export default class ChallengeEmbedSimulator extends Component { const height = this.args.isMediaWithForm ? (baseHeight * itemMedia.offsetWidth) / 710 : baseHeight; return htmlSafe(`height: ${height}px; max-height: ${baseHeight}px`); } + + @action + setIframeHtmlElement(htmlElement) { + this.iframe = htmlElement; + } + + @action + rebootSimulator() { + const iframe = this.iframe; + const tmpSrc = iframe.src; + + const loadListener = () => { + if (iframe.src === 'about:blank') { + // First onload: when we reset the iframe + iframe.src = tmpSrc; + } else { + // Second onload: when we re-assign the iframe's src to its original value + iframe.focus(); + iframe.removeEventListener('load', loadListener); + } + }; + + iframe.addEventListener('load', loadListener); + + iframe.src = 'about:blank'; + } } diff --git a/junior/app/components/challenge/challenge-embed-simulator/template.hbs b/junior/app/components/challenge/challenge-embed-simulator/template.hbs index e173748d53e..31976595b49 100644 --- a/junior/app/components/challenge/challenge-embed-simulator/template.hbs +++ b/junior/app/components/challenge/challenge-embed-simulator/template.hbs @@ -10,6 +10,20 @@ src="{{@url}}" title="{{@title}}" style="{{this.embedDocumentHeightStyle}}" + {{did-render this.setIframeHtmlElement}} > + {{#if @shouldDisplayRebootButton}} +
+ +
+ {{/if}} \ No newline at end of file diff --git a/junior/app/components/challenge/item/component.js b/junior/app/components/challenge/item/component.js index cc45b9457ad..d8bfc003eae 100644 --- a/junior/app/components/challenge/item/component.js +++ b/junior/app/components/challenge/item/component.js @@ -1,6 +1,17 @@ import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; export default class Item extends Component { + @tracked isRebootable = false; + + constructor() { + super(...arguments); + window.addEventListener('message', ({ data }) => { + if (data?.from === 'pix' && data?.type === 'init') { + this.isRebootable = !!data.rebootable; + } + }); + } get isMediaWithForm() { return this.args.challenge.hasForm && this.hasMedia && this.args.challenge.type !== undefined; } @@ -12,4 +23,8 @@ export default class Item extends Component { this.args.challenge.hasWebComponent ); } + + get shouldDisplayRebootButton() { + return this.isRebootable && !this.args.isDisabled; + } } diff --git a/junior/app/components/challenge/item/template.hbs b/junior/app/components/challenge/item/template.hbs index 66d98543247..a1111a8cc41 100644 --- a/junior/app/components/challenge/item/template.hbs +++ b/junior/app/components/challenge/item/template.hbs @@ -14,6 +14,7 @@ @height={{@challenge.embedHeight}} @hideSimulator={{@isDisabled}} @isMediaWithForm={{this.isMediaWithForm}} + @shouldDisplayRebootButton={{this.shouldDisplayRebootButton}} /> {{/if}} diff --git a/junior/app/styles/components/challenge/challenge-embed-simulator.scss b/junior/app/styles/components/challenge/challenge-embed-simulator.scss index def5d299d0c..6e7cd76933e 100644 --- a/junior/app/styles/components/challenge/challenge-embed-simulator.scss +++ b/junior/app/styles/components/challenge/challenge-embed-simulator.scss @@ -16,6 +16,17 @@ width: 100%; height: 100%; } + + .reboot-container { + display: flex; + justify-content: flex-end; + color: var(--pix-neutral-500); + + &__content { + display: flex; + align-items: center; + } + } } diff --git a/junior/translations/fr.json b/junior/translations/fr.json index d6e8f8d75be..e9f16325eee 100644 --- a/junior/translations/fr.json +++ b/junior/translations/fr.json @@ -13,6 +13,13 @@ "play": "J'écoute", "stop": "Stop", "label": "Lire la consigne à haute voix" + }, + "challenge": { + "embed-simulator": { + "actions": { + "reset": "Recommencer" + } + } } }, "pages": {