flicking in flicking (#490) more Issue

[changdongchun]

Description

flicking in flicking 에서 enableInput 과 disableInput으로 상위 flicking의 중복 동작을 제어할 수는 있었는데요 flickEnd 이벤트 시 enableInput을 넣으면 동작자체는 하게 되는데 함수(moveTo,next등)의 함수는 동작으로 플리킹을 한번 시키거나 하면 동작되지만 자체적으로 flickEnd후 바로 enableInput 후 동작함수(next,moveTo) 함수를 실행시키면 아무런 동작을 하지 않습니다. 혹시 다른 코드들을 더 넣어야 할까요?

Steps to check or reproduce

[changdongchun]

이전 관련 이슈링크 입니다. https://github.com/naver/egjs/issues/490

[netil]

@changdongchun could you give a very simplified code for test? I know that you're mentioning about doubly hierarchy flicking, but to have more understanding your intention, it'll be better providing an example.

[changdongchun]

이전 코드에 disableInput, enableInput 을 추가 시켜보았는데요. https://jsfiddle.net/pftv58vx/3/ 재현 방법은 아래와 같습니다. 배너플리킹 : mbnNum_017001(inner flicking) 판플리킹 : cateMainFlick (outter flicking)

1. 배너플리킹을 1회 이상 시행 후 콘솔창에 cateMainFlick.next(); 하면 "undefined"가 떨어짐.
2. 판플리킹을 한 후 다시 콘솔창에 cateMainFlick.next(); 실행하면 정상동작

next명령어 뿐이나라. moveTo명령어도 innterFlicking의 flick이벤트의 disableInput flickEnd이벤트 시의 enableInput 가 동작에서는 정상 동작하지만 함수 호출에 있어서는 잘 안됨.

반면 콘솔창에서 cMainFlick.disableInput(); 및 cMainFlick.enableInput(); 실행 후 next 및 moveTo함수 호출은 정상동작이 잘됨

[netil]

@changdongchun sorry for the delay.

I'm seeing that you have below structured flicking area.

<!-- main flicking area -->
<div id="cateMainFlick">
    <div class="mbnArea">
        <div id="mbnflick_017001" class="mbnFlickArea">

            <!-- inner flicking area -->
            <div id="mbnflick_017001" class="mbnFlickArea">
                <div class="mbn-panel"></div>
                <div class="mbn-panel"></div>
                <div class="mbn-panel"></div>
            </div>
        </div>
    </div>
    <div class="cateMain-panel">
        2nd pannel
    </div>
    <div class="cateMain-panel">
        3rd pannel
    </div>
</div>

And instantiating both the main and inner.

var mbnF_017001 = new eg.Flicking("#mbnflick_017001", { ... });
var cateMainFlick = new eg.Flicking("#cateMainFlick", , { ... });

The issue happens when you do flick action(normally touch event) on inner and at the same time main also receive touch event, even you disable the input(by .disableInput()).

Inside of flicking component has property value to control the state of event for multiple proposes and the issue happens that the control property value remains in touch hold state, because main and inner receive touch event at same time.

The correct approach is fixing the .disableInput() method to not react from event, but for now to fix it, which isn't recommended approach, just change inner property state value as below.

var mbnF_017001 = new eg.Flicking("#mbnflick_017001", { ... }).on({
    ...
    flickEnd : function(e) {
        ...
        cateMainFlick.enableInput();

        // change the touch state of main flicking
        cateMainFlick._conf.touch.holding = false;
    }
});

[netil]

@changdongchun closing issue for now. If it doesn't solve, reopen it otherwise post a new issue.

[changdongchun]

thank U. have a good day.