Start of Examples integration (6d78ef02) · Commits · extjs / jsduck

template/app/Application.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -22,6 +22,7 @@ Ext.define('Docs.Application', {
		controllers: [
		'Classes',
		'Search',
		'InlineExamples',
		'Examples',
		'Favorites',
		'Tabs'

template/app/History.js

+4 −1

Original line number	Diff line number	Diff line
		@@ -23,6 +23,9 @@ Ext.define("Docs.History", {
		else if (url.type === "guide") {
		Docs.App.getController('Classes').loadGuide(url.url, true);
		}
		else if (url.url === "/examples") {
		Docs.App.getController('Examples').loadIndex();
		}
		else {
		Docs.App.getController('Classes').loadIndex(true);
		}
		@@ -30,7 +33,7 @@ Ext.define("Docs.History", {

		// Parses current browser location
		parseToken: function(token) {
		var matches = token && token.match(/\/(api\|guide)\/(.*)/);
		var matches = token && token.match(/\/(api\|guide\|examples\|videos)(\/(.*))?/);
		return matches ? {type: matches[1], url: matches[0]} : {};
		},

template/app/controller/Classes.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -211,6 +211,7 @@ Ext.define('Docs.controller.Classes', {
		}

		Ext.getCmp('card-panel').layout.setActiveItem(1);
		Ext.getCmp('nested-west-region-container').layout.setActiveItem(0);

		// separate class and member name
		var matches = url.match(/^\/api\/(.?)(?:-(.))?$/);

template/app/controller/Examples.js

+3 −109

Original line number	Diff line number	Diff line
		@@ -5,118 +5,12 @@ Ext.define('Docs.controller.Examples', {
		extend: 'Ext.app.Controller',

		init: function() {
		this.control({
		'inlineexample': {
		afterlayout: function(cmp) {
		if (!cmp.codeEditor) {
		var codeBody = cmp.getComponent(0).body;

		cmp.codeEditor = CodeMirror(codeBody, {
		mode: "javascript",
		indentUnit: 4,
		onChange: function(e) {
		cmp.updateHeight();
		}
		});
		}
		}
		},
		'inlineexample [cmpName=code]': {
		activate: function(cmp) {
		this.activateTab(cmp, 'code');
		var inlineEg = cmp.up('inlineexample');
		if (inlineEg && inlineEg.codeEditor) {
		// Weird bug on CodeMirror requires 2 refreshes...
		inlineEg.codeEditor.refresh();
		inlineEg.codeEditor.refresh();
		}
		}
		},
		'inlineexample [cmpName=preview]': {
		activate: function(cmp) {
		this.activateTab(cmp, 'preview');
		}
		},
		'inlineexample toolbar button[iconCls=code]': {
		click: function(cmp) {
		cmp.up('inlineexample').showCode();
		}
		},
		'inlineexample toolbar button[iconCls=preview]': {
		click: function(cmp) {
		cmp.up('inlineexample').showPreview(function() {
		this.refreshPreview(cmp.up('inlineexample'));
		}, this);
		}
		},
		'inlineexample toolbar button[iconCls=copy]': {
		click: function(cmp) {
		var editor = cmp.up('inlineexample').codeEditor;
		var lastLine = editor.lineCount() - 1;
		var lastCh = editor.getLine(lastLine).length;
		editor.setSelection({line: 0, ch: 0}, {line: lastLine, ch: lastCh});
		}
		},
		'classoverview': {
		resize: function() {
		Ext.Array.each(Ext.ComponentQuery.query('.inlineexample'), function(c) {
		if (c.codeEditor) {
		c.doLayout();
		c.codeEditor.refresh();
		}
		});
		},
		afterload: function() {
		this.replaceExampleDivs();
		}
		}
		});
		},

		activateTab: function(cmp, buttonCls) {
		Ext.Array.each(cmp.up('inlineexample').query('toolbar button'), function(b) {
		b.removeCls('active');
		});
		Ext.Array.each(cmp.up('inlineexample').query('toolbar button[iconCls=' + buttonCls + ']'), function(b) {
		b.addCls('active');
		});
		},

		replaceExampleDivs: function() {
		Ext.Array.each(Ext.query('.inline-example'), function(inlineEg) {
		// Grab code from <pre> element and replace it with new empty <div>
		// Strip tags and replace HTML entities with their values
		var code = Ext.String.htmlDecode(Ext.util.Format.stripTags(inlineEg.innerHTML));
		var div = document.createElement("div");
		inlineEg.parentNode.replaceChild(div, inlineEg);
		// Then render the example component inside the div
		var eg = Ext.create('Docs.view.examples.Inline', {
		height: 200,
		renderTo: div,
		listeners: {
		afterrender: function(cmp) {
		this.updateExample(cmp, code);
		},
		scope: this
		}
		});
		}, this);
		},

		// Updates code inside example component
		updateExample: function(example, code) {
		example.codeEditor.setValue(code);
		var activeItem = example.layout.getActiveItem();
		if (activeItem.cmpName == 'preview') {
		this.refreshPreview(example);
		}
		example.updateHeight();
		},

		// Refreshes the preview of example
		refreshPreview: function(example) {
		var iframe = document.getElementById(example.getIframeId());
		iframe.contentWindow.refreshPage(example.codeEditor.getValue(), '');
		loadIndex: function() {
		Ext.getCmp('card-panel').layout.setActiveItem('examples');
		Ext.getCmp('nested-west-region-container').layout.setActiveItem(1);
		}

		});
		No newline at end of file

template/app/controller/InlineExamples.js

0 → 100644

+122 −0

Original line number	Diff line number	Diff line
		/**
		* Controller for inline examples.
		*/
		Ext.define('Docs.controller.InlineExamples', {
		extend: 'Ext.app.Controller',

		init: function() {
		this.control({
		'inlineexample': {
		afterlayout: function(cmp) {
		if (!cmp.codeEditor) {
		var codeBody = cmp.getComponent(0).body;

		cmp.codeEditor = CodeMirror(codeBody, {
		mode: "javascript",
		indentUnit: 4,
		onChange: function(e) {
		cmp.updateHeight();
		}
		});
		}
		}
		},
		'inlineexample [cmpName=code]': {
		activate: function(cmp) {
		this.activateTab(cmp, 'code');
		var inlineEg = cmp.up('inlineexample');
		if (inlineEg && inlineEg.codeEditor) {
		// Weird bug on CodeMirror requires 2 refreshes...
		inlineEg.codeEditor.refresh();
		inlineEg.codeEditor.refresh();
		}
		}
		},
		'inlineexample [cmpName=preview]': {
		activate: function(cmp) {
		this.activateTab(cmp, 'preview');
		}
		},
		'inlineexample toolbar button[iconCls=code]': {
		click: function(cmp) {
		cmp.up('inlineexample').showCode();
		}
		},
		'inlineexample toolbar button[iconCls=preview]': {
		click: function(cmp) {
		cmp.up('inlineexample').showPreview(function() {
		this.refreshPreview(cmp.up('inlineexample'));
		}, this);
		}
		},
		'inlineexample toolbar button[iconCls=copy]': {
		click: function(cmp) {
		var editor = cmp.up('inlineexample').codeEditor;
		var lastLine = editor.lineCount() - 1;
		var lastCh = editor.getLine(lastLine).length;
		editor.setSelection({line: 0, ch: 0}, {line: lastLine, ch: lastCh});
		}
		},
		'classoverview': {
		resize: function() {
		Ext.Array.each(Ext.ComponentQuery.query('.inlineexample'), function(c) {
		if (c.codeEditor) {
		c.doLayout();
		c.codeEditor.refresh();
		}
		});
		},
		afterload: function() {
		this.replaceExampleDivs();
		}
		}
		});
		},

		activateTab: function(cmp, buttonCls) {
		Ext.Array.each(cmp.up('inlineexample').query('toolbar button'), function(b) {
		b.removeCls('active');
		});
		Ext.Array.each(cmp.up('inlineexample').query('toolbar button[iconCls=' + buttonCls + ']'), function(b) {
		b.addCls('active');
		});
		},

		replaceExampleDivs: function() {
		Ext.Array.each(Ext.query('.inline-example'), function(inlineEg) {
		// Grab code from <pre> element and replace it with new empty <div>
		// Strip tags and replace HTML entities with their values
		var code = Ext.String.htmlDecode(Ext.util.Format.stripTags(inlineEg.innerHTML));
		var div = document.createElement("div");
		inlineEg.parentNode.replaceChild(div, inlineEg);
		// Then render the example component inside the div
		var eg = Ext.create('Docs.view.examples.Inline', {
		height: 200,
		renderTo: div,
		listeners: {
		afterrender: function(cmp) {
		this.updateExample(cmp, code);
		},
		scope: this
		}
		});
		}, this);
		},

		// Updates code inside example component
		updateExample: function(example, code) {
		example.codeEditor.setValue(code);
		var activeItem = example.layout.getActiveItem();
		if (activeItem.cmpName == 'preview') {
		this.refreshPreview(example);
		}
		example.updateHeight();
		},

		// Refreshes the preview of example
		refreshPreview: function(example) {
		var iframe = document.getElementById(example.getIframeId());
		iframe.contentWindow.refreshPage(example.codeEditor.getValue(), '');
		}

		});
		No newline at end of file