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

Add Quick Collapse extension

Browse source
This commit is contained in:
Marien Fressinaud 2020-01-20 13:51:46 +01:00
parent 0a8652eefb
commit 1a37d8c11b
No known key found for this signature in database
GPG key ID: 936C16A8AE27E9D5
14 changed files with 834 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
xExtension-QuickCollapse/static/in.svg Normal file
View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
<g transform="translate(-181.0002,-751)">
<path style="block-progression:tb;color:#bebebe;direction:ltr;text-indent:0;text-align:start;enable-background:new;text-transform:none;" d="m195.03,751,0,1c-0.00091,0.0111,0.00059,0.021-0.00009,0.0312-0.0112,0.25496-0.12835,0.50994-0.31251,0.6875l-5.7188,6.2977-5.7188-6.2977c-0.18821-0.1881-0.28121-0.45346-0.28122-0.71875v-1h1c0.26531,0.00007,0.53059,0.0931,0.71873,0.28131l4.2812,4.829,4.2813-4.829c0.19464-0.21073,0.46925-0.30315,0.74998-0.2813z" fill-rule="nonzero" fill="#bebebe"/>
</g>
<g transform="translate(-201.0002,-743)">
<path style="block-progression:tb;color:#bebebe;direction:ltr;text-indent:0;text-align:start;enable-background:new;text-transform:none;" d="m215.03,759,0-1c-0.00091-0.0111,0.00059-0.021-0.00009-0.0312-0.0112-0.25496-0.12835-0.50994-0.31251-0.6875l-5.7188-6.2977-5.7188,6.2977c-0.18821,0.1881-0.28121,0.45346-0.28122,0.71875v1h1c0.26531-0.00007,0.53059-0.0931,0.71873-0.28131l4.2812-4.829,4.2813,4.829c0.19464,0.21073,0.46925,0.30315,0.74998,0.2813z" fill-rule="nonzero" fill="#bebebe"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

8
xExtension-QuickCollapse/static/out.svg Normal file
View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
<g transform="translate(-181.0002,-743)">
<path style="block-progression:tb;color:#bebebe;direction:ltr;text-indent:0;text-align:start;enable-background:new;text-transform:none;" d="m195.03,751,0,1c-0.00091,0.0111,0.00059,0.021-0.00009,0.0312-0.0112,0.25496-0.12835,0.50994-0.31251,0.6875l-5.7188,6.2977-5.7188-6.2977c-0.18821-0.1881-0.28121-0.45346-0.28122-0.71875v-1h1c0.26531,0.00007,0.53059,0.0931,0.71873,0.28131l4.2812,4.829,4.2813-4.829c0.19464-0.21073,0.46925-0.30315,0.74998-0.2813z" fill-rule="nonzero" fill="#bebebe"/>
</g>
<g transform="translate(-201.0002,-751)">
<path style="block-progression:tb;color:#bebebe;direction:ltr;text-indent:0;text-align:start;enable-background:new;text-transform:none;" d="m215.03,759,0-1c-0.00091-0.0111,0.00059-0.021-0.00009-0.0312-0.0112-0.25496-0.12835-0.50994-0.31251-0.6875l-5.7188-6.2977-5.7188,6.2977c-0.18821,0.1881-0.28121,0.45346-0.28122,0.71875v1h1c0.26531-0.00007,0.53059-0.0931,0.71873-0.28131l4.2812-4.829,4.2813,4.829c0.19464,0.21073,0.46925,0.30315,0.74998,0.2813z" fill-rule="nonzero" fill="#bebebe"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

64
xExtension-QuickCollapse/static/script.js Normal file
View file

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

11
xExtension-QuickCollapse/static/style.css Normal file
View file

@ -0,0 +1,11 @@
#toggle-collapse .uncollapse {
display: none;
}
#toggle-collapse.collapsed .collapse {
display: none;
}
#toggle-collapse.collapsed .uncollapse {
display: inherit;
}