1
0
mirror of https://github.com/flutter/samples.git synced 2025-11-09 22:38:42 +00:00
Files
samples/web_embedding/element_embedding_demo/web/js/demo-js-interop.js
Brett Morgan 91cb685d1f Publish web_embedding (#1777)
## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md


Co-authored-by: Mark Thompson
<2554588+MarkTechson@users.noreply.github.com>
Co-authored-by: David Iglesias <ditman@gmail.com>

Co-authored-by: Mark Thompson <2554588+MarkTechson@users.noreply.github.com>
Co-authored-by: David Iglesias <ditman@gmail.com>
2023-05-06 10:53:17 +10:00

44 lines
1.4 KiB
JavaScript

// Sets up a channel to JS-interop with Flutter
(function() {
"use strict";
// This function will be called from Flutter when it prepares the JS-interop.
window._stateSet = function () {
window._stateSet = function () {
console.log("Call _stateSet only once!");
};
// The state of the flutter app, see `class _MyAppState` in lib/main.dart.
let appState = window._appState;
let valueField = document.querySelector("#value");
let updateState = function () {
valueField.value = appState.count;
};
// Register a callback to update the HTML field from Flutter.
appState.addHandler(updateState);
// Render the first value (0).
updateState();
let incrementButton = document.querySelector("#increment");
incrementButton.addEventListener("click", (event) => {
appState.increment();
});
let screenSelector = document.querySelector("#screen-selector");
screenSelector.addEventListener("change", (event) => {
appState.changeDemoScreenTo(event.target.value);
setJsInteropControlsEnabled(event.target.value === 'counter');
});
// Enables/disables the Value/Increment controls.
function setJsInteropControlsEnabled(enabled) {
let elements = document.querySelectorAll("#increment, label[for='value']");
elements.forEach((el) => {
el.classList.toggle('disabled', !enabled);
})
}
};
}());