Implemented: List of CDNs and Frameworks (#93)

This commit is contained in:
nobody 2020-09-04 20:53:36 +02:00
parent 8d45f24fa8
commit ae8d753360
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
3 changed files with 67 additions and 21 deletions

View File

@ -261,8 +261,13 @@ body {
display: none;
}
#unsupported-frameworks {
padding-left: 15px;
#generated-list {
margin-top: 15px;
}
.info > p {
cursor: pointer;
padding-left: 25px;
}
.ruleset-generator {

View File

@ -238,15 +238,16 @@
<div id="info-tab" class="tab-content">
<div class="option-group">
<section class="option">
<ul class="option-links">
<li>Supported CDNs: <span id="supported-cdns"></span></li>
<li>Supported Frameworks: <span id="supported-frameworks"></span></li>
<ul id="unsupported-frameworks">
<li>Font Awesome are not supported by your browser</li>
<li>Google Material Icons are not supported by your browser</li>
</ul>
<section class="option info">
<div>
<input type="button" id="cdn"/>
<input type="button" id="framework"/>
</div>
<ul id="unsupported-frameworks">
<li>Font Awesome are not supported by your browser</li>
<li>Google Material Icons are not supported by your browser</li>
</ul>
<textarea rows="12" cols="15" id="generated-list" readonly></textarea>
</section>
</div>
<div class="option-group">

View File

@ -271,25 +271,63 @@ options._parseDomainWhitelist = function (domainWhitelist) {
};
options._renderInfoPanel = function () {
let supportedFrameworks, supportedVersions, browserSpecific;
let unsupportedFrameworks, btnCDNs, btnFrameworks;
supportedFrameworks = {};
supportedVersions = {};
unsupportedFrameworks = 0;
options._listOfFrameworks = {};
// Chromium based browser does not support Google Material Icons and Font Awesome
browserSpecific = BrowserType.CHROMIUM ? -1 : 1;
btnCDNs = document.getElementById('cdn');
btnCDNs.value = 'CDNs: ';
for (const val of Object.values(resources)) {
const res = val['path'].split('/');
supportedFrameworks[res[1]] = true;
}
document.getElementById('supported-cdns').textContent = Object.keys(mappings).length - 3;
document.getElementById('supported-frameworks').textContent = Object.keys(supportedFrameworks).length + browserSpecific;
btnFrameworks = document.getElementById('framework');
btnFrameworks.value = 'Frameworks: ';
Object.values(Object.values(resources)).forEach((element) => {
let path = Object.values(element)[0];
path = path.split('/');
options._listOfFrameworks[path[1]] = true;
});
if (BrowserType.CHROMIUM) {
// Chromium based browser does not support Google Material Icons and Font Awesome
document.getElementById('unsupported-frameworks').style.display = 'block';
unsupportedFrameworks = 2;
}
options._createList('cdn');
btnFrameworks.addEventListener('click', options._btnCreateList);
btnCDNs.addEventListener('click', options._btnCreateList);
// Reduce CDNs by 3, because loli.net includes = cdn.css.net, cdnjs.loli.net, ajax.loli.net, fonts.loli.net
btnCDNs.value += Object.keys(mappings).length - 3;
btnFrameworks.value += Object.keys(options._listOfFrameworks).length - unsupportedFrameworks;
};
options._btnCreateList = function ({ target }) {
options._createList(target.id);
};
options._createList = function (type) {
let textArea, list;
textArea = document.getElementById('generated-list');
textArea.value = '';
if (type === 'cdn') {
list = Object.keys(mappings);
} else if (type === 'framework') {
list = Object.keys(options._listOfFrameworks);
} else {
return;
}
list.forEach((elem) => {
if (!(BrowserType.CHROMIUM && (elem === 'fontawesome' || elem === 'google-material-design-icons'))) {
textArea.value += elem + '\n';
}
});
};
/**
@ -414,6 +452,8 @@ options._updatesDomainLists = function (changes) {
*/
options._internalStatistics = false;
options._storageType = 'local';
options._listOfFrameworks = {};
options._listOfCDNs = {};
document.addEventListener('DOMContentLoaded', options._onDocumentLoaded);