jessa
/
inkyboo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Prism autoloader plugin; fix bugs

master
Boris Kubiak 2020-02-14 10:46:37 +01:00
parent 117403d519
commit cd01019408
4 changed files with 63 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -9,9 +9,9 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paste</title> <title>Paste</title>
<script src="https://cdn.jsdelivr.net/combine/ <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/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/slim-select@1.25.0/dist/slimselect.min.js,
npm/clipboard@2/dist/clipboard.min.js npm/clipboard@2/dist/clipboard.min.js
"></script> "></script>
@ -21,9 +21,7 @@ npm/clipboard@2/dist/clipboard.min.js
type="text/css" type="text/css"
href="https://cdn.jsdelivr.net/npm/slim-select@1.25.0/dist/slimselect.min.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="style.css" />
<link rel="stylesheet" href="styles.css" />
<style></style>
</head> </head>
<body> <body>
<div id="editor"></div> <div id="editor"></div>
@ -36,7 +34,7 @@ npm/clipboard@2/dist/clipboard.min.js
</div> </div>
</div> </div>
<div id="copy" style="display: none"> <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 class="clipboard" data-clipboard-target="#copy-link" type="button">Copy</button>
<button onclick="copyElement.style.display = 'none'" type="button">Cancel</button> <button onclick="copyElement.style.display = 'none'" type="button">Cancel</button>
</div> </div>

33
index.js
View File

@ -1,6 +1,7 @@
let copyElement = document.getElementById('copy'); let copyElement = document.getElementById('copy');
const flask = new CodeFlask('#editor', { language: 'javascript', lineNumbers: true, defaultTheme: false }); const flask = new CodeFlask('#editor', { language: 'javascript', lineNumbers: true, defaultTheme: false });
const lzma = new LZMA('lzma.min.js'); const lzma = new LZMA('lzma.min.js');
Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.14.0/components/';
let select; let select;
function init() { function init() {
@ -17,14 +18,14 @@ function initLangSelector() {
select: '#language', select: '#language',
data: Object.entries(languages).map(([value, text]) => ({ text, value })), data: Object.entries(languages).map(([value, text]) => ({ text, value })),
showContent: 'up', showContent: 'up',
onChange: () => { onChange: e => {
updateLanguage(); console.log(e.value);
flask.updateLanguage(e.value);
} }
}); });
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
select.set(Object.keys(languages).indexOf(urlParams.get('lang')) === -1 ? 'javascript' : urlParams.get('lang')); select.set(Object.keys(languages).indexOf(urlParams.get('lang')) === -1 ? 'javascript' : urlParams.get('lang'));
updateLanguage();
} }
function initCode() { 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() { function generateLink() {
const code = flask.getCode(); const code = flask.getCode();
lzma.compress(code, 1, function(compressed, error) { lzma.compress(code, 1, function(compressed, error) {

60
theme.css → style.css
View File

@ -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 { .codeflask {
color: #ccc; color: #ccc;
@ -15,20 +67,18 @@
.codeflask textarea::-moz-selection, .codeflask textarea::-moz-selection,
.codeflask textarea ::-moz-selection { .codeflask textarea ::-moz-selection {
text-shadow: none;
background-color: #5a5f80; background-color: #5a5f80;
color: #5a5f80; color: #5a5f80;
} }
.codeflask textarea::selection, .codeflask textarea::selection,
.codeflask textarea ::selection { .codeflask textarea ::selection {
text-shadow: none;
background-color: #5a5f80; background-color: #5a5f80;
color: #5a5f80; color: #5a5f80;
} }
.codeflask__lines { .codeflask.codeflask--has-line-numbers::before {
background: #3b3b47; background: #3b3b47 !important;
} }
.token.comment { .token.comment {

38
styles.css
View File

@ -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;
}