[FEATURE] Ajout d'un bouton reload pour les embed (PIX-15418)

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';
+  }
 }

junior/app/components/challenge/challenge-embed-simulator/template.hbs

@@ -10,6 +10,20 @@
     src="{{@url}}"
     title="{{@title}}"
     style="{{this.embedDocumentHeightStyle}}"
+    {{did-render this.setIframeHtmlElement}}
   >
   </iframe>
+  {{#if @shouldDisplayRebootButton}}
+    <div class="reboot-container">
+      <PixButton
+        class="link link--grey reboot-container__content"
+        aria-label={{t "pages.challenge.embed-simulator.actions.reset-label"}}
+        @iconBefore="refresh"
+        @variant="tertiary"
+        @triggerAction={{this.rebootSimulator}}
+      >
+        {{t "components.challenge.embed-simulator.actions.reset"}}
+      </PixButton>
+    </div>
+  {{/if}}
 </div>

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;
+  }
 }

junior/app/components/challenge/item/template.hbs

@@ -14,6 +14,7 @@
             @height={{@challenge.embedHeight}}
             @hideSimulator={{@isDisabled}}
             @isMediaWithForm={{this.isMediaWithForm}}
+            @shouldDisplayRebootButton={{this.shouldDisplayRebootButton}}
           />
         </div>
       {{/if}}

junior/app/styles/components/challenge/challenge-embed-simulator.scss

@@ -16,6 +16,21 @@
     width: 100%;
     height: 100%;
   }
+
+  .reboot-container {
+    display: flex;
+    justify-content: flex-end;
+
+    .pix-button--tertiary {
+      color: var(--pix-neutral-500);
+      text-decoration: none;
+    }
+
+    &__content {
+      display: flex;
+      align-items: center;
+    }
+  }
 }
 
 

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": {