mirzaev/hotline.mjs
1
1
Fork 0
Code Issues 5 Pull Requests Releases 2 Activity

Relation with #shell and calculating gap

Browse Source
This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich
2025-10-08 11:39:22 +07:00
parent 112f6bf41c
commit 01e8ddf502
1 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
hotline.mjs
View File

@@ -476,16 +476,16 @@ export class hotline {
* @name Constructor * @name Constructor
* *
* @description * @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? * @param {boolean} [inject=false] Write the hotline instance into the shell element?
**/ **/
constructor(shell, inject = false) { constructor(shell, inject = false) {
if (shell instanceof HTMLElement) { if (shell instanceof HTMLElement) {
// Initialized the shell of elements // Initialized the shell
// Writing the shell of elements // Writing the shell
this.#shell = shell; this.#shell = shell;
// Writing the hotline instance into the shell element // Writing the hotline instance into the shell element
@@ -535,15 +535,16 @@ export class hotline {
instance.#first.position = instance.#first.position =
parseFloat(instance.#first.element.style.marginTop) || 0; 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 // Initializing coordinate of the end of the first element
instance.#first.end = instance.#first.end =
instance.#first.rectangle.y + instance.#first.rectangle.y +
instance.#first.rectangle.height + instance.#first.rectangle.height +
instance.#first.offset; instance.#first.offsets;
} else { } else {
// Horizontal // Horizontal
@@ -551,22 +552,23 @@ export class hotline {
instance.#first.position = instance.#first.position =
parseFloat(instance.#first.element.style.marginLeft) || 0; 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 // Initializing coordinate of the end of the first element
instance.#first.end = instance.#first.end =
instance.#first.rectangle.x + instance.#first.rectangle.x +
instance.#first.rectangle.width + instance.#first.rectangle.width +
instance.#first.offset; instance.#first.offsets;
} }
if ( if (
(instance.vertical && (instance.vertical &&
Math.round(instance.#first.end) < instance.#shell.offsetTop) || Math.round(instance.#first.end) < instance.#shell.offsetTop + instance.#shell.offsetParent.offsetTop) ||
(!instance.vertical && (!instance.vertical &&
Math.round(instance.#first.end) < instance.#shell.offsetLeft) Math.round(instance.#first.end) < instance.#shell.offsetLeft + instance.#shell.offsetParent.offsetLeft)
) { ) {
// The first element with its separator went beyond the shell // The first element with its separator went beyond the shell
@@ -590,7 +592,7 @@ export class hotline {
new CustomEvent("hotline.transfer.end", { new CustomEvent("hotline.transfer.end", {
detail: { detail: {
element: instance.#first.element, 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 class hotline {
new CustomEvent("hotline.transfer.end", { new CustomEvent("hotline.transfer.end", {
detail: { detail: {
element: instance.#first.element, 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 class hotline {
} }
} else if ( } else if (
(instance.vertical && (instance.vertical &&
Math.round(instance.#first.rectangle.y) > instance.#shell.offsetTop) || Math.round(instance.#first.rectangle.y) > instance.#shell.offsetTop + instance.#shell.offsetParent.offsetTop) ||
(!instance.vertical && (!instance.vertical &&
Math.round(instance.#first.rectangle.x) > instance.#shell.offsetLeft) Math.round(instance.#first.rectangle.x) > instance.#shell.offsetLeft + instance.#shell.offsetParent.offsetLeft)
) { ) {
// Beginning border of first element with its separator went beyond the shell // Beginning border of first element with its separator went beyond the shell
@@ -649,9 +651,9 @@ export class hotline {
// Vertical // Vertical
// Initializing offset of the last element (elements are separated like this) // 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; 0;
if (instance.events.get("transfer.beginning")) { if (instance.events.get("transfer.beginning")) {
@@ -662,7 +664,7 @@ export class hotline {
new CustomEvent("hotline.transfer.beginning", { new CustomEvent("hotline.transfer.beginning", {
detail: { detail: {
element: instance.#last.element, 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 class hotline {
// Initializing the position of the last element with the end boundary beyond the beginning boundary of the shell // 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.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) // Deleting position of the second (previously first) element (the movement is based on this property)
instance.#first.element.style.marginTop = null; instance.#first.element.style.marginTop = null;
@@ -681,9 +683,9 @@ export class hotline {
// Horizontal // Horizontal
// Initializing offset of the last element (elements are separated like this) // 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; 0;
if (instance.events.get("transfer.beginning")) { if (instance.events.get("transfer.beginning")) {
@@ -694,7 +696,7 @@ export class hotline {
new CustomEvent("hotline.transfer.beginning", { new CustomEvent("hotline.transfer.beginning", {
detail: { detail: {
element: instance.#last.element, 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 class hotline {
// Initializing the position of the last element with the end boundary beyond the beginning boundary of the shell // 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.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) // Deleting position of the second (previously first) element (the movement is based on this property)
instance.#first.element.style.marginLeft = null; instance.#first.element.style.marginLeft = null;