change colors

Author: felluksch

www/main/settings/options/options.html

@@ -75,32 +75,32 @@ <h2 class="text-strong">Other</h2>
                         </div>
                     </div>
                 </div>
-                <div class="item">
+                <div class="item" id="colors-list">
                     <h2 class="text-strong">Feature colors <i class="icon ion-information-circled"
                             onclick="openPopover('popoverColors')"></i></h2>
                     <div class="item">
                         <label for="blackCheckbox">Black</label>
                         <div class="right"><input type="checkbox" id="blackCheckbox" value="black"></div>
                     </div>
                     <div class="item">
-                        <label for="greenCheckbox">Green</label>
-                        <div class="right"><input type="checkbox" id="greenCheckbox" value="green"></div>
+                        <label for="olivedrabCheckbox">Green</label>
+                        <div class="right"><input type="checkbox" id="olivedrabCheckbox" value="olivedrab"></div>
                     </div>
                     <div class="item">
-                        <label for="yellowCheckbox">Yellow</label>
-                        <div class="right"><input type="checkbox" id="yellowCheckbox" value="yellow"></div>
+                        <label for="goldCheckbox">Yellow</label>
+                        <div class="right"><input type="checkbox" id="goldCheckbox" value="gold"></div>
                     </div>
                     <div class="item">
-                        <label for="redCheckbox">Red</label>
-                        <div class="right"><input type="checkbox" id="redCheckbox" value="red"></div>
+                        <label for="firebrickCheckbox">Red</label>
+                        <div class="right"><input type="checkbox" id="firebrickCheckbox" value="firebrick"></div>
                     </div>
                     <div class="item">
-                        <label for="blueCheckbox">Blue</label>
-                        <div class="right"><input type="checkbox" id="blueCheckbox" value="blue"></div>
+                        <label for="dodgerblueCheckbox">Blue</label>
+                        <div class="right"><input type="checkbox" id="dodgerblueCheckbox" value="blue"></div>
                     </div>
                     <div class="item">
-                        <label for="brownCheckbox">Brown</label>
-                        <div class="right"><input type="checkbox" id="brownCheckbox" value="brown"></div>
+                        <label for="saddlebrownCheckbox">Brown</label>
+                        <div class="right"><input type="checkbox" id="saddlebrownCheckbox" value="saddlebrown"></div>
                     </div>
                 </div>
             </div>

www/main/settings/options/options.js

@@ -2,7 +2,6 @@ import { getOptions, getLayers } from '../utils';
 
 export async function onLoadOptions() {
 
-  let defColors = ["black", "green", "yellow", "red", "blue", "brown"];
   let options = await getOptions();
   let layers = await getLayers();
 
@@ -45,20 +44,18 @@ export async function onLoadOptions() {
   document.getElementById('groupColorCheckbox').addEventListener('click', checkColorBtn);
   document.getElementById('colorbarCheckbox').addEventListener('click', checkColorBtn);
 
-  let colorsAdded = defColors.map(e => {
-    if (options.colors.includes(e)) {
-      return document.getElementById(`${e}Checkbox`);
-    }
+  let colorsAdded = options.colors.map(e => {
+    return document.getElementById(`${e}Checkbox`);
   });
-  colorsAdded.filter(el => el != null).forEach(e => { e.checked = true });
+  colorsAdded.forEach(e => { e.checked = true });
 
   let form = document.getElementById("formoptions");
   if (form) {
-    [...form.elements].forEach(e => e.addEventListener('input', (ev) => { onChange(ev, options, defColors) }))
+    [...form.elements].forEach(e => e.addEventListener('input', (ev) => { onChange(ev, options) }))
   }
 }
 
-async function onChange(ev, options, defColors) {
+async function onChange(ev, options) {
 
   ev.preventDefault();
 
@@ -86,16 +83,12 @@ async function onChange(ev, options, defColors) {
       break
   }
 
-  if (defColors) {
-
-    let colorCheckboxes = defColors.map(e => document.getElementById(`${e}Checkbox`));
-    let colorsNew = colorCheckboxes.map(e => {
-      if (e.checked) { return e.value }
-    })
-    options.colors = colorsNew.filter(el => el != null);
-    app.properties.color = options.colors[0];
-
-  }
+  let colorCheckboxes = document.getElementById('colors-list').querySelectorAll('input[type="checkbox"]');
+  let colorsNew = [...colorCheckboxes].map(e => {
+    if (e.checked) { return e.value }
+  })
+  options.colors = colorsNew.filter(el => el != null);
+  app.properties.color = options.colors[0];
 
   if (document.getElementById('groupCheckbox').checked) {
     options.groupType = document.getElementById('groupTypeCheckbox').checked;

www/main/settings/utils.js

@@ -48,7 +48,7 @@ export async function getOptions() {
 
     return (options ? JSON.parse(options) : {
         colorbar: true,
-        colors: ["black", "green", "yellow", "red", "blue", "brown"],
+        colors: ["black", "olivedrab", "gold", "firebrick", "dodgerblue", "saddlebrown"],
         location: true,
         comments: true,
         cache: true,