@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
164 lines (140 loc) • 4.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>
.examples {
display: flex;
justify-content: center;
}
</style>
<script type="text/javascript" src="../index.js?v=d85e77"></script></head>
<body id="page-body">
<div id="host-page">
<h1>Invasive CSS - Shadow DOM test</h1>
<p>If the DOM is not isolated, a customer's CSS can apply to our components.
This results in the Bubble looking wrong, for example:
<ul>
<li>logos and controls are moved around by margin/padding</li>
<li>images or divs have wrong sizing</li>
<li>Items have wrong colors</li>
</ul>
To avoid this, the bubble's DOM can be isolated with a Shadow DOM root.
Both the bubbles and the player can be affected.
</p>
<p>
In the examples below, CSS is applied to make the following changes:
<ul>
<li>Change the stroke color of the bubble circle to pink.</li>
<li>Reduce the font size of the title to 12px.</li>
<li>Desaturate the thumbnail image.</li>
</ul>
</p>
<p>
When opening players, CSS is applied to make the following changes:
<ul>
<li>The video is desaturated.</li>
<li>SVG images have a pink stroke and fill, including the gobi logo.</li>
<li>Buttons have a red, dashed outline.</li>
<li>Buttons have a large bottom margin, pushing them upwards.</li>
<li>Stickers have a pink background.</li>
<li>Buttons have a label attached with the text 'Invasive'.</li>
</ul>
</p>
<p>
When shadowDom is enabled and correctly implemented, none of the above changes should be applied.
</p>
<div class="examples">
<div id="gobi-no-shadow-dom" class="gobi-container"></div>
<script>
new gobi.Bubbles({
container: '#gobi-no-shadow-dom',
bubbleSize: '170px',
color: '#BD00FE',
animatedBubble: true,
autoSegue: true,
playerOptions: {
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
disableShadowDom: true,
stories: [
{ id: 'demo02', title: 'No Shadow Dom' },
]
});
</script>
<div id="gobi-shadow-dom" class="gobi-container"></div>
<script>
new gobi.Bubbles({
container: '#gobi-shadow-dom',
bubbleSize: '170px',
color: '#2ba6fc',
animatedBubble: true,
autoSegue: true,
playerOptions: {
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
disableShadowDom: false,
stories: [
{ id: 'demo02', title: 'With Shadow Dom' },
]
});
</script>
</div>
</div>
<style>
/** This is the invasive CSS against bubbles. */
.gobi-container svg {
stroke: rgb(89.4%, 5.9%, 86.5%);
}
.gobi-container span {
font-size: 12px;
color: rgb(89.4%, 5.9%, 86.5%);
}
.gobi-container div {
content: "OVERWRITTEN";
display: block;
}
.gobi-container img {
filter: saturate(0);
}
</style>
<style>
/** This is the invasive CSS against player. */
video {
filter: saturate(0);
}
svg {
stroke: rgb(89.4%, 5.9%, 86.5%);
}
path {
fill: rgb(89.4%, 5.9%, 86.5%);
}
/* Target with id */
#page-body button:not([type="submit"]) {
outline: dashed 3px red;
}
button:not([type="submit"]) {
margin-bottom: 120px;
}
img {
background: rgb(89.4%, 5.9%, 86.5%);
}
/* Target ::after */
button::after {
content: 'Invasive';
position: relative;
right: -15px;
bottom: -15px;
border-radius: 5px;
background: palevioletred;
padding: 0.5em;
color: white;
}
</style>
</body>
</html>