scratchfoundation/scratchx
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add methods to set/show/get short urls

Browse source
This commit is contained in:
Ray Schamp 2015-05-09 14:29:40 -04:00
parent 32bb28fff0
commit 295ecff723
11 changed files with 164 additions and 47 deletions

32
css/scratchx.css
View file

@ -691,7 +691,7 @@ picture {
padding-top: 0.6em; padding-top: 0.6em;
text-align: left; text-align: left;
visibility: hidden; visibility: hidden;
z-index: 99999999999; } z-index: 99999; }
@media screen and (min-width: 60em) { @media screen and (min-width: 60em) {
.modal .modal-fade-screen { .modal .modal-fade-screen {
padding-top: 10em; } } padding-top: 10em; } }
@ -708,7 +708,7 @@ picture {
right: 0.75em; right: 0.75em;
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
background: #fff; background: transparent;
cursor: pointer; } cursor: pointer; }
.modal .modal-close:after, .modal .modal-close:before { .modal .modal-close:after, .modal .modal-close:before {
position: absolute; position: absolute;
@ -1000,24 +1000,24 @@ body > section {
body #home { body #home {
display: block; } display: block; }
#dialogs, .modal-inner { #dialogs, #modal-dialogs {
display: block; } display: block; }
#dialogs::after, .modal-inner::after { #dialogs::after, #modal-dialogs::after {
clear: both; clear: both;
content: ""; content: "";
display: table; } display: table; }
#dialogs dialog, .modal-inner dialog { #dialogs dialog, #modal-dialogs dialog {
float: left; float: left;
display: block; display: block;
margin-right: 1.25%; margin-right: 1.25%;
width: 32.5%; } width: 32.5%; }
#dialogs dialog:last-child, .modal-inner dialog:last-child { #dialogs dialog:last-child, #modal-dialogs dialog:last-child {
margin-right: 0; } margin-right: 0; }
#dialogs dialog p, .modal-inner dialog p { #dialogs dialog p, #modal-dialogs dialog p {
text-align: center; } text-align: center; }
#modal-dialogs .modal-inner { .modal .single {
background-color: transparent; } width: 50%; }
.extension-file section:first-child { .extension-file section:first-child {
/* Add a border equal to the number of featured extensions - 1 */ /* Add a border equal to the number of featured extensions - 1 */
@ -1084,26 +1084,26 @@ body #home {
.extension-feature section:first-child h2, .extension-feature section:first-child h2,
#dialogs .extension-feature section:first-child h2, #dialogs .extension-feature section:first-child h2,
#modal-dialogs .extension-feature section:first-child h2 { .modal .extension-feature section:first-child h2 {
margin-top: 0.375em; } margin-top: 0.375em; }
.extension-feature section:last-child, .extension-feature section:last-child,
#dialogs .extension-feature section:last-child, #dialogs .extension-feature section:last-child,
#modal-dialogs .extension-feature section:last-child { .modal .extension-feature section:last-child {
padding: 0px; } padding: 0px; }
.extension-feature ul li, .extension-feature ul li,
#dialogs .extension-feature ul li, #dialogs .extension-feature ul li,
#modal-dialogs .extension-feature ul li { .modal .extension-feature ul li {
border-bottom: 1px solid #dfe3e7; border-bottom: 1px solid #dfe3e7;
padding: 0.75em; } padding: 0.75em; }
.extension-feature ul li a, .extension-feature ul li a,
#dialogs .extension-feature ul li a, #dialogs .extension-feature ul li a,
#modal-dialogs .extension-feature ul li a { .modal .extension-feature ul li a {
position: relative; position: relative;
display: block; display: block;
padding-right: 25px; } padding-right: 25px; }
.extension-feature ul li a:before, .extension-feature ul li a:before,
#dialogs .extension-feature ul li a:before, #dialogs .extension-feature ul li a:before,
#modal-dialogs .extension-feature ul li a:before { .modal .extension-feature ul li a:before {
content: ""; content: "";
font-family: "ScratchX"; font-family: "ScratchX";
speak: none; speak: none;
@ -1124,13 +1124,13 @@ body #home {
font-size: 1.5em; } font-size: 1.5em; }
.extension-feature ul li h3, .extension-feature ul li h3,
#dialogs .extension-feature ul li h3, #dialogs .extension-feature ul li h3,
#modal-dialogs .extension-feature ul li h3 { .modal .extension-feature ul li h3 {
font-size: 1.125em; font-size: 1.125em;
font-weight: 600; font-weight: 600;
margin-bottom: 0.375em; } margin-bottom: 0.375em; }
.extension-feature ul li p, .extension-feature ul li p,
#dialogs .extension-feature ul li p, #dialogs .extension-feature ul li p,
#modal-dialogs .extension-feature ul li p { .modal .extension-feature ul li p {
text-align: left; text-align: left;
margin: 0; margin: 0;
color: #58595b; color: #58595b;

