Commit d373853b authored by Marco Kellershoff's avatar Marco Kellershoff
Browse files

Make this pwny sexy!

parent 399d79f8
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
/*!
* clipboard.js v1.6.1
* https://zenorocha.github.io/clipboard.js
*
* Licensed MIT © Zeno Rocha
*/
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Clipboard=e()}}(function(){var e,t,n;return function e(t,n,o){function i(a,c){if(!n[a]){if(!t[a]){var l="function"==typeof require&&require;if(!c&&l)return l(a,!0);if(r)return r(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var s=n[a]={exports:{}};t[a][0].call(s.exports,function(e){var n=t[a][1][e];return i(n?n:e)},s,s.exports,e,t,n,o)}return n[a].exports}for(var r="function"==typeof require&&require,a=0;a<o.length;a++)i(o[a]);return i}({1:[function(e,t,n){function o(e,t){for(;e&&e.nodeType!==i;){if(e.matches(t))return e;e=e.parentNode}}var i=9;if("undefined"!=typeof Element&&!Element.prototype.matches){var r=Element.prototype;r.matches=r.matchesSelector||r.mozMatchesSelector||r.msMatchesSelector||r.oMatchesSelector||r.webkitMatchesSelector}t.exports=o},{}],2:[function(e,t,n){function o(e,t,n,o,r){var a=i.apply(this,arguments);return e.addEventListener(n,a,r),{destroy:function(){e.removeEventListener(n,a,r)}}}function i(e,t,n,o){return function(n){n.delegateTarget=r(n.target,t),n.delegateTarget&&o.call(e,n)}}var r=e("./closest");t.exports=o},{"./closest":1}],3:[function(e,t,n){n.node=function(e){return void 0!==e&&e instanceof HTMLElement&&1===e.nodeType},n.nodeList=function(e){var t=Object.prototype.toString.call(e);return void 0!==e&&("[object NodeList]"===t||"[object HTMLCollection]"===t)&&"length"in e&&(0===e.length||n.node(e[0]))},n.string=function(e){return"string"==typeof e||e instanceof String},n.fn=function(e){var t=Object.prototype.toString.call(e);return"[object Function]"===t}},{}],4:[function(e,t,n){function o(e,t,n){if(!e&&!t&&!n)throw new Error("Missing required arguments");if(!c.string(t))throw new TypeError("Second argument must be a String");if(!c.fn(n))throw new TypeError("Third argument must be a Function");if(c.node(e))return i(e,t,n);if(c.nodeList(e))return r(e,t,n);if(c.string(e))return a(e,t,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function i(e,t,n){return e.addEventListener(t,n),{destroy:function(){e.removeEventListener(t,n)}}}function r(e,t,n){return Array.prototype.forEach.call(e,function(e){e.addEventListener(t,n)}),{destroy:function(){Array.prototype.forEach.call(e,function(e){e.removeEventListener(t,n)})}}}function a(e,t,n){return l(document.body,e,t,n)}var c=e("./is"),l=e("delegate");t.exports=o},{"./is":3,delegate:2}],5:[function(e,t,n){function o(e){var t;if("SELECT"===e.nodeName)e.focus(),t=e.value;else if("INPUT"===e.nodeName||"TEXTAREA"===e.nodeName){var n=e.hasAttribute("readonly");n||e.setAttribute("readonly",""),e.select(),e.setSelectionRange(0,e.value.length),n||e.removeAttribute("readonly"),t=e.value}else{e.hasAttribute("contenteditable")&&e.focus();var o=window.getSelection(),i=document.createRange();i.selectNodeContents(e),o.removeAllRanges(),o.addRange(i),t=o.toString()}return t}t.exports=o},{}],6:[function(e,t,n){function o(){}o.prototype={on:function(e,t,n){var o=this.e||(this.e={});return(o[e]||(o[e]=[])).push({fn:t,ctx:n}),this},once:function(e,t,n){function o(){i.off(e,o),t.apply(n,arguments)}var i=this;return o._=t,this.on(e,o,n)},emit:function(e){var t=[].slice.call(arguments,1),n=((this.e||(this.e={}))[e]||[]).slice(),o=0,i=n.length;for(o;o<i;o++)n[o].fn.apply(n[o].ctx,t);return this},off:function(e,t){var n=this.e||(this.e={}),o=n[e],i=[];if(o&&t)for(var r=0,a=o.length;r<a;r++)o[r].fn!==t&&o[r].fn._!==t&&i.push(o[r]);return i.length?n[e]=i:delete n[e],this}},t.exports=o},{}],7:[function(t,n,o){!function(i,r){if("function"==typeof e&&e.amd)e(["module","select"],r);else if("undefined"!=typeof o)r(n,t("select"));else{var a={exports:{}};r(a,i.select),i.clipboardAction=a.exports}}(this,function(e,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=n(t),r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),c=function(){function e(t){o(this,e),this.resolveOptions(t),this.initSelection()}return a(e,[{key:"resolveOptions",value:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function e(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function e(){var t=this,n="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=document.body.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[n?"right":"left"]="-9999px";var o=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.style.top=o+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=(0,i.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function e(){this.fakeHandler&&(document.body.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function e(){this.selectedText=(0,i.default)(this.target),this.copyText()}},{key:"copyText",value:function e(){var t=void 0;try{t=document.execCommand(this.action)}catch(e){t=!1}this.handleResult(t)}},{key:"handleResult",value:function e(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function e(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function e(){this.removeFake()}},{key:"action",set:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function e(){return this._action}},{key:"target",set:function e(t){if(void 0!==t){if(!t||"object"!==("undefined"==typeof t?"undefined":r(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function e(){return this._target}}]),e}();e.exports=c})},{select:5}],8:[function(t,n,o){!function(i,r){if("function"==typeof e&&e.amd)e(["module","./clipboard-action","tiny-emitter","good-listener"],r);else if("undefined"!=typeof o)r(n,t("./clipboard-action"),t("tiny-emitter"),t("good-listener"));else{var a={exports:{}};r(a,i.clipboardAction,i.tinyEmitter,i.goodListener),i.clipboard=a.exports}}(this,function(e,t,n,o){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t){var n="data-clipboard-"+e;if(t.hasAttribute(n))return t.getAttribute(n)}var u=i(t),s=i(n),f=i(o),d=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),h=function(e){function t(e,n){r(this,t);var o=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return o.resolveOptions(n),o.listenClick(e),o}return c(t,e),d(t,[{key:"resolveOptions",value:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText}},{key:"listenClick",value:function e(t){var n=this;this.listener=(0,f.default)(t,"click",function(e){return n.onClick(e)})}},{key:"onClick",value:function e(t){var n=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new u.default({action:this.action(n),target:this.target(n),text:this.text(n),trigger:n,emitter:this})}},{key:"defaultAction",value:function e(t){return l("action",t)}},{key:"defaultTarget",value:function e(t){var n=l("target",t);if(n)return document.querySelector(n)}},{key:"defaultText",value:function e(t){return l("text",t)}},{key:"destroy",value:function e(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}],[{key:"isSupported",value:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],n="string"==typeof t?[t]:t,o=!!document.queryCommandSupported;return n.forEach(function(e){o=o&&!!document.queryCommandSupported(e)}),o}}]),t}(s.default);e.exports=h})},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)});
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(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(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:#334;}
html,body {overflow:hidden;}
html,body,div,iframe {margin:0;padding:0;border:0 none;}
button, select {font-family:"Helvetica Neue", "Calibri Light", Roboto, sans-serif;border:1px solid #333;margin:3px;font-size:1rem;padding:0.75rem 1.35rem;}
iframe {display:block;border:1px solid #444;margin-top:10px;}
#drawer button,
#drawer select {font-family:"Helvetica Neue", "Calibri Light", Roboto, sans-serif;border:1px solid #333;margin:3px;font-size:1rem;padding:0.75rem 1.35rem;}
#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 {
box-sizing: border-box;
margin: 100px 0 0 0;
width: 100%;
height: calc(100%-50px);
overflow-x: hidden;
overflow-y: auto;
overflow-scrolling: touch;
padding: 20px;
display: none;
box-sizing: border-box;
margin: 100px 0 0 0;
width: 100%;
height: calc(100%-50px);
overflow-x: hidden;
overflow-y: auto;
overflow-scrolling: touch;
padding: 20px;
}
#col1, #col2 {display:inline-block;}
#col1 {width: 49.5%;height: 100%;float:left;overflow:auto;}
......@@ -32,204 +34,169 @@ html,body,#app{margin:0;padding:0;width:100%;height:100%;}
#col2 {width: 49.5%;height: 100%;float:right;}
#col2 iframe {width: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: block;
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;
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;
border-radius: 10px;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
#drawer li button:active {
transform: translate(0px,5px);
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
border-bottom: 1px solid;
}
#drawer li {
margin: 0;
width: 100%;
padding: 10px 0
margin: 0;
width: 100%;
padding: 10px 0
}
#drawer { padding-top: 25px; }
#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; }
@media screen and (min-width: 380px) {
#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ #drawer {
width: 300px;
left: 0;
}
}
.sk-cube-grid {
width: 40px;
height: 40px;
margin: 100px auto;
}
.sk-cube-grid .sk-cube {
width: 33%;
height: 33%;
background-color: #333;
float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
-webkit-animation-delay: 0s;
animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
@-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
@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;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
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;
}
......@@ -97,85 +97,6 @@
],
'#drawer ul'
);
self.append(
self.createElement(
'div',
null,
[
['id', 'loading'],
['class', 'sk-cube-grid']
]
),
'#app'
);
self.append(
[
self.createElement(
'div',
null,
[
['class', 'sk-cube sk-cube1']
]
),
self.createElement(
'div',
null,
[
['class', 'sk-cube sk-cube2']
]
),
self.createElement(
'div',
null,
[
['class', 'sk-cube sk-cube3']
]
),
self.createElement(
'div',
null,
[
['class', 'sk-cube sk-cube4']
]
),
self.createElement(
'div',
null,
[
['class', 'sk-cube sk-cube5']
]
),
self.createElement(
'div',
null,
[
['class', 'sk-cube sk-cube6']
]
),
self.createElement(
'div',
null,
[
['class', 'sk-cube sk-cube7']
]
),
self.createElement(
'div',
null,
[
['class', 'sk-cube sk-cube8']
]
),
self.createElement(
'div',
null,
[
['class', 'sk-cube sk-cube9']
]
)
],
'#loading'
);
self.append(
[
self.createElement(
......@@ -398,17 +319,16 @@
};
this.showLoading = function() {
loading.style.display = 'block';
app.style.height = 'auto';
col1.style.display = 'none';
col2.style.display = 'none';
app.style.display = 'none';
$('#loading').css({display: 'block'});
$('#drawer-toggle-label').css({display: 'none'});
};
this.hideLoading = function() {
loading.style.display = 'none';
app.style.height = '100%';
col1.style.display = 'inline-block';
col2.style.display = 'inline-block';
$( "#loading" ).fadeOut("slow", function() {
$('#drawer-toggle-label').fadeIn("slow");
$(app).fadeIn("slow");
});
};
this.deleteTemplate = function() {
......@@ -492,34 +412,15 @@
};
this.showShareWindow = function(link) {
self.showLoading();
var msg = 'Share this link';
var win = document.createElement('div');
var title_el = document.createElement('h1');
var linkbox = document.createElement('input');
var close_btn = document.createElement('button');
linkbox.setAttribute('readonly', true);
linkbox.value = link;
win.setAttribute('style', 'background-color:#222;width:50%;border:1px solid #333;margin:auto;text-align:center;padding:50px;border-radius:5px;');
title_el.setAttribute('style', 'color:#fff;text-transform:uppercase;font-family:"Source Code Pro","Lucida Console", Courier, monospace;');
linkbox.setAttribute('style', 'display:block;width:75%;padding:5px;font-size:20px;margin:auto;');
close_btn.setAttribute('style', 'display:block;font-size:28px;padding:5px;margin:20px auto;');
close_btn.innerHTML = 'CLOSE';
close_btn.onclick = function(evt) {
evt.preventDefault();
this.parentNode.parentNode.removeChild(this.parentNode);
self.hideLoading();
};
title_el.innerHTML = msg;
win.appendChild(title_el);
win.appendChild(linkbox);
win.appendChild(close_btn);
document.body.appendChild(win);
linkbox.focus();
linkbox.select();
var $shareDialogue = $('#shareDialogue');
var shareUrlBox = $shareDialogue.find('#shareUrlBox');
shareUrlBox.val(link);
$shareDialogue.modal('toggle');
};
this.init = function() {
self.showLoading();
new Clipboard('#copyShareUrlButton');
self.setupHtml();
document.getElementById('templates').onchange = function() {
var templates = window.localStorage.getItem(LOCAL_STORAGE_TEMPLATE_NAME) || '{}';
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>PWNY CodeTest</title>
<link rel="stylesheet" href="assets/pwny.css"></link>
</head>
<body>
<input id="drawer-toggle" type="checkbox">
<label id="drawer-toggle-label" for="drawer-toggle"></label>
<nav id="drawer"></nav>
<div id="app"></div>