Skip to content

GitLab

Verified Commit add811f8 authored by Marco Kellershoff's avatar Marco Kellershoff 🤸
Browse files

Add title and autorun/fullscreen to share dialog 

Also removed Google URL shortener, because it was sunsetted some time
ago and did not work anymore.
parent 14b3326a
Hide whitespace changes
Inline Side-by-side
app/assets/pwny.js
View file @ add811f8
......@@ -4,7 +4,6 @@
var Pwny = function() {
var self = this,
googleapikeys = {},
getWidth = function() {
return window.innerWidth;
},
......@@ -36,18 +35,6 @@
this.version = 3;
this.getGoogleApiKey = function(k) {
return googleapikeys[k];
};
this.getGoogleApiKeys = function() {
return googleapikeys;
};
this.setGoogleApiKeys = function(apikeys) {
googleapikeys = apikeys;
};
this.append = function(element, target) {
target = target || document.body;
if (typeof target === "string") target = document.querySelector(target);
......@@ -377,6 +364,10 @@
if (!err) {
EDITOR.setValue(result);
EDITOR.resize(true);
var title = url_params.get("title");
if (title) {
document.title = decodeURIComponent(title);
}
var line = url_params.get("l");
if (line) {
var column =
......@@ -547,42 +538,6 @@
);
};
this.initGoogleApiKeys = function(cb) {
window.$.ajax({
url: "googleapikeys.json",
method: "GET"
}).done(function(data) {
self.setGoogleApiKeys(data);
if (cb) {
cb();
}
});
};
this.shortenUrl = function(longUrl, cb) {
var apikey = self.getGoogleApiKey("urlshortener");
if (!apikey) {
self.initGoogleApiKeys(function() {
self.shortenUrl(longUrl, cb);
});
} else {
window.$.ajax({
url:
"https://www.googleapis.com/urlshortener/v1/url?key=" +
apikey,
method: "POST",
processData: false,
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
longUrl: longUrl
})
}).done(function(data) {
cb(data);
});
}
};
this.showShareWindow = function(link) {
var $shareDialogue = window.$("#shareDialogue");
var shareUrlBox = $shareDialogue.find("#shareUrlBox");
......@@ -662,6 +617,20 @@
} else {
port = ":" + port;
}
var title = window.$("#shareUrlTitle").val();
var fullscreen = window.
$("#shareUrlFullscreen").
is(":checked");
if (title.length) {
title =
"&title=" +
encodeURIComponent(title);
}
if (fullscreen) {
fullscreen = "&a=1";
} else {
fullscreen = "";
}
self.compression.compress(
EDITOR.getValue(),
function(err, result) {
......@@ -674,6 +643,8 @@
port +
"/#!/?s=" +
syntax +
title +
fullscreen +
"&c=" +
cursorPosition.column +
"&l=" +
......@@ -799,41 +770,32 @@
window.$("#shareDialogue").on(
"hidden.bs.modal",
function() {
window.$("#shortenUrlCheckbox").prop(
window.$("#shareUrlFullscreen").prop(
"checked",
false
);
}
);
window.$("#shortenUrlCheckbox").on(
window.$("#shareUrlFullscreen").on(
"change",
function() {
if (this.checked === true) {
self.shortenUrl(
window.
$("#shareUrlBox").
val(),
function(data) {
if (
data.kind ===
"urlshortener#url"
) {
window.$("#shareUrlBox").val(data.id);
}
}
);
} else {
getShareableLink({}, function(
err,
link
) {
if (err === false) {
window.$("#shareUrlBox").val(link);
}
});
}
getShareableLink({}, function(
err,
link
) {
if (err === false) {
window.$("#shareUrlBox").val(link);
}
});
}
);
window.$("#shareUrlTitle").on("keyup", function() {
getShareableLink({}, function(err, link) {
if (err === false) {
window.$("#shareUrlBox").val(link);
}
});
});
window.$(window).on("hashchange", function() {
window.location.reload();
});
......
app/index.html
View file @ add811f8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>PWNY CodeTest</title>
<meta name="theme-color" content="#272b30">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<style>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>PWNY CodeTest</title>
<meta name="theme-color" content="#272b30">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<style>
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(assets/SourceCodePro-Regular.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(assets/SourceCodePro-Regular.woff) format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html,body {overflow:hidden;background-color:#272b30;}
html,body,div,iframe {margin:0;padding:0;border:0 none;}
......@@ -34,249 +34,256 @@ html,body,div,iframe {margin:0;padding:0;border:0 none;}
#app iframe {display:block;border:1px solid #444;margin-top:0;}
html,body,#app{margin:0;padding:0;width:100%;height:100%;}
@media (max-width: 1000px) {
body #app #logo {display: none;}
body #app {margin-top: 25px;}
body #app #logo {display: none;}
body #app {margin-top: 25px;}
}
#app #table {
width: 100%;
height: calc(100% - 111px);
width: 100%;
height: calc(100% - 111px);
}
#app #table-row {
height: 100%;
height: 100%;
}
#app {
display: none;
box-sizing: border-box;
margin: 111px 0 0 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
overflow-scrolling: touch;
padding: 20px;
display: none;
box-sizing: border-box;
margin: 111px 0 0 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
overflow-scrolling: touch;
padding: 20px;
}
#col1,#col2 {height:100%;}
#col1 .ace_editor {width:100%;height:100%;}
#col2 iframe {position:relative;width:100%;height:100%;}
#app #col2 iframe.fullscreen {
position:relative;top:0;left:0;width:100%;height:100%;
border: 0 none;
margin-top: 0;
position:relative;top:0;left:0;width:100%;height:100%;
border: 0 none;
margin-top: 0;
}
#app #table.fullscreen {
height: 100%;
height: 100%;
}
#btn_run {
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
background-color: #82BF56;
border-bottom: 5px solid #669644;
text-shadow: 0px -2px #669644;
}
#file {
display:none;
display:none;
}
#btn_file {
background-color: #56bf8f;
border-bottom: 5px solid #36aa7a;
text-shadow: 0px -2px #36aa7a;
background-color: #56bf8f;
border-bottom: 5px solid #36aa7a;
text-shadow: 0px -2px #36aa7a;
}
#btn_add {
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
background-color: #F2CF66;
border-bottom: 5px solid #D1B358;
text-shadow: 0px -2px #D1B358;
}
#btn_delete {
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
background-color: #E74C3C;
border-bottom: 5px solid #BD3E31;
text-shadow: 0px -2px #BD3E31;
}
#btn_share {
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
text-shadow: 0px -2px #2980B9;
}
#templates {
background-color: #112233;
border-bottom: 5px solid #051525;
text-shadow: 0px -2px #051525;
background-color: #112233;
border-bottom: 5px solid #051525;
text-shadow: 0px -2px #051525;
}
#syntax {
background-color: #226666;
border-bottom: 5px solid #155050;
text-shadow: 0px -2px #155050;
background-color: #226666;
border-bottom: 5px solid #155050;
text-shadow: 0px -2px #155050;
}
#syntax option:checked {
background-color:#033;
background-color:#033;
}
#logo {
position: fixed;
top: 0;
width: 199px;
height: 130px;
position: fixed;
top: 0;
width: 199px;
height: 130px;
}
#drawer-toggle-label:before {
content: "";
display: block;
position: absolute;
height: 2px;
width: 24px;
background: #fff;
left: 13px;
top: 18px;
box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
content: "";
display: block;
position: absolute;
height: 2px;
width: 24px;
background: #fff;
left: 13px;
top: 18px;
box-shadow: 0 6px 0 #fff, 0 12px 0 #fff;
}
#drawer-toggle-label {
display: none;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
z-index: 1;
background: transparent;
display: none;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 50px;
z-index: 1;
background: transparent;
}
#drawer-toggle { display: none; }
#drawer {
position: fixed;
top: 0;
padding-top: 50px;
height: 100%;
width: 250px;
background: #2f2f2f;
overflow-x: hidden;
overflow-y: auto;
left: -250px;
background:"";
position: fixed;
top: 0;
padding-top: 50px;
height: 100%;
width: 250px;
background: #2f2f2f;
overflow-x: hidden;
overflow-y: auto;
left: -250px;
background:"";
}
#drawer ul {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
}
#drawer li a {
display: block;
color: #fff;
text-decoration: none;
text-align: center;
font-family: 'Source Code Pro';
display: block;
color: #fff;
text-decoration: none;
text-align: center;
font-family: 'Source Code Pro';
}
#drawer li button,
#drawer li select {
font-family: 'Source Code Pro';
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 10px;
border-radius: 10px;
font-size: 18px;
color: #FFF;
text-decoration: none;
font-family: 'Source Code Pro';
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 10px;
border-radius: 10px;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#drawer li button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
#drawer li {
margin: 0;
width: 100%;
padding: 10px 0
margin: 0;
width: 100%;
padding: 10px 0
}
#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ header { left: calc(100% - 100px); }
#drawer-toggle:checked ~ #drawer {
width: calc(100% - 50px);
left: 0;
width: calc(100% - 50px);
left: 0;
}
#drawer-toggle:checked ~ #app { margin-left: 300px; width: calc(100% - 300px); }
@media screen and (min-width: 380px) {
#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ #drawer {
width: 300px;
left: 0;
}
@media screen and (min-width: 380px) {
#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ #drawer {
width: 300px;
left: 0;
}
}
.loader {
margin: 5% auto;
display: none;
border-radius: 50%;
width: 180px;
height: 180px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
margin: 5% auto;
display: none;
border-radius: 50%;
width: 180px;
height: 180px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
border-top: 16px solid #3498DB;
border-right: 16px solid #82BF56;
border-bottom: 16px solid #E74C3C;
border-left: 16px solid #F2CF66;
border-top: 16px solid #3498DB;
border-right: 16px solid #82BF56;
border-bottom: 16px solid #E74C3C;
border-left: 16px solid #F2CF66;
}
</style>
</head>
<body>
<input id="drawer-toggle" type="checkbox">
<label id="drawer-toggle-label" for="drawer-toggle"></label>
<nav id="drawer"></nav>
<div id="loading" class="loader"></div>
<div id="app"></div>
<div style="display:none;" id="shareDialogue" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Share URL" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h5 class="modal-title">Share</h5>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" class="form-control" id="shareUrlBox" readonly="true">
<span class="input-group-btn">
<button id="copyShareUrlButton" data-dismiss="modal" data-clipboard-target="#shareUrlBox" class="btn btn-success" type="button">Copy &amp; Close</button>
</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="shortenUrlCheckbox"> Shorten URL
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="assets/ace/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/ace/src-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/lzma.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/pwny.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="assets/bootstrap/themes/slate/bootstrap.min.css" />
<script src="assets/jquery/jquery-3.2.1.min.js"></script>
<script src="assets/bootstrap/bootstrap.min.js"></script>
<script src="assets/clipboard.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiLoaded"></script>
</body>
</style>
</head>
<body>
<input id="drawer-toggle" type="checkbox">
<label id="drawer-toggle-label" for="drawer-toggle"></label>
<nav id="drawer"></nav>
<div id="loading" class="loader"></div>
<div id="app"></div>
<div style="display:none;" id="shareDialogue" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Share URL" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h5 class="modal-title">Share</h5>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" class="form-control" id="shareUrlBox" readonly="true" />
<span class="input-group-btn">
<button id="copyShareUrlButton" data-dismiss="modal" data-clipboard-target="#shareUrlBox" class="btn btn-success" type="button">Copy &amp; Close</button>
</span>
</div>
<div class="input-group">
<label>