Skip to content

Commit b6c08d2

Browse files
jaudrigajaudriga
committed
WIP: Add demo for GitHub pages
1 parent d57ce8e commit b6c08d2

12 files changed

+2754
-0
lines changed

‎demo/index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charSet="UTF-8">
5+
<title>LD2H cards (still work in progress)</title>
6+
7+
8+
9+
<script src="src/mustache.min.js"></script>
10+
<script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
11+
<script type="module" src="src/main.js"></script>
12+
<script src="src/jsonld2html-bundle.js"></script>
13+
14+
<style>
15+
body {
16+
font-family: Arial, sans-serif;
17+
margin: 20px;
18+
}
19+
fluent-text-area {
20+
margin-bottom: 20px;
21+
22+
}
23+
.text-input {
24+
width:680px;
25+
}
26+
27+
</style>
28+
29+
</head>
30+
31+
32+
<body>
33+
<h2>Render your JSON-LDs!</h2>
34+
35+
<div class="container"></div>
36+
<div class="input-site">
37+
38+
<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>
39+
40+
<p id="status-bar"></p>
41+
42+
<fluent-button id="render-default-button">Render default style</fluent-button>
43+
<fluent-button id="render-fluent-button">Render fluent style</fluent-button>
44+
45+
</div>
46+
<br>
47+
<div class="output-site">
48+
49+
<div id="output-target">
50+
51+
</div>
52+
53+
</div>
54+
55+
</div>
56+
57+
</body>
58+
59+
</html>

‎demo/src/jsonld2html-bundle.js

Lines changed: 923 additions & 0 deletions
Large diffs are not rendered by default.

‎demo/src/main.js

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { fluentButton, fluentTextArea, provideFluentDesignSystem } from 'https://unpkg.com/@fluentui/web-components';
2+
3+
4+
5+
// Register the Fluent UI components
6+
provideFluentDesignSystem().register(fluentTextArea());
7+
provideFluentDesignSystem().register(fluentButton());
8+
9+
// Wait for the DOM to be fully loaded
10+
document.addEventListener('DOMContentLoaded', () => {
11+
12+
13+
// ========= DEFAULT RENDERING ============
14+
15+
const renderDefaultButton = document.getElementById("render-default-button");
16+
if(renderDefaultButton){
17+
renderDefaultButton.addEventListener("click", (event) => {
18+
19+
removeStylesheet("style/ld2h_all_cards_fluent.css");
20+
loadStylesheet("style/ld2h_all_cards.css");
21+
22+
const jsonInputField = document.getElementById("json-input-field");
23+
24+
let possibleJsonObject = checkJsonLd(jsonInputField.value.valueOf());
25+
26+
if(possibleJsonObject){
27+
//document.getElementById("status-bar").innerHTML = "";
28+
document.getElementById("output-target").innerHTML = Jsonld2html.render(possibleJsonObject);
29+
30+
}
31+
})
32+
}
33+
34+
35+
// ========= FLUENT RENDERING ============
36+
37+
const renderFluentButton = document.getElementById("render-fluent-button");
38+
if(renderFluentButton){
39+
renderFluentButton.addEventListener("click", (event) => {
40+
41+
42+
removeStylesheet("style/ld2h_all_cards.css");
43+
44+
loadStylesheet("style/ld2h_all_cards_fluent.css");
45+
46+
const jsonInputField = document.getElementById("json-input-field");
47+
48+
let possibleJsonObject = checkJsonLd(jsonInputField.value.valueOf());
49+
50+
if(possibleJsonObject){
51+
let finalCard = "";
52+
// changing the default template to the fluentUI template
53+
Jsonld2html.setTemplateOfType("https://ld2h/Default",Jsonld2html.allTemplates.cardDefaultFluent);
54+
Jsonld2html.setTemplateOfType("https://ld2h/Reservations",Jsonld2html.allTemplates.cardReservationsFluent);
55+
Jsonld2html.setTemplateOfType("https://ld2h/PromotionCards",Jsonld2html.allTemplates.cardPromotionCardsFluent);
56+
Jsonld2html.setTemplateOfType("TrainReservation",Jsonld2html.allTemplates.cardReservationsFluent);
57+
Jsonld2html.setTemplateOfType("FlightReservation",Jsonld2html.allTemplates.cardReservationsFluent);
58+
Jsonld2html.setTemplateOfType("BusReservation",Jsonld2html.allTemplates.cardReservationsFluent);
59+
Jsonld2html.setTemplateOfType("TrainReservation",Jsonld2html.allTemplates.cardReservationsFluent);
60+
Jsonld2html.setTemplateOfType("EventReservation",Jsonld2html.allTemplates.cardReservationsFluent);
61+
Jsonld2html.setTemplateOfType("Reservation",Jsonld2html.allTemplates.cardReservationsFluent);
62+
63+
finalCard = Jsonld2html.render(possibleJsonObject);
64+
document.getElementById("output-target").innerHTML = finalCard;
65+
}
66+
67+
})
68+
}
69+
70+
// Example of programmatically setting a value
71+
// const filledTextarea = document.querySelector('fluent-text-area[appearance="filled"]');
72+
// if (filledTextarea) {
73+
// filledTextarea.value = "This is a pre-filled value";
74+
// }
75+
});
76+
77+
78+
function checkJsonLd(inputString) {
79+
80+
let possibleObject;
81+
let success = false;
82+
83+
try {
84+
85+
possibleObject = JSON.parse(inputString);
86+
success = true;
87+
document.getElementById("status-bar").innerHTML = "";
88+
89+
} catch (error) {
90+
91+
document.getElementById("status-bar").innerHTML = error.message;
92+
console.error("JSON parsing error:", error);
93+
}
94+
95+
if(success === false){
96+
97+
return false;
98+
}
99+
100+
else return possibleObject;
101+
}
102+
103+
function loadStylesheet(stylesheetPath) {
104+
const link = document.createElement('link');
105+
link.rel = 'stylesheet';
106+
link.type = 'text/css';
107+
link.href = stylesheetPath;
108+
document.head.appendChild(link);
109+
}
110+
111+
function removeStylesheet(stylesheetPath) {
112+
const links = document.getElementsByTagName('link');
113+
for (let i = 0; i < links.length; i++) {
114+
if (links[i].href.includes(stylesheetPath)) {
115+
links[i].parentNode.removeChild(links[i]);
116+
break;
117+
}
118+
}
119+
}
120+
121+

‎demo/src/mustache.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)