Repository: brooklyn-ui Updated Branches: refs/heads/master cbddc7f8b -> 7a8f96c4b
BROOKLYN-244: Fix blueprint composer loading issue Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/38e89a53 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/38e89a53 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/38e89a53 Branch: refs/heads/master Commit: 38e89a53f9335994cff9293b57d5164c380f1d6e Parents: cbddc7f Author: Thomas Bouron <thomas.bou...@cloudsoftcorp.com> Authored: Wed Apr 6 12:01:32 2016 +0100 Committer: Thomas Bouron <thomas.bou...@cloudsoftcorp.com> Committed: Wed Apr 6 12:01:32 2016 +0100 ---------------------------------------------------------------------- .../webapp/assets/css/codemirror-brooklyn.css | 23 +++++++++- src/main/webapp/assets/js/view/editor.js | 45 +++++++++++++------- src/main/webapp/assets/tpl/editor/page.html | 1 + 3 files changed, 52 insertions(+), 17 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e89a53/src/main/webapp/assets/css/codemirror-brooklyn.css ---------------------------------------------------------------------- diff --git a/src/main/webapp/assets/css/codemirror-brooklyn.css b/src/main/webapp/assets/css/codemirror-brooklyn.css index 1d0c0bc..65790d8 100644 --- a/src/main/webapp/assets/css/codemirror-brooklyn.css +++ b/src/main/webapp/assets/css/codemirror-brooklyn.css @@ -54,11 +54,32 @@ li.CodeMirror-hint-active { /* override show-hint to have roughly brooklyn colors instead of blue */ background: #549e2b; } -#composer .error-message { + +.composer .error-message { background-color: #e2e2e2; margin: 0; padding: 15px 10px 15px 10px; border-left: 1px solid #d3d3d3; border-right: 1px solid #d3d3d3; border-radius: 0; +} + +.composer .navbar_main { + position: relative; +} +.composer .composer-editor-loading { + position: absolute; + top: 0; + width: 100%; + height: 100%; + z-index: 100; + background-color: #fff; + text-align: center; + opacity: 0.8; +} +.composer .composer-editor-loading span { + position: relative; + top: 50%; + transform: translateY(-50%); + font-size: 40px; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e89a53/src/main/webapp/assets/js/view/editor.js ---------------------------------------------------------------------- diff --git a/src/main/webapp/assets/js/view/editor.js b/src/main/webapp/assets/js/view/editor.js index db10181..05469d1 100644 --- a/src/main/webapp/assets/js/view/editor.js +++ b/src/main/webapp/assets/js/view/editor.js @@ -74,7 +74,6 @@ define([ editor: null, initialize:function () { - var vm = this; if (!this.options.type || this.options.type === MODE_APP) { this.setMode(MODE_APP); } else if (this.options.type === MODE_CATALOG) { @@ -84,12 +83,6 @@ define([ this.setMode(MODE_APP); } this.options.catalog = new CatalogApplication.Collection(); - this.options.catalog.fetch({ - data: $.param({allVersions: true}), - success: function () { - vm.initializeEditor(); - } - }); this.options.locations.on('reset', this.renderLocationAlert, this); ViewUtils.fetchRepeatedlyWithDelay(this, this.options.locations, { fetchOptions: { reset: true }, doitnow: true }); @@ -111,6 +104,14 @@ define([ .find('#location-alert').hide(); this.loadEditor(); this.refresh(); + + // Codemirror need to have the DOM loaded to be able to display the editor correctly (line numbers for example) + // The timeout is there for this particular purpose. + var vm = this; + setTimeout(function() { + vm.initializeEditor(); + }, 10); + return this; }, renderLocationAlert: function(event) { @@ -158,7 +159,9 @@ define([ } }, initializeEditor: function() { + var vm = this; var cm = this.editor; + var loading = this.$('.composer-editor-loading'); if (typeof(cm) !== "undefined") { var itemText = ""; if (this.options.typeId === '_') { @@ -169,13 +172,25 @@ define([ console.log('ignoring content when typeId is not _; given:', this.options.type, this.options.typeId, this.options.content); } if (this.options.typeId) { - var item = this.options.catalog.getId(this.options.typeId); - if (item) itemText = item['attributes']['planYaml']; - if (!itemText) { - itemText = '# unknown type - this is an example blueprint that would reference it\n'+ - 'services:\n- type: '+this.options.typeId+'\n'; - - } + cm.setOption('readOnly', 'nocursor'); + loading.show(); + this.options.catalog.fetch({ + data: $.param({allVersions: true}), + success: function () { + var item = vm.options.catalog.getId(vm.options.typeId); + var itemText = '# unknown type - this is an example blueprint that would reference it\n'+ + 'services:\n- type: ' + vm.options.typeId + '\n'; + if (item) { + itemText = item['attributes']['planYaml']; + } + + cm.getDoc().setValue(itemText); + cm.setOption('readOnly', false); + cm.refresh(); + + loading.fadeOut(); + } + }); } } cm.getDoc().setValue(itemText); @@ -226,8 +241,6 @@ define([ that.refreshOnMinorChange(); }); } - - this.initializeEditor(); }, parse: function(forceRefresh) { if (!forceRefresh && this.lastParse && this.lastParse.input === this.editor.getValue()) { http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/38e89a53/src/main/webapp/assets/tpl/editor/page.html ---------------------------------------------------------------------- diff --git a/src/main/webapp/assets/tpl/editor/page.html b/src/main/webapp/assets/tpl/editor/page.html index b66dbd7..9c0c351 100644 --- a/src/main/webapp/assets/tpl/editor/page.html +++ b/src/main/webapp/assets/tpl/editor/page.html @@ -59,6 +59,7 @@ under the License. </div> <textarea id="yaml_code" placeholder="# Enter blueprint yaml here. Press Ctrl+Space for completion." mode="yaml" class="code-textarea" style="height:760px; width:98%"></textarea> </div> + <div class="composer-editor-loading hide"><span>Loading item...</span></div> </div> </div> <div class="navbar_main_wrapper" style="background-color: #f0f0f0 !important;">
