From 31e5054518c9f37791369c38c2b8e0b030e4f577 Mon Sep 17 00:00:00 2001
From: Chris Needham <chris@chrisneedham.com>
Date: Wed, 14 Aug 2024 19:43:42 +0100
Subject: [PATCH] Added controls to demo page

---
 demo/custom-markers/index.html | 47 ++++++++++++++++++++++++----------
 demo/custom-markers/main.js    | 26 +++++++++++++++++++
 2 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/demo/custom-markers/index.html b/demo/custom-markers/index.html
index 019b84f0..4280417b 100644
--- a/demo/custom-markers/index.html
+++ b/demo/custom-markers/index.html
@@ -53,19 +53,40 @@ <h2>Demo: Custom Point and Segment Markers</h2>
       </audio>
 
       <div id="controls">
-        <button data-action="zoom-in">Zoom in</button>
-        <button data-action="zoom-out">Zoom out</button>
-        <button data-action="add-segment">Add Segment</button>
-        <button data-action="add-point">Add Point</button>
-        <button data-action="log-data">Log segments/points</button>
-        <input type="text" id="seek-time" value="0.0">
-        <button data-action="seek">Seek</button>
-        <label for="amplitude-scale">Amplitude scale</label>
-        <input type="range" id="amplitude-scale" min="0" max="10" step="1">
-        <input type="checkbox" id="auto-scroll" checked>
-        <label for="auto-scroll">Auto-scroll</label>
-        <button data-action="resize">Resize</button>
-        <button data-action="destroy">Destroy</button>
+        <div>
+          <button data-action="zoom-in">Zoom in</button>
+          <button data-action="zoom-out">Zoom out</button>
+          <button data-action="add-segment">Add Segment</button>
+          <button data-action="add-point">Add Point</button>
+          <button data-action="log-data">Log segments/points</button>
+          <input type="text" id="seek-time" value="0.0">
+          <button data-action="seek">Seek</button>
+          <label for="amplitude-scale">Amplitude scale</label>
+          <input type="range" id="amplitude-scale" min="0" max="10" step="1">
+          <input type="checkbox" id="auto-scroll" checked>
+          <label for="auto-scroll">Auto-scroll</label>
+          <button data-action="resize">Resize</button>
+          <button data-action="destroy">Destroy</button>
+        </div>
+        <div>
+          <input type="checkbox" id="enable-seek" checked>
+          <label for="enable-seek">Enable click to seek</label>
+          <label for="waveform-drag-mode">Waveform drag mode:</label>
+          <select id="waveform-drag-mode">
+            <option value="scroll">Scroll</option>
+            <option value="insert-segment">Insert segment</option>
+          </select>
+        </div>
+        <div>
+          <input type="checkbox" id="enable-segment-dragging">
+          <label for="enable-segment-dragging">Enable segment dragging</label>
+          <label for="segment-drag-mode">Segment drag mode:</label>
+          <select id="segment-drag-mode">
+            <option value="overlap">Overlap</option>
+            <option value="no-overlap">No overlap</option>
+            <option value="compress">Compress</option>
+          </select>
+        </div>
       </div>
     </div>
 
diff --git a/demo/custom-markers/main.js b/demo/custom-markers/main.js
index aa6fdc0c..09d33069 100644
--- a/demo/custom-markers/main.js
+++ b/demo/custom-markers/main.js
@@ -306,6 +306,32 @@ Peaks.init(options, function(err, peaksInstance) {
     }
   });
 
+  document.getElementById('enable-seek').addEventListener('change', function(event) {
+    var overview = peaksInstance.views.getView('overview');
+    var zoomview = peaksInstance.views.getView('zoomview');
+
+    zoomview.enableSeek(event.target.checked);
+    overview.enableSeek(event.target.checked);
+  });
+
+  document.getElementById('waveform-drag-mode').addEventListener('change', function(event) {
+    var view = peaksInstance.views.getView('zoomview');
+
+    view.setWaveformDragMode(event.target.value);
+  });
+
+  document.getElementById('enable-segment-dragging').addEventListener('change', function(event) {
+    var zoomview = peaksInstance.views.getView('zoomview');
+
+    zoomview.enableSegmentDragging(event.target.checked);
+  });
+
+  document.getElementById('segment-drag-mode').addEventListener('change', function(event) {
+    var view = peaksInstance.views.getView('zoomview');
+
+    view.setSegmentDragMode(event.target.value);
+  });
+
   // Points mouse events
 
   peaksInstance.on('points.mouseenter', function(event) {