locked
FlipView and SemanticZoom touch events problem RRS feed

  • Question

  • Hi

    I have modified the sample of SemanticZoom for custom controls sample ,  and let the flipview implement the IZoomableView. 

    It work well with the flipview, fliping through views with  the navigate button and swipe on screen.

    On the other hand , the SemanticZoom can only work with "Ctrl +" and "Ctrl -", but the with the pinch and stretch gestures or Ctrl + scroll on mouse.

    By the way , if i put a div into the SemanticZoom, the pinch and stretch gestures can work in this div.

    In my point, I think the flipview has catch the event of pinch, and the SemanticZoom can't get it. 

    Do anyone face the same problem? How do you solve ?

    Any idea will be appreciated. 

    Basically,  here is the code :

    // Custom control var ZoomableView = WinJS.Class.define(function (flipview) { // Constructor this._flipview = flipview; }, { // Public methods getPanAxis: function () { return this._flipview._getPanAxis(); }, configureForZoom: function (isZoomedOut, isCurrentView, triggerZoom, prefetchedPages) { this._flipview._configureForZoom(isZoomedOut, isCurrentView, triggerZoom, prefetchedPages); }, setCurrentItem: function (x, y) { this._flipview._setCurrentItem(x, y); }, getCurrentItem: function () { return this._flipview._getCurrentItem(); }, beginZoom: function () { this._flipview._beginZoom(); }, positionItem: function (/*@override*/item, position) { return this._flipview._positionItem(item, position); }, endZoom: function (isCurrentView) { this._flipview._endZoom(isCurrentView); }, handlePointer: function (pointerId) { this._flipview._handlePointer(pointerId); } }); WinJS.Namespace.define("clat", { FlipView: WinJS.Class.define(function (element, options) { this._element = element; this._flipview = document.createElement('div'); this._flipview_wincontrol = new WinJS.UI.FlipView(this._flipview);

    /* this div work well with SemanticZoom var odiv = document.createElement('div') odiv.style.width = '200px'; odiv.style.height = '200px'; odiv.style.backgroundColor = 'red'; this._element.appendChild(odiv);

    */ this._element.appendChild(this._flipview); this._element.winControl = this; }, { // Public properties zoomableView: { get: function () { if (!this._zoomableView) { this._zoomableView = new ZoomableView(this); } return this._zoomableView; } }, // Private properties _getPanAxis: function () { return "horizontal"; }, _configureForZoom: function (isZoomedOut, isCurrentView, triggerZoom, prefectchedPages) { this._isZoomedOut = isZoomedOut; this._triggerZoom = triggerZoom; }, _setCurrentItem: function (x, y) { }, _beginZoom: function () { }, _getCurrentItem: function () { var pos = { width: 800, height: 600 }; return WinJS.Promise.wrap({ item: 0/*this._flipview_wincontrol.currentPage*/, }, _positionItem: function (/*@override*/item, position) { return WinJS.Promise.wrap({ x: 0, y: 0 }); }, _endZoom: function (isCurrentView, setFocus) { }, _handlePointer: function (pointerId) { this._flipview.msSetPointerCapture(pointerId); } }) });

    Then , i have put the clat.FlipView into the WinJS.UI.SemanticZoom.

    Here is the code:

    <div id="-SlideShow-Template" data-win-control="WinJS.Binding.Template" style="display: none">
                    <div class="overlaidItemTemplate">
                        <img class="image" data-win-bind="src: url;width: width;height:height" />
                    </div>
                </div>
                <div id="-PhotoDetail-Template" data-win-control="WinJS.Binding.Template" style="display: none">
                    <div class="-photo-detail-Container">
                        <div class="-photo-detail-info">
                            <p class="-photo-detail-title" data-win-bind="innerText: title"></p>
                            <p class="-photo-detail-resolution" >
                                <span data-win-bind="innerText:width"></span> * <span data-win-bind="innerText:height"></span>
                            </p>
                            <p class="-photo-detail-date" data-win-bind="innerText:formattime"></p>
                        </div>
                        <div class="-photo-detail-photo">
                            <img class="-photo-detail" data-win-bind="style.left:left;style.top:top;style.width:widthP;style.height:heightP;src:url;" />
                        </div>
                    </div>
                </div>
                <div id="-SlideShow-sezoDiv"
                    data-win-control="WinJS.UI.SemanticZoom"
                    data-win-options="{ zoomFactor: 0.5, initiallyZoomedOut: false ,enableButton :true}">
                    <div id="-SlideShow-Container-zi" class="flipView" data-win-control="clat.FlipView">
                    </div>
                    <div id="-SlideShow-Container-zo" class="flipView" data-win-control="clat.FlipView">
                    </div>
                </div>


    • Edited by escaflone Monday, August 27, 2012 2:51 AM
    Monday, August 27, 2012 2:47 AM

Answers

  • Thanks , jpsanders.

    I have try it again.

    Obviously, we can use finger (gesture)

    1. switch the semanticZoom by moving two fingers apart/toward each other

    2. flip through the flipview by make quick drag gestures in the desired direction

    .

    At first , i have not got any touch machine , so i can't test by finger.
    • Edited by escaflone Thursday, September 6, 2012 7:32 AM
    • Marked as answer by Dino He Monday, September 24, 2012 3:13 AM
    Thursday, September 6, 2012 7:15 AM

All replies

  • Can you post a complete project?

    Jeff Sanders (MSFT)

    Monday, August 27, 2012 6:04 PM
    Moderator
  • Thanks , jpsanders.

    I have try it again.

    Obviously, we can use finger (gesture)

    1. switch the semanticZoom by moving two fingers apart/toward each other

    2. flip through the flipview by make quick drag gestures in the desired direction

    .

    At first , i have not got any touch machine , so i can't test by finger.
    • Edited by escaflone Thursday, September 6, 2012 7:32 AM
    • Marked as answer by Dino He Monday, September 24, 2012 3:13 AM
    Thursday, September 6, 2012 7:15 AM
  • So you are ok now and you don't need to post a complete repro for us?

    -Jeff


    Jeff Sanders (MSFT)

    Friday, September 7, 2012 2:26 PM
    Moderator