Fixing expand switch

webapp/src/main/webapp/templates/freemarker/compilation.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>
 <#include "text-lib.ftl">
@@ -122,7 +123,7 @@ ${scripts.add('<script async type="text/javascript" src="${urls.base}/themes/iph
 
 <div class="expandSwitch">
   <label class="switch">Раскрыть статью
-    <input id="expandlCB" type="checkbox" onclick="switchExpand();">
+    <input id="expandCB" type="checkbox" onclick="switchExpand();">
   </label>
 </div>
 <div id="TOC"></div>
@@ -167,12 +168,12 @@ ${scripts.add('<script async type="text/javascript" src="${urls.base}/themes/iph
 	    <div class = "articleExcerpt">  
 	    <#if excerptText?? && excerptTextName?? && excerptTextName?has_content && excerptText?has_content>  
 	      <button type="button" style="border:none;padding: 18px;width: 100%; text-align:left;" class="collapsible">${excerptTextName}</button>
-			  <div class="htmlExcerpt" style="list-style:none; display:none;">
+			  <div class="autoExpand htmlExcerpt" style="list-style:none; display:none;">
 			    ${excerptText}
 				<#if works?? && works?has_content && worksCounter?number &gt; 0 >
 				  <div>
 				  <button type="button" class="collapsible" style="background-color:white;border:none;padding: 18px;width: 100%;text-align:left;">Источники</button>
-					<div class="works" style="display:none;">
+					<div class="autoExpand works" style="display:none;">
 					  <#list works as work>
 	                    <#if work.elenphExcerpt == order.elenphExcerpt >
 						  <div class="work" style="list-style:none;">
@@ -187,7 +188,7 @@ ${scripts.add('<script async type="text/javascript" src="${urls.base}/themes/iph
 				<#if bibliography?? && bibliography?has_content && bibliographyCounter?number &gt; 0>
 				  <div>
 				    <button type="button" class="collapsible" style="background-color:white;border:none;padding: 18px;width: 100%; text-align: left;">Литература</button>
-					<div class="bibliography" style="display:none;">
+					<div class="autoExpand bibliography" style="display:none;">
 					  <#list bibliography as one_bibliography>
 	                    <#if one_bibliography.elenphExcerpt == order.elenphExcerpt >
 	                      <div class="bibliography_entry" style="list-style:none;">
@@ -206,7 +207,7 @@ ${scripts.add('<script async type="text/javascript" src="${urls.base}/themes/iph
 	<#if works?? && works?has_content>
 	  <div>
 	  <button type="button" class="collapsible" style="border:none;padding: 18px;width: 100%;text-align:left;">Источники</button>
-	    <div class="works" style="display:none;">
+	    <div class="autoExpand works" style="display:none;">
 	      <#list works as work>
 	        <div class="work" style="list-style:none;">
 	          <p> ${work.works} </p>
@@ -219,7 +220,7 @@ ${scripts.add('<script async type="text/javascript" src="${urls.base}/themes/iph
 	<#if bibliography?? && bibliography?has_content>
 	  <div>
 	  <button type="button" class="collapsible" style="border:none;padding: 18px;width: 100%; text-align: left;">Литература</button>
-	    <div class="bibliography" style="display:none;">
+	    <div class="autoExpand bibliography" style="display:none;">
 	      <#list bibliography as one_bibliography>
 	        <div class="bibliography_entry" style="list-style:none;">
 	          <p> ${one_bibliography.bibliography} </p>
@@ -238,22 +239,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" > 
@@ -281,24 +266,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();

webapp/src/main/webapp/templates/freemarker/elenphAritcle.ftl

@@ -96,7 +96,7 @@ ${scripts.add('<script type="text/javascript" src="${urls.base}/themes/iph/js/co
 </#if>
 <div class="expandSwitch">
   <label class="switch">Раскрыть статью
-    <input id="expandlCB" type="checkbox" onclick="switchExpand();">
+    <input id="expandCB" type="checkbox" onclick="switchExpand();">
   </label>
 </div>
 <#assign firstPub = propertyGroups.pullProperty("https://litvinovg.pro/text_structures#firstPublication")!>

webapp/src/main/webapp/themes/iph/js/collapsible_elements.js

@@ -17,8 +17,8 @@ function addCollapsibleOnClick(){
   }
 }
 function expandAllCollapsedElements(){
-  console.log(localStorage.getItem('switchExpand'));
   if (localStorage.getItem('switchExpand') === true || localStorage.getItem('switchExpand') === 'true') {
+     document.getElementById("expandCB").checked = true;
     $('.autoExpand').show();
   } else {
     $('.autoExpand').hide();
@@ -26,7 +26,7 @@ function expandAllCollapsedElements(){
 
 }
   function switchExpand(){
-    var checkBox = document.getElementById("expandlCB");
+    var checkBox = document.getElementById("expandCB");
     if (checkBox.checked == true){
       $('.autoExpand').show();
       localStorage.setItem('switchExpand',true);