1
0
mirror of https://codeberg.org/nobody/LocalCDN.git synced 2025-02-02 12:27:27 +01:00

Improved button for "show more injections"

This commit is contained in:
nobody 2020-05-29 08:19:07 +02:00
parent 33ca848b74
commit a5e86ab045
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
3 changed files with 42 additions and 21 deletions

View File

@ -29,11 +29,12 @@ header {
} }
.panel:not(:last-child) { .panel:not(:last-child) {
border-bottom: 1px solid #d8d8d8; padding: 10px 8px 0px 8px;
} }
.subpanel { .subpanel {
overflow: hidden; overflow: hidden;
padding-bottom: 10px;
} }
footer { footer {
@ -41,6 +42,16 @@ footer {
padding: 8px; padding: 8px;
} }
#more-injections-section {
padding: 10px 8px;
font-weight: bold;
border-bottom: 1px solid #d8d8d8;
}
/* #more-injections-section > p {
padding: 0px;
} */
/** /**
* Fonts * Fonts
*/ */
@ -117,6 +128,7 @@ footer {
.sublist:last-child { .sublist:last-child {
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
margin-bottom: 0px;
} }
.sublist-item { .sublist-item {
@ -130,11 +142,13 @@ footer {
border-bottom: none; border-bottom: none;
} }
#get-stats-btn { #get-more-injections-btn {
cursor: pointer; cursor: pointer;
background-color: #f0f0f0;
color: #737373;
} }
#get-stats-btn:hover { #get-more-injections-btn:hover {
color: #a3a3a3; color: #a3a3a3;
text-decoration: underline; text-decoration: underline;
} }

View File

@ -67,6 +67,8 @@
</div> </div>
<div id="more-injections-section"></div>
<div id="extension-context" class="panel"> <div id="extension-context" class="panel">
<div id="injection-counter" class="counter">0</div> <div id="injection-counter" class="counter">0</div>

View File

@ -18,6 +18,7 @@
* Popup * Popup
*/ */
let counterFrameworks = 0;
var popup = {}; var popup = {};
/** /**
@ -284,13 +285,14 @@ popup._createInjectionOverviewElement = function (groupedInjections) {
let injectionGroupHeaderElement, injectionGroupElement, cdn; let injectionGroupHeaderElement, injectionGroupElement, cdn;
cdn = groupedInjections[source]; cdn = groupedInjections[source];
if (counterFrameworks < 3) {
injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn); injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn);
injectionGroupElement = popup._createInjectionGroupElement(source, cdn); injectionGroupElement = popup._createInjectionGroupElement(source, cdn);
injectionOverviewElement.appendChild(injectionGroupHeaderElement); injectionOverviewElement.appendChild(injectionGroupHeaderElement);
injectionOverviewElement.appendChild(injectionGroupElement); injectionOverviewElement.appendChild(injectionGroupElement);
} }
}
return injectionOverviewElement; return injectionOverviewElement;
}; };
@ -330,49 +332,51 @@ popup._createInjectionGroupElement = function (source, cdn) {
injectionGroupElement = document.createElement('ul'); injectionGroupElement = document.createElement('ul');
injectionGroupElement.setAttribute('class', 'sublist'); injectionGroupElement.setAttribute('class', 'sublist');
count = 0;
oversized = false; oversized = false;
for (let injection of filtered) { for (let injection of filtered) {
if(count < 3){ if(counterFrameworks < 3){
let injectionElement = popup._createInjectionElement(injection); let injectionElement = popup._createInjectionElement(injection);
injectionGroupElement.appendChild(injectionElement); injectionGroupElement.appendChild(injectionElement);
} else { } else {
oversized = true; oversized = true;
} }
count++; counterFrameworks++;
} }
if (oversized) { if (oversized) {
let injectionElement = popup._createInjectionElement(filtered, count-3, true); let injectionElement = popup._createInjectionElement(filtered, true);
injectionGroupElement.appendChild(injectionElement); let moreInjectionsSection = document.getElementById('more-injections-section');
moreInjectionsSection.appendChild(injectionElement);
} }
count = 0;
return injectionGroupElement; return injectionGroupElement;
}; };
popup._createInjectionElement = function (injection, counter = 0, oversized = false) { popup._createInjectionElement = function (injection, oversized = false) {
let injectionElement, filename, name, nameTextNode, noteElement, noteTextNode; let injectionElement, filename, name, nameTextNode, noteElement, noteTextNode;
injectionElement = document.createElement('li');
injectionElement.setAttribute('class', 'sublist-item');
if(oversized) { if(oversized) {
let lastElement = document.createElement('p');
let moreInjections = document.createElement('span'); let moreInjections = document.createElement('span');
nameTextNode = document.createTextNode(`... and ${counter} more`); nameTextNode = document.createTextNode(`... and more`);
moreInjections.setAttribute('id', 'get-stats-btn'); moreInjections.setAttribute('id', 'get-more-injections-btn');
moreInjections.addEventListener('mouseup', function() { moreInjections.addEventListener('mouseup', function() {
popup._onMoreInjectionsButton(); popup._onMoreInjectionsButton();
}, false); }, false);
moreInjections.appendChild(nameTextNode); moreInjections.appendChild(nameTextNode);
injectionElement.appendChild(moreInjections); lastElement.appendChild(moreInjections);
return injectionElement; return lastElement;
} }
injectionElement = document.createElement('li');
injectionElement.setAttribute('class', 'sublist-item');
filename = helpers.extractFilenameFromPath(injection.path); filename = helpers.extractFilenameFromPath(injection.path);
// If bundle empty, use filename // If bundle empty, use filename
@ -454,6 +458,7 @@ popup._onOptionsButtonClicked = function () {
}; };
popup._onDonationButtonClicked = function () { popup._onDonationButtonClicked = function () {
if (event.button === 0 || event.button === 1) { if (event.button === 0 || event.button === 1) {
chrome.tabs.create({ chrome.tabs.create({