modified code and write more readme

tokyosheep · Aug 18, 2023 · 9f4a44d · 9f4a44d
1 parent 9d70c46
commit 9f4a44d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,8 @@
 
 </style>
 <body>
-  <!-- this can be displaed only on third panel.-->
+  <h1>Hello</h1> <!-- this h1 tag'll be displayed on  only first panel' -->
+  <!-- inside of uxp-panel can be displaed only on third panel.-->
   <uxp-panel panelid="third">
     <h1>third panel</h1>
     <button type="button">push</button>

diff --git 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
@@ -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.