Commit 4bebb452 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Refactor Touch examples device/orientation changes. 

Changing terminology: using "tablet" and "phone" instead of "iPad" and
"iPhone".

Changing default device to "phone".  See also the updated examples.json
in touch-2.0.0 where I added device info to each example.

Move all the changeDevice and changeOrientation logic inside the view.
The state of buttons is now also handled inside the view - the buttons
now actually behave as expected.

Also the example title gets now updated and the XTemplate is created
inside initComponent.
parent d0998cf4

template/app/controller/Examples.js

+6 −63
Original line number Diff line number Diff line
@@ -6,9 +6,6 @@ Ext.define('Docs.controller.Examples', { 
    baseUrl: '#!/example',

    title: 'Examples',



    orientation: 'landscape',

    device: 'ipad',



    refs: [

        {

            ref: 'viewport',
@@ -52,14 +49,14 @@ Ext.define('Docs.controller.Examples', { 
            'examplecontainer': {

                afterrender: function(cmp) {

                    cmp.el.addListener('click', function(e, el) {

                        this.changeDevice('ipad');

                        this.changeDevice('tablet');

                    }, this, {

                        delegate: 'button.ipad'

                        delegate: 'button.tablet'

                    });

                    cmp.el.addListener('click', function(e, el) {

                        this.changeDevice('iphone');

                        this.changeDevice('phone');

                    }, this, {

                        delegate: 'button.iphone'

                        delegate: 'button.phone'

                    });

                    cmp.el.addListener('click', function(e, el) {

                        this.changeOrientation('portrait');
@@ -117,64 +114,10 @@ Ext.define('Docs.controller.Examples', { 
    },



    changeOrientation: function(orientation) {

        if (this.orientation === orientation) {

            return;

        }

        this.orientation = orientation;



        var container = Ext.get(Ext.query('.touchExample')[0]);

        var iframe = Ext.get(Ext.query('.touchExample iframe')[0]);



        Ext.Array.each(Ext.query('.example-toolbar .orientations button'), function(el) {

            Ext.get(el).removeCls('selected');

        });

        Ext.get(Ext.query('.example-toolbar .orientations button.' + this.orientation)).addCls('selected');



        container.removeCls(['portrait', 'landscape']);

        container.addCls(this.orientation);



        iframe.setStyle(this.iFrameDimensions());

        this.getPage().setOrientation(orientation);

    },



    changeDevice: function(device) {

        if (this.device === device) {

            return;

        }

        this.device = device;



        var container = Ext.get(Ext.query('.touchExample')[0]);

        var iframe = Ext.get(Ext.query('.touchExample iframe')[0]);



        Ext.Array.each(Ext.query('.example-toolbar .devices button'), function(el) {

            Ext.get(el).removeCls('selected');

        });

        Ext.get(Ext.query('.example-toolbar .devices button.' + this.device)).addCls('selected');



        container.removeCls(['iphone', 'ipad']);

        container.addCls(this.device);



        var example = this.getExample(this.activeUrl);

        example.orientation = this.orientation;

        example.device = this.device;

        Ext.apply(example, this.iFrameDimensions());



        this.getPage().clear();

        this.activateExampleCard();

        this.getPage().load(example);

    },



    iFrameDimensions: function() {

        if (this.device === 'ipad') {

            return {

                width: this.orientation === 'landscape' ? '1024px' : '768px',

                height: this.orientation === 'landscape' ? '768px' : '1024px'

            };

        }

        else {

            return {

                width: this.orientation === 'landscape' ? '480px' : '320px',

                height: this.orientation === 'landscape' ? '320px' : '480px'

            };

        }

        this.getPage().setDevice(device);

    }

});

template/app/view/examples/Container.js

+77 −17
Original line number Diff line number Diff line
@@ -17,11 +17,11 @@ Ext.define('Docs.view.examples.Container', { 
            xtype: 'container',

            dock: 'top',

            html: [

                '<h1>Kitchen Sink Example</h1>',

                '<h1 class="example-title">Example</h1>',

                '<div class="cls-grouping example-toolbar">',

                    '<div class="devices">',

                        '<button class="selected ipad">iPad</button>',

                        '<button class="iphone">iPhone</button>',

                        '<button class="phone selected">Phone</button>',

                        '<button class="tablet">Tablet</button>',

                    '</div>',

                    '<span class="separator">&nbsp;</span>',

                    '<div class="orientations">',
@@ -32,6 +32,14 @@ Ext.define('Docs.view.examples.Container', { 
            ].join('')

        }];



        // Template for the DIV containing device image and iframe

        this.tpl = new Ext.XTemplate(

            '<div class="touchExample {device} {orientation}">',

                '<iframe style="width: {width}; height: {height}; border: 0;" ',

                        'src="touch/examples/{url}"></iframe>',

            '</div>'

        );



        this.callParent(arguments);

    },
@@ -40,26 +48,78 @@ Ext.define('Docs.view.examples.Container', { 
     * @param {Object} example Example object

     */

    load: function(example) {

        example = Ext.applyIf(example, {

            device: 'ipad',

            orientation: 'landscape',

            width: '1024px',

            height: '768px'

        });

        // Copy example config over new object containing default values.

        // Don't modify the supplied config itself.

        this.example = Ext.apply({

            device: 'phone',

            orientation: 'landscape'

        }, example);



        this.tpl = this.tpl || new Ext.XTemplate(

            '<div class="touchExample {device} {orientation}">',

                '<iframe style="width: {width}; height: {height}; border: 0;" src="touch/examples/{url}"></iframe>',

            '</div>'

        );

        // Add dimensions of the current device in current orientation

        Ext.apply(this.example, this.getIFrameSize());



        this.update(this.tpl.apply(this.example));

        this.updateTitle();

        this.updateButtons();

    },



    /**

     * Changes the device that example is shown in.

     *

     * @param {String} device Either "phone" or "tablet"

     */

    setDevice: function(device) {

        this.example.device = device;

        this.load(this.example);

    },



        this.update(this.tpl.apply(example));

    /**

     * Changes the orientation of the device the example is shown in.

     *

     * @param {String} orientation Either "portrait" or "landscape"

     */

    setOrientation: function(orientation) {

        this.example.orientation = orientation;

        this.load(this.example);

    },



    updateTitle: function() {

        Ext.get(Ext.query('.example-title')).update(this.example.text + " Example");

    },



    updateButtons: function() {

        Ext.Array.each(Ext.query('.example-toolbar .orientations button'), function(el) {

            Ext.get(el).removeCls('selected');

        });

        Ext.get(Ext.query('.example-toolbar .orientations button.' + this.example.orientation)).addCls('selected');



        Ext.Array.each(Ext.query('.example-toolbar .devices button'), function(el) {

            Ext.get(el).removeCls('selected');

        });

        Ext.get(Ext.query('.example-toolbar .devices button.' + this.example.device)).addCls('selected');

    },



    /**

     * Clear the previously loaded example.

     * Clears the previously loaded example.

     */

    clear: function() {

        this.update('');

    },



    // Returns width and height of current device iframe.

    getIFrameSize: function() {

        // device dimensions in landscape orientation

        var landscape = {

            phone: {width: '480px', height: '320px'},

            tablet: {width: '1024px', height: '768px'}

        }[this.example.device];



        // return landscape w/h or swap the dimensions

        if (this.example.orientation === 'landscape') {

            return landscape;

        }

        else {

            return {width: landscape.height, height: landscape.width};

        }

    }

});

template/resources/sass/viewport.scss

+4 −4
Original line number Diff line number Diff line
@@ -1208,25 +1208,25 @@ a { 
      @include border-radius(10px);

      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); } } }



.ipad.landscape {

.tablet.landscape {

  padding: 113px 119px;

  width: 1271px;

  height: 1001px;

  background: url(../images/ipad-l.jpg) no-repeat; }



.ipad.portrait {

.tablet.portrait {

  padding: 113px 119px;

  width: 1001px;

  height: 1271px;

  background: url(../images/ipad-p.jpg) no-repeat; }



.iphone.landscape {

.phone.landscape {

  padding: 22px 127px;

  width: 724px;

  height: 368px;

  background: url(../images/iphone-l.jpg) no-repeat; }



.iphone.portrait {

.phone.portrait {

  padding: 127px 26px;

  width: 368px;

  height: 724px;