Move styles to JS from CSS (#6)

* Moves the styles to JavaScript
2018-01-17 15:53:33 -08:00 · 2018-01-17 15:53:33 -08:00 · 24717f8ada
--- a/index.html
+++ b/index.html
@ -5,67 +5,6 @@
        <style>
            body { background-color: lightgray; }
        </style>
-<style>
-/** TODO: These need to be moved into JS (for ease of usage in an app). They're inline in the demo for ease of development. */
-
-#PTB_buttons {
-    position:fixed;
-    bottom: 0;
-    left: 50px;
-
-    list-style:none;
-    padding:0;
-    margin:0;
-
-    z-index: 2147483647; /* we're on top */
-}
-#PTB_buttons li {
-    display:inline-block;
-    line-height:1.6em;
-    margin-left:0.5em;
-    padding:0.2em;
-    cursor:pointer;
-
-    border:1px solid black;
-    border-bottom: none;
-}
-#PTB_buttons li:first-child {
-    margin-left:0;
-}
-
-#PTB_frame {
-    position:fixed;
-    left:0;
-    top:0;
-
-    width:100%;
-    height:100%;
-    overflow:auto;
-
-    padding:0.5em;
-    background:rgba(255, 255, 255, 0.95);
-    z-index:2147483646; /* we're one layer below the top */
-}
-
-#PTB_frame table {
-    margin-top:0.5em;
-    border-collapse: collapse;
-    border-spacing: 0;
-    border: 1px solid black;
-}
-#PTB_frame th {
-    font-weight: bold;
-}
-#PTB_frame th,
-#PTB_frame td {
-    border: 1px solid black;
-    padding:0.2em;
-}
-
-#PTB_frame .numeric {
-    text-align: right;
-}
-</style>
    </head>
    <body>
        <script defer>
--- a/src/styler.ts
+++ b/src/styler.ts
@ -0,0 +1,74 @@
+const getButtonStyles = () => `
+#PTB_buttons {
+    position:fixed;
+    bottom: 0;
+    left: 50px;
+
+    list-style:none;
+    padding:0;
+    margin:0;
+
+    z-index: 2147483647; /* we're on top */
+}
+#PTB_buttons li {
+    display:inline-block;
+    line-height:1.6em;
+    margin-left:0.5em;
+    padding:0.2em;
+    cursor:pointer;
+
+    border:1px solid black;
+    border-bottom: none;
+}
+#PTB_buttons li:first-child {
+    margin-left:0;
+}
+`;
+
+const getFrameStyles = () => `
+#PTB_frame {
+    position:fixed;
+    left:0;
+    top:0;
+
+    width:100%;
+    height:100%;
+    overflow:auto;
+
+    padding:0.5em;
+    background:rgba(255, 255, 255, 0.95);
+    z-index:2147483646; /* we're one layer below the top */
+}
+
+#PTB_frame table {
+    margin-top:0.5em;
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 1px solid black;
+}
+#PTB_frame th {
+    font-weight: bold;
+}
+#PTB_frame th,
+#PTB_frame td {
+    border: 1px solid black;
+    padding:0.2em;
+}
+
+#PTB_frame .numeric {
+    text-align: right;
+}
+`;
+
+/**
+ * Add the styles for the library to the DOM.
+ * Apologies to future maintainers for encoding CSS in JS strings like this, the intention is to
+ * make the library distributable as a singe JavaScript file and this is a simple way to do it.
+ */
+export const addStylesToDom = (head: Element = document.head) => {
+    const styleElement = document.createElement("style");
+    styleElement.type = "text/css";
+    styleElement.innerHTML = getButtonStyles() + getFrameStyles();
+
+    head.appendChild(styleElement);
+};
--- a/src/toolbar.ts
+++ b/src/toolbar.ts
@ -1,5 +1,6 @@
 import { IPanel, IPanelConfig, IPanelWithConfiguration } from "./ipanel";
 import { PanelFrame } from "./panelframe";
+import { addStylesToDom } from "./styler";

 /** Describes the toolbar. */
 export class Toolbar {
@ -15,6 +16,8 @@ export class Toolbar {
     * @param container Optional parameter for the element that contains the toolbar. It defaults to the body of the HTML page.
     */
    public constructor(panels: Array<IPanelWithConfiguration<IPanelConfig, IPanel>>, container: HTMLElement = window.document.body) {
+        addStylesToDom();
+
        this.toolbarRoot = document.createElement("div");
        this.toolbarRoot.setAttribute("id", "PTB_root");
        container.appendChild(this.toolbarRoot);
--- a/test/styler.spec.ts
+++ b/test/styler.spec.ts
@ -0,0 +1,13 @@
+import { expect } from "chai";
+import "mocha";
+
+import { addStylesToDom } from "../src/styler";
+
+describe("addStylesToDom", () => {
+    it("adds a style element to the DOM", () => {
+        const div = document.createElement("div");
+        addStylesToDom(div);
+
+        expect(div.querySelectorAll("style").length).to.equal(1, "there should be a single style element");
+    });
+});