From c651e0a612ab507710642ba1f7a323f161bc20ec Mon Sep 17 00:00:00 2001
From: ilija <ilija139@gmail.com>
Date: Sat, 24 Sep 2016 11:00:15 +0700
Subject: [PATCH] Add "save image" button

---
 static/panes.js  | 10 ++++++++++
 static/style.css | 12 ++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/static/panes.js b/static/panes.js
index 06eb5d8..a32e966 100644
--- a/static/panes.js
+++ b/static/panes.js
@@ -117,6 +117,12 @@ function Pane(id) {
   cloneButton.innerHTML = 'o';
   cloneButton.title = 'disconnect';
 
+  var saveButton = document.createElement('a');
+  saveButton.innerHTML = '&#10515;';
+  saveButton.title = 'save';
+  saveButton.download = 'untitled_image.jpg';
+  saveButton.href = '';
+
   var title = document.createElement('div');
   title.className = 'title';
 
@@ -129,12 +135,14 @@ function Pane(id) {
   this.grip = grip;
   this.title = title;
   this.content = content;
+  this.saveButton = saveButton;
 
   el.appendChild(grip);
   el.appendChild(bar);
   el.appendChild(content);
   bar.appendChild(closeButton);
   bar.appendChild(cloneButton);
+  bar.appendChild(saveButton);
   bar.appendChild(title);
   body.appendChild(el);
 
@@ -188,6 +196,7 @@ function Pane(id) {
 Pane.prototype = {
   setTitle: function(title) {
     this.title.innerHTML = title;
+    this.saveButton.download = title.replace(/\s+/g, '_') + '.jpg';
   },
 
   focus: function() {
@@ -481,6 +490,7 @@ ImagePane.prototype = extend(Object.create(Pane.prototype), {
     // Hack around unexpected behavior. Setting .src resets .style (except 'position: absolute').
     var oldCss = this.content.style.cssText;
     this.content.src = content.src;
+    this.saveButton.href = content.src;
     this.content.style.cssText = oldCss;
     if (this.content.style.cssText != oldCss) {
       this.content.style.cssText = oldCss;
diff --git a/static/style.css b/static/style.css
index 0df1b7c..7991e65 100644
--- a/static/style.css
+++ b/static/style.css
@@ -56,11 +56,19 @@ button {
   cursor: pointer;
 }
 
-button:hover {
+.bar a {
+   color: black;
+   text-decoration: none;
+   font-size: 12px;
+   line-height: 14px;
+}
+
+button:hover, a:hover {
   font-weight: bold;
 }
 
-.bar button {
+
+.bar button, .bar a {
   background: transparent;
   margin: 0 4px;
   float: left;