Video clicking (77e062c1) · Commits · extjs / jsduck

template/app/controller/Videos.js

+73 −0

Original line number	Diff line number	Diff line
		@@ -4,10 +4,83 @@
		Ext.define('Docs.controller.Videos', {
		extend: 'Ext.app.Controller',

		init: function() {
		this.control({
		'videolist': {
		videoclick: function(id) {
		this.openVideo(id);
		}
		},
		'videostree': {
		videoclick: function(id) {
		this.openVideo(id);
		}
		}
		})
		},

		loadIndex: function() {
		Ext.getCmp('doctabs').activateTab('#/videos');
		Ext.getCmp('card-panel').layout.setActiveItem('videos');
		Ext.getCmp('tree-container').layout.setActiveItem(3);
		Ext.getCmp('tree-container').show();
		},

		openVideo: function(videoId) {

		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
		},
		'-',
		{
		xtype: 'button',
		text: 'Next »',
		handler: this.next,
		scope: this
		}
		]
		}).show();
		},

		getUrl: function(videoId) {
		return 'http://player.vimeo.com/video/' + videoId + '?portrait=0&color=4CC208';
		},

		setUrl: function(videoId) {
		this.currentVideo = videoId;
		document.getElementById('videoplayer').setAttribute('src', this.getUrl(videoId));
		},

		next: function() {
		if (!this.currentVideo) return;
		var idx = Ext.Array.indexOf(this.videoIds(), this.currentVideo);
		this.setUrl((idx == this.videoIds().length) ? 0 : this.videoIds()[idx + 1]);
		},

		prev: function() {
		if (!this.currentVideo) return;
		var idx = Ext.Array.indexOf(this.videoIds(), this.currentVideo);
		console.log(this.videoIds()[this.videoIds().length - 1])
		this.setUrl((idx == 0) ? this.videoIds()[this.videoIds().length - 1] : this.videoIds()[idx - 1]);
		},

		videoIds: function() {
		if (!this._videoIds) {
		this._videoIds = Ext.Array.flatten(Ext.Array.map(Docs.videos, function(v) { return Ext.Array.map(v.videos, function(w) { return w.id }) }));
		}
		return this._videoIds;
		}
		});

template/app/view/examples/Index.js

+2 −0

Original line number	Diff line number	Diff line
		@@ -4,6 +4,7 @@ Ext.define('Docs.view.examples.Index', {
		autoScroll : true,

		cls : 'all-demos',
		margin: '10 0 0 0',

		initComponent: function() {

		@@ -20,6 +21,7 @@ Ext.define('Docs.view.examples.Index', {
		});

		this.items = [
		{ xtype: 'container', html: '<h1 class="eg">Examples</h1>' },
		Ext.create('Docs.view.examples.List', {
		store: store
		})

template/app/view/videos/Index.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -26,6 +26,7 @@ Ext.define('Docs.view.videos.Index', {

		this.callParent(arguments);
		}

		});

		Docs.videos = [

template/app/view/videos/List.js

+2 −2

Original line number	Diff line number	Diff line
		Ext.define('Docs.view.videos.List', {
		extend: 'Ext.view.View',
		alias: 'widget.samplepanel',
		alias: 'widget.videolist',

		cls : 'demos',
		itemSelector : 'dl',
		@@ -63,7 +63,7 @@ Ext.define('Docs.view.videos.List', {
		var t = e.getTarget('dd', 5, true);

		if (t && !e.getTarget('a', 2)) {
		var url = t.getAttributeNS('ext', 'id');
		var id = t.getAttributeNS('ext', 'id');
		this.fireEvent('videoclick', id);
		}

template/app/view/videos/Tree.js

+2 −2

Original line number	Diff line number	Diff line
		@@ -52,9 +52,9 @@ Ext.define('Docs.view.videos.Tree', {

		onItemClick: function(view, node, item, index, e) {

		var url = node.raw.id;
		var id = node.raw.id;

		if (url) {
		if (id) {
		this.fireEvent('videoclick', id, e)
		}
		else if (!node.isLeaf()) {