Titlebar controlls not working

[torpid fog]

i have this code in components/titlebar.vue that works:

<template>
  <div data-tauri-drag-region class="titlebar">
    <div class="titlebar-button" id="titlebar-minimize"></div>
    <div class="titlebar-button" id="titlebar-maximize"></div>
    <div class="titlebar-button" id="titlebar-close"></div>
  </div>
</template>

but if i add this to it (make the controlls actually work):

<script>
import { appWindow } from "@tauri-apps/api/window";

export default {
  mounted() {
    window.addEventListener("tauri://loaded", () => {
      document
        .getElementById("titlebar-minimize")
        .addEventListener("click", () => appWindow.minimize());
      document
        .getElementById("titlebar-maximize")
        .addEventListener("click", () => appWindow.toggleMaximize());
      document
        .getElementById("titlebar-close")
        .addEventListener("click", () => appWindow.close());
    });
  },
};
</script>

i get:
window is not defined

how can i fix that?

[sterile charm]

Why are you adding the click events like that? You should use @click="function" instead

And, the bigger issue, you're using classes for specifying the buttons, but your event listeners are looking for getElementById which only finds things with id=""

And window afaik should be defined, at least if you have ssr = false in nuxt.config.ts

[torpid fog]

<template>
  <div data-tauri-drag-region class="titlebar">
    <div class="titlebar-button" id="titlebar-minimize" @click="minimize" ></div>
    <div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize" ></div>
    <div class="titlebar-button" id="titlebar-close" @click="close" ></div>
  </div>
</template>

<script>
import { appWindow } from "@tauri-apps/api/window";

function minimize() {appWindow.minimize()}
function toggleMaximize() {appWindow.toggleMaximize()}
function close() {appWindow.close()}
</script>

so i got this but if i click the button nothing happens

[sterile charm]

<script setup>

[vale coral]

thanks so much it helped us ❤️

[torpid fog]

worked thx! what does setup mean or do?

[sterile charm]

The setup part essentially switches over from the older style where you do export default {} to the newer composables type of setup
Don't ask too advanced question about it because I don't know everything, I tend to stick to not using setup since I'm more used to version 2 😂
But essentially you can think of it as either you have without setup, where you export an object, in which case your functions would've been exposed through a methods: {} object, or you can learn how to use setup which means you essentially just write it more like a script and it sort of takes care of finding things automagically somehow 😅

[torpid fog]

ah ok makes sence

[sterile charm]

Also, I recommend adding lang="ts" to script, so <script setup lang="ts"> so you use Typescript instead of Javascript. It's good you get started on learning Typescript as early as possible

[torpid fog]

how can i test if the app is in fullscreen?

[sterile charm]

I would probably just in typescript write something like if (window.innerWidth === screen.width && window.innerHeight === screen.height)

[torpid fog]

is there not like an event when the app enters fullscreen?

[sterile charm]

Depends on if you're using JS or Rust to do it. Here's a Rust function for checking. I don't believe there's an event, there's none I can find anyway https://docs.rs/tauri/1.2.4/tauri/window/struct.Window.html#method.is_fullscreen
In Javascript there's https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event but I believe that will only fire if you're using the JS fullscreen toggle, not the Tauri toggle, but I could be wrong

[gaunt prawn]

uh

can't hey use

isMaximized()

[torpid fog]

import { appWindow } from '@tauri-apps/api/window';
const maximized = await appWindow.isMaximized();

I found this in the docs.
now how can i constantly check if the app is maximized and run a function if it is?

[gaunt prawn]

you shouldn't check it constantly 😄

what are you going to do? run a infinite loop :D

instead do this

[torpid fog]

ok

[gaunt prawn]

appWindow.onResized(async () => {
  isMaximized.value = await appWindow.isMaximized();
});

[torpid fog]

works thx

[sterile charm]

Maximized != fullscreen

import { appWindow } from '@tauri-apps/api/window';
const fullscreen = await appWindow.isFullscreen();

[torpid fog]

sry i got it mixed up

its actually Maximized

but thx

[gaunt prawn]

fullscreen is when you press f11 and fullscreen the window fully