taenykim / naver-egjs-app

🟡 🟢 toy app using naver open-source egjs 📐

naver-egjs-app

🟡 🟢 toy app using naver open-source egjs 📐

📝 Project description

• tech stacks : Vue, Webpack, Node.js(express), egjs, eslint-config-naver
• goals
  • use Vuejs X Webpack X Express
  • use eslint-config-naver
  • use egjs
• deploy site : http://naver-egjs.tk:3000/

preview

desktop	mobile

eslint-config-naver

• array-element-newline [naver guide 4-6]
• operator-linebreak [naver guide 15-6]

🟡 egjs

egjs-agent [website]

• Navigator Interface
• get User Information
• Dark Mode ref : FEConf's Dark mode session
• webView
• userAgent privacy Issue ref: zdnet article
• others
  • pre tag
  • css -webkit-fill-available

egjs-axes [website]

• move, scale Element in static range
• various examples ✅
• I added dynamic range, bounce when zoomed (why? transform doesn't change the actual dom size.)

const CIRCLE_SIZE = 100;
const zoomRatio = e.pos.zoom;
const axes = new Axes({...})

axes.axis.panX.range = [
	(CIRCLE_SIZE * zoomRatio - CIRCLE_SIZE) / 2,
	size[0] - CIRCLE_SIZE - (CIRCLE_SIZE * zoomRatio - CIRCLE_SIZE) / 2,
];
axes.axis.panX.bounce = [
	(CIRCLE_SIZE * zoomRatio) / 5,
	(CIRCLE_SIZE * zoomRatio) / 5,
];
axes.axis.panY.range = [
	(CIRCLE_SIZE * zoomRatio - CIRCLE_SIZE) / 2,
	size[1] - CIRCLE_SIZE - (CIRCLE_SIZE * zoomRatio - CIRCLE_SIZE) / 2,
];
axes.axis.panY.bounce = [
	(CIRCLE_SIZE * zoomRatio) / 5,
	(CIRCLE_SIZE * zoomRatio) / 5,
];

egjs-component [website]

• observer
• bind this
• when register(on) multiple events, trigger each callback all
• so, when instance is destroyed, unregister(off) event

export default {
	mounted() {
		egComponent.on("CHANGE_COMPONENT2", this.changeComponent2.bind(this));
	},
	destroyed() {
		egComponent.off("CHANGE_COMPONENT2");
	},
	methods: {
		changeComponent1() {
			egComponent.trigger("CHANGE_COMPONENT1");
		},
		changeComponent2() {
			console.log("trigger change component2");
			const randomColor = generateRandomColor("0123456789ABCEF");
			this.$refs.wrapper.style.backgroundColor = randomColor;
		},
	},
};

egjs-flicking [website]

• touch 📱
• infinite carousel

egjs-infinitegrid [website]

• scroll 💻
• grid, masonry (ref : css new grid option - masonry)
• gallery test log?
• scroll event (compare intersection observer API)
• dependency : egjs/component

egjs-persist [website]

• snapshot
• usage typo
• localstorage

egjs-view360-spinViewer [website]

• images frame -> make 3d

egjs-view360-panoViewer [website]

• 3d panorama image viewer

egjs-visible [website]

• intersection observer

Vue X Webpack X Express

• CSR + SSR -> history fallback!

const express = require("express");

const server = express();
const path = require("path");

server.use("/", express.static(path.join(__dirname, "./dist")));

server.get("*", (req, res) => {
	res.sendFile(path.join(__dirname, "/dist", "index.html"));
});

server.listen(process.env.NODE_ENV === "production" ? process.env.PORT : 8080);