Merge pull request #59 from accusitive/patch-1

Update README.md to the new Jellyfin link

Jellyfin.Plugin.SkinManager/Configuration/PluginConfiguration.cs

@@ -1,14 +1,18 @@
 using MediaBrowser.Model.Plugins;
+using System;
+using System.Collections.Generic;
 
 namespace Jellyfin.Plugin.SkinManager.Configuration
 {
     public class PluginConfiguration : BasePluginConfiguration
     {
-        public string selectedCss { get; set; }
+        public string selectedSkin { get; set; }
+        public string[] options { get; set; }
 
         public PluginConfiguration()
         {
-            selectedCss = "";
+            selectedSkin = "";
+            options = Array.Empty<String>();
         }
     }
 }

Jellyfin.Plugin.SkinManager/Jellyfin.Plugin.SkinManager.csproj

@@ -3,8 +3,8 @@
   <PropertyGroup>
     <TargetFramework>netstandard2.1</TargetFramework>
     <IsPackable>true</IsPackable>
-    <AssemblyVersion>1.4.0</AssemblyVersion>
-    <FileVersion>1.4.0</FileVersion>
+    <AssemblyVersion>2.0.1</AssemblyVersion>
+    <FileVersion>2.0.1</FileVersion>
     <Authors />
     <Company />
   </PropertyGroup>
@@ -16,6 +16,9 @@
   <ItemGroup>
     <None Remove="Configuration\configurationpage.html" />
     <EmbeddedResource Include="Configuration\configurationpage.html" />
+
+    <None Remove="Configuration\fontpicker.js" />
+    <EmbeddedResource Include="Configuration\fontpicker.js" />
   </ItemGroup>
 
   <ItemGroup>

Jellyfin.Plugin.SkinManager/Plugin.cs

@@ -34,6 +34,16 @@ namespace Jellyfin.Plugin.SkinManager
                 {
                     Name = "SkinManager",
                     EmbeddedResourcePath = GetType().Namespace + ".Configuration.configurationpage.html"
+                },
+                 new PluginPageInfo
+                {
+                    Name = "fontpicker.js",
+                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.fontpicker.js"
+                }, 
+                new PluginPageInfo
+                {
+                    Name = "fontpicker.css",
+                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.jquery.fontpicker.min.css"
                 }
             };
         }

README.md

@@ -1,5 +1,5 @@
 <h1 align="center">Jellyfin Skin Manager Plugin</h1>
-<h3 align="center">Part of the <a href="https://jellyfin.media">Jellyfin Project</a></h3>
+<h3 align="center">Part of the <a href="https://jellyfin.org">Jellyfin Project</a></h3>
 
 <p align="center">
 Jellyfin Skin Manager is a plugin that helps you to download and install skins;

install.bat

@@ -0,0 +1,10 @@
+@ECHO OFF
+@echo This will not work if you have installed jellyfin to a custom location
+set /p ask = Enter 'X' to continue or 'C' to cancel: 
+if "%ask%" neq "x" goto:eof
+
+    @echo starting install...
+
+    dotnet publish --configuration Release --output bin
+
+    move bin\Jellyfin.Plugin.SkinManager.dll C:\ProgramData\Jellyfin\Server\plugins\SkinManager

skins-2.0.json

@@ -5,7 +5,7 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
+	"description":"Default, stock, Jellyfin.",
         "css": ""
       }
     ]
@@ -16,7 +16,7 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
+	"description":"A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.",
         "css": "@import url(https://prayag17.github.io/JellyFlix/default.css);"
       }
     ]
@@ -27,33 +27,33 @@
     "versions": [
       {
         "name": "Default",
-        "description": "Default Skin",
-        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css);"
+        "description": "This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
       },
       {
-        "name": "Improve performance",
-        "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+        "name": "Sharp corners",
+        "description": "No rounded corners.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); :root {--rounding: 0px;}"
       },
       {
-        "name": "No rounded corners",
-        "description": "In fact, squares off every rounded corner JF ever had.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/sharp_style.css');"
+        "name": "Accent color - blue",
+        "description": "Uses the default blue color for accents.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
       },
       {
-        "name": "Accent color preset - blue",
-        "description": "Restores some of the default Jellyfin blue accenting",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
+        "name": "Accent color - purple",
+        "description": "Uses a purple shade, also suited for Jellyfin.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css');"
       },
       {
-        "name": "Accent color preset - purple",
-        "description": "Purple Accents",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css'); );"
+        "name": "Accent color - blue - sharp",
+        "description": "Uses the default blue color for accents. Sharp corners.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css'); :root {--rounding: 0px;}"
       },
       {
-        "name": "Restore bottom bar style episode progress",
-        "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
+        "name": "Accent color - purple - sharp",
+        "description": "Uses a purple shade, also suited for Jellyfin. Sharp corners.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css'); :root {--rounding: 0px;}"
       }
     ]
   },
@@ -63,20 +63,46 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
-        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css);"
+        "description": "This theme aims to be more colorful and minimalistic. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+      },
+      {
+        "name": "Sharp corners",
+        "description": "No rounded corners.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); :root {--rounding: 0px;}"
+      },
+      {
+        "name": "Accent color - blue",
+        "description": "Uses the default blue color for accents.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
+      },
+      {
+        "name": "Accent color - blue - sharp",
+        "description": "Uses the default blue color for accents. Sharp corners.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css'); :root {--rounding: 0px;}"
       }
     ]
   },
