@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
229 lines (189 loc) • 6.56 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gobi - Web Integration test</title>
<script type="text/javascript" src="/dist/run-config.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0 auto;
padding: 20px;
}
.page {
width: 100%;
display: flex;
justify-content: stretch;
gap: 8rem;
}
.page > * {
width: 50%;
}
form {
display: flex;
flex-direction: column;
align-items: stretch;
max-width: 800px;
gap: 10px;
}
label {
font-weight: bold;
}
input,
select,
button {
padding: 5px;
font-size: 16px;
}
button {
cursor: pointer;
}
textarea {
height: 100px;
resize: vertical;
}
.previews {
display: flex;
flex-direction: column;
}
h3 {
margin: 1rem 0;
}
</style>
<script type="text/javascript" src="../index.js?v=d85e77"></script></head>
<body>
<h1>API Example Page</h1>
<div class="page">
<form id="apiForm">
<label for="apiKey">API Key:</label>
<input type="text" id="apiKey" name="apiKey" value="demo" required>
<button type="submit">Load Data</button>
<label for="teams">Teams:</label>
<select id="teams" name="teams" disabled>
<option value="">None</option>
</select>
<label for="collections">Collections:</label>
<select id="collections" name="collections" disabled>
<option value="">None</option>
</select>
<label for="stories">Stories:</label>
<select id="stories" name="stories" disabled>
<option value="">None</option>
</select>
<label for="summary">Selection Summary:</label>
<textarea id="summary" name="summary" readonly></textarea>
</form>
<div class="previews">
<div>
<div id="collection-container"></div>
</div>
<div>
<div id="story-container"></div>
</div>
</div>
</div>
<script>
// TODO: Add a runConfig for the access
const API_BASE_URL = runConfig.apiBaseUrl + '/access/v1';
var api;
const apiForm = document.getElementById('apiForm');
const apiKeyInput = document.getElementById('apiKey');
const teamsSelect = document.getElementById('teams');
const collectionsSelect = document.getElementById('collections');
const storiesSelect = document.getElementById('stories');
const summaryTextarea = document.getElementById('summary');
const collectionContainer = document.getElementById('collection-container');
const storyContainer = document.getElementById('story-container');
function populateSelect(select, options, valueKey, labelFunc, includeAll = false) {
select.innerHTML = '';
if (includeAll) {
const option = document.createElement('option');
option.value = '';
option.textContent = 'All Teams';
select.appendChild(option);
}
options.forEach(item => {
const option = document.createElement('option');
option.value = item[valueKey];
option.textContent = labelFunc(item);
select.appendChild(option);
});
if (!options.length) {
const option = document.createElement('option');
option.value = '';
option.textContent = "None";
select.appendChild(option);
select.disabled = true;
} else {
select.disabled = false;
}
}
async function loadData() {
api = gobi.api(apiKeyInput.value, API_BASE_URL);
api.teams().then((teams) => {
populateSelect(teamsSelect, teams, 'id', team => team.name, true);
updateCollectionsAndStories();
updateSummary();
});
}
async function updateCollectionsAndStories() {
const teamId = teamsSelect.value;
const params = teamId ? { teamId } : {};
api.collections(teamId).then((collections) => {
populateSelect(collectionsSelect, collections, 'id', collection => collection.title + " (" + collection.id + ")" + (collection.tag ? " (tag: " + collection.tag + ")" : ""));
updateSummary();
renderCollection();
});
api.stories(teamId).then((stories) => {
populateSelect(storiesSelect, stories, 'id', story => story.title + " (" + story.id + ")");
updateSummary();
renderStory();
});
}
function updateSummary() {
const teamText = teamsSelect.selectedOptions[0]?.value || 'No team selected';
const collectionText = collectionsSelect.selectedOptions[0]?.value || 'No collection selected';
const storyText = storiesSelect.selectedOptions[0]?.value || 'No story selected';
const summary = "Selected Team: " + teamText + "\n" + "Selected Collection: " + collectionText + "\n" + "Selected Story: " + storyText;
summaryTextarea.value = summary;
}
function renderCollection() {
collectionId = collectionsSelect.value;
if (!collectionId) {
return;
}
const header = document.createElement('h3');
header.appendChild(document.createTextNode("Collection"));
const embed = document.createElement('div');
embed.classList.add('gobi-collection');
embed.dataset.gobiCollectionId = collectionId;
collectionContainer.replaceChildren(header, embed);
gobi.discover({ apiBaseUrl: runConfig.apiBaseUrl });
}
function renderStory() {
storyId = storiesSelect.value;
if (!storyId) {
return;
}
const header = document.createElement('h3');
header.appendChild(document.createTextNode("Story"));
const embed = document.createElement('div');
embed.classList.add('gobi-stories');
embed.dataset.gobiBubbleSize = '160px';
embed.dataset.gobiDisableShadowDom = 'false';
embed.dataset.gobiAutoStartWithSound = 'true';
embed.dataset.gobiStories = storyId;
storyContainer.replaceChildren(header, embed);
gobi.discover({ apiBaseUrl: runConfig.apiBaseUrl });
}
apiForm.addEventListener('submit', async (e) => {
e.preventDefault();
await loadData();
});
teamsSelect.addEventListener('change', updateCollectionsAndStories);
collectionsSelect.addEventListener('change', () => (updateSummary(), renderCollection()));
storiesSelect.addEventListener('change', () => (updateSummary(), renderStory()));
</script>
</body>
</html>