locked
SemanticZoom with custom controls

    Question

  • Hi, is there a simple way to use Semantic View on a custom control.

    Here is my HTML :

    <div id="semanticZoom" data-win-control="WinJS.UI.SemanticZoom">
        <div id="zoomedIn">
           <!-- All my zoomedIn stuff -->
        </div>
    
        <div id="zoomedOut">
            <!-- All my zoomedOut stuff -->
        </div>
    </div>

    I looked at this sample but I find it too complicated for the simple thing I want to do (I hope there is an easier way =) ) and the IZoomable reference is really unclear...

    Thanks,

    Halfman.


    • Edited by MrHalfman Thursday, September 19, 2013 7:57 AM
    Thursday, September 19, 2013 7:56 AM

Answers

  • From ui.js:

    var ZoomableView = WinJS.Class.define(function ZoomableView_ctor(listView) {
        // Constructor
    
        this._listView = listView;
    }, {
        // Public methods
    
        getPanAxis: function () {
            return this._listView._getPanAxis();
        },
    
        configureForZoom: function (isZoomedOut, isCurrentView, triggerZoom, prefetchedPages) {
            this._listView._configureForZoom(isZoomedOut, isCurrentView, triggerZoom, prefetchedPages);
        },
    
        setCurrentItem: function (x, y) {
            this._listView._setCurrentItem(x, y);
        },
    
        getCurrentItem: function () {
            return this._listView._getCurrentItem();
        },
    
        beginZoom: function () {
            this._listView._beginZoom();
        },
    
        positionItem: function (item, position) {
            return this._listView._positionItem(item, position);
        },
    
        endZoom: function (isCurrentView) {
            this._listView._endZoom(isCurrentView);
        }
    });
    
    and your control must implement this class and make public using zoomableView property.

    • Marked as answer by MrHalfman Tuesday, September 24, 2013 7:24 AM
    Sunday, September 22, 2013 8:01 AM

All replies

  • You just need to define few functions for zoomableView.
    Thursday, September 19, 2013 8:54 AM
  • Thanks but can you be more precise ? What functions ? Where do I have to define them ?

    Sorry but I'm a little bit lost with this control. (In addition I'm French and I've got a bad english :( )

    Thursday, September 19, 2013 9:08 AM
  • From ui.js:

    var ZoomableView = WinJS.Class.define(function ZoomableView_ctor(listView) {
        // Constructor
    
        this._listView = listView;
    }, {
        // Public methods
    
        getPanAxis: function () {
            return this._listView._getPanAxis();
        },
    
        configureForZoom: function (isZoomedOut, isCurrentView, triggerZoom, prefetchedPages) {
            this._listView._configureForZoom(isZoomedOut, isCurrentView, triggerZoom, prefetchedPages);
        },
    
        setCurrentItem: function (x, y) {
            this._listView._setCurrentItem(x, y);
        },
    
        getCurrentItem: function () {
            return this._listView._getCurrentItem();
        },
    
        beginZoom: function () {
            this._listView._beginZoom();
        },
    
        positionItem: function (item, position) {
            return this._listView._positionItem(item, position);
        },
    
        endZoom: function (isCurrentView) {
            this._listView._endZoom(isCurrentView);
        }
    });
    
    and your control must implement this class and make public using zoomableView property.

    • Marked as answer by MrHalfman Tuesday, September 24, 2013 7:24 AM
    Sunday, September 22, 2013 8:01 AM
  • Thanks for the answer :). I'll try it!

    Monday, September 23, 2013 6:49 AM