mirror of
https://github.com/scratchfoundation/scratchx.git
synced 2025-02-17 11:30:15 -05:00
Add methods to set/show/get short urls
This commit is contained in:
Ray Schamp
parent
32bb28fff0
commit
295ecff723
11 changed files with 164 additions and 47 deletions
|
|
@ -691,7 +691,7 @@ picture {
|
|||
padding-top: 0.6em;
|
||||
text-align: left;
|
||||
visibility: hidden;
|
||||
z-index: 99999999999; }
|
||||
z-index: 99999; }
|
||||
@media screen and (min-width: 60em) {
|
||||
.modal .modal-fade-screen {
|
||||
padding-top: 10em; } }
|
||||
|
|
@ -708,7 +708,7 @@ picture {
|
|||
right: 0.75em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
background: #fff;
|
||||
background: transparent;
|
||||
cursor: pointer; }
|
||||
.modal .modal-close:after, .modal .modal-close:before {
|
||||
position: absolute;
|
||||
|
|
@ -1000,24 +1000,24 @@ body > section {
|
|||
body #home {
|
||||
display: block; }
|
||||
|
||||
#dialogs, .modal-inner {
|
||||
#dialogs, #modal-dialogs {
|
||||
display: block; }
|
||||
#dialogs::after, .modal-inner::after {
|
||||
#dialogs::after, #modal-dialogs::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#dialogs dialog, .modal-inner dialog {
|
||||
#dialogs dialog, #modal-dialogs dialog {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 32.5%; }
|
||||
#dialogs dialog:last-child, .modal-inner dialog:last-child {
|
||||
#dialogs dialog:last-child, #modal-dialogs dialog:last-child {
|
||||
margin-right: 0; }
|
||||
#dialogs dialog p, .modal-inner dialog p {
|
||||
#dialogs dialog p, #modal-dialogs dialog p {
|
||||
text-align: center; }
|
||||
|
||||
#modal-dialogs .modal-inner {
|
||||
background-color: transparent; }
|
||||
.modal .single {
|
||||
width: 50%; }
|
||||
|
||||
.extension-file section:first-child {
|
||||
/* Add a border equal to the number of featured extensions - 1 */
|
||||
|
|
@ -1084,26 +1084,26 @@ body #home {
|
|||
|
||||
.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; }
|
||||
.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; }
|
||||
.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;
|
||||
padding: 0.75em; }
|
||||
.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;
|
||||
display: block;
|
||||
padding-right: 25px; }
|
||||
.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: "";
|
||||
font-family: "ScratchX";
|
||||
speak: none;
|
||||
|
|
@ -1124,13 +1124,13 @@ body #home {
|
|||
font-size: 1.5em; }
|
||||
.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-weight: 600;
|
||||
margin-bottom: 0.375em; }
|
||||
.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;
|
||||
margin: 0;
|
||||
color: #58595b;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
44
index.html
44
index.html
|
|
@ -5,8 +5,6 @@
|
|||
<title>ScratchX</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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>
|
||||
<body>
|
||||
<main>
|
||||
|
|
@ -248,19 +246,37 @@
|
|||
</section>
|
||||
<script type="text/template" id="template-warning">
|
||||
<div>
|
||||
<header><a class="modal-close" href="#"></a></header>
|
||||
<section class="warning">
|
||||
<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>
|
||||
</section>
|
||||
<section>
|
||||
<button data-action="show" data-target="#home">Back to ScratchX home</button>
|
||||
<button class="success">I understand, continue</button>
|
||||
</section>
|
||||
<header><a class="modal-close" href="#"></a></header>
|
||||
<section class="warning">
|
||||
<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>
|
||||
</section>
|
||||
<section>
|
||||
<button data-action="show" data-target="#home">Back to ScratchX home</button>
|
||||
<button class="success">I understand, continue</button>
|
||||
</section>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/javascript" src="libs/base64ab.js"></script>
|
||||
<script type="text/javascript" src="scratch_extensions/scratch_ext.js"></script>
|
||||
<script type="text/javascript" src="js/scratchx.js"></script>
|
||||
<script type="text/template" id="template-short-url">
|
||||
<dialog class="single">
|
||||
<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>
|
||||
</html>
|
||||
|
|
|
|||
103
js/scratchx.js
103
js/scratchx.js
|
|
@ -3,6 +3,12 @@ var Scratch = Scratch || {};
|
|||
Scratch.FlashApp = Scratch.FlashApp || {};
|
||||
|
||||
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) {
|
||||
$('#scratch-loader').hide();
|
||||
|
|
@ -214,21 +220,24 @@ function loadFromURLParameter(queryString) {
|
|||
|
||||
/* Modals */
|
||||
|
||||
function getOrCreateFromTemplate(elementId, templateId, elementType, appendTo, wrapper) {
|
||||
elementType = elementType ? elementType : "div";
|
||||
function getOrCreateFromTemplate(elementId, templateId, elementType, appendTo, wrapper, data) {
|
||||
elementType = elementType || "div";
|
||||
appendTo = appendTo || "body";
|
||||
data = data || {};
|
||||
|
||||
var $element = $("#" + elementId);
|
||||
if (!$element.length) {
|
||||
$template = $("#" + templateId);
|
||||
$template = _.template($("#" + templateId).html());
|
||||
$element = $("<"+elementType+"></"+elementType+">")
|
||||
.attr("id", elementId)
|
||||
.html($template.html());
|
||||
.html($template(data));
|
||||
if (wrapper) $element.wrapInner(wrapper);
|
||||
$element.appendTo(appendTo)
|
||||
}
|
||||
return $element;
|
||||
};
|
||||
|
||||
function showModal(templateId) {
|
||||
function showModal(templateId, data) {
|
||||
/*
|
||||
* Copies the HTML referenced by data-template into a new element,
|
||||
* with id="modal-[template value]" and creates an overlay on the
|
||||
|
|
@ -238,23 +247,26 @@ function showModal(templateId) {
|
|||
var zIndex = 100;
|
||||
var modalId = "modal-" + templateId;
|
||||
$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-fade-screen", $modal)
|
||||
.addClass("visible")
|
||||
.click(function(e){$(this).trigger("modal:exit")});
|
||||
$(".modal-inner", $modal).click(function(e){e.stopPropagation();})
|
||||
|
||||
$("body").addClass("modal-open");
|
||||
|
||||
attachListeners();
|
||||
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("submit", ".url-load-form", triggerExit)
|
||||
$(document).on("modal:exit", function(){
|
||||
$("body").removeClass("modal-open");
|
||||
Scratch.FlashApp.ASobj.ASsetModalOverlay(false);
|
||||
$(".modal-fade-screen", $modal).removeClass("visible");
|
||||
$modal.remove();
|
||||
$(this).off();
|
||||
});
|
||||
|
||||
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(){
|
||||
$("[data-action='load-file']").on('click', loadFileListener);
|
||||
$("[data-action='load-url']").on('click', loadURLlistener);
|
||||
|
|
@ -348,13 +422,22 @@ function attachListeners(){
|
|||
$("[data-action='show']").on('click', showClickListener);
|
||||
}
|
||||
|
||||
var initialID = "home";
|
||||
function initPage() {
|
||||
/*
|
||||
* On load, show the page identified by the URL fragment. Default to #home.
|
||||
*/
|
||||
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);
|
||||
loadFromURLParameter(window.location.search);
|
||||
}
|
||||
|
|
|
|||
10
libs/ZeroClipboard.min.js
vendored
Executable file
10
libs/ZeroClipboard.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
1
libs/ZeroClipboard.min.map
Executable file
1
libs/ZeroClipboard.min.map
Executable file
File diff suppressed because one or more lines are too long
BIN
libs/ZeroClipboard.swf
Executable file
BIN
libs/ZeroClipboard.swf
Executable file
Binary file not shown.
6
libs/underscore-min.js
vendored
Normal file
6
libs/underscore-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
libs/underscore-min.map
Normal file
1
libs/underscore-min.map
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,7 @@
|
|||
$large-screen: em(860) !default;
|
||||
$base-font-color: $dark-gray !default;
|
||||
$modal-padding: 3em;
|
||||
$modal-background: $base-background-color;
|
||||
$modal-background: transparent;
|
||||
$modal-close-color: $light-gray;
|
||||
$modal-image-height: 135px;
|
||||
$modal-image-width: $modal-image-height;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
padding-top: 0.6em;
|
||||
text-align: left;
|
||||
visibility: hidden;
|
||||
z-index: 99999999999;
|
||||
z-index: 99999;
|
||||
|
||||
@include media($large-screen) {
|
||||
padding-top: 10em;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#dialogs, .modal-inner {
|
||||
#dialogs, #modal-dialogs {
|
||||
@include row();
|
||||
dialog {
|
||||
@include span-columns(4);
|
||||
|
|
@ -57,8 +57,8 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#modal-dialogs .modal-inner {
|
||||
background-color: transparent;
|
||||
.modal .single {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.extension-file {
|
||||
|
|
@ -99,7 +99,7 @@ body {
|
|||
|
||||
.extension-feature,
|
||||
#dialogs .extension-feature,
|
||||
#modal-dialogs .extension-feature
|
||||
.modal .extension-feature
|
||||
{
|
||||
section:first-child {
|
||||
h2 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue