brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aleds...@apache.org
Subject [1/2] brooklyn-ui git commit: BROOKLYN-244: Fix blueprint composer loading issue
Date Wed, 06 Apr 2016 15:39:41 GMT
Repository: brooklyn-ui
Updated Branches:
  refs/heads/0.9.0 307382128 -> 288e2447e


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/a88f781e
Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/a88f781e
Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/a88f781e

Branch: refs/heads/0.9.0
Commit: a88f781ecd5223fb66ff6965677a058e8d280b66
Parents: 3073821
Author: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Authored: Wed Apr 6 12:01:32 2016 +0100
Committer: Aled Sage <aled.sage@gmail.com>
Committed: Wed Apr 6 16:39:07 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/a88f781e/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/a88f781e/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/a88f781e/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;">


Mime
View raw message