From cd01019408d98a729b85d0f5b4d330f0c10bfa2f Mon Sep 17 00:00:00 2001 From: Boris Kubiak Date: Fri, 14 Feb 2020 10:46:37 +0100 Subject: [PATCH] Add Prism autoloader plugin; fix bugs --- index.html | 10 +++---- index.js | 33 +++-------------------- theme.css => style.css | 60 ++++++++++++++++++++++++++++++++++++++---- styles.css | 38 -------------------------- 4 files changed, 63 insertions(+), 78 deletions(-) rename theme.css => style.css (76%) delete mode 100644 styles.css diff --git a/index.html b/index.html index 7eb4888..211026e 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,9 @@ Paste @@ -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" /> - - - +
@@ -36,7 +34,7 @@ npm/clipboard@2/dist/clipboard.min.js diff --git a/index.js b/index.js index f038978..74cb361 100644 --- a/index.js +++ b/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) { diff --git a/theme.css b/style.css similarity index 76% rename from theme.css rename to style.css index f7552e0..7cef310 100644 --- a/theme.css +++ b/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 { diff --git a/styles.css b/styles.css deleted file mode 100644 index 4c0b8ec..0000000 --- a/styles.css +++ /dev/null @@ -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; -}