Pym and Iframe support embed

This commit is contained in:
Belen Curcio
2016-11-17 11:40:11 -03:00
parent 032de329a6
commit c967587b95
6 changed files with 41 additions and 20 deletions
@@ -4,6 +4,7 @@ body {
width: 100%;
font-size: 12px;
margin: 0;
min-height: 700px;
}
button {
+1 -1
View File
@@ -29,7 +29,7 @@ export default function auth (state = initialState, action) {
}));
case actions.CHANGE_VIEW :
return state
.set('signUpError', '')
.set('signInError', '')
.set('view', action.view);
case actions.CLEAN_STATE:
return initialState;
+1 -2
View File
@@ -1,9 +1,8 @@
.dialog {
width: 400px;
border: none;
border: none;
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
width: 280px;
top: 10px;
}
.header {
+27 -10
View File
@@ -3,23 +3,40 @@
<meta property="og:title" content="<%= title %>" />
<meta property="og:author" content="A. J. Ournalist" />
<meta property="og:description" content="A description of this article." />
<meta property="article:published" itemprop="datePublished" content="2016-11-16T11:46:06-05:00" />
<meta property="article:modified" itemprop="dateModified" content="2016-11-16T12:09:44-05:00" />
<meta property="article:section" itemprop="articleSection" content="The Section!" />
<style>
main {
margin-left:auto;
margin-right:auto;
width:500px;
}
</style>
</head>
<body>
<div style="margin-left:auto; margin-right:auto; width:500px">
<main>
<h1><%= title %></h1>
<p>Lorem ipsum dolor sponge amet, consectetur adipiscing clam. Ut lobortis sollicitudin pillar a ornare. Curabitur dignissim vestibulum cay non rhoncus. Cras laoreet ante vel nunc hendrerit, shelf imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Talk volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non trust nec neque congue faucibus porttitor sit amet elkhorn.</p>
<p>
Lorem ipsum dolor sponge amet, consectetur adipiscing clam.
Ut lobortis sollicitudin pillar a ornare. Curabitur dignissim
vestibulum cay non rhoncus. Cras laoreet ante vel nunc hendrerit,
shelf imperdiet neque egestas. Suspendisse aliquet iaculis fermentum.
Talk volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa,
sed vehicula mauris velit non lectus. Integer non trust nec neque congue
faucibus porttitor sit amet elkhorn.
</p>
<p><a href="/admin">Visit the moderation console</a></p>
<div id='coralStreamEmbed'></div>
</main>
<div id='coralStreamEmbed'></div>
<script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>
<script>
var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
</div>
<!--- Script --->
<script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>
<script>
var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
pymParent.onMessage('height', function(height) {
document.querySelector('#coralStreamEmbed iframe').height = height + 'px';
});
</script>
</body>
</html>
+10 -6
View File
@@ -11,18 +11,22 @@
body, #root {
width: 100%;
height: 100%;
margin: 0;
background: #fff;
min-height: 600px;
margin: 0;
background: #fff;
}
</style>
</head>
<body>
<div id='coralStreamEmbed'></div>
<!--- Script --->
<script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>
<script>
var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
</div>
</body>
var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
pymParent.onMessage('height', function(height) {
document.querySelector('#coralStreamEmbed iframe').height = height + 'px';
});
</script>
</body>
</html>
+1 -1
View File
@@ -7,7 +7,7 @@
rel="stylesheet">
</head>
<body>
<div id="coralStream"/>
<div id="coralStream"></div>
<script src="/client/embed/stream/bundle.js"></script>
</body>
</html>