is there some way to have event handlers for html inside of divs?

[kabirverman]

I'm trying to do something like this and it isnt working:

await div(`<div class="flex flex-col gap-5">
<h1>Hey there</h1>
<p class="text-red-500">this is a test</p>
</div>`)


document.querySelector('h1').addEventListener('mouseover', () => {
    document.querySelector('h1').classList.add('text-red-500')
})

[johnlindquist]

@kabirverman

Does this work for your purposes?

let html = `<div class="flex flex-col gap-5">
<h1>Hey there</h1>
<p class="text-red-500">this is a test</p>
</div>`

let css = `
h1:hover {
  color: red;
}
`
await div({
  css,
  html,
})

[kabirverman]

I was hoping to execute some code in the event, sorry I should have clarified, i was just making the text red as a test

[johnlindquist]

@kabirverman Can you go into more detail on what sort of code you want to execute?

You can use a "submit protocol" with links:

let html = `
<div class="flex flex-col p-12">
<a href="submit:foo">I can submit</a>
<a href="submit:bar">I can't</a>
</div>
`

let value = await div({
  html,
  onSubmit: (input, state) => {
    if (state.value === "bar") {
      return preventSubmit
    }
  },
})

await editor(value)

Or if you use the form component, you can use onChange:

let values = await form({
  html: `

    <input name="test" placeholder="test" />
    
    `,

  onChange: (input, state) => {
    console.log(state.value)
  },
})

[kabirverman]

I was hoping to be able to essentially pull up scriptkit, launch a command and basically be presented with my own window that i can create entirely in html and js. So create my own buttons, sliders, images, use events, etc. But all inside of scriptkit if that makes any sense?

[johnlindquist]

@kabirverman You're probably looking for widgets if you want complete control over the html:

let html = `
<button id="button">Click Me</button>

<script>
document.getElementById("button").addEventListener("click", () => {
    ipcRenderer.send("WIDGET_CUSTOM", {
        widgetId, //required (it's on the window.widgetId)
        message: "hello"
    })
})
</script>
`

let w = await widget(html)

w.onCustom(async data => {
  let filePath = tmpPath("widget.txt")
  await writeFile(filePath, data.message)

  await revealFile(filePath)
})

You can also pass a url to the widget if you want it to display a React/whatever webserver.

We're figuring out ways to streamline the process of using custom events in the future, but for now it's still a pretty raw API:

    ipcRenderer.send("WIDGET_CUSTOM", {
        widgetId, //required (it's on the window.widgetId)
        message: "hello"
    })

[kabirverman]

thanks, I'm excited to play around a little more with widgets!

One problem I've been having though is that when opening a widget it usually tucks itself behind whatever window has focus. For example, here I've got an explorer window focused with a browser behind that. When I launch the widget it pops itself between the explorer window and the browser, is there any fix besides setting alwaysOnTop: true?

msedge_sN3m3esv5e.mp4