From 9d576b7c1ad7bd0f44781ab392dcb59382a011e8 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Fri, 16 Feb 2018 08:59:44 -0800 Subject: [PATCH] add dynamic favicon --- assets/favicon-alert.png | Bin 0 -> 893 bytes routes/_components/NavItem.html | 16 ++++------------ routes/_store/instanceComputations.js | 19 +++++++++++++++++++ routes/_store/notificationObservers.js | 17 +++++++++++++++++ routes/_store/observers.js | 2 ++ routes/_utils/setFavicon.js | 14 ++++++++++++++ routes/_utils/themeEngine.js | 2 +- templates/2xx.html | 6 +++--- 8 files changed, 60 insertions(+), 16 deletions(-) create mode 100644 assets/favicon-alert.png create mode 100644 routes/_store/notificationObservers.js create mode 100644 routes/_utils/setFavicon.js diff --git a/assets/favicon-alert.png b/assets/favicon-alert.png new file mode 100644 index 0000000000000000000000000000000000000000..b80dc3a0b54d44adecee293403e56e89311aaa10 GIT binary patch literal 893 zcmV-@1A_dCP)lEU0}4q* zK~z}7#n(+p6k!+#@c+#2%+7wzuH$}~f{>aYDWyx1_<^o{Q0c`)iP*|Rl9C!|9*Q7D zA}I7w7Y`BSAq?`+q0^EQcqkz(LNQawgDbTw+A8j@v(9#?R&96P-5HmCPQ&oNyuWwm zc^{sau(mA(5N8x-(I_oaV*IlQUl%qZCFJo=VAUiZb(+A?BE zEmaPN{xeO*kT7%Gd*E0y@qoSJ!3`7Yt2N03&~gGDO&oe`9Asn?0RQ4#nFf8WMo{u3 z0RW)1NQpbmhU5VNpvt1c)moi&08J615m(N$D9Kew1JqS$L<0zdK+ok=FbYB(K+OI^dR#1E-TE1YpUJ@&#;XS(G19 zAyHxGzhj;Hsj3p7Q*=$u2v_#h6= zy#wq10XJ*Lx11`BSG2-u%z<;oA0F^w$}4GS-bPD{$YnH_`Ke751SDd5AImtanto2*AMjWPQv9?zvSfd+wC!pQ@@d=UuWO{l`<5tw>P=MDLz{u#Dv|G;U(=mJLtsvhPYoL%g={;Xec7WPf~bn9e_ihz1^~fyPRei z<+$HwL}nT#3bHjb15bZH{B}D8hXX=dIwnlzc#(T;*WwWY0Km`$8c%A`c#0L>lC66L zytKRV>g`&vScNpL(XQu|9I)guIGm+`Q7;3d*c;>Z32?4%VQSuo$yqP>DCOlh=uyzq To-73i00000NkvXXu0mjf+>DQA literal 0 HcmV?d00001 diff --git a/routes/_components/NavItem.html b/routes/_components/NavItem.html index d5bde53d..081b6e5c 100644 --- a/routes/_components/NavItem.html +++ b/routes/_components/NavItem.html @@ -7,9 +7,9 @@ - {{#if numberOfNotifications}} + {{#if $hasNotifications}} {{/if}} @@ -115,23 +115,15 @@ export default { store: () => store, computed: { - ariaLabel: (page, name, label, numberOfNotifications) => { + ariaLabel: (page, name, label, $numberOfNotifications) => { let res = label if (page === name) { res += ' (current page)' } if (name === 'notifications') { - res += ` (${numberOfNotifications})` + res += ` (${$numberOfNotifications})` } return res - }, - numberOfNotifications: ($timelines, $currentInstance, $currentTimeline) => { - return $currentTimeline !== 'notifications' && - $timelines && - $timelines[$currentInstance] && - $timelines[$currentInstance].notifications && - $timelines[$currentInstance].notifications.itemIdsToAdd && - $timelines[$currentInstance].notifications.itemIdsToAdd.length } } } diff --git a/routes/_store/instanceComputations.js b/routes/_store/instanceComputations.js index f347936c..8d573822 100644 --- a/routes/_store/instanceComputations.js +++ b/routes/_store/instanceComputations.js @@ -76,4 +76,23 @@ export function instanceComputations (store) { 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 + } + ) } diff --git a/routes/_store/notificationObservers.js b/routes/_store/notificationObservers.js new file mode 100644 index 00000000..87bf7621 --- /dev/null +++ b/routes/_store/notificationObservers.js @@ -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') + } + }) + }) +} \ No newline at end of file diff --git a/routes/_store/observers.js b/routes/_store/observers.js index 228b5d66..70b86ccd 100644 --- a/routes/_store/observers.js +++ b/routes/_store/observers.js @@ -1,7 +1,9 @@ import { instanceObservers } from './instanceObservers' import { timelineObservers } from './timelineObservers' +import { notificationObservers } from './notificationObservers' export function observers (store) { instanceObservers(store) timelineObservers(store) + notificationObservers(store) } diff --git a/routes/_utils/setFavicon.js b/routes/_utils/setFavicon.js new file mode 100644 index 00000000..186b630b --- /dev/null +++ b/routes/_utils/setFavicon.js @@ -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) +} \ No newline at end of file diff --git a/routes/_utils/themeEngine.js b/routes/_utils/themeEngine.js index 42e3106f..65595dc5 100644 --- a/routes/_utils/themeEngine.js +++ b/routes/_utils/themeEngine.js @@ -1,6 +1,6 @@ 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) { let clazzList = document.body.classList diff --git a/templates/2xx.html b/templates/2xx.html index 92c3b165..d53d8cb1 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -3,10 +3,10 @@ - + - +