Add CodeMirror as profile editor

Early integration with no code formatting yet, to support fitting
sidebar to editor content (profile text).

bower.json

@@ -28,7 +28,8 @@
     "font-awesome": "^4.7.0",
     "bootstrap-select": "hugdx/bootstrap-select#patch-1",
     "leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev",
-    "leaflet.editable": "^1.1.0"
+    "leaflet.editable": "^1.1.0",
+    "codemirror": "^5.35.0"
   },
   "overrides": {
     "leaflet": {

css/style.css

@@ -133,7 +133,7 @@ footer {
 }
 
 /* track messages (data tab) */
-#tab_data, #profile_upload {
+#tab_data, .CodeMirror {
     font-size: x-small;
 }
 
@@ -314,3 +314,13 @@ table.dataTable.display tbody tr.even:hover {
 .leaflet-sidebar-tabs > ul:last-child {
     display: none;
 }
+
+
+/*
+ * CodeMirror
+ */
+
+.CodeMirror {
+    height: 100%;
+    border: 1px solid #ddd;
+}

js/control/Profile.js

@@ -2,9 +2,12 @@ BR.Profile = L.Evented.extend({
     cache: {},
 
     initialize: function () {
+        var textArea = L.DomUtil.get('profile_upload');
+        this.editor = CodeMirror.fromTextArea(textArea, {});
+
         L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
         L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
-        this.ele = L.DomUtil.get('profile_upload');
+
         this.message = new BR.Message('profile_message', {
             alert: true
         });
@@ -14,8 +17,7 @@ BR.Profile = L.Evented.extend({
         var button = evt.target || evt.srcElement;
 
         evt.preventDefault();
-        this.ele.value = null;
+        this._setValue("");
-        this.ele.defaultValue = null;
 
         this.fire('clear');
         button.blur();
@@ -24,11 +26,11 @@ BR.Profile = L.Evented.extend({
     update: function(options) {
         var profileName = options.profile,
             profileUrl,
-            ele = this.ele,
+            empty = !this.editor.getValue(),
-            dirty = ele.defaultValue !== ele.value;
+            clean = this.editor.isClean();
 
         this.profileName = profileName;
-        if (profileName && BR.conf.profilesUrl && (!ele.value || !dirty)) {
+        if (profileName && BR.conf.profilesUrl && (empty || clean)) {
             if (!(profileName in this.cache)) {
                 profileUrl = BR.conf.profilesUrl + profileName + '.brf';
                 BR.Util.get(profileUrl, L.bind(function(err, profileText) {
@@ -41,20 +43,22 @@ BR.Profile = L.Evented.extend({
 
                     // don't set when option has changed while loading
                     if (!this.profileName || this.profileName === profileName) {
-                        ele.value = profileText;
+                        this._setValue(profileText);
-                        ele.defaultValue = ele.value;
                     }
                 }, this));
             } else {
-                ele.value = this.cache[profileName];
+                this._setValue(this.cache[profileName]);
-                ele.defaultValue = ele.value;
             }
         }
     },
 
+    show: function() {
+        this.editor.refresh();
+    },
+
     _upload: function(evt) {
         var button = evt.target || evt.srcElement,
-            profile = this.ele.value;
+            profile = this.editor.getValue();
 
         this.message.hide();
         $(button).button('uploading');
@@ -67,5 +71,10 @@ BR.Profile = L.Evented.extend({
                 $(button).blur();
             }
         });
+    },
+    
+    _setValue: function(profileText) {
+        this.editor.setValue(profileText);
+        this.editor.markClean();
     }
 });

js/index.js

@@ -221,6 +221,7 @@
 
         sidebar = BR.sidebar({
             listeningTabs: {
+                'tab_profile': profile,
                 'tab_data': trackMessages
             }
         }).addTo(map);