Add Prism autoloader plugin; fix bugs
Boris Kubiak kubiakboris@gmail.com
Fri, 14 Feb 2020 10:46:37 +0100
4 files changed,
63 insertions(+),
78 deletions(-)
M
index.html
→
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 @@ rel="stylesheet"
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 @@ <button onclick="generateLink()" type="button">Generate link</button>
</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>
M
index.js
→
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 @@ select = new SlimSelect({
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() {@@ -53,32 +54,6 @@ });
}; reader.readAsArrayBuffer(blob); }); -} - -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() {
D
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; -}
M
theme.css
→
style.css
@@ -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 {