Added collapsible metadata scripts

This commit is contained in:
Georgy Litvinov 2021-03-24 11:49:28 +01:00
parent 89e5911acc
commit 7c1d0457cf
4 changed files with 47 additions and 29 deletions

View file

@ -3106,16 +3106,16 @@ label.switch {
padding-left: 12px;
padding-right: 12px;
}
#collapseTextControl:hover {
.collapseTextControl:hover {
color: #8B4513;
}
#expandTextControl:hover {
.expandTextControl:hover {
color: #8B4513;
}
label.switch >#expandTextControl >img {
label.switch >.expandTextControl >img {
padding-left: 6px;
}
label.switch >#collapseTextControl >img {
label.switch >.collapseTextControl >img {
padding-left: 6px;
}
.firstPub {
@ -3615,4 +3615,4 @@ label.switch >#collapseTextControl >img {
font-size: 0.8rem;
line-height: 1.2em;
}
}
}

View file

@ -41,44 +41,51 @@ function collapseNextElementOnClick(element){
}
function applyExpandSettings() {
if (localStorage.getItem('switchExpand') === true || localStorage.getItem('switchExpand') === 'true') {
var expandSwitchCB = document.getElementById("expandCB");
applyDocumentExpandSettings('switchExpand','expandCB','expandSettingsCB','.autoExpand');
applyDocumentExpandSettings('metadataExpandSetting','metadataExpandCB','metadataExpandSettingCB','.autoMetadataExpand');
}
function applyDocumentExpandSettings(settingName,buttonId,settingButtonId,targetElementsClass){
if (localStorage.getItem(settingName) === true || localStorage.getItem(settingName) === 'true') {
var expandSwitchCB = document.getElementById(buttonId);
if ( expandSwitchCB != null ){
expandSwitchCB.checked = true;
}
var expandSwitchSettingsCB = document.getElementById("expandSettingsCB");
var expandSwitchSettingsCB = document.getElementById(settingButtonId);
if ( expandSwitchSettingsCB != null ){
expandSwitchSettingsCB.checked = true;
}
$('.autoExpand').show();
showDocumentCollapseButton();
$(targetElementsClass).show();
showDocumentCollapseButton(buttonId);
} else {
$('.autoExpand').hide();
showDocumentExpandButton();
$(targetElementsClass).hide();
showDocumentExpandButton(buttonId);
}
}
function switchExpand() {
var checkBox = document.getElementById("expandCB");
function switchExpand(inputID,elementsClass) {
var checkBox = document.getElementById(inputID);
if (checkBox.checked == true) {
$('.autoExpand').show();
showDocumentCollapseButton();
$(elementsClass).show();
showDocumentCollapseButton(inputID);
} else {
$('.autoExpand').hide();
showDocumentExpandButton();
$(elementsClass).hide();
showDocumentExpandButton(inputID);
}
}
function showDocumentCollapseButton(){
var collapseTextControl = document.querySelector('#collapseTextControl');
function showDocumentCollapseButton(inputID){
var inputElement = document.getElementById(inputID);
var collapseTextControl = inputElement.parentElement.querySelector('.collapseTextControl');
collapseTextControl.style.display = "inline";
var expandTextControl = document.querySelector('#expandTextControl');
var expandTextControl = inputElement.parentElement.querySelector('.expandTextControl');
expandTextControl.style.display = "none";
}
function showDocumentExpandButton(){
var collapseTextControl = document.querySelector('#collapseTextControl');
function showDocumentExpandButton(inputID){
var inputElement = document.getElementById(inputID);
var collapseTextControl = inputElement.parentElement.querySelector('.collapseTextControl');
collapseTextControl.style.display = "none";
var expandTextControl = document.querySelector('#expandTextControl');
var expandTextControl = inputElement.parentElement.querySelector('.expandTextControl');
expandTextControl.style.display = "inline";
}

View file

@ -80,6 +80,7 @@ ${scripts.add('<script type="text/javascript" src="${urls.base}/themes/iph/js/to
<button id="print"><img onclick="javascript:printPageContent();" src="${urls.base}/themes/iph/images/print.svg"></button>
</div>
<@expandSwitch />
<@expandMetadataSwitch />
</div>
</div>
</header>

View file

@ -162,7 +162,7 @@
<div class="collapsible collapsed">
<div class="collapsibleLink" style="display:inline;">Авторы:</div>
</div>
<div class="expandedAuthors" style="display:none;">
<div class="expandedAuthors autoMetadataExpand" style="display:none;">
<#list authors as author>
<div class="affilation">
<b><#if author.authorFamily??>${author.authorFamily}&nbsp;</#if><#if author.authorGivenName??>${author.authorGivenName}</#if></b>
@ -199,12 +199,22 @@
</div>
</#macro>
<#macro expandMetadataSwitch>
<div class="expandSwitch">
<label class="switch">
<div class="expandTextControl">Раскрыть метаданные<img src="${urls.base}/themes/iph/images/arrow-down.svg"/></div>
<div class="collapseTextControl">Свернуть метаданные<img src="${urls.base}/themes/iph/images/arrow-top.svg"/></div>
<input id="metadataExpandCB" type="checkbox" onclick="switchExpand('metadataExpandCB','.autoMetadataExpand');">
</label>
</div>
</#macro>
<#macro expandSwitch>
<div class="expandSwitch">
<label class="switch">
<div id="expandTextControl">Раскрыть документ<img src="${urls.base}/themes/iph/images/arrow-down.svg"/></div>
<div id="collapseTextControl">Свернуть документ<img src="${urls.base}/themes/iph/images/arrow-top.svg"/></div>
<input id="expandCB" type="checkbox" onclick="switchExpand();">
<div class="expandTextControl">Раскрыть документ<img src="${urls.base}/themes/iph/images/arrow-down.svg"/></div>
<div class="collapseTextControl">Свернуть документ<img src="${urls.base}/themes/iph/images/arrow-top.svg"/></div>
<input id="expandCB" type="checkbox" onclick="switchExpand('expandCB','.autoExpand');">
</label>
</div>
</#macro>
</#macro>