Schnellinfo (Touch-Unterstützung)

Die Bibliothek enthält die Schnellinfo-Erweiterung, mit der Sie ein Popup mit Aufgabeninformationen anzeigen können, wenn eine Aufgabe auf dem Bildschirm berührt wird.

Related sample:  QuickInfo extension

Um diese Erweiterung zu nutzen, müssen Sie das "Schnellinfo" Plugin aktivieren, indem Sie die Methode gantt.plugins verwenden.

gantt.plugins({
    quick_info: true
});

API-Übersicht

Die Schnellinfo-Erweiterung wird mit einer API geliefert, die es Ihnen ermöglicht, ihre Einstellungen anzupassen, ihr Verhalten zu steuern oder das Erscheinungsbild des Popups anzupassen. Sie können entweder mit dem gantt.ext.quickInfo-Objekt arbeiten oder die öffentliche API von dhtmlxGantt verwenden, die Folgendes umfasst:

Methoden

• showQuickInfo - zeigt das Popup-Formular für eine bestimmte Aufgabe an
• hideQuickInfo - versteckt das Popup-Formular, falls es derzeit sichtbar ist

Ereignisse

• onQuickInfo - wird ausgelöst, wenn das Popup-Formular erscheint
• onAfterQuickInfo - wird ausgelöst, nachdem das Popup-Formular geschlossen wurde

Eigenschaften

• quick_info_detached - bestimmt, ob das Popup in der Nähe der ausgewählten Aufgabe oder von der Seite des Bildschirms erscheint
• quickinfo_buttons - enthält eine Sammlung von Schaltflächen im Aufgabeninformationsformular des Popups

Vorlagen

• quick_info_class - gibt die CSS-Klasse für das Popup-Formular an
• quick_info_content - definiert den Inhalt des Popup-Formulars
• quick_info_date - setzt das Datum des Popup-Formulars
• quick_info_title - setzt den Titel des Popup-Formulars

QuickInfo-Objekt

Standardmäßig zeigt die Schnellinfo-Erweiterung automatisch ein Popup über der ausgewählten Aufgabe an.

Ab Version 7.0 wurde die Schnellinfo-Funktionalität erweitert. Jetzt bietet das gantt.ext.quickInfo Objekt Methoden, um das Popup manuell zu steuern.

Hier sind die verfügbaren Methoden im gantt.ext.quickInfo Objekt:

• show() - öffnet das Schnellinfo-Popup für eine bestimmte Aufgabe. Es akzeptiert:
  • id - (string|number) die ID einer Aufgabe/Verknüpfung/Ressource
• show() - öffnet das Schnellinfo-Popup an bestimmten Koordinaten. Parameter sind:
  • top - (number) die X-Koordinate
  • left - (number) die Y-Koordinate
• hide() - schließt das Schnellinfo-Popup. Es akzeptiert optional:
  • [ force ] - (boolean) bestimmt, ob das Popup sofort schließt, wenn gantt.config.quick_info_detached auf false gesetzt ist. Wird true übergeben, schließt das Popup sofort; andernfalls blendet es sich mit einer kurzen Animation aus.
• setContainer() - definiert den Container für das Schnellinfo-Popup.
  • container - (string|HTMLElement) der Schnellinfo-Container. Wenn nicht angegeben, verwendet QuickInfo standardmäßig den ersten gefundenen Knoten: gantt.$task, gantt.$grid, gantt.$layout
• getNode() - ruft das HTMLElement des Schnellinfo-Popups ab. Gibt null zurück, wenn nicht initialisiert.
• setContent(config) - (object) aktualisiert den Schnellinfo-Inhalt. Es nimmt ein Konfigurationsobjekt mit folgender Struktur:
  • taskId - (string|number) optional, die ID der Aufgabe, die mit den Schnellinfo-Schaltflächen verknüpft ist
  • header - optional, definiert den Popup-Header, der Folgendes enthalten kann:
    • title - (string) optional, der Titel des Popups
    • date - (string) optional, das Datum des Popups
  • content - (string) optional, der Hauptinhalt des Popups
  • buttons - (string[]) optional, Schaltflächen zur Anzeige im Popup
    Wenn weder Header noch Schaltflächen bereitgestellt werden, werden diese Bereiche des Popups ausgeblendet.

Anzeigen von Schnellinfo

Sie können das Popup für eine bestimmte Aufgabe, Verknüpfung oder Ressourcenansicht anzeigen oder eine benutzerdefinierte Position auf dem Bildschirm mit der Methode gantt.ext.quickInfo.show() festlegen:

// Popup für eine bestimmte Aufgabe anzeigen
var task = gantt.getTask(10);
gantt.ext.quickInfo.show(task.id);
 
// Popup an bestimmten Koordinaten anzeigen
gantt.ext.quickInfo.show(100, 200);

Hier ist ein Beispiel, wie das Popup für eine Ressource angezeigt wird:

const quickInfo = gantt.ext.quickInfo;
gantt.attachEvent("onGanttReady", function(){
    quickInfo.setContainer(document.body);
})
 
