Set favicon to the icon of the currently shown docs

Author: jmerle

assets/javascripts/lib/favicon.coffee

@@ -0,0 +1,53 @@
+defaultUrl = null
+currentSlug = null
+
+imageCache = {}
+urlCache = {}
+
+withImage = (url, action) ->
+  if imageCache[url]
+    action(imageCache[url])
+  else
+    img = new Image()
+    img.src = url
+    img.onload = () =>
+      imageCache[url] = img
+      action(img)
+
+@setFaviconForDoc = (doc) ->
+  return if currentSlug == doc.slug
+
+  favicon = $('link[rel="icon"]')
+
+  if urlCache[doc.slug]
+    favicon.href = urlCache[doc.slug]
+    currentSlug = doc.slug
+    return
+
+  styles = window.getComputedStyle($("._icon-#{doc.slug}"), ':before')
+
+  bgUrl = styles['background-image'].slice(5, -2)
+  bgSize = if bgUrl.includes('@2x') then 32 else 16
+  bgX = parseInt(styles['background-position-x'].slice(0, -2))
+  bgY = parseInt(styles['background-position-y'].slice(0, -2))
+
+  withImage(bgUrl, (img) ->
+    canvas = document.createElement('canvas')
+
+    canvas.width = bgSize
+    canvas.height = bgSize
+    canvas.getContext('2d').drawImage(img, bgX, bgY)
+
+    if defaultUrl == null
+      defaultUrl = favicon.href
+
+    urlCache[doc.slug] = canvas.toDataURL()
+    favicon.href = urlCache[doc.slug]
+
+    currentSlug = doc.slug
+  )
+
+@resetFavicon = () ->
+  if defaultUrl != null and currentSlug != null
+    $('link[rel="icon"]').href = defaultUrl
+    currentSlug = null

assets/javascripts/views/content/content.coffee

@@ -153,6 +153,9 @@ class app.views.Content extends app.View
     return
 
   afterRoute: (route, context) =>
+    if route != 'entry' and route != 'type'
+      resetFavicon()
+
     switch route
       when 'root'
         @show @rootPage

assets/javascripts/views/content/entry_page.coffee

@@ -40,6 +40,7 @@ class app.views.EntryPage extends app.View
     if app.disabledDocs.findBy 'slug', @entry.doc.slug
       @hiddenView = new app.views.HiddenPage @el, @entry
 
+    setFaviconForDoc(@entry.doc)
     @delay @polyfillMathML
     @trigger 'loaded'
     return

assets/javascripts/views/content/type_page.coffee

@@ -9,6 +9,7 @@ class app.views.TypePage extends app.View
 
   render: (@type) ->
     @html @tmpl('typePage', @type)
+    setFaviconForDoc(@type.doc)
     return
 
   getTitle: ->

assets/javascripts/views/sidebar/doc_list.coffee

@@ -94,8 +94,6 @@ class app.views.DocList extends app.View
     $.stopEvent(event)
     doc = app.docs.findBy 'slug', event.target.getAttribute('data-slug')
 
-    @setFaviconForDoc(doc)
-
     if doc and not @lists[doc.slug]
       @lists[doc.slug] = if doc.types.isEmpty()
         new app.views.EntryList doc.entries.all()
@@ -113,29 +111,6 @@ class app.views.DocList extends app.View
       delete @lists[doc.slug]
     return
 
-  setFaviconForDoc: (doc) ->
-    link = $("a._list-item[data-slug='#{doc.slug}']")
-    styles = window.getComputedStyle(link, ':before')
-
-    bgUrl = styles['background-image'].slice(5, -2)
-    bgSize = if bgUrl.includes('@2x') then 32 else 16
-    bgPositions = styles['background-position'].split(' ')
-    bgX = parseInt(bgPositions[0].slice(0, -2))
-    bgY = parseInt(bgPositions[1].slice(0, -2))
-
-    img = new Image()
-    img.src = bgUrl
-    img.onload = () =>
-      canvas = document.createElement('canvas')
-
-      canvas.width = bgSize
-      canvas.height = bgSize
-      canvas.getContext('2d').drawImage(img, bgX, bgY)
-
-      $('link[rel="icon"]').href = canvas.toDataURL()
-      return
-    return
-
   select: (model) ->
     @listSelect.selectByHref model?.fullPath()
     return