@hortonstudio/main 1.1.12 → 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.
- package/.claude/settings.local.json +2 -1
- package/animations/hero.js +8 -60
- package/package.json +1 -1
- package/styles.css +6 -0
- package/test-cdn.html +0 -29
package/animations/hero.js
CHANGED
@@ -244,38 +244,6 @@ export async function init() {
|
|
244
244
|
// Animation timeline
|
245
245
|
document.fonts.ready.then(() => {
|
246
246
|
|
247
|
-
// Helper function to extract span mappings and flatten HTML
|
248
|
-
function extractSpanMappings(element) {
|
249
|
-
const spanMappings = new Map();
|
250
|
-
const spans = element.querySelectorAll('span');
|
251
|
-
|
252
|
-
spans.forEach(span => {
|
253
|
-
const text = span.textContent.trim();
|
254
|
-
const classes = Array.from(span.classList);
|
255
|
-
if (text && classes.length > 0) {
|
256
|
-
spanMappings.set(text, classes);
|
257
|
-
}
|
258
|
-
|
259
|
-
// Replace span with its text content to flatten HTML
|
260
|
-
span.replaceWith(document.createTextNode(span.textContent));
|
261
|
-
});
|
262
|
-
|
263
|
-
return spanMappings;
|
264
|
-
}
|
265
|
-
|
266
|
-
// Helper function to apply span classes to matching words
|
267
|
-
function applySpanClasses(splitInstance, spanMappings) {
|
268
|
-
if (!splitInstance.words || spanMappings.size === 0) return;
|
269
|
-
|
270
|
-
splitInstance.words.forEach(wordElement => {
|
271
|
-
const wordText = wordElement.textContent.trim();
|
272
|
-
if (spanMappings.has(wordText)) {
|
273
|
-
const classes = spanMappings.get(wordText);
|
274
|
-
wordElement.classList.add(...classes);
|
275
|
-
}
|
276
|
-
});
|
277
|
-
}
|
278
|
-
|
279
247
|
// Split text setup (after fonts are loaded)
|
280
248
|
headingSplits = [];
|
281
249
|
|
@@ -284,9 +252,6 @@ export async function init() {
|
|
284
252
|
const textElement = heading[index];
|
285
253
|
const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
|
286
254
|
|
287
|
-
// Extract span mappings before splitting
|
288
|
-
const spanMappings = extractSpanMappings(textElement);
|
289
|
-
|
290
255
|
let splitConfig = {};
|
291
256
|
let elementsClass = '';
|
292
257
|
|
@@ -294,25 +259,21 @@ export async function init() {
|
|
294
259
|
splitConfig = {
|
295
260
|
type: "words,chars",
|
296
261
|
mask: "chars",
|
297
|
-
charsClass: "char"
|
298
|
-
reduceWhiteSpace: false
|
262
|
+
charsClass: "char"
|
299
263
|
};
|
300
264
|
elementsClass = 'chars';
|
301
265
|
} else if (splitType === 'line') {
|
302
266
|
splitConfig = {
|
303
|
-
type: "lines
|
267
|
+
type: "lines",
|
304
268
|
mask: "lines",
|
305
|
-
linesClass: "line"
|
306
|
-
wordsClass: "word",
|
307
|
-
reduceWhiteSpace: false
|
269
|
+
linesClass: "line"
|
308
270
|
};
|
309
271
|
elementsClass = 'lines';
|
310
272
|
} else {
|
311
273
|
splitConfig = {
|
312
274
|
type: "words",
|
313
275
|
mask: "words",
|
314
|
-
wordsClass: "word"
|
315
|
-
reduceWhiteSpace: false
|
276
|
+
wordsClass: "word"
|
316
277
|
};
|
317
278
|
elementsClass = 'words';
|
318
279
|
}
|
@@ -321,9 +282,6 @@ export async function init() {
|
|
321
282
|
split.elementsClass = elementsClass;
|
322
283
|
headingSplits.push(split);
|
323
284
|
|
324
|
-
// Apply span classes to matching words
|
325
|
-
applySpanClasses(split, spanMappings);
|
326
|
-
|
327
285
|
gsap.set(split[elementsClass], { yPercent: config.headingSplit.yPercent });
|
328
286
|
gsap.set(textElement, { autoAlpha: 1 });
|
329
287
|
});
|
@@ -335,9 +293,6 @@ export async function init() {
|
|
335
293
|
const textElement = subheading[index];
|
336
294
|
const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
|
337
295
|
|
338
|
-
// Extract span mappings before splitting
|
339
|
-
const spanMappings = extractSpanMappings(textElement);
|
340
|
-
|
341
296
|
let splitConfig = {};
|
342
297
|
let elementsClass = '';
|
343
298
|
|
@@ -345,25 +300,21 @@ export async function init() {
|
|
345
300
|
splitConfig = {
|
346
301
|
type: "words,chars",
|
347
302
|
mask: "chars",
|
348
|
-
charsClass: "char"
|
349
|
-
reduceWhiteSpace: false
|
303
|
+
charsClass: "char"
|
350
304
|
};
|
351
305
|
elementsClass = 'chars';
|
352
306
|
} else if (splitType === 'line') {
|
353
307
|
splitConfig = {
|
354
|
-
type: "lines
|
308
|
+
type: "lines",
|
355
309
|
mask: "lines",
|
356
|
-
linesClass: "line"
|
357
|
-
wordsClass: "word",
|
358
|
-
reduceWhiteSpace: false
|
310
|
+
linesClass: "line"
|
359
311
|
};
|
360
312
|
elementsClass = 'lines';
|
361
313
|
} else {
|
362
314
|
splitConfig = {
|
363
315
|
type: "words",
|
364
316
|
mask: "words",
|
365
|
-
wordsClass: "word"
|
366
|
-
reduceWhiteSpace: false
|
317
|
+
wordsClass: "word"
|
367
318
|
};
|
368
319
|
elementsClass = 'words';
|
369
320
|
}
|
@@ -372,9 +323,6 @@ export async function init() {
|
|
372
323
|
split.elementsClass = elementsClass;
|
373
324
|
subheadingSplits.push(split);
|
374
325
|
|
375
|
-
// Apply span classes to matching words
|
376
|
-
applySpanClasses(split, spanMappings);
|
377
|
-
|
378
326
|
gsap.set(split[elementsClass], { yPercent: config.subheadingSplit.yPercent });
|
379
327
|
gsap.set(textElement, { autoAlpha: 1 });
|
380
328
|
});
|
package/package.json
CHANGED
package/styles.css
CHANGED
@@ -10,6 +10,12 @@ body .transition {display: block}
|
|
10
10
|
padding-inline: .1em;
|
11
11
|
margin-inline: -.1em;
|
12
12
|
}
|
13
|
+
|
14
|
+
/* safari line detection fix */
|
15
|
+
[data-hs-hero="heading"] {
|
16
|
+
contain: layout style;
|
17
|
+
}
|
18
|
+
|
13
19
|
/* scroll cleanliness */
|
14
20
|
html, body {
|
15
21
|
overscroll-behavior: none;
|
package/test-cdn.html
DELETED
@@ -1,29 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html>
|
3
|
-
<head>
|
4
|
-
<title>CDN Import Test</title>
|
5
|
-
</head>
|
6
|
-
<body>
|
7
|
-
<h1>Testing CDN Module Loading</h1>
|
8
|
-
<div data-hs-hero="heading">Hero Test Element</div>
|
9
|
-
|
10
|
-
<script>
|
11
|
-
// Test both local and CDN scenarios
|
12
|
-
console.log('Testing module loading...');
|
13
|
-
|
14
|
-
// Monitor console for debug messages
|
15
|
-
window.addEventListener('load', () => {
|
16
|
-
setTimeout(() => {
|
17
|
-
if (window.hsmain) {
|
18
|
-
console.log('API Status:', window.hsmain.status());
|
19
|
-
} else {
|
20
|
-
console.error('hsmain API not loaded');
|
21
|
-
}
|
22
|
-
}, 2000);
|
23
|
-
});
|
24
|
-
</script>
|
25
|
-
|
26
|
-
<!-- Test with local file -->
|
27
|
-
<script type="module" src="./index.js" data-hs-main data-hs-anim-hero></script>
|
28
|
-
</body>
|
29
|
-
</html>
|