100 lines
2.2 KiB
TypeScript
100 lines
2.2 KiB
TypeScript
import type {
|
|
DataCollectionItemBase,
|
|
ProjectsCollectionItem,
|
|
} from "@nuxt/content";
|
|
import gsap from "gsap";
|
|
|
|
export const useProjectsStore = defineStore("projects", {
|
|
state: () => ({
|
|
projects: [] as (Omit<
|
|
ProjectsCollectionItem,
|
|
keyof DataCollectionItemBase
|
|
> & { id: string })[],
|
|
currentProject: 0,
|
|
loading: true,
|
|
offsetX: 0,
|
|
}),
|
|
|
|
actions: {
|
|
async loadProjects() {
|
|
this.loading = true;
|
|
|
|
const { data: projects } = await useAsyncData("projects", () =>
|
|
queryCollection("projects")
|
|
.order("order", "ASC")
|
|
.select(
|
|
"id",
|
|
"order",
|
|
"scope",
|
|
"title",
|
|
"link",
|
|
"description",
|
|
"summary",
|
|
"technologies",
|
|
"tasks",
|
|
)
|
|
.all(),
|
|
);
|
|
if (!projects.value) throw "Cannot load projects";
|
|
this.projects = projects.value.map((project) => ({
|
|
...project,
|
|
id: project.id.split("/")[2]!,
|
|
}));
|
|
|
|
console.log(this.projects);
|
|
|
|
this.loading = false;
|
|
},
|
|
|
|
visitProject() {
|
|
const link = this.projects[this.currentProject]?.link;
|
|
if (link) navigateTo(link, { open: { target: "_blank" } });
|
|
},
|
|
|
|
scrollProjects(direction: "left" | "right") {
|
|
let offset = 0;
|
|
|
|
if (
|
|
direction === "right" &&
|
|
this.currentProject < this.projects.length - 1
|
|
) {
|
|
this.currentProject += 1;
|
|
offset = 69;
|
|
} else if (direction === "left" && this.currentProject > 0) {
|
|
this.currentProject -= 1;
|
|
offset = -69;
|
|
}
|
|
|
|
if (offset !== 0) {
|
|
gsap.fromTo(
|
|
this,
|
|
{ offsetX: offset },
|
|
{
|
|
offsetX: 0,
|
|
duration: 0.1,
|
|
ease: "none",
|
|
},
|
|
);
|
|
}
|
|
},
|
|
|
|
// TODO: not used anymore
|
|
scrollToProject(index: number) {
|
|
if (index === this.currentProject) return;
|
|
|
|
const offset = (index - this.currentProject) * 69;
|
|
this.currentProject = index;
|
|
|
|
gsap.fromTo(
|
|
this,
|
|
{ offsetX: offset },
|
|
{
|
|
offsetX: 0,
|
|
duration: 0.1,
|
|
ease: "none",
|
|
},
|
|
);
|
|
},
|
|
},
|
|
});
|