+  {
+    "name": "Novachromic",
+    "author": "EdgeMentality",
+    "versions":[
+          {
+            "name": "Default",
+            "description": "Novachromic is essentially Monochromic, but with another layer of overrides on top.",
+			"css" : "@import url('https://ctalvio.github.io/Novachromic/default_style.css');"          
+          }
+		]
+	},
   {
     "name": "JellySkin",
     "author": "prayagprajapati17",
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
+	"description":"A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
         "css": "@import url('https://prayag17.github.io/JellySkin/default.css');"
       }
     ]
   }
-]
+]

src/html/about.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Skin Manager-About</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="https://jellyfin.org/favicon.ico">
+</head>
+<body>
+  <div class="header" align="center">
+    <div class="innerHeader nav">
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager" class="link text"><li>See on Github</li></a>
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link text"><li>Request a skin</li></a>
+      <a href="https://prayag17.github.io/jellyfin-plugin-skin-manager/" class="link text"><li class="selected">About</li></a>
+      <a href="https://jellyfin.org" class="logo link"><li><img src="https://jellyfin.org/images/banner-dark.svg" style="size: 1em;height: 50px;max-width: 80%;float: right;z-index: 1;"></li></a>
+    </div>
+  </div>
+  <div class="body">
+    <div class="About">
+      <div class="inner">
+        <h1>About Skin Manager</h1>
+        <div class="description">
+          <p>
+            This plugin is used to create custom skins and also give you (the user) few great community Skins. You can add more skins by clicking on the "Request a Skin" button.
+          </p>
+        </div>
+      </div>
+      <div class="contributorsCont">
+        <fieldset>
+          <h3>Contributors</h3>
+          <p>The people who have helped in the development of this plugin are listed below</p>
+          <div class="cont">
+            <a href="https://github.com/danieladov" class="contributorsLink">
+              <div class="contibutorsNames" style="background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/29411250?s=400&v=4);">
+                <div class="top">
+                  <h3>Daniel Álvarez</h3>
+                </div>@danieladov
+                <p class="description">
+                  He is the creator of 3 Plugins for Jellyfin, namely- Merge Songs, Theme Music and Skin Manager
+                </p>
+              </div>
+            </a>
+            <a href="https://github.com/prayag17" class="contributorsLink">
+              <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars1.githubusercontent.com/u/55829513?s=460&u=3f232a3900ade07490ae8bdadd62ec5d0e9e4ecf&v=4);">
+                <div class="top">
+                  <h3>Prayag Prajapati</h3>
+                </div>@prayag17
+                <p class="description">
+                  He is the creator of 2 jellyfin Skins, namely- JellySkin and JellyFlix. He has helped in creating the "Custom" option in this plugin.
+                </p>
+              </div>
+            </a>
+            <a href="https://github.com/prayag17" class="contributorsLink">
+              <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/4365015?s=400&v=4);">
+                <div class="top">
+                  <h3>Casper Talvio</h3>
+                </div>@CTalvio
+                <p class="description">
+                  He is the creator of 2 jellyfin Skins namely- Monochromic and Kaleidochromic.
+                </p>
+              </div>
+            </a>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </body>
+  </html>

src/html/help.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Skin Manager-Help</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="https://jellyfin.org/favicon.ico">
+</head>
+<body>
+  <div class="header" align="center">
+    <div class="innerHeader nav">
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager" class="link text"><li>See on Github</li></a>
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link text"><li>Request a skin</li></a>
+      <a href="https://prayag17.github.io/jellyfin-plugin-skin-manager/src/html/about.html#" class="link text"><li>About</li></a>
+      <a href="https://jellyfin.org" class="logo link"><li><img src="https://jellyfin.org/images/banner-dark.svg" style="size: 1em;height: 50px;max-width: 80%;float: right;z-index: 1;"></li></a>
+    </div>
+  </div>
+  <div class="body" style="color: #3a3a3a !important;">
+    <div class="skinRequest">
+      <fieldset>
+        <h1>How To request a new Skin</h1>
+        <div class="internal">
+          <h3>Steps</h3>
+          <br>
+          <ul>
+            <li>Open this<a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link" style="color: #3a3a3a !important; text-decoration: underline;"> link </a>or click the "Request a Skin" option present in the header</li>
+            <li>Then Create a New Issue with title- <code>Skin Request:</code> Done!</li>
+          </ul>
+        </div>
+      </fieldset>
+      <fieldset>
+        <h1>How to enable bluring of background fo dialogs and episode previes for Firefox</h1>
+        <div class="internal">
+          <h3>Steps</h3>
+          <br>
+          <ul>
+            <li>go to <a href="about:config"> about:config </a>in firefox and click on "Accept the Risk and Continue".</li>
+            <li>Search for <code>layout.css.backdrop-filter.enabled</code> and change false to true.</li>
+            <li>Search for <code>gfx.webrender.all</code> and change it to true. Done!</li>
+          </ul>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</div>
+</body>
+</html>

src/html/skin__request.html

@@ -0,0 +1,30 @@
+<html>
+
+<head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>
+    <script src="../js/json__compile.js"></script>
+</head>
+
+<body>
+    <div>
+        <form>
+            <input type="text" id="name" name="name">
+            <input type="text" id="author" name="author">
+            <input type=" text " id="desc" name="desc">
+            <input type=" text " id="css" name="css">
+            <h2>Images</h2>
+            <input type=" text " id="login" name="login">
+            <input type=" text " id="home" name="home">
+            <input type=" text " id="lib" name="lib">
+            <input type=" text " id="title" name="title">
+            <h2>Categories</h2>
+            <input type="button" id="add" value="Add a foryour options categorie" onclick="add__option()">
+            <input type="button" id="no_op" value="Don't have any options/addons?" onclick="no__option()">
+            <div id="cat"></div>
+            <input type="hidden" value="1" id="total_chq">
+            <input type="button" onclick="createJSON()" value="save" />
+        </form>
+    </div>
+</body>
+
+</html>

