Add Prism autoloader plugin; fix bugs
Boris Kubiak
parent
117403d519
commit
cd01019408
10
index.html
10
index.html
|
|
@ -9,9 +9,9 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Paste</title>
|
||||
<script src="https://cdn.jsdelivr.net/combine/
|
||||
npm/codeflask@1.4.1/build/codeflask.min.js,
|
||||
npm/prismjs@1.14.0/components/prism-markup-templating.min.js,
|
||||
npm/lzma@2.3.2/src/lzma.min.js,
|
||||
npm/codeflask@1.4.1/build/codeflask.min.js,
|
||||
npm/prismjs@1.14.0/plugins/autoloader/prism-autoloader.min.js,
|
||||
npm/slim-select@1.25.0/dist/slimselect.min.js,
|
||||
npm/clipboard@2/dist/clipboard.min.js
|
||||
"></script>
|
||||
|
|
@ -21,9 +21,7 @@ npm/clipboard@2/dist/clipboard.min.js
|
|||
type="text/css"
|
||||
href="https://cdn.jsdelivr.net/npm/slim-select@1.25.0/dist/slimselect.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="theme.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style></style>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="editor"></div>
|
||||
|
|
@ -36,7 +34,7 @@ npm/clipboard@2/dist/clipboard.min.js
|
|||
</div>
|
||||
</div>
|
||||
<div id="copy" style="display: none">
|
||||
<input type="text" value="copy me" id="copy-link" />
|
||||
<input type="text" value="copy me" id="copy-link" onClick="this.setSelectionRange(0, this.value.length)" />
|
||||
<button class="clipboard" data-clipboard-target="#copy-link" type="button">Copy</button>
|
||||
<button onclick="copyElement.style.display = 'none'" type="button">Cancel</button>
|
||||
</div>
|
||||
|
|
|
|||
33
index.js
33
index.js
|
|
@ -1,6 +1,7 @@
|
|||
let copyElement = document.getElementById('copy');
|
||||
const flask = new CodeFlask('#editor', { language: 'javascript', lineNumbers: true, defaultTheme: false });
|
||||
const lzma = new LZMA('lzma.min.js');
|
||||
Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.14.0/components/';
|
||||
let select;
|
||||
|
||||
function init() {
|
||||
|
|
@ -17,14 +18,14 @@ function initLangSelector() {
|
|||
select: '#language',
|
||||
data: Object.entries(languages).map(([value, text]) => ({ text, value })),
|
||||
showContent: 'up',
|
||||
onChange: () => {
|
||||
updateLanguage();
|
||||
onChange: e => {
|
||||
console.log(e.value);
|
||||
flask.updateLanguage(e.value);
|
||||
}
|
||||
});
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
select.set(Object.keys(languages).indexOf(urlParams.get('lang')) === -1 ? 'javascript' : urlParams.get('lang'));
|
||||
updateLanguage();
|
||||
}
|
||||
|
||||
function initCode() {
|
||||
|
|
@ -55,32 +56,6 @@ function initCode() {
|
|||
});
|
||||
}
|
||||
|
||||
function updateLanguage() {
|
||||
const lang = select.selected();
|
||||
if (!Prism.languages.hasOwnProperty(lang)) {
|
||||
addLanguage(lang);
|
||||
return;
|
||||
}
|
||||
flask.updateLanguage(lang);
|
||||
}
|
||||
|
||||
function addLanguage(lang) {
|
||||
// Add a setter to detect when a language is available
|
||||
Object.defineProperty(Prism.languages, lang, {
|
||||
set: function(val) {
|
||||
Prism.languages['_custom_' + lang] = val;
|
||||
flask.updateLanguage(lang);
|
||||
},
|
||||
get: function() {
|
||||
return Prism.languages['_custom_' + lang];
|
||||
}
|
||||
});
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.setAttribute('src', `https://cdn.jsdelivr.net/npm/prismjs@1.14.0/components/prism-${lang}.min.js`);
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
}
|
||||
|
||||
function generateLink() {
|
||||
const code = flask.getCode();
|
||||
lzma.compress(code, 1, function(compressed, error) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,56 @@
|
|||
/* Code editor style */
|
||||
/* General app style */
|
||||
|
||||
#editor,
|
||||
#footer,
|
||||
#copy {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#editor {
|
||||
top: 0;
|
||||
bottom: 36px;
|
||||
}
|
||||
|
||||
#footer,
|
||||
#copy {
|
||||
height: 36px;
|
||||
padding: 4px 20px 0 50px;
|
||||
background-color: #3b3b47;
|
||||
}
|
||||
|
||||
.d-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
width: 300px;
|
||||
font-size: 14px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.select-wrapper .ss-main .ss-single-selected {
|
||||
height: 28px;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
height: 28px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.codeflask textarea {
|
||||
box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3) inset;
|
||||
}
|
||||
|
||||
/* Code editor theme */
|
||||
|
||||
.codeflask {
|
||||
color: #ccc;
|
||||
|
|
@ -15,20 +67,18 @@
|
|||
|
||||
.codeflask textarea::-moz-selection,
|
||||
.codeflask textarea ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background-color: #5a5f80;
|
||||
color: #5a5f80;
|
||||
}
|
||||
|
||||
.codeflask textarea::selection,
|
||||
.codeflask textarea ::selection {
|
||||
text-shadow: none;
|
||||
background-color: #5a5f80;
|
||||
color: #5a5f80;
|
||||
}
|
||||
|
||||
.codeflask__lines {
|
||||
background: #3b3b47;
|
||||
.codeflask.codeflask--has-line-numbers::before {
|
||||
background: #3b3b47 !important;
|
||||
}
|
||||
|
||||
.token.comment {
|
||||
38
styles.css
38
styles.css
|
|
@ -1,38 +0,0 @@
|
|||
/* General app style */
|
||||
|
||||
#editor,
|
||||
#footer,
|
||||
#copy {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#editor {
|
||||
top: 0;
|
||||
bottom: 36px;
|
||||
}
|
||||
|
||||
#footer,
|
||||
#copy {
|
||||
height: 36px;
|
||||
padding: 4px 20px 0 50px;
|
||||
background-color: #3b3b47;
|
||||
}
|
||||
|
||||
.d-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
width: 300px;
|
||||
font-size: 14px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.select-wrapper .ss-main .ss-single-selected {
|
||||
height: 28px;
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
Loading…
Reference in New Issue