awo-hamburg-intranet/module/knowledgecenter_update/Plugins/_files/js/custom.js

// custom.js – Files Gallery Selection & Popup Script

// Prüfen, ob dieses Fenster ein Popup (d.h. ein Child-Fenster) ist
if (window.opener) {
  // URL-Parameter auslesen und in localStorage speichern
  const urlParams = new URLSearchParams(window.location.search);
  let input_id = urlParams.get('input_id') || "";
  let image_id = urlParams.get('image_id') || "";
  let type = urlParams.get('type') || "";
  let mode = urlParams.get('mode') || "";
  let saveajax = urlParams.get('saveajax') || "";
  let kc_lock_path = urlParams.get('kc_lock_path') || "";

  if (urlParams.has('input_id')) {
    if (input_id) {
      localStorage.setItem('input_id', input_id);
    } else {
      localStorage.removeItem('input_id');
    }
  }
  if (urlParams.has('image_id')) {
    if (image_id) {
      localStorage.setItem('image_id', image_id);
    } else {
      localStorage.removeItem('image_id');
    }
  }
  if (urlParams.has('type')) {
    if (type) {
      localStorage.setItem('type', type);
    } else {
      localStorage.removeItem('type');
    }
  }
  if (urlParams.has('mode')) {
    if (mode) {
      localStorage.setItem('mode', mode);
    } else {
      localStorage.removeItem('mode');
    }
  }
  if (urlParams.has('saveajax')) {
    if (saveajax) {
      localStorage.setItem('saveajax', saveajax);
    } else {
      localStorage.removeItem('saveajax');
    }
  }
  if (urlParams.has('kc_lock_path')) {
    if (kc_lock_path) {
      localStorage.setItem('kc_lock_path', kc_lock_path);
    } else {
      localStorage.removeItem('kc_lock_path');
    }
  }

  // Werte aus localStorage wieder auslesen
  input_id = localStorage.getItem('input_id');
  image_id = localStorage.getItem('image_id');
  type = localStorage.getItem('type');
  mode = localStorage.getItem('mode');
  saveajax = localStorage.getItem('saveajax');
  kc_lock_path = localStorage.getItem('kc_lock_path') || "";

  function normalizePath(path) {
    if (!path) return "";

    const cleaned = String(path).replace(/^\/+/, '');
    const lockPath = String(kc_lock_path || '').replace(/^\/+|\/+$/g, '');

    if (!lockPath) {
      return cleaned;
    }

    if (cleaned === lockPath || cleaned.indexOf(lockPath + '/') === 0) {
      return cleaned;
    }

    return lockPath + '/' + cleaned;
  }

  function normalizePaths(paths) {
    if (!paths) return "";

    return String(paths)
      .split(',')
      .map(part => normalizePath(part.trim()))
      .filter(Boolean)
      .join(', ');
  }

  /**
   * Übergibt die gewählten Pfade an das Parent-Fenster und schließt das Popup.
   * @param {string} paths Kommagetrennter Pfad(e)
   * @param {string} input_id ID des Input-Felds im Parent
   * @param {string} image_id ID des Bild-Elements im Parent
   */
  function sendDataAndClose(paths, input_id, image_id) {
    const normalizedPaths = normalizePaths(paths);
    console.log("Übergebe Pfade:", normalizedPaths);
    if (!window.opener) return;

    // Setze den Pfad oder die Pfade im Input-Feld
    const input = window.opener.document.getElementById(input_id);
    if (input) {
      input.value = normalizedPaths;
      console.log(`Wert in Input "${input_id}" gesetzt.`);
    } else {
      console.error(`Kein Input-Feld mit der ID "${input_id}" gefunden.`);
    }

    // Bild-Vorschau aktualisieren (sucht erstes Element mit Klasse "preview")
    const img = window.opener.document.querySelector('.preview');
    if (img) {
      img.src = '/userdata/' + normalizedPaths.split(',')[0].trim();
      img.style.display = "block";
      console.log('Bild-Element mit Klasse "preview" aktualisiert.');
    } else {
      console.warn('Kein Bild-Element mit der Klasse "preview" gefunden.');
    }

    // Optional: übergebene AJAX-Funktion aufrufen
    if (saveajax && typeof window.opener[saveajax] === 'function') {
      console.log(`Rufe AJAX-Funktion "${saveajax}" im Parent auf.`);
      window.opener[saveajax]();
    } else if (saveajax) {
      console.warn(`AJAX-Funktion "${saveajax}" nicht gefunden.`);
    }

    // Popup schließen
    console.log("Popup wird geschlossen.");
    window.close();
  }

  /**
   * Fügt den Button "Auswahl speichern" in der Toolbar ein (einmalig).
   */
  function addCustomButton() {
    const topbar = document.querySelector('.topbar-select');
    if (!topbar) return;
    const buttonsContainer = topbar.querySelector('.buttons-selected');
    if (!buttonsContainer) return;
    if (buttonsContainer.querySelector('.my-custom-button')) return;

    const button = document.createElement('button');
    button.textContent = 'Auswahl speichern';
    button.className = 'my-custom-button';
    Object.assign(button.style, {
      marginRight: '10px',
      padding: '10px 20px',
      backgroundColor: 'rgb(94 188 24)',
      color: '#fff',
      border: 'none',
      borderRadius: '999px',
      cursor: 'pointer'
    });

    button.addEventListener('click', () => {
      const selectedItems = document.querySelectorAll('a.files-a[data-selected="1"]');
      const selectedPaths = Array.from(selectedItems).map(el => el.dataset.path);
      const pathString = selectedPaths.join(', ');
      console.log('Ausgewählte Pfade:', selectedPaths);
      sendDataAndClose(pathString, input_id, image_id);
    });

    buttonsContainer.insertBefore(button, buttonsContainer.firstChild);
  }

  /**
   * Prüft, ob mindestens ein Element ausgewählt ist, und zeigt ggf. den Button.
   */
  function checkSelectionAndAddButton() {
    const anySelected = document.querySelector('a.files-a[data-selected="1"]');
    if (anySelected) {
      addCustomButton();
    }
  }

  // Observer für Änderungen an `data-selected`
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (
        mutation.type === 'attributes' &&
        mutation.attributeName === 'data-selected'
      ) {
        const target = mutation.target;
        const isSelected = target.getAttribute('data-selected') === '1';

        // Wenn single → andere Auswahl(en) aufheben
        if (isSelected && mode === 'single') {
          document.querySelectorAll('a.files-a[data-selected="1"]').forEach(el => {
            if (el !== target) {
              el.setAttribute('data-selected', '0');
            }
          });
        }

        checkSelectionAndAddButton();
        break;
      }
    }
  });

  /**
   * Beginnt, alle Gallery-Items auf Auswahländerungen zu beobachten.
   */
  function observeFiles() {
    const items = document.querySelectorAll('a.files-a');
    items.forEach(item => {
      observer.observe(item, {
        attributes: true,
        attributeFilter: ['data-selected']
      });
    });
  }

  // Initialisierung nach DOM ready
  document.addEventListener('DOMContentLoaded', () => {
    observeFiles();

    // Falls neue Items nachgeladen werden, erneut beobachten
    const listObserver = new MutationObserver(() => {
      observeFiles();
    });
    listObserver.observe(document.body, { childList: true, subtree: true });
  });

}