@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
83 lines (71 loc) • 3.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gobi - Web Integration test</title>
<script type="text/javascript" src="/dist/run-config.js"></script>
<style type="text/css">
.demo-container {
height: 225px;
}
</style>
<script type="text/javascript" src="../index.js?v=d85e77"></script></head>
<body>
<h3>Remount Observer</h3>
<p>
The remount observer detects if <code>gobi-stories</code> were re-rendered in the DOM without
Bubbles mounted. If so, it will apply Bubbles again.
</p>
<p>
On this page, a <code>gobi-stories</code> container is removed from it's parent and then
re-added without Gobi Bubbles mounted. Afterwards, another container and it's parent are
removed and re-added without Gobi Bubbles mounted.
</p>
<p>In both cases, the Bubbles are recreated and display correctly.</p>
<div class="demo-container">
<h3>This container is removed by itself and only needs it's parent element to be monitored.</h3>
<div id="child-container" class="gobi-stories" data-gobi-story="demo01" data-gobi-size="100px"></div>
</div>
<div id="parent-container" class="demo-container">
<h3>This container is removed with it's parent and needs it's grandparent element to be monitored.</h3>
<div id="remount" class="gobi-stories" data-gobi-story="demo01" data-gobi-size="100px"></div>
</div>
<script>
gobi.discover({ apiBaseUrl: runConfig.apiBaseUrl, observerDepth: 2 });
var anonymousParent;
setTimeout(() => {
console.log("Removing child container");
var childContainer = window.document.querySelector("#child-container");
anonymousParent = childContainer.parentElement;
childContainer.remove();
}, 3000);
setTimeout(() => {
console.log("Recreating child container");
var childContainer = document.createElement('div');
childContainer.classList.add("gobi-stories");
childContainer.setAttribute("data-gobi-story", "demo01");
childContainer.setAttribute("data-gobi-size", "100px");
anonymousParent.appendChild(childContainer);
}, 6000);
setTimeout(() => {
console.log("Removing parent container");
window.document.querySelector("#parent-container").remove();
}, 9000);
setTimeout(() => {
console.log("Recreating parent container");
var childContainer = document.createElement('div');
childContainer.classList.add("gobi-stories");
childContainer.setAttribute("data-gobi-story", "demo01");
childContainer.setAttribute("data-gobi-size", "100px");
var title = document.createElement("h3");
title.textContent = "This container is removed with it's parent and needs it's grandparent element to be monitored.";
var parent = document.createElement('div');
parent.id = "parent-container";
parent.appendChild(title);
parent.appendChild(childContainer);
document.querySelector("body").appendChild(parent);
}, 12000);
</script>
</body>
</html>