Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
XD Plugin for changing the opacity of an element with a dialog
/* jshint esversion: 8 */
/* jshint asi: true */
const h = require("./lib/h.js");
const $ = require("./lib/jquery");
const {
error
} = require("./lib/dialogs.js");
async function checkIfItemIsSelected(selection) {
if (selection.items[0] == null) {
error("No item selected.")
} else {
await changeOpacity(selection);
}
}
function changeOpacity(selection) {
const mainDialog =
h("dialog", {
id: "mainDialog"
},
h("form", {
method: "dialog",
style: {
width: 400
}
},
h("label",
h("div", {
style: {
justifyContent: "space-between",
display: "flex"
}
},
h("span", "Opacity"),
h("span", {
class: "opacity" // setting the innerHTML will not work if it's id instead of class (see line 54)
}, getOpacity())
),
h("input", {
type: "range",
value: getOpacity(),
oninput(e) {
let val = parseInt(this.value)
// let el = document.querySelector(".opacity")
// will not work (Console gives "Plugin TypeError: this.html.charCodeAt is not a function")
// el.innerHTML = val
$('.opacity').html(val) // will not work if it's id instead of class (only works for the first time the modal dialog is opened. Bug?)
setOpacity(val)
}
})
),
h("footer",
h("button", {
uxpVariant: "primary",
onclick(e) {
mainDialog.close()
}
}, "Close")
)
)
)
document.body.appendChild(mainDialog);
return mainDialog.showModal();
function setOpacity(val) {
let node = selection.items[0]
node.opacity = val / 100
}
function getOpacity() {
let node = selection.items[0]
let actualOpacity = parseInt(node.opacity * 100)
return actualOpacity
}
}
module.exports = {
commands: {
changeOpacity: checkIfItemIsSelected
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.