src/html/style.css

@@ -0,0 +1,107 @@
+body{
+  margin: 0;
+  font-family: Arial;
+}
+.body {
+  margin: 2em;
+}
+.header {
+  height: 80px;
+  width: 100%;
+  background: #101010;
+  display: block;
+  top: 0;
+  position: sticky;
+}
+.innerHeader {
+  height: 100%;
+  margin: 0 1.5em;
+  display: block;
+}
+
+.nav a{
+  display: table;
+  height: 100%;
+  float: right;
+  padding: 0px 10px !important;
+}
+.nav a li {
+  vertical-align: middle;
+  display: table-cell;
+}
+fieldset {
+  border-radius: 15px;
+  background: #dadada;
+  border: none;
+  padding: 1em;
+  margin-top: 2em;
+}
+.link{
+  text-decoration: none;
+  color: white;
+}
+a.logo.link {
+  float: left;
+}
+.About {
+  margin: 2em;
+}
+.inner {
+  background: #c4c4c4;
+  padding: 1em;
+  border-radius: 15px;
+  color: #3a3a3a;
+}
+a {
+  text-decoration: none;
+  color: black;
+}
+.cont {
+  display: flex;
+}
+.contibutorsNames {
+  padding: 1em;
+  border-radius: 15px;
+  width: fit-content;
+  max-width: 10em;
+  min-width: 10em;
+  flex-wrap: wrap;
+  height: fit-content;
+  transition: all .2s;
+  max-height: 20em;
+  min-height: 15em;
+  background-size: cover !important;
+}
+.contibutorsNames:hover {
+  box-shadow: 0 3px 5px 0px #6e6e6e;
+  transform: translateY(-2px);
+}
+.contributorsLink {
+  color: #3a3a3a !important;
+}
+.text li {
+  color: #9a9a9a;
+  transition: color .25s, border .25s;
+  border-bottom: 5px solid rgba(0,0,0,0);
+}
+.text li:hover {
+  color: white !important;
+  border-bottom-color: #00a4dc !important;
+}
+.selected {
+  color: white !important;
+  border-bottom-color: #aa5cc3 !important;
+}
+img.userImg {
+  width: 50%;
+  border-radius: 15px;
+}
+code {
+  display: block !important;
+  width: fit-content;
+  background: #585858;
+  color: white;
+  padding: .5rem;
+  border-radius: 5.5px;
+  border: .5px solid #999999;
+}

src/js/FontPicker.js

