Fixes #122 and #119

Public CSV references are now renamed to "Data Files".
Download instructions added for users less familiar with CSVs
Download link now features a <a> DataURI IN ADDITION TO the SaveAs() feature, so users can either click to instantly download or Right-Click to "Save As".

src/containers/MapExplorer-SelectorPanel.jsx

@@ -285,7 +285,7 @@ export default class SelectorPanel extends React.Component {
     this.setState({
       downloadDialog: {
         status: DialogScreen.DIALOG_ACTOVE,
-        message: 'Preparing CSV file...',
+        message: 'Preparing data file...',
         data: null
     }});
 
@@ -323,7 +323,7 @@ export default class SelectorPanel extends React.Component {
         this.setState({
           downloadDialog: {
             status: DialogScreen.DIALOG_ACTIVE,
-            message: 'CSV ready!',
+            message: 'Data file ready!',
             data: data
         }});
       })

src/presentational/DialogScreen-Download.jsx

@@ -6,6 +6,8 @@ export default class DialogScreen_DownloadCSV extends DialogScreen {
   constructor(props) {
     super(props);
     this.downloadCsv = this.downloadCsv.bind(this);
+    this.blobbifyCsvData = this.blobbifyCsvData.bind(this);
+    this.generateFilename = this.generateFilename.bind(this);
   }
 
   render() {
@@ -19,7 +21,11 @@ export default class DialogScreen_DownloadCSV extends DialogScreen {
           : null}
 
           {(this.props.data)
-          ? <div><a className="btn" onClick={this.downloadCsv}>Download</a></div>
+          ? <div><a className="btn" href={window.URL.createObjectURL(this.blobbifyCsvData())} download={this.generateFilename()} onClick={this.downloadCsv}>Download</a></div>
+          : null}
+
+          {(this.props.data)
+          ? <div className="note">(Depending on your computer setup, you may need to right-click on the link above and choose "Save As", then open the downloaded file in Excel.)</div>
           : null}
 
         </div>
@@ -28,18 +34,34 @@ export default class DialogScreen_DownloadCSV extends DialogScreen {
     );
   }
 
+  //NOTE: The onClick=downloadCsv() feature is required because, by default,
+  //React 'eats' the click event of <a download>s which would otherwise trigger
+  //a native browser download event.
   downloadCsv(e) {
     if (this.props.data) {
-      let dataBlob = new Blob([this.props.data], {type: 'text/csv'});
-      let timeString = new Date();
-      timeString =
-        timeString.getDate() +
-        ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'][timeString.getMonth()] +
-        timeString.getFullYear();
-      saveAs(dataBlob, 'wildcam-'+timeString+'.csv');
+      let dataBlob = this.blobbifyCsvData();
+      let filename = this.generateFilename();
+      saveAs(dataBlob, filename);
       this.closeMe();
     } else {
       console.error('Download CSV Error: no CSV');
     }
   }
+
+  blobbifyCsvData() {
+    if (this.props.data) {
+      let dataBlob = new Blob([this.props.data], {type: 'text/csv'});
+      return dataBlob;
+    }
+    return null;
+  }
+
+  generateFilename(extension = '.csv') {
+    let timeString = new Date();
+    timeString =
+      timeString.getDate() +
+      ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'][timeString.getMonth()] +
+      timeString.getFullYear();
+    return 'wildcam-' + timeString + extension;
+  }
 }

src/styles/components/dialog-screen.styl

@@ -25,3 +25,8 @@
 
     > div
       text-align: center
+
+    .note
+      color: #999
+      font-size: 0.8em
+      max-width: 20em