hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

allow any web component to become a widget

Browse source
This commit is contained in:
Felix Roos 2024-03-15 00:27:16 +01:00
parent 29dab578e7
commit 82c4926f19
5 changed files with 36 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/claviature/index.mjs
View file

@ -1,18 +1,14 @@
export * from './Claviature.jsx';
import { Pattern } from '@strudel/core';
import { registerWidget } from '@strudel/transpiler';
Pattern.prototype.claviature = function (options = {}) {
if (!window.claviature) {
window.claviature = document.createElement('strudel-claviature');
window.claviature.style.position = 'absolute';
window.claviature.style.bottom = 0;
window.claviature.style.left = 0;
document.body.append(window.claviature);
}
registerWidget('claviature', 'strudel-claviature');
Pattern.prototype.claviature = function (id, options = {}) {
return this.onFrame((haps) => {
const keys = haps.map((h) => h.value.note);
// console.log('keys',keys);
window.claviature.setAttribute(
let el = document.getElementById(id);
el?.setAttribute(
'options',
JSON.stringify({
...options,

1
packages/claviature/package.json
View file

@ -28,6 +28,7 @@
"homepage": "https://github.com/tidalcycles/strudel#readme",
"dependencies": {
"@strudel/core": "workspace:*",
"@strudel/transpiler": "workspace:*",
"claviature": "^0.1.0",
"solid-element": "^1.8.0",
"solid-js": "^1.8.15",