@fynd-design-engineering/fynd-one-v2 3.4.63 → 3.4.64
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/dist/accordians/dropdown.js +1 -95
- package/dist/accordians/index.js +1 -391
- package/dist/cms-listing/index.js +1 -24
- package/dist/filters/clear-search.js +1 -32
- package/dist/filters/konnect.js +1 -165
- package/dist/filters/show-count.js +1 -66
- package/dist/form/country-dropdown.css +1 -160
- package/dist/form/cs-gated-redirection.js +1 -40
- package/dist/form/download-file.js +1 -70
- package/dist/form/validation.css +1 -1019
- package/dist/form/validation.js +7 -10611
- package/dist/global/anchor-scroll.js +1 -174
- package/dist/global/auth.js +1 -87
- package/dist/global/chat.js +1 -185
- package/dist/global/console-links.js +1 -89
- package/dist/global/contact-popup.js +2 -83
- package/dist/global/css/in-page-embed.css +1 -1043
- package/dist/global/css/in-project-settings.css +1 -173
- package/dist/global/css/temp.css +1 -89
- package/dist/global/custom-bg-video.js +1 -40
- package/dist/global/footer-accordion.js +1 -44
- package/dist/global/lazy-loader.js +1 -135
- package/dist/global/loader.js +2 -166
- package/dist/global/media-card.js +1 -166
- package/dist/global/miscellaneous.js +1 -136
- package/dist/global/number-count.js +1 -82
- package/dist/global/popup-video.js +1 -276
- package/dist/global/progressive-scroll.js +1 -222
- package/dist/global/responsive-video.js +1 -321
- package/dist/global/style.css +1 -1065
- package/dist/global/video-card.js +1 -50
- package/dist/hacktimus/2025.js +1 -177
- package/dist/hacktimus/styles.css +1 -91
- package/dist/home/index.js +1 -17
- package/dist/marquee/index.js +1 -3104
- package/dist/marquee/marquee-swiper.js +1 -36
- package/dist/navigation/announcement/index.js +1 -5169
- package/dist/navigation/context-menu/index.js +1 -31
- package/dist/navigation/desktop/index.js +1 -4603
- package/dist/navigation/initialization.js +1 -602
- package/dist/navigation/main.js +1 -4911
- package/dist/navigation/mobile/index.js +1 -286
- package/dist/navigation/scroll/index.js +1 -62
- package/dist/navigation/secondary-navigation/index.js +1 -437
- package/dist/navigation/style.css +1 -154
- package/dist/navigation/temp.css +0 -2
- package/dist/navigation/theme.css +1 -69
- package/dist/navigation-v2/index.js +1 -4990
- package/dist/navigation-v2/styles.css +1 -233
- package/dist/others/feature-detail.js +1 -75
- package/dist/others/geolocation.js +1 -50
- package/dist/others/hero-aniamtion.js +1 -53
- package/dist/others/hero-india-animation-2.js +1 -70
- package/dist/others/hero-india-animation.js +1 -93
- package/dist/others/home-solution-tab.js +1 -115
- package/dist/others/storefront-chat/index.js +1 -487
- package/dist/others/storefront-chat/styles.css +1 -107
- package/dist/playbook-2026/hero-reveal.js +1 -47
- package/dist/playbook-2026/index.js +1 -536
- package/dist/playbook-2026/styles.css +1 -110
- package/dist/posthog-and-ga/attributes.js +1 -190
- package/dist/posthog-and-ga/main.js +1 -528
- package/dist/progressive-scroll/index.js +1 -147
- package/dist/quick-fix/reload.js +1 -22
- package/dist/seo/schema.js +1 -465
- package/dist/slider/freescroll.js +1 -34
- package/dist/test/sample.js +1 -15
- package/dist/testimonials/index.js +1 -2654
- package/dist/timeline/index.js +1 -160
- package/dist/timeline/style.css +1 -42
- package/dist/tracking/custom-id.js +1 -75
- package/dist/tracking/fill-form-fields.js +1 -238
- package/dist/tracking/form-tracker.js +1 -146
- package/dist/tracking/page-categories.js +1 -20
- package/dist/tracking/user-journey.js +1 -839
- package/dist/tracking/utm-links.js +1 -194
- package/dist/utils/sample.js +1 -17
- package/dist/validations/localhost.js +1 -221
- package/package.json +1 -1
|
@@ -1,115 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
(() => {
|
|
3
|
-
// bin/live-reload.js
|
|
4
|
-
if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
|
|
5
|
-
new EventSource(`${"http://localhost:3000"}/esbuild`).addEventListener(
|
|
6
|
-
"change",
|
|
7
|
-
() => location.reload()
|
|
8
|
-
);
|
|
9
|
-
} else {
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
// src/others/home-solution-tab.ts
|
|
13
|
-
var gsap = window.gsap;
|
|
14
|
-
var ATTR_CARD = "tab-card-block";
|
|
15
|
-
var ATTR_HOVER_STATE = "tab-card-hover";
|
|
16
|
-
var ATTR_IMG = "tab-card-hover-image";
|
|
17
|
-
var ATTR_OVERLAY = "tab-card-hover-overlay";
|
|
18
|
-
var ATTR_TABLINK = "fynd-home-tablink";
|
|
19
|
-
var ATTR_TABLINK_ACTIVE = "fynd-home-tablink-active";
|
|
20
|
-
var ATTR_TABCONTENT = "fynd-home-tabcontent";
|
|
21
|
-
var ATTR_TABCONTENT_ACTIVE = "fynd-home-tabcontent-active";
|
|
22
|
-
function isHTMLElement(el) {
|
|
23
|
-
return el instanceof HTMLElement;
|
|
24
|
-
}
|
|
25
|
-
function qsa(root, selector) {
|
|
26
|
-
return Array.from(root.querySelectorAll(selector));
|
|
27
|
-
}
|
|
28
|
-
function getHoverState(card) {
|
|
29
|
-
return card.getAttribute(ATTR_HOVER_STATE) === "true" ? "true" : "false";
|
|
30
|
-
}
|
|
31
|
-
function setHoverState(card, v) {
|
|
32
|
-
card.setAttribute(ATTR_HOVER_STATE, v);
|
|
33
|
-
}
|
|
34
|
-
function getHoverTargets(card) {
|
|
35
|
-
return {
|
|
36
|
-
image: card.querySelector(`[${ATTR_IMG}]`),
|
|
37
|
-
overlay: card.querySelector(`[${ATTR_OVERLAY}]`)
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
function setInitialStates(card) {
|
|
41
|
-
if (!card.hasAttribute(ATTR_HOVER_STATE)) {
|
|
42
|
-
setHoverState(card, "false");
|
|
43
|
-
}
|
|
44
|
-
const { image, overlay } = getHoverTargets(card);
|
|
45
|
-
const targets = [image, overlay].filter(isHTMLElement);
|
|
46
|
-
if (targets.length) {
|
|
47
|
-
gsap.set(targets, { opacity: 0 });
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
function solutionCardHoverIN(card) {
|
|
51
|
-
if (getHoverState(card) === "true") return;
|
|
52
|
-
setHoverState(card, "true");
|
|
53
|
-
const { image, overlay } = getHoverTargets(card);
|
|
54
|
-
const targets = [image, overlay].filter(isHTMLElement);
|
|
55
|
-
if (!targets.length) return;
|
|
56
|
-
gsap.killTweensOf(targets);
|
|
57
|
-
gsap.to(targets, {
|
|
58
|
-
opacity: 1,
|
|
59
|
-
duration: 0.35,
|
|
60
|
-
ease: "power2.out",
|
|
61
|
-
overwrite: "auto"
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
function solutionCardHoverOUT(card) {
|
|
65
|
-
if (getHoverState(card) === "false") return;
|
|
66
|
-
setHoverState(card, "false");
|
|
67
|
-
const { image, overlay } = getHoverTargets(card);
|
|
68
|
-
const targets = [image, overlay].filter(isHTMLElement);
|
|
69
|
-
if (!targets.length) return;
|
|
70
|
-
gsap.killTweensOf(targets);
|
|
71
|
-
gsap.to(targets, {
|
|
72
|
-
opacity: 0,
|
|
73
|
-
duration: 0.25,
|
|
74
|
-
ease: "power2.out",
|
|
75
|
-
overwrite: "auto"
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
function setSolutionTab(activeValue) {
|
|
79
|
-
const tabLinks = qsa(document, `[${ATTR_TABLINK}]`);
|
|
80
|
-
const tabContents = qsa(document, `[${ATTR_TABCONTENT}]`);
|
|
81
|
-
tabLinks.forEach((el) => {
|
|
82
|
-
const value = el.getAttribute(ATTR_TABLINK);
|
|
83
|
-
const isActive = value === activeValue ? "true" : "false";
|
|
84
|
-
el.setAttribute(ATTR_TABLINK_ACTIVE, isActive);
|
|
85
|
-
});
|
|
86
|
-
tabContents.forEach((el) => {
|
|
87
|
-
const value = el.getAttribute(ATTR_TABCONTENT);
|
|
88
|
-
const isActive = value === activeValue ? "true" : "false";
|
|
89
|
-
el.setAttribute(ATTR_TABCONTENT_ACTIVE, isActive);
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
document.addEventListener("DOMContentLoaded", () => {
|
|
93
|
-
const cards = qsa(document, `[${ATTR_CARD}]`);
|
|
94
|
-
cards.forEach((card) => {
|
|
95
|
-
setInitialStates(card);
|
|
96
|
-
card.addEventListener("mouseenter", () => solutionCardHoverIN(card));
|
|
97
|
-
card.addEventListener("mouseleave", () => solutionCardHoverOUT(card));
|
|
98
|
-
card.addEventListener("focusin", () => solutionCardHoverIN(card));
|
|
99
|
-
card.addEventListener("focusout", () => solutionCardHoverOUT(card));
|
|
100
|
-
});
|
|
101
|
-
const tabLinks = qsa(document, `[${ATTR_TABLINK}]`);
|
|
102
|
-
if (tabLinks.length > 0) {
|
|
103
|
-
const firstValue = tabLinks[0].getAttribute(ATTR_TABLINK);
|
|
104
|
-
if (firstValue) {
|
|
105
|
-
setSolutionTab(firstValue);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
tabLinks.forEach((el) => {
|
|
109
|
-
const value = el.getAttribute(ATTR_TABLINK);
|
|
110
|
-
if (!value) return;
|
|
111
|
-
el.addEventListener("mouseenter", () => setSolutionTab(value));
|
|
112
|
-
});
|
|
113
|
-
});
|
|
114
|
-
})();
|
|
115
|
-
//# sourceMappingURL=home-solution-tab.js.map
|
|
1
|
+
"use strict";(()=>{var s=window.gsap,g="tab-card-block",u="tab-card-hover",L="tab-card-hover-image",b="tab-card-hover-overlay",r="fynd-home-tablink",H="fynd-home-tablink-active",f="fynd-home-tabcontent",y="fynd-home-tabcontent-active";function l(t){return t instanceof HTMLElement}function i(t,o){return Array.from(t.querySelectorAll(o))}function A(t){return t.getAttribute(u)==="true"?"true":"false"}function T(t,o){t.setAttribute(u,o)}function c(t){return{image:t.querySelector(`[${L}]`),overlay:t.querySelector(`[${b}]`)}}function M(t){t.hasAttribute(u)||T(t,"false");let{image:o,overlay:e}=c(t),n=[o,e].filter(l);n.length&&s.set(n,{opacity:0})}function m(t){if(A(t)==="true")return;T(t,"true");let{image:o,overlay:e}=c(t),n=[o,e].filter(l);n.length&&(s.killTweensOf(n),s.to(n,{opacity:1,duration:.35,ease:"power2.out",overwrite:"auto"}))}function v(t){if(A(t)==="false")return;T(t,"false");let{image:o,overlay:e}=c(t),n=[o,e].filter(l);n.length&&(s.killTweensOf(n),s.to(n,{opacity:0,duration:.25,ease:"power2.out",overwrite:"auto"}))}function E(t){let o=i(document,`[${r}]`),e=i(document,`[${f}]`);o.forEach(n=>{let a=n.getAttribute(r)===t?"true":"false";n.setAttribute(H,a)}),e.forEach(n=>{let a=n.getAttribute(f)===t?"true":"false";n.setAttribute(y,a)})}document.addEventListener("DOMContentLoaded",()=>{i(document,`[${g}]`).forEach(e=>{M(e),e.addEventListener("mouseenter",()=>m(e)),e.addEventListener("mouseleave",()=>v(e)),e.addEventListener("focusin",()=>m(e)),e.addEventListener("focusout",()=>v(e))});let o=i(document,`[${r}]`);if(o.length>0){let e=o[0].getAttribute(r);e&&E(e)}o.forEach(e=>{let n=e.getAttribute(r);n&&e.addEventListener("mouseenter",()=>E(n))})});})();
|
|
@@ -1,487 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
(() => {
|
|
3
|
-
// bin/live-reload.js
|
|
4
|
-
if (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") {
|
|
5
|
-
new EventSource(`${"http://localhost:3000"}/esbuild`).addEventListener(
|
|
6
|
-
"change",
|
|
7
|
-
() => location.reload()
|
|
8
|
-
);
|
|
9
|
-
} else {
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
// src/others/storefront-chat/placeholder-rotator.ts
|
|
13
|
-
var gsap = window.gsap;
|
|
14
|
-
var PlaceholderRotator = class {
|
|
15
|
-
constructor(slotId, inputSelector, config) {
|
|
16
|
-
this.timeline = null;
|
|
17
|
-
this.isUserInteracting = false;
|
|
18
|
-
this.placeholderSlot = document.getElementById(slotId);
|
|
19
|
-
this.inputElement = document.querySelector(inputSelector);
|
|
20
|
-
this.config = {
|
|
21
|
-
placeholders: [
|
|
22
|
-
"Sports balls for professional athletes",
|
|
23
|
-
"Soft, durable shoes for active kids",
|
|
24
|
-
"Easy-to-wear sarees for working women",
|
|
25
|
-
"Organic skincare for sensitive skin",
|
|
26
|
-
"Budget gaming accessories for college students",
|
|
27
|
-
"Handmade candles for home decor lovers",
|
|
28
|
-
"Eco-friendly lunch boxes for school children",
|
|
29
|
-
"Minimalist watches for young professionals",
|
|
30
|
-
"Custom pet treats for health-conscious dog owners",
|
|
31
|
-
"Affordable gym wear for beginners",
|
|
32
|
-
"Premium tea blends for wellness enthusiasts",
|
|
33
|
-
"Stylish laptop bags for remote workers",
|
|
34
|
-
"Natural hair oils for curly hair types",
|
|
35
|
-
"Fun stationery kits for creative teens",
|
|
36
|
-
"Compact travel gear for solo backpackers"
|
|
37
|
-
],
|
|
38
|
-
fadeDuration: 0.35,
|
|
39
|
-
holdDuration: 3,
|
|
40
|
-
...config
|
|
41
|
-
};
|
|
42
|
-
this.validateSetup();
|
|
43
|
-
this.attachEventListeners();
|
|
44
|
-
}
|
|
45
|
-
validateSetup() {
|
|
46
|
-
if (!this.placeholderSlot) {
|
|
47
|
-
console.error('[fynd-chat] Placeholder rotator: Div with id "placeholderText" not found');
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
if (!this.inputElement) {
|
|
51
|
-
console.error("[fynd-chat] Placeholder rotator: Input element not found");
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
if (!gsap) {
|
|
55
|
-
console.error("[fynd-chat] Placeholder rotator: GSAP library not loaded");
|
|
56
|
-
return;
|
|
57
|
-
}
|
|
58
|
-
if (this.config.placeholders.length === 0) {
|
|
59
|
-
console.error("[fynd-chat] Placeholder rotator: No placeholders provided");
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
attachEventListeners() {
|
|
64
|
-
if (!this.inputElement) return;
|
|
65
|
-
this.inputElement.addEventListener("focus", () => {
|
|
66
|
-
this.isUserInteracting = true;
|
|
67
|
-
this.pauseAnimation();
|
|
68
|
-
});
|
|
69
|
-
this.inputElement.addEventListener("input", () => {
|
|
70
|
-
this.isUserInteracting = true;
|
|
71
|
-
this.pauseAnimation();
|
|
72
|
-
});
|
|
73
|
-
this.inputElement.addEventListener("blur", () => {
|
|
74
|
-
if (this.inputElement && this.inputElement.value.trim() === "") {
|
|
75
|
-
this.isUserInteracting = false;
|
|
76
|
-
this.resumeAnimation();
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
pauseAnimation() {
|
|
81
|
-
if (this.timeline) {
|
|
82
|
-
this.timeline.pause();
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
resumeAnimation() {
|
|
86
|
-
if (this.timeline) {
|
|
87
|
-
this.timeline.play();
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
// Create a placeholder element (like makeChromaHeading)
|
|
91
|
-
makePlaceholderElement(text) {
|
|
92
|
-
const div = document.createElement("div");
|
|
93
|
-
div.className = "chroma-text";
|
|
94
|
-
div.setAttribute("data-animate", "false");
|
|
95
|
-
div.textContent = text;
|
|
96
|
-
div.style.opacity = "0";
|
|
97
|
-
return div;
|
|
98
|
-
}
|
|
99
|
-
start() {
|
|
100
|
-
if (!this.placeholderSlot || !gsap) {
|
|
101
|
-
console.warn("[fynd-chat] Placeholder rotator: Cannot start - missing dependencies");
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
this.startAnimationLoop();
|
|
105
|
-
}
|
|
106
|
-
startAnimationLoop() {
|
|
107
|
-
if (!this.placeholderSlot) return;
|
|
108
|
-
const slide = (text) => {
|
|
109
|
-
const el = this.makePlaceholderElement(text);
|
|
110
|
-
const t = gsap.timeline({ defaults: { ease: "power1.out" } });
|
|
111
|
-
t.add(() => {
|
|
112
|
-
if (this.placeholderSlot) {
|
|
113
|
-
this.placeholderSlot.appendChild(el);
|
|
114
|
-
el.setAttribute("data-animate", "true");
|
|
115
|
-
}
|
|
116
|
-
});
|
|
117
|
-
t.to(
|
|
118
|
-
el,
|
|
119
|
-
{
|
|
120
|
-
duration: this.config.fadeDuration,
|
|
121
|
-
autoAlpha: 1
|
|
122
|
-
// opacity + visibility
|
|
123
|
-
}
|
|
124
|
-
);
|
|
125
|
-
t.to(el, {
|
|
126
|
-
duration: this.config.holdDuration,
|
|
127
|
-
autoAlpha: 1
|
|
128
|
-
});
|
|
129
|
-
t.to(el, {
|
|
130
|
-
duration: this.config.fadeDuration,
|
|
131
|
-
autoAlpha: 0
|
|
132
|
-
});
|
|
133
|
-
t.add(() => {
|
|
134
|
-
el.remove();
|
|
135
|
-
});
|
|
136
|
-
return t;
|
|
137
|
-
};
|
|
138
|
-
this.timeline = gsap.timeline({ repeat: -1 });
|
|
139
|
-
this.config.placeholders.forEach((text) => {
|
|
140
|
-
this.timeline.add(slide(text));
|
|
141
|
-
});
|
|
142
|
-
}
|
|
143
|
-
destroy() {
|
|
144
|
-
if (this.timeline) {
|
|
145
|
-
this.timeline.kill();
|
|
146
|
-
this.timeline = null;
|
|
147
|
-
}
|
|
148
|
-
if (this.inputElement) {
|
|
149
|
-
this.inputElement.removeEventListener("input", () => {
|
|
150
|
-
});
|
|
151
|
-
this.inputElement.removeEventListener("blur", () => {
|
|
152
|
-
});
|
|
153
|
-
this.inputElement.removeEventListener("focus", () => {
|
|
154
|
-
});
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
function initPlaceholderRotator(slotId = "placeholderText", inputSelector = '[fynd-storefront-chat="input"]', config) {
|
|
159
|
-
const rotator = new PlaceholderRotator(slotId, inputSelector, config);
|
|
160
|
-
rotator.start();
|
|
161
|
-
return rotator;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
// src/others/storefront-chat/index.ts
|
|
165
|
-
document.addEventListener("DOMContentLoaded", () => {
|
|
166
|
-
const MOBILE_BREAKPOINT = 767;
|
|
167
|
-
const allChatElements = document.querySelectorAll("[fynd-storefront-chat]");
|
|
168
|
-
if (window.innerWidth <= MOBILE_BREAKPOINT) {
|
|
169
|
-
console.log("[fynd-chat] Chat disabled on mobile devices (width <= 767px)");
|
|
170
|
-
return;
|
|
171
|
-
}
|
|
172
|
-
window.addEventListener("resize", () => {
|
|
173
|
-
if (window.innerWidth <= MOBILE_BREAKPOINT) {
|
|
174
|
-
allChatElements.forEach((el) => {
|
|
175
|
-
el.style.display = "none";
|
|
176
|
-
});
|
|
177
|
-
} else {
|
|
178
|
-
allChatElements.forEach((el) => {
|
|
179
|
-
el.style.display = "";
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
|
-
});
|
|
183
|
-
const dynamicInput = document.querySelector('[fynd-storefront-chat="input"]');
|
|
184
|
-
const measureSpan = document.querySelector('[fynd-storefront-chat="input-ghost"]');
|
|
185
|
-
const chatContainer = document.querySelector('[fynd-storefront-chat="input-container"]');
|
|
186
|
-
const chatButton = document.querySelector('[fynd-storefront-chat="button"]');
|
|
187
|
-
const chatWindow = document.querySelector('[fynd-storefront-chat="window"]');
|
|
188
|
-
const chatOverlay = document.querySelector('[fynd-storefront-chat="window-overlay"]');
|
|
189
|
-
const chatBlurGradient = document.querySelector('[fynd-storefront-chat="blur-gradient"]');
|
|
190
|
-
const chatWrapper = document.querySelector('[fynd-storefront-chat="wrapper"]');
|
|
191
|
-
const dynamicInputInitialWidth = "450px";
|
|
192
|
-
const dynamicInputExpandedWidth = "550px";
|
|
193
|
-
if (!dynamicInput || !measureSpan || !chatContainer || !chatButton || !chatWindow || !chatOverlay || !chatBlurGradient) {
|
|
194
|
-
console.warn("[fynd-chat] Missing required DOM elements:", {
|
|
195
|
-
dynamicInput: !!dynamicInput,
|
|
196
|
-
measureSpan: !!measureSpan,
|
|
197
|
-
chatContainer: !!chatContainer,
|
|
198
|
-
chatButton: !!chatButton,
|
|
199
|
-
chatWindow: !!chatWindow,
|
|
200
|
-
chatOverlay: !!chatOverlay
|
|
201
|
-
});
|
|
202
|
-
return;
|
|
203
|
-
}
|
|
204
|
-
chatWindow.style.opacity = "0";
|
|
205
|
-
chatWindow.style.transform = "scale(0)";
|
|
206
|
-
chatWindow.style.transformOrigin = "bottom center";
|
|
207
|
-
chatOverlay.style.opacity = "0";
|
|
208
|
-
chatOverlay.style.pointerEvents = "none";
|
|
209
|
-
chatOverlay.style.display = "none";
|
|
210
|
-
let isHovering = false;
|
|
211
|
-
let isFocused = false;
|
|
212
|
-
function updateState() {
|
|
213
|
-
if (isHovering || isFocused) {
|
|
214
|
-
activateInput();
|
|
215
|
-
} else {
|
|
216
|
-
deActivateInput();
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
function activateInput() {
|
|
220
|
-
if (!dynamicInput || !chatButton) {
|
|
221
|
-
console.warn("[fynd-chat] activateInput: missing element(s)");
|
|
222
|
-
return;
|
|
223
|
-
}
|
|
224
|
-
dynamicInput.setAttribute("fynd-storefront-chat-active", "true");
|
|
225
|
-
chatButton.setAttribute("fynd-storefront-chat-active", "true");
|
|
226
|
-
}
|
|
227
|
-
function deActivateInput() {
|
|
228
|
-
if (!dynamicInput || !chatButton) {
|
|
229
|
-
console.warn("[fynd-chat] deActivateInput: missing element(s)");
|
|
230
|
-
return;
|
|
231
|
-
}
|
|
232
|
-
dynamicInput.setAttribute("fynd-storefront-chat-active", "false");
|
|
233
|
-
chatButton.setAttribute("fynd-storefront-chat-active", "false");
|
|
234
|
-
}
|
|
235
|
-
function showKailyWindow() {
|
|
236
|
-
const gsapLib = window.gsap;
|
|
237
|
-
if (!gsapLib) {
|
|
238
|
-
console.warn("[fynd-chat] showKailyWindow: GSAP not loaded");
|
|
239
|
-
return;
|
|
240
|
-
}
|
|
241
|
-
if (!chatOverlay || !chatWindow) {
|
|
242
|
-
console.warn("[fynd-chat] showKailyWindow: missing overlay/window element(s)");
|
|
243
|
-
return;
|
|
244
|
-
}
|
|
245
|
-
chatOverlay.style.pointerEvents = "auto";
|
|
246
|
-
chatOverlay.style.display = "block";
|
|
247
|
-
gsapLib.to(chatWindow, {
|
|
248
|
-
duration: 0.3,
|
|
249
|
-
scale: 1,
|
|
250
|
-
opacity: 1,
|
|
251
|
-
ease: "power2.out"
|
|
252
|
-
});
|
|
253
|
-
gsapLib.to(chatOverlay, {
|
|
254
|
-
duration: 0.3,
|
|
255
|
-
opacity: 1,
|
|
256
|
-
ease: "power2.out"
|
|
257
|
-
});
|
|
258
|
-
}
|
|
259
|
-
function loopBlurGradient() {
|
|
260
|
-
const gsapLib = window.gsap;
|
|
261
|
-
if (!gsapLib || !chatBlurGradient) {
|
|
262
|
-
console.warn("[fynd-chat] loopBlurGradient: GSAP or chatBlurGradient missing");
|
|
263
|
-
return;
|
|
264
|
-
}
|
|
265
|
-
gsapLib.to(chatBlurGradient, {
|
|
266
|
-
opacity: 1,
|
|
267
|
-
x: 2,
|
|
268
|
-
y: 2,
|
|
269
|
-
scale: 0.95,
|
|
270
|
-
duration: 3,
|
|
271
|
-
ease: "sine.inOut",
|
|
272
|
-
repeat: -1,
|
|
273
|
-
yoyo: true
|
|
274
|
-
});
|
|
275
|
-
}
|
|
276
|
-
function hideKailyWindow() {
|
|
277
|
-
const gsapLib = window.gsap;
|
|
278
|
-
if (!gsapLib) {
|
|
279
|
-
console.warn("[fynd-chat] hideKailyWindow: GSAP not loaded");
|
|
280
|
-
return;
|
|
281
|
-
}
|
|
282
|
-
if (!chatOverlay || !chatWindow) {
|
|
283
|
-
console.warn("[fynd-chat] hideKailyWindow: missing overlay/window element(s)");
|
|
284
|
-
return;
|
|
285
|
-
}
|
|
286
|
-
gsapLib.to(chatOverlay, {
|
|
287
|
-
duration: 0.2,
|
|
288
|
-
opacity: 0,
|
|
289
|
-
ease: "power2.out",
|
|
290
|
-
onComplete: () => {
|
|
291
|
-
if (!chatOverlay) return;
|
|
292
|
-
chatOverlay.style.pointerEvents = "none";
|
|
293
|
-
chatOverlay.style.display = "none";
|
|
294
|
-
}
|
|
295
|
-
});
|
|
296
|
-
gsapLib.to(chatWindow, {
|
|
297
|
-
duration: 0.2,
|
|
298
|
-
scale: 0,
|
|
299
|
-
opacity: 0,
|
|
300
|
-
ease: "power2.in"
|
|
301
|
-
});
|
|
302
|
-
}
|
|
303
|
-
chatContainer.addEventListener("mouseenter", () => {
|
|
304
|
-
isHovering = true;
|
|
305
|
-
updateState();
|
|
306
|
-
});
|
|
307
|
-
chatContainer.addEventListener("mouseleave", () => {
|
|
308
|
-
isHovering = false;
|
|
309
|
-
updateState();
|
|
310
|
-
});
|
|
311
|
-
dynamicInput.addEventListener("focus", () => {
|
|
312
|
-
isFocused = true;
|
|
313
|
-
updateState();
|
|
314
|
-
const gsapLib = window.gsap;
|
|
315
|
-
const placeholderDiv = document.getElementById("placeholderText");
|
|
316
|
-
if (placeholderDiv) {
|
|
317
|
-
if (gsapLib) {
|
|
318
|
-
gsapLib.to(placeholderDiv, { duration: 0.2, opacity: 0, ease: "power2.out" });
|
|
319
|
-
} else {
|
|
320
|
-
placeholderDiv.style.opacity = "0";
|
|
321
|
-
}
|
|
322
|
-
}
|
|
323
|
-
if (gsapLib && dynamicInput) {
|
|
324
|
-
gsapLib.to(dynamicInput, { duration: 0.1, width: dynamicInputExpandedWidth, ease: "power2.out" });
|
|
325
|
-
} else if (dynamicInput) {
|
|
326
|
-
dynamicInput.style.width = dynamicInputExpandedWidth;
|
|
327
|
-
}
|
|
328
|
-
});
|
|
329
|
-
dynamicInput.style.width = dynamicInputInitialWidth;
|
|
330
|
-
dynamicInput.addEventListener("blur", () => {
|
|
331
|
-
isFocused = false;
|
|
332
|
-
updateState();
|
|
333
|
-
const gsapLib = window.gsap;
|
|
334
|
-
const placeholderDiv = document.getElementById("placeholderText");
|
|
335
|
-
if (dynamicInput.value.trim() === "") {
|
|
336
|
-
if (placeholderDiv) {
|
|
337
|
-
if (gsapLib) {
|
|
338
|
-
gsapLib.to(placeholderDiv, { duration: 0.2, opacity: 1, ease: "power2.in" });
|
|
339
|
-
} else {
|
|
340
|
-
placeholderDiv.style.opacity = "1";
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
if (gsapLib && dynamicInput) {
|
|
344
|
-
gsapLib.to(dynamicInput, { duration: 0.1, width: dynamicInputInitialWidth, ease: "power2.out" });
|
|
345
|
-
} else if (dynamicInput) {
|
|
346
|
-
dynamicInput.style.width = dynamicInputInitialWidth;
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
});
|
|
350
|
-
dynamicInput.addEventListener("input", () => {
|
|
351
|
-
const gsapLib = window.gsap;
|
|
352
|
-
const placeholderDiv = document.getElementById("placeholderText");
|
|
353
|
-
const isEmpty = dynamicInput.value.trim() === "";
|
|
354
|
-
if (placeholderDiv) {
|
|
355
|
-
if (isEmpty) {
|
|
356
|
-
if (gsapLib) {
|
|
357
|
-
gsapLib.to(placeholderDiv, { duration: 0.2, opacity: 1, ease: "power2.in" });
|
|
358
|
-
} else {
|
|
359
|
-
placeholderDiv.style.opacity = "1";
|
|
360
|
-
}
|
|
361
|
-
} else {
|
|
362
|
-
if (gsapLib) {
|
|
363
|
-
gsapLib.to(placeholderDiv, { duration: 0.2, opacity: 0, ease: "power2.out" });
|
|
364
|
-
} else {
|
|
365
|
-
placeholderDiv.style.opacity = "0";
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
if (gsapLib && dynamicInput) {
|
|
370
|
-
const targetWidth = isEmpty ? dynamicInputInitialWidth : dynamicInputExpandedWidth;
|
|
371
|
-
gsapLib.to(dynamicInput, { duration: 0.3, width: targetWidth, ease: "power2.out" });
|
|
372
|
-
} else if (dynamicInput) {
|
|
373
|
-
dynamicInput.style.width = isEmpty ? dynamicInputInitialWidth : dynamicInputExpandedWidth;
|
|
374
|
-
}
|
|
375
|
-
});
|
|
376
|
-
document.addEventListener("keydown", (event) => {
|
|
377
|
-
const isMac = navigator.platform.toLowerCase().includes("mac");
|
|
378
|
-
const pressedE = event.key.toLowerCase() === "e";
|
|
379
|
-
if (pressedE && (isMac && event.metaKey || !isMac && event.ctrlKey)) {
|
|
380
|
-
event.preventDefault();
|
|
381
|
-
dynamicInput.focus();
|
|
382
|
-
isFocused = true;
|
|
383
|
-
updateState();
|
|
384
|
-
}
|
|
385
|
-
});
|
|
386
|
-
function sendMessage() {
|
|
387
|
-
if (!dynamicInput) {
|
|
388
|
-
console.warn("[fynd-chat] sendMessage: input element missing");
|
|
389
|
-
return;
|
|
390
|
-
}
|
|
391
|
-
const msg = dynamicInput.value.trim();
|
|
392
|
-
if (!msg) return;
|
|
393
|
-
try {
|
|
394
|
-
const storefront = window.storefront;
|
|
395
|
-
if (typeof storefront === "function") {
|
|
396
|
-
storefront("event", "sendUserMessage", { message: msg });
|
|
397
|
-
} else {
|
|
398
|
-
console.warn("[fynd-chat] storefront API not available");
|
|
399
|
-
}
|
|
400
|
-
} catch (err) {
|
|
401
|
-
console.error("[fynd-chat] Failed to send message:", err);
|
|
402
|
-
}
|
|
403
|
-
showKailyWindow();
|
|
404
|
-
dynamicInput.value = "";
|
|
405
|
-
dynamicInput.blur();
|
|
406
|
-
isFocused = false;
|
|
407
|
-
isHovering = false;
|
|
408
|
-
updateState();
|
|
409
|
-
}
|
|
410
|
-
chatButton.addEventListener("click", () => {
|
|
411
|
-
sendMessage();
|
|
412
|
-
});
|
|
413
|
-
dynamicInput.addEventListener("keydown", (event) => {
|
|
414
|
-
if (event.key === "Enter") {
|
|
415
|
-
event.preventDefault();
|
|
416
|
-
sendMessage();
|
|
417
|
-
}
|
|
418
|
-
});
|
|
419
|
-
chatOverlay.addEventListener("click", hideKailyWindow);
|
|
420
|
-
let isChatInputIn = true;
|
|
421
|
-
function ChatInputIN() {
|
|
422
|
-
const gsapLib = window.gsap;
|
|
423
|
-
if (!gsapLib || !chatContainer) {
|
|
424
|
-
console.warn("[fynd-chat] ChatInputIN: GSAP or chatContainer missing");
|
|
425
|
-
return;
|
|
426
|
-
}
|
|
427
|
-
gsapLib.to(chatContainer, {
|
|
428
|
-
duration: 0.3,
|
|
429
|
-
y: 0,
|
|
430
|
-
ease: "power2.out"
|
|
431
|
-
});
|
|
432
|
-
gsapLib.to(chatWrapper, {
|
|
433
|
-
duration: 0.3,
|
|
434
|
-
y: 0,
|
|
435
|
-
ease: "power2.out"
|
|
436
|
-
});
|
|
437
|
-
}
|
|
438
|
-
function chatinputOUT() {
|
|
439
|
-
const gsapLib = window.gsap;
|
|
440
|
-
if (!gsapLib || !chatContainer) {
|
|
441
|
-
console.warn("[fynd-chat] chatinputOUT: GSAP or chatContainer missing");
|
|
442
|
-
return;
|
|
443
|
-
}
|
|
444
|
-
gsapLib.to(chatContainer, {
|
|
445
|
-
duration: 0.5,
|
|
446
|
-
y: 100,
|
|
447
|
-
ease: "power2.out"
|
|
448
|
-
});
|
|
449
|
-
gsapLib.to(chatWrapper, {
|
|
450
|
-
duration: 0.1,
|
|
451
|
-
y: 100,
|
|
452
|
-
ease: "power2.out"
|
|
453
|
-
});
|
|
454
|
-
}
|
|
455
|
-
ChatInputIN();
|
|
456
|
-
const chatHideTrigger = document.querySelector("[fynd-chat-hide-trigger]");
|
|
457
|
-
if (chatHideTrigger) {
|
|
458
|
-
const observer = new IntersectionObserver(
|
|
459
|
-
(entries) => {
|
|
460
|
-
entries.forEach((entry) => {
|
|
461
|
-
const triggerIsVisible = entry.isIntersecting;
|
|
462
|
-
if (triggerIsVisible && isChatInputIn) {
|
|
463
|
-
chatinputOUT();
|
|
464
|
-
isChatInputIn = false;
|
|
465
|
-
} else if (!triggerIsVisible && !isChatInputIn) {
|
|
466
|
-
ChatInputIN();
|
|
467
|
-
isChatInputIn = true;
|
|
468
|
-
}
|
|
469
|
-
});
|
|
470
|
-
},
|
|
471
|
-
{
|
|
472
|
-
threshold: 0.1
|
|
473
|
-
}
|
|
474
|
-
);
|
|
475
|
-
observer.observe(chatHideTrigger);
|
|
476
|
-
} else {
|
|
477
|
-
console.warn("[fynd-chat] fynd-chat-hide-trigger element not found");
|
|
478
|
-
}
|
|
479
|
-
initPlaceholderRotator("placeholderText", '[fynd-storefront-chat="input"]', {
|
|
480
|
-
fadeDuration: 0.35,
|
|
481
|
-
holdDuration: 3
|
|
482
|
-
});
|
|
483
|
-
loopBlurGradient();
|
|
484
|
-
updateState();
|
|
485
|
-
});
|
|
486
|
-
})();
|
|
487
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
"use strict";(()=>{var w=window.gsap,E=class{constructor(r,t,a){this.timeline=null;this.isUserInteracting=!1;this.placeholderSlot=document.getElementById(r),this.inputElement=document.querySelector(t),this.config={placeholders:["Sports balls for professional athletes","Soft, durable shoes for active kids","Easy-to-wear sarees for working women","Organic skincare for sensitive skin","Budget gaming accessories for college students","Handmade candles for home decor lovers","Eco-friendly lunch boxes for school children","Minimalist watches for young professionals","Custom pet treats for health-conscious dog owners","Affordable gym wear for beginners","Premium tea blends for wellness enthusiasts","Stylish laptop bags for remote workers","Natural hair oils for curly hair types","Fun stationery kits for creative teens","Compact travel gear for solo backpackers"],fadeDuration:.35,holdDuration:3,...a},this.validateSetup(),this.attachEventListeners()}validateSetup(){if(!this.placeholderSlot){console.error('[fynd-chat] Placeholder rotator: Div with id "placeholderText" not found');return}if(!this.inputElement){console.error("[fynd-chat] Placeholder rotator: Input element not found");return}if(!w){console.error("[fynd-chat] Placeholder rotator: GSAP library not loaded");return}if(this.config.placeholders.length===0){console.error("[fynd-chat] Placeholder rotator: No placeholders provided");return}}attachEventListeners(){this.inputElement&&(this.inputElement.addEventListener("focus",()=>{this.isUserInteracting=!0,this.pauseAnimation()}),this.inputElement.addEventListener("input",()=>{this.isUserInteracting=!0,this.pauseAnimation()}),this.inputElement.addEventListener("blur",()=>{this.inputElement&&this.inputElement.value.trim()===""&&(this.isUserInteracting=!1,this.resumeAnimation())}))}pauseAnimation(){this.timeline&&this.timeline.pause()}resumeAnimation(){this.timeline&&this.timeline.play()}makePlaceholderElement(r){let t=document.createElement("div");return t.className="chroma-text",t.setAttribute("data-animate","false"),t.textContent=r,t.style.opacity="0",t}start(){if(!this.placeholderSlot||!w){console.warn("[fynd-chat] Placeholder rotator: Cannot start - missing dependencies");return}this.startAnimationLoop()}startAnimationLoop(){if(!this.placeholderSlot)return;let r=t=>{let a=this.makePlaceholderElement(t),o=w.timeline({defaults:{ease:"power1.out"}});return o.add(()=>{this.placeholderSlot&&(this.placeholderSlot.appendChild(a),a.setAttribute("data-animate","true"))}),o.to(a,{duration:this.config.fadeDuration,autoAlpha:1}),o.to(a,{duration:this.config.holdDuration,autoAlpha:1}),o.to(a,{duration:this.config.fadeDuration,autoAlpha:0}),o.add(()=>{a.remove()}),o};this.timeline=w.timeline({repeat:-1}),this.config.placeholders.forEach(t=>{this.timeline.add(r(t))})}destroy(){this.timeline&&(this.timeline.kill(),this.timeline=null),this.inputElement&&(this.inputElement.removeEventListener("input",()=>{}),this.inputElement.removeEventListener("blur",()=>{}),this.inputElement.removeEventListener("focus",()=>{}))}};function A(v="placeholderText",r='[fynd-storefront-chat="input"]',t){let a=new E(v,r,t);return a.start(),a}document.addEventListener("DOMContentLoaded",()=>{let r=document.querySelectorAll("[fynd-storefront-chat]");if(window.innerWidth<=767){console.log("[fynd-chat] Chat disabled on mobile devices (width <= 767px)");return}window.addEventListener("resize",()=>{window.innerWidth<=767?r.forEach(e=>{e.style.display="none"}):r.forEach(e=>{e.style.display=""})});let t=document.querySelector('[fynd-storefront-chat="input"]'),a=document.querySelector('[fynd-storefront-chat="input-ghost"]'),o=document.querySelector('[fynd-storefront-chat="input-container"]'),l=document.querySelector('[fynd-storefront-chat="button"]'),s=document.querySelector('[fynd-storefront-chat="window"]'),i=document.querySelector('[fynd-storefront-chat="window-overlay"]'),g=document.querySelector('[fynd-storefront-chat="blur-gradient"]'),L=document.querySelector('[fynd-storefront-chat="wrapper"]'),u="450px",f="550px";if(!t||!a||!o||!l||!s||!i||!g){console.warn("[fynd-chat] Missing required DOM elements:",{dynamicInput:!!t,measureSpan:!!a,chatContainer:!!o,chatButton:!!l,chatWindow:!!s,chatOverlay:!!i});return}s.style.opacity="0",s.style.transform="scale(0)",s.style.transformOrigin="bottom center",i.style.opacity="0",i.style.pointerEvents="none",i.style.display="none";let p=!1,h=!1;function d(){p||h?P():T()}function P(){if(!t||!l){console.warn("[fynd-chat] activateInput: missing element(s)");return}t.setAttribute("fynd-storefront-chat-active","true"),l.setAttribute("fynd-storefront-chat-active","true")}function T(){if(!t||!l){console.warn("[fynd-chat] deActivateInput: missing element(s)");return}t.setAttribute("fynd-storefront-chat-active","false"),l.setAttribute("fynd-storefront-chat-active","false")}function M(){let e=window.gsap;if(!e){console.warn("[fynd-chat] showKailyWindow: GSAP not loaded");return}if(!i||!s){console.warn("[fynd-chat] showKailyWindow: missing overlay/window element(s)");return}i.style.pointerEvents="auto",i.style.display="block",e.to(s,{duration:.3,scale:1,opacity:1,ease:"power2.out"}),e.to(i,{duration:.3,opacity:1,ease:"power2.out"})}function C(){let e=window.gsap;if(!e||!g){console.warn("[fynd-chat] loopBlurGradient: GSAP or chatBlurGradient missing");return}e.to(g,{opacity:1,x:2,y:2,scale:.95,duration:3,ease:"sine.inOut",repeat:-1,yoyo:!0})}function D(){let e=window.gsap;if(!e){console.warn("[fynd-chat] hideKailyWindow: GSAP not loaded");return}if(!i||!s){console.warn("[fynd-chat] hideKailyWindow: missing overlay/window element(s)");return}e.to(i,{duration:.2,opacity:0,ease:"power2.out",onComplete:()=>{i&&(i.style.pointerEvents="none",i.style.display="none")}}),e.to(s,{duration:.2,scale:0,opacity:0,ease:"power2.in"})}o.addEventListener("mouseenter",()=>{p=!0,d()}),o.addEventListener("mouseleave",()=>{p=!1,d()}),t.addEventListener("focus",()=>{h=!0,d();let e=window.gsap,n=document.getElementById("placeholderText");n&&(e?e.to(n,{duration:.2,opacity:0,ease:"power2.out"}):n.style.opacity="0"),e&&t?e.to(t,{duration:.1,width:f,ease:"power2.out"}):t&&(t.style.width=f)}),t.style.width=u,t.addEventListener("blur",()=>{h=!1,d();let e=window.gsap,n=document.getElementById("placeholderText");t.value.trim()===""&&(n&&(e?e.to(n,{duration:.2,opacity:1,ease:"power2.in"}):n.style.opacity="1"),e&&t?e.to(t,{duration:.1,width:u,ease:"power2.out"}):t&&(t.style.width=u))}),t.addEventListener("input",()=>{let e=window.gsap,n=document.getElementById("placeholderText"),c=t.value.trim()==="";if(n&&(c?e?e.to(n,{duration:.2,opacity:1,ease:"power2.in"}):n.style.opacity="1":e?e.to(n,{duration:.2,opacity:0,ease:"power2.out"}):n.style.opacity="0"),e&&t){let m=c?u:f;e.to(t,{duration:.3,width:m,ease:"power2.out"})}else t&&(t.style.width=c?u:f)}),document.addEventListener("keydown",e=>{let n=navigator.platform.toLowerCase().includes("mac");e.key.toLowerCase()==="e"&&(n&&e.metaKey||!n&&e.ctrlKey)&&(e.preventDefault(),t.focus(),h=!0,d())});function b(){if(!t){console.warn("[fynd-chat] sendMessage: input element missing");return}let e=t.value.trim();if(e){try{let n=window.storefront;typeof n=="function"?n("event","sendUserMessage",{message:e}):console.warn("[fynd-chat] storefront API not available")}catch(n){console.error("[fynd-chat] Failed to send message:",n)}M(),t.value="",t.blur(),h=!1,p=!1,d()}}l.addEventListener("click",()=>{b()}),t.addEventListener("keydown",e=>{e.key==="Enter"&&(e.preventDefault(),b())}),i.addEventListener("click",D);let y=!0;function I(){let e=window.gsap;if(!e||!o){console.warn("[fynd-chat] ChatInputIN: GSAP or chatContainer missing");return}e.to(o,{duration:.3,y:0,ease:"power2.out"}),e.to(L,{duration:.3,y:0,ease:"power2.out"})}function k(){let e=window.gsap;if(!e||!o){console.warn("[fynd-chat] chatinputOUT: GSAP or chatContainer missing");return}e.to(o,{duration:.5,y:100,ease:"power2.out"}),e.to(L,{duration:.1,y:100,ease:"power2.out"})}I();let S=document.querySelector("[fynd-chat-hide-trigger]");S?new IntersectionObserver(n=>{n.forEach(c=>{let m=c.isIntersecting;m&&y?(k(),y=!1):!m&&!y&&(I(),y=!0)})},{threshold:.1}).observe(S):console.warn("[fynd-chat] fynd-chat-hide-trigger element not found"),A("placeholderText",'[fynd-storefront-chat="input"]',{fadeDuration:.35,holdDuration:3}),C(),d()});})();
|