다양한 헬퍼 모듈
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));
}
});
현재 이 모듈은 주로 gantt.utils.dom을 통해 DOM 작업에 대한 헬퍼 기능을 제공합니다.
var domHelpers = gantt.utils.dom;
다음과 같은 메서드를 제공합니다:
getNodePosition (node): object - 화면 상에서 요소의 위치를 가져오며, {x:number, y:number,width:number, height:number}
형태의 객체를 반환합니다.
getRelativeEventPosition (e, node): object - 특정 DOM 요소를 기준으로 한 마우스 좌표를 {x:number, y:number}
형태로 반환합니다.
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 - 첫 번째 노드가 두 번째 노드의 DOM 자식인지 확인하며, 맞으면 true
를 반환합니다.
hasClass (node, className): boolean - 주어진 node
가 특정 CSS 클래스를 포함하는지 확인하며, 포함하면 true
를 반환합니다.
closest (node, cssSelector): HTMLElement - 주어진 CSS 셀렉터와 일치하는 가장 가까운 조상 노드(자신 포함)를 찾습니다.
gantt.attachEvent("onEmptyClick", function (e) {
const domHelpers = gantt.utils.dom;
if(!domHelpers.closest(e.target, `[${gantt.config.link_attribute}]`)){
gantt.message("not a link");
}else{
gantt.message("link!");
}
});
Back to top