doc/demo: add ability to highlight text given in url query; copy link…

… feature
pygments · Dec 16, 2020 · a507918 · a507918
1 parent f91804f
commit a507918
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/doc/_static/demo.css b/doc/_static/demo.css
@@ -18,11 +18,20 @@
     min-height: 150px;
 }
 
+#hlcode {
+    padding: 10px 0;
+}
+
 #hlcode pre {
     background-color: transparent;
     border-radius: 0;
 }
 
+#hlcodedl {
+    text-align: right;
+    padding: 0 15px;
+}
+
 #loading {
     position: absolute;
     top: 0;

diff --git a/doc/_static/demo.js b/doc/_static/demo.js
@@ -3,13 +3,21 @@ languagePluginLoader.then(() => {
     pyodide.loadPackage('Pygments').then(() => {
         pyodide.runPython('import pygments.lexers, pygments.formatters.html, pygments.styles');
 
+        let qvars = getQueryVariables();
+
         var lexerlist = pyodide.runPython('list(pygments.lexers.get_all_lexers())');
         var sel = document.getElementById("lang");
         for (lex of lexerlist) {
+            if (lex[1][0] === undefined) {
+                continue;
+            }
             var opt = document.createElement("option");
             opt.text = lex[0];
             opt.value = lex[1][0];
             sel.add(opt);
+            if (lex[1].indexOf(qvars['lexer']) >= 0) {
+                opt.selected = true;
+            }
         }
 
         var stylelist = pyodide.runPython('list(pygments.styles.get_all_styles())');
@@ -25,9 +33,25 @@ languagePluginLoader.then(() => {
 
         document.getElementById("hlbtn").disabled = false;
         document.getElementById("loading").style.display = "none";
+
+        if (qvars['code'] !== undefined) {
+            document.getElementById("code").value = qvars['code'];
+            highlight();
+        }
     });
 });
 
+function getQueryVariables() {
+    var query = window.location.search.substring(1);
+    var vars = query.split('&');
+    var var_obj = {};
+    for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split('=');
+	var_obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
+    }
+    return var_obj;
+}
+
 function new_file() {
     pyodide.globals['fname'] = document.getElementById("file").files[0].name;
     var alias = pyodide.runPython('pygments.lexers.find_lexer_class_for_filename(fname).aliases[0]');
@@ -66,10 +90,16 @@ function highlight() {
         file.arrayBuffer().then(function(buf) {
             pyodide.globals['code_mem'] = buf;
             pyodide.runPython('code = bytes(code_mem)');
+            document.getElementById("copy_btn").style.display = "none";
             highlight_now();
         });
     } else {
-        pyodide.globals['code'] = document.getElementById("code").value;
+        var code = document.getElementById("code").value;
+        pyodide.globals['code'] = code;
+        var link = document.location.origin + document.location.pathname +
+            "?lexer=" + encodeURIComponent(alias) + "&code=" + encodeURIComponent(code);
+        document.getElementById("copy_field").value = link;
+        document.getElementById("copy_btn").style.display = "";
         highlight_now();
     }
 }
@@ -81,6 +111,13 @@ function highlight_now() {
     document.getElementById("hlcodedl").style.display = "block";
 }
 
+function copy_link() {
+    var copy_field = document.getElementById("copy_field");
+    copy_field.select();
+    copy_field.setSelectionRange(0, 99999);
+    document.execCommand("copy");
+}
+
 function download_code() {
     var filename = "highlighted.html";
     var hlcode = document.getElementById("hlcode").innerHTML;

diff --git a/doc/_templates/demo.html b/doc/_templates/demo.html
@@ -48,6 +48,9 @@ <h2>Enter code and select a language</h2>
 <div id="hlcode"></div>
 
 <div id="hlcodedl" style="display: none">
+    <input type="text" id="copy_field" style="opacity: 0">
     <input type="button" value="Download" onclick="download_code()">
+    &nbsp;&nbsp;&nbsp;
+    <input type="button" value="Copy link" onclick="copy_link()" id="copy_btn">
 </div>
 {% endblock %}