Added collapsible metadata scripts

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

View file

@ -3106,16 +3106,16 @@ label.switch {
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
} }
#collapseTextControl:hover { .collapseTextControl:hover {
color: #8B4513; color: #8B4513;
} }
#expandTextControl:hover { .expandTextControl:hover {
color: #8B4513; color: #8B4513;
} }
label.switch >#expandTextControl >img { label.switch >.expandTextControl >img {
padding-left: 6px; padding-left: 6px;
} }
label.switch >#collapseTextControl >img { label.switch >.collapseTextControl >img {
padding-left: 6px; padding-left: 6px;
} }
.firstPub { .firstPub {

View file

@ -41,44 +41,51 @@ function collapseNextElementOnClick(element){
} }
function applyExpandSettings() { function applyExpandSettings() {
if (localStorage.getItem('switchExpand') === true || localStorage.getItem('switchExpand') === 'true') { applyDocumentExpandSettings('switchExpand','expandCB','expandSettingsCB','.autoExpand');
var expandSwitchCB = document.getElementById("expandCB"); 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 ){ if ( expandSwitchCB != null ){
expandSwitchCB.checked = true; expandSwitchCB.checked = true;
} }
var expandSwitchSettingsCB = document.getElementById("expandSettingsCB"); var expandSwitchSettingsCB = document.getElementById(settingButtonId);
if ( expandSwitchSettingsCB != null ){ if ( expandSwitchSettingsCB != null ){
expandSwitchSettingsCB.checked = true; expandSwitchSettingsCB.checked = true;
} }
$('.autoExpand').show(); $(targetElementsClass).show();
showDocumentCollapseButton(); showDocumentCollapseButton(buttonId);
} else { } else {
$('.autoExpand').hide(); $(targetElementsClass).hide();
showDocumentExpandButton(); showDocumentExpandButton(buttonId);
} }
} }
function switchExpand() { function switchExpand(inputID,elementsClass) {
var checkBox = document.getElementById("expandCB"); var checkBox = document.getElementById(inputID);
if (checkBox.checked == true) { if (checkBox.checked == true) {
$('.autoExpand').show(); $(elementsClass).show();
showDocumentCollapseButton(); showDocumentCollapseButton(inputID);
} else { } else {
$('.autoExpand').hide(); $(elementsClass).hide();
showDocumentExpandButton(); showDocumentExpandButton(inputID);
} }
} }
function showDocumentCollapseButton(){ function showDocumentCollapseButton(inputID){
var collapseTextControl = document.querySelector('#collapseTextControl'); var inputElement = document.getElementById(inputID);
var collapseTextControl = inputElement.parentElement.querySelector('.collapseTextControl');
collapseTextControl.style.display = "inline"; collapseTextControl.style.display = "inline";
var expandTextControl = document.querySelector('#expandTextControl'); var expandTextControl = inputElement.parentElement.querySelector('.expandTextControl');
expandTextControl.style.display = "none"; expandTextControl.style.display = "none";
} }
function showDocumentExpandButton(){ function showDocumentExpandButton(inputID){
var collapseTextControl = document.querySelector('#collapseTextControl'); var inputElement = document.getElementById(inputID);
var collapseTextControl = inputElement.parentElement.querySelector('.collapseTextControl');
collapseTextControl.style.display = "none"; collapseTextControl.style.display = "none";
var expandTextControl = document.querySelector('#expandTextControl'); var expandTextControl = inputElement.parentElement.querySelector('.expandTextControl');
expandTextControl.style.display = "inline"; 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> <button id="print"><img onclick="javascript:printPageContent();" src="${urls.base}/themes/iph/images/print.svg"></button>
</div> </div>
<@expandSwitch /> <@expandSwitch />
<@expandMetadataSwitch />
</div> </div>
</div> </div>
</header> </header>

View file

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