From 85a386a885c0234e298c5b9e1fcd036c5412cfd7 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Wed, 28 Sep 2011 17:16:18 +0300
Subject: [PATCH] Add --touch-examples-ui option.

Using this will switch on the Touch-style examples page where
examples are shown inside iPhone/iPad images.

For now the option will also decide from where the icons for examples
are loaded: touch/examles or extjs/examples/shared/screens

There are now two implementations of example container:

- Container
- TouchContainer
---
 Rakefile                                     |   1 +
 lib/jsduck/app.rb                            |   1 +
 lib/jsduck/options.rb                        |   7 ++
 template/app/controller/Examples.js          |   2 +-
 template/app/view/Viewport.js                |   5 +-
 template/app/view/examples/Container.js      | 102 +--------------
 template/app/view/examples/Index.js          |   5 +-
 template/app/view/examples/TouchContainer.js | 125 +++++++++++++++++++
 template/template.html                       |   6 +-
 9 files changed, 152 insertions(+), 102 deletions(-)
 create mode 100644 template/app/view/examples/TouchContainer.js

diff --git a/Rakefile b/Rakefile
index 37f2148e..4b5a2ed4 100644
--- a/Rakefile
+++ b/Rakefile
@@ -225,6 +225,7 @@ class JsDuckRunner
       "--videos", "#{@sdk_dir}/touch/docs/videos.json",
       "--guides", "#{@sdk_dir}/touch/docs/guides.json",
       "--examples", "#{@sdk_dir}/touch/docs/examples.json",
+      "--touch-examples-ui",
       "--output", "#{@out_dir}",
       "--external=google.maps.Map,google.maps.LatLng",
       "--images", "#{@sdk_dir}/touch/docs/resources",
diff --git a/lib/jsduck/app.rb b/lib/jsduck/app.rb
index 9a16d650..2c2fcd54 100644
--- a/lib/jsduck/app.rb
+++ b/lib/jsduck/app.rb
@@ -262,6 +262,7 @@ module JsDuck
         "{extjs_path}" => @opts.extjs_path,
         "{local_storage_db}" => @opts.local_storage_db,
         "{show_print_button}" => @opts.seo ? "true" : "false",
+        "{touch_examples_ui}" => @opts.touch_examples_ui ? "true" : "false",
         "{welcome}" => @welcome.to_html,
         "{categories}" => @categories.to_html,
         "{guides}" => @guides.to_html,
diff --git a/lib/jsduck/options.rb b/lib/jsduck/options.rb
index 6f953afa..c079ac9c 100644
--- a/lib/jsduck/options.rb
+++ b/lib/jsduck/options.rb
@@ -38,6 +38,7 @@ module JsDuck
     attr_accessor :template_links
     attr_accessor :extjs_path
     attr_accessor :local_storage_db
+    attr_accessor :touch_examples_ui
     attr_accessor :ext_namespaces
 
     def initialize
@@ -103,6 +104,7 @@ module JsDuck
       @template_links = false
       @extjs_path = "extjs/ext-all.js"
       @local_storage_db = "docs"
+      @touch_examples_ui = false
       @ext_namespaces = ["Ext"]
     end
 
@@ -296,6 +298,11 @@ module JsDuck
           @local_storage_db = name
         end
 
+        opts.on('--touch-examples-ui',
+          "Use phone/tablet UI for examples.", " ") do
+          @touch_examples_ui = true
+        end
+
         opts.on('--ext-namespaces=Ext,Foo', Array,
           "Namespace(s) of ExtJS. Defaults to 'Ext'.", " ") do |ns|
           @ext_namespaces = ns
diff --git a/template/app/controller/Examples.js b/template/app/controller/Examples.js
index 9fbde193..6754a991 100644
--- a/template/app/controller/Examples.js
+++ b/template/app/controller/Examples.js
@@ -46,7 +46,7 @@ Ext.define('Docs.controller.Examples', {
                     this.loadExample(url);
                 }
             },
