No issue - introduce tooltip for cba-list (#69)

* No issue - calculate tooltip position based on root node host

* No issue - fixed pointer for the cba-table

* No issue - introduced tooltip for cba-list

* chore: fixed tooltips miss-alignment

src/cba-list/cba-list.js

@@ -4,12 +4,19 @@ import ConstructableCSS from '../ConstructableCSS';
 
 const constructableCSS = new ConstructableCSS(shadowCSS);
 
+/**
+ * @typedef  {object} Alert - alert object.
+ * @property {string} [text] - alert text.
+ * @property {"error"} [type] - alert type.
+ */
+
 /**
  * @typedef  {object} ListSubItem
  * @property {string} id - Unique id of the item.
  * @property {string} text - Text to be displayed.
  * @property {boolean} selected - Is the item selected.
  * @property {boolean} editable - Is the item editable.
+ * @property {Alert} alert - highlight row.
  */
 
 /**
@@ -20,8 +27,15 @@ const constructableCSS = new ConstructableCSS(shadowCSS);
  * @property {ListSubItem["selected"]} selected - Is the item selected.
  * @property {ListSubItem["editable"]} editable - Is the item editable.
  * @property {ListSubItem[]} subItems - Sub items of the item.
+ * @property {Alert} alert - highlight row.
  */
 
+const infoIcon = html`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" viewBox="0 0 487.65 487.65" width="12px" height="12px">
+<g>
+	<path d="M243.824,0C109.163,0,0,109.163,0,243.833C0,378.487,109.163,487.65,243.824,487.65 c134.662,0,243.826-109.163,243.826-243.817C487.65,109.163,378.486,0,243.824,0z M243.762,103.634 c20.416,0,36.977,16.555,36.977,36.977c0,20.425-16.561,36.978-36.977,36.978c-20.424,0-36.986-16.553-36.986-36.978 C206.775,120.189,223.338,103.634,243.762,103.634z M307.281,381.228c0,3.695-2.995,6.691-6.684,6.691h-21.509h-70.663h-21.492 c-3.689,0-6.683-2.996-6.683-6.691v-13.719c0-3.694,2.993-6.689,6.683-6.689h21.492V230.706h-22.153 c-3.689,0-6.685-2.996-6.685-6.692V210.28c0-3.695,2.996-6.69,6.685-6.69h22.153h63.981h0.216c3.686,0,6.683,2.995,6.683,6.69 v150.539h21.293c3.688,0,6.684,2.995,6.684,6.689V381.228z"/>
+</g>
+</svg>`;
+
 export class List extends HTMLElement
 {
   constructor()
@@ -151,7 +165,8 @@ export class List extends HTMLElement
       const row = target.closest(".row");
       if (row)
       {
-        this.selectRow(row.parentElement.dataset.id);
+        const listId = row.closest("[data-id]").dataset.id
+        this.selectRow(listId);
       }
     });
 
