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. * Show a twenty-four-hour clock instead of a twelve-hour clock with AM/PM.
*/ */
twentyFourHourClock: true, twentyFourHourClock: true,
/**
* File extension for icon images
*/
iconExtension: 'png'
}; };
// Get invertedColors preference from cookies // Get invertedColors preference from cookies
@ -386,13 +391,25 @@ class Help {
const fgcolor = invertValue ? getComputedStyle(document.documentElement).getPropertyValue('--background') const fgcolor = invertValue ? getComputedStyle(document.documentElement).getPropertyValue('--background')
: getComputedStyle(document.documentElement).getPropertyValue('--foreground'); : getComputedStyle(document.documentElement).getPropertyValue('--foreground');
const commandListWithIcons = this._commands 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) { if (category === currentCategory) {
return ` return `
<style>
.command-key-${i} {
color: ${fgcolor};
background-color:${bgcolor};
border: 4px solid ${fgcolor};
}
</style>
<li class="command"> <li class="command">
<a href="${url}" target="${this._newTab ? '_blank' : '_self'}"> <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> <span class="command-name">${name}</span>
</a> </a>
</li> </li>
@ -412,10 +429,9 @@ class Help {
color: ${fgcolor}; color: ${fgcolor};
background-color:${bgcolor}; background-color:${bgcolor};
border: 4px solid ${fgcolor}; border: 4px solid ${fgcolor};
background-color: ${bgcolor};
} }
</style> </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> <span class="command-name command-name-${i}">${name}</span>
</a> </a>
</li> </li>