jakalx/photo-groove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chapter 5: Implement sliders and filters

Browse source 
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.
This commit is contained in:
Alexander Kobjolke 2023-12-14 11:22:01 +01:00
parent 5f80082567
commit 43971bd268
6 changed files with 3249 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

39
index.html
View file

@ -2,12 +2,49 @@
<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>
Elm.PhotoGroove.init({node: document.getElementById("app")});
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>