Move videos into a tabs. Max width for tabs (7d551695) · Commits · extjs / jsduck

template/app/Application.js

+3 −3

Original line number	Diff line number	Diff line
		@@ -46,9 +46,9 @@ Ext.define('Docs.Application', {
		Docs.initEventTracking();
		}

		setInterval(function(){
		Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
		}, 1000)
		// setInterval(function(){
		// Ext.DomQuery.select('link')[4].href = "resources/css/viewport.css?" + Math.ceil(Math.random() * 100000000)
		// }, 1000)
		}

		});

template/app/controller/Tabs.js

+12 −0

Original line number	Diff line number	Diff line
		@@ -16,6 +16,10 @@ Ext.define('Docs.controller.Tabs', {
		{
		ref: 'exampleTree',
		selector: 'examplestree'
		},
		{
		ref: 'videoTree',
		selector: 'videostree'
		}
		],

		@@ -41,6 +45,13 @@ Ext.define('Docs.controller.Tabs', {
		scope: this
		});

		this.getController('Videos').addListener({
		showVideo: function(video) {
		this.addTabFromTree(video, this.getVideoTree());
		},
		scope: this
		});

		this.control({
		'container [componentCls=doctabs]': {
		afterrender: function(cmp) {
		@@ -62,6 +73,7 @@ Ext.define('Docs.controller.Tabs', {
		*/
		addTabFromTree: function(url, tree, noAnimate, noActivate) {
		var treeRecord = tree.findRecordByUrl(url);
		console.log(url, tree, treeRecord)
		if (treeRecord && treeRecord.raw) {
		Ext.getCmp('doctabs').addTab({
		href: '#' + treeRecord.raw.url,

template/app/controller/Videos.js

+31 −27

Original line number	Diff line number	Diff line
		@@ -5,15 +5,25 @@ Ext.define('Docs.controller.Videos', {
		extend: 'Ext.app.Controller',

		init: function() {

		this.addEvents(
		/**
		* @event showVideo
		* Fired after a video is shown. Used for analytics event tracking.
		* @param {String} video name of the video.
		*/
		"showVideo"
		);

		this.control({
		'videoindex > thumblist': {
		urlclick: function(url) {
		this.openVideo(url);
		this.loadVideo(url);
		}
		},
		'videostree': {
		videoclick: function(id) {
		this.openVideo(id);
		videoclick: function(url) {
		this.loadVideo(url);
		}
		}
		});
		@@ -26,32 +36,26 @@ Ext.define('Docs.controller.Videos', {
		Ext.getCmp('tree-container').show();
		},

		openVideo: function(videoId) {
		loadVideo: function(url, noHistory) {
		var videoRe = url.match(/[0-9]+$/),
		videoId = videoRe[0];

		if (this.currentVideo === videoId) {
		return this.activateExampleCard();
		}
		this.currentVideo = videoId;

		Ext.create('Ext.Window', {
		title: 'Video',
		width: 660,
		height: 431,
		modal: true,
		html: '<iframe id="videoplayer" src="' + this.getUrl(videoId) + '" width="640" height="360" frameborder="0" style="margin: 5px auto 0 auto; display: block;"></iframe>',
		bbar: [
		'->',
		{
		xtype: 'button',
		text: '« Previous',
		handler: this.prev,
		scope: this
		noHistory \|\| Docs.History.push('#' + url);
		this.fireEvent('showVideo', url);

		var ifr = document.getElementById("videoplayer");
		ifr.contentWindow.location.replace(this.getUrl(videoId));
		this.activateExampleCard();
		},
		'-',
		{
		xtype: 'button',
		text: 'Next »',
		handler: this.next,
		scope: this
		}
		]
		}).show();

		activateExampleCard: function() {
		Ext.getCmp('card-panel').layout.setActiveItem('video');
		Ext.getCmp('tree-container').layout.setActiveItem(3);
		},

		getUrl: function(videoId) {

template/app/view/Viewport.js

+6 −0

Original line number	Diff line number	Diff line
		@@ -104,6 +104,7 @@ Ext.define('Docs.view.Viewport', {
		cls: 'card-panel',
		xtype: 'container',
		layout: 'card',
		deferredRender: true,
		items: [
		{
		autoScroll: true,
		@@ -146,6 +147,11 @@ Ext.define('Docs.view.Viewport', {
		{
		xtype: 'videoindex',
		id: 'videos'
		},
		{
		xtype: 'container',
		id: 'video',
		html: '<iframe id="videoplayer" src="egIframe.html" width="640" height="360" frameborder="0" style="margin: 5px auto 0 auto; display: block;"></iframe>'
		}
		]
		}

template/app/view/index/Welcome.js

+29 −16

Original line number	Diff line number	Diff line
		@@ -8,21 +8,34 @@ Ext.define('Docs.view.index.Welcome', {
		cls: 'welcome',

		html: [
		'<img src="resources/images/welcome.jpg" style="display: block; margin: 10px auto 0 auto;" />',
		'<h2>SDK News</h2>',
		'<div>July 24, 2011. Ext 4.0.5 Released (support subscribers only)</div>',
		'<div>June 29, 2011. Ext 4.0.4 Released (support subscribers only)</div>',
		'<div>June 14, 2011. Ext 4.0.3 Released (support subscribers only)</div>',
		'<div>June 9, 2011. Ext 4.0.2a Released</div>',
		'<div>May 17, 2011. Ext 4.0.1 Released</div>',
		'<div>April 26, 2011. Ext 4.0.0 Final Released</div>',
		'<div>April 14, 2011. Ext 4 Beta 3 Released</div>',
		'<div>April 6, 2011. Ext 4 Beta 2 Released</div>',
		'<div>March 30, 2011. Ext 4 Beta 1 Released</div>',
		'<div>March 18, 2011. Ext 4 PR 5 Released</div>',
		'<div>March 15, 2011. Ext 4 PR 4 Released</div>',
		'<div>March 3, 2011. Ext 4 PR 3 Released</div>',
		'<div>February 23, 2011. Ext 4 PR 2 Released</div>',
		'<div>February 16, 2011. Ext 4 PR 1 Released</div>'
		'<h1>SDK Updates</h1>',
		'<div>Jul 24. Ext 4.0.5 Released (support subscribers only)</div>',
		'<div>Jun 29. Ext 4.0.4 Released (support subscribers only)</div>',
		'<div>Jun 14. Ext 4.0.3 Released (support subscribers only)</div>',
		'<div>Jun 9. Ext 4.0.2a Released</div>',
		'<div>May 17. Ext 4.0.1 Released</div>',
		'<div>Apr 26. Ext 4.0.0 Final Released</div>',
		'<div>Apr 14. Ext 4 Beta 3 Released</div>',
		'<div>Apr 6. Ext 4 Beta 2 Released</div>',
		'<div>Mar 30. Ext 4 Beta 1 Released</div>',
		'<div>Mar 18. Ext 4 PR 5 Released</div>',
		'<div>Mar 15. Ext 4 PR 4 Released</div>',
		'<div>Mar 3. Ext 4 PR 3 Released</div>',
		'<div>Feb 23. Ext 4 PR 2 Released</div>',
		'<div>Feb 16. Ext 4 PR 1 Released</div>',
		'<h1>Documentation updates</h1>',
		'<div>Jul 14. Favorite classes</div>',
		'<div>Jul 8. Search results pagination</div>',
		'<div>Jun 29. Components Guide</div>',
		'<div>Jun 26. Inline examples</div>',
		'<div>Jun 21. Forms guide</div>',
		'<div>Jun 16. Tree guide updates</div>',
		'<div>Jun 15. Layouts guide</div>',
		'<div>Jun 9. Grid guide updates</div>',
		'<div>Jun 6. Data guide updates</div>',
		'<div>Jun 2. MVC guide updates</div>',
		'<div>May 31. Getting started guide updates</div>',
		'<h1>Release Notes</h1>',
		''
		]
		});