| <html> |
| <head> |
| <title>sketch-view-mode-select demo</title> |
| <link rel="stylesheet" href="demo.css" /> |
| |
| <script type="module" src="../sketch-view-mode-select.ts"></script> |
| |
| <script> |
| document.addEventListener("DOMContentLoaded", () => { |
| const viewModeSelect = document.querySelector( |
| "sketch-view-mode-select", |
| ); |
| const msgDiv = document.querySelector("#selected-mode"); |
| msgDiv.innerText = `selected mode: ${viewModeSelect.activeMode}`; |
| |
| console.log("viewModeSelect: ", viewModeSelect); |
| viewModeSelect.addEventListener("view-mode-select", (evt) => { |
| console.log("view mode change event: ", evt); |
| const msgDiv = document.querySelector("#selected-mode"); |
| msgDiv.innerText = `selected mode: ${evt.detail.mode}`; |
| viewModeSelect.activeMode = evt.detail.mode; |
| }); |
| }); |
| </script> |
| </head> |
| <body> |
| <h1>sketch-view-mode-select demo</h1> |
| |
| <sketch-view-mode-select></sketch-view-mode-select> |
| <div id="selected-mode"></div> |
| </body> |
| </html> |