jsgantt-improved - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1

dist/src/events.js

@@ -46,8 +46,12 @@ "use strict";
         clearTimeout(pGanttChartObj.vTool.delayTimeout);
+        var newHTML = pContents.innerHTML;
+        if (pGanttChartObj.vTool.vToolCont.getAttribute("content") !== newHTML) {
+            pGanttChartObj.vTool.vToolCont.innerHTML = pContents.innerHTML;
+            // as we are allowing arbitrary HTML we should remove any tag ids to prevent duplication
+            utils_1.stripIds(pGanttChartObj.vTool.vToolCont);
+            pGanttChartObj.vTool.vToolCont.setAttribute("content", newHTML);
+        }
         if (pGanttChartObj.vTool.vToolCont.getAttribute('showing') != vShowing || pGanttChartObj.vTool.style.visibility != 'visible') {
             if (pGanttChartObj.vTool.vToolCont.getAttribute('showing') != vShowing) {
                 pGanttChartObj.vTool.vToolCont.setAttribute('showing', vShowing);
-                pGanttChartObj.vTool.vToolCont.innerHTML = pContents.innerHTML;
-                // as we are allowing arbitrary HTML we should remove any tag ids to prevent duplication
-                utils_1.stripIds(pGanttChartObj.vTool.vToolCont);
             }
@@ -131,5 +135,32 @@ pGanttChartObj.vTool.style.visibility = 'visible';
 };
-exports.addTooltipListeners = function (pGanttChart, pObj1, pObj2) {
-    exports.addListener('mouseover', function (e) { exports.showToolTip(pGanttChart, e, pObj2, null, pGanttChart.getTimer()); }, pObj1);
-    exports.addListener('mouseout', function (e) { utils_1.delayedHide(pGanttChart, pGanttChart.vTool, pGanttChart.getTimer()); }, pObj1);
+exports.addTooltipListeners = function (pGanttChart, pObj1, pObj2, callback) {
+    var isShowingTooltip = false;
+    exports.addListener('mouseover', function (e) {
+        if (isShowingTooltip || !callback) {
+            exports.showToolTip(pGanttChart, e, pObj2, null, pGanttChart.getTimer());
+        }
+        else if (callback) {
+            isShowingTooltip = true;
+            var promise = callback();
+            exports.showToolTip(pGanttChart, e, pObj2, null, pGanttChart.getTimer());
+            if (promise && promise.then) {
+                promise.then(function () {
+                    if (pGanttChart.vTool.vToolCont.getAttribute('showing') === pObj2.id &&
+                        pGanttChart.vTool.style.visibility === 'visible') {
+                        exports.showToolTip(pGanttChart, e, pObj2, null, pGanttChart.getTimer());
+                    }
+                });
+            }
+        }
+    }, pObj1);
+    exports.addListener('mouseout', function (e) {
+        var outTo = e.relatedTarget;
+        if (utils_1.isParentElementOrSelf(outTo, pObj1) || (pGanttChart.vTool && utils_1.isParentElementOrSelf(outTo, pGanttChart.vTool))) {
+            // not actually out
+        }
+        else {
+            isShowingTooltip = false;
+        }
+        utils_1.delayedHide(pGanttChart, pGanttChart.vTool, pGanttChart.getTimer());
+    }, pObj1);
 };
@@ -136,0 +167,0 @@ exports.addThisRowListeners = function (pGanttChart, pObj1, pObj2) {

dist/src/lang.js

@@ -146,3 +146,4 @@ "use strict";
     'fri': 'Fri',
-    'sat': 'Sat'
+    'sat': 'Sat',
+    'tooltipLoading': 'Loading...'
 };
@@ -353,3 +354,4 @@ exports.en = en;
     'mths': 'мес.',
-    'qtrs': 'кв.'
+    'qtrs': 'кв.',
+    'tooltipLoading': 'Загрузка...'
 };
