emptyStateElement Erweiterung

Weitere Informationen über die emptyStateElement-Erweiterung finden Sie im Artikel Leerer Zustand Bildschirm.

Methoden

Das gantt.ext.emptyStateElement-Objekt bietet die folgenden Methoden:

• isGanttEmpty (): boolean - Prüft, ob das Gantt-Diagramm keine Daten geladen hat. Es gibt true zurück, wenn keine Daten vorhanden sind, und false, wenn Daten vorhanden sind. Diese Methode wird von der Erweiterung verwendet, um zu entscheiden, ob der "leere Zustand" auf der Seite angezeigt werden soll. Sie können diese Methode überschreiben, wenn Sie ihr Verhalten anpassen möchten.
• isEnabled (): boolean - Gibt an, ob die Eigenschaft show_empty_state aktiviert ist. Sie gibt true zurück, wenn sie aktiviert ist, und false andernfalls.
• renderContent (container): void - Fügt HTML-Inhalt zum leeren Zustandselement hinzu. Diese Methode kann angepasst werden.
  • container - (HTMLElement) - Das Element, in dem der Inhalt gerendert wird.
• getContainer (): HTMLElement | null - Ruft das DOM-Element ab, in dem der leere Zustand angezeigt wird. Standardmäßig gibt es das Rasterelement zurück, und wenn das Raster nicht verfügbar ist, wird auf das Zeitachse-Element zurückgegriffen. Diese Methode kann ebenfalls angepasst werden.
• getNode (): HTMLElement | null - Holt den DOM-Knoten des leeren Zustandselements.
• show (): null | void - Macht den "leeren Zustand" sichtbar. Wenn kein Container für das leere Zustandselement verfügbar ist, gibt es null zurück. Die Erweiterung verwendet diese Methode automatisch.
• hide (): boolean | void - Blendet den "leeren Zustand" aus. Wenn es keinen Knoten für das leere Zustandselement gibt, der ausgeblendet werden kann, gibt es false zurück. Die Erweiterung ruft diese Methode ebenfalls automatisch auf.
• clickEvents? - (Array<string>) - Enthält IDs der angehängten Ereignis-Handler. Diese werden durch die Methoden attachAddTaskEvent und detachAddTaskEvents modifiziert.
• attachAddTaskEvent (): void - Fügt einen Handler hinzu, der ausgelöst wird, wenn auf das leere Zustandselement geklickt wird. Standardmäßig fügt dieser Handler eine neue Aufgabe hinzu.
• detachAddTaskEvents (): void - Entfernt die zuvor verwendeten Handler zum Hinzufügen von Aufgaben, wenn auf das leere Zustandselement geklickt wird.

Beispiel

gantt.ext.emptyStateElement = {
  isEnabled() {
    return gantt.config.show_empty_state === true;
  },
  isGanttEmpty() {
    return !gantt.getTaskByTime().length;
  },
  renderContent(container) {
    const placeholderTextElement = `<div class='gantt_empty_state_text'>
      <div class='gantt_empty_state_text_link' data-empty-state-create-task>
        ${gantt.locale.labels.empty_state_text_link}</div>
      <div class='gantt_empty_state_text_description'>
        ${gantt.locale.labels.empty_state_text_description}</div>
      </div>`;
    const placeholderImageElement = "<div class='gantt_empty_state_image'></div>";
 
    const placeholderContainer = `<div class='gantt_empty_state'>
      ${placeholderImageElement}${placeholderTextElement}</div>`;
    container.innerHTML = placeholderContainer;
  },
 
  clickEvents: [],
  attachAddTaskEvent() {
    const id = gantt.attachEvent("onEmptyClick", function(e) {
      const domHelpers = gantt.utils.dom;
      const gridPlaceholder = domHelpers.closest(
        e.target, "[data-empty-state-create-task]"
      );
      if (gridPlaceholder) {
        gantt.createTask({
          id: gantt.uid(),
          text: "Neue Aufgabe"
        });
      }
    });
    this.clickEvents.push(id);
  },
  detachAddTaskEvents() {
    this.clickEvents.forEach(function(event) {
      gantt.detachEvent(event);
    });
    this.clickEvents = [];
  },
 
  getContainer() {
    if (gantt.$container) {
      const domHelpers = gantt.utils.dom;
      if (gantt.$container.contains(gantt.$grid_data)) {
        return domHelpers.closest(
          gantt.$grid_data, ".gantt_layout_content"
        );
      }
      if (gantt.$container.contains(gantt.$task_data)) {
        return domHelpers.closest(
          gantt.$task_data, ".gantt_layout_content"
        );
      }
    }
 
    return null;
  },
 
  getNode() {
    const container = this.getContainer();
    if (!container) {
      return null;
    }
    const emptyStateElementNode = container.querySelector(
      ".gantt_empty_state_wrapper"
    );
    return emptyStateElementNode;
  },
 
  show() {
    const container = this.getContainer();
    if (!container && this.isGanttEmpty()) {
      return null;
    }
 
    const wrapper = document.createElement("div");
    wrapper.className = "gantt_empty_state_wrapper";
    wrapper.style.marginTop = (
      gantt.config.scale_height - container.offsetHeight
    ) + "px";
    const oldNodes = gantt.$container.querySelectorAll(
      ".gantt_empty_state_wrapper"
    );
    // für IE11
    Array.prototype.forEach.call(oldNodes, function(node) {
      node.parentNode.removeChild(node);
    });
 
    this.detachAddTaskEvents();
    this.attachAddTaskEvent();
 
    container.appendChild(wrapper);
    this.renderContent(wrapper);
  },
  hide() {
    const emptyStateElementNode = this.getNode();
    if (emptyStateElementNode) {
      emptyStateElementNode.parentNode.removeChild(emptyStateElementNode);
    } else {
      return false;
    }
  },
  init() { }
};
 
gantt.attachEvent("onDataRender", function() {
  const emptyStateElement = gantt.ext.emptyStateElement;
  if (emptyStateElement.isEnabled() && emptyStateElement.isGanttEmpty()) {
    emptyStateElement.show();
  } else {
    emptyStateElement.hide();
  }
});

Zurück nach oben