Add '...' before collapse view_more link (when collapsed)

This commit is contained in:
Niko 2022-02-18 15:13:30 +01:00
parent 1ee9009628
commit 9d443c94d4
3 changed files with 9 additions and 4 deletions

View File

@ -35,6 +35,9 @@ body {
.collapse.collapsed {
display: none !important;
}
*[collapsed="true"]::before {
content: '... ';
}
@media (max-width: 400px) { .media-max400 { display: none } }
@media (max-width: 500px) { .media-max500 { display: none } }

View File

@ -125,17 +125,19 @@ app.post = {
return app.post._collapsed[id] === true;
},
collapse: function(id, strs) {
const co = document.getElementById('collapse-'+id);
const cl = document.getElementById('collapse-link-'+id);
const co = document.querySelector(`#collapse-${id}`);
const cl = document.querySelector(`#collapse-link-${id} .link`);
const collapsed = co.classList.contains('collapsed');
if (collapsed) {
app.post._collapsed[id] = false;
co.classList.remove('collapsed');
cl.innerText = strs[1];
cl.parentNode.removeAttribute('collapsed');
} else {
app.post._collapsed[id] = true;
co.classList.add('collapsed');
cl.innerText = strs[0];
cl.parentNode.setAttribute('collapsed', 'true');
}
},
prepare4html: function(value, tags) {

View File

@ -103,8 +103,8 @@ app.pages.meet = {
const t1 = (app.strings.app.view_more || 'view more').replaceAll(/('|")/g, '');
const t2 = (app.strings.app.view_less || 'view less').replaceAll(/('|")/g, '');
const act = `app.post.collapse('${id}', ['${t1}', '${t2}'])`;
value = value.substr(0, gi)+ '<span id="collapse-'+id+'" class="collapse collapsed">'+
value.substr(gi)+'</span>'+ '&nbsp;<a id="collapse-link-'+id+'" class="link" onclick="'+act+'">ver más</a>';
value = value.substr(0, gi)+ `<span id="collapse-${id}" class="collapse collapsed">`+value.substr(gi)+
`</span>&nbsp;<span id="collapse-link-${id}" collapsed="true"><a class="link" onclick="${act}">${t1}</a></span>`;
ptext.innerHTML = value;
if (!app.post.collapsed(id, true))
app.post.collapse(id, [t1, t2]);