swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wire up event delegator for webview

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-07-24 02:52:05 -04:00
1 parent 0a907b35c6
commit 7dfe89c958
21 files changed
+265 -272
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/desktop/src/index.html
+108 -45
View File
@@ -5,10 +5,13 @@
<script>
class Interpreter {
constructor(root) {
this.root = root;
this.stack = [root];
this.listeners = {};
this.listeners = {
"onclick": {}
};
this.lastNodeWasText = false;
this.nodes = [];
this.nodes = [root, root, root, root];
}
top() {
@@ -18,66 +21,125 @@
pop() {
return this.stack.pop();
}
}
class OPTABLE {
PushRoot(self, edit) {
const id = edit.root;
const node = self.nodes[id];
self.stack.push(node);
PushRoot(edit) {
const id = edit.id;
const node = this.nodes[id];
console.log("pushing root ", node, "with id", id);
this.stack.push(node);
}
AppendChildren(self, edit) {
let root = self.stack[self.stack.length - (edit.many + 1)];
AppendChildren(edit) {
let root = this.stack[this.stack.length - (edit.many + 1)];
for (let i = 0; i < edit.many; i++) {
console.log("popping ", i, edit.many);
let node = self.pop();
let node = this.pop();
root.appendChild(node);
}
}
ReplaceWith(self, edit) {
let root = self.stack[self.stack.length - (edit.many + 1)];
ReplaceWith(edit) {
let root = this.stack[this.stack.length - (edit.many + 1)];
let els = [];
for (let i = 0; i < edit.many; i++) {
els.push(self.pop());
els.push(this.pop());
}
root.replaceWith(...els);
}
Remove(self, edit) {
const node = self.stack.pop();
Remove(edit) {
const node = this.stack.pop();
node.remove();
}
RemoveAllChildren(self, edit) {}
CreateTextNode(self, edit) {
self.stack.push(document.createTextNode(edit.text));
RemoveAllChildren(edit) {}
CreateTextNode(edit) {
const node = document.createTextNode(edit.text);
this.nodes[edit.id] = node;
this.stack.push(node);
}
CreateElement(self, edit) {
CreateElement(edit) {
const tagName = edit.tag;
const el = document.createElement(tagName);
this.nodes[edit.id] = el;
console.log(`creating element: `, edit);
self.stack.push(document.createElement(tagName));
this.stack.push(el);
}
CreateElementNs(self, edit) {
CreateElementNs(edit) {
const tagName = edit.tag;
console.log(`creating namespaced element: `, edit);
self.stack.push(document.createElementNS(edit.ns, edit.tag));
this.stack.push(document.createElementNS(edit.ns, edit.tag));
}
CreatePlaceholder(self, edit) {
const a = `self.stack.push(document.createElement("pre"))`;
self.stack.push(document.createComment("vroot"));
CreatePlaceholder(edit) {
const a = `this.stack.push(document.createElement(" pre"))`;
this.stack.push(document.createComment("vroot"));
}
NewEventListener(self, edit) {}
RemoveEventListener(self, edit) {}
SetText(self, edit) {
self.top().textContent = edit.text;
NewEventListener(edit) {
const element_id = edit.element_id;
const event_name = edit.event_name;
const mounted_node_id = edit.mounted_node_id;
const scope = edit.scope;
const element = this.top();
element.setAttribute(`dioxus-event-${event_name}`, `${scope}.${mounted_node_id}`);
console.log("listener map is", this.listeners);
if (this.listeners[event_name] === undefined) {
console.log("adding listener!");
this.listeners[event_name] = "bla";
this.root.addEventListener(event_name, (event) => {
const target = event.target;
const type = event.type;
const val = target.getAttribute(`dioxus-event-${event_name}`);
const fields = val.split(".");
const scope_id = parseInt(fields[0]);
const real_id = parseInt(fields[1]);
console.log(`parsed event with scope_id ${scope_id} and real_id ${real_id}`);
rpc.call('user_event', {
event: event_name,
scope: scope_id,
mounted_dom_id: real_id,
}).then((reply) => {
console.log(reply);
this.stack.push(this.root);
for (let x = 0; x < reply.length; x++) {
let edit = reply[x];
console.log(edit);
let f = this[edit.type];
f.call(this, edit);
}
console.log("initiated");
}).catch((err) => {
console.log("failed to initiate", err);
});
});
}
}
SetAttribute(self, edit) {
RemoveEventListener(edit) {}
SetText(edit) {
this.top().textContent = edit.text;
}
SetAttribute(edit) {
const name = edit.field;
const value = edit.value;
const ns = edit.ns;
const node = self.top(self.stack);
const node = this.top(this.stack);
if (ns == "style") {
node.style[name] = value;
} else if (ns !== undefined) {
@@ -85,36 +147,35 @@
} else {
node.setAttribute(name, value);
}
if ((name === "value", self)) {
if (name === "value") {
node.value = value;
}
if ((name === "checked", self)) {
if (name === "checked") {
node.checked = true;
}
if ((name === "selected", self)) {
if (name === "selected") {
node.selected = true;
}
}
RemoveAttribute(self, edit) {
RemoveAttribute(edit) {
const name = edit.field;
const node = self.top(self.stack);
const node = this.top(this.stack);
node.removeAttribute(name);
if ((name === "value", self)) {
if (name === "value") {
node.value = null;
}
if ((name === "checked", self)) {
if (name === "checked") {
node.checked = false;
}
if ((name === "selected", self)) {
if (name === "selected") {
node.selected = false;
}
}
}
const op_table = new OPTABLE();
async function initialize() {
const reply = await rpc.call('initiate');
@@ -124,7 +185,9 @@
for (let x = 0; x < reply.length; x++) {
let edit = reply[x];
console.log(edit);
op_table[edit.type](interpreter, edit);
let f = interpreter[edit.type];
f.call(interpreter, edit);
}
console.log("stack completed: ", interpreter.stack);