Skip to content

Instantly share code, notes, and snippets.

View daybrush's full-sized avatar
😀
HAHAHAHAHAHA

Daybrush (Younkue Choi) daybrush

😀
HAHAHAHAHAHA
View GitHub Profile
@daybrush
daybrush / middle.tsx
Last active September 24, 2022 08:28
middle croffle code
// Original: https://daybrush.com/moveable/storybook2/?path=/story/combination-with-other-components--use-selecto-with-multiple-group
import { deepFlat } from "@daybrush/utils";
import { useKeycon } from "!croffle!keycon";
import Selecto from "!croffle!selecto";
import Moveable, { MoveableTargetGroupsType } from "!croffle!moveable";
import "./cube.css";
import { GroupManager } from "@moveable/helper";
export default function App() {
function $created() {
import * as React from "react";
import { useConveyer } from "@egjs/react-conveyer";
export default function HorizontalScroll() {
const ref = React.useRef<HTMLDivElement>();
const {
isReachStart,
isReachEnd,
} = useConveyer(ref);
return <div className="examples">
import Conveyer from "@egjs/conveyer";
const conveyer = new Conveyer(".items");
// Reads reactive properties
conveyer.isReachStart;
conveyer.isReachEnd;
// Subscribes reactive properties
conveyer.subscribe("isReachStart", isReachStart => {
import Conveyer from "@egjs/conveyer";
const conveyer = new Conveyer(".items");
conveyer.on("reachStart", () => {
// An event is fired when the scroll reaches the start point.
});
conveyer.on("reachEnd", () => {
// An event is fired when the scroll reaches the end point.
});
import Conveyer from "@egjs/conveyer";
const conveyer = new Conveyer(".items");
const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
prev.addEventListener("click", () => {
// start to end
conveyer.scrollIntoView("start", {
import Conveyer from "@egjs/conveyer";
const conveyer = new Conveyer(".items");
// scrollTo(pos, duration);
conveyer.scrollTo(1000, 500);
// scrollTo(pos, duration);
conveyer.scrollBy(100, 500);
container.addEventListener("wheel", e => {
e.preventDefault();
});
body {
overscroll-behavior: none;
}
import { MasonryInfiniteGrid, STATUS_TYPE } from "@egjs/infinitegrid";
const ig = new MasonryInfinitegrid("#container", {
gap: 5,
});
// gets visible infos. However, the information is simplified for invisible items.
ig.getStatus(STATUS.MINIMIZE_INVISIBLE_ITEMS);
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
const ig = new MasonryInfinitegrid("#container", {
gap: 5,
});
ig.gap = 10;