Kaynağa Gözat

Added the follow cursor feature to the DEMO

praisethemoon 6 yıl önce
ebeveyn
işleme
250aa6daca
2 değiştirilmiş dosya ile 13 ekleme ve 0 silme
  1. 6 0
      demo/index.html
  2. 7 0
      demo/index.js

+ 6 - 0
demo/index.html

@@ -62,6 +62,12 @@
                     </div>
                 </div>
             </div>
+            <div class="item">
+                <div class="ui toggle checkbox">
+                    <input type="checkbox" name="public" id="follow-cursor-checkbox">
+                    <label>Follow Cursor</label>
+                </div>
+            </div>
         </div>
     </div>         
     <div class="column">

+ 7 - 0
demo/index.js

@@ -61,6 +61,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
     custom,
     nextCursorBtn,
     resetCursorBtn,
+    followCursorCheckbox,
     showCursorBtn,
     hideCursorBtn,
     backendSelect,
@@ -84,6 +85,7 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         canvas = document.createElement("div");
         nextCursorBtn = document.getElementById("next-cursor-btn");
         resetCursorBtn = document.getElementById("reset-cursor-btn");
+        followCursorCheckbox = document.getElementById("follow-cursor-checkbox");
         showCursorBtn = document.getElementById("show-cursor-btn");
         hideCursorBtn = document.getElementById("hide-cursor-btn");
         backendSelect = document.getElementById("backend-select");
@@ -192,6 +194,11 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         resetCursorBtn.addEventListener("click", function() {
             openSheetMusicDisplay.cursor.reset();
         });
+        if (followCursorCheckbox) {
+            followCursorCheckbox.onclick = function() {
+                openSheetMusicDisplay.followCursor = !openSheetMusicDisplay.followCursor;
+            }
+        }
         hideCursorBtn.addEventListener("click", function() {
             openSheetMusicDisplay.cursor.hide();
         });