Adds "Element Embedding" demo package. (#1596)

experimental/element_embedding_demo/web/js/demo-css-fx.js

@@ -0,0 +1,82 @@
+// Manages toggling the VFX of the buttons
+(function () {
+  "use strict";
+
+  let handheld;
+
+  let fxButtons = document.querySelector("#fx");
+  let flutterTarget = document.querySelector("#flutter_target");
+
+  let attribution = document.createElement("span");
+  attribution.className = "imageAttribution";
+  attribution.innerHTML = "Photo by <a href='https://unsplash.com/photos/x9WGMWwp1NM' rel='noopener noreferrer' target='_blank'>Nathana Rebouças</a> on Unsplash";
+
+  // (Re)moves the flutterTarget inside a div#handheld.
+  function handleHandHeld(fx) {
+    resetRotation();
+    if (!handheld) {
+      handheld = document.createElement("div");
+      handheld.id = "handheld";
+      handheld.classList.add("hidden");
+      // Inject before the flutterTarget
+      flutterTarget.parentNode.insertBefore(handheld, flutterTarget);
+      handheld.append(flutterTarget);
+      handheld.append(attribution);
+      window.setTimeout(function () {
+        handheld.classList.remove("hidden");
+      }, 100);
+      // Disable all effects on the flutter container
+      flutterTarget.className = "";
+      setOtherFxEnabled(false);
+    } else {
+      handheld.classList.add("hidden");
+      window.setTimeout(function () {
+        handheld.parentNode.insertBefore(flutterTarget, handheld);
+        handheld.remove();
+        handheld = null;
+      }, 210);
+      setOtherFxEnabled(true);
+    }
+    window.requestAnimationFrame(function () {
+      // Let the browser flush the DOM...
+      flutterTarget.classList.toggle(fx);
+    });
+  }
+
+  // Sets a rotation style on the flutterTarget (in degrees).
+  function handleRotation(degrees) {
+    flutterTarget.style.transform = `perspective(1000px) rotateY(${degrees}deg)`;
+  }
+
+  // Removes the inline style from the flutterTarget.
+  function resetRotation() {
+    flutterTarget.style = null;
+  }
+
+  // Enables/disables the buttons that are not compatible with the "handheld" mode.
+  function setOtherFxEnabled(enabled) {
+    fxButtons.querySelectorAll('input').forEach((btn) => {
+      if (btn.dataset.fx != 'handheld') {
+        btn.classList.toggle('disabled', !enabled);
+      }
+    });
+  }
+
+  // Handles clicks on the buttons inside #fx.
+  fxButtons.addEventListener("click", (event) => {
+    let fx = event.target.dataset.fx;
+    if (fx === "handheld") {
+      handleHandHeld(fx);
+      return;
+    }
+    flutterTarget.classList.toggle(fx);
+  });
+
+  fxButtons.addEventListener("input", (event) => {
+    if (event.target.id === "rotation") {
+      flutterTarget.classList.toggle("spin", false);
+      handleRotation(event.target.value);
+    }
+  })
+
+})();

experimental/element_embedding_demo/web/js/demo-js-interop.js

@@ -0,0 +1,43 @@
+// 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);
+      })
+    }
+  };
+}());