moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change favicon dimensions for high res, add handling when favicon isn't available

This commit is contained in:
Shpuld Shpuldson 2020-11-03 11:55:29 +02:00
parent 19fd1d4a1e
commit 0206b2bcc5
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/services/favicon_service/favicon_service.js
View File

@ -2,9 +2,9 @@ import { find } from 'lodash'
const createFaviconService = () => { const createFaviconService = () => {
let favimg, favcanvas, favcontext, favicon let favimg, favcanvas, favcontext, favicon
const faviconWidth = 48 const faviconWidth = 128
const faviconHeight = 48 const faviconHeight = 128
const badgeRadius = 14 const badgeRadius = 32
const initFaviconService = () => { const initFaviconService = () => {
const nodes = document.getElementsByTagName('link') const nodes = document.getElementsByTagName('link')
@ -19,11 +19,15 @@ const createFaviconService = () => {
} }
} }
const isImageLoaded = (img) => img.complete && img.naturalHeight !== 0
const clearFaviconBadge = () => { const clearFaviconBadge = () => {
if (!favimg || !favcontext || !favicon) return if (!favimg || !favcontext || !favicon) return
favcontext.clearRect(0, 0, faviconWidth, faviconHeight) favcontext.clearRect(0, 0, faviconWidth, faviconHeight)
favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) if (isImageLoaded(favimg)) {
favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
}
favicon.href = favcanvas.toDataURL('image/png') favicon.href = favcanvas.toDataURL('image/png')
} }
@ -35,7 +39,9 @@ const createFaviconService = () => {
const style = getComputedStyle(document.body) const style = getComputedStyle(document.body)
const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}` const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}`
favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) if (isImageLoaded(favimg)) {
favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
}
favcontext.fillStyle = badgeColor favcontext.fillStyle = badgeColor
favcontext.beginPath() favcontext.beginPath()
favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false) favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)