AWS: new code popup

* Use prism.js for syntax highlighting.
* Use html <dialog> for slightly nicer UI.

Author: prandla

cms/server/admin/static/aws_style.css

@@ -262,32 +262,20 @@ ul.normal_list {
 }
 
 
-#subpage {
+#subpage_popup {
     position: fixed;
-    left: 345px;
-    top: 0px;
-    bottom: 0px;
-    display: none;
-    margin-bottom: 1em;
-    padding: 1.5em 1em 0 1em;
-    z-index: 10;
-}
-
-#subpage_background {
-    position: fixed;
-    left: 345px;
-    top:0px;
-    bottom: 0px;
-    right: 0px;
-    background: white;
-    z-index: -1;
-}
-
-#subpage_content {
-    background:white;
-    overflow: auto;
-    z-index: 2;
-    height: 100%;
+    top: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    max-width: min(100% - 2em, 1000px);
+    max-height: calc(100% - 2em);
+    margin-right: 1em;
+    overflow-y: scroll;
+}
+#subpage_close {
+    position: absolute;
+    right: 1em;
+    top: 1em;
 }
 
 #subpage h1 {

cms/server/admin/static/aws_utils.js

@@ -69,21 +69,27 @@ CMS.AWSUtils.create_url_builder = function(url_root) {
  * content.
  */
 CMS.AWSUtils.prototype.display_subpage = function(elements) {
+    var content = $("#subpage_content");
+    content.empty();
     // TODO: update jQuery to allow appending of arrays of elements.
     for (var i = 0; i < elements.length; ++i) {
-        elements[i].appendTo($("#subpage_content"));
+        elements[i].appendTo(content);
     }
-    $("#subpage").show();
+    document.getElementById('subpage_popup').show();
 };
 
+// set up some event listeners for the subpage
+window.addEventListener('DOMContentLoaded', () => {
+    $('#subpage_close').on('click', () => {
+        document.getElementById('subpage_popup').close();
+    });
+});
 
-/**
- * Hides a subpage previously displayed.
- */
-CMS.AWSUtils.prototype.hide_subpage = function() {
-    $("#subpage").hide();
-    $("#subpage_content").empty();
-};
+document.addEventListener('keydown', function(event) {
+    if (event.key === "Escape") {
+        document.getElementById('subpage_popup').close();
+    }
+});
 
 
 /**
@@ -108,20 +114,42 @@ CMS.AWSUtils.prototype.file_received = function(response, error) {
             this.display_subpage(elements);
             return;
         }
-        var pre_class = "";
-        // TODO: add more languages.
-        if (file_name.match(/.c(|pp)$/i)) {
-            pre_class = "brush: cpp";
-        } else if (file_name.match(/.pas$/i)) {
-            pre_class = "brush: delphi";
+        // TODO: update if adding a new language to cms
+        // (need to also update the prism bundle then)
+        var extension_to_lang = {
+            'cs': 'csharp',
+            'cpp': 'cpp',
+            'c': 'c',
+            'h': 'c',
+            'go': 'go',
+            'hs': 'haskell',
+            'java': 'java',
+            'js': 'javascript',
+            'php': 'php',
+            'py': 'python',
+            'rs': 'rust',
         }
+        var file_ext = file_name.split('.').pop();
+        var lang_name = extension_to_lang[file_ext] || file_ext;
+
         elements.push($('<h1>').text(file_name));
         elements.push($('<a>').text("Download").prop("href", url));
-        elements.push($('<pre>').text(response).prop("id", "source_container")
-                      .prop("class", pre_class));
-
+        elements.push($('<span>').text(" - "))
+        elements.push($('<a>').text("copy").prop('href', '#').on('click', (event) => {
+            var range = document.createRange();
+            var code_area = $('#subpage_content code')[0];
+            range.setStartBefore(code_area);
+            range.setEndAfter(code_area);
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+            // execCommand is deprecated, but this seems much less annoying than the new clipboard api
+            document.execCommand('copy');
+            event.preventDefault(); // prevent the <a> from navigating
+        }));
+        var codearea = $('<code>').text(response).addClass('line-numbers').addClass('language-' + lang_name);
+        elements.push($('<pre>').append(codearea));
         this.display_subpage(elements);
-        SyntaxHighlighter.highlight();
+        Prism.highlightAllUnder(document.getElementById('subpage_content'));
     }
 };