Redmine

function isMobile() {

  const element = document.getElementsByClassName('.js-flyout-menu-toggle-button')[0];

  if (typeof element !== 'undefined') {

      return isVisible(element);

  } else {

      return false;

  }

}

function isVisible(element) {

  try {

    if (typeof element.checkVisibility === 'function') {

      return element.checkVisibility();

    }

    return !!( element.offsetWidth || element.offsetHeight || element.getClientRects().length );

  } catch (error) {

    console.error('Error checking visibility:', error);

    return false;

  }

}

    tags << javascript_include_tag('application-legacy')

/**

 * Redmine - project management software

 * Copyright (C) 2006-  Jean-Philippe Lang

 * This code is released under the GNU General Public License.

 */

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="command"

export default class extends Controller {

  execute(e) {

    e.preventDefault();

    this.dispatch(e.params.name);

  }

}

/**

 * Copyright (C) 2024- Justin Searls

 * copied from https://justin.searls.co/posts/a-decoupled-approach-to-relaying-events-between-stimulus-controllers/

 */

import { Controller } from '@hotwired/stimulus'

export default class RelayController extends Controller {

  forward (e) {

    const subscribers = this.element.querySelectorAll(`[data-relay-events*='${e.type}']`)

    subscribers.forEach(el => {

      el.dispatchEvent(new CustomEvent(e.type, {

        detail: e.detail,

        params: e.params

      }))

    })

  }

}

/**

 * Redmine - project management software

 * Copyright (C) 2006-  Jean-Philippe Lang

 * This code is released under the GNU General Public License.

 */

import { Controller } from "@hotwired/stimulus"

// generic layout specific responsive stuff goes here

// Connects to data-controller="responsive"

export default class extends Controller {

  static values  = { isMobile: Boolean }

  initialize() {

    this.mediaQueryList = window.matchMedia('screen and (max-width: 899px)');

    this.mediaQueryList.addEventListener('change', (e) => {

      this.isMobileValue = e.matches

    })

  }

  connect() {

    this.handlers = []

    this.html     = document.querySelector('html')

    // init menu on page load

    this.isMobileValue = this.mediaQueryList.matches

  }

  /* click handler for mobile menu toggle */

  toggle(e) {

    e.preventDefault();

    e.stopPropagation();

    if(this.html.classList.contains(this.isFlyoutActive)) {

      this.closeFlyout();

    } else {

      this.openFlyout();

    }

  }

  isMobileValueChanged(value) {

    if (value) {

      this.replace('#main-menu > ul', '.js-project-menu')

      this.replace('#top-menu  > ul', '.js-general-menu')

      this.replace('#sidebar   > *' , '.js-sidebar')

      this.replace('#account   > ul', '.js-profile-menu')

    } else {

      this.replace('.js-project-menu > ul', '#main-menu')

      this.replace('.js-general-menu > ul', '#top-menu')

      this.replace('.js-sidebar      > *' , '#sidebar')

      this.replace('.js-profile-menu > ul', '#account')

    }

  }

  replace(from, to) {

    const fromElem = document.querySelectorAll(from)

    const toElem   = document.querySelector(to)

    if (toElem !== null) {

      const toChildren = toElem.children

      toElem.replaceChildren(...toChildren, ...fromElem);

    }

  }

  openFlyout() {

    this.html.classList.add(this.isFlyoutActive);

    this.handlers = ['#main', '#header'].map((selector) => {

      return addHandler(document, 'click', (e) => {

        if (e.target.matches('.js-flyout-menu-toggle-button')) return;

        if (e.target.closest(selector) === null) return;

        this.closeFlyout()

      })

    });

  }

  closeFlyout() {

    this.html.classList.remove(this.isFlyoutActive);

    this.handlers.forEach(handler => handler());

  }

  get isFlyoutActive() {

    return 'flyout-is-active';

  }

}

function addHandler(element, ...args) {

  element.addEventListener(...args);

  return () => element.removeEventListener(...args);

}

<div id="wrapper" data-controller="relay">

<div class="flyout-menu js-flyout-menu" data-controller="responsive" data-action="command:toggle->responsive#toggle" data-relay-events="command:toggle">

    <a href="#" class="mobile-toggle-button js-flyout-menu-toggle-button" data-controller="command" data-action="command#execute command:toggle->relay#forward" data-command-name-param="toggle"></a>