Shiloh/startpage
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add SVG support and add image circle on JS

Browse Source
This commit is contained in:
Özenç Bilgili 2020-07-08 23:40:09 +03:00
parent 2174b99d03
commit e732b3eccf
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/script.js
View File

@ -211,6 +211,11 @@ let CONFIG = {
* Show a twenty-four-hour clock instead of a twelve-hour clock with AM/PM.
*/
twentyFourHourClock: true,
/**
* File extension for icon images
*/
iconExtension: 'png'
};
// Get invertedColors preference from cookies
@ -386,13 +391,25 @@ class Help {
const fgcolor = invertValue ? getComputedStyle(document.documentElement).getPropertyValue('--background')
: getComputedStyle(document.documentElement).getPropertyValue('--foreground');
const commandListWithIcons = this._commands
.map(({ category, name, key, url, icon }) => {
.map(({ category, name, key, url, icon }, i) => {
const iconEl = CONFIG.iconExtension !== 'svg'
? `<img src='assets/icons/${icon}.png' height = 28px center style="filter: invert(${invertValue});">`
: `<img src='assets/icons/${icon}.svg' onload="SVGInject(this)" height = 28px center style="fill: ${fgcolor};">`
if (category === currentCategory) {
return `
<style>
.command-key-${i} {
color: ${fgcolor};
background-color:${bgcolor};
border: 4px solid ${fgcolor};
}
</style>
<li class="command">
<a href="${url}" target="${this._newTab ? '_blank' : '_self'}">
<span class="command-key"><img src='assets/icons/${icon}.png' height = 36px center style="filter: invert(${invertValue});"></span>
<span class="command-key command-key-${i}">${iconEl}</span>
<span class="command-name">${name}</span>
</a>
</li>
@ -412,10 +429,9 @@ class Help {
color: ${fgcolor};
background-color:${bgcolor};
border: 4px solid ${fgcolor};
background-color: ${bgcolor};
}
</style>
<span class="command-key command-key-${i}" style="">${key}</span>
<span class="command-key command-key-${i}">${key}</span>
<span class="command-name command-name-${i}">${name}</span>
</a>
</li>