add "Edit" & "Download" buttons

3 files changed, 62 insertions, 15 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..ef61a26
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,8 @@
+.pre_container {
+  position: relative;
+}
+.pre_buttons {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index 89551da..0d203dd 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -341,33 +341,70 @@ Data.prototype.hide_advanced = function() {
     });
 }
 
-function format_pre_text(text) {
-    return $('<pre/>').text(text);
+function edit_btn_on_click(btn, pre) {
+    var editable = pre.prop('isContentEditable');
+    pre.prop('contentEditable', !editable);
+    if (editable) {
+        btn.text('Edit');
+        btn.blur(); // a.k.a. unfocus
+    } else {
+        btn.text('Save');
+        pre.focus();
+    }
 }
 
-var ConfigFile = function(name, text) {
-    this.name = name;
-    this.text = text;
+function basename(path) {
+    return path.substring(path.lastIndexOf('/') + 1);
 }
 
-ConfigFile.prototype.toString = function() {
-    return this.text;
+function dload_btn_on_click(btn, path, pre) {
+    var blob = new Blob([pre.text()], {type: 'text/plain'});
+    var url = URL.createObjectURL(blob);
+
+    var link = $('<a/>');
+    link.prop('href', url);
+    link.prop('download', basename(path));
+
+    // Whoever thought of this [0] is fucking crazy:
+    // https://stackoverflow.com/a/36483380/514684
+    // It literally silently does nothing if this is omitted.
+    link[0].click();
 }
 
-ConfigFile.prototype.format = function() {
-    return format_pre_text(this.toString());
+function make_pre_buttons(path, pre) {
+    var edit_btn = $('<button class="btn btn-default" type="button"/>').text('Edit');
+    edit_btn.click(function() {
+        edit_btn_on_click(edit_btn, pre);
+    });
+
+    var dload_btn = $('<button class="btn btn-default" type="button"/>').text('Download');
+    dload_btn.click(function() {
+        dload_btn_on_click(dload_btn, path, pre);
+    });
+
+    return $('<div class="pre_buttons btn-group btn-group-xs" role="group"/>')
+        .append(dload_btn)
+        .append(edit_btn);
+}
+
+function format_pre_text(text, name) {
+    var pre = $('<pre/>').text(text);
+    return $('<div class="pre_container"/>')
+        .append(pre)
+        .append(make_pre_buttons(name, pre));
 }
 
-var Script = function(text) {
+var ConfigFile = function(name, text) {
+    this.name = name;
     this.text = text;
 }
 
-Script.prototype.toString = function() {
+ConfigFile.prototype.toString = function() {
     return this.text;
 }
 
-Script.prototype.format = function() {
-    return format_pre_text(this.toString());
+ConfigFile.prototype.format = function() {
+    return format_pre_text(this.toString(), this.name);
 }
 
 var QRCode = function(text) {
@@ -566,7 +603,7 @@ var shell_info =
 # Better yet, put into a file and run (possibly, using sudo).`;
 
 function manual_client_script(data) {
-    return new Script(
+    return new ConfigFile('client_setup.sh',
 `# On the client, run this to set up a connection.
 ${shell_info}
 
@@ -585,7 +622,7 @@ ip link set ${iface} up
 }
 
 function manual_server_script(data) {
-    return new Script(
+    return new ConfigFile('server_setup.sh',
 `# On the server, run this to tweak an existing connection.
 ${shell_info}
 
diff --git a/index.html b/index.html
index 8cd136a..0721ad4 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,8 @@ layout: plain
 navbar:
   link: Main
   icon: home
+custom_css:
+  - main.css
 custom_js:
   # ipaddr.js is buggy: https://github.com/whitequark/ipaddr.js/issues/160.
   # TODO: revert back to using ipaddr.js if it's fixed?