Commit 87532737 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Refactor Touch examples HTML created to separate class. 

The device widths are all calculated now in one place.
parent ec4612b6

template/app/view/examples/Device.js

0 → 100644
+78 −0
Original line number Diff line number Diff line 
/**

 * Creates HTML for Sencha Touch (inline-)example.

 */

Ext.define('Docs.view.examples.Device', {

    config: {

        /**

         * @cfg {String} url

         * Path to the example.

         */

        url: "",

        /**

         * @cfg {String} id

         * ID for the iframe. Auto-generated by default.

         */

        id: undefined,

        /**

         * @cfg {String} device

         * Either phone or tablet.

         * @accessor

         */

        device: 'phone',

        /**

         * @cfg {String} orientation

         * Either landscape or portrait.

         * @accessor

         */

        orientation: 'landscape'

    },



    constructor: function(cfg) {

        Ext.apply(this, cfg);

        Ext.apply(this, this.getIframeSize());

        this.id = this.id || Ext.id();



        // Template for the DIV containing device image and iframe

        this.tpl = new Ext.XTemplate(

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

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

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

            '</div>'

        );

    },



    /**

     * Returns the HTML displaying the example in this device.

     * @return {String}

     */

    toHtml: function() {

        return this.tpl.apply(this);

    },



    setDevice: function(device) {

        this.device = device;

        Ext.apply(this, this.getIframeSize());

    },



    setOrientation: function(orientation) {

        this.orientation = orientation;

        Ext.apply(this, this.getIframeSize());

    },



    // Returns width and height of current device iframe.

    getIframeSize: function() {

        // device dimensions in landscape orientation

        var landscape = {

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

            tablet: {width: '717px', height: '538px'}

        }[this.device];



        // return landscape w/h or swap the dimensions

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

            return landscape;

        }

        else {

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

        }

    }

});

template/app/view/examples/InlinePreview.js

+6 −7
Original line number Diff line number Diff line
@@ -3,6 +3,10 @@ 
 */

Ext.define('Docs.view.examples.InlinePreview', {

    extend: 'Ext.Panel',

    requires: [

        'Docs.view.examples.Device'

    ],



    bodyPadding: '0 10',



    statics: {
@@ -17,16 +21,11 @@ Ext.define('Docs.view.examples.InlinePreview', { 


    getHtml: function() {

        if (Docs.touchExamplesUi) {

            var tpl = new Ext.XTemplate(

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

                    '<iframe id="{id}" style="border: 0;"></iframe>',

                '</div>'

            );

            return tpl.apply({

            return Ext.create('Docs.view.examples.Device', {

                id: this.getIframeId(),

                device: this.options.tablet ? "tablet" : "phone",

                orientation: this.options.portrait ? "portrait" : "landscape"

            });

            }).toHtml();

        }

        else {

            var tpl = new Ext.XTemplate(

template/app/view/examples/TouchContainer.js

+23 −44
Original line number Diff line number Diff line
@@ -6,8 +6,11 @@ 
Ext.define('Docs.view.examples.TouchContainer', {

    extend: 'Ext.panel.Panel',

    alias: 'widget.touchexamplecontainer',

    layout: 'fit',

    requires: [

        'Docs.view.examples.Device'

    ],



    layout: 'fit',

    cls: 'example-container iScroll',

    autoScroll: true,

    bodyPadding: '10 0 5 0',
@@ -32,14 +35,6 @@ Ext.define('Docs.view.examples.TouchContainer', { 
            ].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);

    },
@@ -48,17 +43,17 @@ Ext.define('Docs.view.examples.TouchContainer', { 
     * @param {Object} example Example object

     */

    load: function(example) {

        // 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);



        // Add dimensions of the current device in current orientation

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

        this.title = example.text + " Example";

        this.device = Ext.create('Docs.view.examples.Device', {

            url: "touch/examples/" + example.url,

            device: example.device || "phone",

            orientation: example.orientation || "landscape"

        });

        this.refresh();

    },



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

    refresh: function() {

        this.update(this.device.toHtml());

        this.updateScale();

        this.updateTitle();

        this.updateButtons();
@@ -70,8 +65,8 @@ Ext.define('Docs.view.examples.TouchContainer', { 
     * @param {String} device Either "phone" or "tablet"

     */

    setDevice: function(device) {

        this.example.device = device;

        this.load(this.example);

        this.device.setDevice(device);

        this.refresh();

    },



    /**
@@ -80,13 +75,13 @@ Ext.define('Docs.view.examples.TouchContainer', { 
     * @param {String} orientation Either "portrait" or "landscape"

     */

    setOrientation: function(orientation) {

        this.example.orientation = orientation;

        this.load(this.example);

        this.device.setOrientation(orientation);

        this.refresh();

    },



    // Scale down the example when in tablet mode

    updateScale: function() {

        if (this.example.device === "tablet") {

        if (this.device.getDevice() === "tablet") {

            var iframe = Ext.query('iframe', this.el.dom)[0];

            iframe.onload = function() {

                var style = document.createElement("style");
@@ -98,19 +93,19 @@ Ext.define('Docs.view.examples.TouchContainer', { 
    },



    updateTitle: function() {

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

        Ext.get(Ext.query('.example-title')).update(this.title);

    },



    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.get(Ext.query('.example-toolbar .orientations button.' + this.device.getOrientation())).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');

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

    },



    /**
@@ -118,22 +113,6 @@ Ext.define('Docs.view.examples.TouchContainer', { 
     */

    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: '717px', height: '538px'}

        }[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 −16
Original line number Diff line number Diff line
@@ -1210,35 +1210,23 @@ a { 


.tablet.landscape {

  padding: 79px 83px;

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

  iframe {

    width: 717px;

    height: 538px; } }

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



.tablet.portrait {

  padding: 83px 83px;

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

  iframe {

    width: 538px;

    height: 717px; } }

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



.phone.landscape {

  padding: 22px 127px;

  width: 724px;

  height: 368px;

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

  iframe {

    width: 480px;

    height: 320px; } }

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



.phone.portrait {

  padding: 127px 26px;

  width: 368px;

  height: 724px;

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

  iframe {

    width: 320px;

    height: 480px; } }

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



.example-container {

  h1 {