window.scrollX and window.scrollY

README.md

@@ -2,31 +2,48 @@
 Module for creating "hot lines"
 
 ## Example
-```js
+```html
-// Initializing an instance of hotline manually
+<section id="wrap" style="display: flex">
-const instance = new hotline(
+    <!-- First element -->
-    'articles', 
+    <article>
-    document.getElementById('wrap_articles')
+        <h3>Place</h3>
-);
+    </article>
-        
-// Initializing settings of the hotline instance
-instance.move = false;
-instance.wheel = true;
-instance.delta = 15;
 
-// Starting the hotline instance
+    <!-- Second element -->
-instance.start();
+    <div>
+        <p>here</p>
+    </div>
+
+    <!-- Third element -->
+    <a>anything</a>
+</section>
+```
+```js
+import("/js/modules/hotline.mjs").then((module) => {
+    // Imported the hotline.mjs module
+
+    // Initializing an instance of the hotline.mjs
+    const instance = new module.hotline(document.getElementById('wrap'));
+        
+    // Initializing settings of the hotline instance
+    instance.alive = false;
+    instance.wheel = true;
+    instance.delta = 15;
+
+    // Starting the hotline instance
+    instance.start();
+});
 ```
 
 ## Preview
-### Site of Svoboda anarchist organization [svoboda/works](https://git.mirzaev.sexy/svoboda/works)
+### Site of the Svoboda anarchist organization [svoboda/works](https://git.mirzaev.sexy/svoboda/works)
-![svoboda.works preview](/preview/24.gif)<br><br>
+![svoboda.works preview](preview/24.gif)<br><br>
 ### Telegram chat-robot market [mirzaev/arming](https://git.mirzaev.sexy/mirzaev/arming)
-![ARMING preview](/preview/5.gif)<br><br>
+![ARMING preview](preview/5.gif)<br><br>
 ### Large project, marketplace system [mirzaev/skillparts](https://git.mirzaev.sexy/mirzaev/skillparts)
 but the example is taken from another project that was copied and corrupted by another programmer<br><br>
-![SkillParts preview](/preview/8.gif)<br><br>
+![SkillParts preview](preview/8.gif)<br><br>
 ### Pen in the [CodePen](https://codepen.io/mirzaev-sexy/pen/gOzBZOP)<br><br>
-![CodePen preview](/preview/2024-11-27%2021_48_32-hotline.mjs.png)
+![CodePen preview](preview/2024-11-27%2021_48_32-hotline.mjs.png)
-![CodePen preview](/preview/17.gif)
+![CodePen preview](preview/17.gif)
-![CodePen preview](/preview/6.gif)
+![CodePen preview](preview/6.gif)

hotline.mjs

@@ -21,7 +21,7 @@
  * @license http://www.wtfpl.net/ Do What The Fuck You Want To Public License
  * @author Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
  */
-export default class hotline {
+export class hotline {
 	/**
 	 * @name Shell
 	 *
@@ -476,16 +476,16 @@ export default class hotline {
 	 * @name Constructor
 	 *
 	 * @description
-	 * Initialize a hotline instance and shell of elements
+	 * Initialize a hotline instance
 	 *
-	 * @param {HTMLElement} shell Shell
+	 * @param {HTMLElement} shell The shell element
 	 * @param {boolean} [inject=false] Write the hotline instance into the shell element?
 	 **/
 	constructor(shell, inject = false) {
 		if (shell instanceof HTMLElement) {
-			// Initialized the shell of elements
+			// Initialized the shell
 
-			// Writing the shell of elements
+			// Writing the shell
 			this.#shell = shell;
 
 			// Writing the hotline instance into the shell element
@@ -535,15 +535,16 @@ export default class hotline {
 					instance.#first.position =
 						parseFloat(instance.#first.element.style.marginTop) || 0;
 
-					// Initializing offset of the first element (elements are separated like this)
+					// Initializing offsets of the first element
-					instance.#first.offset =
+					instance.#first.offsets =
-						parseFloat(getComputedStyle(instance.#first.element).marginBottom) || 0;
+						(parseFloat(getComputedStyle(instance.#first.element).marginBottom) || 0)
+						 + (parseFloat(getComputedStyle(instance.#shell).gap) || 0);
 
 					// Initializing coordinate of the end of the first element
 					instance.#first.end =
 						instance.#first.rectangle.y +
 						instance.#first.rectangle.height +
-						instance.#first.offset;
+						instance.#first.offsets;
 				} else {
 					// Horizontal
 
@@ -551,22 +552,23 @@ export default class hotline {
 					instance.#first.position =
 						parseFloat(instance.#first.element.style.marginLeft) || 0;
 
-					// Initializing offset of the first element (elements are separated like this)
+					// Initializing offsets of the first element
-					instance.#first.offset =
+					instance.#first.offsets =
-						parseFloat(getComputedStyle(instance.#first.element).marginRight) || 0;
+						(parseFloat(getComputedStyle(instance.#first.element).marginRight) || 0)
+						 + (parseFloat(getComputedStyle(instance.#shell).gap) || 0);
 
 					// Initializing coordinate of the end of the first element
 					instance.#first.end =
 						instance.#first.rectangle.x +
 						instance.#first.rectangle.width +
-						instance.#first.offset;
+						instance.#first.offsets;
 				}
-
+				
 				if (
 					(instance.vertical &&
-						Math.round(instance.#first.end) < instance.#shell.offsetTop) ||
+						Math.round(instance.#first.end) < instance.#shell.offsetTop + instance.#shell.offsetParent.offsetTop - window.scrollY) ||
 					(!instance.vertical &&
-						Math.round(instance.#first.end) < instance.#shell.offsetLeft)
+						Math.round(instance.#first.end) < instance.#shell.offsetLeft + instance.#shell.offsetParent.offsetLeft - window.scrollX)
 				) {
 					// The first element with its separator went beyond the shell
 
@@ -590,7 +592,7 @@ export default class hotline {
 									new CustomEvent("hotline.transfer.end", {
 										detail: {
 											element: instance.#first.element,
-											offset: -(instance.#first.rectangle.height + instance.#first.offset)
+											offset: -(instance.#first.rectangle.height + instance.#first.offsets)
 										}
 									})
 								);
@@ -612,7 +614,7 @@ export default class hotline {
 									new CustomEvent("hotline.transfer.end", {
 										detail: {
 											element: instance.#first.element,
-											offset: -(instance.#first.rectangle.width + instance.#first.offset)
+											offset: -(instance.#first.rectangle.width + instance.#first.offsets)
 										}
 									})
 								);
@@ -624,9 +626,9 @@ export default class hotline {
 					}
 				} else if (
 					(instance.vertical &&
-						Math.round(instance.#first.rectangle.y) > instance.#shell.offsetTop) ||
+						Math.round(instance.#first.rectangle.y) > instance.#shell.offsetTop + instance.#shell.offsetParent.offsetTop - window.scrollY) ||
 					(!instance.vertical &&
-						Math.round(instance.#first.rectangle.x) > instance.#shell.offsetLeft)
+						Math.round(instance.#first.rectangle.x) > instance.#shell.offsetLeft + instance.#shell.offsetParent.offsetLeft - window.scrollX)
 				) {
 					// Beginning border of first element with its separator went beyond the shell
 
@@ -649,9 +651,9 @@ export default class hotline {
 							// Vertical
 
 							// Initializing offset of the last element (elements are separated like this)
-							instance.#last.offset =
+							instance.#last.offsets =
-								parseFloat(getComputedStyle(instance.#last.element).marginBottom) ||
+								((parseFloat(getComputedStyle(instance.#last.element).marginBottom) || 0) + (parseFloat(getComputedStyle(instance.#shell).gap) || 0)) ||
-								instance.#first.offset ||
+								instance.#first.offsets ||
 								0;
 
 							if (instance.events.get("transfer.beginning")) {
@@ -662,7 +664,7 @@ export default class hotline {
 									new CustomEvent("hotline.transfer.beginning", {
 										detail: {
 											element: instance.#last.element,
-											offset: instance.#last.rectangle.height + instance.#last.offset
+											offset: instance.#last.rectangle.height + instance.#last.offsets
 										}
 									})
 								);
@@ -670,7 +672,7 @@ export default class hotline {
 
 							// Initializing the position of the last element with the end boundary beyond the beginning boundary of the shell
 							instance.#last.element.style.marginTop =
-								-instance.#last.rectangle.height - instance.#last.offset + "px";
+								-instance.#last.rectangle.height - instance.#last.offsets + "px";
 
 							// Deleting position of the second (previously first) element (the movement is based on this property)
 							instance.#first.element.style.marginTop = null;
@@ -681,9 +683,9 @@ export default class hotline {
 							// Horizontal
 
 							// Initializing offset of the last element (elements are separated like this)
-							instance.#last.offset =
+							instance.#last.offsets =
-								parseFloat(getComputedStyle(instance.#last.element).marginRight) ||
+								((parseFloat(getComputedStyle(instance.#last.element).marginRight) || 0) + (parseFloat(getComputedStyle(instance.#shell).gap) || 0)) ||
-								instance.#first.offset ||
+								instance.#first.offsets ||
 								0;
 
 							if (instance.events.get("transfer.beginning")) {
@@ -694,7 +696,7 @@ export default class hotline {
 									new CustomEvent("hotline.transfer.beginning", {
 										detail: {
 											element: instance.#last.element,
-											offset: instance.#last.rectangle.width + instance.#last.offset
+											offset: instance.#last.rectangle.width + instance.#last.offsets
 										}
 									})
 								);
@@ -702,7 +704,7 @@ export default class hotline {
 
 							// Initializing the position of the last element with the end boundary beyond the beginning boundary of the shell
 							instance.#last.element.style.marginLeft =
-								-instance.#last.rectangle.width - instance.#last.offset + "px";
+								-instance.#last.rectangle.width - instance.#last.offsets + "px";
 
 							// Deleting position of the second (previously first) element (the movement is based on this property)
 							instance.#first.element.style.marginLeft = null;