|
| 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_splitpanel_1 = require('phosphor-splitpanel'); |
| 15 | +var phosphor_tabs_1 = require('phosphor-tabs'); |
| 16 | +var phosphor_widget_1 = require('phosphor-widget'); |
| 17 | +require('./index.css'); |
| 18 | +// This widget uses flexbox for layout: see ./index.css |
| 19 | +var MyVBox = (function (_super) { |
| 20 | + __extends(MyVBox, _super); |
| 21 | + function MyVBox() { |
| 22 | + _super.call(this); |
| 23 | + this.addClass('my-vbox'); |
| 24 | + } |
| 25 | + return MyVBox; |
| 26 | +})(phosphor_widget_1.Widget); |
| 27 | +var MyResizeWidget = (function (_super) { |
| 28 | + __extends(MyResizeWidget, _super); |
| 29 | + function MyResizeWidget() { |
| 30 | + _super.apply(this, arguments); |
| 31 | + } |
| 32 | + // All widgets will receive a resize message when their parent |
| 33 | + // determines that they have likely been resized. If the current |
| 34 | + // size of the widget is known, it will be passed as part of the |
| 35 | + // message. Otherwise, the size parameters will be `-1`, and you |
| 36 | + // will need to measure the node to get the current size. |
| 37 | + // |
| 38 | + // The current size will typically be known when the parent of |
| 39 | + // the widget is an absolute Phosphor layout panel, and will be |
| 40 | + // unknown when the parent is a widget which uses CSS to layout |
| 41 | + // its children. Here is a link to the typical way to handle the |
| 42 | + // condition in the most efficient way possible, by only measuring |
| 43 | + // if required: |
| 44 | + // https://github.com/phosphorjs/phosphor-splitpanel/blob/master/src/index.ts#L368 |
| 45 | + MyResizeWidget.prototype.onResize = function (msg) { |
| 46 | + var w = msg.width; |
| 47 | + var h = msg.height; |
| 48 | + console.log(this.node.className, 'width:', w, 'height:', h); |
| 49 | + }; |
| 50 | + return MyResizeWidget; |
| 51 | +})(phosphor_widget_1.Widget); |
| 52 | +function createContent(name) { |
| 53 | + var widget = new MyResizeWidget(); |
| 54 | + widget.addClass('content'); |
| 55 | + widget.addClass(name); |
| 56 | + return widget; |
| 57 | +} |
| 58 | +/** |
| 59 | + * A widget which hosts a CodeMirror editor. |
| 60 | + */ |
| 61 | +var CodeMirrorWidget = (function (_super) { |
| 62 | + __extends(CodeMirrorWidget, _super); |
| 63 | + function CodeMirrorWidget(config) { |
| 64 | + _super.call(this); |
| 65 | + this.addClass('CodeMirrorWidget'); |
| 66 | + this._editor = CodeMirror(this.node, config); |
| 67 | + } |
| 68 | + Object.defineProperty(CodeMirrorWidget.prototype, "editor", { |
| 69 | + get: function () { |
| 70 | + return this._editor; |
| 71 | + }, |
| 72 | + enumerable: true, |
| 73 | + configurable: true |
| 74 | + }); |
| 75 | + CodeMirrorWidget.prototype.loadTarget = function (target) { |
| 76 | + var doc = this._editor.getDoc(); |
| 77 | + var xhr = new XMLHttpRequest(); |
| 78 | + xhr.open('GET', target); |
| 79 | + xhr.onreadystatechange = function () { return doc.setValue(xhr.responseText); }; |
| 80 | + xhr.send(); |
| 81 | + }; |
| 82 | + CodeMirrorWidget.prototype.onAfterAttach = function (msg) { |
| 83 | + this._editor.refresh(); |
| 84 | + }; |
| 85 | + CodeMirrorWidget.prototype.onResize = function (msg) { |
| 86 | + if (msg.width < 0 || msg.height < 0) { |
| 87 | + this._editor.refresh(); |
| 88 | + } |
| 89 | + else { |
| 90 | + this._editor.setSize(msg.width, msg.height); |
| 91 | + } |
| 92 | + }; |
| 93 | + return CodeMirrorWidget; |
| 94 | +})(phosphor_widget_1.Widget); |
| 95 | +function main() { |
| 96 | + var r = createContent('red'); |
| 97 | + var y = createContent('yellow'); |
| 98 | + var g = createContent('green'); |
| 99 | + var b1 = createContent('blue'); |
| 100 | + var b2 = createContent('blue'); |
| 101 | + var b3 = createContent('blue'); |
| 102 | + var split = new phosphor_splitpanel_1.SplitPanel(); |
| 103 | + split.children = [b1, b2, b3]; |
| 104 | + // Note that the flexbox is the root widget, not the split panel. |
| 105 | + // Since it is in a Phosphor layout, when the window resizes, |
| 106 | + // the flexbox's decendants get the resize message they need. |
| 107 | + var box = new MyVBox(); |
| 108 | + box.children = [r, split, y, g]; |
| 109 | + // Create the CodeMirror widget with a typescript mode. |
| 110 | + var cmSource = new CodeMirrorWidget({ |
| 111 | + mode: 'text/typescript', |
| 112 | + lineNumbers: true, |
| 113 | + tabSize: 2, |
| 114 | + }); |
| 115 | + cmSource.loadTarget('./index.ts'); |
| 116 | + var cmCss = new CodeMirrorWidget({ |
| 117 | + mode: 'text/css', |
| 118 | + lineNumbers: true, |
| 119 | + tabSize: 2, |
| 120 | + }); |
| 121 | + cmCss.loadTarget('./index.css'); |
| 122 | + phosphor_tabs_1.TabPanel.setTab(box, new phosphor_tabs_1.Tab('Demo')); |
| 123 | + phosphor_tabs_1.TabPanel.setTab(cmSource, new phosphor_tabs_1.Tab('Source')); |
| 124 | + phosphor_tabs_1.TabPanel.setTab(cmCss, new phosphor_tabs_1.Tab('CSS')); |
| 125 | + var panel = new phosphor_tabs_1.TabPanel(); |
| 126 | + panel.id = 'main'; |
| 127 | + panel.widgets = [box, cmSource, cmCss]; |
| 128 | + phosphor_widget_1.attachWidget(panel, document.body); |
| 129 | + window.onresize = function () { return panel.update(); }; |
| 130 | +} |
| 131 | +window.onload = main; |
0 commit comments