Make download button a download hyperlink

src/coffee/main.coffee

@@ -18,6 +18,9 @@ $(document).ready ->
 
   # Element to use for wallpaper preview.
   previewElement = $ 'body, html'
+  
+  # Download button element.
+  downloadButton = $ '.download-btn'
 
   # Error message elements.
   errorRows = $ '.row-error'
@@ -110,6 +113,14 @@ $(document).ready ->
   failPreviewSmiles = ->
     invalidCompoundSmilesMessage.show()
 
+  # Updates the download link according to the currently displayed molecule.
+  #
+  updateDownloadLink = ->
+    url = buildUrl screenWidth, screenHeight, foregroundColor, backgroundColor, currentCompoundName
+    if smilesMode
+      url = buildSmilesUrl screenWidth, screenHeight, foregroundColor, backgroundColor, currentCompoundSmiles
+    downloadButton.attr 'href', url
+    
   # Updates the displayed preview.
   #
   # @param [object] element     the element to update
@@ -121,6 +132,7 @@ $(document).ready ->
     element.css 'background-color', "##{background}"
     element.css 'background-position', '50% 50%'
     element.css 'background-repeat', 'no-repeat'
+    updateDownloadLink()
 
   # Refreshes the preview using the compound name text box.
   #
@@ -172,14 +184,6 @@ $(document).ready ->
     smilesMode = true
     errorRows.hide()
     checkSmiles getCompoundSmiles(), refreshPreviewSmiles, failPreviewSmiles
-   
-  # Download button should open rendered image for download.
-   
-  $('.download-btn').on 'click', (e) ->
-    url = buildUrl screenWidth, screenHeight, foregroundColor, backgroundColor, currentCompoundName
-    if smilesMode
-      url = buildSmilesUrl screenWidth, screenHeight, foregroundColor, backgroundColor, currentCompoundSmiles
-    window.open url
 
   # Grab initial values from text boxes.
   currentCompoundName = compoundTextBox.val()

src/less/main.less

@@ -15,15 +15,16 @@ hr {
   margin-bottom: 5px;
 }
 
-button {
+button, a.download-btn {
   border: 1px solid @button-border;
   border-radius: 5px;
   background: @button-background;
   text-shadow: none;
   padding: 5px 10px 5px 10px;
+  color: #fff;
 }
 
-button:hover {
+button:hover, a.download-btn:hover {
   background: @button-background-hover;
 }
 
@@ -104,7 +105,9 @@ input[type=text] {
 }
 
 .download-btn {
+  display: block;
   width: 100%;
+  text-align: center;
 }
 
 // Logo.

templates/index.html.twig

@@ -121,7 +121,7 @@
                     </div>
                     <div class="row mtop-10">
                         <div class="col-xs-12">
-                            <button class="download-btn">Download!</button>
+                            <a class="download-btn" download>Download!</a>
                         </div>
                     </div>
                 </div>