[BROOKLYN-166] add codemirror, yaml syntax-highlighting, autocompletion)

brooklyn-dist/dist/licensing/overrides.yaml

@@ -346,6 +346,16 @@
   notice: Copyright (c) Twitter, Inc. and other contributors (2013-2014)
   license: MIT
 
+# CodeMirror: used by jsGUI to provide edit in place for any textarea
+- id: codemirror.js
+  name: CodeMirror
+  version: "5.7.0"
+  files: codemirror*.{js,css}
+  url: https://codemirror.net/
+  organization: { name: "CodeMirror", url:"https://codemirror.net" }
+  notice: Copyright (c) Marijn Haverbeke (2015)
+  license: MIT
+
 # used for CLI to build catalog
 - id: marked.js
   version: 0.3.1
@@ -379,5 +389,3 @@
   url: https://github.com/carhartl/jquery-cookie
   notice: Copyright (c) 2013 Klaus Hartl
   license: MIT
-
-

brooklyn-ui/src/build/optimize-js.json

@@ -16,3 +16,4 @@
     // Set to "none" to skip minification
     optimize: "uglify"
 })
+

brooklyn-ui/src/main/license/files/LICENSE

@@ -396,6 +396,14 @@ This project includes the software: marked.js
   Used under the following license: The MIT License (http://opensource.org/licenses/MIT)
   Copyright (c) Christopher Jeffrey (2011-2014)
 
+This project includes the software: CodeMirror
+  Available at: https://codemirror.net/
+  Developed by: CodeMirror (https://codemirror.net)
+  Inclusive of: codemirror*.{js,css}
+  Version used: 5.7.0
+  Used under the following license: The MIT License (http://opensource.org/licenses/MIT)
+  Copyright (c) Marijn Haverbeke (2015)
+
 ---------------------------------------------------
 
 (3) Licenses for bundled software

brooklyn-ui/src/main/license/source-inclusions.yaml

@@ -39,3 +39,4 @@
 - id: js-yaml.js
 - id: jquery.form.js
 - id: marked.js
+- id: codemirror.js

brooklyn-ui/src/main/webapp/assets/css/brooklyn.css

@@ -25,7 +25,6 @@ BODY {
 textarea {
     white-space: pre;
     word-wrap: normal;
-    overflow-x: scroll;
 }
 
 /* HEADER  */
@@ -269,3 +268,15 @@ textarea {
     content: 'Not Available';
     */
 }
+
+button.catalog-submit-button.btn {
+	margin-top: 10px;
+}
+
+.CodeMirror .cm-s-default {
+	height: 560px;
+}
+
+.CodeMirror .CodeMirror-placeholder {
+    color: #999;
+}

brooklyn-ui/src/main/webapp/assets/js/config.js

@@ -30,11 +30,13 @@ require.config({
         "underscore":"libs/underscore",
         "backbone":"libs/backbone",
         "bootstrap":"libs/bootstrap",
+
         "jquery-form":"libs/jquery.form",
         "jquery-datatables":"libs/jquery.dataTables",
         "jquery-slideto":"util/jquery.slideto",
         "jquery-wiggle":"libs/jquery.wiggle.min",
         "jquery-ba-bbq":"libs/jquery.ba-bbq.min",
+
         "moment":"libs/moment",
         "handlebars":"libs/handlebars-1.0.rc.1",
         "brooklyn":"util/brooklyn",
@@ -47,7 +49,17 @@ require.config({
         "uri":"libs/URI",
         "zeroclipboard":"libs/ZeroClipboard",
         "js-yaml":"libs/js-yaml",
-
+
+        "codemirror":"lib/codemirror",
+
+        "mode":"mode",
+        "addon":"addon",
+
+        "codemirror-mode-yaml":"mode/yaml/yaml",
+        "codemirror-addon-show-hint":"addon/hint/show-hint",
+        "codemirror-addon-anyword-hint":"addon/hint/anyword-hint",
+        "codemirror-addon-display-placeholder":"addon/display/placeholder",
+
         "tpl":"../tpl"
     },
 
@@ -70,6 +82,14 @@ require.config({
         "jquery-wiggle": { deps: [ "jquery" ] },
         "jquery-ba-bbq": { deps: [ "jquery" ] },
         "handlebars": { deps: [ "jquery" ] },
+        "codemirror":{
+            exports:"CodeMirror"
+        },
+        "codemirror-mode-yaml":{ deps: ["codemirror"] },
+        "codemirror-addon-show-hint":{ deps: ["codemirror"] },
+        "codemirror-addon-anyword-hint":{ deps: ["codemirror"] },
+        "codemirror-addon-display-placeholder":{ deps: ["codemirror"] },
+
         "bootstrap": { deps: [ "jquery" ] /* http://stackoverflow.com/questions/9227406/bootstrap-typeerror-undefined-is-not-a-function-has-no-method-tab-when-us */ }
     }
 });

brooklyn-ui/src/main/webapp/assets/js/libs/bootstrap.js

@@ -196,6 +196,7 @@
   }
 
   Button.prototype.toggle = function () {
+	// TODO: buttons-radio :div is replaced by :ul
     var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
 
     $parent && $parent

brooklyn-ui/src/main/webapp/assets/js/router.js

@@ -20,12 +20,12 @@ define([
     "brooklyn", "underscore", "jquery", "backbone",
     "model/application", "model/app-tree", "model/location", 
     "model/server-extended-status",
-    "view/home", "view/application-explorer", "view/catalog", "view/script-groovy",
+    "view/home", "view/editor", "view/application-explorer", "view/catalog", "view/script-groovy",
     "text!tpl/help/page.html","text!tpl/labs/page.html", "text!tpl/home/server-caution.html"
 ], function (Brooklyn, _, $, Backbone,
         Application, AppTree, Location, 
         serverStatus,
-        HomeView, ExplorerView, CatalogView, ScriptGroovyView,
+        HomeView, EditorView, ExplorerView, CatalogView, ScriptGroovyView,
         HelpHtml, LabsHtml, ServerCautionHtml) {
 
     var ServerCautionOverlay = Backbone.View.extend({
@@ -122,6 +122,8 @@ define([
     var Router = Backbone.Router.extend({
         routes:{
             'v1/home/*trail':'homePage',
+            'v1/editor/*trail':'editorPage',
+            'v1/editor':'editorPage',
             'v1/applications/:app/entities/*trail':'applicationsPage',
             'v1/applications/*trail':'applicationsPage',
             'v1/applications':'applicationsPage',
@@ -135,6 +137,7 @@ define([
         },
 
         showView: function(selector, view) {
+            console.log("showView");
             // close the previous view - does binding clean-up and avoids memory leaks
             if (this.currentView) {
                 this.currentView.close();
@@ -177,6 +180,16 @@ define([
                 }
             }, error: render});
         },
+        editorPage: function (trail) {
+            console.log("editorPage");
+            var editorView = new EditorView({
+                collection: this.applications,
+                appRouter: this
+            });
+            this.showView("#application-content", editorView);
+            $(".nav1").removeClass("active");
+            $(".nav1_editor").addClass("active");
+        },
         applicationsPage:function (app, trail, tab) {
             if (trail === undefined) trail = app
             var that = this

brooklyn-ui/src/main/webapp/assets/js/util/brooklyn-utils.js

@@ -113,6 +113,7 @@ define([
         if ($input.attr("type") === "checkbox") {
             return $input.is(":checked");
         } else {
+            // TODO: get codemirror.getValue() in case this is a textarea ...
             return $input.val();
         }
     };