Merge pull request #1298 from rozek/master

some fixes in AC-AC customizer

apps/ac_ac/Customizer.html

@@ -101,8 +101,8 @@
   <script>
   $(function () {
     let ClockSize, ClockSizeURL
-    let ClockFace, ClockFaceNumerals, ClockFaceDots, ClockFaceURL
-    let ClockHands, SecondHand, ClockHandsURL, FillColor
+    let ClockFace, ClockFaceURL, ClockFaceNumerals, ClockFaceDots
+    let ClockHands, ClockHandsURL, SecondHand, FillColor
     let ComplicationTL, ComplicationTLURL
     let ComplicationT, ComplicationTURL
     let ComplicationTR, ComplicationTRURL
@@ -118,8 +118,8 @@
     function backupConfiguration () {
       let Configuration = {
         ClockSize, ClockSizeURL,
-        ClockFace, ClockFaceNumerals, ClockFaceDots, ClockFaceURL,
-        ClockHands, SecondHand, ClockHandsURL, FillColor,
+        ClockFace, ClockFaceURL, ClockFaceNumerals, ClockFaceDots,
+        ClockHands, ClockHandsURL, SecondHand, FillColor,
         ComplicationTL, ComplicationTLURL,
         ComplicationT, ComplicationTURL,
         ComplicationTR, ComplicationTRURL,
@@ -130,7 +130,7 @@
         ComplicationBR, ComplicationBRURL,
         Foreground, Background
       }
-      
+
       try {
         localStorage.setItem('ac_ac',JSON.stringify(Configuration))
       } catch (Signal) {
@@ -311,11 +311,11 @@
 
       function chosenClockFace () {
         switch (ClockFace) {
-          case 'none':        return "undefined"
-          case 'four-fold':   return "require('https://raw.githubusercontent.com/rozek/banglejs-2-four-fold-clock-face/main/ClockFace.js')"
-          case 'twelve-fold': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-twelve-fold-clock-face/main/ClockFace.js')"
-          case 'rainbow':     return "require('https://raw.githubusercontent.com/rozek/banglejs-2-rainbow-clock-face/main/ClockFace.js')"
-          case 'custom':      return "require('" + ClockFaceURL + "')"
+          case 'none':            return "undefined"
+          case 'four-numbered':   return "require('https://raw.githubusercontent.com/rozek/banglejs-2-four-numbered-clock-face/main/ClockFace.js')"
+          case 'twelve-numbered': return "require('https://raw.githubusercontent.com/rozek/banglejs-2-twelve-numbered-clock-face/main/ClockFace.js')"
+          case 'rainbow':         return "require('https://raw.githubusercontent.com/rozek/banglejs-2-rainbow-clock-face/main/ClockFace.js')"
+          case 'custom':          return "require('" + ClockFaceURL + "')"
         }
       }
 
@@ -412,7 +412,7 @@ console.log(AppSource)
     }
 
     $('input[type="radio"]').on('change',retrieveAndValidateInputs)
-    $('input[type="url"]').  on('change',retrieveAndValidateInputs)
+    $('input[type="url"]').  on('input', retrieveAndValidateInputs)
     $('select').             on('change',retrieveAndValidateInputs)
     $('#UploadButton').on('click',createAndUploadApp)
   })
@@ -485,23 +485,23 @@ console.log(AppSource)
          <input type="radio" name="clock-face" value="none" checked>
          <img src="none.png"/>
        </label><br>
-       none
+       (none)
      </td>
 
      <td>
        <label class="Preview">
-         <input type="radio" name="clock-face" value="four-fold">
-         <img src="fourfoldClockFace.png"/>
+         <input type="radio" name="clock-face" value="four-numbered">
+         <img src="fournumberedClockFace.png"/>
        </label><br>
-       four-fold
+       four-numbered
      </td>
 
      <td>
        <label class="Preview">
-         <input type="radio" name="clock-face" value="twelve-fold">
-         <img src="twelvefoldClockFace.png"/>
+         <input type="radio" name="clock-face" value="twelve-numbered">
+         <img src="twelvenumberedClockFace.png"/>
        </label><br>
-       twelve-fold
+       twelve-numbered
      </td>
 
      <td>
@@ -521,25 +521,25 @@ console.log(AppSource)
      </td>
    </tr>
   </tbody></table>
-</p><p>
-  Clock faces are drawn in the configured foreground and background colors
-  (you may select them at the end of this form)
-</p><p>
-  "Four-fold" clock faces may draw indian-arabic or roman numerals. Which do you prefer?
-</p><p>
-  <input type="radio" name="clock-face-numerals" value="indian" checked> indian-arabic (3, 6, 9, 12)<br>
-  <input type="radio" name="clock-face-numerals" value="roman"> roman (III, VI, IX, XII)
-</p><p>
-  The "twelve-fold" and "rainbow"-colored faces may be drawn with or without
-  dots marking the position of every minute. Which variant do you prefer?
-</p><p>
-  <input type="radio" name="clock-face-dots" value="without-dots" checked> without dots <br>
-  <input type="radio" name="clock-face-dots" value="with-dots"> with dots
 </p><p>
   If you prefer a "custom" clock face, please enter the URL
   of its JavaScript module below:
 </p><p>
   custom URL: <input type="url" id="clock-face-custom-url" size="50">
+</p><p>
+  Clock faces are drawn in the configured foreground and background colors
+  (you may select them at the end of this form)
+</p><p>
+  "Four-numbered" clock faces may draw indian-arabic or roman numerals. Which do you prefer?
+</p><p>
+  <input type="radio" name="clock-face-numerals" value="indian" checked> indian-arabic (3, 6, 9, 12)<br>
+  <input type="radio" name="clock-face-numerals" value="roman"> roman (III, VI, IX, XII)
+</p><p>
+  The "twelve-numbered" and "rainbow"-colored faces may be drawn with or without
+  dots marking the position of every minute. Which variant do you prefer?
+</p><p>
+  <input type="radio" name="clock-face-dots" value="without-dots" checked> without dots <br>
+  <input type="radio" name="clock-face-dots" value="with-dots"> with dots
 </p>
 
   <h3>Clock Hands</h3>
@@ -582,6 +582,11 @@ console.log(AppSource)
      </td>
    </tr>
   </tbody></table>
+</p><p>
+  If you prefer "custom" clock hands, please enter the URL
+  of their JavaScript module below:
+</p><p>
+  custom URL: <input type="url" id="clock-hands-custom-url" size="50">
 </p><p>
   Clock hands are drawn in the configured foreground and background colors
   (you may select them at the end of this form)
@@ -631,11 +636,6 @@ console.log(AppSource)
   <input type="radio" name="second-hand" value="#FF00FF" class="ColorPatch" style="background:#FF00FF"/>
   <input type="radio" name="second-hand" value="#00FFFF" class="ColorPatch" style="background:#00FFFF"/>
   <input type="radio" name="second-hand" value="#FFFFFF" class="ColorPatch" style="background:#FFFFFF"/>
-</p><p>
-  If you prefer "custom" clock hands, please enter the URL
-  of their JavaScript module below:
-</p><p>
-  custom URL: <input type="url" id="clock-hands-custom-url" size="50">
 </p>
 
   <h3>Complications</h3>