audriga · jaudriga · Sep 17, 2024
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charSet="UTF-8"> 
+        <title>LD2H cards (still work in progress)</title>
+
+
+
+        <script src="src/mustache.min.js"></script>
+        <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
+        <script type="module" src="src/main.js"></script>
+        <script src="src/jsonld2html-bundle.js"></script>
+
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                margin: 20px;
+            }
+            fluent-text-area {
+                margin-bottom: 20px;
+
+            }
+            .text-input {
+                width:680px;
+            }
+
+        </style>
+
+    </head>
+
+
+    <body>
+        <h2>Render your JSON-LDs!</h2>
+
+        <div class="container"></div>
+            <div class="input-site">
+
+                <fluent-text-area id="json-input-field" class="text-input" placeholder="Place your JSON-LD here" appearance="filled" rows="25" columns="50" resize="both"></fluent-text-area>        
+
+                <p id="status-bar"></p>
+
+                <fluent-button id="render-default-button">Render default style</fluent-button>
+                <fluent-button id="render-fluent-button">Render fluent style</fluent-button>
+
+            </div>
+            <br>
+            <div class="output-site">
+
+                <div id="output-target">
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </body>
+
+</html>
diff --git a/docs/src/jsonld2html-bundle.js b/docs/src/jsonld2html-bundle.js
diff --git a/docs/src/main.js b/docs/src/main.js
@@ -0,0 +1,121 @@
+import { fluentButton, fluentTextArea, provideFluentDesignSystem } from 'https://unpkg.com/@fluentui/web-components';
+
+
+
+// Register the Fluent UI components
+provideFluentDesignSystem().register(fluentTextArea());
+provideFluentDesignSystem().register(fluentButton());
+
+// Wait for the DOM to be fully loaded
+document.addEventListener('DOMContentLoaded', () => {
+
+
+    // ========= DEFAULT RENDERING ============
+
+    const renderDefaultButton = document.getElementById("render-default-button");
+    if(renderDefaultButton){
+        renderDefaultButton.addEventListener("click", (event) => {
+
+            removeStylesheet("style/ld2h_all_cards_fluent.css");
+            loadStylesheet("style/ld2h_all_cards.css");
+
+            const jsonInputField = document.getElementById("json-input-field");
+
+            let possibleJsonObject = checkJsonLd(jsonInputField.value.valueOf()); 
+
+            if(possibleJsonObject){
+                    //document.getElementById("status-bar").innerHTML = "";
+                     document.getElementById("output-target").innerHTML = Jsonld2html.render(possibleJsonObject);
+
+                }
+        })
+    }
+
+
+    // ========= FLUENT RENDERING ============
+
+    const renderFluentButton = document.getElementById("render-fluent-button");
+    if(renderFluentButton){
+        renderFluentButton.addEventListener("click", (event) => {
+
+
+            removeStylesheet("style/ld2h_all_cards.css");
+
+            loadStylesheet("style/ld2h_all_cards_fluent.css");
+
+            const jsonInputField = document.getElementById("json-input-field");
+
+            let possibleJsonObject = checkJsonLd(jsonInputField.value.valueOf()); 
+
+            if(possibleJsonObject){
+                let finalCard = "";
+                // changing the default template to the fluentUI template
+                Jsonld2html.setTemplateOfType("https://ld2h/Default",Jsonld2html.allTemplates.cardDefaultFluent);
+                Jsonld2html.setTemplateOfType("https://ld2h/Reservations",Jsonld2html.allTemplates.cardReservationsFluent);
+                Jsonld2html.setTemplateOfType("https://ld2h/PromotionCards",Jsonld2html.allTemplates.cardPromotionCardsFluent);
+                Jsonld2html.setTemplateOfType("TrainReservation",Jsonld2html.allTemplates.cardReservationsFluent);
+                Jsonld2html.setTemplateOfType("FlightReservation",Jsonld2html.allTemplates.cardReservationsFluent);
+                Jsonld2html.setTemplateOfType("BusReservation",Jsonld2html.allTemplates.cardReservationsFluent);
+                Jsonld2html.setTemplateOfType("TrainReservation",Jsonld2html.allTemplates.cardReservationsFluent);
+                Jsonld2html.setTemplateOfType("EventReservation",Jsonld2html.allTemplates.cardReservationsFluent);
+                Jsonld2html.setTemplateOfType("Reservation",Jsonld2html.allTemplates.cardReservationsFluent);
+
+                finalCard = Jsonld2html.render(possibleJsonObject);
+                document.getElementById("output-target").innerHTML = finalCard;
+            }
+
+        })   
+    }
+
+    // Example of programmatically setting a value
+    // const filledTextarea = document.querySelector('fluent-text-area[appearance="filled"]');
+    // if (filledTextarea) {
+    //     filledTextarea.value = "This is a pre-filled value";
+    // }
+});
+
+
+function checkJsonLd(inputString) {
+
+    let possibleObject;
+    let success = false;
+
+    try {
+
+        possibleObject = JSON.parse(inputString);
+        success = true;
+        document.getElementById("status-bar").innerHTML = "";
+
+    } catch (error) {
+
+        document.getElementById("status-bar").innerHTML = error.message;
+        console.error("JSON parsing error:", error);
+    }
+
+    if(success === false){
+
+        return false;
+    }
+
+    else return possibleObject;
+}
+
+function loadStylesheet(stylesheetPath) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = stylesheetPath;
+    document.head.appendChild(link);
+}
+
+function removeStylesheet(stylesheetPath) {
+    const links = document.getElementsByTagName('link');
+    for (let i = 0; i < links.length; i++) {
+        if (links[i].href.includes(stylesheetPath)) {
+            links[i].parentNode.removeChild(links[i]);
+            break;
+        }
+    }
+}
+
+
diff --git a/docs/src/mustache.min.js b/docs/src/mustache.min.js