-            'examplecontainer': {
+            'touchexamplecontainer': {
                 afterrender: function(cmp) {
                     cmp.el.addListener('click', function(e, el) {
                         this.changeDevice('tablet');
diff --git a/template/app/view/Viewport.js b/template/app/view/Viewport.js
index 89e053be..233b9459 100644
--- a/template/app/view/Viewport.js
+++ b/template/app/view/Viewport.js
@@ -15,7 +15,8 @@ Ext.define('Docs.view.Viewport', {
         'Docs.view.videos.Index',
         'Docs.view.videos.Container',
         'Docs.view.examples.Index',
-        'Docs.view.examples.Container'
+        'Docs.view.examples.Container',
+        'Docs.view.examples.TouchContainer'
     ],
 
     id: 'viewport',
@@ -128,7 +129,7 @@ Ext.define('Docs.view.Viewport', {
                                     id: 'exampleindex'
                                 },
                                 {
-                                    xtype: 'examplecontainer',
+                                    xtype: Docs.touchExamplesUi ? 'touchexamplecontainer' : 'examplecontainer',
                                     id: 'example'
                                 }
                             ]
diff --git a/template/app/view/examples/Container.js b/template/app/view/examples/Container.js
index d1c8feb3..0972d538 100644
--- a/template/app/view/examples/Container.js
+++ b/template/app/view/examples/Container.js
@@ -4,40 +4,13 @@
  * Renders the example inside iframe.
  */
 Ext.define('Docs.view.examples.Container', {
-    extend: 'Ext.panel.Panel',
+    extend: 'Ext.container.Container',
     alias: 'widget.examplecontainer',
     layout: 'fit',
 
-    cls: 'example-container iScroll',
-    autoScroll: true,
-    bodyPadding: '10 0 5 0',
-
     initComponent: function() {
-        this.dockedItems = [{
-            xtype: 'container',
-            dock: 'top',
-            html: [
-                '<h1 class="example-title">Example</h1>',
-                '<div class="cls-grouping example-toolbar">',
-                    '<div class="devices">',
-                        '<button class="phone selected">Phone</button>',
-                        '<button class="tablet">Tablet</button>',
-                    '</div>',
-                    '<span class="separator">&nbsp;</span>',
-                    '<div class="orientations">',
-                        '<button class="landscape selected">Landscape</button>',
-                        '<button class="portrait">Portrait</button>',
-                    '<div>',
-                '</div>'
-            ].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>'
+            '<iframe style="width: 100%; height: 100%; border: 0;" src="extjs/examples/{url}"></iframe>'
         );
 
         this.callParent(arguments);
@@ -48,78 +21,13 @@ Ext.define('Docs.view.examples.Container', {
      * @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.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);
-    },
-
-    /**
-     * 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');
+        this.update(this.tpl.apply(example));
     },
 
     /**
-     * Clears the previously loaded example.
+     * Clear 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};
-        }
     }
-});
+});
\ No newline at end of file
diff --git a/template/app/view/examples/Index.js b/template/app/view/examples/Index.js
index fe4cd8fc..31d38427 100644
--- a/template/app/view/examples/Index.js
+++ b/template/app/view/examples/Index.js
@@ -13,11 +13,14 @@ Ext.define('Docs.view.examples.Index', {
     autoScroll: true,
 
     initComponent: function() {
+        var baseUrl = Docs.touchExamplesUi ? "touch/examples" : "extjs/examples/shared/screens";
+
         this.items = [
             { xtype: 'container', html: '<h1 class="eg">Examples</h1>' },
             Ext.create('Docs.view.ThumbList', {
                 itemTpl: [
-                    '<dd ext:url="#!/example/{url}"><img src="touch/examples/{icon}"/>',
+                    '<dd ext:url="#!/example/{url}">',
+                        '<img src="'+baseUrl+'/{icon}"/>',
                         '<div><h4>{text}',
                             '<tpl if="status === \'new\'">',
                                 '<span class="new-sample"> (New)</span>',
diff --git a/template/app/view/examples/TouchContainer.js b/template/app/view/examples/TouchContainer.js
new file mode 100644
index 00000000..02e6c422
--- /dev/null
+++ b/template/app/view/examples/TouchContainer.js
@@ -0,0 +1,125 @@
+/**
+ * The example page for Sencha Touch.
+ *
+ * Renders the example inside an image of iPhone or iPad.
+ */
+Ext.define('Docs.view.examples.TouchContainer', {
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.touchexamplecontainer',
+    layout: 'fit',
+
+    cls: 'example-container iScroll',
+    autoScroll: true,
+    bodyPadding: '10 0 5 0',
+
+    initComponent: function() {
+        this.dockedItems = [{
+            xtype: 'container',
+            dock: 'top',
+            html: [
+                '<h1 class="example-title">Example</h1>',
+                '<div class="cls-grouping example-toolbar">',
+                    '<div class="devices">',
+                        '<button class="phone selected">Phone</button>',
+                        '<button class="tablet">Tablet</button>',
+                    '</div>',
+                    '<span class="separator">&nbsp;</span>',
+                    '<div class="orientations">',
+                        '<button class="landscape selected">Landscape</button>',
+                        '<button class="portrait">Portrait</button>',
+                    '<div>',
+                '</div>'
+            ].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);
+    },
+
+    /**
+     * Loads example into the page.
+     * @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.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);
+    },
+
+    /**
+     * 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');
+    },
+
+    /**
+     * 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};
+        }
+    }
+});
diff --git a/template/template.html b/template/template.html
index 86971e4e..06efc48e 100644
--- a/template/template.html
+++ b/template/template.html
@@ -24,7 +24,11 @@
   <script type="text/javascript" src="http://use.typekit.com/uxj6dew.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   <script type="text/javascript">
-    Docs = {localStorageDb: "{local_storage_db}", showPrintButton: {show_print_button}};
+    Docs = {
+        localStorageDb: "{local_storage_db}",
+        showPrintButton: {show_print_button},
+        touchExamplesUi: {touch_examples_ui}
+    };
   </script>
   <script type="text/javascript" src="{extjs_path}"></script>
   <!-- BEGIN JS -->
-- 
GitLab