gdorn/FreshRSS-Extensions
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fixed QuickCollapse

Browse source
This commit is contained in:
math-gh 2023-09-04 22:30:44 +02:00
parent e557fb8d0f
commit ddb1144a61
2 changed files with 66 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

112
xExtension-QuickCollapse/static/script.js
View file

@ -1,68 +1,70 @@
/* globals context, quick_collapse_vars */
(function () { (function () {
function toggleCollapse() { function toggleCollapse() {
const streamElem = document.getElementById('stream'); const streamElem = document.getElementById('stream');
const toggleElem = document.getElementById('toggle-collapse'); const toggleElem = document.getElementById('toggle-collapse');
const wasCollapsed = streamElem.classList.contains('hide_posts'); const wasCollapsed = streamElem.classList.contains('hide_posts');
if (wasCollapsed) { if (wasCollapsed) {
streamElem.classList.remove('hide_posts'); streamElem.classList.remove('hide_posts');
toggleElem.classList.remove('collapsed'); toggleElem.classList.remove('collapsed');
} else { } else {
streamElem.classList.add('hide_posts'); streamElem.classList.add('hide_posts');
toggleElem.classList.add('collapsed'); toggleElem.classList.add('collapsed');
} }
if (context.does_lazyload && wasCollapsed) { if (context.does_lazyload && wasCollapsed) {
const lazyloadedElements = streamElem.querySelectorAll( const lazyloadedElements = streamElem.querySelectorAll(
'img[data-original], iframe[data-original]' 'img[data-original], iframe[data-original]'
); );
lazyloadedElements.forEach(function (el) { lazyloadedElements.forEach(function (el) {
el.src = el.getAttribute('data-original'); el.src = el.getAttribute('data-original');
el.removeAttribute('data-original'); el.removeAttribute('data-original');
}); });
} }
} }
function syncWithContext() { function syncWithContext() {
if (!window.context || !window.quick_collapse_vars) { if (!window.context || !window.quick_collapse_vars) {
// The variables might not be available yet, so we need to wait for them. // The variables might not be available yet, so we need to wait for them.
return setTimeout(syncWithContext, 10); return setTimeout(syncWithContext, 10);
} }
const toggleElem = document.getElementById('toggle-collapse'); const toggleElem = document.getElementById('toggle-collapse');
toggleElem.title = quick_collapse_vars.i18n.toggle_collapse; toggleElem.title = quick_collapse_vars.i18n.toggle_collapse;
toggleElem.innerHTML = `<img class="icon uncollapse" src="${quick_collapse_vars.icon_url_out}" alt="↕" />`; toggleElem.innerHTML = `<img class="icon uncollapse" src="${quick_collapse_vars.icon_url_out}" alt="↕" />`;
toggleElem.innerHTML += `<img class="icon collapse" src="${quick_collapse_vars.icon_url_in}" alt="✖" />`; toggleElem.innerHTML += `<img class="icon collapse" src="${quick_collapse_vars.icon_url_in}" alt="✖" />`;
if (context.hide_posts) { if (context.hide_posts) {
toggleElem.classList.add('collapsed'); toggleElem.classList.add('collapsed');
} }
} }
const streamElem = document.getElementById('stream'); const streamElem = document.getElementById('stream');
if (!streamElem || !streamElem.classList.contains('normal')) { if (!streamElem || !streamElem.classList.contains('normal')) {
// The button should be enabled only on "normal" view // The button should be enabled only on "normal" view
return; return;
} }
// create the new button // create the new button
const toggleElem = document.createElement('button'); const toggleElem = document.createElement('button');
toggleElem.id = 'toggle-collapse'; toggleElem.id = 'toggle-collapse';
toggleElem.classList.add('btn'); toggleElem.classList.add('btn');
toggleElem.addEventListener('click', toggleCollapse); toggleElem.addEventListener('click', toggleCollapse);
// replace the "order" button by a stick containing the order and the // replace the "order" button by a stick containing the order and the
// collapse buttons // collapse buttons
const orderElem = document.getElementById('toggle-order'); const orderElem = document.getElementById('toggle-order');
const stickElem = document.createElement('div'); const stickElem = document.createElement('div');
stickElem.classList.add('stick'); stickElem.classList.add('stick');
orderElem.parentNode.insertBefore(stickElem, orderElem); orderElem.parentNode.insertBefore(stickElem, orderElem);
stickElem.appendChild(orderElem); stickElem.appendChild(orderElem);
stickElem.appendChild(toggleElem); stickElem.appendChild(toggleElem);
// synchronizes the collapse button with dynamic vars passed via the // synchronizes the collapse button with dynamic vars passed via the
// backend (async mode). // backend (async mode).
syncWithContext(); syncWithContext();
}()); }());

15
xExtension-QuickCollapse/views/quickCollapse/vars.js
View file

@ -1,7 +1,10 @@
var quick_collapse_vars = { /* exported quick_collapse_vars */
icon_url_in: "<?= $this->icon_url_in ?>",
icon_url_out: "<?= $this->icon_url_out ?>", // eslint-disable-next-line no-unused-vars
i18n: { const quick_collapse_vars = {
toggle_collapse: "<?= $this->i18n_toggle_collapse ?>", icon_url_in: '<?= $this->icon_url_in ?>',
}, icon_url_out: '<?= $this->icon_url_out ?>',
i18n: {
toggle_collapse: '<?= $this->i18n_toggle_collapse ?>',
},
}; };