Too much repetitive code

[bim-ba]

bim-ba.github.io/src/components/NavigationIcon.vue

Lines 36 to 65 in 9afc726

	// reactive
	const isAnimated = ref<boolean>();
	// initial props
	const initialProps = useInitialProps({ scale: 1 });
	// spring-set function
	const set = computedWithControl(
	() => isAnimated.value,
	() => {
	if (isAnimated.value === false) {
	const { set } = useSpringAnimation(navigationIconRef, initialProps, {
	stiffness: 500,
	});
	return set;
	}
	return (properties: MotionProperties) => _.noop(properties);
	}
	);
	// hovering
	const hover = ({ hovering }: FullGestureState<"move">) => {
	if (hovering) set.value({ scale: 1.15 });
	else set.value(initialProps);
	};
	// exposed
	defineExpose({ isAnimated });

bim-ba.github.io/src/components/ColoredSquare.vue

Lines 47 to 94 in 9afc726

	// reactive
	const isAnimated = ref<boolean>();
	// initial props
	const initialProps = useInitialProps({
	x: 0,
	y: 0,
	scale: 1,
	cursor: "grab",
	});
	// spring-set function
	const set = computedWithControl(
	() => isAnimated.value,
	() => {
	if (isAnimated.value === false) {
	const { set } = useSpringAnimation(squareRef, initialProps, {
	stiffness: 500,
	damping: 5,
	});
	return set;
	}
	return (properties: MotionProperties) => _.noop(properties);
	}
	);
	// dragging
	const drag = ({ dragging, movement: [x, y] }: FullGestureState<"drag">) => {
	if (dragging)
	set.value({
	x,
	y,
	scale: 1.25,
	cursor: "grabbing",
	});
	else set.value(initialProps);
	};
	// hovering
	const hover = ({ hovering }: FullGestureState<"move">) => {
	if (hovering) set.value({ scale: 1.15 });
	else set.value(initialProps);
	};
	// exposed
	defineExpose({ isAnimated, squareRef });

bim-ba.github.io/src/components/pages/projects/FloppyDisk.vue

Lines 86 to 87 in 9afc726

	// reactive
	const isAnimated = ref<boolean>();

bim-ba.github.io/src/components/pages/projects/FloppyDisk.vue

Lines 100 to 128 in 9afc726

	// initial props
	const initialProps = { scale: 1 };
	// spring-set function
	const set = computedWithControl(
	() => isAnimated.value,
	() => {
	if (isAnimated.value === false) {
	const { set } = useSpringAnimation(floppyRef, initialProps, {
	stiffness: 350,
	});
	return set;
	}
	return (properties: MotionProperties) => _.noop(properties);
	}
	);
	// hovering
	const hover = ({ hovering }: FullGestureState<"move">) => {
	if (hovering) {
	for (const asideImageRef of asideImagesRef.value!) asideImageRef.show();
	set.value({ scale: 1.15 });
	} else {
	for (const asideImageRef of asideImagesRef.value!) asideImageRef.hide();
	set.value(initialProps);
	}
	};

bim-ba.github.io/src/components/pages/projects/FloppyDisk.vue

Lines 133 to 134 in 9afc726

	// exposed
	defineExpose({ floppyRef, isAnimated });

bim-ba.github.io/src/components/pages/main/FooterCoordinates.vue

Lines 28 to 29 in 9afc726

	// reactive
	const isAnimated = ref<boolean>();

bim-ba.github.io/src/components/pages/main/FooterCoordinates.vue

Lines 57 to 85 in 9afc726

	// initial props
	const initialProps = useInitialProps({ scale: 1 });
	// spring-set function
	const set = computedWithControl(
	() => isAnimated.value,
	() => {
	if (isAnimated.value === false) {
	const { set } = useSpringAnimation(footerCoordinatesRef, initialProps, {
	stiffness: 500,
	});
	return set;
	}
	return (properties: MotionProperties) => _.noop(properties);
	}
	);
	// hovering
	const hover = ({ hovering }: FullGestureState<"move">) => {
	revealLocation.value = hovering;
	if (hovering) set.value({ scale: 1.15 });
	else set.value(initialProps);
	};
	//exposed
	defineExpose({ isAnimated });