8000 autocommit docs · SimonBiggs/phosphorjs.github.io@e69adf6 · GitHub
[go: up one dir, main page]
Skip to content

Commit e69adf6

Browse files
author
Travis Bot
committed
autocommit docs
1 parent f29f56b commit e69adf6

File tree

4 files changed

+157
-51
lines changed

4 files changed

+157
-51
lines changed

‎examples/tabs/bundle.js

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2-
var css = "/*-----------------------------------------------------------------------------\n| Copyright (c) 2014-2015, PhosphorJS Contributors\n|\n| Distributed under the terms of the BSD 3-Clause License.\n|\n| The full license is in the file LICENSE, distributed with this software.\n|----------------------------------------------------------------------------*/\nbody {\n font-family: sans-serif;\n margin: 0;\n padding: 0;\n}\n#main {\n position: absolute;\n top: 35px;\n left: 10px;\n right: 10px;\n bottom: 10px;\n}\n.ContextArea {\n padding-left: 10px;\n}\n.p-TabBar {\n min-height: 24px;\n}\n.p-TabBar-content {\n bottom: 1px;\n align-items: flex-end;\n}\n.p-TabBar-content > .p-Tab {\n flex-basis: 125px;\n max-height: 21px;\n margin-left: -1px;\n border: 1px solid #C0C0C0;\n border-bottom: none;\n padding: 0px 10px;\n background: #E5E5E5;\n font: 12px Helvetica, Arial, sans-serif;\n}\n.p-TabBar-content > .p-Tab.p-mod-first {\n margin-left: 0;\n}\n.p-TabBar-content > .p-Tab.p-mod-selected {\n min-height: 24px;\n background: white;\n transform: translateY(1px);\n}\n.p-TabBar-content > .p-Tab:hover:not(.p-mod-selected) {\n background: #F0F0F0;\n}\n.p-TabBar-content > .p-Tab > span {\n line-height: 21px;\n}\n.p-TabBar-footer {\n display: block;\n height: 1px;\n background: #C0C0C0;\n}\n.p-TabPanel > .p-StackedPanel {\n background: white;\n border: 1px solid #C0C0C0;\n border-top: none;\n}\n.p-Tab.p-mod-closable > .p-Tab-close-icon {\n margin-left: 4px;\n}\n.p-Tab.p-mod-closable > .p-Tab-close-icon:before {\n content: '\\f00d';\n font-family: FontAwesome;\n}\n"; (require("browserify-css").createStyle(css, { "href": "index.css"})); module.exports = css;
2+
var css = "/*-----------------------------------------------------------------------------\n| Copyright (c) 2014-2015, PhosphorJS Contributors\n|\n| Distributed under the terms of the BSD 3-Clause License.\n|\n| The full license is in the file LICENSE, distributed with this software.\n|----------------------------------------------------------------------------*/\nbody {\n margin: 0;\n padding: 0;\n}\n#main {\n position: absolute;\n top: 10px;\n left: 10px;\n right: 10px;\n bottom: 10px;\n}\n.p-TabBar {\n min-height: 24px;\n}\n.p-TabBar-content {\n bottom: 1px;\n align-items: flex-end;\n}\n.p-TabBar-content > .p-Tab {\n flex-basis: 125px;\n max-height: 21px;\n margin-left: -1px;\n border: 1px solid #C0C0C0;\n border-bottom: none;\n padding: 0px 10px;\n background: #E5E5E5;\n font: 12px Helvetica, Arial, sans-serif;\n}\n.p-TabBar-content > .p-Tab.p-mod-first {\n margin-left: 0;\n}\n.p-TabBar-content > .p-Tab.p-mod-selected {\n min-height: 24px;\n background: white;\n transform: translateY(1px);\n}\n.p-TabBar-content > .p-Tab:hover:not(.p-mod-selected) {\n background: #F0F0F0;\n}\n.p-TabBar-content > .p-Tab > span {\n line-height: 21px;\n}\n.p-TabBar-footer {\n display: block;\n height: 1px;\n background: #C0C0C0;\n}\n.p-TabPanel > .p-StackedPanel {\n padding: 10px;\n background: white;\n border: 1px solid #C0C0C0;\n border-top: none;\n}\n.p-Tab.p-mod-closable > .p-Tab-close-icon {\n margin-left: 4px;\n}\n.p-Tab.p-mod-closable > .p-Tab-close-icon:before {\n content: '\\f00d';\n font-family: FontAwesome;\n}\n.CodeMirrorWidget {\n border: 1px solid #C0C0C0;\n}\n.content {\n border: 1px solid black;\n}\n.red {\n background: #E74C3C;\n}\n.yellow {\n background: #F1C40F;\n}\n.green {\n background: #27AE60;\n}\n.blue {\n background: #3498DB;\n}\n"; (require("browserify-css").createStyle(css, { "href": "index.css"})); module.exports = css;
33
},{"browserify-css":3}],2:[function(require,module,exports){
44
/*-----------------------------------------------------------------------------
55
| Copyright (c) 2014-2015, PhosphorJS Contributors
@@ -54,28 +54,52 @@ var CodeMirrorWidget = (function (_super) {
5454
};
5555
return CodeMirrorWidget;
5656
})(phosphor_widget_1.Widget);
57-
var ExampleTab = (function (_super) {
58-
__extends(ExampleTab, _super);
59-
function ExampleTab() {
57+
/**
58+
* A widget which disposes itself when closed.
59+
*
60+
* By default, a widget will only remove itself from the hierarchy.
61+
*/
62+
var ContentWidget = (function (_super) {
63+
__extends(ContentWidget, _super);
64+
function ContentWidget(title) {
6065
_super.call(this);
61-
var tab = new phosphor_tabs_1.Tab('Example');
66+
this.addClass('content');
67+
this.addClass(title.toLowerCase());
68+
var tab = new phosphor_tabs_1.Tab(title);
6269
tab.closable = true;
6370
phosphor_tabs_1.TabPanel.setTab(this, tab);
6471
}
65-
return ExampleTab;
72+
ContentWidget.prototype.onCloseRequest = function (msg) {
73+
this.dispose();
74+
};
75+
return ContentWidget;
6676
})(phosphor_widget_1.Widget);
77+
/**
78+
* A title generator function.
79+
*/
80+
var nextTitle = (function () {
81+
var i = 0;
82+
var titles = ['Red', 'Yellow', 'Green', 'Blue'];
83+
return function () { return titles[i++ % titles.length]; };
84+
})();
85+
/**
86+
* Add a new content widget the the given tab panel.
87+
*/
88+
function addContent(panel) {
89+
var content = new ContentWidget(nextTitle());
90+
panel.addWidget(new ContentWidget(nextTitle()));
91+
}
92+
/**
93+
* The main application entry point.
94+
*/
6795
function main() {
6896
var panel = new phosphor_tabs_1.TabPanel();
6997
panel.id = 'main';
7098
var btn = document.createElement('button');
71-
var text = document.createTextNode('Click to add a Tab');
72-
btn.appendChild(text);
73-
btn.onclick = function () {
74-
panel.addWidget(new ExampleTab());
75-
};
76-
var contextArea = new phosphor_widget_1.Widget();
77-
contextArea.addClass('ContextArea');
78-
contextArea.node.appendChild(btn);
99+
btn.textContent = 'Add New Tab';
100+
btn.onclick = function () { return addContent(panel); };
101+
var demoArea = new phosphor_widget_1.Widget();
102+
demoArea.node.appendChild(btn);
79103
var cmSource = new CodeMirrorWidget({
80104
mode: 'text/typescript',
81105
lineNumbers: true,
@@ -88,10 +112,10 @@ function main() {
88112
tabSize: 2
89113
});
90114
cmCss.loadTarget('./index.css');
91-
phosphor_tabs_1.TabPanel.setTab(contextArea, new phosphor_tabs_1.Tab('Demo'));
115+
phosphor_tabs_1.TabPanel.setTab(demoArea, new phosphor_tabs_1.Tab('Demo'));
92116
phosphor_tabs_1.TabPanel.setTab(cmSource, new phosphor_tabs_1.Tab('Source'));
93117
phosphor_tabs_1.TabPanel.setTab(cmCss, new phosphor_tabs_1.Tab('CSS'));
94-
panel.widgets = [contextArea, cmSource, cmCss];
118+
panel.widgets = [demoArea, cmSource, cmCss];
95119
phosphor_widget_1.attachWidget(panel, document.body);
96120
window.onresize = function () { return panel.update(); };
97121
}

‎examples/tabs/index.css

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,20 @@
66
| The full license is in the file LICENSE, distributed with this software.
77
|----------------------------------------------------------------------------*/
88
body {
9-
font-family: sans-serif;
109
margin: 0;
1110
padding: 0;
1211
}
1312

1413

1514
#main {
1615
position: absolute;
17-
top: 35px;
16+
top: 10px;
1817
left: 10px;
1918
right: 10px;
2019
bottom: 10px;
2120
}
2221

2322

24-
.ContextArea {
25-
padding-left: 10px;
26-
}
27-
28-
2923
.p-TabBar {
3024
min-height: 24px;
3125
}
@@ -79,11 +73,13 @@ body {
7973

8074

8175
.p-TabPanel > .p-StackedPanel {
76+
padding: 10px;
8277
background: white;
8378
border: 1px solid #C0C0C0;
8479
border-top: none;
8580
}
8681

82+
8783
.p-Tab.p-mod-closable > .p-Tab-close-icon {
8884
margin-left: 4px;
8985
}
@@ -93,3 +89,33 @@ body {
9389
content: '\f00d';
9490
font-family: FontAwesome;
9591
}
92+
93+
94+
.CodeMirrorWidget {
95+
border: 1px solid #C0C0C0;
96+
}
97+
98+
99+
.content {
100+
border: 1px solid black;
101+
}
102+
103+
104+
.red {
105+
background: #E74C3C;
106+
}
107+
108+
109+
.yellow {
110+
background: #F1C40F;
111+
}
112+
113+
114+
.green {
115+
background: #27AE60;
116+
}
117+
118+
119+
.blue {
120+
background: #3498DB;
121+
}

‎examples/tabs/index.js

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -51,28 +51,52 @@ var CodeMirrorWidget = (function (_super) {
5151
};
5252
return CodeMirrorWidget;
5353
})(phosphor_widget_1.Widget);
54-
var ExampleTab = (function (_super) {
55-
__extends(ExampleTab, _super);
56-
function ExampleTab() {
54+
/**
55+
* A widget which disposes itself when closed.
56+
*
57+
* By default, a widget will only remove itself from the hierarchy.
58+
*/
59+
var ContentWidget = (function (_super) {
60+
__extends(ContentWidget, _super);
61+
function ContentWidget(title) {
5762
_super.call(this);
58-
var tab = new phosphor_tabs_1.Tab('Example');
63+
this.addClass('content');
64+
this.addClass(title.toLowerCase());
65+
var tab = new phosphor_tabs_1.Tab(title);
5966
tab.closable = true;
6067
phosphor_tabs_1.TabPanel.setTab(this, tab);
6168
}
62-
return ExampleTab;
69+
ContentWidget.prototype.onCloseRequest = function (msg) {
70+
this.dispose();
71+
};
72+
return ContentWidget;
6373
})(phosphor_widget_1.Widget);
74+
/**
75+
* A title generator function.
76+
*/
77+
var nextTitle = (function () {
78+
var i = 0;
79+
var titles = ['Red', 'Yellow', 'Green', 'Blue'];
80+
return function () { return titles[i++ % titles.length]; };
81+
})();
82+
/**
83+
* Add a new content widget the the given tab panel.
84+
*/
85+
function addContent(panel) {
86+
var content = new ContentWidget(nextTitle());
87+
panel.addWidget(new ContentWidget(nextTitle()));
88+
}
89+
/**
90+
* The main application entry point.
91+
*/
6492
function main() {
6593
var panel = new phosphor_tabs_1.TabPanel();
6694
panel.id = 'main';
6795
var btn = document.createElement('button');
68-
var text = document.createTextNode('Click to add a Tab');
69-
btn.appendChild(text);
70-
btn.onclick = function () {
71-
panel.addWidget(new ExampleTab());
72-
};
73-
var contextArea = new phosphor_widget_1.Widget();
74-
contextArea.addClass('ContextArea');
75-
contextArea.node.appendChild(btn);
96+
btn.textContent = 'Add New Tab';
97+
btn.onclick = function () { return addContent(panel); };
98+
var demoArea = new phosphor_widget_1.Widget();
99+
demoArea.node.appendChild(btn);
76100
var cmSource = new CodeMirrorWidget({
77101
mode: 'text/typescript',
78102
lineNumbers: true,
@@ -85,10 +109,10 @@ function main() {
85109
tabSize: 2
86110
});
87111
cmCss.loadTarget('./index.css');
88-
phosphor_tabs_1.TabPanel.setTab(contextArea, new phosphor_tabs_1.Tab('Demo'));
112+
phosphor_tabs_1.TabPanel.setTab(demoArea, new phosphor_tabs_1.Tab('Demo'));
89113
phosphor_tabs_1.TabPanel.setTab(cmSource, new phosphor_tabs_1.Tab('Source'));
90114
phosphor_tabs_1.TabPanel.setTab(cmCss, new phosphor_tabs_1.Tab('CSS'));
91-
panel.widgets = [contextArea, cmSource, cmCss];
115+
panel.widgets = [demoArea, cmSource, cmCss];
92116
phosphor_widget_1.attachWidget(panel, document.body);
93117
window.onresize = function () { return panel.update(); };
94118
}

‎examples/tabs/index.ts

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -61,30 +61,61 @@ class CodeMirrorWidget extends Widget {
6161
}
6262

6363

64-
class ExampleTab extends Widget {
65-
constructor() {
64+
/**
65+
* A widget which disposes itself when closed.
66+
*
67+
* By default, a widget will only remove itself from the hierarchy.
68+
*/
69+
class ContentWidget extends Widget {
70+
71+
constructor(title: string) {
6672
super();
67-
var tab = new Tab('Example');
73+
this.addClass('content');
74+
this.addClass(title.toLowerCase());
75+
76+
var tab = new Tab(title);
6877
tab.closable = true;
6978
TabPanel.setTab(this, tab);
7079
}
80+
81+
protected onCloseRequest(msg: Message): void {
82+
this.dispose();
83+
}
7184
}
7285

7386

87+
/**
88+
* A title generator function.
89+
*/
90+
var nextTitle = (() => {
91+
var i = 0;
92+
var titles = ['Red', 'Yellow', 'Green', 'Blue'];
93+
return () => titles[i++ % titles.length];
94+
})();
95+
96+
97+
/**
98+
* Add a new content widget the the given tab panel.
99+
*/
100+
function addContent(panel: TabPanel): void {
101+
var content = new ContentWidget(nextTitle());
102+
panel.addWidget(new ContentWidget(nextTitle()));
103+
}
104+
105+
106+
/**
107+
* The main application entry point.
108+
*/
74109
function main(): void {
75110
var panel = new TabPanel();
76111
panel.id = 'main';
77112

78113
var btn = document.createElement('button');
79-
var text = document.createTextNode('Click to add a Tab');
80-
btn.appendChild(text);
81-
btn.onclick = () => {
82-
panel.addWidget(new ExampleTab());
83-
}
114+
btn.textContent = 'Add New Tab';
115+
btn.onclick = () => addContent(panel);
84116

85-
var contextArea = new Widget();
86-
contextArea.addClass('ContextArea');
87-
contextArea.node.appendChild(btn);
117+
var demoArea = new Widget();
118+
demoArea.node.appendChild(btn);
88119

89120
var cmSource = new CodeMirrorWidget({
90121
mode: 'text/typescript',
@@ -100,15 +131,16 @@ function main(): void {
100131
});
101132
cmCss.loadTarget('./index.css');
102133

103-
TabPanel.setTab(contextArea, new Tab('Demo'));
134+
TabPanel.setTab(demoArea, new Tab('Demo'));
104135
TabPanel.setTab(cmSource, new Tab('Source'));
105136
TabPanel.setTab(cmCss, new Tab('CSS'));
106137

107-
panel.widgets = [contextArea, cmSource, cmCss];
138+
panel.widgets = [demoArea, cmSource, cmCss];
108139

109140
attachWidget(panel, document.body);
110141

111142
window.onresize = () => panel.update();
112143
}
113144

145+
114146
window.onload = main;

0 commit comments

Comments
 (0)
0