Switch text and image on collpase/expand document

This commit is contained in:
Georgy Litvinov 2021-03-16 15:39:57 +01:00
parent 6402180623
commit 931be4cadc
2 changed files with 20 additions and 3 deletions

View file

@ -51,8 +51,10 @@ function applyExpandSettings() {
expandSwitchSettingsCB.checked = true;
}
$('.autoExpand').show();
showDocumentCollapseButton();
} else {
$('.autoExpand').hide();
showDocumentExpandButton();
}
}
@ -60,12 +62,25 @@ function switchExpand() {
var checkBox = document.getElementById("expandCB");
if (checkBox.checked == true) {
$('.autoExpand').show();
localStorage.setItem('switchExpand', true);
showDocumentCollapseButton();
} else {
$('.autoExpand').hide();
localStorage.setItem('switchExpand', false);
showDocumentExpandButton();
}
}
function showDocumentCollapseButton(){
var collapseTextControl = document.querySelector('#collapseTextControl');
collapseTextControl.style.display = "inline";
var expandTextControl = document.querySelector('#expandTextControl');
expandTextControl.style.display = "none";
}
function showDocumentExpandButton(){
var collapseTextControl = document.querySelector('#collapseTextControl');
collapseTextControl.style.display = "none";
var expandTextControl = document.querySelector('#expandTextControl');
expandTextControl.style.display = "inline";
}
function switchExpandSettings() {
var checkBox = document.getElementById("expandSettingsCB");

View file

@ -192,7 +192,9 @@
<#macro expandSwitch>
<div class="expandSwitch">
<label class="switch">Раскрыть документ<img src="${urls.base}/themes/iph/images/arrow-down.svg"/>
<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();">
</label>
</div>