分割ポイントのvalidateまで実装した

index.html

@@ -122,9 +122,8 @@
             <div class="pure-u-1 pure-u-md-2-5">
               <label class="pure-u-1">
                 分割地点
-                <input id="" class="pure-u-1" type="text" placeholder="50, 100, 150"
-                  pattern="^[0-9]+(( *, *)([0-9]+))*$" />
-                <span class="pure-form-message">※カンマ(,)区切りで複数指定できます</span>
+                <input id="splitPoints" class="pure-u-1" type="text" placeholder="50,100,150"
+                  pattern="^([0-9]+(\.[0-9]+)?)(( *, *)([0-9]+(\.[0-9]+)?))*$" />
               </label>
             </div>
           </div>

script.js

@@ -6,6 +6,7 @@ const downloadButton = document.getElementById('download-button')
 const hiddenDownloadLink = document.getElementById('hidden-download-link')
 const exportImageWidthInput = document.getElementById('exportImageWidth')
 const exportImageHeightInput = document.getElementById('exportImageHeight')
+const splitPointsInput = document.getElementById('splitPoints')
 const maxDistanceInput = document.getElementById('maxDistance')
 const minDistanceInput = document.getElementById('minDistance')
 const maxAltitudeInput = document.getElementById('maxAltitude')
@@ -99,6 +100,7 @@ exportImageWidthInput.addEventListener('input', event => {
     exportImageHeightInput.setAttribute('required', '')
   }
 })
+
 exportImageHeightInput.addEventListener('input', event => {
   updateDownloadButton()
 
@@ -109,6 +111,25 @@ exportImageHeightInput.addEventListener('input', event => {
   }
 })
 
+splitPointsInput.addEventListener('input', event => {
+  const splitPoints = event.value.split(',').map(s => parseFloat(s))
+
+  if (splitPoints.length < 1) { return }
+
+  const minDistance = parseFloat(minDistanceInput.value)
+  const maxDistance = parseFloat(maxDistanceInput.value)
+  var prev = 0
+  splitPoints.forEach(current => {
+    if (prev >= current) { return }
+    if (current < minDistance || maxDistance < current) { return }
+
+    prev = current
+  })
+
+  // inputのvalidityを更新する
+  // ダウンロードボタンを更新する
+})
+
 function parseData(content) {
   const doc = parser.parseFromString(content, 'text/xml')
   const trackpointTags = [...doc.getElementsByTagName('Trackpoint')]
@@ -302,8 +323,10 @@ function sendDownloadImageEvent() {
     {
       'event': 'download_image',
       ...retrieveDisplaySettings(),
+      // TODO: ダウンロード設定もretrieveDisplaySettingsっぽくする
       'width': exportImageWidthInput.value,
       'height': exportImageHeightInput.value,
+      // TODO: 分割地点も送る
     }
   )
 }

style.css

@@ -39,4 +39,6 @@ footer a {
 
 #download-button {
     margin: 0.5em 0;
-}
+}
+
+/* TODO: フォーカスされてなくてもinvalidなinputは赤くする */