diff options
Diffstat (limited to '')
| -rw-r--r-- | assets/css/main.css | 8 | ||||
| -rw-r--r-- | assets/js/main.js | 67 | ||||
| -rw-r--r-- | index.html | 2 |
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} @@ -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? |