Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5e627e14ae | |||
| 01e8ddf502 | |||
| 112f6bf41c | |||
| ab302610b0 | |||
| be7d36956c | |||
| 16cfc341f5 | |||
| 81aca40016 | |||
| 44a466e64d | |||
| 3257c7e7ec | |||
| bc0bab1867 | |||
| 8c7d16500a | |||
| 6e1632cd14 | |||
| f2f377e362 | |||
| 6bf6aab82f | |||
| b0a1c8b9dc |
53
README.md
53
README.md
@@ -2,31 +2,48 @@
|
||||
Module for creating "hot lines"
|
||||
|
||||
## Example
|
||||
```html
|
||||
<section id="wrap" style="display: flex">
|
||||
<!-- First element -->
|
||||
<article>
|
||||
<h3>Place</h3>
|
||||
</article>
|
||||
|
||||
<!-- Second element -->
|
||||
<div>
|
||||
<p>here</p>
|
||||
</div>
|
||||
|
||||
<!-- Third element -->
|
||||
<a>anything</a>
|
||||
</section>
|
||||
```
|
||||
```js
|
||||
// Initializing an instance of hotline manually
|
||||
const instance = new hotline(
|
||||
'articles',
|
||||
document.getElementById('wrap_articles')
|
||||
);
|
||||
import("/js/modules/hotline.mjs").then((module) => {
|
||||
// Imported the hotline.mjs module
|
||||
|
||||
// Initializing settings of the hotline instance
|
||||
instance.move = false;
|
||||
instance.wheel = true;
|
||||
instance.delta = 15;
|
||||
// Initializing an instance of the hotline.mjs
|
||||
const instance = new module.hotline(document.getElementById('wrap'));
|
||||
|
||||
// Starting the hotline instance
|
||||
instance.start();
|
||||
// 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)
|
||||
<br><br>
|
||||
### Site of the Svoboda anarchist organization [svoboda/works](https://git.mirzaev.sexy/svoboda/works)
|
||||
<br><br>
|
||||
### Telegram chat-robot market [mirzaev/arming](https://git.mirzaev.sexy/mirzaev/arming)
|
||||
<br><br>
|
||||
<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>
|
||||
<br><br>
|
||||
<br><br>
|
||||
### Pen in the [CodePen](https://codepen.io/mirzaev-sexy/pen/gOzBZOP)<br><br>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
20
hotline.min.mjs
Normal file
20
hotline.min.mjs
Normal file
File diff suppressed because one or more lines are too long
60
hotline.mjs
60
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)
|
||||
instance.#first.offset =
|
||||
parseFloat(getComputedStyle(instance.#first.element).marginBottom) || 0;
|
||||
// Initializing offsets of the first element
|
||||
instance.#first.offsets =
|
||||
(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)
|
||||
instance.#first.offset =
|
||||
parseFloat(getComputedStyle(instance.#first.element).marginRight) || 0;
|
||||
// Initializing offsets of the first element
|
||||
instance.#first.offsets =
|
||||
(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 =
|
||||
parseFloat(getComputedStyle(instance.#last.element).marginBottom) ||
|
||||
instance.#first.offset ||
|
||||
instance.#last.offsets =
|
||||
((parseFloat(getComputedStyle(instance.#last.element).marginBottom) || 0) + (parseFloat(getComputedStyle(instance.#shell).gap) || 0)) ||
|
||||
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 =
|
||||
parseFloat(getComputedStyle(instance.#last.element).marginRight) ||
|
||||
instance.#first.offset ||
|
||||
instance.#last.offsets =
|
||||
((parseFloat(getComputedStyle(instance.#last.element).marginRight) || 0) + (parseFloat(getComputedStyle(instance.#shell).gap) || 0)) ||
|
||||
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;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user