Can I use Flicking with only three panels recycled?

[changdongchun]

Description

jindo버전때 3개의 판으로 순환구조가 있었는데요 이번 egjs에서는 3판 순환을 시도해봐도 가상의 더미가 생기는 것 같아서요 3판 구조에서 ajax로 각 판(3개 이상의 판내용)을 3판에서 순환해서 보여주고 싶은데 egjs에서는 어떻게 활용해야 할까요?

Steps to check or reproduce

[WoodNeck]

Hello, @changdongchun!
As Flicking's version goes up, now this supports variable size flicking, which means there's no restriction in how many panels you can show in one screen.
So we made renderOnlyVisible function, which renders only visible panels, so I think you can use it.
Here's our demo of it, check the last section :)

---

안녕하세요, @changdongchun 님!
플리킹의 메이저 버젼이 올라가면서, 기존과는 다르게 가변 크기의 패널을 지원하게 되었습니다.
때문에 이전 버젼과는 달리 한 화면에 보이는 패널 개수를 제한하지 않게 되었고, 3판 순환 구조를 지원하지 않게 되었습니다.
대신에 새로 renderOnlyVisible이라는 옵션을 만들었는데, 옵션 이름처럼 실제로 보이는 패널만 렌더링하는 방식입니다.
퍼포먼스가 염려되신다면 해당 옵션을 사용해보시는걸 추천드립니다.
이 데모의 맨 아래를 확인해주세요 :)

[changdongchun]

단순 이미지 일때는 위옵션을 써도 될 것 같은데요. 단순 이미지가 아니라 네이버 메인처럼 판을 플리킹 하고 그 판안에 여러 스크롤,플리킹등이 있는 구조입니다. 이번 EGJS에서는 제가 따로 설정하지 않은 복제 pannel도 생기고 해서요.. 판 3개를 돌리면서안의 컨텐츠들이 유동적으로 변할 수 는 없을까요?
판을 막 돌리면 moveend이벤트도 맨마지막 한번만 발생하는 듯 하고
배너구좌가 아닌 네이버 메인과 같은 여러판을 3판으로 구성할 수 있는 샘플을 혹시 지원 받을 수 있을까요?

[WoodNeck]

현재 Flicking 3버젼에서는 3판 순환에 특화된 기능을 제공하고 있지 않습니다.
때문에 현재 마련해둔 샘플은 없습니다.

renderOnlyVisible 옵션을 사용하시면 3판 순환 기능을 대체 가능할 것으로 생각되는데요, 복제 패널이 문제가 된다면 어떤 경우에 문제가 되는지 말씀해주시면 해결에 도움을 드릴 수 있을 것 같습니다.

3판 순환 구조가 꼭 필요하신 경우라면 구버젼을 사용해보시는 것이 좋을 것 같습니다.

2.5.1버젼 문서: https://naver.github.io/egjs-flicking/release/2.5.1/doc/index.html

[changdongchun]

복제패널이 문제 되는 것은 복제가 되면서 원본 a에 구좌 "가"가 있을 경우 "가"에서 내용을 펼치거나 변경했던 내용들이 복제패널에서는 유지가 되지 않아 플리킹을 하다보면 a패널의 "가"내용이 열였다 닫혔다 하고 패널안 id같은 경우도 중복이 되어 스크립트 호출을 맘대로 할 수 없어서 문의 드렸던 내용인데요
pannel을 하나만 만들고
renderOnlyVisible옵션을 true로 하고
플리킹 holdStart할때 방향에 따라 패널을 추가(맨앞,맨뒤) 이렇게 하면 될까요?

아니면
pannel을 3개 만들고
renderOnlyVisible옵션을 true로 하고
needpanel 이벤트 발생하면 그때 필요한 패널내용을 해당 패널에 넣는 형태로 가면 될지..

기본적으로 현재 네이버 메인처럼 보이는 패널 좌우에 미리 패널정보를 불러오고 플리킹이 끝난 시점에 현재 패널 좌우에 내용을 맞게 변경하려고 하는데 기본 구조를 어떻게 잡아야 할지 감이 서질 않아서요 이번에 바뀐옵션들 내용이 좋아서 플리킹 하나로 스크롤 및 플리킹 그리고 moveType을 다향하게 두어 장점이 많음을 느끼고는 있는데 각 패널안 색션구좌(배너,상품리스트)들에서는 없던 문제들이 판플리킹에서는 잘 안풀려서요 문의를 드려 보았습니다.

[WoodNeck]

현재 구조상 패널 clone을 막을 수는 없을 것 같습니다. 또, needPanel은 이 경우엔 적합하지 않아 보이네요.
특히나 기존과 다르게 현재의 Flicking은 스크롤 도중에 interruption이 가능하며, 드래그 한 번에 여러 개의 패널을 넘길 수 있기 때문에 3판 순환 구조를 완전하게 구현하기 어렵습니다.
지금의 Flicking에서는 3판 순환 구조를 사용할 수 없다고 봐야할 것 같습니다.

