@gobistories/gobi-web-integration
Version:
This library will let you put your Gobi stories on your site.
269 lines (256 loc) • 7.53 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>
.base-style {
font-family: "Oswald";
margin-bottom: 2rem;
color: indigo;
font-size: 20px;
}
.off {
color: red;
}
.on {
color: green;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<script type="text/javascript" src="../index.js?v=d85e77"></script></head>
<body>
<div class="base-style">
<h2>No Inheritance with Defaults</h2>
<ul>
<li>Inheritance: <span class="off">OFF</span></li>
<li>Text Options: <span class="off">NONE</span></li>
</ul>
<div id="no-inheritance-defaults"></div>
<script>
new gobi.Bubbles({
container: '#no-inheritance-defaults',
bubbleSize: '170px',
color: '#BD00FE',
animatedBubble: true,
disableShadowDom: false,
autoSegue: true,
showEmptyStories: true,
playerOptions: {
autoStart: true,
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
stories: [
{ id: 'demo13' },
{ id: 'demo19' },
{ id: 'demo20' },
{ id: 'empty', title: 'Intentionally Empty' },
],
});
</script>
</div>
<div class="base-style">
<h2>Font Family Inheritance with Defaults</h2>
<ul>
<li>Inheritance: <span class="on">Font Family</span></li>
<li>Text Options: <span class="off">NONE</span></li>
</ul>
<div id="with-font-family"></div>
<script>
new gobi.Bubbles({
container: '#with-font-family',
bubbleSize: '170px',
color: '#BD00FE',
animatedBubble: true,
disableShadowDom: false,
inheritTextFontFamily: true,
autoSegue: true,
showEmptyStories: true,
playerOptions: {
autoStart: true,
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
stories: [
{ id: 'demo13' },
{ id: 'demo19' },
{ id: 'demo20' },
{ id: 'empty', title: 'Intentionally Empty' },
],
});
</script>
</div>
<div class="base-style">
<h2>Full Text Style Inheritance with Defaults</h2>
<ul>
<li>Inheritance: <span class="on">ON</span></li>
<li>Text Options: <span class="off">NONE</span></li>
</ul>
<div id="with-inheritance"></div>
<script>
new gobi.Bubbles({
container: '#with-inheritance',
bubbleSize: '170px',
color: '#BD00FE',
animatedBubble: true,
disableShadowDom: false,
inheritTextStyles: true,
autoSegue: true,
showEmptyStories: true,
playerOptions: {
autoStart: true,
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
stories: [
{ id: 'demo13' },
{ id: 'demo19' },
{ id: 'demo20' },
{ id: 'empty', title: 'Intentionally Empty' },
],
});
</script>
</div>
<div class="base-style">
<h2>Font Family Inheritance and Text Option Overrides</h2>
<ul>
<li>Inheritance: <span class="on">Font Family</span></li>
<li>Text Options: <span class="on">ALL</span></li>
</ul>
<div id="font-family-inheritance-text-options"></div>
<script>
new gobi.Bubbles({
container: '#font-family-inheritance-text-options',
bubbleSize: '170px',
color: '#BD00FE',
animatedBubble: true,
disableShadowDom: false,
inheritTextFontFamily: true,
autoSegue: true,
showEmptyStories: true,
titleFontSize: '25px',
titleFontColor: 'orange',
titleFontFamily: 'Roboto Mono',
titleFontWeight: 'bold',
showEmptyStories: true,
playerOptions: {
autoStart: true,
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
stories: [
{ id: 'demo13' },
{ id: 'demo19' },
{ id: 'demo20' },
{ id: 'empty', title: 'Intentionally Empty' },
],
});
</script>
</div>
<div class="base-style">
<h2>No Inheritance with Text Options</h2>
<ul>
<li>Inheritance: <span class="off">OFF</span></li>
<li>Text Options: <span class="on">ALL</span></li>
</ul>
<div id="no-inheritance-text-options"></div>
<script>
new gobi.Bubbles({
container: '#no-inheritance-text-options',
bubbleSize: '170px',
color: '#BD00FE',
animatedBubble: true,
disableShadowDom: false,
inheritTextStyles: true,
autoSegue: true,
showEmptyStories: true,
titleFontSize: '25px',
titleFontColor: 'orange',
titleFontFamily: 'Roboto Mono',
titleFontWeight: 'bold',
showEmptyStories: true,
playerOptions: {
autoStart: true,
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
stories: [
{ id: 'demo13' },
{ id: 'demo19' },
{ id: 'demo20' },
{ id: 'empty', title: 'Intentionally Empty' },
],
});
</script>
</div>
<div class="base-style">
<h2>Full Text Style Inheritance and Text Option Overrides</h2>
<ul>
<li>Inheritance: <span class="on">ON</span></li>
<li>Text Options: <span class="on">ALL</span></li>
</ul>
<div id="inheritance-and-text-options"></div>
<script>
new gobi.Bubbles({
container: '#inheritance-and-text-options',
bubbleSize: '170px',
color: '#BD00FE',
animatedBubble: true,
disableShadowDom: false,
inheritTextStyles: true,
autoSegue: true,
showEmptyStories: true,
titleFontSize: '25px',
titleFontColor: 'orange',
titleFontFamily: 'Roboto Mono',
titleFontWeight: 'bold',
playerOptions: {
autoStart: true,
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
stories: [
{ id: 'demo13' },
{ id: 'demo19' },
{ id: 'demo20' },
{ id: 'empty', title: 'Intentionally Empty' },
],
});
</script>
</div>
<div class="base-style">
<h2>No Inheritance, No Text Options, Font Size Still Scales with Bubble Size</h2>
<ul>
<li>Inheritance: <span class="off">OFF</span></li>
<li>Text Options: <span class="off">NONE</span></li>
</ul>
<div id="text-scales"></div>
<script>
new gobi.Bubbles({
container: '#text-scales',
bubbleSize: '90px',
color: '#BD00FE',
animatedBubble: true,
disableShadowDom: false,
autoSegue: true,
showEmptyStories: true,
playerOptions: {
autoStart: true,
autoStartWithSound: true,
apiBaseUrl: runConfig.apiBaseUrl,
},
stories: [
{ id: 'demo13' },
{ id: 'demo19' },
{ id: 'demo20' },
{ id: 'empty', title: 'Intentionally Empty' },
],
});
</script>
</div>
</body>
</html>