norm/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'fix-favico-badge-chrome' into 'develop'

Browse source 
fix favico badge not working on chrome

See merge request pleroma/pleroma-fe!1391
This commit is contained in:
HJ 2021-09-07 16:17:31 +00:00
commit 1c53528433
1 changed files with 37 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/services/favicon_service/favicon_service.js
View file

@ -1,52 +1,58 @@
import { find } from 'lodash'
const createFaviconService = () => { const createFaviconService = () => {
let favimg, favcanvas, favcontext, favicon const favicons = []
const faviconWidth = 128 const faviconWidth = 128
const faviconHeight = 128 const faviconHeight = 128
const badgeRadius = 32 const badgeRadius = 32
const initFaviconService = () => { const initFaviconService = () => {
const nodes = document.getElementsByTagName('link') const nodes = document.querySelectorAll('link[rel="icon"]')
favicon = find(nodes, node => node.rel === 'icon') nodes.forEach(favicon => {
if (favicon) { if (favicon) {
favcanvas = document.createElement('canvas') const favcanvas = document.createElement('canvas')
favcanvas.width = faviconWidth favcanvas.width = faviconWidth
favcanvas.height = faviconHeight favcanvas.height = faviconHeight
favimg = new Image() const favimg = new Image()
favimg.src = favicon.href favimg.crossOrigin = 'anonymous'
favcontext = favcanvas.getContext('2d') favimg.src = favicon.href
} const favcontext = favcanvas.getContext('2d')
favicons.push({ favcanvas, favimg, favcontext, favicon })
}
})
} }
const isImageLoaded = (img) => img.complete && img.naturalHeight !== 0 const isImageLoaded = (img) => img.complete && img.naturalHeight !== 0
const clearFaviconBadge = () => { const clearFaviconBadge = () => {
if (!favimg || !favcontext || !favicon) return if (favicons.length === 0) return
favicons.forEach(({ favimg, favcanvas, favcontext, favicon }) => {
if (!favimg || !favcontext || !favicon) return
favcontext.clearRect(0, 0, faviconWidth, faviconHeight) favcontext.clearRect(0, 0, faviconWidth, faviconHeight)
if (isImageLoaded(favimg)) { if (isImageLoaded(favimg)) {
favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) 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')
})
} }
const drawFaviconBadge = () => { const drawFaviconBadge = () => {
if (!favimg || !favcontext || !favcontext) return if (favicons.length === 0) return
clearFaviconBadge() clearFaviconBadge()
favicons.forEach(({ favimg, favcanvas, favcontext, favicon }) => {
if (!favimg || !favcontext || !favcontext) return
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)'}`
if (isImageLoaded(favimg)) { if (isImageLoaded(favimg)) {
favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) 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)
favcontext.fill() favcontext.fill()
favicon.href = favcanvas.toDataURL('image/png') favicon.href = favcanvas.toDataURL('image/png')
})
} }
return { return {