Refactor inline example code (dca5d58c) · Commits · extjs / jsduck

template/app/Application.js

+2 −1

Original line number	Diff line number	Diff line
		@@ -21,7 +21,8 @@ Ext.define('Docs.Application', {

		controllers: [
		'Classes',
		'Search'
		'Search',
		'Examples'
		],

		launch: function() {

template/app/controller/Classes.js

+0 −22

Original line number	Diff line number	Diff line
		@@ -119,14 +119,6 @@ Ext.define('Docs.controller.Classes', {
		preventDefault: true,
		delegate: '.not-expandable'
		});
		},
		resize: function() {
		Ext.Array.each(Ext.ComponentQuery.query('.inlineexample'), function(c) {
		if (c.codeEditor) {
		c.doLayout();
		c.codeEditor.refresh();
		}
		});
		}
		}
		});
		@@ -221,20 +213,6 @@ Ext.define('Docs.controller.Classes', {
		this.getOverview().load(cls);
		this.getOverview().setLoading(false);

		Ext.Array.each(Ext.query('.inlineExample'), function(inlineEg) {
		var egId = inlineEg.getAttribute('rel');
		var divId = inlineEg.getAttribute('id');
		var eg = Ext.create('Docs.view.examples.Inline', {
		height: 200,
		renderTo: divId,
		listeners: {
		render: function() {
		this.showExample(egId, true, true);
		}
		}
		});
		});

		this.getTree().selectClass(cls.name);
		this.fireEvent('showClass', cls.name);
		}

template/app/controller/Examples.js

+144 −0

Original line number	Diff line number	Diff line
		@@ -4,6 +4,150 @@
		Ext.define('Docs.controller.Examples', {
		extend: 'Ext.app.Controller',

		refs: [
		{
		ref: 'tab',
		selector: 'inlineexample toolbar button'
		}
		],

		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')
		}
		},
		'inlineexample [cmpName=preview]': {
		show: function(card) {
		document.getElementById('egIframe' + card.ownerCt.iframeId).contentWindow.refreshPage(card.ownerCt.codeEditor.getValue(), '');
		},
		activate: function(cmp) {
		this.activateTab(cmp, 'preview')
		}
		},
		'inlineexample [cmpName=meta]': {
		activate: function(cmp) {
		this.activateTab(cmp, 'info')
		}
		},
		'inlineexample toolbar button[iconCls=code]': {
		click: function(cmp) {
		cmp.up('inlineexample').layout.setActiveItem(0);
		}
		},
		'inlineexample toolbar button[iconCls=preview]': {
		click: function(cmp) {
		cmp.up('inlineexample').layout.setActiveItem(1);
		}
		},
		'inlineexample toolbar button[iconCls=info]': {
		click: function(cmp) {
		cmp.up('inlineexample').layout.setActiveItem(2);
		}
		},
		'classoverview': {
		resize: function() {
		Ext.Array.each(Ext.ComponentQuery.query('.inlineexample'), function(c) {
		if (c.codeEditor) {
		c.doLayout();
		c.codeEditor.refresh();
		}
		});
		},
		afterload: function() {
		this.replaceExampleDivs();
		}
		},
		'gridpanel[cmpName=examplelist]': {
		itemclick: function(view, record, item, index, event) {
		this.showExample(Ext.getCmp('inlineCodeExample'), record.data.location);
		}
		}
		});
		},

		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');
		});
		},

		showExample: function(inlineEg, exampleId, stripComments, updateHeight) {

		// Works with Gists from GitHub
		if (exampleId.match(/^https:\/\/api\.github\.com/)) {
		Ext.data.JsonP.request({
		url: exampleId,
		success: function(json) {
		inlineEg.codeEditor.setValue(json.data.files["basic_grid_panel.js"].content);
		window.frames['egIframe' + inlineEg.iframeId].refreshPage(inlineEg.codeEditor.getValue(), '');
		},
		scope: this
		});

		} else {
		Ext.Ajax.request({
		method : 'GET',
		url : 'doc-resources/' + exampleId,
		headers : { 'Content-Type' : 'application/json' },

		success : function(response, opts) {

		// Remove any trailing whitespace
		var code = response.responseText.replace(/\s*$/, '');

		// Remove comments
		if (stripComments) {
		code = code.replace(/\/\\[\s\S]\\/[\s\S]/, '');
		}

		inlineEg.codeEditor.setValue(code);

		if (updateHeight) {
		inlineEg.updateHeight();
		}
		}
		});
		}
		},

		replaceExampleDivs: function() {
		var self = this;

		Ext.Array.each(Ext.query('.inlineExample'), function(inlineEg) {
		var egId = inlineEg.getAttribute('rel');
		var divId = inlineEg.getAttribute('id');
		var eg = Ext.create('Docs.view.examples.Inline', {
		height: 200,
		renderTo: divId,
		listeners: {
		render: function() {
		self.showExample(this, egId, true, true);
		}
		}
		});
		});
		}

		});
		No newline at end of file

template/app/view/cls/Examples.js

+3 −10

Original line number	Diff line number	Diff line
		@@ -11,10 +11,10 @@ Ext.define('Docs.view.cls.Examples', {
		items: [
		{
		region: 'west',
		html: 'west',
		width: 200,
		xtype: 'gridpanel',
		store: Ext.getStore('Examples'),
		store: 'Examples',
		cmpName: 'examplelist',
		padding: '10',
		columns: [
		{
		@@ -22,14 +22,7 @@ Ext.define('Docs.view.cls.Examples', {
		dataIndex: 'title',
		flex: true
		}
		],

		listeners: {
		itemclick: function(view, record, item, index, event) {
		Ext.getCmp('inlineCodeExample').showExample(record.data.location);
		}
		}

		]
		},
		{
		region: 'center',

template/app/view/cls/Overview.js

+7 −0

Original line number	Diff line number	Diff line
		@@ -16,6 +16,11 @@ Ext.define('Docs.view.cls.Overview', {
		autoScroll: true,
		bodyPadding: '20',

		initComponent: function() {
		this.addEvents('afterload');
		this.callParent(arguments);
		},

		/**
		* Scrolls the specified element into view
		*
		@@ -70,6 +75,8 @@ Ext.define('Docs.view.cls.Overview', {
		if (Docs.Settings.get("hideInherited")) {
		this.filterMembers("", true);
		}

		this.fireEvent('afterload');
		},

		/**