Add options to select relative path for downloaded screenshots and wh…

…ether to provide a file chooser (#11); add help tooltips in options; extract CSS to options.css; bump version to 1.9.0
hckr · Mar 20, 2019 · e8662f0 · e8662f0
1 parent ba2d58a
commit e8662f0
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 30 deletions.
diff --git a/background.js b/background.js
@@ -1,11 +1,40 @@
 let objectURLs = new Map(); // id => objectURL
 
+let destinationRelativePath = '',
+    saveAs = undefined;
+function updateLocalOptions(data) {
+    if ('destinationRelativePath' in data) {
+        destinationRelativePath = data.destinationRelativePath;
+    }
+    switch (data.saveAs) {
+        case 'browser':
+            saveAs = undefined;
+            break;
+        case 'yes':
+            saveAs = true;
+            break;
+        case 'no':
+            saveAs = false;
+            break;
+    }
+}
+// browser.storage.local.get().then(updateLocalOptions); -- updated in storage_defaults.js - triggers change
+browser.storage.onChanged.addListener(changes => {
+    let newData = {};
+    [].forEach.call(Object.entries(changes), ([k, v]) => {
+        newData[k] = v.newValue;
+    });
+    updateLocalOptions(newData);
+});
+
 browser.runtime.onMessage.addListener(data => {
     let blob = dataURItoBlob(data.data_uri),
-        objectURL = URL.createObjectURL(blob);
+        objectURL = URL.createObjectURL(blob),
+        pathWithFileName = appendExtension([destinationRelativePath, data.filename].filter(x => x.length).join('/'), blob.type);
     browser.downloads.download({
         url: objectURL,
-        filename: appendExtension(data.filename, blob.type)
+        filename: pathWithFileName,
+        saveAs: saveAs
     }).then(id => {
         objectURLs.set(id, objectURL);
     }).catch(_ => {

diff --git a/icons/help.png b/icons/help.png
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
     "description": "Web Extension to save Facebook posts as images",
     "manifest_version": 2,
     "name": "Facebook Post Screenshot",
-    "version": "1.8.2",
+    "version": "1.9.0",
     "homepage_url": "https://github.com/hckr/fb-post-screenshot",
     "icons": {
         "72": "icons/icon.png"

diff --git a/options.css b/options.css
@@ -0,0 +1,99 @@
+body {
+    font-size: 1.11em;
+}
+
+input, select {
+    font-size: 1em;
+    font-family: inherit;
+}
+
+.detail-rows {
+    display: flex;
+    flex-direction: column;
+}
+
+.detail-row {
+    display: flex;
+    flex-direction: row;
+    line-height: 50px;
+    min-height: 50px;
+    border-top: 1px solid rgba(12, 12, 13, 0.3);
+    text-shadow: 0 1px 1px #fefffe;
+}
+
+.detail-row img[alt="help"] {
+    width: 24px;
+    height: 24px;
+    position: relative;
+    top: 6px;
+    margin-left: 6px;
+    cursor: help;
+    opacity: .5;
+    transition: .3s opacity ease-in;
+}
+
+.detail-row img[alt="help"]:hover {
+    opacity: 1;
+}
+
+.detail-row.join-previous {
+    border-top: none;
+    margin-top: -20px;
+}
+
+.detail-row-label {
+    width: 250px;
+    max-width: 250px;
+}
+
+.detail-row-label, .detail-row-single {
+    margin-left: 6px;
+    width: 100%;
+}
+
+#destination-relative-path {
+    width: 300px;
+}
+
+#quality-label {
+    transition: .3s opacity ease-in;
+    opacity: 0;
+}
+
+#quality-label.visible {
+    opacity: 1;
+}
+
+#quality {
+    width: 70px;
+}
+
+#max-height {
+    width: 100px;
+}
+
+fieldset {
+    margin-top: 20px;
+    font-style: italic;
+    padding: 10px 15px;
+    min-height: 100px;
+    position: relative;
+}
+
+fieldset button {
+    position: absolute;
+    right: 15px;
+    bottom: 10px;
+    font: inherit;
+    background: #e6e6e6;
+    color: black;
+    font-style: normal;
+    min-height: 30px;
+    min-width: 200px;
+    text-align: center;
+    border: none;
+}
+
+fieldset button:hover {
+    background: #cecece;
+}
diff --git a/options.html b/options.html
@@ -2,25 +2,30 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <style>
-        body { font-size: 1.11em; }
-        input, select { font-size: 1em; font-family: inherit; }
-        .detail-row { clear: both; line-height: 50px; min-height: 50px; border-top: 1px solid rgba(12, 12, 13, 0.3); text-shadow: 0 1px 1px #fefffe; }
-        .detail-row.special { border-top: none; line-height: auto; height: auto; position: relative; top: -20px; }
-        .detail-row-label, .detail-row-value { float: left; }
-        .detail-row-label { width: 250px; }
-        .detail-row-label, .detail-row-single { margin-left: 6px; }
-        #quality-label { transition: .3s opacity ease-in; opacity: 0; }
-        #quality-label.visible { opacity: 1; }
-        #quality { width: 70px; }
-        #max-height { width: 100px; }
-        fieldset { font-style: italic; padding: 10px 15px; min-height: 100px; position: relative; }
-        fieldset button { position: absolute; right: 15px; bottom: 10px; font: inherit; background: #e6e6e6; color: black; font-style: normal; min-height: 30px; min-width: 200px; text-align: center; border: none; }
-        fieldset button:hover { background: #cecece; }
-    </style>
+    <link rel="stylesheet" href="options.css">
 </head>
 <body>
     <div class="detail-rows">
+        <div class="detail-row">
+            <div class="detail-row-single">
+                <label for="destination-relative-path">Save screenshots to</label>
+                <span class="path-wrapper">
+                    .../Downloads/<input id="destination-relative-path" placeholder="leave empty not to save in a subfolder" pattern="(?!/)(?!.*/$)(\w[ /]?)*">
+                    <img src="icons/help.png" alt="help" title="If you leave this field empty, screenshots will be saved in a default location. If you enter a name, screenshots will be saved in a subfolder with this name in a default location. Use / as path separator if you need.">
+                </span>
+            </div>
+        </div>
+        <div class="detail-row">
+            <div class="detail-row-label"><label for="format">"Save as" dialog:</label></div>
+            <div class="detail-row-value">
+                <select id="save-as" class="browser-style">
+                    <option value="browser">browser setting</option>
+                    <option value="yes">show</option>
+                    <option value="no">don't show</option>
+                </select>
+                <img src="icons/help.png" alt="help" title='Specifies whether to provide a file chooser dialog to allow you to select a filename each time a screenshot will be saved.'>
+            </div>
+        </div>
         <div class="detail-row">
             <div class="detail-row-label"><label for="format">Screenshot format:</label></div>
             <div class="detail-row-value">
@@ -34,21 +39,19 @@
         <div class="detail-row">
             <div class="detail-row-label"><label for="max-height">Maximum height of a part:</label></div>
             <div class="detail-row-value">
-                <label><input id="max-height" class="browser-style" type="number" min="500" max="16000" step="1" required> px</label>
+                <input id="max-height" class="browser-style" type="number" min="500" max="16000" step="1" required> px <img src="icons/help.png" alt="help" title="If the post is longer than the specified height, it will be cut into parts that size at maximum.">
             </div>
         </div>
-        <div class="detail-row special">
+        <div class="detail-row join-previous">
             <div class="detail-row-single">
                 <label><input id="prevent-cutting" type="checkbox" class="browser-style"> prevent ending a part in the middle of a comment</label>
             </div>
         </div>
-        <form>
-            <fieldset>
-                Do you have any suggestions? Does something not work?<br>
-                I'll be happy to help you! 
-                <button id="new-issue" class="browser-style">💖 File an issue on GitHub</button>
-            </fieldset>
-        </form>
+        <fieldset>
+            Do you have any suggestions? Does something not work?<br>
+            I'll be happy to help you! 
+            <button id="new-issue" class="browser-style">💖 File an issue on GitHub</button>
+        </fieldset>
     </div>
     <script src="options.js"></script>
 </body>

diff --git a/options.js b/options.js
@@ -1,12 +1,23 @@
 document.getElementById('new-issue').onclick = _ => window.open('https://github.com/hckr/fb-post-screenshot/issues/new');
 
-let formatSelect = document.getElementById('format'),
+let destinationRelativePathInput = document.getElementById('destination-relative-path'),
+    saveAsSelect = document.getElementById('save-as'),
+    formatSelect = document.getElementById('format'),
     qualityLabel = document.getElementById('quality-label'),
     qualityInput = document.getElementById('quality'),
     maxHeightInput = document.getElementById('max-height'),
     preventCuttingCheckbox = document.getElementById('prevent-cutting');
 
-for (let [el, ev] of [[formatSelect, 'change'], [qualityInput, 'input'], [maxHeightInput, 'input'], [preventCuttingCheckbox, 'change']]) {
+let elementEvents = [
+    [destinationRelativePathInput, 'input'],
+    [saveAsSelect, 'change'],
+    [formatSelect, 'change'],
+    [qualityInput, 'input'],
+    [maxHeightInput, 'input'],
+    [preventCuttingCheckbox, 'change']
+];
+
+for (let [el, ev] of elementEvents) {
     el.addEventListener(ev, _ => {
         saveValues();
         updateQualityVisibility();
@@ -17,9 +28,13 @@ restoreValues();
 
 function saveValues() {
     browser.storage.local.set({
+        saveAs: saveAsSelect.value,
         format: formatSelect.value,
         preventCutting: preventCuttingCheckbox.checked
     });
+    if (destinationRelativePathInput.checkValidity()) {
+        browser.storage.local.set({ destinationRelativePath: destinationRelativePathInput.value });
+    }
     if(qualityInput.checkValidity()) {
         browser.storage.local.set({ quality: parseFloat(qualityInput.value) });
     }
@@ -30,6 +45,8 @@ function saveValues() {
 
 function restoreValues() {
     browser.storage.local.get().then(values => {
+        destinationRelativePathInput.value = values.destinationRelativePath;
+        saveAsSelect.value = values.saveAs;
         formatSelect.value = values.format;
         qualityInput.value = values.quality;
         maxHeightInput.value = values.maxHeight;

diff --git a/storage_defaults.js b/storage_defaults.js
@@ -1,4 +1,6 @@
 const defaults = {
+    destinationRelativePath: '',
+    saveAs: 'browser',
     format: 'image/png',
     quality: 0.95,
     maxHeight: 8192,