My Plugin contains several buttons which are meant for the users to select an Image from their computer:
I am coming up with a problem in eventListeners and getFIleForOpening. In case of my plugin. If I click on select button I must come up with selecting a file from my local system.
In my main.js:
My button id is #bg-b and I added eventListener to function bgImage().
In my function I used getFileForOpening and ImageFill.
But my plugin does nothing, if I click on select button. Could anybody help me with that?
Here is my code:
const { Text, Color } = require("scenegraph");
const fs = require("uxp").storage.localFileSystem;
async function bgImage() {
const bgImg=await fs.getFileForOpening({types: storage.fileTypes.images});
let fill=new ImageFill(bgImg)
selection.items[0].fill=fill;
selection.insertionParent.addChild(bgImg);
bgImg.placeInParentCoordinates({x:0,y:0},selection.insertionParent.localCenterPoint);
return bgImg;
}
async function fgImage() {
const {selection} = require("scenegraph");
const fgImg = await fs.getFileForOpening({allowMultiple: true, types: fileTypes.images});
if (fgImg.length === 0) {
console.log("please select an image")
}
selection.insertionParent.addChild(fgImg);
fgImg.placeInParentCoordinates({x:0,y:0},selection.insertionParent.localCenterPoint);
return fgImg;
}
async function createText(text, { color = "blue" } = {}) {
const { selection} = require("scenegraph");
const { Text, Color } = require("scenegraph");
const newText = new Text();
newText.text = text;
newText.fill = new Color(color);
selection.insertionParent.addChild(newText);
newText.placeInParentCoordinates({x: 0, y: 0}, selection.insertionParent.localCenterPoint);
return newText;
}
let panel;
function create() {
const HTML = `<style>
#title{
font-size: 14px;
font-weight:Bold;
}
.break {
flex-wrap: wrap;
}
label.row > * {
margin: auto;
margin-bottom:10px;
}
label.row > span {
color: #8E8E8E;
width: auto;
text-align: left;
font-size: 9px;
}
label.row input {
flex: 1 1 auto;
}
label.row input[type=number] {
flex-basis: 32px;
}
label.row input[type=text] {
flex-basis: 32px;
}
div input[type=checkbox] {
flex: 0 0 20px;
}
form footer > * {
position: relative;
left: 8px;
}
</style>
<form method="dialog" id="main">
<label class="row" id="title">
<span font-size="20px">Quick Parallax</span>
</label>
</br>
<div class="row break">
<label class="row" id="bg">
<span>Select Background</span>
<button id="bg-b" type="button" uxp-variant="cta">Select</button>
</label>
</br>
<div class="row break">
<label class="row" id="fg">
<span>Select Foreground</span>
<button id="fg-b" type="button" uxp-variant="cta">Select</button>
</label>
</br>
<div class="row break">
<label class="row" id="txt">
<span>Foreground Text</span>
<input type="text" uxp-quiet="true" id="txt_bx" value="" placeholder=""/>
</label>
</br>
</div>
</div>
<footer><button id="ok" type="submit" uxp-variant="cta">Create</button>
<button id="cancel" type="submit" uxp-variant="cta" background-color:"#E54C4C" >Cancel</button></footer>
</form>
`;
panel = document.createElement("div");
panel.innerHTML = HTML;
panel.querySelector("#bg-b").addEventListener("button", bgImage);
panel.querySelector("#fg-b").addEventListener("button", fgImage);
panel.querySelector("#ok").addEventListener("submit", createText);
return panel;
}
function show(event) {
// create panel the first time it's shown
if (!panel) {
panel = create();
event.node.appendChild(panel);
}
}
function hide(event) {
// in this example, we don't need to do anything when XD hides our panel
}
function update(selection, root) {
console.log(selection.items);
}
module.exports = {
panels: {
panelName: {
show,
hide,
update
}
}
};
