MWPW-143159 [MILO TEST] Timeline visualization (#2102)

* Add practice timeline and add text to mep

* Remove practice blocks

* Add timeline

* Remove default colors

* Update sibling text class

* update getColWidth

* Add neg spacing

* Remove neg-space feature

* Remove old max-width

* Fix width and remove neg-spacing css

* Update column width

* Add reversed variant and cleanup

* Add basic dir=rtl support

* Use grid margins width outside of modal

* Remove left right padding

* Fix folder name

libs/mep/mwpw-143159/timeline/timeline.css

@@ -0,0 +1,142 @@
+.timeline {
+  box-sizing: border-box;
+  padding: 0 0 var(--spacing-xl) 0;
+  width: var(--grid-container-width);
+  max-width: 968px;
+  margin: 0 auto;
+}
+
+.timeline .row {
+  display: grid;
+}
+
+.timeline h1,
+.timeline h2,
+.timeline h3,
+.timeline h4,
+.timeline h5,
+.timeline h6,
+.timeline p {
+  color: var(--text-color);
+  margin: 0;
+  font-size: var(--type-body-xs-size);
+  line-height: var(--type-body-xs-lh);
+}
+
+.timeline .row:nth-child(2)>div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.timeline .row:nth-of-type(1)>.right>div+div {
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.timeline .row:nth-of-type(1)>.left>div>* {
+  max-width: 100px;
+  padding-right: var(--spacing-m);
+}
+
+.dark .timeline .row:nth-child(3)>div *,
+.timeline.dark .row:nth-child(3)>div * {
+  color: var(--color-black);
+}
+
+.timeline .row:nth-of-type(1)>.right>div+div>* {
+  max-width: 100px;
+}
+
+.timeline .row:nth-of-type(1)>.right,
+.timeline .row:nth-of-type(2)>.right {
+  display: grid;
+  justify-content: space-between;
+}
+
+.timeline .row:nth-of-type(1)>.right {
+  grid-template-columns: minmax(110px, 1fr) 1fr;
+}
+
+.timeline .row:nth-of-type(2)>.right {
+  grid-template-columns: 2px 2px;
+}
+
+.timeline .row:nth-of-type(1)>.right>div:nth-of-type(1) {
+  max-width: 135px;
+  padding-right: var(--spacing-xxs);
+}
+
+.timeline .bar {
+  height: 20px;
+  width: 2px;
+  border-radius: 1px;
+  margin: var(--spacing-xxs) 0;
+}
+
+.timeline .row:nth-of-type(3) p {
+  text-align: center;
+  font-weight: 700;
+  padding: 4px var(--spacing-xxs);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.timeline .row:nth-of-type(3) .left p {
+  margin-right: 1px;
+}
+
+.timeline .row:nth-of-type(3) .right p {
+  margin-left: 3px;
+}
+
+.dark .timeline .row:nth-child(1)>div>div>*,
+.timeline.dark .row:nth-child(1)>div>div>* {
+  color: var(--color-white);
+}
+
+[dir="rtl"] .timeline .row:nth-of-type(1)>.left>div>* {
+  padding: 0 0 0 var(--spacing-m);
+  text-align: right;
+}
+
+[dir="rtl"] .timeline .row:nth-of-type(1)>.right>div+div {
+  padding: 0 0 var(--spacing-xxs) 0;
+  text-align: left;
+}
+
+[dir="rtl"] .timeline .row:nth-of-type(3) .left p {
+  margin: 0 0 0 1px;
+}
+
+[dir="rtl"] .timeline .row:nth-of-type(3) .right p {
+  margin: 0 3px 0 0;
+}
+
+[dir="rtl"] .timeline .row:nth-of-type(1)>.right>div:nth-of-type(1) {
+  padding: 0 0 0 var(--spacing-xxs);
+}
+
+@media screen and (min-width: 600px) {
+  .timeline {
+    width: 100%;
+    padding: 0 var(--grid-margins-width) var(--spacing-xl) var(--grid-margins-width);
+  }
+
+  .dialog-modal .timeline {
+    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .timeline {
+    padding: 0 0 var(--spacing-xxl) 0;
+    width: 968px;
+    max-width: 100%;
+  }
+}

libs/mep/mwpw-143159/timeline/timeline.js

@@ -0,0 +1,153 @@
+import { createTag } from '../../../utils/utils.js';
+
+function isColor(str) {
+  const hexRegex = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
+  const rgbRegex = /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)$/;
+  return hexRegex.test(str) || rgbRegex.test(str);
+}
+
+function isGradient(str) {
+  return str.startsWith('linear-gradient');
+}
+
+function isColorOrGradient(str) {
+  return isColor(str) || isGradient(str);
+}
+
+function getColWidth(text, colWidths) {
+  const numRegex = /\b\d{1,3}\b/;
+  colWidths.push((text.match(numRegex) || [])[0]);
+}
+function createRow() {
+  return [createTag('div', { class: 'row' }),
+    createTag('div', { class: 'left' }),
+    createTag('div', { class: 'right' }),
+  ];
+}
+function createBars(index) {
+  return index === 0
+    ? [createTag('div', { class: 'bar' })] : [createTag('div', { class: 'bar' }), createTag('div', { class: 'bar' })];
+}
+function addBarRow() {
+  const [barRow, left, right] = createRow();
+  const sides = [left, right];
+  sides.forEach((text, index) => {
+    sides[index].append(...createBars(index));
+    barRow.append(sides[index]);
+  });
+  return barRow;
+}
+function addBottomRow(periodText) {
+  const [periodRow, left, right] = createRow();
+  const sides = [left, right];
+  periodText.forEach((text, index) => {
+    sides[index].append(createTag('p', { class: 'period body-s' }, text));
+    periodRow.append(sides[index]);
+  });
+  return periodRow;
+}
+
+function setBG(el, color) {
+  el.style.background = color;
+}
+
+function updateForRTL(lgStr, el) {
+  if (el.closest('[dir="rtl"]')) {
+    return lgStr.replace(/to right|to left|90deg|180deg|turn 0.25|turn 0.75/g, (match) => {
+      const converter = {
+        'turn 0.25': 'turn 0.75',
+        'turn 0.75': 'turn 0.25',
+        '90deg': '180deg',
+        '180deg': '90deg',
+        'to right': 'to left',
+        'to left': 'to right',
+      };
+
+      return converter[match];
+    });
+  }
+  return lgStr;
+}
+function setColors(colors, fragment, el) {
+  const barEls = fragment.querySelectorAll('.bar');
+  const periodEls = fragment.querySelectorAll('.period');
+  if (colors?.length === 2 && isColorOrGradient(colors[0]) && isColorOrGradient(colors[1])) {
+    if (barEls.length === 3 || periodEls.length === 2) {
+      const leftColor = colors[0];
+      const rightColor = colors[1];
+      let firstBar; let secondBar; let thirdBar;
+      if (isGradient(leftColor)) {
+        leftColor.split(' ').forEach((color) => {
+          if (isColor(color) && !firstBar) {
+            firstBar = color;
+            setBG(barEls[0], firstBar);
+          } else if (isColor(color)) {
+            secondBar = color;
+            setBG(barEls[1], secondBar);
+          }
+        });
+      } else {
+        setBG(barEls[0], leftColor);
+        setBG(barEls[1], leftColor);
+      }
+      if (isGradient(rightColor)) {
+        leftColor.split(' ').forEach((color) => {
+          if (isColor(color) && !thirdBar) {
+            thirdBar = color;
+            setBG(barEls[2], thirdBar);
+          }
+        });
+      } else {
+        setBG(barEls[2], rightColor);
+      }
+      setBG(periodEls[0], updateForRTL(leftColor, el));
+      setBG(periodEls[1], updateForRTL(rightColor, el));
+    }
+  }
+}
+
+function colWidthsNotValid(colWidths) {
+  return (colWidths.length !== 2 || colWidths.some((value) => Number.isNaN(value)));
+}
+function updateColWidths(colWidths, fragment) {
+  if (colWidthsNotValid(colWidths)) return;
+  const total = Number(colWidths[0]) + Number(colWidths[1]);
+  const right = Math.floor((Number(colWidths[1]) / total) * 10000) / 100;
+  const colString = `1fr minmax(${String(right)}%, 150px)`;
+  fragment.querySelectorAll('.row').forEach((row) => {
+    row.style.gridTemplateColumns = colString;
+  });
+}
+export default function init(el) {
+  const fragment = document.createDocumentFragment();
+  const [textRow, left, right] = createRow();
+  const rows = el.querySelectorAll(':scope > div > div');
+  const colors = []; const periodText = []; const colWidths = [];
+  rows.forEach((row, index) => {
+    const side = index === 0 ? left : right;
+    const color = row.firstElementChild?.textContent?.trim();
+    const p = row.querySelector(':scope > p:last-child');
+    if (p) {
+      const [text, period] = p.textContent.trim().split('|');
+      if (period) {
+        periodText.push(period.trim());
+        getColWidth(period, colWidths);
+      }
+      if (text) {
+        p.textContent = text.trim();
+      }
+    }
+
+    if (isColorOrGradient(color)) {
+      colors.push(color);
+      row.firstElementChild.remove();
+    }
+    row.parentElement.remove();
+    side.append(row);
+  });
+  textRow.append(left, right);
+  [textRow, addBarRow(), addBottomRow(periodText)].forEach((row) => fragment.append(row));
+  updateColWidths(colWidths, fragment, el);
+  setColors(colors, fragment, el);
+  el.append(fragment);
+}