@total_onion/onion-library 1.0.192 → 1.0.193
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.
- package/components/block-smash-balloon-social-media-v3/group_6890a2ab0e0a9.json +25 -2
- package/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js +108 -2
- package/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.twig +2 -4
- package/package.json +1 -1
|
@@ -88,6 +88,29 @@
|
|
|
88
88
|
"other_choice": 0,
|
|
89
89
|
"layout": "vertical",
|
|
90
90
|
"save_other_choice": 0
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"key": "field_68a5b4f80677b",
|
|
94
|
+
"label": "Transform to marquee carousel",
|
|
95
|
+
"name": "marquee",
|
|
96
|
+
"aria-label": "",
|
|
97
|
+
"type": "true_false",
|
|
98
|
+
"instructions": "",
|
|
99
|
+
"required": 0,
|
|
100
|
+
"conditional_logic": 0,
|
|
101
|
+
"wrapper": {
|
|
102
|
+
"width": "",
|
|
103
|
+
"class": "",
|
|
104
|
+
"id": ""
|
|
105
|
+
},
|
|
106
|
+
"wpml_cf_preferences": 0,
|
|
107
|
+
"message": "Make carousel to scroll without delays and pauses.",
|
|
108
|
+
"default_value": 0,
|
|
109
|
+
"style": "",
|
|
110
|
+
"allow_in_bindings": 0,
|
|
111
|
+
"ui": 0,
|
|
112
|
+
"ui_on_text": "",
|
|
113
|
+
"ui_off_text": ""
|
|
91
114
|
}
|
|
92
115
|
],
|
|
93
116
|
"location": [
|
|
@@ -116,5 +139,5 @@
|
|
|
116
139
|
"acfe_display_title": "",
|
|
117
140
|
"acfe_meta": "",
|
|
118
141
|
"acfe_note": "",
|
|
119
|
-
"modified":
|
|
120
|
-
}
|
|
142
|
+
"modified": 1755690314
|
|
143
|
+
}
|
|
@@ -1,7 +1,113 @@
|
|
|
1
|
-
export default function smashballoonsocialmediav3Js
|
|
1
|
+
export default function smashballoonsocialmediav3Js(options = {}) {
|
|
2
2
|
try {
|
|
3
3
|
const {block} = options;
|
|
4
|
-
|
|
4
|
+
if (!block) return;
|
|
5
|
+
|
|
6
|
+
// Avoid double init per block
|
|
7
|
+
if (block.dataset.marquee) {
|
|
8
|
+
if (block.dataset.sbiMarqueeInit === '1') return;
|
|
9
|
+
block.dataset.sbiMarqueeInit = '1';
|
|
10
|
+
|
|
11
|
+
const outer = block.querySelector(
|
|
12
|
+
'.sbi-owl-stage-outer, .owl-stage-outer'
|
|
13
|
+
);
|
|
14
|
+
const stage = block.querySelector('.sbi-owl-stage, .owl-stage');
|
|
15
|
+
if (!outer || !stage) return;
|
|
16
|
+
|
|
17
|
+
// --- Config ---
|
|
18
|
+
const PX_PER_SEC = 50; // adjust speed as needed
|
|
19
|
+
|
|
20
|
+
// --- Scoped CSS (only affects this block) ---
|
|
21
|
+
const uid = `sbi-marquee-${Math.random().toString(36).slice(2)}`;
|
|
22
|
+
block.setAttribute('data-sbi-marquee-id', uid);
|
|
23
|
+
|
|
24
|
+
const style = document.createElement('style');
|
|
25
|
+
style.textContent = `
|
|
26
|
+
[data-sbi-marquee-id="${uid}"] .sbi-owl-stage,
|
|
27
|
+
[data-sbi-marquee-id="${uid}"] .owl-stage {
|
|
28
|
+
transition: none !important;
|
|
29
|
+
animation: none !important;
|
|
30
|
+
will-change: transform;
|
|
31
|
+
}
|
|
32
|
+
[data-sbi-marquee-id="${uid}"] .owl-nav,
|
|
33
|
+
[data-sbi-marquee-id="${uid}"] .owl-dots {
|
|
34
|
+
display: none !important;
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
37
|
+
block.appendChild(style);
|
|
38
|
+
|
|
39
|
+
// --- Helpers ---
|
|
40
|
+
const nonClonedItems = () =>
|
|
41
|
+
Array.from(
|
|
42
|
+
stage.querySelectorAll(
|
|
43
|
+
'.sbi-owl-item:not(.cloned), .owl-item:not(.cloned)'
|
|
44
|
+
)
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
const getLoopWidth = () => {
|
|
48
|
+
const items = nonClonedItems();
|
|
49
|
+
if (!items.length)
|
|
50
|
+
return stage.scrollWidth / 2 || stage.scrollWidth || 0;
|
|
51
|
+
let w = 0;
|
|
52
|
+
for (const el of items) w += el.getBoundingClientRect().width;
|
|
53
|
+
return w;
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
// --- Animation state ---
|
|
57
|
+
let loopW = getLoopWidth();
|
|
58
|
+
let x = 0;
|
|
59
|
+
let last = performance.now();
|
|
60
|
+
let raf = null;
|
|
61
|
+
|
|
62
|
+
function tick(now) {
|
|
63
|
+
const dt = (now - last) / 1000;
|
|
64
|
+
last = now;
|
|
65
|
+
|
|
66
|
+
x -= PX_PER_SEC * dt;
|
|
67
|
+
|
|
68
|
+
// Wrap seamlessly after the width of the original (non-cloned) set
|
|
69
|
+
if (-x >= loopW) x += loopW;
|
|
70
|
+
|
|
71
|
+
stage.style.setProperty(
|
|
72
|
+
'transform',
|
|
73
|
+
`translate3d(${x}px,0,0)`,
|
|
74
|
+
'important'
|
|
75
|
+
);
|
|
76
|
+
raf = requestAnimationFrame(tick);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Resize-aware (e.g., responsive cols/images)
|
|
80
|
+
const ro = new ResizeObserver(() => {
|
|
81
|
+
loopW = getLoopWidth();
|
|
82
|
+
});
|
|
83
|
+
ro.observe(stage);
|
|
84
|
+
|
|
85
|
+
// Optional: pause on hover
|
|
86
|
+
outer.addEventListener('mouseenter', () => {
|
|
87
|
+
if (raf) cancelAnimationFrame(raf);
|
|
88
|
+
raf = null;
|
|
89
|
+
});
|
|
90
|
+
outer.addEventListener('mouseleave', () => {
|
|
91
|
+
if (!raf) {
|
|
92
|
+
last = performance.now();
|
|
93
|
+
raf = requestAnimationFrame(tick);
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
// Kick off
|
|
98
|
+
last = performance.now();
|
|
99
|
+
raf = requestAnimationFrame(tick);
|
|
100
|
+
|
|
101
|
+
// Optional cleanup handle if you ever need it later
|
|
102
|
+
block._sbiMarqueeDestroy = () => {
|
|
103
|
+
if (raf) cancelAnimationFrame(raf);
|
|
104
|
+
ro.disconnect();
|
|
105
|
+
style.remove();
|
|
106
|
+
stage.style.removeProperty('transform');
|
|
107
|
+
delete block.dataset.sbiMarqueeInit;
|
|
108
|
+
delete block._sbiMarqueeDestroy;
|
|
109
|
+
};
|
|
110
|
+
}
|
|
5
111
|
} catch (error) {
|
|
6
112
|
console.error(error);
|
|
7
113
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
{% set blockClassName = "
|
|
1
|
+
{% set blockClassName = "smash-balloon-social-media-v3" %}
|
|
2
2
|
{% set classNameEntryPoint = include('entry-points/entry-point-classes.twig', { fields: fields, block: block }, with_context = false) %}
|
|
3
3
|
{% set htmlEntryPoint = include('entry-points/entry-point-html.twig', { fields: fields, block: block, blockClassName, blockClassName }, with_context = false) %}
|
|
4
4
|
{% set dataAttributeEntryPoint = include('entry-points/entry-point-data-attribute.twig', { fields: fields, block: block }, with_context = false) %}
|
|
@@ -8,11 +8,9 @@
|
|
|
8
8
|
{% set sectionStyles = styleEntryPoint %}
|
|
9
9
|
|
|
10
10
|
{{previewEntryPoint}}
|
|
11
|
-
|
|
12
|
-
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" style="{{sectionStyles}}" data-assetkey="{{blockClassName}}">
|
|
11
|
+
<section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{block.className}} {{classNameEntryPoint}}" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" style="{{sectionStyles}}" data-assetkey="{{blockClassName}}" {% if fields.marquee %} data-marquee="true" {% endif %}>
|
|
13
12
|
{% if fields.social_media_type == 'instagram' %}
|
|
14
13
|
{{ function('do_shortcode', '[instagram-feed feed=' ~ fields.feed_id ~ ']') }}
|
|
15
14
|
{% endif %}
|
|
16
|
-
|
|
17
15
|
{{htmlEntryPoint}}
|
|
18
16
|
</section>
|