anegis-webflow-new 0.0.0 → 1.1.0

package/README.md

@@ -1,5 +1,8 @@
 # Finsweet Developer Starter
 
+[![npm version](https://badge.fury.io/js/anegis-webflow-new.svg)](https://badge.fury.io/js/anegis-webflow-new)
+
+
 A starter template for both Client & Power projects.
 
 Before starting to work with this template, please take some time to read through the documentation.
@@ -41,8 +44,26 @@ This template requires the use of [pnpm](https://pnpm.js.org/en/). You can [inst
 npm i -g pnpm
 ```
 
+
 To enable automatic deployments to npm, please read the [Continuous Deployment](#continuous-deployment) section.
 
+## How to use in Webflow
+
+To use the code in your Webflow project, add the following script to your site's "Before </body> tag" in the custom code settings:
+
+### Using jsDelivr (Recommended)
+```html
+<script defer src="https://cdn.jsdelivr.net/npm/anegis-webflow-new@1.0.0/dist/index.js"></script>
+```
+
+### Using unpkg
+```html
+<script defer src="https://unpkg.com/anegis-webflow-new@1.0.0/dist/index.js"></script>
+```
+
+> **Note:** Replace `@1.0.0` with the specific version you want to target, or use `@latest` for the most recent version (use with caution in production).
+
+
 ## Getting started
 
 The quickest way to start developing a new project is by [creating a new repository from this template](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template#creating-a-repository-from-a-template).

package/dist/index.js

@@ -1 +1 @@
-"use strict";(()=>{var r=(e=document)=>{let o="Last Published:";for(let t of e.childNodes)if(t.nodeType===Node.COMMENT_NODE&&t.textContent?.includes(o)){let n=t.textContent.trim().split(o)[1];if(n)return new Date(n)}};var s=e=>{let o=r();console.log(`Hello ${e}!`),console.log(`This site was last published on ${o?.toLocaleDateString("en-US",{year:"numeric",month:"long",day:"2-digit"})}.`)};window.Webflow||(window.Webflow=[]);window.Webflow.push(()=>{s("John Doe")});})();
+"use strict";(()=>{var $=Object.defineProperty;var _=(l,i,t)=>i in l?$(l,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[i]=t;var x=(l,i,t)=>_(l,typeof i!="symbol"?i+"":i,t);var E=(l=document)=>{let i="Last Published:";for(let t of l.childNodes)if(t.nodeType===Node.COMMENT_NODE&&t.textContent?.includes(i)){let e=t.textContent.trim().split(i)[1];if(e)return new Date(e)}};var A=l=>{let i=E();console.log(`Hello ${l}!`),console.log(`This site was last published on ${i?.toLocaleDateString("en-US",{year:"numeric",month:"long",day:"2-digit"})}.`)};function k(){let l=document.querySelectorAll(".layout_card.is-faq"),i=document.querySelectorAll(".about_component-imge-outer");gsap.set(".layout-card-bottom",{height:0,overflow:"hidden",display:"block"}),gsap.set(i,{autoAlpha:0,display:"none"});function t(s,r){let o=s.querySelector(".layout-card-bottom"),d=s.querySelector(".layout_action-icon"),u=s.getAttribute("data-card"),n=document.querySelector(`.about_component-imge-outer[data-image="${u}"]`);r?(o&&gsap.to(o,{height:"auto",duration:.4,ease:"power2.out"}),d&&d.classList.add("is-active"),n?(gsap.set(n,{display:"block",zIndex:2}),gsap.to(n,{autoAlpha:1,duration:.4,overwrite:!0})):console.warn(`No image found for Card ID: ${u}`)):(gsap.to(o,{height:0,duration:.3,ease:"power2.in"}),d&&d.classList.remove("is-active"),n&&(gsap.set(n,{zIndex:1}),gsap.to(n,{autoAlpha:0,duration:.3,onComplete:()=>gsap.set(n,{display:"none"})})))}let e=Array.from(l).find(s=>{let r=s.getAttribute("data-card");return document.querySelector(`.about_component-imge-outer[data-image="${r}"]`)});e&&t(e,!0),l.forEach(s=>{let r=s.querySelector(".layout_card-top");r&&r.addEventListener("click",()=>{let o=s.querySelector(".layout-card-bottom"),d=o?gsap.getProperty(o,"height"):0,u=parseFloat(String(d))>0;l.forEach(n=>{n!==s&&t(n,!1)}),u||t(s,!0)})})}function C(){if(!window.matchMedia("(hover: hover) and (pointer: fine)").matches)return;let i=document.querySelectorAll("[data-cursor]"),t=document.getElementById("cursor-hijack"),e=document.getElementById("cursor-trail-canvas"),s=document.getElementById("cursor-trail-path"),r=document.getElementById("trailGradient");if(!t||!e||!s||!i.length)return;if(typeof gsap>"u"){console.warn("GSAP not found");return}let o={tipOffset:{x:0,y:14},trailOffset:32,positionLerp:.25,maxPoints:50,minDistance:4,trailDecay:.92,rotationLerp:.15,idleSpeedThreshold:.5},d=!1,u={x:0,y:0},n={x:0,y:0},c=[],b=0,g=0;function L(){e&&e.setAttribute("viewBox",`0 0 ${window.innerWidth} ${window.innerHeight}`)}L(),window.addEventListener("resize",L),window.addEventListener("mousemove",a=>{u.x=a.clientX,u.y=a.clientY},{passive:!0});function P(){d=!0,document.body.classList.add("cursor-active"),n.x=u.x,n.y=u.y,c=[];for(let a=0;a<o.maxPoints;a++)c.push({x:u.x,y:u.y});g=0,b=0}function H(){d=!1,document.body.classList.remove("cursor-active")}i.forEach(a=>{a.addEventListener("mouseenter",P),a.addEventListener("mouseleave",H)}),document.querySelectorAll(".button-wrapper").forEach(a=>{a.addEventListener("mouseenter",()=>{document.body.classList.add("cursor-hidden")}),a.addEventListener("mouseleave",()=>{document.body.classList.remove("cursor-hidden")})}),gsap.ticker.add(()=>{if(!d)return;n.x+=(u.x-n.x)*o.positionLerp,n.y+=(u.y-n.y)*o.positionLerp;let a=n.x-c[1].x,p=n.y-c[1].y;Math.hypot(a,p)>o.idleSpeedThreshold&&(b=Math.atan2(p,a)*(180/Math.PI));let f=b-g;f>180&&(f-=360),f<-180&&(f+=360),g+=f*o.rotationLerp;let S=g*Math.PI/180,y=n.x-Math.cos(S)*o.trailOffset,h=n.y-Math.sin(S)*o.trailOffset;c[0].x=y,c[0].y=h;for(let m=1;m<c.length;m++)c[m].x+=(c[m-1].x-c[m].x)*(1-o.trailDecay),c[m].y+=(c[m-1].y-c[m].y)*(1-o.trailDecay);let w=N(c);s&&s.setAttribute("d",w),D(),gsap.set(t,{x:n.x-o.tipOffset.x,y:n.y-o.tipOffset.y,rotation:g+180,transformOrigin:`${o.tipOffset.x}px ${o.tipOffset.y}px`})});function D(){if(!r||c.length<2)return;let a=c[c.length-1],p=c[0];r.setAttribute("x1",String(a.x)),r.setAttribute("y1",String(a.y)),r.setAttribute("x2",String(p.x)),r.setAttribute("y2",String(p.y))}function N(a,p=.5){if(a.length<2)return"";let v=`M ${a[0].x.toFixed(2)} ${a[0].y.toFixed(2)}`;for(let f=0;f<a.length-1;f++){let S=a[Math.max(f-1,0)],y=a[f],h=a[f+1],w=a[Math.min(f+2,a.length-1)],m=y.x+(h.x-S.x)/6*p,q=y.y+(h.y-S.y)/6*p,R=h.x-(w.x-y.x)/6*p,F=h.y-(w.y-y.y)/6*p;v+=` C ${m.toFixed(2)} ${q.toFixed(2)}, ${R.toFixed(2)} ${F.toFixed(2)}, ${h.x.toFixed(2)} ${h.y.toFixed(2)}`}return v}}function M(){let l="[fs-scrolldisable-element='smart-nav']",i=".button-wrapper",t="is-pinned",e="w-variant-a4b72284-6321-8341-edca-223fdec43abe",o=document.querySelector(l);if(!o)return;let d=o.querySelector(i),u=!1,n=!1,c=()=>{let b=window.scrollY||window.pageYOffset;!n&&b>50?(o.classList.add(t),d&&d.classList.remove(e),n=!0):n&&b<40&&(o.classList.remove(t),d&&d.classList.add(e),n=!1),u=!1};window.addEventListener("scroll",()=>{u||(window.requestAnimationFrame(c),u=!0)},{passive:!0}),c()}function I(){if(typeof Swiper>"u")return;let l=document.querySelector(".swiper-progress-track"),i=document.querySelector(".swiper-progress-thumb"),t=new Swiper(".swiper.w-dyn-list",{slidesPerView:1,spaceBetween:36,loop:!1,centeredSlides:!0,navigation:{nextEl:".swiper-arrow.is-next",prevEl:".swiper-arrow.is-prev"},breakpoints:{768:{slidesPerView:1},1024:{slidesPerView:1}},on:{init:function(){e(this),s(this)},slideChange:function(){e(this),s(this)}}});l&&l.addEventListener("click",function(r){let o=r,d=l.getBoundingClientRect(),u=o.clientX-d.left,n=d.width,c=u/n,b=t.slides.length,g=Math.floor(c*b);t.slideTo(g)});function e(r){r.slides.forEach(function(o,d){d===r.activeIndex?(o.style.transform="scale(1)",o.style.transition="transform 0.4s ease"):(o.style.transform="scale(0.9)",o.style.transition="transform 0.4s ease")})}function s(r){if(!i)return;let o=r.slides.length,u=(r.realIndex+1)/o*100;i.style.width=u+"%"}}var T=class{constructor(i){x(this,"tablistNode");x(this,"tabs",[]);x(this,"firstTab",null);x(this,"lastTab",null);x(this,"tabpanels",[]);this.tablistNode=i;let t=this.tablistNode.getAttribute("data-orientation")||"horizontal";this.tablistNode.setAttribute("aria-orientation",t),this.tabs=Array.from(this.tablistNode.querySelectorAll("[role=tab]")),this.tabs.forEach(s=>{let r=s.getAttribute("aria-controls");if(!r)return;let o=document.getElementById(r);s.tabIndex=s.getAttribute("aria-selected")==="true"?0:-1,o&&(o.setAttribute("role","tabpanel"),o.setAttribute("aria-labelledby",s.id),o.removeAttribute("tabindex"),this.tabpanels.push(o)),s.addEventListener("keydown",this.onKeydown.bind(this)),s.addEventListener("click",this.onClick.bind(this)),this.firstTab||(this.firstTab=s),this.lastTab=s});let e=this.tabs.find(s=>s.getAttribute("aria-selected")==="true")||this.firstTab;e&&this.setSelectedTab(e,!1)}setSelectedTab(i,t=!0){this.tabs.forEach(e=>{let s=e.getAttribute("aria-controls"),r=s?document.getElementById(s):null;i===e?(e.setAttribute("aria-selected","true"),e.tabIndex=0,e.classList.add("is-active-tab"),r&&(r.classList.add("is-active-tab"),r.removeAttribute("hidden"),r.removeAttribute("style")),t&&e.focus()):(e.setAttribute("aria-selected","false"),e.tabIndex=-1,e.classList.remove("is-active-tab"),r&&(r.classList.remove("is-active-tab"),r.setAttribute("hidden","true"),r.removeAttribute("style")))})}setSelectedToPreviousTab(i){if(i===this.firstTab&&this.lastTab)this.setSelectedTab(this.lastTab);else{let t=this.tabs.indexOf(i);this.setSelectedTab(this.tabs[t-1])}}setSelectedToNextTab(i){if(i===this.lastTab&&this.firstTab)this.setSelectedTab(this.firstTab);else{let t=this.tabs.indexOf(i);this.setSelectedTab(this.tabs[t+1])}}onKeydown(i){let t=i.currentTarget,e=!1,s=this.tablistNode.getAttribute("aria-orientation")||"horizontal";switch(i.key){case"ArrowLeft":s==="horizontal"&&(this.setSelectedToPreviousTab(t),e=!0);break;case"ArrowRight":s==="horizontal"&&(this.setSelectedToNextTab(t),e=!0);break;case"ArrowUp":s==="vertical"&&(this.setSelectedToPreviousTab(t),e=!0);break;case"ArrowDown":s==="vertical"&&(this.setSelectedToNextTab(t),e=!0);break;case"Home":this.firstTab&&(this.setSelectedTab(this.firstTab),e=!0);break;case"End":this.lastTab&&(this.setSelectedTab(this.lastTab),e=!0);break;case"Enter":case" ":this.setSelectedTab(t),e=!0;break;default:break}e&&(i.stopPropagation(),i.preventDefault())}onClick(i){this.setSelectedTab(i.currentTarget)}};function O(){document.querySelectorAll('[data-module="tabs"]').forEach(t=>{let e=t.querySelector('[role="tablist"]');if(e instanceof HTMLElement){if(t.hasAttribute("data-orientation")&&!e.hasAttribute("data-orientation")){let s=t.getAttribute("data-orientation");s&&e.setAttribute("data-orientation",s)}new T(e)}}),document.querySelectorAll('[role="tablist"]').forEach(t=>{t instanceof HTMLElement&&!t.closest('[data-module="tabs"]')&&new T(t)})}window.Webflow||(window.Webflow=[]);window.Webflow.push(()=>{A("John Doe"),O(),M(),k(),I(),C()});})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anegis-webflow-new",
-  "version": "0.0.0",
+  "version": "1.1.0",
   "description": "Webflow development project for Anegis",
   "private": false,
   "homepage": "https://github.com/ANEGIS/anegis-webflow-new#readme",
@@ -24,21 +24,21 @@
     "dist"
   ],
   "devDependencies": {
-    "@changesets/changelog-git": "^0.2.0",
-    "@changesets/cli": "^2.27.12",
-    "@eslint/js": "^9.19.0",
+    "@changesets/changelog-git": "^0.2.1",
+    "@changesets/cli": "^2.29.8",
+    "@eslint/js": "^9.39.2",
     "@finsweet/eslint-config": "^3.0.3",
     "@finsweet/tsconfig": "^1.4.2",
-    "@playwright/test": "^1.50.1",
+    "@playwright/test": "^1.58.0",
     "cross-env": "^7.0.3",
     "esbuild": "^0.24.2",
-    "eslint": "^9.19.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-prettier": "^5.2.3",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "prettier": "^3.4.2",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.23.0"
+    "prettier": "^3.8.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.1"
   },
   "dependencies": {
     "@finsweet/ts-utils": "^0.40.0"

package/src/index.ts

@@ -1,7 +1,20 @@
 import { greetUser } from '$utils/greet';
 
+import { initFaqCards } from './components/cards/FaqCards';
+import { initCustomCursor } from './components/cursor/CustomCursor';
+import { initSmartNav } from './components/layout/SmartNav';
+import { initSwiperSlider } from './components/sliders/SwiperSlider';
+import { initTabLists } from './components/tabs/TabsAutomatic';
+
 window.Webflow ||= [];
 window.Webflow.push(() => {
   const name = 'John Doe';
   greetUser(name);
+
+  // Initialize all components
+  initTabLists();
+  initSmartNav();
+  initFaqCards();
+  initSwiperSlider();
+  initCustomCursor();
 });