Skip to content

Instantly share code, notes, and snippets.

@stormsweeper

stormsweeper/index.html

Created December 6, 2017 16:38
Show Gist options
  • Save stormsweeper/e0ef59401cae9da7f7a595087eb300d1 to your computer and use it in GitHub Desktop.
Save stormsweeper/e0ef59401cae9da7f7a595087eb300d1 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=e0ef59401cae9da7f7a595087eb300d1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Popcode Gist Opener</title>
</head>
<body>
<p>Copy the URL for your gist into the field below, then click the button to create a link to open it in popcode.</p>
<div>
<label for="gist-url">Gist URL:</label>
<input name="gist-ur" id="gist-url" size="50">
<button id="open-gist">Open in Popcode</button>
</div>
<a href="#" id="popcode-link" target="_blank">CLICK HERE TO OPEN</a>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
$("#open-gist").click(function() {
$("#popcode-link").hide();
// read the field into a variable
var url = $("#gist-url").val().trim();
// check that it looks like a gist URL
var regex = /^https:\/\/gist.github.com\/[\w\-]+\/(\w+)/;
var match = regex.exec(url);
if (!match) {
alert("You must provide a gist URL in the field.");
} else {
var popcodeURL = "https://popcode.org/?gist=" + match[1];
$("#popcode-link").attr("href", popcodeURL);
$("#popcode-link").css("display", "inline-block");
}
});
Raw
styles.css
body {
font-family: sans-serif;
}
#popcode-link {
display: none;
background: lime;
color: white;
padding: 0.5em 1em;
margin: 1em;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment