Skip to content
This repository has been 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 4 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
16 changes: 15 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
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,13 @@ and (max-device-width : 480px) {
font-size: 75%;
}

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


Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extra space here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh yeah, I meant to suggest using a feature flag. Will add one soon.

On Thu, Dec 18, 2014 at 3:09 PM, Amjad Masad [email protected]
wrote:

In css/style.css
#127 (diff):

@@ -1171,6 +1178,13 @@ and (max-device-width : 480px) {
font-size: 75%;
}

+#save-box a {

  • color: #0E157F;
  • text-decoration: none;
  • font-size: 75%;
    +}

extra space here

—
Reply to this email directly or view it on GitHub
https://github.com/replit/repl.it/pull/127/files#r22067666.

.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
8 changes: 7 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,8 @@ $.extend REPLIT,
# Calculate container height and width.
documentWidth = document.documentElement.clientWidth
documentHeight = document.documentElement.clientHeight
height = documentHeight - HEADER_HEIGHT - FOOTER_HEIGHT
height = documentHeight
height -= (HEADER_HEIGHT + FOOTER_HEIGHT) unless isEmbed()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use if instead of unless? (it's pretty unnatural way to read code, imo)

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