-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added verovio demo and updated submodules
- Loading branch information
1 parent
bf3c385
commit 985a1b5
Showing
3 changed files
with
140 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Submodule edirom-verovio-render
updated
from 187bd0 to 0b8951
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Web Component Tester</title> | ||
|
|
||
| <!-- CUSTOM: Insert script for the web component here --> | ||
| <!-- <script src="path/to/web-component.js"></script> --> | ||
| <script src="edirom-verovio-render/verovio-renderer-component.js"></script> | ||
|
|
||
| <script> | ||
| window.addEventListener('DOMContentLoaded', (event) => { | ||
|
|
||
| //Getting the web component name | ||
| const webComponentName = document.querySelector('#web-component-container').firstElementChild.tagName.toLowerCase(); | ||
|
|
||
|
|
||
| //Resizing the web component | ||
| const container = document.querySelector('#web-component-container'); | ||
| const wc = document.getElementsByTagName(webComponentName)[0]; | ||
|
|
||
| const resizeObserver = new ResizeObserver(entries => { | ||
| for (let entry of entries) { | ||
| const {width, height} = entry.contentRect; | ||
| wc.setAttribute('set-width', width+'px'); | ||
| wc.setAttribute('set-height', height+'px'); | ||
| } | ||
| }); | ||
|
|
||
| resizeObserver.observe(container); | ||
|
|
||
|
|
||
| // get necessary objects | ||
| const wcAttributes = wc.getAttributeNames(); | ||
|
|
||
|
|
||
| //Creating getters for the web component attribute values | ||
| const wcAttributeGetters = document.querySelector('#wc-attribute-getters'); | ||
| wcAttributes.forEach(attribute => { | ||
| if(attribute.startsWith('get-')){ | ||
| const getter = document.createElement('div'); | ||
| getter.setAttribute('class', 'getter'); | ||
| getter.innerHTML = `<span>${attribute.substring(4)}: </span>`; | ||
| getter.innerHTML += `<form action="javascript:;"><input type="text" readonly="readonly" name="${attribute}" id="input-${attribute}" value="${wc.getAttribute(attribute)}"></form>`; | ||
| wcAttributeGetters.appendChild(getter); | ||
| } | ||
| }); | ||
|
|
||
|
|
||
| //Creating setters for the web component attribute values | ||
| const wcAttributeSetters = document.querySelector('#wc-attribute-setters'); | ||
| wcAttributes.forEach(attribute => { | ||
| if(attribute.startsWith('set-')){ | ||
| const setter = document.createElement('div'); | ||
| setter.setAttribute('class', 'setter'); | ||
| setter.innerHTML = `<span>${attribute.substring(4)}: </span>`; | ||
| setter.innerHTML += `<form action="javascript:document.querySelector('${webComponentName}').setAttribute('${attribute}', document.getElementById('input-${attribute}').value);"><input type="text" name="${attribute}" id="input-${attribute}" value="${wc.getAttribute(attribute)}"><input type="submit" value="Set"></form>`; | ||
| wcAttributeSetters.appendChild(setter); | ||
| } | ||
| }); | ||
|
|
||
| //Listening to changes in the web component attributes | ||
| var observer = new MutationObserver(function(mutations) { | ||
| mutations.forEach(function(mutation) { | ||
| if (mutation.type === "attributes") { | ||
| const changedAttrName = mutation.attributeName; | ||
| const newValue = mutation.target.getAttribute(changedAttrName); | ||
|
|
||
| // only for attributes which start with 'get-' to avoid interference with setters | ||
| if(changedAttrName.startsWith('get-')){ | ||
| document.getElementById('input-'+changedAttrName).value = newValue; | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| observer.observe(wc, { attributes: true }); | ||
|
|
||
|
|
||
| }); | ||
| </script> | ||
| <style> | ||
| h2 { | ||
| font-size: 1em; | ||
| } | ||
| #web-component-container { | ||
| height: 500px; | ||
| width: 500px; | ||
| border: 2px dashed #e0e0e0; | ||
| resize: both; | ||
| overflow: auto; | ||
| } | ||
| #wc-attribute-setters, #wc-attribute-getters { | ||
| max-width: 90%; | ||
| } | ||
| .setter, .getter { | ||
| display: inline-block; | ||
| margin: 0 20px 20px 0; | ||
| } | ||
|
|
||
| .setter span, .getter span { | ||
| font-size: 0.9em; | ||
| font-family: Arial; | ||
| color: #333; | ||
| } | ||
| form { | ||
| display: inline-block; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h2>Web Component Attribute Getters</h2> | ||
| <div id="wc-attribute-getters"></div> | ||
|
|
||
| <h2>Web Component Attribute Setters</h2> | ||
| <div id="wc-attribute-setters"></div> | ||
|
|
||
| <h2>Web Component Demo</h2> | ||
| <div id="web-component-container"> | ||
|
|
||
| <!-- CUSTOM: Insert custom element for the web component here --> | ||
| <!-- <web-component-custom-element attribute1="value1" attribute2="value2"></web-component-custom-element> --> | ||
| <verovio-api-renderer style="width: 100%; height: 100%; background-color: red;"> | ||
| <!-- SVG content will be rendered here --> | ||
| </verovio-api-renderer> | ||
|
|
||
| </div> | ||
| </body> | ||
| </html> |