diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/js/main.js | 133 |
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) { |