diff --git a/index.js b/index.js
index e3ceede..7d31169 100644
--- a/index.js
+++ b/index.js
@@ -1,11 +1,12 @@
const { entrypoints } = require("uxp");
+// these methods just create HTML element.
+
const createBase = (elm,titleText) =>{
const container = document.createElement("div");
const title = document.createElement("h1");
title.textContent = titleText;
container.appendChild(title);
- //document.body.appendChild(container); adding on document, it'll be displayed all of panels
elm.appendChild(container);
return {container:container,title:title};
}
@@ -44,17 +45,30 @@ class Connection{
const connect = new Connection();
+// entryponits constructs basic UXP panel data.
+
/**
* first and second panel's elements constructed through JS.
+ *
+ * panel's name must be matched manifst's panel id.
*/
entrypoints.setup({
panels:{
first:{
+ /**
+ *
+ * *** Note ***
+ * this object bit different on manifest 4 or 5.
+ * this code is adapted on manifest 5.
+ *
+ * show call back method to be fired when panel is opened.
+ * this receives
+ * html object which belongs panel it self.
+ * @param {HTMLElement} event
+ */
show(event){
- console.log("first");
- console.log(event);
+ console.log("first", event);
const element = createBase(event,"first");
- //const box = addBox(element.container);
const messageBox = createTextBox(element.container,"message");
const button = createButton(element.container,"btn");
button.addEventListener("click",()=>{
@@ -64,18 +78,26 @@ entrypoints.setup({
},
second:{
show(event){
- console.log("second");
- console.log(event);
+ console.log("second", event);
const element = createBase(event,"second");
connect.setElm(element.container);
}
},
third: {
show(event) {
- console.log("third");
+ console.log("third", event);
// third panel's elements constructed on html.
// inside uxp-panel Web Component.
//I think this is better way to develop multi-panel
+
+ /**
+ * this elm'll be displayed on first panel.
+ * even here looks like third scope though.
+ */
+ const textElm = document.createElement('p');
+ textElm.textContent = 'added from third panel scope.';
+ textElm.className = 'text';
+ document.body.appendChild(textElm);
}
}
}
diff --git a/readme.md b/readme.md
index 039278c..2719777 100644
--- a/readme.md
+++ b/readme.md
@@ -3,6 +3,20 @@
developing multi-UXP-Panel with Vanilla JS is bit tricky.
so I show you how to develop it.
+## summary
+
+1. write about panels on manifest.
+
+2. call entrypoints.setup method on JS and register panels you declared on manifest.
+
+3. on HTML any element only appeared on the panel you declared first.
+ you can't see anything on other panels.
+
+4. adding HTML element on body element through JS won't work as you image as well.
+
+5. adding uxp-panel Web Component on HTML and writing inside of It or each panel can receive their own scope element.
+see more detaills on this example.
+
## Reference
Pklaschka showed me uxp-panel Web Component.