@@ -0,0 +1,641 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.FontPicker = factory());
+}(this, (function () { 'use strict';
+
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+  this file except in compliance with the License. You may obtain a copy of the
+  License at http://www.apache.org/licenses/LICENSE-2.0
+
+  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+  MERCHANTABLITY OR NON-INFRINGEMENT.
+
+  See the Apache Version 2.0 License for specific language governing permissions
+  and limitations under the License.
+  ***************************************************************************** */
+
+  var __assign = function() {
+      __assign = Object.assign || function __assign(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign.apply(this, arguments);
+  };
+
+  function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  }
+
+  function __awaiter(thisArg, _arguments, P, generator) {
+      return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+          function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+          function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
+  }
+
+  function __generator(thisArg, body) {
+      var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+      return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+      function verb(n) { return function (v) { return step([n, v]); }; }
+      function step(op) {
+          if (f) throw new TypeError("Generator is already executing.");
+          while (_) try {
+              if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+              if (y = 0, t) op = [op[0] & 2, t.value];
+              switch (op[0]) {
+                  case 0: case 1: t = op; break;
+                  case 4: _.label++; return { value: op[1], done: false };
+                  case 5: _.label++; y = op[1]; op = [0]; continue;
+                  case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                  default:
+                      if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                      if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                      if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                      if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                      if (t[2]) _.ops.pop();
+                      _.trys.pop(); continue;
+              }
+              op = body.call(thisArg, _);
+          } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+          if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+      }
+  }
+
+  function styleInject(css, ref) {
+    if ( ref === void 0 ) ref = {};
+    var insertAt = ref.insertAt;
+
+    if (!css || typeof document === 'undefined') { return; }
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
+
+  var css = "@charset \"UTF-8\";\ndiv[id^=font-picker] {\n  position: relative;\n  display: inline-block;\n  width: 200px;\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n}\ndiv[id^=font-picker] * {\n  box-sizing: border-box;\n}\ndiv[id^=font-picker] p {\n  margin: 0;\n  padding: 0;\n}\ndiv[id^=font-picker] button {\n  color: inherit;\n  font-size: inherit;\n  background: none;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\ndiv[id^=font-picker] .dropdown-button {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 35px;\n  padding: 0 10px;\n  background: #cbcbcb;\n}\ndiv[id^=font-picker] .dropdown-button:hover, div[id^=font-picker] .dropdown-button:focus {\n  background: #bebebe;\n}\ndiv[id^=font-picker] .dropdown-button .dropdown-font-name {\n  overflow: hidden;\n  white-space: nowrap;\n}\ndiv[id^=font-picker] .dropdown-icon {\n  margin-left: 10px;\n}\n@-webkit-keyframes spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\ndiv[id^=font-picker] .dropdown-icon.loading::before {\n  display: block;\n  width: 10px;\n  height: 10px;\n  border: 2px solid #b2b2b2;\n  border-top-color: #000000;\n  border-radius: 50%;\n  -webkit-animation: spinner 0.6s linear infinite;\n          animation: spinner 0.6s linear infinite;\n  content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.finished::before {\n  display: block;\n  width: 0;\n  height: 0;\n  margin: 0 2px;\n  border-top: 6px solid #000000;\n  border-right: 5px solid transparent;\n  border-left: 5px solid transparent;\n  transition: transform 0.3s;\n  content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.error::before {\n  content: \"⚠\";\n}\ndiv[id^=font-picker].expanded .dropdown-icon.finished::before {\n  transform: rotate(-180deg);\n}\ndiv[id^=font-picker].expanded ul {\n  max-height: 200px;\n}\ndiv[id^=font-picker] ul {\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  max-height: 0;\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #eaeaea;\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n  transition: 0.3s;\n  -webkit-overflow-scrolling: touch;\n}\ndiv[id^=font-picker] ul li {\n  height: 35px;\n  list-style: none;\n}\ndiv[id^=font-picker] ul li button {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 0 10px;\n  white-space: nowrap;\n}\ndiv[id^=font-picker] ul li button:hover, div[id^=font-picker] ul li button:focus {\n  background: #dddddd;\n}\ndiv[id^=font-picker] ul li button.active-font {\n  background: #d1d1d1;\n}";
+  styleInject(css);
+
+  function getFontId(fontFamily) {
+      return fontFamily.replace(/\s+/g, "-").toLowerCase();
+  }
+  function validatePickerId(pickerId) {
+      if (pickerId.match(/[^0-9a-z]/i)) {
+          throw Error("The `pickerId` parameter may only contain letters and digits");
+      }
+  }
+
+  function get(url) {
+      return new Promise(function (resolve, reject) {
+          var request = new XMLHttpRequest();
+          request.overrideMimeType("application/json");
+          request.open("GET", url, true);
+          request.onreadystatechange = function () {
+              if (request.readyState === 4) {
+                  if (request.status !== 200) {
+                      reject(new Error("Response has status code " + request.status));
+                  }
+                  else {
+                      resolve(request.responseText);
+                  }
+              }
+          };
+          request.send();
+      });
+  }
+
+  var LIST_BASE_URL = "https://www.googleapis.com/webfonts/v1/webfonts";
+  function getFontList(apiKey) {
+      return __awaiter(this, void 0, void 0, function () {
+          var url, response, json, fontsOriginal;
+          return __generator(this, function (_a) {
+              switch (_a.label) {
+                  case 0:
+                      url = new URL(LIST_BASE_URL);
+                      url.searchParams.append("sort", "popularity");
+                      url.searchParams.append("key", apiKey);
+                      return [4, get(url.href)];
+                  case 1:
+                      response = _a.sent();
+                      json = JSON.parse(response);
+                      fontsOriginal = json.items;
+                      return [2, fontsOriginal.map(function (fontOriginal) {
+                              var family = fontOriginal.family, subsets = fontOriginal.subsets, others = __rest(fontOriginal, ["family", "subsets"]);
+                              return __assign(__assign({}, others), { family: family, id: getFontId(family), scripts: subsets });
+                          })];
+              }
+          });
+      });
+  }
+
+  var previewFontsStylesheet = document.createElement("style");
+  document.head.appendChild(previewFontsStylesheet);
+  function applyFontPreview(previewFont, selectorSuffix) {
+      var fontId = getFontId(previewFont.family);
+      var style = "\n\t\t\t#font-button-" + fontId + selectorSuffix + " {\n\t\t\t\tfont-family: \"" + previewFont.family + "\";\n\t\t\t}\n\t\t";
+      previewFontsStylesheet.appendChild(document.createTextNode(style));
+  }
+  function getActiveFontStylesheet(selectorSuffix) {
+      var stylesheetId = "active-font-" + selectorSuffix;
+      var activeFontStylesheet = document.getElementById(stylesheetId);
+      if (!activeFontStylesheet) {
+          activeFontStylesheet = document.createElement("style");
+          activeFontStylesheet.id = stylesheetId;
+          document.head.appendChild(activeFontStylesheet);
+      }
+      return activeFontStylesheet;
+  }
+  function applyActiveFont(activeFont, previousFontFamily, selectorSuffix) {
+      var style = "\n\t\t.apply-font" + selectorSuffix + " {\n\t\t\tfont-family: \"" + activeFont.family + "\"" + (previousFontFamily ? ", \"" + previousFontFamily + "\"" : "") + ";\n\t\t}\n\t";
+      var activeFontStylesheet = getActiveFontStylesheet(selectorSuffix);
+      activeFontStylesheet.innerHTML = style;
+  }
+
+  var PREVIEW_ATTRIBUTE_NAME = "data-is-preview";
+  function getStylesheetId(fontId) {
+      return "font-" + fontId;
+  }
+  function stylesheetExists(fontId, isPreview) {
+      var stylesheetNode = document.getElementById(getStylesheetId(fontId));
+      if (isPreview === null || isPreview === undefined) {
+          return stylesheetNode !== null;
+      }
+      return (stylesheetNode !== null &&
+          stylesheetNode.getAttribute(PREVIEW_ATTRIBUTE_NAME) === isPreview.toString());
+  }
+  function createStylesheet(fontId, isPreview) {
+      var stylesheetNode = document.createElement("style");
+      stylesheetNode.id = getStylesheetId(fontId);
+      stylesheetNode.setAttribute(PREVIEW_ATTRIBUTE_NAME, isPreview.toString());
+      document.head.appendChild(stylesheetNode);
+  }
+  function fillStylesheet(fontId, styles) {
+      var stylesheetId = getStylesheetId(fontId);
+      var stylesheetNode = document.getElementById(stylesheetId);
+      if (stylesheetNode) {
+          stylesheetNode.textContent = styles;
+      }
+      else {
+          console.error("Could not fill stylesheet: Stylesheet with ID \"" + stylesheetId + "\" not found");
+      }
+  }
+  function setStylesheetType(fontId, isPreview) {
+      var stylesheetId = getStylesheetId(fontId);
+      var stylesheetNode = document.getElementById(stylesheetId);
+      if (stylesheetNode) {
+          stylesheetNode.setAttribute(PREVIEW_ATTRIBUTE_NAME, isPreview.toString());
+      }
+      else {
+          console.error("Could not change stylesheet type: Stylesheet with ID \"" + stylesheetId + "\" not found");
+      }
+  }
+
+  function getMatches(regex, str) {
+      var matches = [];
+      var match;
+      do {
+          match = regex.exec(str);
+          if (match) {
+              matches.push(match[1]);
+          }
+      } while (match);
+      return matches;
+  }
+
+  var FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
+  var FONT_FAMILY_REGEX = /font-family: ['"](.*?)['"]/gm;
+  function extractFontStyles(allFontStyles) {
+      var rules = getMatches(FONT_FACE_REGEX, allFontStyles);
+      var fontStyles = {};
+      rules.forEach(function (rule) {
+          var fontFamily = getMatches(FONT_FAMILY_REGEX, rule)[0];
+          var fontId = getFontId(fontFamily);
+          if (!(fontId in fontStyles)) {
+              fontStyles[fontId] = "";
+          }
+          fontStyles[fontId] += "@font-face {\n" + rule + "\n}\n\n";
+      });
+      return fontStyles;
+  }
+
+  var FONT_BASE_URL = "https://fonts.googleapis.com/css";
+  function getStylesheet(fonts, scripts, variants, previewsOnly) {
+      return __awaiter(this, void 0, void 0, function () {
+          var url, variantsStr, familiesStr, familyNamesConcat, downloadChars;
+          return __generator(this, function (_a) {
+              url = new URL(FONT_BASE_URL);
+              variantsStr = variants.join(",");
+              familiesStr = fonts.map(function (font) { return font.family + ":" + variantsStr; });
+              url.searchParams.append("family", familiesStr.join("|"));
+              url.searchParams.append("subset", scripts.join(","));
+              if (previewsOnly) {
+                  familyNamesConcat = fonts.map(function (font) { return font.family; }).join("");
+                  downloadChars = familyNamesConcat
+                      .split("")
+                      .filter(function (char, pos, self) { return self.indexOf(char) === pos; })
+                      .join("");
+                  url.searchParams.append("text", downloadChars);
+              }
+              url.searchParams.append("font-display", "swap");
+              return [2, get(url.href)];
+          });
+      });
+  }
+
+  function loadFontPreviews(fonts, scripts, variants, selectorSuffix) {
+      return __awaiter(this, void 0, void 0, function () {
+          var fontsArray, fontsToFetch, response, fontStyles;
+          return __generator(this, function (_a) {
+              switch (_a.label) {
+                  case 0:
+                      fontsArray = Array.from(fonts.values());
+                      fontsToFetch = fontsArray
+                          .map(function (font) { return font.id; })
+                          .filter(function (fontId) { return !stylesheetExists(fontId); });
+                      fontsToFetch.forEach(function (fontId) { return createStylesheet(fontId, true); });
+                      return [4, getStylesheet(fontsArray, scripts, variants, true)];
+                  case 1:
+                      response = _a.sent();
+                      fontStyles = extractFontStyles(response);
+                      fontsArray.forEach(function (font) {
+                          applyFontPreview(font, selectorSuffix);
+                          if (fontsToFetch.includes(font.id)) {
+                              if (!(font.id in fontStyles)) {
+                                  console.error("Missing styles for font \"" + font.family + "\" (fontId \"" + font.id + "\") in Google Fonts response");
+                                  return;
+                              }
+                              fillStylesheet(font.id, fontStyles[font.id]);
+                          }
+                      });
+                      return [2];
+              }
+          });
+      });
+  }
+  function loadActiveFont(font, previousFontFamily, scripts, variants, selectorSuffix) {
+      return __awaiter(this, void 0, void 0, function () {
+          var fontStyle;
+          return __generator(this, function (_a) {
+              switch (_a.label) {
+                  case 0:
+                      if (!stylesheetExists(font.id, false)) return [3, 1];
+                      applyActiveFont(font, previousFontFamily, selectorSuffix);
+                      return [3, 3];
+                  case 1:
+                      if (stylesheetExists(font.id, true)) {
+                          setStylesheetType(font.id, false);
+                      }
+                      else {
+                          createStylesheet(font.id, false);
+                      }
+                      return [4, getStylesheet([font], scripts, variants, false)];
+                  case 2:
+                      fontStyle = _a.sent();
+                      applyActiveFont(font, previousFontFamily, selectorSuffix);
+                      fillStylesheet(font.id, fontStyle);
+                      _a.label = 3;
+                  case 3: return [2];
+              }
+          });
+      });
+  }
+
+  var FONT_FAMILY_DEFAULT = "Open Sans";
+  var OPTIONS_DEFAULTS = {
+      pickerId: "",
+      families: [],
+      categories: [],
+      scripts: ["latin"],
+      variants: ["regular"],
+      filter: function () { return true; },
+      limit: 50,
+      sort: "alphabet",
+  };
+
+  var FontManager = (function () {
+      function FontManager(apiKey, defaultFamily, _a, onChange) {
+          if (defaultFamily === void 0) { defaultFamily = FONT_FAMILY_DEFAULT; }
+          var _b = _a.pickerId, pickerId = _b === void 0 ? OPTIONS_DEFAULTS.pickerId : _b, _c = _a.families, families = _c === void 0 ? OPTIONS_DEFAULTS.families : _c, _d = _a.categories, categories = _d === void 0 ? OPTIONS_DEFAULTS.categories : _d, _e = _a.scripts, scripts = _e === void 0 ? OPTIONS_DEFAULTS.scripts : _e, _f = _a.variants, variants = _f === void 0 ? OPTIONS_DEFAULTS.variants : _f, _g = _a.filter, filter = _g === void 0 ? OPTIONS_DEFAULTS.filter : _g, _h = _a.limit, limit = _h === void 0 ? OPTIONS_DEFAULTS.limit : _h, _j = _a.sort, sort = _j === void 0 ? OPTIONS_DEFAULTS.sort : _j;
+          if (onChange === void 0) { onChange = function () { }; }
+          this.fonts = new Map();
+          validatePickerId(pickerId);
+          this.selectorSuffix = pickerId ? "-" + pickerId : "";
+          this.apiKey = apiKey;
+          this.options = {
+              pickerId: pickerId,
+              families: families,
+              categories: categories,
+              scripts: scripts,
+              variants: variants,
+              filter: filter,
+              limit: limit,
+              sort: sort,
+          };
+          this.onChange = onChange;
+          this.addFont(defaultFamily, false);
+          this.setActiveFont(defaultFamily, false);
+      }
+      FontManager.prototype.init = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              var fonts, _loop_1, this_1, i, state_1, fontsToLoad;
+              return __generator(this, function (_a) {
+                  switch (_a.label) {
+                      case 0: return [4, getFontList(this.apiKey)];
+                      case 1:
+                          fonts = _a.sent();
+                          _loop_1 = function (i) {
+                              var font = fonts[i];
+                              if (this_1.fonts.size >= this_1.options.limit) {
+                                  return "break";
+                              }
+                              if (!this_1.fonts.has(font.family) &&
+                                  (this_1.options.families.length === 0 || this_1.options.families.includes(font.family)) &&
+                                  (this_1.options.categories.length === 0 || this_1.options.categories.includes(font.category)) &&
+                                  this_1.options.scripts.every(function (script) { return font.scripts.includes(script); }) &&
+                                  this_1.options.variants.every(function (variant) { return font.variants.includes(variant); }) &&
+                                  this_1.options.filter(font) === true) {
+                                  this_1.fonts.set(font.family, font);
+                              }
+                          };
+                          this_1 = this;
+                          for (i = 0; i < fonts.length; i += 1) {
+                              state_1 = _loop_1(i);
+                              if (state_1 === "break")
+                                  break;
+                          }
+                          fontsToLoad = new Map(this.fonts);
+                          fontsToLoad["delete"](this.activeFontFamily);
+                          loadFontPreviews(fontsToLoad, this.options.scripts, this.options.variants, this.selectorSuffix);
+                          return [2, this.fonts];
+                  }
+              });
+          });
+      };
+      FontManager.prototype.getFonts = function () {
+          return this.fonts;
+      };
+      FontManager.prototype.addFont = function (fontFamily, downloadPreview) {
+          if (downloadPreview === void 0) { downloadPreview = true; }
+          var font = {
+              family: fontFamily,
+              id: getFontId(fontFamily),
+          };
+          this.fonts.set(fontFamily, font);
+          if (downloadPreview) {
+              var fontMap = new Map();
+              fontMap.set(fontFamily, font);
+              loadFontPreviews(fontMap, this.options.scripts, this.options.variants, this.selectorSuffix);
+          }
+      };
+      FontManager.prototype.removeFont = function (fontFamily) {
+          this.fonts["delete"](fontFamily);
+      };
+      FontManager.prototype.getActiveFont = function () {
+          var activeFont = this.fonts.get(this.activeFontFamily);
+          if (!activeFont) {
+              throw Error("Cannot get active font: \"" + this.activeFontFamily + "\" is not in the font list");
+          }
+          else {
+              return activeFont;
+          }
+      };
+      FontManager.prototype.setActiveFont = function (fontFamily, runOnChange) {
+          var _this = this;
+          if (runOnChange === void 0) { runOnChange = true; }
+          var previousFontFamily = this.activeFontFamily;
+          var activeFont = this.fonts.get(fontFamily);
+          if (!activeFont) {
+              throw Error("Cannot update active font: \"" + fontFamily + "\" is not in the font list");
+          }
+          this.activeFontFamily = fontFamily;
+          loadActiveFont(activeFont, previousFontFamily, this.options.scripts, this.options.variants, this.selectorSuffix).then(function () {
+              if (runOnChange) {
+                  _this.onChange(activeFont);
+              }
+          });
+      };
+      FontManager.prototype.setOnChange = function (onChange) {
+          this.onChange = onChange;
+      };
+      return FontManager;
+  }());
+
+  var FontPicker = (function () {
+      function FontPicker(apiKey, defaultFamily, _a, onChange) {
+          if (defaultFamily === void 0) { defaultFamily = FONT_FAMILY_DEFAULT; }
+          var _b = _a.pickerId, pickerId = _b === void 0 ? OPTIONS_DEFAULTS.pickerId : _b, _c = _a.families, families = _c === void 0 ? OPTIONS_DEFAULTS.families : _c, _d = _a.categories, categories = _d === void 0 ? OPTIONS_DEFAULTS.categories : _d, _e = _a.scripts, scripts = _e === void 0 ? OPTIONS_DEFAULTS.scripts : _e, _f = _a.variants, variants = _f === void 0 ? OPTIONS_DEFAULTS.variants : _f, _g = _a.filter, filter = _g === void 0 ? OPTIONS_DEFAULTS.filter : _g, _h = _a.limit, limit = _h === void 0 ? OPTIONS_DEFAULTS.limit : _h, _j = _a.sort, sort = _j === void 0 ? OPTIONS_DEFAULTS.sort : _j;
+          if (onChange === void 0) { onChange = function () { }; }
+          this.expanded = false;
+          this.closeEventListener = this.closeEventListener.bind(this);
+          this.toggleExpanded = this.toggleExpanded.bind(this);
+          var options = {
+              pickerId: pickerId,
+              families: families,
+              categories: categories,
+              scripts: scripts,
+              variants: variants,
+              filter: filter,
+              limit: limit,
+              sort: sort,
+          };
+          this.fontManager = new FontManager(apiKey, defaultFamily, options, onChange);
+          this.generateUI(sort);
+      }
+      FontPicker.prototype.generateUI = function (sort) {
+          var _this = this;
+          var selectorSuffix = this.fontManager.selectorSuffix;
+          var pickerId = "font-picker" + selectorSuffix;
+          this.fontPickerDiv = document.getElementById(pickerId);
+          if (!this.fontPickerDiv) {
+              throw Error("Missing div with id=\"" + pickerId + "\"");
+          }
+          var dropdownButton = document.createElement("button");
+          dropdownButton.classList.add("dropdown-button");
+          dropdownButton.onclick = this.toggleExpanded;
+          dropdownButton.onkeypress = this.toggleExpanded;
+          dropdownButton.type = "button";
+          this.fontPickerDiv.appendChild(dropdownButton);
+          this.dropdownFamily = document.createElement("p");
+          this.dropdownFamily.textContent = this.fontManager.getActiveFont().family;
+          this.dropdownFamily.classList.add("dropdown-font-family");
+          dropdownButton.appendChild(this.dropdownFamily);
+          var dropdownIcon = document.createElement("p");
+          dropdownIcon.classList.add("dropdown-icon", "loading");
+          dropdownButton.appendChild(dropdownIcon);
+          this.fontManager
+              .init()
+              .then(function (fontMap) {
+              var fonts = Array.from(fontMap.values());
+              if (sort === "alphabet") {
+                  fonts.sort(function (font1, font2) {
+                      return font1.family.localeCompare(font2.family);
+                  });
+              }
+              _this.generateFontList(fonts);
+              dropdownIcon.classList.replace("loading", "finished");
+          })["catch"](function (err) {
+              dropdownIcon.classList.replace("loading", "error");
+              console.error("Error trying to fetch the list of available fonts");
+              console.error(err);
+          });
+      };
+      FontPicker.prototype.generateFontList = function (fonts) {
+          var _this = this;
+          this.ul = document.createElement("ul");
+          this.ul.classList.add("font-list");
+          fonts.forEach(function (font) {
+              _this.addFontLi(font);
+          });
+          this.fontPickerDiv.appendChild(this.ul);
+          var activeFontFamily = this.fontManager.getActiveFont().family;
+          var activeFontId = getFontId(activeFontFamily);
+          var fontButtonId = "font-button-" + activeFontId + this.fontManager.selectorSuffix;
+          this.activeFontButton = document.getElementById(fontButtonId);
+          if (this.activeFontButton) {
+              this.activeFontButton.classList.add("active-font");
+          }
+          else {
+              console.error("Could not find font button with ID (" + fontButtonId + ")");
+          }
+      };
+      FontPicker.prototype.addFontLi = function (font, listIndex) {
+          var _this = this;
+          var fontId = getFontId(font.family);
+          var li = document.createElement("li");
+          li.classList.add("font-list-item");
+          var fontButton = document.createElement("button");
+          fontButton.type = "button";
+          fontButton.id = "font-button-" + fontId + this.fontManager.selectorSuffix;
+          fontButton.classList.add("font-button");
+          fontButton.textContent = font.family;
+          var onActivate = function () {
+              _this.toggleExpanded();
+              _this.setActiveFont(font.family);
+          };
+          fontButton.onclick = onActivate;
+          fontButton.onkeypress = onActivate;
+          li.appendChild(fontButton);
+          if (listIndex) {
+              this.ul.insertBefore(li, this.ul.children[listIndex]);
+          }
+          else {
+              this.ul.appendChild(li);
+          }
+      };
+      FontPicker.prototype.closeEventListener = function (e) {
+          var targetEl = e.target;
+          var fontPickerEl = document.getElementById("font-picker" + this.fontManager.selectorSuffix);
+          while (true) {
+              if (targetEl === fontPickerEl) {
+                  return;
+              }
+              if (targetEl.parentNode) {
+                  targetEl = targetEl.parentNode;
+              }
+              else {
+                  this.toggleExpanded();
+                  return;
+              }
+          }
+      };
+      FontPicker.prototype.toggleExpanded = function () {
+          if (this.expanded) {
+              this.expanded = false;
+              this.fontPickerDiv.classList.remove("expanded");
+              document.removeEventListener("click", this.closeEventListener);
+          }
+          else {
+              this.expanded = true;
+              this.fontPickerDiv.classList.add("expanded");
+              document.addEventListener("click", this.closeEventListener);
+          }
+      };
+      FontPicker.prototype.getFonts = function () {
+          return this.fontManager.getFonts();
+      };
+      FontPicker.prototype.addFont = function (fontFamily, index) {
+          if (Array.from(this.fontManager.getFonts().keys()).includes(fontFamily)) {
+              throw Error("Did not add font to font picker: Font family \"" + fontFamily + "\" is already in the list");
+          }
+          this.fontManager.addFont(fontFamily, true);
+          var font = this.fontManager.getFonts().get(fontFamily);
+          if (font) {
+              this.addFontLi(font, index);
+          }
+          else {
+              console.error("Font \"" + fontFamily + "\" is missing in font list");
+          }
+      };
+      FontPicker.prototype.removeFont = function (fontFamily) {
+          this.fontManager.removeFont(fontFamily);
+          var fontId = getFontId(fontFamily);
+          var fontButton = document.getElementById("font-button-" + fontId + this.fontManager.selectorSuffix);
+          if (fontButton) {
+              var fontLi = fontButton.parentElement;
+              fontButton.remove();
+              if (fontLi) {
+                  fontLi.remove();
+              }
+          }
+          else {
+              throw Error("Could not remove font from font picker: Font family \"" + fontFamily + "\" is not in the list");
+          }
+      };
+      FontPicker.prototype.getActiveFont = function () {
+          return this.fontManager.getActiveFont();
+      };
+      FontPicker.prototype.setActiveFont = function (fontFamily) {
+          this.fontManager.setActiveFont(fontFamily);
+          var fontId = getFontId(fontFamily);
+          this.dropdownFamily.textContent = fontFamily;
+          if (this.activeFontButton) {
+              this.activeFontButton.classList.remove("active-font");
+              this.activeFontButton = document.getElementById("font-button-" + fontId + this.fontManager.selectorSuffix);
+              this.activeFontButton.classList.add("active-font");
+          }
+          else {
+              console.error("`activeFontButton` is undefined");
+          }
+      };
+      FontPicker.prototype.setOnChange = function (onChange) {
+          this.fontManager.setOnChange(onChange);
+      };
+      return FontPicker;
+  }());
+
+  return FontPicker;
+
+})));

