Browse Source

Work in progress on newer UI, and multiple editors

dev/git-series/gccdum
Matt Godbolt 6 years ago
parent
commit
af5decfe5c
  1. 2
      static/compiler.js
  2. 6
      static/components.js
  3. 13
      static/editor.js
  4. 2
      static/explorer.css
  5. 73
      static/hub.js
  6. 19
      static/index.html
  7. 20
      static/main.js

2
static/compiler.js

@ -60,7 +60,7 @@ define(function (require) {
this.domRoot = container.getElement();
this.domRoot.html($('#compiler').html());
this.id = state.id || hub.nextId();
this.id = state.id || hub.nextCompilerId();
this.sourceEditorId = state.source || 1;
this.compiler = compilersById[state.compiler] || compilersById[options.defaultCompiler];
this.options = state.options || options.compileOptions;

6
static/components.js

@ -50,16 +50,14 @@ define(function (require) {
return {
type: 'component',
componentName: 'codeEditor',
componentState: {id: id},
isClosable: false
componentState: {id: id}
};
},
getEditorWith: function (id, source, options) {
return {
type: 'component',
componentName: 'codeEditor',
componentState: {id: id, source: source, options: options},
isClosable: false
componentState: {id: id, source: source, options: options}
};
},
getOutput: function (compiler, editor) {

13
static/editor.js

@ -40,7 +40,7 @@ define(function (require) {
function Editor(hub, state, container, lang, defaultSrc) {
var self = this;
this.id = state.id || hub.nextId();
this.id = state.id || hub.nextEditorId();
this.container = container;
this.domRoot = container.getElement();
this.domRoot.html($('#codeEditor').html());
@ -151,7 +151,6 @@ define(function (require) {
var compilerConfig = _.bind(function () {
return Components.getCompiler(this.id);
}, this);
var diffConfig = Components.getDiff();
this.container.layoutManager.createDragSource(
this.domRoot.find('.btn.add-compiler'), compilerConfig());
@ -161,16 +160,6 @@ define(function (require) {
insertPoint.addChild(compilerConfig());
}, this));
this.container.layoutManager.createDragSource(
this.domRoot.find('.btn.add-diff'), diffConfig);
this.domRoot.find('.btn.add-diff').click(_.bind(function () {
var insertPoint = hub.findParentRowOrColumn(this.container) ||
this.container.layoutManager.root.contentItems[0];
insertPoint.addChild(diffConfig);
}, this));
Sharing.initShareButton(this.domRoot.find('.share'), container.layoutManager);
this.updateState();
}

2
static/explorer.css

@ -49,7 +49,7 @@
}
.compiler-picker {
width: 14em;
min-width: 14em;
}
.diff-picker {

73
static/hub.js

@ -34,10 +34,31 @@ define(function (require) {
var Components = require('components');
var diff = require('diff');
function Ids() {
this.used = {};
}
Ids.prototype.add = function (id) {
this.used[id] = true;
};
Ids.prototype.remove = function (id) {
delete this.used[id];
};
Ids.prototype.next = function () {
for (var i = 1; i < 100000; ++i) {
if (!this.used[i]) {
this.used[i] = true;
return i;
}
}
throw "Ran out of ids!?";
};
function Hub(layout, defaultSrc) {
this.layout = layout;
this.defaultSrc = defaultSrc;
this.ids = {};
this.editorIds = new Ids();
this.compilerIds = new Ids();
var self = this;
layout.registerComponent(Components.getEditor().componentName,
@ -56,22 +77,27 @@ define(function (require) {
function (container, state) {
return self.diffFactory(container, state);
});
var removeId = function (id) {
self.ids[id] = false;
};
layout.eventHub.on('editorClose', removeId);
layout.eventHub.on('compilerClose', removeId);
layout.eventHub.on('editorOpen', function (id) {
this.editorIds.add(id);
}, this);
layout.eventHub.on('editorClose', function (id) {
this.editorIds.remove(id);
}, this);
layout.eventHub.on('compilerOpen', function (id) {
this.compilerIds.add(id);
}, this);
layout.eventHub.on('compilerClose', function (id) {
this.compilerIds.remove(id);
}, this);
layout.init();
}
Hub.prototype.nextId = function () {
for (var i = 1; i < 100000; ++i) {
if (!this.ids[i]) {
this.ids[i] = true;
return i;
}
}
throw "Ran out of ids!?";
Hub.prototype.nextEditorId = function () {
return this.editorIds.next();
};
Hub.prototype.nextCompilerId = function () {
return this.compilerIds.next();
};
Hub.prototype.codeEditorFactory = function (container, state) {
@ -119,5 +145,24 @@ define(function (require) {
return elem;
};
Hub.prototype.addAtRoot = function (newElem) {
var rootFirstItem = this.layout.root.contentItems[0];
if (rootFirstItem) {
if (rootFirstItem.isRow || rootFirstItem.isColumn) {
rootFirstItem.addChild(newElem);
} else {
var newRow = this.layout.createContentItem({type: 'row'}, this.layout.root);
this.layout.root.replaceChild(rootFirstItem, newRow);
newRow.addChild(rootFirstItem);
newRow.addChild(newElem);
}
} else {
this.layout.root.addChild({
type: 'row',
content: [newElem]
});
}
};
return Hub;
});

19
static/index.html

@ -25,7 +25,16 @@
</div>
<li class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#" id="add-editor" title="Click or drag to desired destination">Add Editor</a></li>
<li><a href="#" id="add-diff" title="Click or drag to desired destination">Add Diff View</a></li>
<li><a href="#" data-target="#settings" data-toggle="modal">Settings</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
<ul class="dropdown-menu">
<!--<li class="divider"></li>-->
<li><a href="#" id="ui-reset">Reset UI layout</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.patreon.com/mattgodbolt">
@ -52,8 +61,6 @@
<li><a href="https://github.com/mattgodbolt/compiler-explorer/wiki">Wiki</a></li>
<li><a href="https://github.com/mattgodbolt/compiler-explorer/issues">Report an issue</a></li>
<li class="divider"></li>
<li><a href="#" id="ui-reset">Reset UI layout</a></li>
<li class="divider"></li>
<li><a href="#" id="thanks-to">Thanks to...</a></li>
<li><a href="http://xania.org/201609/how-compiler-explorer-runs-on-amazon">How it works</a></li>
<li><a href="mailto:matt@godbolt.org">Contact the author</a></li>
@ -88,18 +95,10 @@
<button title="Load or save text" class="btn btn-default btn-sm load-save">
<span class="glyphicon glyphicon-floppy-disk"></span>
</button>
<button title="Get URLs for sharing"
class="btn btn-default btn-sm share">
<span class="glyphicon glyphicon-share"></span>
</button>
<button title="Add a new compiler for this source (click or drag)"
class="btn btn-default btn-sm add-compiler">
<span class="glyphicon glyphicon-open"></span>
</button>
<button title="Add a diff view (click or drag)"
class="btn btn-default btn-sm add-diff">
<span class="glyphicon glyphicon-tree-deciduous"></span>
</button>
</div>
</div>
<div class="monaco-placeholder"></div>

20
static/main.js

@ -117,13 +117,14 @@ define(function (require) {
var root = $("#root");
var layout;
var hub;
try {
layout = new GoldenLayout(config, root);
new Hub(layout, defaultSrc);
hub = new Hub(layout, defaultSrc);
} catch (e) {
Raven.captureException(e);
layout = new GoldenLayout(defaultConfig, root);
new Hub(layout, defaultSrc);
hub = new Hub(layout, defaultSrc);
}
layout.on('stateChanged', function () {
var config = layout.toConfig();
@ -166,6 +167,21 @@ define(function (require) {
});
sharing.initShareButton($('#share'), layout);
function setupAdd(thing, func) {
layout.createDragSource(thing, func);
thing.click(function () {
hub.addAtRoot(func());
});
};
setupAdd($('#add-diff'), function () {
return Components.getDiff();
});
setupAdd($('#add-editor'), function () {
return Components.getEditor();
});
$('#ui-reset').click(function () {
window.localStorage.removeItem('gl');
window.location.reload();

Loading…
Cancel
Save