update UI for slicer output type

use dropdown select control instead of radio buttons for slicer output type
lautr3k · Sep 23, 2018 · 6dde259d440d820580a69e2859f446b7b196b187 · 6dde259
1 parent 1e639af
commit 6dde259d440d820580a69e2859f446b7b196b187
Unified Split

Showing with 25 additions and 22 deletions.

+7 −5 index.html

+18 −17 js/main.js
diff --git a/index.html b/index.html
@@ -208,11 +208,13 @@ <h3 class="panel-title">Slicer</h3>
                         <hr />
 
                         <div class="form-group">
-                            <label for="slicer-image-extension">Output type</label>
-                            <input type="radio" name="slicer-image-extension" id="slicer-image-extension-png" value="png" /> png
-                            <input type="radio" name="slicer-image-extension" id="slicer-image-extension-svg" value="svg" /> svg
-                            <input type="radio" name="slicer-image-extension" id="slicer-image-extension-wow" value="wow" checked="checked" /> wow
-                            <input type="radio" name="slicer-image-extension" id="slicer-image-extension-fhd" value="fhd" checked="checked" /> FHD
+                            <label for="output-type">Output type</label>
+                            <select id="output-type" class="form-control input-sm">
+                                <option>png</option>
+                                <option>svg</option>
+                                <option>wow</option>
+                                <option>fhd</option>
+                            </select>
                         </div>
 
                         <hr />

diff --git a/js/main.js b/js/main.js
@@ -22,9 +22,7 @@ var settings = new SLAcer.Settings({
         },
         zip: true,
         folder: false,
-        wow: true,
-        svg: false,
-        png: false,
+        output: 'wow',
         speed: true,
         speedDelay: 10, // ms
         panel: {
@@ -685,10 +683,7 @@ var $printTimeValue  = $slicerBody.find('#print-time');
 var $slicerLiftingSpeed  = $slicerBody.find('#slicer-lifting-speed');
 var $slicerLiftingHeight = $slicerBody.find('#slicer-lifting-height');
 
-var $slicerExportPNG = $slicerBody.find('#slicer-image-extension-png');
-var $slicerExportSVG = $slicerBody.find('#slicer-image-extension-svg');
-var $slicerExportWOW = $slicerBody.find('#slicer-image-extension-wow');
-var $slicerExportFHD = $slicerBody.find('#slicer-image-extension-fhd');
+var $outputType = $slicerBody.find('#output-type');
 
 var $slicerSpeedYes    = $slicerBody.find('#slicer-speed-yes');
 var $slicerSpeedNo     = $slicerBody.find('#slicer-speed-no');
@@ -735,10 +730,7 @@ function updateSlicerSettings() {
     settings.set('slicer.lifting.speed', $slicerLiftingSpeed.val());
     settings.set('slicer.lifting.height', $slicerLiftingHeight.val());
 
-    settings.set('slicer.png', $slicerExportPNG[0].checked);
-    settings.set('slicer.svg', $slicerExportSVG[0].checked);
-    settings.set('slicer.wow', $slicerExportWOW[0].checked);
-    settings.set('slicer.fhd', $slicerExportFHD[0].checked);
+    settings.set('slicer.output', $outputType.val());
 
     settings.set('slicer.zip', $slicerMakeZipYes[0].checked);
 
@@ -859,7 +851,7 @@ function startSlicing() {
         }
         zipFile.file("README.txt", 'Generated by SLAcer.js for SparkMaker\r\nhttps://n0sr3v.github.io/SLAcer.js/\r\n\r\nProject based on: \r\nhttps://github.com/lautr3k/SLAcer.js\r\nAppreciate this work!\r\n');
         zipFile.file("slacer.json", JSON.stringify({
-            imageExtension: settings.get('slicer.png') ? 'png' : settings.get('slicer.svg') ? 'svg' : 'wow',
+            imageExtension: settings.get('slicer.output'),
             imageDirectoryCreated: settings.get('slicer.folder') ? 'false' : 'true',
             imageDirectory: !settings.get('slicer.folder') ? '' : 'slices',
             screenWidth   : settings.get('screen.width'),
@@ -875,10 +867,18 @@ function startSlicing() {
             declineSpeed  : parseInt(settings.get('slicer.lifting.decline')),  // mm/min
             liftingHeight : parseInt(settings.get('slicer.lifting.height'))  // mm
         }, null, 2));
-        WOWExport = settings.get('slicer.wow');
-        FHDExport = settings.get('slicer.fhd');
-        SVGExport = settings.get('slicer.svg');
-        PNGExport = settings.get('slicer.png');
+        if ($outputType.val() == 'wow') {
+            WOWExport = true;
+        }
+        else if ($outputType.val() == 'fhd') {
+            FHDExport = true;
+        }
+        else if ($outputType.val() == 'svg') {
+            SVGExport = true;
+        }
+        else if ($outputType.val() == 'png') {
+            PNGExport = true;
+        }
         if (FHDExport) {
             zipFolder = zipFile.folder('print-FHD');
         }
@@ -960,14 +960,15 @@ $abortButton.on('click', function(e) {
     endSlicing();
 });
 
-$('#slicer-image-extension-' + (settings.get('slicer.png') ? 'png' : settings.get('slicer.svg') ? 'svg' : 'wow')).prop('checked', true);
+$outputType.val(settings.get('slicer.output'));
 $('#slicer-make-zip-' + (settings.get('slicer.zip') ? 'yes' : 'no')).prop('checked', true);
 
 //new
 $('#slicer-make-folder-' + (settings.get('slicer.folder') ? 'yes' : 'no')).prop('checked', true);
 
 $('#slicer-speed-' + (settings.get('slicer.speed') ? 'yes' : 'no')).prop('checked', true);
 $('#slicer input').on('input, change', updateSlicerSettings);
+$('#slicer select').on('change', updateSlicerSettings);
 updateSlicerUI();
 
 // Build volume panel