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

Commit 06c5026

Browse files
author
Travis Bot
committed
autocommit docs
1 parent ffba9c5 commit 06c5026

File tree

5 files changed

+128
-46
lines changed

5 files changed

+128
-46
lines changed

‎examples/menus/bundle.js

Lines changed: 38 additions & 14 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: 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-Menu {\n background: white;\n color: rgba(0, 0, 0, 0.87);\n border: 1px solid #C0C0C0;\n font: 12px Helvetica, Arial, sans-serif;\n box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);\n}\n.p-Menu-item.p-mod-active {\n background: #E5E5E5;\n}\n.p-Menu-item.p-mod-disabled {\n color: rgba(0, 0, 0, 0.26);\n}\n.p-Menu-item.p-mod-separator-type > span::after {\n border-top: 1px solid #DDDDDD;\n}\n.p-Menu-item-icon::before,\n.p-Menu-item-submenu-icon::before {\n font-family: FontAwesome;\n}\n.p-Menu-item.p-mod-check-type.p-mod-checked > .p-Menu-item-icon::before {\n content: '\\f00c';\n}\n.p-Menu-item.p-mod-has-submenu > .p-Menu-item-submenu-icon::before {\n content: '\\f0da';\n}\n.p-Menu-item.copy > .p-Menu-item-icon::before {\n content: '\\f0c5';\n}\n.p-Menu-item.cut > .p-Menu-item-icon::before {\n content: '\\f0c4';\n}\n.p-Menu-item.paste > .p-Menu-item-icon::before {\n content: '\\f0ea';\n}\n.p-Menu-item.close > .p-Menu-item-icon::before {\n content: '\\f00d';\n}\n.p-Menu-item.undo > .p-Menu-item-icon::before {\n content: '\\f0e2';\n}\n.p-Menu-item.repeat > .p-Menu-item-icon::before {\n content: '\\f01e';\n}\n.p-MenuBar {\n min-height: 24px;\n padding-left: 5px;\n background: #FAFAFA;\n color: rgba(0, 0, 0, 0.87);\n border-bottom: 1px solid #DDDDDD;\n font: 13px Helvetica, Arial, sans-serif;\n}\n.p-MenuBar-menu {\n transform: translateY(-1px);\n}\n.p-MenuBar-item {\n padding: 4px 8px;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n}\n.p-MenuBar-item.p-mod-active {\n background: #E5E5E5;\n}\n.p-MenuBar-item.p-mod-disabled {\n color: rgba(0, 0, 0, 0.26);\n}\n.p-MenuBar-item.p-mod-separator-type {\n margin: 2px;\n padding: 0;\n border: none;\n border-left: 1px solid #DDDDDD;\n}\n.p-MenuBar.p-mod-active > .p-MenuBar-content > .p-MenuBar-item.p-mod-active {\n z-index: 1000000;\n background: white;\n border-left: 1px solid #C0C0C0;\n border-right: 1px solid #C0C0C0;\n box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\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 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-Menu {\n background: white;\n color: rgba(0, 0, 0, 0.87);\n border: 1px solid #C0C0C0;\n font: 12px Helvetica, Arial, sans-serif;\n box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);\n}\n.p-Menu-item.p-mod-active {\n background: #E5E5E5;\n}\n.p-Menu-item.p-mod-disabled {\n color: rgba(0, 0, 0, 0.26);\n}\n.p-Menu-item.p-mod-separator-type > span::after {\n border-top: 1px solid #DDDDDD;\n}\n.p-Menu-item-icon::before,\n.p-Menu-item-submenu-icon::before {\n font-family: FontAwesome;\n}\n.p-Menu-item.p-mod-check-type.p-mod-checked > .p-Menu-item-icon::before {\n content: '\\f00c';\n}\n.p-Menu-item.p-mod-has-submenu > .p-Menu-item-submenu-icon::before {\n content: '\\f0da';\n}\n.p-Menu-item.copy > .p-Menu-item-icon::before {\n content: '\\f0c5';\n}\n.p-Menu-item.cut > .p-Menu-item-icon::before {\n content: '\\f0c4';\n}\n.p-Menu-item.paste > .p-Menu-item-icon::before {\n content: '\\f0ea';\n}\n.p-Menu-item.close > .p-Menu-item-icon::before {\n content: '\\f00d';\n}\n.p-Menu-item.undo > .p-Menu-item-icon::before {\n content: '\\f0e2';\n}\n.p-Menu-item.repeat > .p-Menu-item-icon::before {\n content: '\\f01e';\n}\n.p-MenuBar {\n min-height: 24px;\n padding-left: 5px;\n background: #FEFEFE;\n color: rgba(0, 0, 0, 0.87);\n border-bottom: 1px solid #DDDDDD;\n font: 13px Helvetica, Arial, sans-serif;\n}\n.p-MenuBar-menu {\n transform: translateY(-1px);\n}\n.p-MenuBar-item {\n padding: 4px 8px;\n border-left: 1px solid transparent;\n border-right: 1px solid transparent;\n}\n.p-MenuBar-item.p-mod-active {\n background: #E5E5E5;\n}\n.p-MenuBar-item.p-mod-disabled {\n color: rgba(0, 0, 0, 0.26);\n}\n.p-MenuBar-item.p-mod-separator-type {\n margin: 2px;\n padding: 0;\n border: none;\n border-left: 1px solid #DDDDDD;\n}\n.p-MenuBar.p-mod-active > .p-MenuBar-content > .p-MenuBar-item.p-mod-active {\n z-index: 1000000;\n background: white;\n border-left: 1px solid #C0C0C0;\n border-right: 1px solid #C0C0C0;\n box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);\n}\n"; (require("browserify-css").createStyle(css, { "href": &quo 57AE t;index.css"})); module.exports = css;
33
},{"browserify-css":3}],2:[function(require,module,exports){
44
/*-----------------------------------------------------------------------------
55
| Copyright (c) 2014-2015, PhosphorJS Contributors
@@ -55,9 +55,22 @@ var CodeMirrorWidget = (function (_super) {
5555
};
5656
return CodeMirrorWidget;
5757
})(phosphor_widget_1.Widget);
58+
/**
59+
* Log a message to the log element.
60+
*/
61+
function log(value) {
62+
var node = document.getElementById('log-span');
63+
node.textContent = value;
64+
}
65+
/**
66+
* Log the text of a menu item to the log element.
67+
*/
5868
function logItem(item) {
59-
console.log(item.text);
69+
log(item.text.replace(/&/g, ''));
6070
}
71+
/**
72+
* The template for the application menu bar.
73+
*/
6174
var MENU_BAR_TEMPLATE = [
6275
{
6376
text: 'File',
@@ -219,6 +232,9 @@ var MENU_BAR_TEMPLATE = [
219232
]
220233
}
221234
];
235+
/**
236+
* The template for the application context menu.
237+
*/
222238
var CONTEXT_MENU_TEMPLATE = [
223239
{
224240
text: '&Copy',
@@ -255,7 +271,7 @@ var CONTEXT_MENU_TEMPLATE = [
255271
text: '&Save On Exit',
256272
handler: function (item) {
257273
item.checked = !item.checked;
258-
console.log('Save On Exit:', item.checked);
274+
log('Save On Exit - ' + item.checked);
259275
}
260276
},
261277
{
@@ -298,17 +314,15 @@ var CONTEXT_MENU_TEMPLATE = [
298314
handler: logItem
299315
}
300316
];
317+
/**
318+
* The main application entry point.
319+
*/
301320
function main() {
302-
var menuHost = new phosphor_widget_1.Widget();
303-
menuHost.children = [phosphor_menus_1.MenuBar.fromTemplate(MENU_BAR_TEMPLATE)];
304-
var contextMenu = phosphor_menus_1.Menu.fromTemplate(CONTEXT_MENU_TEMPLATE);
305-
menuHost.node.addEventListener('contextmenu', function (event) {
306-
event.preventDefault();
307-
var x = event.clientX;
308-
var y = event.clientY;
309-
contextMenu.popup(x, y);
310-
});
311-
phosphor_tabs_1.TabPanel.setTab(menuHost, new phosphor_tabs_1.Tab('Demo'));
321+
var contextArea = new phosphor_widget_1.Widget();
322+
contextArea.addClass('ContextArea');
323+
contextArea.node.innerHTML = ('<h2>Notice the menu bar at the top of the document.' +
324+
'<h2>Right click this panel for a context menu.</h2>' +
325+
'<h3>Clicked Item: <span id="log-span"></span></h3>');
312326
var cmSource = new CodeMirrorWidget({
313327
mode: 'text/javascript',
314328
lineNumbers: true,
@@ -321,11 +335,21 @@ function main() {
321335
tabSize: 2,
322336
});
323337
cmCss.loadTarget('./index.css');
338+
phosphor_tabs_1.TabPanel.setTab(contextArea, new phosphor_tabs_1.Tab('Demo'));
324339
phosphor_tabs_1.TabPanel.setTab(cmSource, new phosphor_tabs_1.Tab('Source'));
325340
phosphor_tabs_1.TabPanel.setTab(cmCss, new phosphor_tabs_1.Tab('CSS'));
341+
var contextMenu = phosphor_menus_1.Menu.fromTemplate(CONTEXT_MENU_TEMPLATE);
342+
contextArea.node.addEventListener('contextmenu', function (event) {
343+
event.preventDefault();
344+
var x = event.clientX;
345+
var y = event.clientY;
346+
contextMenu.popup(x, y);
347+
});
348+
var menuBar = phosphor_menus_1.MenuBar.fromTemplate(MENU_BAR_TEMPLATE);
326349
var panel = new phosphor_tabs_1.TabPanel();
327350
panel.id = 'main';
328-
panel.widgets = [menuHost, cmSource, cmCss];
351+
panel.widgets = [contextArea, cmSource, cmCss];
352+
phosphor_widget_1.attachWidget(menuBar, document.body);
329353
phosphor_widget_1.attachWidget(panel, document.body);
330354
window.onresize = function () { return panel.update(); };
331355
}

‎examples/menus/index.css

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,18 @@ body {
1414

1515
#main {
1616
position: absolute;
17-
top: 10px;
17+
top: 35px;
1818
left: 10px;
1919
right: 10px;
2020
bottom: 10px;
2121
}
2222

2323

24+
.ContextArea {
25+
padding-left: 10px;
26+
}
27+
28+
2429
.p-TabBar {
2530
min-height: 24px;
2631
}
@@ -74,7 +79,6 @@ body {
7479

7580

7681
.p-TabPanel > .p-StackedPanel {
77-
padding: 10px;
7882
background: white;
7983
border: 1px solid #C0C0C0;
8084
border-top: none;
@@ -155,7 +159,7 @@ body {
155159
.p-MenuBar {
156160
min-height: 24px;
157161
padding-left: 5px;
158-
background: #FAFAFA;
162+
background: #FEFEFE;
159163
color: rgba(0, 0, 0, 0.87);
160164
border-bottom: 1px solid #DDDDDD;
161165
font: 13px Helvetica, Arial, sans-serif;

‎examples/menus/index.js

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,22 @@ var CodeMirrorWidget = (function (_super) {
5252
};
5353
return CodeMirrorWidget;
5454
})(phosphor_widget_1.Widget);
55+
/**
56+
* Log a message to the log element.
57+
*/
58+
function log(value) {
59+
var node = document.getElementById('log-span');
60+
node.textContent = value;
61+
}
62+
/**
63+
* Log the text of a menu item to the log element.
64+
*/
5565
function logItem(item) {
56-
console.log(item.text);
66+
log(item.text.replace(/&/g, ''));
5767
}
68+
/**
69+
* The template for the application menu bar.
70+
*/
5871
var MENU_BAR_TEMPLATE = [
5972
{
6073
text: 'File',
@@ -216,6 +229,9 @@ var MENU_BAR_TEMPLATE = [
216229
]
217230
}
218231
];
232+
/**
233+
* The template for the application context menu.
234+
*/
219235
var CONTEXT_MENU_TEMPLATE = [
220236
{
221237
text: '&Copy',
@@ -252,7 +268,7 @@ var CONTEXT_MENU_TEMPLATE = [
252268
text: '&Save On Exit',
253269
handler: function (item) {
254270
item.checked = !item.checked;
255-
console.log('Save On Exit:', item.checked);
271+
log('Save On Exit - ' + item.checked);
256272
}
257273
},
258274
{
@@ -295,17 +311,15 @@ var CONTEXT_MENU_TEMPLATE = [
295311
handler: logItem
296312
}
297313
];
314+
/**
315+
* The main application entry point.
316+
*/
298317
function main() {
299-
var menuHost = new phosphor_widget_1.Widget();
300-
menuHost.children = [phosphor_menus_1.MenuBar.fromTemplate(MENU_BAR_TEMPLATE)];
301-
var contextMenu = phosphor_menus_1.Menu.fromTemplate(CONTEXT_MENU_TEMPLATE);
302-
menuHost.node.addEventListener('contextmenu', function (event) {
303-
event.preventDefault();
304-
var x = event.clientX;
305-
var y = event.clientY;
306-
contextMenu.popup(x, y);
307-
});
308-
phosphor_tabs_1.TabPanel.setTab(menuHost, new phosphor_tabs_1.Tab('Demo'));
318+
var contextArea = new phosphor_widget_1.Widget();
319+
contextArea.addClass('ContextArea');
320+
contextArea.node.innerHTML = ('<h2>Notice the menu bar at the top of the document.' +
321+
'<h2>Right click this panel for a context menu.</h2>' +
322+
'<h3>Clicked Item: <span id="log-span"></span></h3>');
309323
var cmSource = new CodeMirrorWidget({
310324
mode: 'text/javascript',
311325
lineNumbers: true,
@@ -318,11 +332,21 @@ function main() {
318332
tabSize: 2,
319333
});
320334
cmCss.loadTarget('./index.css');
335+
phosphor_tabs_1.TabPanel.setTab(contextArea, new phosphor_tabs_1.Tab('Demo'));
321336
phosphor_tabs_1.TabPanel.setTab(cmSource, new phosphor_tabs_1.Tab('Source'));
322337
phosphor_tabs_1.TabPanel.setTab(cmCss, new phosphor_tabs_1.Tab('CSS'));
338+
var contextMenu = phosphor_menus_1.Menu.fromTemplate(CONTEXT_MENU_TEMPLATE);
339+
contextArea.node.addEventListener('contextmenu', function (event) {
340+
event.preventDefault();
341+
var x = event.clientX;
342+
var y = event.clientY;
343+
contextMenu.popup(x, y);
344+
});
345+
var menuBar = phosphor_menus_1.MenuBar.fromTemplate(MENU_BAR_TEMPLATE);
323346
var panel = new phosphor_tabs_1.TabPanel();
324347
panel.id = 'main';
325-
panel.widgets = [menuHost, cmSource, cmCss];
348+
panel.widgets = [contextArea, cmSource, cmCss];
349+
phosphor_widget_1.attachWidget(menuBar, document.body);
326350
phosphor_widget_1.attachWidget(panel, document.body);
327351
window.onresize = function () { return panel.update(); };
328352
}

‎examples/menus/index.ts

Lines changed: 43 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,26 @@ class CodeMirrorWidget extends Widget {
6565
}
6666

6767

68+
/**
69+
* Log a message to the log element.
70+
*/
71+
function log(value: string): void {
72+
var node = document.getElementById('log-span');
73+
node.textContent = value;
74+
}
75+
76+
77+
/**
78+
* Log the text of a menu item to the log element.
79+
*/
6880
function logItem(item: MenuItem): void {
69-
console.log(item.text);
81+
log(item.text.replace(/&/g, ''));
7082
}
7183

7284

85+
/**
86+
* The template for the application menu bar.
87+
*/
7388
var MENU_BAR_TEMPLATE = [
7489
{
7590
text: 'File',
@@ -233,6 +248,9 @@ var MENU_BAR_TEMPLATE = [
233248
];
234249

235250

251+
/**
252+
* The template for the application context menu.
253+
*/
236254
var CONTEXT_MENU_TEMPLATE = [
237255
{
238256
text: '&Copy',
@@ -269,7 +287,7 @@ var CONTEXT_MENU_TEMPLATE = [
269287
text: '&Save On Exit',
270288
handler: (item: MenuItem) => {
271289
item.checked = !item.checked;
272-
console.log('Save On Exit:', item.checked);
290+
log('Save On Exit - ' + item.checked);
273291
}
274292
},
275293
{
@@ -314,20 +332,17 @@ var CONTEXT_MENU_TEMPLATE = [
314332
];
315333

316334

335+
/**
336+
* The main application entry point.
337+
*/
317338
function main(): void {
318-
319-
var menuHost = new Widget();
320-
menuHost.children = [MenuBar.fromTemplate(MENU_BAR_TEMPLATE)];
321-
322-
var contextMenu = Menu.fromTemplate(CONTEXT_MENU_TEMPLATE);
323-
menuHost.node.addEventListener('contextmenu', (event: MouseEvent) => {
324-
event.preventDefault();
325-
var x = event.clientX;
326-
var y = event.clientY;< F438 /div>
327-
contextMenu.popup(x, y);
328-
});
329-
330-
TabPanel.setTab(menuHost, new Tab('Demo'));
339+
var contextArea = new Widget();
340+
contextArea.addClass('ContextArea');
341+
contextArea.node.innerHTML = (
342+
'<h2>Notice the menu bar at the top of the document.' +
343+
'<h2>Right click this panel for a context menu.</h2>' +
344+
'<h3>Clicked Item: <span id="log-span"></span></h3>'
345+
);
331346

332347
var cmSource = new CodeMirrorWidget({
333348
mode: 'text/javascript',
@@ -343,13 +358,25 @@ function main(): void {
343358
});
344359
cmCss.loadTarget('./index.css');
345360

361+
TabPanel.setTab(contextArea, new Tab('Demo'));
346362
TabPanel.setTab(cmSource, new Tab('Source'));
347363
TabPanel.setTab(cmCss, new Tab('CSS'));
348364

365+
var contextMenu = Menu.fromTemplate(CONTEXT_MENU_TEMPLATE);
366+
contextArea.node.addEventListener('contextmenu', (event: MouseEvent) => {
367+
event.preventDefault();
368+
var x = event.clientX;
369+
var y = event.clientY;
370+
contextMenu.popup(x, y);
371+
});
372+
373+
var menuBar = MenuBar.fromTemplate(MENU_BAR_TEMPLATE);
374+
349375
var panel = new TabPanel();
350376
panel.id = 'main';
351-
panel.widgets = [menuHost, cmSource, cmCss];
377+
panel.widgets = [contextArea, cmSource, cmCss];
352378

379+
attachWidget(menuBar, document.body);
353380
attachWidget(panel, document.body);
354381

355382
window.onresize = () =>< 8CA5 /span> panel.update();

‎index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@ <h3>Examples</h3>
3434
<li>
3535
<a href="/examples/dockpanel">DockPanel</a>
3636
</li>
37+
<li>
38+
<a href="/examples/menus">Menus</a>
39+
</li>
3740
</ul>
3841
<br>
3942
<h3>API Docs</h3>

0 commit comments

Comments
 (0)
0