Alexander Kobjolke
43971bd268
The application communicates back and forth with JavaScript using ports and subscriptions. It also receives initial data from JavaScript by passing 'flags' to the init function.
50 lines
1.3 KiB
HTML
50 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<link rel="stylesheet" href="range-slider.css" />
|
|
<script src="./range-slider.js"></script>
|
|
<script>
|
|
class RangeSlider extends HTMLElement {
|
|
connectedCallback() {
|
|
var input = document.createElement("input");
|
|
this.appendChild(input);
|
|
|
|
var jsr = new JSR(input,
|
|
{ max: this.max,
|
|
values: [this.val],
|
|
sliders: 1,
|
|
grid: false
|
|
});
|
|
var rangeSliderNode = this;
|
|
jsr.addEventListener ("update",
|
|
function (elem, value) {
|
|
var event =
|
|
new CustomEvent ("slide",
|
|
{detail: {userSlidTo: value}});
|
|
rangeSliderNode.dispatchEvent(event);
|
|
});
|
|
}
|
|
}
|
|
|
|
window.customElements.define("range-slider", RangeSlider);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script src="pasta.js"></script>
|
|
<script src="app.js"></script>
|
|
<script>
|
|
var app = Elm.PhotoGroove.init({node: document.getElementById("app"), flags: Pasta.version});
|
|
app.ports.setFilters.subscribe (
|
|
function(options) {
|
|
requestAnimationFrame(function() {
|
|
Pasta.apply(document.getElementById("canvas-main"), options);
|
|
});}
|
|
);
|
|
Pasta.addActivityListener(function(activity) {
|
|
app.ports.activityChanges.send(activity);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|