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

Commit 296171c

Browse files
author
Travis Bot
committed
autocommit docs
1 parent 306432c commit 296171c

File tree

8 files changed

+8895
-0
lines changed

8 files changed

+8895
-0
lines changed

‎examples/dockpanel/bundle.js

Lines changed: 8448 additions & 0 deletions
Large diffs are not rendered by default.

‎examples/dockpanel/index.css

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
/*-----------------------------------------------------------------------------
2+
| Copyright (c) 2014-2015, PhosphorJS Contributors
3+
|
4+
| Distributed under the terms of the BSD 3-Clause License.
5+
|
6+
| The full license is in the file LICENSE, distributed with this software.
7+
|----------------------------------------------------------------------------*/
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
background: #F5F6F7;
12+
}
13+
14+
15+
#main {
16+
position: absolute;
17+
top: 10px;
18+
left: 10px;
19+
right: 10px;
20+
bottom: 10px;
21+
}
22+
23+
24+
.content {
25+
border: 1px solid black;
26+
min-width: 50px;
27+
min-height: 50px;
28+
}
29+
30+
31+
.red {
32+
background: #E74C3C;
33+
}
34+
35+
36+
.yellow {
37+
background: #F1C40F;
38+
}
39+
40+
41+
.green {
42+
background: #27AE60;
43+
}
44+
45+
46+
.blue {
47+
background: #3498DB;
48+
}
49+
50+
51+
.p-DockTabPanel {
52+
padding-right: 2px;
53+
padding-bottom: 2px;
54+
}
55+
56+
57+
.p-DockTabPanel > .p-StackedPanel {
58+
padding: 10px;
59+
background: white;
60+
border: 1px solid #C0C0C0;
61+
border-top: none;
62+
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
63+
}
64+
65+
66+
.p-DockTabPanel-overlay {
67+
background: rgba(255, 255, 255, 0.6);
68+
border: 1px solid rgba(0, 0, 0, 0.6);
69+
}
70+
71+
72+
.p-TabBar {
73+
min-height: 24px;
74+
}
75+
76+
77+
.p-TabBar-content {
78+
bottom: 1px;
79+
align-items: flex-end;
80+
}
81+
82+
83+
.p-TabBar-content > .p-Tab {
84+
flex-basis: 125px;
85+
max-height: 21px;
86+
min-width: 35px;
87+
margin-left: -1px;
88+
border: 1px solid #C0C0C0;
89+
border-bottom: none;
90+
padding: 0px 10px;
91+
background: #E5E5E5;
92+
font: 12px Helvetica, Arial, sans-serif;
93+
}
94+
95+
96+
.p-TabBar-content > .p-Tab.p-mod-first {
97+
margin-left: 0;
98+
}
99+
100+
101+
.p-TabBar-content > .p-Tab.p-mod-selected {
102+
min-height: 24px;
103+
background: white;
104+
transform: translateY(1px);
105+
}
106+
107+
108+
.p-TabBar-content > .p-Tab:hover:not(.p-mod-selected) {
109+
background: #F0F0F0;
110+
}
111+
112+
113+
.p-TabBar-content > .p-Tab > span {
114+
line-height: 21px;
115+
}
116+
117+
118+
.p-TabBar-footer {
119+
display: block;
120+
height: 1px;
121+
background: #C0C0C0;
122+
}
123+
124+
125+
.p-Tab.p-mod-closable > .p-Tab-close-icon {
126+
margin-left: 4px;
127+
}
128+
129+
130+
.p-Tab.p-mod-closable > .p-Tab-close-icon:before {
131+
content: '\f00d';
132+
font-family: FontAwesome;
133+
}
134+
135+
136+
.p-Tab.p-mod-docking {
137+
font: 12px Helvetica, Arial, sans-serif;
138+
height: 24px;
139+
width: 125px;
140+
padding: 0px 10px;
141+
background: white;
142+
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
143+
transform: translateX(-50px) translateY(-14px);
144+
}
145+
146+
147+
.p-Tab.p-mod-docking > span {
148+
line-height: 21px;
149+
}

‎examples/dockpanel/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.css" rel="stylesheet" type="text/css">
6+
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
7+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.js"></script>
8+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/javascript/javascript.js"></script>
9+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/mode/css/css.js"></script>
10+
<script type="text/javascript" src="bundle.js"></script>
11+
</head>
12+
<body>
13+
</body>
14+
</html>

