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.

Answer 1

You just need to define few functions for zoomableView.

Answer 2

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 :( )

Answer 3

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.

Answer 4

Thanks for the answer :). I'll try it!