scripts/aspect-ratio-selector.js
/**
     * Creates an aspect ratio modal.
     * The modal includes button to set the aspect ratio to either 4/3 or 3/4.
     * 
     * @return {HTMLDivElement}
     */
Creates an aspect ratio modal.
The modal includes button to set the aspect ratio to either 4/3 or 3/4.


Creates an aspect ratio modal . The modal includes button to set the aspect ratio to either 4 / 3 or 3 / 4 .
createAspectRatioModal() {
      const container = document.createElement('div');
      container.className = 'aspect-ratio-modal-container';
      const modal = document.createElement('section');
      modal.className = 'aspect-ratio-modal';
      const modalHeader = document.createElement('header');
      modalHeader.className = 'aspect-ratio-modal-header';
      const heading = document.createElement('h1');
      heading.className = 'aspect-ratio-modal-title';
      heading.textContent = H5PEditor.t('H5PEditor.NDLACoursePresentation', 'aspectRatioTitle');
      const subHeading = document.createElement('p');
      subHeading.setAttribute('role', 'doc-subtitle');
      subHeading.className = 'aspect-ratio-modal-subtitle';
      subHeading.textContent = H5PEditor.t('H5PEditor.NDLACoursePresentation', 'aspectRatioSubtitle');
      modalHeader.appendChild(heading);
      modalHeader.appendChild(subHeading);
      modal.appendChild(modalHeader);
      const ratioContainer = document.createElement('div');
      ratioContainer.className = 'aspect-ratio-modal-ratios';
      this.availableRatios
        .map((ratio, index) => this.createRatioButton(ratio, index === 0, index))
        .map((button) => ratioContainer.appendChild(button));
      modal.appendChild(ratioContainer);
      const modalFooter = document.createElement('footer');
      modalFooter.className = 'aspect-ratio-modal-footer';
      const submitButton = document.createElement('button');
      submitButton.type = 'button';
      submitButton.className = 'aspect-ratio-submit-button';
      submitButton.addEventListener('click', () => this.onSubmitClick());
      submitButton.textContent = H5PEditor.t('H5PEditor.NDLACoursePresentation', 'aspectRatioSubmit');
      modalFooter.appendChild(submitButton);
      modal.appendChild(modalFooter);
      container.appendChild(modal);
      return container;
    }
createAspectRatioModal ( ) { const container = document . createElement ( 'div' ) ; container . className = 'aspect-ratio-modal-container' ; const modal = document . createElement ( 'section' ) ; modal . className = 'aspect-ratio-modal' ; const modalHeader = document . createElement ( 'header' ) ; modalHeader . className = 'aspect-ratio-modal-header' ; const heading = document . createElement ( 'h1' ) ; heading . className = 'aspect-ratio-modal-title' ; heading . textContent = H5PEditor . t ( 'H5PEditor.NDLACoursePresentation' , 'aspectRatioTitle' ) ; const subHeading = document . createElement ( 'p' ) ; subHeading . setAttribute ( 'role' , 'doc-subtitle' ) ; subHeading . className = 'aspect-ratio-modal-subtitle' ; subHeading . textContent = H5PEditor . t ( 'H5PEditor.NDLACoursePresentation' , 'aspectRatioSubtitle' ) ; modalHeader . appendChild ( heading ) ; modalHeader . appendChild ( subHeading ) ; modal . appendChild ( modalHeader ) ; const ratioContainer = document . createElement ( 'div' ) ; ratioContainer . className = 'aspect-ratio-modal-ratios' ; this . availableRatios . map ( ( ratio , index ) => this . createRatioButton ( ratio , index === 0 , index ) ) . map ( ( button ) => ratioContainer . appendChild ( button ) ) ; modal . appendChild ( ratioContainer ) ; const modalFooter = document . createElement ( 'footer' ) ; modalFooter . className = 'aspect-ratio-modal-footer' ; const submitButton = document . createElement ( 'button' ) ; submitButton . type = 'button' ; submitButton . className = 'aspect-ratio-submit-button' ; submitButton . addEventListener ( 'click' , ( ) => this . onSubmitClick ( ) ) ; submitButton . textContent = H5PEditor . t ( 'H5PEditor.NDLACoursePresentation' , 'aspectRatioSubmit' ) ; modalFooter . appendChild ( submitButton ) ; modal . appendChild ( modalFooter ) ; container . appendChild ( modal ) ; return container ; }
Creates an aspect ratio modal.
Creates an aspect ratio modal .