@@ -584,13 +599,21 @@ export class List extends HTMLElement
   _render()
   {
     this.container.dataset.subitems = this.hasSubtiems;
+    /**
+     * @param {ListItem|ListSubItem} item - list item.
+     */
     const createRow = (item) =>
     {
       const {text, selected, editable = false} = item;
       const classes = ["row"];
       if (selected)
         classes.push("highlight");
-      const row = html`<span class="${classes.join(" ")}" tabindex="${selected ? 0 : -1}" draggable="${this.drag}" contenteditable="${editable}" title="${text}">${text}</span>`;
+      let alertTmpl = "";
+      if (item.alert)
+      {
+        alertTmpl = html`<span class="alert ${item.alert.type}"><cba-tooltip text="${item.alert.text}" arrow="x">${infoIcon}</cba-tooltip></span>`;
+      }
+      const row = html`<div><span class="${classes.join(" ")}" draggable="${this.drag}" title="${text}" tabindex="${selected ? 0 : -1}" contenteditable="${editable}" class="text">${text}</span>${alertTmpl}</div>`;
       const infoText = this._getText(item, this.tooltipText);
       if (infoText)
       {

src/cba-list/shadow.css

@@ -117,20 +117,21 @@ ul
 
 li .row
 {
-  display: block;
+  display: flex;
+  align-items: center;
   border: solid 1px var(--color-border);
   border-top-width: 0;
   border-left-width: 0;
   border-right-width: 0;
   font-weight: 300;
   padding-left: 5px;
-  overflow: hidden;
 }
 
-li .row:not([contenteditable="true"])
+li .row .text:not([contenteditable="true"])
 {
   white-space: pre;
   text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 li .row:not(.highlight):hover
@@ -142,12 +143,25 @@ li .row:not(.highlight):hover
   cursor: pointer;
 }
 
+li .alert
+{
+  position: absolute;
+  right: 5px;
+  top: 0px;
+  cursor: pointer;
+}
+
+li .alert svg g
+{
+  fill: rgb(255, 131, 131);
+}
+
 ul li
 {
   position: relative;
 }
 
-li > .row.highlight
+li .row.highlight
 {
   background-color: var(--color-selected);
   cursor: pointer;

src/cba-table/shadow.css

@@ -112,18 +112,14 @@ tbody
   position: relative;
 }
 
-tbody tr.highlight
+tbody tr.highlight,
+tbody tr.alert
 {
   background-color: var(--color-selected);
   cursor: pointer;
   outline: none;
 }
 
-tbody tr.alert
-{
-  background-color: var(--color-alert);
-}
-
 tbody tr
 {
   outline: none;

src/cba-tooltip/cba-tooltip.js

@@ -85,14 +85,16 @@ class List extends HTMLElement
   _setDirection()
   {
     const clientRect = this.getBoundingClientRect();
-    const viewportWidth = document.documentElement.clientWidth;
-    const viewportHeight = document.documentElement.clientHeight;
+    const hostElement = this.getRootNode().host;
+    const viewportWidth = hostElement ? hostElement.clientWidth :  document.documentElement.clientWidth;
+    const viewportHeight = hostElement ? hostElement.clientHeight : document.documentElement.clientHeight;
+    const distanceTop = hostElement ? clientRect.top - hostElement.getBoundingClientRect().top : clientRect.top;
     const distanceLeft = clientRect.left;
-    const distanceTop = clientRect.top;
+    const clientVerticalCenter = distanceTop + clientRect.height / 2;
+    const viewportVerticalCenter = viewportHeight / 2;
     const distanceRight = viewportWidth - clientRect.right;
-    const distanceBottom = viewportHeight - clientRect.bottom;
     const placementX = distanceLeft - distanceRight > 0 ? "left" : "right";
-    const placementY = distanceTop - distanceBottom > 0 ? "top" : "bottom";
+    const placementY = viewportVerticalCenter > clientVerticalCenter ? "bottom" : "top";
     this.tooltipElem.dataset.tooltip = `${placementX}-${placementY}`;
   }
 

tests/smoke/cba-list/index.html

@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <script src="/js/cba-list/cba-list.js" type="module"></script>
+  <script src="/js/cba-tooltip/cba-tooltip.js" type="module"></script>
   <script src="/smoke/res/highlight.js"></script>
   <script src="smoke.js" defer></script>
   <link rel="stylesheet" href="/smoke/res/highlight.css">

tests/smoke/cba-list/smoke.js

@@ -3,7 +3,11 @@ const items = [
   {
     id: "row1",
     data: "Info",
-    text: "List1"
+    text: "List1",
+    alert: {
+      text: "Topmost element Alert text",
+      type: "error"
+    }
   },
   {
     id: "row2",
@@ -16,8 +20,17 @@ const items = [
         text: "Sub List1"
       },
       {
+        id: "subrow2",
         data: "Info",
-        text: "Sub List2"
+        text: "Sub List2",
+        alert: {
+          text: "Subitem Alert text",
+          type: "error"
+        }
+      },
+      {
+        data: "Info",
+        text: "Sub List3"
       }
     ]
   },
@@ -30,12 +43,29 @@ const items = [
 
 for (let i = 4; i < 20; i++)
 {
-  items.push({
+  const item = {
     id: `row${i}`,
     data: `Info`,
     text: `List${i}`
-  });
+  }
+  if (i === 10)
+  {
+    item.alert = {
+      text: "Middle Alert text",
+      type: "error"
+    }
+  }
+  items.push(item);
 }
+items.push({
+  id: "row20",
+  data: "Info",
+  text: "List20",
+  alert: {
+    text: "Bottom Alert text",
+    type: "error"
+  }
+});
 cbaList.items = items;
 
 const cbaSortableList = document.querySelector("#sortable");