From c995a9e38a67efecd2831c558ea279d6396d7d00 Mon Sep 17 00:00:00 2001
From: kthoden <kthoden@mpiwg-berlin.mpg.de>
Date: Wed, 29 Apr 2020 17:35:56 +0200
Subject: [PATCH] Adding parallel text functionality

---
 src/assets/images/icons/icon-translation.svg | 130 +++++++++++++++++++
 src/scripts/modules/accordion.js             |  37 ++++++
 src/styles/components/accordion.scss         |  22 ++++
 3 files changed, 189 insertions(+)
 create mode 100644 src/assets/images/icons/icon-translation.svg

diff --git a/src/assets/images/icons/icon-translation.svg b/src/assets/images/icons/icon-translation.svg
new file mode 100644
index 000000000..3fdd459a2
--- /dev/null
+++ b/src/assets/images/icons/icon-translation.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   height="362.29974"
+   width="435.12177"
+   xml:space="preserve"
+   viewBox="0 0 26.752339 22.275066"
+   y="0px"
+   x="0px"
+   id="Capa_1"
+   version="1.1"><metadata
+     id="metadata39"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs37" /><path
+     style="fill:#b8b8b8"
+     id="path2"
+     d="m 16.47759,21.807 c -0.444,0.444 -1.143,0.444 -1.587,0 -0.429,-0.429 -0.429,-1.143 0,-1.571 l 8.047,-8.047 h -7.995443 c -0.619,0 -1.111,-0.492 -1.111,-1.111 0,-0.619 0.492,-1.1270005 1.111,-1.1270005 H 22.93859 L 14.89159,1.92 c -0.429,-0.444 -0.429,-1.159 0,-1.587 0.444,-0.444 1.143,-0.444 1.587,0 l 9.952,9.952 c 0.429,0.429 0.429,1.143 0,1.571 z" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g4" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g6" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g8" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g10" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g12" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g14" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g16" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g18" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g20" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g22" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g24" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g26" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g28" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g30" /><g
+     transform="translate(-4.7280349,-4.6696249)"
+     id="g32" /><image
+     transform="scale(-1,1)"
+     width="12.972791"
+     height="22.195154"
+     preserveAspectRatio="none"
+     xlink:href="data:image/png;base64,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
+"
+     id="image1699"
+     x="-12.972791"
+     y="0.079912461" /></svg>
\ No newline at end of file
diff --git a/src/scripts/modules/accordion.js b/src/scripts/modules/accordion.js
index a54f09f88..f02d5c8e7 100644
--- a/src/scripts/modules/accordion.js
+++ b/src/scripts/modules/accordion.js
@@ -6,6 +6,7 @@ export default () => {
     if (
       !$('.publications-popup').is(e.target)
       && !$('.publications-popup-eye').is(e.target)
+      && !$('.publications-popup-para').is(e.target)
       && !$('.publications-popup-sup').is(e.target)
     ) {
       $(this).closest('.accordion__item').toggleClass('active');
@@ -98,6 +99,40 @@ export default () => {
     });
   });
 
+  $('button.publications-popup-para').on('click', function popuppara(e) {
+    e.preventDefault();
+    const text = $(this).data('content');
+    const title = $(this).data('title');
+    const elementClassic = `<div class="infobox active"><h4 class="infobox__title">${title}</h4><p class="infobox__description">${text}</p></div>`;
+    if (!$(this).hasClass('active')) {
+      $(this).after(elementClassic);
+      $(this).addClass('active');
+    } else {
+      $(this).next().remove();
+      $(this).removeClass('active');
+    }
+
+    const infobox = $(this).parent().find('.infobox');
+
+    infobox.each((index, element) => {
+      if (index === 0) {
+        $(element).addClass('infobox--arrow-left');
+        $(element).removeClass('infobox--arrow-top');
+        $(element).css({ top: 0 });
+      } else {
+        $(element).addClass('infobox--arrow-top');
+        $(element).removeClass('infobox--arrow-left');
+
+        let topElem = 0;
+        for (let i = 0; i < index; i += 1) {
+          topElem = topElem + $(infobox[i]).outerHeight() + 20;
+        }
+        $(element).css({ top: `${topElem}px` });
+      }
+    });
+  });
+
+
   $('button.publications-popup-sup').on('click', function popupsup(e) {
     e.preventDefault();
     const text = $(this).data('content');
@@ -157,12 +192,14 @@ export default () => {
       && infobox.has(e.target).length === 0
       && !$('.publications-popup-eye').is(e.target)
       && !$('.publications-popup-sup').is(e.target)
+      && !$('.publications-popup-para').is(e.target)
       && !$('.publications-popup-text').is(e.target)
     ) {
       infobox.remove();
       $('.publications-popup').removeClass('active');
       $('.publications-popup-eye').removeClass('active');
       $('.publications-popup-sup').removeClass('active');
+      $('.publications-popup-para').removeClass('active');
       $('.publications-popup-text').removeClass('active');
       e.stopPropagation();
     }
diff --git a/src/styles/components/accordion.scss b/src/styles/components/accordion.scss
index 3968664a1..794eee73e 100644
--- a/src/styles/components/accordion.scss
+++ b/src/styles/components/accordion.scss
@@ -214,6 +214,28 @@
   }
 }
 
+.publications-popup-para {
+  float: right;
+  border: 0;
+  margin: 0 3px 9px;
+  background-color: transparent;
+  display: block;
+  width: 22px;
+  height: 18px;
+  background-image: url('../assets/images/icons/icon-translation.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  outline: none;
+
+  @include media--max($width--phone) {
+    float: none;
+    width: 14px;
+    height: 14px;
+    margin: 0 auto 9px;
+  }
+}
+
 .publications2 {
   & .publications__overview {
     & .accordion__content {