aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/assets/js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/js')
-rw-r--r--assets/js/main.js133
1 files changed, 75 insertions, 58 deletions
diff --git a/assets/js/main.js b/assets/js/main.js
index 7cb8d43..21b5d62 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -465,46 +465,19 @@ Data.prototype.hide_advanced = function() {
});
}
-function edit_btn_init(btn) {
- btn.empty();
- btn.append('<span class="glyphicon glyphicon-pencil"/>');
-}
-
-function edit_btn_save(btn) {
- btn.empty();
- btn.append('<span class="glyphicon glyphicon-floppy-disk"/>');
-}
-
-function edit_btn_on_click(btn, pre) {
- var editable = pre.prop('isContentEditable');
- pre.prop('contentEditable', !editable);
- if (editable) {
- edit_btn_init(btn);
- btn.blur(); // a.k.a. unfocus
- } else {
- edit_btn_save(btn);
- pre.focus();
- }
-}
-
-function dload_btn_init(btn) {
- btn.empty();
- btn.append('<span class="glyphicon glyphicon-download-alt"/>');
-}
-
function basename(path) {
return path.substring(path.lastIndexOf('/') + 1);
}
-function dload_btn_on_click(btn, path, pre) {
+function download(file_name, text) {
// The type must be application/octet-stream; if it's text/plain, the
// Android Chrome appends the .txt suffix to the downloaded file names.
- var blob = new Blob([pre.text()], {type: 'application/octet-stream'});
+ var blob = new Blob([text], {type: 'application/octet-stream'});
var url = URL.createObjectURL(blob);
var link = $('<a/>');
link.prop('href', url);
- link.prop('download', basename(path));
+ link.prop('download', file_name);
// Whoever thought of this [0] is fucking crazy:
// https://stackoverflow.com/a/36483380/514684
@@ -557,44 +530,75 @@ function copy_to_clipboard(elem) {
return succeed;
}
-function copy_btn_init(btn) {
- btn.empty();
- btn.append('<span class="glyphicon glyphicon-copy"/>');
+var OverlayButton = function(title, icon, click_handler) {
+ this.btn = $('<button/>', {
+ 'class': 'btn btn-default',
+ type: 'button',
+ on: {
+ click: click_handler
+ }
+ });
+ this.title = title;
+ this.icon = icon;
+ this.show_icon(title, icon);
}
-function copy_btn_on_click(btn, pre) {
- copy_to_clipboard(pre[0]);
+OverlayButton.prototype.show_icon = function(title, icon) {
+ this.btn.empty();
+ this.btn.prop('title', title);
+ this.btn.append($('<span/>', {
+ 'class': `glyphicon glyphicon-${icon}`
+ }));
}
-function make_pre_buttons(path, pre) {
- var edit_btn = $('<button class="btn btn-default" type="button" title="Edit"/>');
- edit_btn_init(edit_btn);
- edit_btn.click(function() {
- edit_btn_on_click(edit_btn, pre);
+var EditButton = function(cfg) {
+ var self = this;
+ OverlayButton.call(this, 'Edit', 'pencil', function(evt) {
+ return self.on_click(cfg);
});
+}
- var dload_btn = $('<button class="btn btn-default" type="button" title="Download"/>');
- dload_btn_init(dload_btn);
- dload_btn.click(function() {
- dload_btn_on_click(dload_btn, path, pre);
- });
+EditButton.prototype = Object.create(OverlayButton.prototype);
+EditButton.prototype.constructor = EditButton;
+
+EditButton.prototype.on_click = function(cfg) {
+ var editable = cfg.pre.prop('isContentEditable');
+ cfg.pre.prop('contentEditable', !editable);
+ if (editable) {
+ this.show_icon(this.title, this.icon);
+ this.btn.blur(); // a.k.a. unfocus
+ } else {
+ this.show_icon('Save', 'floppy-disk');
+ cfg.pre.focus();
+ }
+}
- var copy_btn = $('<button class="btn btn-default" type="button" title="Copy"/>');
- copy_btn_init(copy_btn);
- copy_btn.click(function() {
- copy_btn_on_click(copy_btn, pre);
+var DownloadButton = function(cfg) {
+ var self = this;
+ OverlayButton.call(this, 'Download', 'download-alt', function(evt) {
+ return self.on_click(cfg);
});
+}
+
+DownloadButton.prototype = Object.create(OverlayButton.prototype);
+DownloadButton.prototype.constructor = DownloadButton;
- return $('<div class="pre_buttons btn-group btn-group-xs" role="group"/>')
- .append(copy_btn)
- .append(dload_btn)
- .append(edit_btn);
+DownloadButton.prototype.on_click = function(cfg) {
+ return download(basename(cfg.name), cfg.pre.text());
}
-function format_pre_text(pre, name) {
- return $('<div class="pre_container"/>')
- .append(pre)
- .append(make_pre_buttons(name, pre));
+var CopyButton = function(cfg) {
+ var self = this;
+ OverlayButton.call(this, 'Copy', 'copy', function(evt) {
+ return self.on_click(cfg);
+ });
+}
+
+CopyButton.prototype = Object.create(OverlayButton.prototype);
+CopyButton.prototype.constructor = CopyButton;
+
+CopyButton.prototype.on_click = function(cfg) {
+ return copy_to_clipboard(cfg.pre[0]);
}
var ConfigFile = function(name, text) {
@@ -604,7 +608,20 @@ var ConfigFile = function(name, text) {
}
ConfigFile.prototype.format = function() {
- return format_pre_text(this.pre, this.name);
+ var buttons = [
+ new CopyButton(this),
+ new DownloadButton(this),
+ new EditButton(this)
+ ];
+
+ var overlay = $('<div class="pre_buttons btn-group btn-group-xs" role="group"/>');
+ buttons.forEach(function(btn) {
+ overlay.append(btn.btn);
+ });
+
+ return $('<div class="pre_container"/>')
+ .append(this.pre)
+ .append(overlay);
}
var QRCode = function(pre) {