From 60409e04a35475bed07fc17a0a842d7b160a5731 Mon Sep 17 00:00:00 2001
From: Georgy Litvinov <git@litvinovg.pro>
Date: Wed, 10 Mar 2021 19:58:51 +0100
Subject: [PATCH] Made rubric list collapsible

---
 .../themes/iph/js/collapsible_elements.js     | 41 +++++++++++++++----
 .../themes/iph/templates/compilation.ftl      |  7 +---
 .../themes/iph/templates/elenphAritcle.ftl    |  7 +---
 .../webapp/themes/iph/templates/text-lib.ftl  | 16 ++++----
 4 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js b/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js
index 13b308a7..98a3aa25 100644
--- a/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js
+++ b/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js
@@ -5,17 +5,40 @@ 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";
-			}
-		});
+		var collapsibleLink = coll[i].querySelector('.collapsibleLink'); 
+		if (collapsibleLink === null){
+			collapseNextElementOnClick(coll[i]);	
+		} else {
+			collapseNextOuterElementOnClick(collapsibleLink);	
+		}
+		
 	}
 }
+
+function collapseNextOuterElementOnClick(element){
+	element.addEventListener("click", function() {
+		this.classList.toggle("active");
+		var content = this.parentElement.nextElementSibling;
+		if (content.style.display === "block") {
+			content.style.display = "none";
+		} else {
+			content.style.display = "block";
+		}
+	});
+}
+
+function collapseNextElementOnClick(element){
+	element.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 applyExpandSettings() {
 	if (localStorage.getItem('switchExpand') === true || localStorage.getItem('switchExpand') === 'true') {
 		var expandSwitchCB = document.getElementById("expandCB");
diff --git a/webapp/src/main/webapp/themes/iph/templates/compilation.ftl b/webapp/src/main/webapp/themes/iph/templates/compilation.ftl
index c5ccdef0..4606b758 100644
--- a/webapp/src/main/webapp/themes/iph/templates/compilation.ftl
+++ b/webapp/src/main/webapp/themes/iph/templates/compilation.ftl
@@ -122,8 +122,6 @@ ${scripts.add('<script type="text/javascript" src="${urls.base}/themes/iph/js/to
   </#if>
 
 </#if>
-<button type="button" class="collapsible metadataAuthors">Информация об авторах</button>
-<div class="metadataAuthors" style="display:block;">
 	
 <#assign firstPub = propertyGroups.pullProperty("https://litvinovg.pro/text_structures#firstPublication")!>
   <#if firstPub.statements?has_content && firstPub.type == "data">
@@ -135,11 +133,8 @@ ${scripts.add('<script type="text/javascript" src="${urls.base}/themes/iph/js/to
 </#if>
 
 <@authors_metadata />
-</div>
-<button type="button" class="collapsible metadataRubrics">Относится к рубрикам</button>
-<div class="metadataRubrics" style="display:block;">
+
 <@documentRubrics />
-</div>
 
 <@arrangeDocumentParts />
 
diff --git a/webapp/src/main/webapp/themes/iph/templates/elenphAritcle.ftl b/webapp/src/main/webapp/themes/iph/templates/elenphAritcle.ftl
index 437a8ced..5685cfba 100644
--- a/webapp/src/main/webapp/themes/iph/templates/elenphAritcle.ftl
+++ b/webapp/src/main/webapp/themes/iph/templates/elenphAritcle.ftl
@@ -109,14 +109,9 @@ ${scripts.add('<script type="text/javascript" src="${urls.base}/themes/iph/js/to
         <@p.dataPropertyList firstPub editable />
     </div>
 </#if>
-<button type="button" class="collapsible metadataAuthors">Информация об авторах</button>
-<div class="metadataAuthors" style="display:block;">
+
 <@authors_metadata />
-</div>
-<button type="button" class="collapsible metadataRubrics">Относится к рубрикам</button>
-<div class="metadataRubrics" style="display:block;">
 <@documentRubrics />
-</div>
 <@arrangeDocumentParts />
 
 <@authors_underline />
diff --git a/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl b/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl
index b29362e1..102c3adb 100644
--- a/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl
+++ b/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl
@@ -2,7 +2,7 @@
 <#macro showRubrics>
 	<#assign currentRubrics = propertyGroups.pullProperty("https://iph.ras.ru/relationships#belongsTo")!>
 	<#if currentRubrics?? && currentRubrics?has_content>
-	   <div class="label">Относится к рубрикам: <@p.addLink currentRubrics editable /> <@p.verboseDisplay currentRubrics /></div>
+	   <div class="label collapsible">Относится к рубрикам: <@p.addLink currentRubrics editable /> <@p.verboseDisplay currentRubrics /></div>
 	    <#if rubrics?? && rubrics?has_content>
 	     <#list rubrics as rubric>
 	       <li role="listitem" style="list-style:none;">
@@ -37,18 +37,20 @@
 <#macro documentRubrics >
 	<#assign docRubrics = propertyGroups.pullProperty("https://iph.ras.ru/relationships#belongsTo")!>
 	<#if ( docRubrics?? && docRubrics?has_content ) || (rubrics?? && rubrics?has_content)>
-	   <div class="label">Относится к рубрикам: 
+	   <div class="label collapsible" ><div class="collapsibleLink" style="display:inline;">Относится к рубрикам:</div> 
 	     <#if docRubrics?? && docRubrics?has_content >
 	       <@p.addLink docRubrics editable /> <@p.verboseDisplay docRubrics /><br/>
 	     </#if> 
 	   </div>  
 	</#if>
 	<#if rubrics?? && rubrics?has_content>
-	  <#list rubrics as rubric>
-	   <li role="listitem" style="list-style:none;">
-	    <a href="${urls.base}/individual?uri=${rubric.rubricID?url}"">${rubric.rubricName}</a>
-	   </li>
-	  </#list>
+	  <div>
+	    <#list rubrics as rubric>
+	      <li role="listitem" style="list-style:none;">
+	        <a href="${urls.base}/individual?uri=${rubric.rubricID?url}"">${rubric.rubricName}</a>
+	      </li>
+	    </#list>
+	  </div>
 	</#if>
 </#macro>