cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add dynamic favicon

This commit is contained in:
Nolan Lawson 2018-02-16 08:59:44 -08:00
parent f45d1d53fb
commit 9d576b7c1a
8 changed files with 60 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/favicon-alert.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 893 B

16
routes/_components/NavItem.html
View File

@ -7,9 +7,9 @@
<svg> <svg>
<use xlink:href="{{svg}}" /> <use xlink:href="{{svg}}" />
</svg> </svg>
{{#if numberOfNotifications}} {{#if $hasNotifications}}
<span class="nav-link-notifications" aria-hidden="true"> <span class="nav-link-notifications" aria-hidden="true">
{{numberOfNotifications}} {{$numberOfNotifications}}
</span> </span>
{{/if}} {{/if}}
</div> </div>
@ -115,23 +115,15 @@
export default { export default {
store: () => store, store: () => store,
computed: { computed: {
ariaLabel: (page, name, label, numberOfNotifications) => { ariaLabel: (page, name, label, $numberOfNotifications) => {
let res = label let res = label
if (page === name) { if (page === name) {
res += ' (current page)' res += ' (current page)'
} }
if (name === 'notifications') { if (name === 'notifications') {
res += ` (${numberOfNotifications})` res += ` (${$numberOfNotifications})`
} }
return res return res
},
numberOfNotifications: ($timelines, $currentInstance, $currentTimeline) => {
return $currentTimeline !== 'notifications' &&
$timelines &&
$timelines[$currentInstance] &&
$timelines[$currentInstance].notifications &&
$timelines[$currentInstance].notifications.itemIdsToAdd &&
$timelines[$currentInstance].notifications.itemIdsToAdd.length
} }
} }
} }

19
routes/_store/instanceComputations.js
View File

@ -76,4 +76,23 @@ export function instanceComputations (store) {
return list ? list.title : '' return list ? list.title : ''
} }
) )
store.compute('numberOfNotifications',
['timelines', 'currentInstance', 'currentTimeline'],
(timelines, currentInstance, currentTimeline) => {
return currentTimeline !== 'notifications' &&
timelines &&
timelines[currentInstance] &&
timelines[currentInstance].notifications &&
timelines[currentInstance].notifications.itemIdsToAdd &&
timelines[currentInstance].notifications.itemIdsToAdd.length
}
)
store.compute('hasNotifications',
['numberOfNotifications'],
(numberOfNotifications) => {
return !!numberOfNotifications
}
)
} }

17
routes/_store/notificationObservers.js Normal file
View File

@ -0,0 +1,17 @@
import { setFavicon } from '../_utils/setFavicon'
import { scheduleIdleTask } from '../_utils/scheduleIdleTask'
export function notificationObservers (store) {
store.observe('hasNotifications', hasNotifications => {
if (!process.browser) {
return
}
scheduleIdleTask(() => {
if (hasNotifications) {
setFavicon('/favicon-alert.png')
} else {
setFavicon('/favicon.png')
}
})
})
}

2
routes/_store/observers.js
View File

@ -1,7 +1,9 @@
import { instanceObservers } from './instanceObservers' import { instanceObservers } from './instanceObservers'
import { timelineObservers } from './timelineObservers' import { timelineObservers } from './timelineObservers'
import { notificationObservers } from './notificationObservers'
export function observers (store) { export function observers (store) {
instanceObservers(store) instanceObservers(store)
timelineObservers(store) timelineObservers(store)
notificationObservers(store)
} }

14
routes/_utils/setFavicon.js Normal file
View File

@ -0,0 +1,14 @@
// borrowed from https://github.com/HenrikJoreteg/favicon-setter
export function setFavicon (href) {
let faviconId = 'theFavicon'
let link = document.createElement('link')
let oldLink = document.getElementById(faviconId)
link.id = faviconId
link.rel = 'shortcut icon'
link.type = 'image/png'
link.href = href
if (oldLink) {
document.head.removeChild(oldLink)
}
document.head.appendChild(link)
}

2
routes/_utils/themeEngine.js
View File

@ -1,6 +1,6 @@
import { loadCSS } from 'fg-loadcss' import { loadCSS } from 'fg-loadcss'
let meta = process.browser && document.querySelector('meta[name="theme-color"]') let meta = process.browser && document.getElementById('theThemeColor')
export function switchToTheme (themeName) { export function switchToTheme (themeName) {
let clazzList = document.body.classList let clazzList = document.body.classList

6
templates/2xx.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name='theme-color' content='#4169e1'> <meta id='theThemeColor' name='theme-color' content='#4169e1'>
<link rel='manifest' href='/manifest.json'> <link rel='manifest' href='/manifest.json'>
<link rel='icon' type='image/png' href='/favicon.png'> <link id='theFavicon' rel='icon' type='image/png' href='/favicon.png'>
<style> <style>
/* auto-generated w/ build-sass.js */ /* auto-generated w/ build-sass.js */
@ -56,7 +56,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
link.href = `/theme-${theme}.css` link.href = `/theme-${theme}.css`
document.head.appendChild(link) document.head.appendChild(link)
if (window.__themeColors[theme]) { if (window.__themeColors[theme]) {
document.querySelector('meta[name="theme-color"]').content = window.__themeColors[theme] document.getElementById('theThemeColor').content = window.__themeColors[theme]
} }
} }
} }