locked
Can't recieve the MSGesture events from the img tag in WinJS.UI.Flipview

    Question

  • I designed a Flipview which contains a img tag. And I want to support MSGesture events on the img tag. But it is not work. Only MSPointerDown event can be recieved and MSGestureStart, MSGestureChange and MSGestureEnd events can't be recieved. The relative code is as following:

    function ready() {

    var flipview = element.querySelector("#picView");.winControl;
                WinJS.UI.setOptions(flipview, {
                    itemTemplate: flipRender,
                    itemDataSource: dataSource,
                    onpagecompleted: flipPagecompleted
                });

    .....

    }

    function flipRender(){

            var element = document.createElement("div");
            element.className = "picViewTemplate";
            WinJS.Utilities.setInnerHTMLUnsafe(element, "<img /><video controls='controls'/><h2>...</h2>");
            var img = element.querySelector("img");
            var video = element.querySelector("video");
            video.style.display = "none";
            var title = element.querySelector("h2");
            title.className = "picNameTemplate";

            // set the gesture event handlers
            img.addEventListener("MSPointerDown", onPointerDown, false);
            img.addEventListener("MSPointerUp", onPointerUp, false);
            img.addEventListener("MSPointerMove", onPointerMove, false);

            img.addEventListener("MSGestureStart", onGestureStart, false);
            img.addEventListener("MSGestureChange", onGestureChange, false);
            img.addEventListener("MSGestureEnd", onGestureEnd, false);
            img.addEventListener("MSInertiaStart", insertiaStart, false);

            var targetGesture = new MSGesture();
            targetGesture.target = img;
            img.gesture = targetGesture;

    .....

    }


    function onPointerDown(e) {
            if (e.currentTarget.gesture.target == null)
                e.currentTarget.gesture.target = e.currentTarget;
            try {
                e.currentTarget.gesture.addPointer(e.pointerId);   // Can reach this line
            }
            catch (e) { }
        }

        function onPointerUp(e) {
        }

        function onPointerMove(e) {
            if (e.currentTarget.gesture.target == null)
                e.currentTarget.gesture.target = e.currentTarget;
            try {
                var pps = e.getIntermediatePoints(e.target);
                e.currentTarget.gesture.processMoveEvents(pps);
            }
            catch (e) { }
        }

        function onGestureStart(e) {
            // Can't recieve this event
        }

        function onGestureChange(e) {

            // Can't recieve this event

        }

        function onGestureEnd(e) {

           // Can't recieve this event   

       }

        function insertiaStart(event) {

          // Can't recieve this event

        }

    Tuesday, April 29, 2014 3:06 AM

Answers

  • It looks like MSGesture events only work on elements that are already on DOM. Flipview dynamically adds elements to DOM so maybe you can resolve this by adding the MSGesture event after flipview renders the elements.

    Maybe something like

    flipView.addEventListener("pagecompleted", function(){
        gesture = new MSGesture();
        img = document.getElementById("YourImgID");
        gesture.target = img;
        img.addEventListener("MSGestureStart", onGestureStart, false);
    
    });
    Just be careful don't double bind the event.

    Wednesday, April 30, 2014 5:20 AM