From e9597bc1c074469de2b81667b7f04c28835d0dce Mon Sep 17 00:00:00 2001
From: Georgy Litvinov <git@litvinovg.pro>
Date: Tue, 2 Mar 2021 14:56:17 +0100
Subject: [PATCH] Refactoring expand scripts

---
 .../templates/freemarker/elenphAritcle.ftl    | 35 +------------------
 .../themes/iph/js/collapsible_elements.js     | 35 +++++++++++++++++++
 2 files changed, 36 insertions(+), 34 deletions(-)
 create mode 100644 webapp/src/main/webapp/themes/iph/js/collapsible_elements.js

diff --git a/webapp/src/main/webapp/templates/freemarker/elenphAritcle.ftl b/webapp/src/main/webapp/templates/freemarker/elenphAritcle.ftl
index 04ec2dbfa..5185b7067 100644
--- a/webapp/src/main/webapp/templates/freemarker/elenphAritcle.ftl
+++ b/webapp/src/main/webapp/templates/freemarker/elenphAritcle.ftl
@@ -8,6 +8,7 @@
 ${scripts.add('<script async type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>')}
 ${scripts.add('<script async type="text/javascript" src="//cdn.plu.mx/widget-popup.js"></script>')}
 ${scripts.add('<script async type="text/javascript" src="${urls.base}/themes/iph/js/print.js"></script>')}
+${scripts.add('<script type="text/javascript" src="${urls.base}/themes/iph/js/collapsible_elements.js"></script>')}
 <#import "individual-qrCodeGenerator.ftl" as qr>
 <#import "lib-vivo-properties.ftl" as vp>
 <#--Number of labels present-->
@@ -233,22 +234,6 @@ ${scripts.add('<script async type="text/javascript" src="${urls.base}/themes/iph
   </#list>
 </#if>
 
-<script>
-var coll = document.getElementsByClassName("collapsible");
-var i;
-
-for (i = 0; i < coll.length; i++) {
-  coll[i].addEventListener("click", function() {
-    this.classList.toggle("active");
-    var content = this.nextElementSibling;
-    if (content.style.display === "block") {
-      content.style.display = "none";
-    } else {
-      content.style.display = "block";
-    }
-  });
-}
-</script>
  <#-- <@dumpAll /> -->
 
  <#assign selectedTemplate = "individual--foaf-person-2column.ftl" > 
@@ -276,24 +261,6 @@ for (i = 0; i < coll.length; i++) {
 </span>
 </#if>
 
-<script>
-  console.log(localStorage.getItem('switchExpand'));
-  if (localStorage.getItem('switchExpand') === true || localStorage.getItem('switchExpand') === 'true') {
-    console.log("show html excerpts");
-    $('.htmlExcerpt').show();
-  }
-  function switchExpand(){
-    var checkBox = document.getElementById("expandlCB");
-    if (checkBox.checked == true){
-      $('.htmlExcerpt').show();
-      localStorage.setItem('switchExpand',true);
-    } else {
-      $('.htmlExcerpt').hide();
-      localStorage.setItem('switchExpand',false);
-    }
-  }
-</script>
-
 <#if !editable>
 <script>
     var title = $('div#titleContainer').width();
diff --git a/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js b/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js
new file mode 100644
index 000000000..63c34c703
--- /dev/null
+++ b/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js
@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', addCollapsibleOnClick(), false);
+document.addEventListener('DOMContentLoaded', expandAllCollapsedElements(), false);
+
+function addCollapsibleOnClick(){
+  var coll = document.getElementsByClassName("collapsible");
+  var i;
+  for (i = 0; i < coll.length; i++) {
+    coll[i].addEventListener("click", function() {
+      this.classList.toggle("active");
+      var content = this.nextElementSibling;
+      if (content.style.display === "block") {
+        content.style.display = "none";
+      } else {
+        content.style.display = "block";
+      }
+    });
+  }
+}
+function expandAllCollapsedElements(){
+  console.log(localStorage.getItem('switchExpand'));
+  if (localStorage.getItem('switchExpand') === true || localStorage.getItem('switchExpand') === 'true') {
+    $('.htmlExcerpt').show();
+  }
+}
+  function switchExpand(){
+    var checkBox = document.getElementById("expandlCB");
+    if (checkBox.checked == true){
+      $('.htmlExcerpt').show();
+      localStorage.setItem('switchExpand',true);
+    } else {
+      $('.htmlExcerpt').hide();
+      localStorage.setItem('switchExpand',false);
+    }
+  }
+