Release note of egjs (Q1 2022)

Hello! This is the first quarter of this year’s release of Naver’s FE open-source component group egjs.

🔖 Major Release History

Conveyer 1.0 Release

Go to Demo

Conveyer is a simple module that adds Drag to Native Scroll.

Why?

We use a lot of UI (Flicking, Swiper, iScroll) that scrolls or snaps through touch on mobile. And on PC, scrolling is done through mouse dragging and dragging is also possible, but since the wheel is used more, the method of adding a Wheel event is selected.

But there is a big problem with the Wheel event.

• The wheel event cannot prevent the previous/next page gesture even with preventDefault.
• You can block gestures for the entire page with CSS, but blocking the entire page because of some UI can give you a bad experience.
• It can’t always be a new tab with no previous/next page.

Due to the above problems, Virtual Scroll UIs such as Flicking, iScroll, and Swiper cannot avoid the wheel problem.

So, instead of Virtual Scroll that adds a wheel to Drag, I made a Conveyer that adds Drag to Native Scroll.

Advantages of Native Scroll

• If the scrollable state (the beginning and the end has not been reached), the gesture to go to the previous/next page can be prevented.
• Virtual Scroll requires you to create your own scrollbars, but Native Scroll has its own scrollbars.
• Customization is possible through CSS.
• Native Scroll’s API is easily accessible through element and is well organized on MDN.

Advantages of Conveyer

• Provides various methods and events that can support Native Scroll.
  https://naver.github.io/egjs-conveyer/docs/api/Conveyer
• An animation function is added to the scroll related methods (scrollTo, scrollBy, scrollIntoView).
• The scrollIntoView allows you to find the item in a specific position instead of a selector.
• Extend the scroll event to support scroll start (beginScroll) and scroll end (finishScroll) events.
• It supports not only Vanilla, but also React, Angular, Vue (2, 3), and Svelte frameworks.
• It was created using the CFCs Reactive method that supports all frameworks in one code, and will be released later.
• If you would like to use it in other frameworks, please feel free to contact us.

Features that can be created with Conveyer

• You can mainly create a UI that disables (or activates) when the start or end is reached.

Naver Search “예금” / Go to Demo

• Press the prev button to create an action that moves the fully visible item on the right to the left.

https://naver.github.io/egjs-conveyer/docs/examples/Methods/#example

• It can be easily combined with other components that use Native Scroll, and can also be combined with InfiniteGrid.

https://naver.github.io/egjs-conveyer/docs/examples/InfiniteScroll

• You can send a log to the server by providing an event where the scroll ends.
  https://naver.github.io/egjs-conveyer/docs/api/Conveyer#event-finishScroll

Conveyer can be viewed at https://github.com/naver/egjs-conveyer, and please refer to the Medium blog for details.

🔖 Next release notice!

@egjs/axes 3.0

Axes is a module that converts and provides refined coordinates through various gestures and inputs (Pan, Pinch, RotatePan, Key, etc.).

Changes in Axes 3.0

• Reduced Axes size by 40% (removed dependency on hammer.js).
• Other modules using Axes (Flicking, Conveyer, View360, etc.) are also reduced in size.
• Animation manipulation via methods (possible to change position, duration and interrupt).

🔖 Other release history

@egjs/view3d 2.3.0

• (v1 -> v2) Enhanced usability
• Added options
  skybox
  disablePitch & disableYaw
  skyboxBlur
  poster
  on
  plugins
  initialZoom
  toneMapping
  maxTimeDelta
  maintainSize
• Features
  Added animated crossfade
  Change to soft shadow type based on Contact Shadow
• Add plugin
  ARButton
  AROverlay
  LoadingBar

@egjs/flicking 4.5.0

• Added circularFallback option with different behavior when not enough items
• Svelte SSR support
• Fixed an error that occurred when clearing all panels

@egjs/flicking-plugins 4.3.0

• Added Perspective plugin to show flicking like 3d
• Svelte SSR support
• Fixed an error that occurred when clearing all panels
• Fixed an error that occurred in the index type Sync plugin

@egjs/infinitegrid 4.2.0, @egjs/grid 1.9.0

• Add useResizeObserver option
• Added useRoundedSize, columnCalculationThreshold options
• Add calculated final size and position properties to items
• Lazy loading support

@egjs/view360 3.6.2

• Supports Vue3 and Svelte frameworks
• Fix cubemap type

@egjs/persist 2.6.0

• Added a custom error PersistQuotaExceededError that extends the information of QuotaExceededError
• Add replaceDepth method for history.replaceState

@egjs/imready 1.3.0

• Angular, Svelte, Vue 2 framework support
• Lazy loading support