rewrite the css and add a version dropdown with main version

Author: jneen

app.rb

@@ -63,7 +63,13 @@ class Dingus < Sinatra::Base
       end
 
       content_type :json
-      { ver: demo.version, source: demo.source, result: demo.result }.to_json
+
+      {
+        ver: demo.version,
+        display_ver: demo.display_version,
+        source: demo.source,
+        result: demo.result,
+      }.to_json
     else
       halt 400 if params['parse'].nil?
 

assets/javascripts/application.js.erb

@@ -10,6 +10,7 @@ const result = document.getElementById("parse_result");
 const code   = document.getElementById("parse_code");
 const save   = document.getElementById("save_button");
 const tip    = document.getElementById("save_message");
+const versionDisplay = document.getElementById("version_display");
 
 // Submit function
 let submitTimer;
@@ -59,6 +60,8 @@ const update = function(endpoint, payload, overwrite) {
       code.innerHTML = data.result;
       result.dataset.lang = payload.lang;
       result.scrollTop = source.scrollTop;
+
+      versionDisplay.innerText = data.display_ver;
     } else if (request.readyState === XMLHttpRequest.DONE && request.status !== 200) {
       const data = JSON.parse(request.responseText);
       flash.innerHTML = data.message;
@@ -70,15 +73,18 @@ const update = function(endpoint, payload, overwrite) {
 };
 
 // Reset on language change
-lang.addEventListener("change", function(e) {
+function doReset(e) {
   (source.value === "") ? (editing = false) : null;
   const content = editing ? source.value : null;
   const payload = { ver: ver.value, lang: lang.value, source: content };
   submit("/parse", payload, !editing);
   history.pushState({}, "", "/" + encodeURIComponent(ver.value) +
                             "/" + encodeURIComponent(lang.value) +
                             "/");
-}, { capture: false, passive: true });
+}
+
+lang.addEventListener("change", doReset, { capture: false, passive: true });
+ver.addEventListener("change", doReset, { capture: false, passive: true });
 
 // Update on source change
 source.addEventListener("input", function(e) {
@@ -91,14 +97,19 @@ source.addEventListener("input", function(e) {
   if (window.location.pathname !== draft_path) {
     history.pushState({}, "", draft_path);
   }
+
+  checkLength();
+}, { capture: false, passive: true });
+
+function checkLength() {
   if (source.value.length > <%= Dingus::MAX_BODY_SIZE %>) {
     save.disabled = true;
     save.classList.add("disabled");
   } else {
     save.disabled = false;
     save.classList.remove("disabled");
   }
-}, { capture: false, passive: true });
+}
 
 // Scroll the highlighted window
 source.addEventListener("scroll", function(e) {
@@ -158,3 +169,5 @@ save.addEventListener("click", function(e) {
     tip.classList.add("show");
   }
 }, { capture: false, passive: false });
+
+checkLength();