In support of id #143

Allows for settings import and export to browse-able file locations, showing actual filesystem paths.

In a perfect world, this should have been much simpler than it is, given the inability to CSS style
native browser file buttons/labels. This effectively hides the native elements and leverages clickable labels.

This also uses nwjs's native "nwsaveas" to allow the browser dialog to be populated with a default filename
suggestion (gt_settings.json). See https://docs.nwjs.io/en/latest/References/Changes%20to%20DOM/

Unfortunately, in my testing, I believe nwjs has a bug - when the save dialog is re-visited, it shows the selected path
as underscore delimited (instead of the appropriate slash). I don't believe this to be a showstopper, but it is irksome.

package.nw/GridTracker.html

@@ -1341,20 +1341,52 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
                 <div class="mapItem">
                   <table align="center">
                     <tr>
-                      <!-- 
-                        Should stylize these better. 
-                        Is there a more modern approach than https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ ?
-                      -->
-                      <td><input class="button" id="saveSettingsButton" type="file" nwsaveas="gt_settings.json" accept=".json" nwdirectorydesc="Export GridTracker Config..." />
+                      <td>
+                        <label 
+                          class="button" 
+                          id="lblSaveSettingsButton" 
+                          data-default-text="Choose File" 
+                          for="saveSettingsButton">Choose File
+                        </label>
+                        <img 
+                          onclick="clearFileLabel('lblSaveSettingsButton');" 
+                          title="Clear Selected File" 
+                          class="clearValueButton" 
+                          src="img/trash_24x48.png"
+                        />
+                        <input 
+                          type="file" 
+                          nwsaveas="gt_settings.json" 
+                          class="inputFileHideStockButton" 
+                          name="saveSettingsButton" 
+                          id="saveSettingsButton" 
+                          accept=".json" 
+                        />
                         <div class="button" onclick="exportSettings();">Export Settings</div>
                       </td>
                     </tr>
                     <tr>
                       <td>
-                        <input type="file" name="loadSettingsButton" id="loadSettingsButton" accept=".json" />
-                          <div id="importSettingsButton" class="button" onclick="importSettings();">
-                          Import Settings
-                        </div>
+                        <label
+                          class="button" 
+                          id="lblLoadSettingsButton" 
+                          data-default-text="Choose File" 
+                          for="loadSettingsButton">Choose File
+                        </label>
+                        <img 
+                          onclick="clearFileLabel('lblLoadSettingsButton');" 
+                          title="Clear Selected File" 
+                          class="clearValueButton" 
+                          src="img/trash_24x48.png"
+                        />
+                        <input
+                          type="file" 
+                          class="inputFileHideStockButton" 
+                          name="loadSettingsButton"
+                          id="loadSettingsButton" 
+                          accept=".json" 
+                        />
+                          <div class="button" onclick="importSettings();">Import Settings</div>
                       </td>
                     </tr>
                     <tr>

package.nw/lib/gt.js

@@ -7659,7 +7659,6 @@ function exportSettings()
   {
     var toWrite = JSON.stringify(localStorage);
     fs.writeFileSync(filename, toWrite);
-    console.log("Filename is " + filename)
   }
   else
   {
@@ -7672,13 +7671,11 @@ function checkForSettings(filename)
 {
   if (fs.existsSync(filename))
   {
-    // importSettingsButton.style.display = "inline-block";
     importSettingsFile.style.display = "inline-block";
-    importSettingsFile.innerHTML = filename;
+    importSettingsFile.innerHTML = "Exported to " + filename;
   }
   else
   {
-    // importSettingsButton.style.display = "none";
     importSettingsFile.style.display = "none";
   }
 }
@@ -13538,6 +13535,37 @@ function startupVersionInit()
   }
 }
 
+function clearFileLabel(fileLabel)
+{
+  // Allow a function to clear the custom file upload label for vanity's sake
+  var label = document.getElementById(fileLabel)
+  label.textContent = label.dataset.defaultText;
+}
+
+function stylizeFileInput()
+{
+  // Hide the browser's default (non-stylizable) upload mechanism via CSS and replace
+  // it with clickable labels and use terrible JS and CSS to make it match GT look and feel.
+  var inputs = document.querySelectorAll(".inputFileHideStockButton");
+  Array.prototype.forEach.call(inputs, function(input)
+  {
+    input.addEventListener("change", function(e)
+    {
+      var fileName = "";
+      fileName = e.target.value;
+      var label = document.querySelector("label[for=" + e.target.name + "]");
+      if (fileName)
+      {
+        label.textContent = fileName
+      }
+      else
+      {
+        label.textContent = label.dataset.defaultText;
+      }
+    });
+  });
+}
+
 function startupButtonsAndInputs()
 {
   try
@@ -13546,7 +13574,8 @@ function startupButtonsAndInputs()
     togglePushPinMode();
     udpForwardEnable.checked = g_appSettings.wsjtForwardUdpEnable;
     multicastEnable.checked = g_appSettings.multicast;
-
+    // Apply stylizing for custom import and export settings mechanism
+    stylizeFileInput();
     gridViewButton.innerHTML = g_gridViewArray[g_appSettings.gridViewMode];
     earthImg.src = g_earthShadowImageArray[g_appSettings.earthImgSrc];
     gtFlagImg.src = g_gtFlagImageArray[g_appSettings.gtFlagImgSrc];

package.nw/lib/style.css

@@ -925,3 +925,18 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 input[type="color"]::-webkit-color-swatch {
 	border: none;
 }
+
+.inputFileHideStockButton {
+	width: 10.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.clearValueButton {
+  height: 12px;
+  padding: 0px;
+  padding-right: 10px;
+}