Touch examples (2d4c21c3) · Commits · extjs / jsduck

Rakefile

+1 −0

Original line number	Diff line number	Diff line
		@@ -353,6 +353,7 @@ class JsDuckRunner
		# Copy over the images that Sencha Touch documentation links to.
		def copy_touch2_images
		system "cp -r #{@sdk_dir}/touch/docs/resources #{@out_dir}/doc-resources"
		system "cp -r #{@sdk_dir}/touch/build #{@out_dir}/touch"
		end

		# Copy over the images that Animator documentation links to.

template/app/controller/Examples.js

+88 −0

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

		orientation: 'landscape',
		device: 'ipad',

		refs: [
		{
		ref: 'viewport',
		@@ -45,6 +48,35 @@ Ext.define('Docs.controller.Examples', {
		urlclick: function(url) {
		this.loadExample(url);
		}
		},
		'examplecontainer': {
		afterrender: function(cmp) {
		cmp.el.addListener('click', function(e, el) {
		this.changeDevice('ipad');
		}, this, {
		delegate: 'button.ipad'
		});
		cmp.el.addListener('click', function(e, el) {
		this.changeDevice('iphone');
		}, this, {
		delegate: 'button.iphone'
		});
		cmp.el.addListener('click', function(e, el) {
		this.changeDevice('nexus');
		}, this, {
		delegate: 'button.nexus'
		});
		cmp.el.addListener('click', function(e, el) {
		this.changeOrientation('portrait');
		}, this, {
		delegate: 'button.portrait'
		});
		cmp.el.addListener('click', function(e, el) {
		this.changeOrientation('landscape');
		}, this, {
		delegate: 'button.landscape'
		});
		}
		}
		});
		},
		@@ -87,5 +119,61 @@ Ext.define('Docs.controller.Examples', {
		}, this);
		}
		return this.map[url];
		},

		changeOrientation: function(orientation) {

		if (this.orientation === orientation) {
		return false;
		}
		this.orientation = orientation;

		var container = Ext.get(Ext.query('.touchExample')[0]),
		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);

		this.updateIframeDimensions(iframe);
		},

		changeDevice: function(device) {

		if (this.device === device) {
		return false;
		}
		this.device = device;

		var container = Ext.get(Ext.query('.touchExample')[0]),
		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);

		this.updateIframeDimensions(iframe);
		},

		updateIframeDimensions: function(iframe) {
		if (this.device == 'ipad') {
		iframe.setStyle({
		width: this.orientation == 'landscape' ? '1024px' : '768px',
		height: this.orientation == 'landscape' ? '768px' : '1024px',
		});
		} else {
		iframe.setStyle({
		width: this.orientation == 'landscape' ? '480px' : '320px',
		height: this.orientation == 'landscape' ? '320px' : '480px',
		});
		}
		}
		});

template/app/view/examples/Container.js

+33 −2

Original line number	Diff line number	Diff line
		@@ -4,17 +4,48 @@
		* Renders the example inside iframe.
		*/
		Ext.define('Docs.view.examples.Container', {
		extend: 'Ext.container.Container',
		extend: 'Ext.panel.Panel',
		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>Kitchen Sink Example</h1>',
		'<div class="cls-grouping example-toolbar">',
		'<div class="devices">',
		'<button class="selected ipad">iPad</button>',
		'<button class="iphone">iPhone</button>',
		// '<button class="nexus">Nexus S</button>',
		'</div>',
		'<span class="separator"> </span>',
		'<div class="orientations">',
		'<button class="landscape selected">Landscape</button>',
		'<button class="portrait">Portrait</button>',
		'<div>',
		'</div>'
		].join('')
		}];

		this.callParent(arguments);
		},

		/**
		* Loads example into the page.
		* @param {Object} example Example object
		*/
		load: function(example) {
		this.tpl = this.tpl \|\| new Ext.XTemplate(
		'<iframe style="width: 100%; height: 100%; border: 0;" src="extjs/examples/{url}"></iframe>'
		'<div class="touchExample ipad landscape">',
		'<iframe style="width: 1024px; height: 768px; border: 0;" src="touch/examples/{url}"></iframe>',
		'</div>'
		);

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

template/resources/images/ipad-l.jpg

0 → 100644

+33.5 KiB

Loading image diff...

template/resources/images/ipad-p.jpg

0 → 100644

+34 KiB

Loading image diff...