foreign language quotes

by Richard Hunter

HTML

<div class="piotr">
  <img onclick="myFunction1()" class="flag" src="https://www.aeternus.org/nl.png" />
  <img onclick="myFunction2()" class="flag" src="https://www.aeternus.org/uk.png" />
  <img onclick="myFunction3()" class="flag" src="https://www.aeternus.org/de.png" />
  <img onclick="myFunction4()" class="flag" src="https://www.aeternus.org/fr.png" />
</div>

<div id="quote-container" class="quote-container"><iframe id="myframe" width="300" height="150" src="https://www.aeternus.org/linski_spr/view_spr_NL 2020-09-24.php" frameborder="0" scrolling="no"></iframe></div>

CSS

.flag {
  width: 48px;
  height: 29px;
  margin-right: 7px;
  margin-bottom: 10px;
  cursor: pointer;
}

.bild {
  width: 100%;
  align: justify !important;
  margin-bottom: 10px;
}

.piotr {
  text-align: center;
}

.quote-container {
  text-align: center;
  opacity: 0;
  transition: 2s linear all;
}

.fade-in {
  opacity: 1;
}

JavaScript

const FRENCH_QUOTE_SRC = 'https://www.aeternus.org/linski_spr/view_spr_FR 2020-09-24.php';
const GERMAN_QUOTE_SRC = 'https://www.aeternus.org/linski_spr/view_spr_DE 2020-09-24.php';
const ENGLISH_QUOTE_SRC = 'https://www.aeternus.org/linski_spr/view_spr_EN 2020-09-24.php';
const DUTCH_QUOTE_SRC = 'https://www.aeternus.org/linski_spr/view_spr_NL 2020-09-24.php';

const quoteContainer = document.querySelector('#quote-container');
const iframe = document.getElementById('myframe');

function myFunction1() {
  setIframeSrc(DUTCH_QUOTE_SRC);
}

function myFunction2() {
  setIframeSrc(ENGLISH_QUOTE_SRC);
}

function myFunction3() {
  setIframeSrc(GERMAN_QUOTE_SRC);
}

function myFunction4() {
  setIframeSrc(FRENCH_QUOTE_SRC);
}

function setIframeSrc(src) {
	// wait for fade out to finish before loading iframe
  quoteContainer.addEventListener('transitionend', () => {
		// wait for iframe to finish loading before fading back in
    iframe.addEventListener('load', () => {
      quoteContainer.classList.add('fade-in');
    }, {
      once: true // this removes listener after it runs once
    });

    iframe.src = src;

  }, {
    once: true
  });

  quoteContainer.classList.remove('fade-in');
}
// forces the browser to reflow the page which is necessary for the next line to work.
document.body.offsetHeight;
quoteContainer.classList.add('fade-in');