gantt.attachEvent("onEmptyClick", function (e) {
  const domHelpers = gantt.utils.dom;
  const resourceElement = domHelpers.closest(e.target, "[data-resource-id]");
  if(resourceElement){
    const resourceId = resourceElement.getAttribute("data-resource-id");
    const resource = gantt.$resourcesStore.getItem(resourceId);
    const position = resourceElement.getBoundingClientRect();
    quickInfo.show(position.right, position.top);
 
    const assignedTasks = gantt.getResourceAssignments(resourceId).map(function(assign){
        return gantt.getTask(assign.task_id).text;
    });
 
    quickInfo.setContent({
        header: {
        title: resource.text,
        date: ""
    },
        content: "Zugewiesene Aufgaben: " + assignedTasks.join(", "),
        buttons: []
    });
  }
});

Und hier ist ein Beispiel, wie das Popup für eine bestimmte Verknüpfung angezeigt wird:

const quickInfo = gantt.ext.quickInfo;
gantt.attachEvent("onLinkClick", function(id,e){
    // jegliche benutzerdefinierte Logik
    const link = gantt.getLink(id);
    const linksFormatter = gantt.ext.formatters.linkFormatter();
 
    const domHelpers = gantt.utils.dom;
    const position = domHelpers.getRelativeEventPosition(e, gantt.$task_data);
 
    const sourceTask = gantt.getTask(link.source);
    const targetTask = gantt.getTask(link.target);
    quickInfo.show(position.x, position.y);
 
    let linkDescr = "";
 
    if (link.type === gantt.config.links.start_to_start){
        linkDescr = "Start zu Start";
    } else if (link.type === gantt.config.links.start_to_finish){
        linkDescr = "Start zu Ende";
    } else if (link.type === gantt.config.links.finish_to_finish){
        linkDescr = "Ende zu Ende";
    } else {
        linkDescr = "Ende zu Start";
    }
 
    quickInfo.setContent({
        header: {
            title: `${linkDescr} link`,
            date: ""
        },
        content: `Quelle: ${sourceTask.text}<br>
                    Ziel: ${targetTask.text}`,
        buttons: []
    });
});

Verstecken von Schnellinfo

Um das Popup zu schließen, verwenden Sie die Methode gantt.ext.quickInfo.hide(). Sie funktioniert unterschiedlich, je nach Einstellung gantt.config.quick_info_detached:

• Wenn keine Parameter übergeben werden, blendet sich das Popup mit einer kurzen Animation aus:

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// Popup ausblenden
gantt.ext.quickInfo.hide();

• Wenn Sie das Popup sofort schließen möchten, übergeben Sie true als Parameter:

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// Popup sofort schließen
gantt.ext.quickInfo.hide(true);

Wenn gantt.config.quick_info_detached auf true gesetzt ist, schließt das Popup immer sofort.

Erstellen einer benutzerdefinierten Schnellinfo

Das Standard-Popup enthält einen Titel, ein Datum, Inhalt und Schaltflächen und sieht folgendermaßen aus:

Wenn Sie das Erscheinungsbild des Popups anpassen oder Ihr eigenes erstellen möchten, können Sie benutzerdefinierte HTML-Inhalte mit der Methode gantt.ext.quickInfo.setContent() definieren:

gantt.locale.labels.custom_button = "Mein Knopf"
gantt.ext.quickInfo.setContent({
    header:{
        title: "Mein benutzerdefinierter Header",
        date: "18. Februar 2020"
    },
    content: "einige Inhalte hier",
    buttons: ["custom_button"]
})

Dies führt zu einem Popup wie diesem:

Hinzufügen benutzerdefinierter Schaltflächen mit benutzerdefiniertem Verhalten

Das $click Objekt ermöglicht es Ihnen, benutzerdefinierte Aktionen für Schaltflächen im Popup zu definieren:

gantt.config.quickinfo_buttons=["icon_delete","icon_edit","advanced_details_button"];
gantt.locale.labels["advanced_details_button"] = "Erweiterte Info";
gantt.init("gantt_here");
 
gantt.$click.buttons.advanced_details_button=function(id){
    gantt.message("Dies sind erweiterte Details");
    return false; // stoppt das Standardverhalten
};

Festlegen eines Containers für Schnellinfo

Sie können die Methode gantt.ext.quickInfo.setContainer() verwenden, um das Popup in einem benutzerdefinierten Container anzuzeigen:

const quickInfo = gantt.ext.quickInfo;
quickInfo.setContainer(document.body); gantt.ext.quickInfo.show(1300,100);
gantt.locale.labels.custom_button = "Mein Knopf"
gantt.ext.quickInfo.setContent({
    header:{
        title: "Mein benutzerdefinierter Header",
        date: "18. Februar 2020"
    },
    content: "einige Inhalte hier",
    buttons: ["custom_button"]
});

Mit dieser Konfiguration wird das Popup in document.body gerendert, außerhalb des Gantt-Containers:

Zurück nach oben