From 9ac59690f44cc9c40f5dd435a027a572f9b707db Mon Sep 17 00:00:00 2001
From: Min945 <min945@126.com>
Date: Wed, 27 Apr 2022 11:20:23 +0800
Subject: [PATCH] 1. Skip <template> elements. 2. Supports multiple elements
 with "flex: auto" or "flex-grow" style.

---
 index.js      | 43 +++++++++++++++++++++++++++++++++++++++++--
 index.min.js  |  2 +-
 src/index.ts  | 39 +++++++++++++++++++++++++++++++++++++--
 tsconfig.json |  1 +
 4 files changed, 80 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index b0499cc..b83810d 100644
--- a/index.js
+++ b/index.js
@@ -13,9 +13,32 @@ addEventListener('pointerdown', function (pointerDownEvent) {
     }
     // prevent text selection
     pointerDownEvent.preventDefault();
+    var getElementSibling = function (element, direction) {
+        // skip <template> elements
+        while ((element = element[direction + 'ElementSibling']) && element.tagName === "TEMPLATE") { }
+        return element;
+    };
+    (function () {
+        // save styles for multiple children with "flex: auto" or "flex-grow: 1" style
+        var child = container.firstElementChild;
+        var protectedStyleNames = [horizontal ? 'width' : 'height', 'flex', 'flexGrow', 'flexShrink', 'flexBasis'];
+        var _loop_1 = function () {
+            if (child.getAttribute('role') !== 'separator') {
+                var __flexSplitterStyle_1 = {};
+                var computedStyle_1 = getComputedStyle(child);
+                protectedStyleNames.forEach(function (name) { __flexSplitterStyle_1[name] = child.style[name]; });
+                protectedStyleNames.forEach(function (name) { child.style[name] = name.startsWith('flex') ? '' : computedStyle_1[name]; });
+                child.__flexSplitterStyle = __flexSplitterStyle_1;
+            }
+            child = getElementSibling(child, 'next');
+        };
+        while (child) {
+            _loop_1();
+        }
+    })();
     var pointerId = pointerDownEvent.pointerId;
-    var pane1 = separator.previousElementSibling;
-    var pane2 = separator.nextElementSibling;
+    var pane1 = getElementSibling(separator, 'previous');
+    var pane2 = getElementSibling(separator, 'next');
     var containerStyle = getComputedStyle(container);
     if ((containerStyle.flexDirection.indexOf('reverse') !== -1 ? -1 : 1) * (horizontal && containerStyle.direction === 'rtl' ? -1 : 1) === -1) {
         _a = [pane2, pane1], pane1 = _a[0], pane2 = _a[1];
@@ -56,6 +79,22 @@ addEventListener('pointerdown', function (pointerDownEvent) {
             separator.removeEventListener('pointermove', onPointerMove);
             separator.removeEventListener('pointerup', onPointerUp);
             separator.removeEventListener('pointercancel', onPointerUp);
+            (function () {
+                // restore styles except width | height
+                var child = container.firstElementChild;
+                var _loop_2 = function () {
+                    var __flexSplitterStyle = child.__flexSplitterStyle;
+                    if (__flexSplitterStyle) {
+                        ;
+                        (__flexSplitterStyle.flex ? ['flex'] : ['flexGrow', 'flexShrink', 'flexBasis']).forEach(function (name) { child.style[name] = __flexSplitterStyle[name]; });
+                        delete child.__flexSplitterStyle;
+                    }
+                    child = getElementSibling(child, 'next');
+                };
+                while (child) {
+                    _loop_2();
+                }
+            })();
         }
     };
     onPointerMove(pointerDownEvent);
diff --git a/index.min.js b/index.min.js
index 26f7a71..a955d9f 100644
--- a/index.min.js
+++ b/index.min.js
@@ -1 +1 @@
-"use strict";addEventListener("pointerdown",(function(t){var e,i=t.target,n=i.parentElement;if(n&&t.isPrimary&&0===t.button&&"separator"===i.getAttribute("role")){var r=n.hasAttribute("data-flex-splitter-vertical"),a=n.hasAttribute("data-flex-splitter-horizontal");if(r||a){t.preventDefault();var o=t.pointerId,s=i.previousElementSibling,p=i.nextElementSibling,l=getComputedStyle(n);(-1!==l.flexDirection.indexOf("reverse")?-1:1)*(a&&"rtl"===l.direction?-1:1)==-1&&(s=(e=[p,s])[0],p=e[1]);var h,d=getComputedStyle(s),m=getComputedStyle(p),f=s.getBoundingClientRect();if(r){var v=f.top+t.offsetY,u=s.offsetHeight+p.offsetHeight,x=Math.max(parseInt(d.minHeight,10)||0,u-(parseInt(m.maxHeight,10)||u)),g=Math.min(parseInt(d.maxHeight,10)||u,u-(parseInt(m.minHeight,10)||0));h=function(t){if(t.pointerId===o){var e=Math.round(Math.min(Math.max(t.clientY-v,x),g));s.style.height=e+"px",p.style.height=u-e+"px"}}}else{var c=f.left+t.offsetX,I=s.offsetWidth+p.clientWidth,y=Math.max(parseInt(d.minWidth,10)||0,I-(parseInt(m.maxWidth,10)||I)),E=Math.min(parseInt(d.maxWidth,10)||I,I-(parseInt(m.minWidth,10)||0));h=function(t){if(t.pointerId===o){var e=Math.round(Math.min(Math.max(t.clientX-c,y),E));s.style.width=e+"px",p.style.width=I-e+"px"}}}var M=function(t){t.pointerId===o&&(i.releasePointerCapture(o),i.removeEventListener("pointermove",h),i.removeEventListener("pointerup",M),i.removeEventListener("pointercancel",M))};h(t),s.style.flexShrink=p.style.flexShrink=1,i.addEventListener("pointercancel",M),i.addEventListener("pointerup",M),i.addEventListener("pointermove",h),i.setPointerCapture(o)}}}));
\ No newline at end of file
+"use strict";addEventListener("pointerdown",(function(t){var e,i=t.target,n=i.parentElement;if(n&&t.isPrimary&&0===t.button&&"separator"===i.getAttribute("role")){var r=n.hasAttribute("data-flex-splitter-vertical"),a=n.hasAttribute("data-flex-splitter-horizontal");if(r||a){t.preventDefault();var l=function(t,e){for(;(t=t[e+"ElementSibling"])&&"TEMPLATE"===t.tagName;);return t};!function(){for(var t=n.firstElementChild,e=[a?"width":"height","flex","flexGrow","flexShrink","flexBasis"],i=function(){if("separator"!==t.getAttribute("role")){var i={},n=getComputedStyle(t);e.forEach((function(e){i[e]=t.style[e]})),e.forEach((function(e){t.style[e]=e.startsWith("flex")?"":n[e]})),t.__flexSplitterStyle=i}t=l(t,"next")};t;)i()}();var o=t.pointerId,f=l(i,"previous"),s=l(i,"next"),h=getComputedStyle(n);(-1!==h.flexDirection.indexOf("reverse")?-1:1)*(a&&"rtl"===h.direction?-1:1)==-1&&(f=(e=[s,f])[0],s=e[1]);var p,d=getComputedStyle(f),x=getComputedStyle(s),u=f.getBoundingClientRect();if(r){var m=u.top+t.offsetY,v=f.offsetHeight+s.offsetHeight,c=Math.max(parseInt(d.minHeight,10)||0,v-(parseInt(x.maxHeight,10)||v)),g=Math.min(parseInt(d.maxHeight,10)||v,v-(parseInt(x.minHeight,10)||0));p=function(t){if(t.pointerId===o){var e=Math.round(Math.min(Math.max(t.clientY-m,c),g));f.style.height=e+"px",s.style.height=v-e+"px"}}}else{var y=u.left+t.offsetX,E=f.offsetWidth+s.clientWidth,S=Math.max(parseInt(d.minWidth,10)||0,E-(parseInt(x.maxWidth,10)||E)),I=Math.min(parseInt(d.maxWidth,10)||E,E-(parseInt(x.minWidth,10)||0));p=function(t){if(t.pointerId===o){var e=Math.round(Math.min(Math.max(t.clientX-y,S),I));f.style.width=e+"px",s.style.width=E-e+"px"}}}var M=function(t){t.pointerId===o&&(i.releasePointerCapture(o),i.removeEventListener("pointermove",p),i.removeEventListener("pointerup",M),i.removeEventListener("pointercancel",M),function(){for(var t=n.firstElementChild,e=function(){var e=t.__flexSplitterStyle;e&&((e.flex?["flex"]:["flexGrow","flexShrink","flexBasis"]).forEach((function(i){t.style[i]=e[i]})),delete t.__flexSplitterStyle),t=l(t,"next")};t;)e()}())};p(t),f.style.flexShrink=s.style.flexShrink=1,i.addEventListener("pointercancel",M),i.addEventListener("pointerup",M),i.addEventListener("pointermove",p),i.setPointerCapture(o)}}}));
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 9416cd1..efd989c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,9 +12,31 @@ addEventListener('pointerdown', (pointerDownEvent: PointerEvent) => {
   // prevent text selection
   pointerDownEvent.preventDefault()
 
+  const getElementSibling = (element: HTMLElement, direction: string): HTMLElement => {
+      // skip <template> elements
+      while ((element = (element as any)[direction + 'ElementSibling']) && element.tagName === "TEMPLATE") {}
+      return element as HTMLElement
+    }
+
+  ;(() => {
+    // save styles for multiple children with "flex: auto" or "flex-grow: 1" style
+    let child: HTMLElement = container.firstElementChild as HTMLElement
+    const protectedStyleNames = [horizontal ? 'width' : 'height', 'flex', 'flexGrow', 'flexShrink', 'flexBasis']
+    while(child) {
+      if (child.getAttribute('role') !== 'separator') {
+        const __flexSplitterStyle: any = {}
+        const computedStyle = getComputedStyle(child) as any
+        protectedStyleNames.forEach(name => {__flexSplitterStyle[name] = (child.style as any)[name]})
+        protectedStyleNames.forEach(name => {(child.style as any)[name] = name.startsWith('flex') ? '' : computedStyle[name]})
+        ;(child as any).__flexSplitterStyle = __flexSplitterStyle
+      }
+      child = getElementSibling(child, 'next')
+    }
+  })()
+
   const pointerId = pointerDownEvent.pointerId
-  let pane1 = separator.previousElementSibling as HTMLElement
-  let pane2 = separator.nextElementSibling as HTMLElement
+  let pane1 = getElementSibling(separator, 'previous')
+  let pane2 = getElementSibling(separator, 'next')
   const containerStyle = getComputedStyle(container)
   if ((containerStyle.flexDirection.indexOf('reverse') !== -1 ? -1 : 1) * (horizontal && containerStyle.direction === 'rtl' ? -1 : 1) === -1) {
     [pane1, pane2] = [pane2, pane1]
@@ -56,6 +78,19 @@ addEventListener('pointerdown', (pointerDownEvent: PointerEvent) => {
       separator.removeEventListener('pointermove', onPointerMove)
       separator.removeEventListener('pointerup', onPointerUp)
       separator.removeEventListener('pointercancel', onPointerUp)
+
+      ;(() => {
+        // restore styles except width | height
+        let child: HTMLElement = container.firstElementChild as HTMLElement
+        while(child) {
+          const __flexSplitterStyle = (child as any).__flexSplitterStyle
+          if (__flexSplitterStyle) {
+            ;(__flexSplitterStyle.flex ? ['flex'] : ['flexGrow', 'flexShrink', 'flexBasis']).forEach(name => { (child.style as any)[name] = __flexSplitterStyle[name] })
+            delete (child as any).__flexSplitterStyle
+          }
+          child = getElementSibling(child, 'next')
+        }
+      })()
     }
   }
 
diff --git a/tsconfig.json b/tsconfig.json
index 6556661..6836a81 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
+    "lib": ["es2015", "dom"],
     "module": "es2015",
     "moduleResolution": "node",
     "strict": true,