Skip to content
This repository was archived by the owner on Jun 23, 2018. It is now read-only.

Embeddable repl #127

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Embeddable repl #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ac572c9
provide embedded iframe info, preview functionality
Dec 14, 2014
701384e
add 'return' after url handling
Dec 14, 2014
d6d2c4f
implements header/footer hiding for embedding purposes
Dec 14, 2014
7e4a616
updates the styles for embedded REPL code
Dec 14, 2014
228a335
removes extra space
Jan 21, 2015
4f38c9f
Remove unless statement modifier and use if block
Jan 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,7 @@ and (max-device-width : 480px) {
background: #FFF;
width: 591px;
position: absolute;
height: 100%;
height: 100%;
left: 0px;
bottom: 0;
}
Expand Down Expand Up @@ -1092,7 +1092,7 @@ and (max-device-width : 480px) {
/* Save */

#save-box {
height: 85px;
height: 150px;
width: 181px;
border: 1px #ccc solid;
position: absolute;
Expand Down Expand Up @@ -1161,6 +1161,13 @@ and (max-device-width : 480px) {
color: #666;
}

#save-box textarea {
border: 1px #ccc solid;
padding: 2px;
width: 180px;
color: #666;
}

#save-box .downloads li {
margin-top: -4px;
}
Expand All @@ -1171,6 +1178,12 @@ and (max-device-width : 480px) {
font-size: 75%;
}

#save-box a {
color: #0E157F;
text-decoration: none;
font-size: 75%;
}

.tooltip {
position: absolute;
z-index: 1020;
Expand Down
18 changes: 18 additions & 0 deletions embed-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style>
div { background: blue; }
</style>
<script>
$(function(){
var decodedEmbed = decodeURIComponent(window.location.search.split("=")[1]);
$('#embed-preview').html(decodedEmbed);
});
</script>
</head>
<body>
<div id="embed-preview">
</div>
</body>
</html>
3 changes: 3 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,9 @@ <h2 class="content-title">About Us</h2>
<li class="share-social gplus"><a href="#"></a></li>
</ul>
<input id="save-box-link" type="text" value="" />
<label for="save-box-embed">Embed:</label>
<textarea id="save-box-embed"></textarea>
<a href="#" target="_blank" id="save-box-embed-test">View embed on test page.</a>
<label>Download:</label>
<ul class="downloads">
<li><a class="editor" href="#">Editor content</a></li>
Expand Down
1 change: 1 addition & 0 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ var httpCb = function (req, res) {

if(inMemorySaved[uriFirstPiece]) {
restoreFakeSession(uriFirstPiece, res);
return;
}
var filename = path.join(process.cwd(), uri);;

Expand Down
9 changes: 8 additions & 1 deletion src/dom.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ $.fn.enableSelection = ->
'user-select': ''
$this.each -> this.onselectstart = null

isEmbed = ->
window.location.search == "?embed=true"

$.extend REPLIT,
RESIZER_WIDTH: RESIZER_WIDTH
Expand All @@ -52,6 +54,9 @@ $.extend REPLIT,
last_progress_ratio: 0
# Initialize the DOM (Runs before JSRPEL's load)
InitDOM: ->
if isEmbed()
$("#header").hide()
$("#footer").hide()
@$doc_elem = $ 'html'
# The main container holding the pages.
@$container = $ '#main'
Expand Down Expand Up @@ -254,7 +259,9 @@ $.extend REPLIT,
# Calculate container height and width.
documentWidth = document.documentElement.clientWidth
documentHeight = document.documentElement.clientHeight
height = documentHeight - HEADER_HEIGHT - FOOTER_HEIGHT
height = documentHeight
if !isEmbed()
height -= (HEADER_HEIGHT + FOOTER_HEIGHT)
width = documentWidth - @content_padding
innerWidth = width - 2 * RESIZER_WIDTH

Expand Down
8 changes: 8 additions & 0 deletions src/session.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,13 @@ $ ->
$savebox.find('li.facebook a').replaceWith SHARE_TEMPLATE.facebook()
$savebox.find('li.gplus a').replaceWith SHARE_TEMPLATE.gplus()
$savebox.find('input').val window.location.href
iframe_val = """
<iframe width="100%" height="300" src="#{window.location.href}?embed=true" frameborder="0"></iframe>
"""
$savebox.find('textarea').val iframe_val

preview_link = "/embed-preview.html?embedded=#{encodeURIComponent(iframe_val)}"
$savebox.find('#save-box-embed-test').attr('href', preview_link)
$savebox.find('.downloads a.editor').attr 'href', "/download/editor/#{session_id}/#{revision_id}/"
$savebox.find('.downloads a.repl').attr 'href', "/download/repl/#{session_id}/#{revision_id}/"
$savebox.slideDown()
Expand All @@ -183,6 +190,7 @@ $ ->
bindSaveButton()

$('#save-box input').click -> $(this).select()
$('#save-box textarea').click -> $(this).select()
# When any command is evaled, save it in the eval_history array of the session
# object, in order to send it to the server on save.
REPLIT.$this.bind 'eval', (e, command) ->
Expand Down