@total_onion/onion-library 1.1.13 → 1.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -773,7 +773,7 @@
|
|
|
773
773
|
},
|
|
774
774
|
"layout_689076649608d": {
|
|
775
775
|
"key": "layout_689076649608d",
|
|
776
|
-
"name": "
|
|
776
|
+
"name": "smash_balloon_social_media_v3",
|
|
777
777
|
"label": "Smash Balloon Social Media",
|
|
778
778
|
"display": "block",
|
|
779
779
|
"sub_fields": [
|
|
@@ -2979,4 +2979,4 @@
|
|
|
2979
2979
|
"acfe_meta": "",
|
|
2980
2980
|
"acfe_note": "",
|
|
2981
2981
|
"modified": 1756281936
|
|
2982
|
-
}
|
|
2982
|
+
}
|
|
@@ -2,110 +2,6 @@ export default function smashballoonsocialmediav3Js(options = {}) {
|
|
|
2
2
|
try {
|
|
3
3
|
const {block} = options;
|
|
4
4
|
if (!block) return;
|
|
5
|
-
|
|
6
|
-
// in carousel need to be moving without stops and delays
|
|
7
|
-
if (block.dataset.marquee) {
|
|
8
|
-
// add 3 sec delay
|
|
9
|
-
setTimeout(function () {
|
|
10
|
-
if (block.dataset.sbiMarqueeInit === '1') return;
|
|
11
|
-
block.dataset.sbiMarqueeInit = '1';
|
|
12
|
-
|
|
13
|
-
const outer = block.querySelector(
|
|
14
|
-
'.sbi-owl-stage-outer, .owl-stage-outer'
|
|
15
|
-
);
|
|
16
|
-
const stage = block.querySelector('.sbi-owl-stage, .owl-stage');
|
|
17
|
-
console.log(stage, outer);
|
|
18
|
-
if (!outer || !stage) return;
|
|
19
|
-
|
|
20
|
-
// --- Config ---
|
|
21
|
-
const PX_PER_SEC = 50; // adjust speed as needed
|
|
22
|
-
|
|
23
|
-
const uid = `sbi-marquee-${Math.random().toString(36).slice(2)}`;
|
|
24
|
-
block.setAttribute('data-sbi-marquee-id', uid);
|
|
25
|
-
|
|
26
|
-
const style = document.createElement('style');
|
|
27
|
-
style.textContent = `
|
|
28
|
-
[data-sbi-marquee-id="${uid}"] .sbi-owl-stage,
|
|
29
|
-
[data-sbi-marquee-id="${uid}"] .owl-stage {
|
|
30
|
-
transition: none !important;
|
|
31
|
-
animation: none !important;
|
|
32
|
-
will-change: transform;
|
|
33
|
-
}
|
|
34
|
-
[data-sbi-marquee-id="${uid}"] .owl-nav,
|
|
35
|
-
[data-sbi-marquee-id="${uid}"] .owl-dots {
|
|
36
|
-
display: none !important;
|
|
37
|
-
}
|
|
38
|
-
`;
|
|
39
|
-
block.appendChild(style);
|
|
40
|
-
|
|
41
|
-
// --- Helpers ---
|
|
42
|
-
const nonClonedItems = () =>
|
|
43
|
-
Array.from(
|
|
44
|
-
stage.querySelectorAll(
|
|
45
|
-
'.sbi-owl-item:not(.cloned), .owl-item:not(.cloned)'
|
|
46
|
-
)
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
const getLoopWidth = () => {
|
|
50
|
-
const items = nonClonedItems();
|
|
51
|
-
if (!items.length)
|
|
52
|
-
return stage.scrollWidth / 2 || stage.scrollWidth || 0;
|
|
53
|
-
let w = 0;
|
|
54
|
-
for (const el of items)
|
|
55
|
-
w += el.getBoundingClientRect().width;
|
|
56
|
-
return w;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
let loopW = getLoopWidth();
|
|
60
|
-
let x = 0;
|
|
61
|
-
let last = performance.now();
|
|
62
|
-
let raf = null;
|
|
63
|
-
|
|
64
|
-
function tick(now) {
|
|
65
|
-
const dt = (now - last) / 1000;
|
|
66
|
-
last = now;
|
|
67
|
-
|
|
68
|
-
x -= PX_PER_SEC * dt;
|
|
69
|
-
|
|
70
|
-
if (-x >= loopW) x += loopW;
|
|
71
|
-
|
|
72
|
-
stage.style.setProperty(
|
|
73
|
-
'transform',
|
|
74
|
-
`translate3d(${x}px,0,0)`,
|
|
75
|
-
'important'
|
|
76
|
-
);
|
|
77
|
-
raf = requestAnimationFrame(tick);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
const ro = new ResizeObserver(() => {
|
|
81
|
-
loopW = getLoopWidth();
|
|
82
|
-
});
|
|
83
|
-
ro.observe(stage);
|
|
84
|
-
|
|
85
|
-
outer.addEventListener('mouseenter', () => {
|
|
86
|
-
if (raf) cancelAnimationFrame(raf);
|
|
87
|
-
raf = null;
|
|
88
|
-
});
|
|
89
|
-
outer.addEventListener('mouseleave', () => {
|
|
90
|
-
if (!raf) {
|
|
91
|
-
last = performance.now();
|
|
92
|
-
raf = requestAnimationFrame(tick);
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
last = performance.now();
|
|
97
|
-
raf = requestAnimationFrame(tick);
|
|
98
|
-
|
|
99
|
-
block._sbiMarqueeDestroy = () => {
|
|
100
|
-
if (raf) cancelAnimationFrame(raf);
|
|
101
|
-
ro.disconnect();
|
|
102
|
-
style.remove();
|
|
103
|
-
stage.style.removeProperty('transform');
|
|
104
|
-
delete block.dataset.sbiMarqueeInit;
|
|
105
|
-
delete block._sbiMarqueeDestroy;
|
|
106
|
-
};
|
|
107
|
-
}, 2000);
|
|
108
|
-
}
|
|
109
5
|
} catch (error) {
|
|
110
6
|
console.error(error);
|
|
111
7
|
}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
// @use 'Assets/scss/
|
|
1
|
+
// @use 'Assets/scss/modules/library-modules/core-mixins/core-mixins';
|
|
2
|
+
// @use 'Assets/scss/modules/library-modules/core-functions/core-functions';
|
|
3
|
+
// @use 'Assets/scss/theme/breakpoints';
|
|
4
|
+
@use 'Assets/scss/blocks/smash-balloon-social-media-v3/smash-balloon-social-media-v3-extra';
|
|
2
5
|
.smash-balloon-social-media-v3 {
|
|
3
6
|
position: relative;
|
|
4
7
|
max-width: 100vw;
|
|
@@ -6,5 +9,19 @@
|
|
|
6
9
|
width: 100%;
|
|
7
10
|
position: relative;
|
|
8
11
|
}
|
|
9
|
-
|
|
12
|
+
&[data-marquee='true'] {
|
|
13
|
+
.sbi-owl-stage {
|
|
14
|
+
transition: none !important;
|
|
15
|
+
animation: sbiScroll 30s linear infinite;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
@keyframes sbiScroll {
|
|
19
|
+
0% {
|
|
20
|
+
transform: translate3d(0, 0, 0);
|
|
21
|
+
}
|
|
22
|
+
100% {
|
|
23
|
+
transform: translate3d(-50%, 0, 0);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
@include smash-balloon-social-media-v3-extra.additionalStyles();
|
|
10
27
|
}
|
package/package.json
CHANGED
|
@@ -1,43 +1,43 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
2
|
+
"name": "@total_onion/onion-library",
|
|
3
|
+
"version": "1.1.14",
|
|
4
|
+
"description": "Component library",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"build": "esbuild",
|
|
8
|
+
"test": "jest"
|
|
9
|
+
},
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "git+https://github.com/TotalOnion/onion-library.git"
|
|
13
|
+
},
|
|
14
|
+
"author": "Ciaran",
|
|
15
|
+
"license": "ISC",
|
|
16
|
+
"bugs": {
|
|
17
|
+
"url": "https://github.com/TotalOnion/onion-library/issues"
|
|
18
|
+
},
|
|
19
|
+
"homepage": "https://github.com/TotalOnion/onion-library#readme",
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"autoprefixer": "^10.4.21",
|
|
22
|
+
"compressing": "^2.0.0",
|
|
23
|
+
"cpy": "^9.0.1",
|
|
24
|
+
"esbuild-sass-plugin": "^3.3.1",
|
|
25
|
+
"fs": "^0.0.1-security",
|
|
26
|
+
"fs-extra": "^11.1.0",
|
|
27
|
+
"glob": "^11.0.0",
|
|
28
|
+
"lottie-web": "^5.13.0",
|
|
29
|
+
"postcss": "^8.5.6",
|
|
30
|
+
"postcss-preset-env": "^10.3.1",
|
|
31
|
+
"prettier": "^2.6.2",
|
|
32
|
+
"yargs": "^17.4.1"
|
|
33
|
+
},
|
|
34
|
+
"devDependencies": {
|
|
35
|
+
"@total_onion/onion-modalcontroller": "^1.0.5",
|
|
36
|
+
"@total_onion/onion-utils": "^1.0.10",
|
|
37
|
+
"@total_onion/onion-videocontroller": "^1.0.2",
|
|
38
|
+
"dotenv": "^16.0.3",
|
|
39
|
+
"esbuild": "0.25.5",
|
|
40
|
+
"flatpickr": "^4.6.13",
|
|
41
|
+
"swiper": "^11.2.10"
|
|
42
|
+
}
|
|
43
|
+
}
|