@tmagic/stage 1.0.0-beta.1 → 1.0.0-beta.12

package/src/util.ts

@@ -16,14 +16,9 @@
  * limitations under the License.
  */
 
+import { Mode, SELECTED_CLASS } from './const';
 import type { Offset } from './types';
 
-export enum Mode {
-  ABSOLUTE = 'absolute',
-  FIXED = 'fixed',
-  SORTABLE = 'sortable',
-}
-
 export const getOffset = (el: HTMLElement): Offset => {
   const { transform } = getComputedStyle(el);
   const { offsetParent } = el;
@@ -113,8 +108,63 @@ export const isFixed = (el?: HTMLElement): boolean => {
   return getComputedStyle(el).position === 'fixed';
 };
 
+export const isFixedParent = (el: HTMLElement) => {
+  let fixed = false;
+  let dom = el;
+  while (dom) {
+    fixed = isFixed(dom);
+    if (fixed) {
+      break;
+    }
+    const { parentElement } = dom;
+    if (!parentElement || parentElement.tagName === 'BODY') {
+      break;
+    }
+    dom = parentElement;
+  }
+  return fixed;
+};
+
 export const getMode = (el: HTMLElement): Mode => {
-  if (isFixed(el)) return Mode.FIXED;
+  if (isFixedParent(el)) return Mode.FIXED;
   if (isStatic(el) || isRelative(el)) return Mode.SORTABLE;
   return Mode.ABSOLUTE;
 };
+
+export const getScrollParent = (element: HTMLElement, includeHidden = false): HTMLElement | null => {
+  let style = getComputedStyle(element);
+  const overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+
+  if (isFixed(element)) return null;
+  for (let parent = element; parent.parentElement; ) {
+    parent = parent.parentElement;
+    style = getComputedStyle(parent);
+    if (isAbsolute(element) && isStatic(element)) {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
+  }
+
+  return null;
+};
+
+export const createDiv = ({ className, cssText }: { className: string; cssText: string }) => {
+  const el = globalThis.document.createElement('div');
+  el.className = className;
+  el.style.cssText = cssText;
+  return el;
+};
+
+export const removeSelectedClassName = (doc: Document) => {
+  const oldEl = doc.querySelector(`.${SELECTED_CLASS}`);
+
+  if (oldEl) {
+    oldEl.classList.remove(SELECTED_CLASS);
+    (oldEl.parentNode as HTMLDivElement)?.classList.remove(`${SELECTED_CLASS}-parent`);
+  }
+};
+
+export const addSelectedClassName = (el: Element) => {
+  el.classList.add(SELECTED_CLASS);
+  (el.parentNode as Element)?.classList.add(`${SELECTED_CLASS}-parent`);
+};