때문에, 패널들을 올려놓고 renderOnlyVisible을 사용하시는게 좋을 것 같습니다.
엘리먼트만 제대로 업데이트하면 되는데요,
변경시 클론된 패널에도 영향을 주고 싶으실 경우, 패널 메소드중 update() 메소드를 사용해보시는 것이 좋을 것 같습니다.
update 메소드의 경우 클론된 모든 패널에 대해 엘리먼트당 작업을 수행할 수 있게 해주기 때문에, 클론된 패널을 포함하여 올바르게 패널을 업데이트 가능합니다.
엘리먼트 ID 기반 서치시에는 getElementById보다는 querySelector(혹은 querySeletorAll)을 사용하시면 id 중복시에도 엘리먼트를 올바르게 가져오실 수 있습니다.

주의하실 점은 Ajax요청에 의한 업데이트시에는 요청이 여러번 중복되지 않도록
update 내부에서 ajax요청을 수행하지 않고, 외부에서 수행 후 update를 통해 엘리먼트를 업데이트해주셔야 합니다.

https://naver.github.io/egjs-flicking/projects/keywords.html
위 데모에서 update를 사용하고 있습니다.

[changdongchun]

위와는 별개로 egjs두가지 버전을 함께 사용하고 싶을때는 어떻게 하면 좋을까요?
현재 각 판(big panel)안의 컨텐츠 플리킹은 현재 최신 egjs를 패키지 형태로 사용하고 있는데요
이와 중첩되지 않게 2.5.1버전을 (big panel)에만 구현하고 싶을 경우엔는 2.5.1의 어떤 버전을 받아 적용을 해야 할까요? eg.Flicking을 쓰고 있으니까 eg대신 다른 네임스페이스를 쓰는 방법이 있을까요?

[WoodNeck]

저희쪽에서 따로 네임스페이스를 변경할 수 있는 방법은 제공하고 있지 않습니다.
제일 간단한 방법으로 생각되는건 npm을 통해 라이브러리를 사용하지 않고, pkgd파일을 받아서 이를 수정하는건데요,

https://naver.github.io/egjs-flicking/release/2.5.1/dist/flicking.pkgd.js
위 파일의 상단부를 보시면

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.eg = global.eg || {}, global.eg.Flicking = factory());
}(this, (function () { 'use strict';

이렇게 기술되어있는데, 이 중 (global.eg = global.eg || {}, global.eg.Flicking = factory());를 수정해주시면 됩니다.
가령, eg를 빼고 그냥 Flicking을 사용하고 싶으실 경우 (global.Flicking = factory())로 수정해주시면 됩니다.

혹은 2.x 브랜치를 기반으로 config 파일을 수정 이후에 빌드하여 사용하실 수도 있습니다.

[changdongchun]

바쁘신 시간에도 답변을 주셔서 감사합니다.

[changdongchun]

flicking3.x.x버전과 같이 쓰기위해
flicking.pkgd.js의 2.5.1 파일 내의
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.eg = global.eg || {}, global.eg.Flicking = factory());
}(this, (function () { 'use strict';

3.x.x를 쓰기위해 참조한 axes.pkgd.min.js 파일도 2.5.1용으로 별도로 받아야 하나요?
2.5.1때 쓰이던 hammer.js도 참조해야 할까요? 아니면 pkgd에 해당 소스들이 merge되어있는 구조인지... 문의드립니다.

[WoodNeck]

pkgd파일은 의존성들이 같이 packaged되어있는 형태라 내부 의존성의 버젼 문제는 신경 안쓰셔도 괜찮습니다.

[changdongchun]

이전 문의 드린것 과 같이 겉의 판을 알려주신대로 2.5.1버전을 네임스페이스 바꿔서 쓰고 안의 컨텐츠들 플리킹은 egjs최신버전을 따로 쓰고 있습니다. 버전을 따로쓰다보니 안의 컨텐츠(3.x.x)플리킹 할때 자꾸 판플리킹(2.5.1)버전도 함께 움직이게 되는데요
이를 해결하고자
겉의 판플리킹 변수 var wPanflick 을 전역변수로 두고 안의 컨텐츠(3.x.x) 버전이 플리킹이 발생할때 저 전역변수를 통해
disableInput()을 호출하여 같이 플리킹이 되는 것을 막고자 합니다.

만약 가능한 방법이라면 안의 컨텐츠를 어떤 시점에 disableInput()을 호출해주고 어떤 시점에 enableInput()을 주어 풀어 주는 것이 맞을까요?

생각같아서는 holdStart 시점에 disableInput을 하고 moveEnd 시점에 enableInput을 해야 하나 생각하고 있는데요.

3.x.x버전과 2.5.1버전을 동시에 사용하기 위해서 어떻게 해야 하는지 혹은 관련 샘플이 있을까요?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[WoodNeck]

ref #362