@@ -356,0 +358,0 @@ exports.ru = ru;

dist/src/task.js

@@ -526,70 +526,97 @@ "use strict";
 };
-exports.createTaskInfo = function (pTask, template) {
+/**
+ * @param pTask
+ * @param templateStrOrFn template string or function(task). In any case parameters in template string are substituted.
+ *        If string - just a static template.
+ *        If function(task): string - per task template. Can return null|undefined to fallback to default template.
+ *        If function(task): Promise<string>) - async per task template. Tooltip will show 'Loading...' if promise is not yet complete.
+ *          Otherwise returned template will be handled in the same manner as in other cases.
+ */
+exports.createTaskInfo = function (pTask, templateStrOrFn) {
     var _this = this;
-    if (template === void 0) { template = null; }
+    if (templateStrOrFn === void 0) { templateStrOrFn = null; }
     var vTmpDiv;
     var vTaskInfoBox = document.createDocumentFragment();
     var vTaskInfo = this.newNode(vTaskInfoBox, 'div', null, 'gTaskInfo');
-    if (template) {
-        var allData_1 = pTask.getAllData();
-        utils_1.internalProperties.forEach(function (key) {
-            var lang;
-            if (utils_1.internalPropertiesLang[key]) {
-                lang = _this.vLangs[_this.vLang][utils_1.internalPropertiesLang[key]];
+    var setupTemplate = function (template) {
+        vTaskInfo.innerHTML = "";
+        if (template) {
+            var allData_1 = pTask.getAllData();
+            utils_1.internalProperties.forEach(function (key) {
+                var lang;
+                if (utils_1.internalPropertiesLang[key]) {
+                    lang = _this.vLangs[_this.vLang][utils_1.internalPropertiesLang[key]];
+                }
+                if (!lang) {
+                    lang = key;
+                }
+                var val = allData_1[key];
+                template = template.replace("{{" + key + "}}", val);
+                if (lang) {
+                    template = template.replace("{{Lang:" + key + "}}", lang);
+                }
+                else {
+                    template = template.replace("{{Lang:" + key + "}}", key);
+                }
+            });
+            _this.newNode(vTaskInfo, 'span', null, 'gTtTemplate', template);
+        }
+        else {
+            _this.newNode(vTaskInfo, 'span', null, 'gTtTitle', pTask.getName());
+            if (_this.vShowTaskInfoStartDate == 1) {
+                vTmpDiv = _this.newNode(vTaskInfo, 'div', null, 'gTILine gTIsd');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', _this.vLangs[_this.vLang]['startdate'] + ': ');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskText', utils_1.formatDateStr(pTask.getStart(), _this.vDateTaskDisplayFormat, _this.vLangs[_this.vLang]));
             }
-            if (!lang) {
-                lang = key;
+            if (_this.vShowTaskInfoEndDate == 1) {
+                vTmpDiv = _this.newNode(vTaskInfo, 'div', null, 'gTILine gTIed');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', _this.vLangs[_this.vLang]['enddate'] + ': ');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskText', utils_1.formatDateStr(pTask.getEnd(), _this.vDateTaskDisplayFormat, _this.vLangs[_this.vLang]));
             }
-            var val = allData_1[key];
-            template = template.replace("{{" + key + "}}", val);
-            if (lang) {
-                template = template.replace("{{Lang:" + key + "}}", lang);
+            if (_this.vShowTaskInfoDur == 1 && !pTask.getMile()) {
+                vTmpDiv = _this.newNode(vTaskInfo, 'div', null, 'gTILine gTId');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', _this.vLangs[_this.vLang]['duration'] + ': ');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getDuration(_this.vFormat, _this.vLangs[_this.vLang]));
             }
-            else {
-                template = template.replace("{{Lang:" + key + "}}", key);
+            if (_this.vShowTaskInfoComp == 1) {
+                vTmpDiv = _this.newNode(vTaskInfo, 'div', null, 'gTILine gTIc');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', _this.vLangs[_this.vLang]['completion'] + ': ');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getCompStr());
             }
-        });
-        this.newNode(vTaskInfo, 'span', null, 'gTtTemplate', template);
+            if (_this.vShowTaskInfoRes == 1) {
+                vTmpDiv = _this.newNode(vTaskInfo, 'div', null, 'gTILine gTIr');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', _this.vLangs[_this.vLang]['resource'] + ': ');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getResource());
+            }
+            if (_this.vShowTaskInfoLink == 1 && pTask.getLink() != '') {
+                vTmpDiv = _this.newNode(vTaskInfo, 'div', null, 'gTILine gTIl');
+                var vTmpNode = _this.newNode(vTmpDiv, 'span', null, 'gTaskLabel');
+                vTmpNode = _this.newNode(vTmpNode, 'a', null, 'gTaskText', _this.vLangs[_this.vLang]['moreinfo']);
+                vTmpNode.setAttribute('href', pTask.getLink());
+            }
+            if (_this.vShowTaskInfoNotes == 1) {
+                vTmpDiv = _this.newNode(vTaskInfo, 'div', null, 'gTILine gTIn');
+                _this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', _this.vLangs[_this.vLang]['notes'] + ': ');
+                if (pTask.getNotes())
+                    vTmpDiv.appendChild(pTask.getNotes());
+            }
+        }
+    };
+    var callback;
+    if (typeof templateStrOrFn === 'function') {
+        callback = function () {
+            var strOrPromise = templateStrOrFn(pTask);
+            if (!strOrPromise || typeof strOrPromise === 'string') {
+                setupTemplate(strOrPromise);
+            }
+            else if (strOrPromise.then) {
+                setupTemplate(_this.vLangs[_this.vLang]['tooltipLoading'] || _this.vLangs['en']['tooltipLoading']);
+                return strOrPromise.then(setupTemplate);
+            }
+        };
     }
     else {
-        this.newNode(vTaskInfo, 'span', null, 'gTtTitle', pTask.getName());
-        if (this.vShowTaskInfoStartDate == 1) {
-            vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIsd');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['startdate'] + ': ');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskText', utils_1.formatDateStr(pTask.getStart(), this.vDateTaskDisplayFormat, this.vLangs[this.vLang]));
-        }
-        if (this.vShowTaskInfoEndDate == 1) {
-            vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIed');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['enddate'] + ': ');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskText', utils_1.formatDateStr(pTask.getEnd(), this.vDateTaskDisplayFormat, this.vLangs[this.vLang]));
-        }
-        if (this.vShowTaskInfoDur == 1 && !pTask.getMile()) {
-            vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTId');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['duration'] + ': ');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getDuration(this.vFormat, this.vLangs[this.vLang]));
-        }
-        if (this.vShowTaskInfoComp == 1) {
-            vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIc');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['completion'] + ': ');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getCompStr());
-        }
-        if (this.vShowTaskInfoRes == 1) {
-            vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIr');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['resource'] + ': ');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getResource());
-        }
-        if (this.vShowTaskInfoLink == 1 && pTask.getLink() != '') {
-            vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIl');
-            var vTmpNode = this.newNode(vTmpDiv, 'span', null, 'gTaskLabel');
-            vTmpNode = this.newNode(vTmpNode, 'a', null, 'gTaskText', this.vLangs[this.vLang]['moreinfo']);
-            vTmpNode.setAttribute('href', pTask.getLink());
-        }
-        if (this.vShowTaskInfoNotes == 1) {
-            vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIn');
-            this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['notes'] + ': ');
-            if (pTask.getNotes())
-                vTmpDiv.appendChild(pTask.getNotes());
-        }
+        setupTemplate(templateStrOrFn);
     }
-    return vTaskInfoBox;
+    return { component: vTaskInfoBox, callback: callback };
 };
@@ -596,0 +623,0 @@ exports.AddTaskItem = function (value) {

dist/src/utils.js

@@ -538,2 +538,10 @@ "use strict";
 };
+function isParentElementOrSelf(child, parent) {
+    while (child) {
+        if (child === parent)
+            return true;
+        child = child.parentElement;
+    }
+}
+exports.isParentElementOrSelf = isParentElementOrSelf;
 //# sourceMappingURL=utils.js.map

docs/index.js

@@ -90,3 +90,3 @@ let dataurl;
         afterDraw: ()=> {
-          console.log('before after listener');
+          console.log('after draw listener');
           if (document.querySelector("#customElements:checked")) {
@@ -118,3 +118,6 @@ drawCustomElements(g);
       vTooltipDelay: delay,
-      vTooltipTemplate: newtooltiptemplate,
+      vTooltipTemplate: 
+        document.querySelector("#dynamicTooltip:checked") ?
+          generateTooltip :
+          newtooltiptemplate,
       vDebug,
@@ -201,2 +204,38 @@ vEditable,
 
+function generateTooltip(task) {
+  // default tooltip for level 1
+  if (task.getLevel() === 1) return;
+    
+  // string tooltip for level 2. Show completed/total child count and current timestamp
+  if (task.getLevel() === 2) {
+    let childCount = 0;
+    let complete = 0;
+    for (const item of g.getList()) {
+      if (item.getParent() == task.getID()) {
+        if (item.getCompVal() === 100) {
+          complete++;
+        }
+        childCount++;
+      }
+    }
+    console.log(`Generated dynamic sync template for '${task.getName()}'`);
+    return `
+      <dl>
+        <dt>Name:</dt><dd>{{pName}}</dd>
+        <dt>Complete child tasks:</dt><dd style="color:${complete === childCount ? 'green' : 'red'}">${complete}/${childCount}</dd>
+        <dt>Tooltip generated at:</dt><dd>${new Date()}</dd>
+      </dl>
+    `;
+  }
+  
+  // async tooltip for level 3 and below
+  return new Promise((resolve, reject) => {
+    const delay = Math.random() * 3000;
+    setTimeout(() => {
+      console.log(`Generated dynamic async template for '${task.getName()}'`);
+      resolve(`Tooltip content from the promise after ${Math.round(delay)}ms`);
+    }, delay);
+  });
+}
+
 start('pt')

Documentation.md

@@ -300,2 +300,3 @@
 |_setMaxDate():_ |Similar to _setMinDate()_|
+|_setTooltipTemplate():_ |Set template for the tooltip. Can be <ul><li>*string* - just a static template</li><li>*function(task): string* - function returning template for a given task</li><li>*function(task): Promise&lt;string&gt;* - function returning promise resolving to string. Until promise is resolved tooltip shows `tooltipLoading` from lang section</li></ul>In each case variables inside string are substituted (see example). If function is given and it returns undefined or null - default template is used (like if argument was not passed at all). Function argument is evaluated when tooltip needs to be shown.
 |_setEditable():_  |Set with true if you want to edit values in the data table, will show inputs instead of texts| 
@@ -410,3 +411,3 @@ |_setDebug():_  |Set with true if you want to see debug in console|
 |_sep_          |Sep               |_moreinfo_     |More Information  |_qtrs_         |Qtrs              |
-|_oct_          |Oct               |_notes_        |Notes             |               |                  |
+|_oct_          |Oct               |_notes_        |Notes             |_tooltipTemplate_|Loading...      |
 |_nov_          |Nov               |               |                  |               |                  |
@@ -413,0 +414,0 @@ |_dec_          |Dec               |               |                  |               |                  |

package.json

 {
   "name": "jsgantt-improved",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "jsgantt-improved",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/draw.ts

@@ -964,4 +964,5 @@ import * as lang from './lang';
           vTmpDiv2 = this.newNode(vTmpDiv, 'div', this.vDivId + 'tt' + vID, null, null, null, null, 'none');
-          vTmpDiv2.appendChild(this.createTaskInfo(this.vTaskList[i], this.vTooltipTemplate));
-          addTooltipListeners(this, this.vTaskList[i].getTaskDiv(), vTmpDiv2);
+          const {component, callback} = this.createTaskInfo(this.vTaskList[i], this.vTooltipTemplate);
+          vTmpDiv2.appendChild(component);
+          addTooltipListeners(this, this.vTaskList[i].getTaskDiv(), vTmpDiv2, callback);
         }
@@ -968,0 +969,0 @@ }

src/events.ts

@@ -1,2 +0,2 @@
-import { delayedHide, changeFormat, stripIds, isIE, findObj, fadeToolTip, getScrollbarWidth } from "./utils";
+import { delayedHide, changeFormat, stripIds, isIE, findObj, fadeToolTip, getScrollbarWidth, isParentElementOrSelf } from "./utils";
 import { folder } from "./task";
@@ -48,9 +48,14 @@ import { updateFlyingObj } from "./draw";
     clearTimeout(pGanttChartObj.vTool.delayTimeout);
+
+    const newHTML = pContents.innerHTML;
+    if (pGanttChartObj.vTool.vToolCont.getAttribute("content") !== newHTML) {
+      pGanttChartObj.vTool.vToolCont.innerHTML = pContents.innerHTML;
+      // as we are allowing arbitrary HTML we should remove any tag ids to prevent duplication
+      stripIds(pGanttChartObj.vTool.vToolCont);
+      pGanttChartObj.vTool.vToolCont.setAttribute("content", newHTML);
+    }
+    
     if (pGanttChartObj.vTool.vToolCont.getAttribute('showing') != vShowing || pGanttChartObj.vTool.style.visibility != 'visible') {
       if (pGanttChartObj.vTool.vToolCont.getAttribute('showing') != vShowing) {
         pGanttChartObj.vTool.vToolCont.setAttribute('showing', vShowing);
-
-        pGanttChartObj.vTool.vToolCont.innerHTML = pContents.innerHTML;
-        // as we are allowing arbitrary HTML we should remove any tag ids to prevent duplication
-        stripIds(pGanttChartObj.vTool.vToolCont);
       }
@@ -143,5 +148,33 @@
 
-export const addTooltipListeners = function (pGanttChart, pObj1, pObj2) {
-  addListener('mouseover', function (e) { showToolTip(pGanttChart, e, pObj2, null, pGanttChart.getTimer()); }, pObj1);
-  addListener('mouseout', function (e) { delayedHide(pGanttChart, pGanttChart.vTool, pGanttChart.getTimer()); }, pObj1);
+export const addTooltipListeners = function (pGanttChart, pObj1, pObj2, callback) {
+  let isShowingTooltip = false;
+
+  addListener('mouseover', function (e) { 
+    if (isShowingTooltip || !callback) {
+      showToolTip(pGanttChart, e, pObj2, null, pGanttChart.getTimer());
+    } else if (callback) {
+      isShowingTooltip = true;
+      const promise = callback();
+      showToolTip(pGanttChart, e, pObj2, null, pGanttChart.getTimer()); 
+      if (promise && promise.then) {
+        promise.then(() => {
+          if (pGanttChart.vTool.vToolCont.getAttribute('showing') === pObj2.id &&
+              pGanttChart.vTool.style.visibility === 'visible') {
+            showToolTip(pGanttChart, e, pObj2, null, pGanttChart.getTimer());
+          }
+        });
+      }
+    }
+  }, pObj1);
+  
+  addListener('mouseout', function (e) {
+    const outTo = e.relatedTarget;
+    if (isParentElementOrSelf(outTo, pObj1) || (pGanttChart.vTool && isParentElementOrSelf(outTo, pGanttChart.vTool))) {
+      // not actually out
+    } else {
+      isShowingTooltip = false;
+    }
+    
+    delayedHide(pGanttChart, pGanttChart.vTool, pGanttChart.getTimer());
+  }, pObj1);
 };
@@ -148,0 +181,0 @@

src/lang.ts

@@ -145,3 +145,4 @@ const es = {
   'fri': 'Fri',
-  'sat': 'Sat'
+  'sat': 'Sat',
+  'tooltipLoading': 'Loading...'
 }
@@ -353,3 +354,4 @@
   'mths': 'мес.',
-  'qtrs': 'кв.'
+  'qtrs': 'кв.',
+  'tooltipLoading': 'Загрузка...'
 }
@@ -356,0 +358,0 @@

src/task.ts

@@ -470,4 +470,11 @@ import { parseDateStr, isIE, stripUnwanted, internalPropertiesLang, formatDateStr, hashKey, internalProperties } from "./utils";
 
-
-export const createTaskInfo = function (pTask, template = null) {
+/**
+ * @param pTask 
+ * @param templateStrOrFn template string or function(task). In any case parameters in template string are substituted.
+ *        If string - just a static template.
+ *        If function(task): string - per task template. Can return null|undefined to fallback to default template.
+ *        If function(task): Promise<string>) - async per task template. Tooltip will show 'Loading...' if promise is not yet complete.
+ *          Otherwise returned template will be handled in the same manner as in other cases.
+ */
+export const createTaskInfo = function (pTask, templateStrOrFn = null) {
   let vTmpDiv;
@@ -477,64 +484,82 @@ let vTaskInfoBox = document.createDocumentFragment();
 
-  if (template) {
-    let allData = pTask.getAllData()
-    internalProperties.forEach(key => {
-      let lang;
-      if (internalPropertiesLang[key]) {
-        lang = this.vLangs[this.vLang][internalPropertiesLang[key]];
-      }
+  const setupTemplate = template => {
+    vTaskInfo.innerHTML = "";
+    if (template) {
+      let allData = pTask.getAllData()
+      internalProperties.forEach(key => {
+        let lang;
+        if (internalPropertiesLang[key]) {
+          lang = this.vLangs[this.vLang][internalPropertiesLang[key]];
+        }
 
-      if (!lang) {
-        lang = key
+        if (!lang) {
+          lang = key
+        }
+        const val = allData[key];
+
+        template = template.replace(`{{${key}}}`, val);
+        if (lang) {
+          template = template.replace(`{{Lang:${key}}}`, lang);
+        } else {
+          template = template.replace(`{{Lang:${key}}}`, key);
+        }
+      });
+      this.newNode(vTaskInfo, 'span', null, 'gTtTemplate', template);
+    } else {
+      this.newNode(vTaskInfo, 'span', null, 'gTtTitle', pTask.getName());
+      if (this.vShowTaskInfoStartDate == 1) {
+        vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIsd');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['startdate'] + ': ');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskText', formatDateStr(pTask.getStart(), this.vDateTaskDisplayFormat, this.vLangs[this.vLang]));
       }
-      const val = allData[key];
+      if (this.vShowTaskInfoEndDate == 1) {
+        vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIed');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['enddate'] + ': ');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskText', formatDateStr(pTask.getEnd(), this.vDateTaskDisplayFormat, this.vLangs[this.vLang]));
+      }
+      if (this.vShowTaskInfoDur == 1 && !pTask.getMile()) {
+        vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTId');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['duration'] + ': ');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getDuration(this.vFormat, this.vLangs[this.vLang]));
+      }
+      if (this.vShowTaskInfoComp == 1) {
+        vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIc');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['completion'] + ': ');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getCompStr());
+      }
+      if (this.vShowTaskInfoRes == 1) {
+        vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIr');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['resource'] + ': ');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getResource());
+      }
+      if (this.vShowTaskInfoLink == 1 && pTask.getLink() != '') {
+        vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIl');
+        let vTmpNode = this.newNode(vTmpDiv, 'span', null, 'gTaskLabel');
+        vTmpNode = this.newNode(vTmpNode, 'a', null, 'gTaskText', this.vLangs[this.vLang]['moreinfo']);
+        vTmpNode.setAttribute('href', pTask.getLink());
+      }
+      if (this.vShowTaskInfoNotes == 1) {
+        vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIn');
+        this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['notes'] + ': ');
+        if (pTask.getNotes()) vTmpDiv.appendChild(pTask.getNotes());
+      }
+    }
+  };
 
-      template = template.replace(`{{${key}}}`, val);
-      if (lang) {
-        template = template.replace(`{{Lang:${key}}}`, lang);
-      } else {
-        template = template.replace(`{{Lang:${key}}}`, key);
+  let callback;
+  if (typeof templateStrOrFn === 'function') {
+    callback = () => {
+      const strOrPromise = templateStrOrFn(pTask);
+      if (!strOrPromise || typeof strOrPromise === 'string') {
+        setupTemplate(strOrPromise);
+      } else if (strOrPromise.then) {
+        setupTemplate(this.vLangs[this.vLang]['tooltipLoading'] || this.vLangs['en']['tooltipLoading']);
+        return strOrPromise.then(setupTemplate);
       }
-    });
-    this.newNode(vTaskInfo, 'span', null, 'gTtTemplate', template);
+    };
   } else {
-    this.newNode(vTaskInfo, 'span', null, 'gTtTitle', pTask.getName());
-    if (this.vShowTaskInfoStartDate == 1) {
-      vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIsd');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['startdate'] + ': ');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskText', formatDateStr(pTask.getStart(), this.vDateTaskDisplayFormat, this.vLangs[this.vLang]));
-    }
-    if (this.vShowTaskInfoEndDate == 1) {
-      vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIed');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['enddate'] + ': ');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskText', formatDateStr(pTask.getEnd(), this.vDateTaskDisplayFormat, this.vLangs[this.vLang]));
-    }
-    if (this.vShowTaskInfoDur == 1 && !pTask.getMile()) {
-      vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTId');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['duration'] + ': ');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getDuration(this.vFormat, this.vLangs[this.vLang]));
-    }
-    if (this.vShowTaskInfoComp == 1) {
-      vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIc');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['completion'] + ': ');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getCompStr());
-    }
-    if (this.vShowTaskInfoRes == 1) {
-      vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIr');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['resource'] + ': ');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskText', pTask.getResource());
-    }
-    if (this.vShowTaskInfoLink == 1 && pTask.getLink() != '') {
-      vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIl');
-      let vTmpNode = this.newNode(vTmpDiv, 'span', null, 'gTaskLabel');
-      vTmpNode = this.newNode(vTmpNode, 'a', null, 'gTaskText', this.vLangs[this.vLang]['moreinfo']);
-      vTmpNode.setAttribute('href', pTask.getLink());
-    }
-    if (this.vShowTaskInfoNotes == 1) {
-      vTmpDiv = this.newNode(vTaskInfo, 'div', null, 'gTILine gTIn');
-      this.newNode(vTmpDiv, 'span', null, 'gTaskLabel', this.vLangs[this.vLang]['notes'] + ': ');
-      if (pTask.getNotes()) vTmpDiv.appendChild(pTask.getNotes());
-    }
+    setupTemplate(templateStrOrFn);
   }
 
-  return vTaskInfoBox;
+  return {component: vTaskInfoBox, callback};
 };
@@ -541,0 +566,0 @@

src/utils.ts

@@ -551,2 +551,9 @@
   }
+}
+
+export function isParentElementOrSelf(child, parent) {
+  while (child) {
+    if (child === parent) return true;
+    child = child.parentElement;
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5039648

increased by0.32%

Lines of code

116094

increased by0.26%

No dependency changes