src/js/json__compile.js

@@ -0,0 +1,88 @@
+function add__option() {
+    window.new_chq_no = parseInt($('#total_chq').val()) + 1;
+    window.new_input = "<h3>Categorie Name</h3><input type='text' id='cat_name'><div id='op_cont'><div class='inner'><h4>option name</h4><input type='text' id='op_name'><h4>option type</h4><input type='text' id='op_type'><h4>option description</h4><input type='text' id='op_desc'><h4>option css</h4><input type='text' id='op_css'></div><input type='button' value='Add a new option'></div>";
+
+    $('#cat').append(new_input);
+
+    $('#total_chq').val(new_chq_no);
+}
+
+function create_option_json() {
+    var option__name = document.querySelectorAll('#op_name');
+    option__name.forEach(option__name => function() {
+        var json__options = {
+            "categories": [{
+                "name": "Default",
+                "options": [{
+                    "name": name
+                }]
+            }]
+        }
+    })
+
+    var categories = {}
+}
+
+function no__option() {
+    $('#no_op').on('click', function() {
+        var json__options = {
+            "categories": [{
+                "name": "Default",
+                "options": []
+            }]
+        }
+    })
+}
+
+function createJSON() {
+    var name = document.getElementById("name").value;
+    var author = document.getElementById("author").value;
+    var desc = document.getElementById("desc").value;
+    var CSS = document.getElementById("css").value;
+    var login = document.getElementById("login").value;
+    var home = document.getElementById("home").value;
+    var lib = document.getElementById("lib").value;
+    var title = document.getElementById("title").value;
+    var json__compiled = {
+        "name ": name,
+        "author ": author,
+        "description ": desc,
+        "defaultCss ": CSS,
+        "previews ": [{
+                "name ": "Login Page ",
+                "url ": login
+            },
+            {
+                "name ": "Home/Index Page ",
+                "url ": home
+            },
+            {
+                "name ": "Library Page ",
+                "url ": lib
+            },
+            {
+                "name ": "Title page ",
+                "url ": title
+            }
+        ]
+    }
+
+    var json = JSON.stringify(json__compiled, null, 4);
+
+    json = [json];
+    var json__blob = new Blob(json, { type: "text/plain;charset=utf-8" });
+
+    var isIE = false || !!document.documentMode;
+    if (isIE) {
+        window.navigator.msSaveBlob(json__blob, name + ".json");
+    } else {
+        var url = window.URL || window.webkitURL;
+        link = url.createObjectURL(json__blob);
+        var a = document.createElement("a");
+        a.download = name + ".json";
+        a.href = link;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+}