‎examples/dockpanel/index.js

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/*-----------------------------------------------------------------------------
2+
| Copyright (c) 2014-2015, PhosphorJS Contributors
3+
|
4+
| Distributed under the terms of the BSD 3-Clause License.
5+
|
6+
| The full license is in the file LICENSE, distributed with this software.
7+
|----------------------------------------------------------------------------*/
8+
'use strict';
9+
var __extends = (this && this.__extends) || function (d, b) {
10+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
11+
function __() { this.constructor = d; }
12+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13+
};
14+
var phosphor_dockpanel_1 = require('phosphor-dockpanel');
15+
var phosphor_tabs_1 = require('phosphor-tabs');
16+
var phosphor_widget_1 = require('phosphor-widget');
17+
require('./index.css');
18+
/**
19+
* A widget which hosts a CodeMirror editor.
20+
*/
21+
var CodeMirrorWidget = (function (_super) {
22+
__extends(CodeMirrorWidget, _super);
23+
function CodeMirrorWidget(config) {
24+
_super.call(this);
25+
this.addClass('CodeMirrorWidget');
26+
this._editor = CodeMirror(this.node, config);
27+
}
28+
Object.defineProperty(CodeMirrorWidget.prototype, "editor", {
29+
get: function () {
30+
return this._editor;
31+
},
32+
enumerable: true,
33+
configurable: true
34+
});
35+
CodeMirrorWidget.prototype.loadTarget = function (target) {
36+
var doc = this._editor.getDoc();
37+
var xhr = new XMLHttpRequest();
38+
xhr.open('GET', target);
39+
xhr.onreadystatechange = function () { return doc.setValue(xhr.responseText); };
40+
xhr.send();
41+
};
42+
CodeMirrorWidget.prototype.onAfterAttach = function (msg) {
43+
this._editor.refresh();
44+
};
45+
CodeMirrorWidget.prototype.onResize = function (msg) {
46+
if (msg.width < 0 || msg.height < 0) {
47+
this._editor.refresh();
48+
}
49+
else {
50+
this._editor.setSize(msg.width, msg.height);
51+
}
52+
};
53+
return CodeMirrorWidget;
54+
})(phosphor_widget_1.Widget);
55+
function createContent(title) {
56+
var widget = new phosphor_widget_1.Widget();
57+
widget.addClass('content');
58+
widget.addClass(title.toLowerCase());
59+
var tab = new phosphor_tabs_1.Tab(title);
60+
tab.closable = true;
61+
phosphor_dockpanel_1.DockPanel.setTab(widget, tab);
62+
return widget;
63+
}
64+
function main() {
65+
var r1 = createContent('Red');
66+
var r2 = createContent('Red');
67+
var r3 = createContent('Red');
68+
var b1 = createContent('Blue');
69+
var b2 = createContent('Blue');
70+
var g1 = createContent('Green');
71+
var g2 = createContent('Green');
72+
var g3 = createContent('Green');
73+
var y1 = createContent('Yellow');
74+
var y2 = createContent('Yellow');
75+
var panel = new phosphor_dockpanel_1.DockPanel();
76+
panel.id = 'main';
77+
// Create the CodeMirror widget with a typescript mode.
78+
var cmSource = new CodeMirrorWidget({
79+
mode: 'text/typescript',
80+
lineNumbers: true,
81+
tabSize: 2,
82+
});
83+
cmSource.loadTarget('./index.ts');
84+
var cmCss = new CodeMirrorWidget({
85+
mode: 'text/css',
86+
lineNumbers: true,
87+
tabSize: 2,
88+
});
89+
cmCss.loadTarget('./index.css');
90+
var sourceTab = new phosphor_tabs_1.Tab('Source');
91+
phosphor_dockpanel_1.DockPanel.setTab(cmSource, sourceTab);
92+
var cssTab = new phosphor_tabs_1.Tab('CSS');
93+
phosphor_dockpanel_1.DockPanel.setTab(cmCss, cssTab);
94+
panel.addWidget(r1);
95+
panel.addWidget(b1, phosphor_dockpanel_1.DockPanel.SplitRight, r1);
96+
panel.addWidget(y1, phosphor_dockpanel_1.DockPanel.SplitBottom, b1);
97+
panel.addWidget(g1, phosphor_dockpanel_1.DockPanel.SplitLeft, y1);
98+
panel.addWidget(b2, phosphor_dockpanel_1.DockPanel.SplitBottom);
99+
panel.addWidget(cmCss, phosphor_dockpanel_1.DockPanel.TabBefore, r1);
100+
panel.addWidget(cmSource, phosphor_dockpanel_1.DockPanel.TabBefore, cmCss);
101+
panel.addWidget(g2, phosphor_dockpanel_1.DockPanel.TabBefore, b2);
102+
panel.addWidget(y2, phosphor_dockpanel_1.DockPanel.TabBefore, g2);
103+
panel.addWidget(g3, phosphor_dockpanel_1.DockPanel.TabBefore, y2);
104+
panel.addWidget(r2, phosphor_dockpanel_1.DockPanel.TabBefore, b1);
105+
panel.addWidget(r3, phosphor_dockpanel_1.DockPanel.TabBefore, y1);
106+
phosphor_widget_1.attachWidget(panel, document.body);
107+
window.onresize = function () { return panel.update(); };
108+
}
109+
window.onload = main;

0 commit comments

Comments
 (0)
0