2
css/scratchx.css.map
View file

File diff suppressed because one or more lines are too long

44
index.html
View file

@ -5,8 +5,6 @@
<title>ScratchX</title> <title>ScratchX</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/scratchx.css" rel="stylesheet" type="text/css"> <link href="css/scratchx.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="libs/swfobject.js"></script>
<script type="text/javascript" src="libs/jquery-1.11.2.min.js"></script>
</head> </head>
<body> <body>
<main> <main>
@ -248,19 +246,37 @@
</section> </section>
<script type="text/template" id="template-warning"> <script type="text/template" id="template-warning">
<div> <div>
<header><a class="modal-close" href="#"></a></header> <header><a class="modal-close" href="#"></a></header>
<section class="warning"> <section class="warning">
<h2>Warning: all extensions are experimental</h2> <h2>Warning: all extensions are experimental</h2>
<p>Content on this site is <strong>not</strong> a product of the Scratch Team. Please use caution when using publically created extensions. <a href="#faq">Learn More</a></p> <p>Content on this site is <strong>not</strong> a product of the Scratch Team. Please use caution when using publically created extensions. <a href="#faq">Learn More</a></p>
</section> </section>
<section> <section>
<button data-action="show" data-target="#home">Back to ScratchX home</button> <button data-action="show" data-target="#home">Back to ScratchX home</button>
<button class="success">I understand, continue</button> <button class="success">I understand, continue</button>
</section> </section>
</div> </div>
</script> </script>
<script type="text/javascript" src="libs/base64ab.js"></script> <script type="text/template" id="template-short-url">
<script type="text/javascript" src="scratch_extensions/scratch_ext.js"></script> <dialog class="single">
<script type="text/javascript" src="js/scratchx.js"></script> <section>
<h2>Short URL</h2>
</section>
<section>
<p>Click to copy the short url for this project</p>
<div class="input-plus-button">
<input type="text" value="<%- shortUrl %>" name="shortUrl" disabled />
<button data-clipboard-text="<%- shortUrl %>">Copy</button>
</div>
</section>
</dialog>
</script>
<script type="text/javascript" src="libs/base64ab.js" async></script>
<script type="text/javascript" src="libs/swfobject.js" defer></script>
<script type="text/javascript" src="libs/jquery-1.11.2.min.js" defer></script>
<script type="text/javascript" src="libs/underscore-min.js" async></script>
<script type="text/javascript" src="libs/ZeroClipboard.min.js" defer></script>
<script type="text/javascript" src="scratch_extensions/scratch_ext.js" async></script>
<script type="text/javascript" src="js/scratchx.js" async defer></script>
</body> </body>
</html> </html>

103
js/scratchx.js
View file

