utils

verschiedene Hilfsmodule

Example

var tooltips = gantt.ext.tooltips;
tooltips.tooltipFor({
    selector: ".gantt_scale_cell",
    html: function (event, node) {
        const domHelper = gantt.utils.dom;
        const pos = domHelper.getRelativeEventPosition(event, gantt.$task_scale);
        return gantt.templates.task_date(gantt.dateFromPos(pos.x));
}
});

Momentan enthält das Modul nur den Helper für DOM-Operationen, verfügbar unter gantt.utils.dom

var domHelpers = gantt.utils.dom;

Der folgende Methoden sind verfügbar:

• getNodePosition (node): object - gibt die Position des Elements auf dem Bildschirm im Format {x:number, y:number,width:number, height:number} zurück

  • node - (HTMLElement) - DOM-Element, das überprüft wird

• getRelativeEventPosition (e, node): object - gibt die Mauskoordinaten relativ zum DOM-Element im Format {x:number, y:number} zurück

  • e - (Event) - das aufgetretene Ereignis
  • node - (HTMLElement) - DOM-Element, das überprüft wird

gantt.message({
    expire: -1,
    text: "<span id='pointer-date'></span>"
});
 
const formatDate = gantt.date.date_to_str("%Y-%m-%d %H:%i");
gantt.attachEvent("onMouseMove", function (id, e){
    const helper = gantt.utils.dom;
    if(helper.isChildOf(e.target, gantt.$task_data)){
        const textContainer = document.querySelector("#pointer-date");
        const pos = helper.getRelativeEventPosition(e, gantt.$task_data);
        const pointerDate = gantt.dateFromPos(pos.x);
        textContainer.innerText = formatDate(pointerDate);
    }
});

• isChildOf (child, parent): boolean - gibt true zurück, wenn der als erstes angegebene Knoten ein DOM-Kind des als zweiten angegebenen Knotens ist

  • child - (HTMLElement) - Kindknoten, der überprüft wird
  • parent - (HTMLElement) - Elternknoten, der überprüft wird

• hasClass (node, className): boolean - gibt true zurück, wenn die Klassendatei des angegebenen node eine bestimmte CSS-Klasse enthält

  • node - (HTMLElement) - DOM-Element, das überprüft wird
  • className - (string) - Klassenname, der überprüft wird

• closest (node, cssSelector): HTMLElement - gibt den ersten Knoten zurück, der dem angegebenen CSS-Selector entspricht, beginnend beim Attribut node, bis zu den DOM-Elternzweigen.

  • node - (HTMLElement) - DOM-Element, das überprüft wird
  • cssSelector - (string) - ein Klassenname für den Zielknoten

gantt.attachEvent("onEmptyClick", function (e) {
  const domHelpers = gantt.utils.dom;
  if(!domHelpers.closest(e.target, `[${gantt.config.link_attribute}]`)){
    gantt.message("kein Link");
  }else{
    gantt.message("Link!"); 
  }
});

Zurück nach oben