From 9f4a44d6653309b80ec113349f379d8fad8a24bd Mon Sep 17 00:00:00 2001 From: Shuji Date: Fri, 18 Aug 2023 23:41:57 +0900 Subject: [PATCH] modified code and write more readme --- index.html | 3 ++- index.js | 36 +++++++++++++++++++++++++++++------- readme.md | 14 ++++++++++++++ 3 files changed, 45 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 852434d..c8fb162 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,8 @@ - +

Hello

+

third panel

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.