@ -3,6 +3,12 @@ var Scratch = Scratch || {};
Scratch.FlashApp = Scratch.FlashApp || {}; Scratch.FlashApp = Scratch.FlashApp || {};
var editorId = "scratch"; var editorId = "scratch";
var initialID = "home";
var ShortURL = {
key : "AIzaSyBlaftRUIOLFVs8nfrWvp4IBrqq9-az46A",
api : "https://www.googleapis.com/urlshortener/v1/url",
domain : "http://goo.gl"
}
function handleEmbedStatus(e) { function handleEmbedStatus(e) {
$('#scratch-loader').hide(); $('#scratch-loader').hide();
@ -214,21 +220,24 @@ function loadFromURLParameter(queryString) {
/* Modals */ /* Modals */
function getOrCreateFromTemplate(elementId, templateId, elementType, appendTo, wrapper) { function getOrCreateFromTemplate(elementId, templateId, elementType, appendTo, wrapper, data) {
elementType = elementType ? elementType : "div"; elementType = elementType || "div";
appendTo = appendTo || "body";
data = data || {};
var $element = $("#" + elementId); var $element = $("#" + elementId);
if (!$element.length) { if (!$element.length) {
$template = $("#" + templateId); $template = _.template($("#" + templateId).html());
$element = $("<"+elementType+"></"+elementType+">") $element = $("<"+elementType+"></"+elementType+">")
.attr("id", elementId) .attr("id", elementId)
.html($template.html()); .html($template(data));
if (wrapper) $element.wrapInner(wrapper); if (wrapper) $element.wrapInner(wrapper);
$element.appendTo(appendTo) $element.appendTo(appendTo)
} }
return $element; return $element;
}; };
function showModal(templateId) { function showModal(templateId, data) {
/* /*
* Copies the HTML referenced by data-template into a new element, * Copies the HTML referenced by data-template into a new element,
* with id="modal-[template value]" and creates an overlay on the * with id="modal-[template value]" and creates an overlay on the
@ -238,23 +247,26 @@ function showModal(templateId) {
var zIndex = 100; var zIndex = 100;
var modalId = "modal-" + templateId; var modalId = "modal-" + templateId;
$modalwrapper = $("<div class='modal-fade-screen'><div class='modal-inner'></div></div>"); $modalwrapper = $("<div class='modal-fade-screen'><div class='modal-inner'></div></div>");
var $modal = getOrCreateFromTemplate(modalId, templateId, "dialog", "body", $modalwrapper); var $modal = getOrCreateFromTemplate(modalId, templateId, "dialog", "body", $modalwrapper, data);
$modal.addClass("modal"); $modal.addClass("modal");
$(".modal-fade-screen", $modal) $(".modal-fade-screen", $modal)
.addClass("visible") .addClass("visible")
.click(function(e){$(this).trigger("modal:exit")}); .click(function(e){$(this).trigger("modal:exit")});
$(".modal-inner", $modal).click(function(e){e.stopPropagation();})
$("body").addClass("modal-open"); $("body").addClass("modal-open");
attachListeners(); attachListeners();
var triggerExit = function (e) {$(this).trigger("modal:exit");} var triggerExit = function (e) {$(this).trigger("modal:exit");}
$(".modal-inner", $modal).click(function(e){e.stopPropagation();})
$(document).on("click", "[data-action='load-file'], [data-action='load-url'], [data-action='show']", triggerExit); $(document).on("click", "[data-action='load-file'], [data-action='load-url'], [data-action='show']", triggerExit);
$(document).on("submit", ".url-load-form", triggerExit) $(document).on("submit", ".url-load-form", triggerExit)
$(document).on("modal:exit", function(){ $(document).on("modal:exit", function(){
$("body").removeClass("modal-open"); $("body").removeClass("modal-open");
Scratch.FlashApp.ASobj.ASsetModalOverlay(false); Scratch.FlashApp.ASobj.ASsetModalOverlay(false);
$(".modal-fade-screen", $modal).removeClass("visible"); $modal.remove();
$(this).off(); $(this).off();
}); });
return $modal; return $modal;
} }
@ -341,6 +353,68 @@ function showPage(path) {
} }
} }
/* URL Shortening */
function shorten(url, done) {
var data = {longUrl: url};
$.ajax({
url : ShortURL.api + '?' + $.param({key : ShortURL.key}),
type : "post",
data : JSON.stringify(data),
dataType : "json",
contentType : "application/json"
}).done(done);
}
function getUrlFor(extensions) {
return document.location.origin + '/?' + $.param(
extensions.map(function(url){
return {name: 'url', value: url}
})
);
}
function UrlParser(url) {
parser = document.createElement('a');
parser.href = url;
return parser
}
function showShortUrl(url) {
shorten(url, function(data) {
var parser = UrlParser(data.id);
var id = parser.pathname.replace('/', '');
parser.href = window.location.origin;
parser.hash = "#!" + id;
var shortUrl = parser.href;
var context = {
longUrl : data.longUrl,
shortUrl : shortUrl
}
$modal = showModal("template-short-url", context);
var client = new ZeroClipboard($('button', $modal));
});
}
function JSshowShortUrlFor() {
showShortUrl(getUrlFor(Array.prototype.slice.call(arguments)));
}
function decompress(id, done) {
var data = {shortUrl: ShortURL.domain + id}
$.ajax({
url : ShortURL.api + '?' + $.param({
key : ShortURL.key,
shortUrl : ShortURL.domain + '/' + id}),
dataType : "json",
contentType : "application/json"
}).done(done);
}
/* Setup */
function attachListeners(){ function attachListeners(){
$("[data-action='load-file']").on('click', loadFileListener); $("[data-action='load-file']").on('click', loadFileListener);
$("[data-action='load-url']").on('click', loadURLlistener); $("[data-action='load-url']").on('click', loadURLlistener);
@ -348,13 +422,22 @@ function attachListeners(){
$("[data-action='show']").on('click', showClickListener); $("[data-action='show']").on('click', showClickListener);
} }
var initialID = "home";
function initPage() { function initPage() {
/* /*
* On load, show the page identified by the URL fragment. Default to #home. * On load, show the page identified by the URL fragment. Default to #home.
*/ */
attachListeners(); attachListeners();
if (window.location.hash) initialID = window.location.hash.substr(1); if (window.location.hash) {
if (window.location.hash.charAt(1) == "!") {
decompress(window.location.hash.substr(2), function(data) {
var parser = UrlParser(data.longUrl);
if (parser.hostname == window.location.hostname) window.location = data.longUrl;
return;
});
} else {
initialID = window.location.hash.substr(1);
}
}
showPage(initialID); showPage(initialID);
loadFromURLParameter(window.location.search); loadFromURLParameter(window.location.search);
} }

10
libs/ZeroClipboard.min.js vendored Executable file
View file

File diff suppressed because one or more lines are too long

1
libs/ZeroClipboard.min.map Executable file
View file

File diff suppressed because one or more lines are too long

BIN
libs/ZeroClipboard.swf Executable file
View file

Binary file not shown.

6
libs/underscore-min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
libs/underscore-min.map Normal file
View file

File diff suppressed because one or more lines are too long

4
sass/base/_modal.scss
View file

@ -11,7 +11,7 @@
$large-screen: em(860) !default; $large-screen: em(860) !default;
$base-font-color: $dark-gray !default; $base-font-color: $dark-gray !default;
$modal-padding: 3em; $modal-padding: 3em;
$modal-background: $base-background-color; $modal-background: transparent;
$modal-close-color: $light-gray; $modal-close-color: $light-gray;
$modal-image-height: 135px; $modal-image-height: 135px;
$modal-image-width: $modal-image-height; $modal-image-width: $modal-image-height;
@ -45,7 +45,7 @@
padding-top: 0.6em; padding-top: 0.6em;
text-align: left; text-align: left;
visibility: hidden; visibility: hidden;
z-index: 99999999999; z-index: 99999;
@include media($large-screen) { @include media($large-screen) {
padding-top: 10em; padding-top: 10em;

8
sass/scratchx.scss
View file

@ -47,7 +47,7 @@ body {
} }
} }
#dialogs, .modal-inner { #dialogs, #modal-dialogs {
@include row(); @include row();
dialog { dialog {
@include span-columns(4); @include span-columns(4);
@ -57,8 +57,8 @@ body {
} }
} }
#modal-dialogs .modal-inner { .modal .single {
background-color: transparent; width: 50%;
} }
.extension-file { .extension-file {
@ -99,7 +99,7 @@ body {
.extension-feature, .extension-feature,
#dialogs .extension-feature, #dialogs .extension-feature,
#modal-dialogs .extension-feature .modal .extension-feature
{ {
section:first-child { section:first-child {
h2 { h2 {