Add Prism autoloader plugin; fix bugs

MrDrache333 · Feb 14, 2020 · cd01019 · cd01019
1 parent 117403d
commit cd01019
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 78 deletions.
diff --git a/index.html b/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/[email protected]/build/codeflask.min.js,
-npm/[email protected]/components/prism-markup-templating.min.js,
 npm/[email protected]/src/lzma.min.js,
+npm/[email protected]/build/codeflask.min.js,
+npm/[email protected]/plugins/autoloader/prism-autoloader.min.js,
 npm/[email protected]/dist/slimselect.min.js,
 npm/clipboard@2/dist/clipboard.min.js
 "></script>
@@ -21,9 +21,7 @@
             type="text/css"
             href="https://cdn.jsdelivr.net/npm/[email protected]/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 @@
             </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>

diff --git 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/[email protected]/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/[email protected]/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 → style.css b/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 {

diff --git a/styles.css b/styles.css