templates/js/library/Dom.js line 1

Open in your IDE?
  1. class ElementViewPortVisibilityChecker {
  2.     viewPortCheckElementsData = [];
  3.     removeViewPortElementsOnScrollCheck = null;
  4.     viewPortInterval = null;
  5.     rootElement = null;
  6.     callback = null;
  7.     options = null;
  8.     isBusy = false;
  10.     constructor(rootElement = null, callback = null, options = null) {
  11.         this.options = {
  12.             calcElementOptions: {
  13.                 offsetParent: true,
  14.                 calcScrollTop: false,
  15.                 ...(options?.calcElementOptions || {})
  16.             },
  17.             ...(options || {})
  18.         }
  20.        this.rootElement = rootElement;
  21.        this.callback = callback;
  22.     }
  24.     start() {
  25.         this.startViewPortElementsOnScrollCheck();
  27.         this.isBusy = false;
  28.         this.viewPortInterval = setInterval(async () => {
  29.             try {
  30.                 await this.viewPortElementsCheck();
  31.             } catch (e) {
  32.                 throw e;
  33.             }
  34.         }, 1000);
  35.     }
  37.     stop() {
  38.         if (this.removeViewPortElementsOnScrollCheck) {
  39.             this.removeViewPortElementsOnScrollCheck();
  40.             this.removeViewPortElementsOnScrollCheck = null;
  41.         }
  42.         if (this.viewPortInterval) {
  43.             clearInterval(this.viewPortInterval);
  44.             this.viewPortInterval = null;
  45.         }
  46.     }
  48.     clear() {
  49.         this.viewPortCheckElementsData = [];
  50.     }
  52.     startViewPortElementsOnScrollCheck() {
  53.         const onScroll = async () => {
  54.             await this.viewPortElementsCheck();
  55.         };
  56.         this.rootElement.addEventListener('scroll', onScroll);
  57.         this.removeViewPortElementsOnScrollCheck = () => {
  58.             this.rootElement.removeEventListener('scroll', onScroll);
  59.         }
  60.     }
  62.     addElement(data) {
  63.         // data = {el: null, callback: null, triggerOnce: false, ...data};
  64.         if (!this.findByElement(data.el)) {
  65.             this.viewPortCheckElementsData.push(data);
  66.         }
  67.     }
  69.     findByElement(el) {
  70.         return this.viewPortCheckElementsData.find(data => data.el === el);
  71.     }
  73.     async viewPortElementsCheck() {
  74.         if (this.isBusy) {
  75.             return;
  76.         }
  77.         this.isBusy = true;
  79.         try {
  80.             return await this._doViewPortElementsCheck();
  81.         } catch (e) {
  82.             throw e;
  83.         } finally {
  84.             this.isBusy = false;
  85.         }
  86.     }
  88.     async _doViewPortElementsCheck() {
  89.         let onCallbackTrue = (elementData) => {
  90.             if (elementData.triggerOnce) {
  91.                 for (let i = 0; i < this.viewPortCheckElementsData.length; i++) { //delete
  92.                     if (this.viewPortCheckElementsData[i] === elementData) {
  93.                         this.viewPortCheckElementsData.splice(i, 1);
  94.                         break;
  95.                     }
  96.                 }
  97.             }
  98.         };
  100.         let dataItems = [];
  102.         for (let data of this.viewPortCheckElementsData) {
  103.             let visibleData = Dom.getElementViewportData(data.el,
  104.                 this.rootElement, {
  105.                     calcElementOptions: this.options.calcElementOptions
  106.                 });
  107.             if ((!data.triggerOnce || !data.isTriggered) && data.el && visibleData.isVisible) {
  108.                 let dataItem = {elementData: data, visibleData};
  109.                 if (this.callback) {
  110.                     dataItems.push(dataItem);
  111.                 } else {
  112.                     if (data.callback(dataItem)) {
  113.                         onCallbackTrue(data);
  114.                     }
  115.                 }
  116.             }
  117.         }
  118.         if (this.callback && dataItems.length) {
  119.             let callbackResult = await this.callback({dataItems: dataItems, onDataItemHandled: (dataItem, handled) => {
  120.                 if (!dataItem || !dataItem.elementData) {
  121.                     return;
  122.                 }
  123.                 if (handled) {
  124.                     onCallbackTrue(dataItem.elementData);
  125.                 }
  126.             }});
  127.             if (callbackResult) {
  128.                 for (let dataItem of dataItems) {
  129.                     onCallbackTrue(dataItem.elementData);
  130.                 }
  131.             }
  132.         }
  133.     }
  134. }
  136. class Dom {
  137.     static viewPortCheckElementsData = [];
  138.     static mousePosition = { x: 0, y: 0 };
  140.     static onChange(target, callback, byChange = true, byKeyup = false, byProxy = false) {
  141.         function _callback(target, event = null) {
  142.             callback(target, event);
  143.         }
  145.         if (byChange) {
  146.             $(target).change(function (event) {
  147.                 _callback(target, event);
  148.             });
  149.         }
  151.         if (byKeyup) {
  152.             $("[data-route-param-name]").on("keyup", function (event) {
  153.                 _callback(target, event);
  154.             });
  155.         }
  157.         if (byProxy) {
  158.             const proxy = new Proxy(target, {
  159.                 set(target, property, value) {
  160.                     target[property] = value;
  161.                     if (property === 'value') {
  162.                         _callback(target, null);
  163.                     }
  164.                     return true;
  165.                 }
  166.             });
  167.             target.proxy = proxy;
  168.         }
  169.     }
  171.     static getElementAttrs(element, attrsNames) {
  172.         let result = {};
  173.         for (let attrName of attrsNames) {
  174.             result[attrName] = $(element).attr(attrName);
  175.         }
  176.         return result;
  177.     }
  179.     static isScrolledToBottom(element) {
  180.         return element.scrollHeight - element.scrollTop === element.clientHeight;
  181.     }
  183.     static getProp(name, elementOrSelector = null) {
  184.         let element = (elementOrSelector
  185.             ? (typeof elementOrSelector == 'string' ? $(elementOrSelector)[0] : elementOrSelector)
  186.             : document.documentElement);
  188.         return getComputedStyle(element).getPropertyValue(name) || document.documentElement.style.getPropertyValue(name);
  189.     }
  191.     static setProp(name, val, elementOrSelector = null) {
  192.         let element = (elementOrSelector
  193.             ? (typeof elementOrSelector == 'string' ? $(elementOrSelector)[0] : elementOrSelector)
  194.             : document.documentElement);
  196.         element.style.setProperty(name, val);
  197.     }
  199.     static getMediaSize() {
  200.         let result = Dom.getProp('--media-size');
  201.         if (result) {
  202.             result = result.replaceAll(/^["]|["]$/g, "");
  203.         }
  204.         return result;
  205.     }
  207.     static findParent(element, selector = null, topParent = null) {
  208.         if (selector !== null && !Array.isArray(selector)) {
  209.             selector = [selector];
  210.         }
  211.         if (topParent !== null && !Array.isArray(topParent)) {
  212.             topParent = [topParent];
  213.         }
  215.         while (element.parentElement) {
  216.             let withSelector = (selector !== null ? selector.find(current => $(element.parentElement).is(current)) : null);
  217.             if ((selector === null || withSelector) && (!topParent || topParent.find(current => element.parentElement == current))) {
  218.                 return element.parentElement;
  219.             }
  220.             element = element.parentElement;
  221.         }
  222.     }
  224.     static findParentChild(element, selector = null) {
  225.         if (selector !== null && !Array.isArray(selector)) {
  226.             selector = [selector];
  227.         }
  228.         while (element.parentElement) {
  229.             let child = null;
  230.             selector && selector.find(current => child = $(element.parentElement).find(current)[0]);
  231.             if (child) {
  232.                 return child;
  233.             }
  234.             element = element.parentElement;
  235.         }
  236.     }
  238.     static getElementViewportData(el, container = null, options = null) {
  239.         options = {
  240.             calcElementOptions: {
  241.                 offsetParent: true,
  242.                 calcScrollTop: true,
  243.                 ...(options?.calcElementOptions || {})
  244.             },
  245.             ...(options || {})
  246.         }
  248.         const rect = el.getBoundingClientRect();
  250.         let viewportHeight = null;
  251.         if (container) {
  252.             const containerRect = container.getBoundingClientRect();
  253.             viewportHeight = containerRect.height;
  254.         } else {
  255.             viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  256.             container = window.innerHeight ? window : document.documentElement;
  257.         }
  259.         const visibleTop = Dom.calcElementTop(el, null, options.calcElementOptions);
  260.         const visibleBottom = visibleTop + rect.height;
  262.         const containerTop = container === window ? 0 : Dom.calcElementTop(container, null, options.calcElementOptions);
  263.         const containerBottom = containerTop + viewportHeight;
  265.         const visiblePixels = Math.max(0, Math.min(visibleBottom, containerBottom) - Math.max(visibleTop, containerTop));
  266.         const isFullyVisible = visiblePixels >= rect.height;
  267.         const visibilityPercentage = visiblePixels / rect.height;
  268.         const isVisible = visiblePixels > 0;
  270.         return {
  271.             visiblePixels: Math.round(visiblePixels),
  272.             portHeight: viewportHeight,
  273.             visibilityPercentage,
  274.             isFullyVisible,
  275.             isVisible,
  276.         };
  277.     }
  279.     static findClosestElement(targetY, selector = null, elements = null, elementYOffset = null) {
  280.         if (selector) {
  281.             elements = document.querySelectorAll(selector);
  282.         }
  284.         // Initialize variables to keep track of the closest element and its distance
  285.         let closestElement = null;
  286.         let closestDistance = Infinity;
  288.         // Iterate over each element
  289.         elements.forEach(element => {
  290.             // Get the bounding rectangle of the element
  291.             const rect = element.getBoundingClientRect();
  293.             // Calculate the vertical distance from the targetY to the center of the element
  294.             const elementCenterY = element.offsetTop + rect.height / 2 + (elementYOffset ? elementYOffset : 0);
  295.             const distance = Math.abs(targetY - elementCenterY);
  297.             // If this element is closer than the current closest, update the closest element
  298.             if (distance < closestDistance) {
  299.                 closestDistance = distance;
  300.                 closestElement = element;
  301.             }
  302.         });
  304.         return closestElement;
  305.     }
  307.     static scrollElementIntoView(targetElement, parentElement) {
  308.         let scrollTop = targetElement.offsetTop - parentElement.offsetTop;
  309.         parentElement.scrollTop = scrollTop;
  310.     }
  312.     static centerInnerContainerScrollLeft(child, innerContainer, container) {
  313.         const childRect = child.getBoundingClientRect();
  314.         const innerContainerRect = innerContainer.getBoundingClientRect();
  315.         const containerRect = container.getBoundingClientRect();
  317.         const childLeftRelativeToInner = childRect.left - innerContainerRect.left;
  318.         const containerCenter = containerRect.width / 2;
  319.         const scrollLeft = childLeftRelativeToInner - containerCenter + (childRect.width / 2);
  321.         container.scrollLeft = scrollLeft;
  322.     }
  324.     static scrollChildToTop(child, container) {
  325.         const childRect = child.getBoundingClientRect();
  326.         const containerRect = container.getBoundingClientRect();
  327.         const childTopRelativeToContainer = childRect.top - containerRect.top;
  328.         const scrollTop = container.scrollTop + childTopRelativeToContainer;
  329.         container.scrollTop = scrollTop;
  330.     }
  332.     static getElementUnderCursor() {
  333.         return document.elementFromPoint(Dom.mousePosition.x, Dom.mousePosition.y);
  334.     }
  336.     static isElementScrolledDown(element) {
  337.         return element.scrollTop >= (element.scrollHeight - element.clientHeight);
  338.     }
  340.     static isElementScrolledUp(element) {
  341.         return element.scrollTop === 0;
  342.     }
  344.     static getScrollTopProgress(element) {
  345.         return element.scrollTop / (element.scrollHeight - element.offsetHeight);
  346.     }
  348.     static onSmoothScrollEnd(container, callback) {
  349.         let isScrolling;
  351.         function onScroll() {
  352.             window.clearTimeout(isScrolling);
  353.             isScrolling = setTimeout(() => {
  354.                 container.removeEventListener('scroll', onScroll);
  355.                 callback();
  356.             }, 300);
  357.         }
  358.         container.addEventListener('scroll', onScroll, { passive: true });
  359.     }
  361.     static scrollDown(container, smooth = false) {
  362.         if (!container) {
  363.             return;
  364.         }
  366.         container.scrollTo({
  367.             top: container.scrollHeight,
  368.             behavior: smooth ? "smooth" : "auto"
  369.         });
  370.     }
  372.     static getElementValue(element) {
  373.         let result = null;
  374.         switch (element.tagName) {
  375.             case "TEXTAREA":
  376.             case "SELECT":
  377.                 result = element.value;
  378.                 break;
  379.             case "INPUT":
  380.                 switch (element.type.toLowerCase()) {
  381.                     case "text":
  382.                     case "number":
  383.                         result = element.value;
  384.                         break
  385.                     case "checkbox":
  386.                     case "radio":
  387.                         result = element.checked;
  388.                         break;
  389.                     default:
  390.                         throw new Error(`Unknown type: ${element.type}`);
  391.                 }
  392.                 break;
  393.             default:
  394.                 throw new Error(`Unknown tag: ${element.tagName}`);
  395.         }
  397.         return result;
  398.     }
  400.     static setElementPosUnderElement(element, relativeElement, topContainer, topOffset = null) {
  401.         let top = (Dom.calcElementTop(relativeElement, topContainer) +
  402.             relativeElement.getBoundingClientRect().height + (topOffset ? topOffset : 0)) + "px";
  403.         $(element).css("top", top);
  404.         $(element).css("left", Dom.calcElementLeft(relativeElement, topContainer) + "px");
  405.     }
  407.     static calcElementTop(element, container, options = null) {
  408.         options = {
  409.             offsetParent: true,
  410.             calcScrollTop: false,
  411.             ...(options || {})
  412.         }
  414.         let offsetTop = 0;
  415.         let currentElement = element;
  417.         // Цикл для накопления offsetTop до тех пор, пока не достигнем контейнера
  418.         let lastContainer = null;
  419.         while (currentElement && currentElement !== container) {
  420.             offsetTop += (lastContainer && options.calcScrollTop ? lastContainer.scrollTop * -1 : 0) + currentElement.offsetTop;
  421.             currentElement = (options.offsetParent ? currentElement.offsetParent : currentElement.parentElement);
  422.             lastContainer = currentElement;
  423.         }
  425.         // Если элемент не является потомком контейнера, вернем null
  426.         if (currentElement !== container) return null;
  428.         return offsetTop;
  429.     }
  431.     static calcElementBottom(element, container, options = null) {
  432.         options = {
  433.             offsetParent: true,
  434.             ...(options || {})
  435.         }
  437.         const top = this.calcElementTop(element, container, options);
  439.         if (top === null) {
  440.             return null;
  441.         }
  443.         return top + element.offsetHeight;
  444.     }
  446.     static calcElementLeft(element, container) {
  447.         let offsetLeft = 0;
  448.         let currentElement = element;
  450.         // Цикл для накопления offsetTop до тех пор, пока не достигнем контейнера
  451.         while (currentElement && currentElement !== container) {
  452.             offsetLeft += currentElement.offsetLeft;
  453.             currentElement = currentElement.offsetParent;
  454.         }
  456.         // Если элемент не является потомком контейнера, вернем null
  457.         if (currentElement !== container) return null;
  459.         return offsetLeft;
  460.     }
  462.     static fitElementHorizontally(element, container, containerRect = null, showUnderElement = null) {
  463.         containerRect = containerRect || container.getBoundingClientRect();
  465.         if (element.offsetLeft < 0) {
  466.             element.style.left = `0px`;
  467.             element.style.right = ``;
  468.         }
  470.         if (element.offsetLeft + element.offsetWidth > containerRect.width) {
  471.             element.style.left = ``;
  472.             element.style.right = `0px`;
  473.         }
  474.     }
  476.     static insertHtml(position, parent, html) {
  477.         parent.insertAdjacentHTML(position, html);
  478.         switch (position.toLowerCase()) {
  479.             case "beforeend":
  480.                 return parent.children[parent.children.length - 1];
  481.                 break;
  482.             case "beforebegin":
  483.                 return parent.previousElementSibling;
  484.                 break;
  485.             case "afterend":
  486.                 return parent.parentElement.children[$(parent).index() + 1];
  487.                 break;
  488.             default:
  489.                 throw new Error("Unknown: " + position);
  490.         }
  491.     }
  492. }
  494. const qs = (...args) => {
  495.     if (typeof args[0] !== 'string' && !(args[0] instanceof String)) {
  496.         return args[0].querySelector(args.slice(1));
  497.     }
  498.     return document.querySelector(...args);
  499. }
  500. const qsa = (...args) => {
  501.     if (typeof args[0] !== 'string' && !(args[0] instanceof String)) {
  502.         return args[0].querySelectorAll(args.slice(1));
  503.     }
  504.     return document.querySelectorAll(...args);
  505. };
  506. const DEBUG_MODE = true;
  508. $(() => {
  509.     document.addEventListener('mousemove', function(event) {
  510.         Dom.mousePosition.x = event.clientX;
  511.         Dom.mousePosition.y = event.clientY;
  512.     });
  513. });
  515. class DomListener {
  516.     constructor(element, observerConfig, callback) {
  517.         this.targetNode = element;
  518.         const mutationCallback = function(mutationsList, observer) {
  519.             callback(mutationsList);
  520.             // console.log('DOM has changed:', mutationsList);
  521.         };
  523.         this.observer = new MutationObserver(mutationCallback);
  524.         this.config = observerConfig; //{ childList: true, subtree: true, attributes: true }
  525.         this.observer.observe(this.targetNode, this.config);
  526.     }
  528.     disconnect = () => {
  529.         this.observer.disconnect();
  530.     }
  531. }