New: Added favicon support (fixes #306) (#396)

Author: oliverfoster

example.json

@@ -1,6 +1,13 @@
 // Available properties
 // --------------------------------------------------
 
+// course.json
+"_vanilla": {
+    "_favIcon": {
+        "_src": ""
+    }
+},
+
 // contentObjects.json
 "_vanilla": {
     "_backgroundImage": {

js/theme.js

@@ -16,6 +16,17 @@ class Theme extends Backbone.Controller {
 
   onDataReady() {
     $('html').addClass(Adapt.course.get('_courseStyle'));
+    this.addFavIcon();
+  }
+
+  addFavIcon() {
+    const theme = Adapt.course.get('_vanilla');
+    if (!theme._favIcon._src) return;
+    const $linkStandard = $(`<link rel="icon" href="${theme._favIcon._src}" size="192x192" />`);
+    const $linkApple = $(`<link rel="apple-touch-icon" href="${theme._favIcon._src}" />`);
+    $('head')
+      .append($linkStandard)
+      .append($linkApple);
   }
 
   onPostRender(view) {

properties.schema

@@ -698,7 +698,30 @@
           "type": "object"
         },
         "course": {
-          "type": "object"
+          "type": "object",
+          "properties": {
+            "_vanilla": {
+              "type": "object",
+              "required": false,
+              "properties": {
+                "_favIcon": {
+                  "type": "object",
+                  "required": false,
+                  "legend": "FavIcon",
+                  "properties": {
+                    "_src": {
+                      "type": "string",
+                      "required": false,
+                      "default": "",
+                      "inputType": "Asset:image",
+                      "validators": [],
+                      "help": "Select a favicon to improve user experience and enforce brand consistency. This will be displayed in places like your browser's address bar, page tabs and bookmarks menu. Usually, a favicon is 16 x 16 pixels in size and stored in the GIF, PNG, or ICO file format."
+                    }
+                  }
+                }
+              }
+            }
+          }
         },
         "contentobject": {
           "type": "object",

schema/course.schema.json

@@ -0,0 +1,39 @@
+{
+  "$anchor": "vanilla-course",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "$patch": {
+    "source": {
+      "$ref": "course"
+    },
+    "with": {
+      "properties": {
+        "_vanilla": {
+          "type": "object",
+          "title": "Theme",
+          "default": {},
+          "properties": {
+            "_favIcon": {
+              "type": "object",
+              "default": {},
+              "title": "Favicon",
+              "properties": {
+                "_src": {
+                  "type": "string",
+                  "isObjectId": true,
+                  "title": "Image",
+                  "description": "Select a favicon to improve user experience and enforce brand consistency. This will be displayed in places like your browser's address bar, page tabs and bookmarks menu. Usually, a favicon is 16 x 16 pixels in size and stored in the GIF, PNG, or ICO file format.",
+                  "default": "",
+                  "_backboneForms": {
+                    "type": "Asset",
+                    "media": "image"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}