From 21a8d8b5def1ec6c9c26fc22b93748eeb4d54d53 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Mon, 11 Nov 2019 19:22:38 +0100
Subject: [PATCH] Replace profile options/editor switch buttons with Bootstrap
 tabs

---
 css/style.css         |   7 ++-
 index.html            | 126 ++++++++++++++++++++++++++----------------
 js/control/Profile.js |  25 ++++-----
 locales/en.json       |   4 +-
 4 files changed, 94 insertions(+), 68 deletions(-)

diff --git a/css/style.css b/css/style.css
index 792b49d..c96ddab 100644
--- a/css/style.css
+++ b/css/style.css
@@ -191,8 +191,9 @@ input#trackname:focus:invalid {
     cursor: auto;
 }
 
-#profile_editor {
-    display: none;
+/* Override Bootstrap tabs that set `display` from `none` to `block` when activating */
+.tab-content > #profile_editor.active {
+    display: flex;
 }
 
 #profile_buttons {
@@ -440,7 +441,7 @@ table.dataTable.display tbody tr.even:hover {
     min-height: 100%;
 }
 
-.leaflet-sidebar-pane#tab_profile .form-group {
+#profile_params_container .form-group {
     margin-bottom: 5px;
 }
 
diff --git a/index.html b/index.html
index 43491ce..25a666b 100644
--- a/index.html
+++ b/index.html
@@ -651,56 +651,86 @@
                                 ><span data-i18n="sidebar.customize-profile.title">Customize profile</span>
                             </h1>
                             <form class="flexcolumn flexgrow">
-                                <div id="profile_params_container">
-                                    <div id="profile_params"></div>
-                                    <div class="form-group" id="profile_buttons">
-                                        <button type="button" class="btn btn-info btn-sm" id="profile_advanced">
-                                            <span data-i18n="sidebar.profile.switch_advanced"
-                                                >Switch to advanced editor</span
-                                            >
-                                        </button>
-
-                                        <button id="save" type="button" class="btn btn-primary btn-sm pull-right">
-                                            <span class="fa fa-cloud-upload"></span>
-                                            <span data-i18n="sidebar.profile.save">Save</span>
-                                        </button>
-                                    </div>
-                                </div>
-                                <div id="profile_editor" class="flexcolumn flexgrow">
-                                    <textarea
-                                        class="form-control flexgrow"
-                                        id="profile_upload"
-                                        spellcheck="false"
-                                        wrap="off"
-                                        data-i18n="[placeholder]sidebar.profile.placeholder"
-                                        placeholder="Write your custom profile here."
-                                    ></textarea>
-                                    <div id="profile_message"></div>
-                                    <div class="form-group" id="profile_buttons">
-                                        <button
-                                            id="upload"
-                                            type="button"
-                                            class="btn btn-primary btn-sm"
-                                            data-uploading-text="Uploading…"
-                                        >
-                                            <span class="fa fa-cloud-upload"></span>
-                                            <span data-i18n="sidebar.profile.upload">Upload</span>
-                                        </button>
-                                        <button id="clear" type="button" class="btn btn-secondary btn-sm">
-                                            <span class="fa fa-eraser"></span>
-                                            <span data-i18n="sidebar.profile.clear">Clear</span>
-                                        </button>
+                                <ul class="nav nav-tabs " id="profileEditorTabs" role="tablist">
+                                    <li class="nav-item">
                                         <a
-                                            href="https://brouter.de/brouter/costfunctions.html"
-                                            target="_blank"
-                                            class="btn btn-info btn-sm pull-right"
-                                            ><span class="fa fa-question"></span>
-                                            <span data-i18n="sidebar.profile.help">Help</span></a
+                                            class="nav-link active"
+                                            id="params-tab"
+                                            data-toggle="tab"
+                                            href="#profile_params_container"
+                                            role="tab"
+                                            aria-controls="profile_params_container"
+                                            aria-selected="true"
+                                            data-i18n="sidebar.profile.options"
+                                            >Options</a
                                         >
-
-                                        <button type="button" class="btn btn-info btn-sm" id="profile_basic">
-                                            <span data-i18n="sidebar.profile.switch_basic">Switch to basic editor</span>
-                                        </button>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a
+                                            class="nav-link"
+                                            id="profile-editor-tab"
+                                            data-toggle="tab"
+                                            href="#profile_editor"
+                                            role="tab"
+                                            aria-controls="profile_editor"
+                                            aria-selected="false"
+                                            data-i18n="sidebar.profile.profile"
+                                            >Profile</a
+                                        >
+                                    </li>
+                                </ul>
+                                <div class="tab-content flexcolumn flexgrow" id="profileEditorTabsContent">
+                                    <div
+                                        id="profile_params_container"
+                                        class="tab-pane show active"
+                                        role="tabpanel"
+                                        aria-labelledby="params-tab"
+                                    >
+                                        <div id="profile_params"></div>
+                                        <div class="form-group" id="profile_buttons">
+                                            <button id="save" type="button" class="btn btn-primary btn-sm">
+                                                <span class="fa fa-cloud-upload"></span>
+                                                <span data-i18n="sidebar.profile.save">Save</span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div
+                                        id="profile_editor"
+                                        class="flexcolumn flexgrow tab-pane"
+                                        role="tabpanel"
+                                        aria-labelledby="profile-editor-tab"
+                                    >
+                                        <textarea
+                                            class="form-control flexgrow"
+                                            id="profile_upload"
+                                            spellcheck="false"
+                                            wrap="off"
+                                            data-i18n="[placeholder]sidebar.profile.placeholder"
+                                            placeholder="Write your custom profile here."
+                                        ></textarea>
+                                        <div id="profile_message"></div>
+                                        <div class="form-group" id="profile_buttons">
+                                            <button
+                                                id="upload"
+                                                type="button"
+                                                class="btn btn-primary btn-sm"
+                                                data-uploading-text="Uploading…"
+                                            >
+                                                <span class="fa fa-cloud-upload"></span>
+                                                <span data-i18n="sidebar.profile.upload">Upload</span>
+                                            </button>
+                                            <button id="clear" type="button" class="btn btn-secondary btn-sm">
+                                                <span class="fa fa-eraser"></span>
+                                                <span data-i18n="sidebar.profile.clear">Clear</span>
+                                            </button>
+                                            <a
+                                                href="https://brouter.de/brouter/costfunctions.html"
+                                                target="_blank"
+                                                class="btn btn-info btn-sm pull-right"
+                                                ><span class="fa fa-question"></span>
+                                                <span data-i18n="sidebar.profile.help">Help</span></a
+                                            >
+                                        </div>
                                     </div>
                                 </div>
                             </form>
diff --git a/js/control/Profile.js b/js/control/Profile.js
index f1f7af4..6dce019 100644
--- a/js/control/Profile.js
+++ b/js/control/Profile.js
@@ -7,13 +7,12 @@ BR.Profile = L.Evented.extend({
             lineNumbers: true
         });
 
-        var that = this;
-        L.DomUtil.get('profile_advanced').addEventListener('click', function() {
-            that._toggleAdvanced();
-        });
-        L.DomUtil.get('profile_basic').addEventListener('click', function() {
-            that._toggleAdvanced();
-        });
+        $('#profileEditorTabs a[data-toggle="tab"]').on(
+            'shown.bs.tab',
+            L.bind(function(e) {
+                this._activateSecondaryTab();
+            }, this)
+        );
 
         L.DomUtil.get('save').onclick = L.bind(this._save, this);
         L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
@@ -131,8 +130,8 @@ BR.Profile = L.Evented.extend({
         });
     },
 
-    _setValue: function(profileText) {
-        if (L.DomUtil.get('profile_editor').style.display == 'flex') {
+    _setValue: function(profileText, profileEditorActivated) {
+        if (L.DomUtil.get('profile_editor').classList.contains('active')) {
             // Set value of the full editor and exit
             this.editor.setValue(profileText);
             this.editor.markClean();
@@ -272,14 +271,10 @@ BR.Profile = L.Evented.extend({
         });
     },
 
-    _toggleAdvanced: function() {
-        if (L.DomUtil.get('profile_editor').style.display == 'flex') {
-            L.DomUtil.get('profile_params_container').style.display = 'initial';
-            L.DomUtil.get('profile_editor').style.display = 'none';
+    _activateSecondaryTab: function() {
+        if (L.DomUtil.get('profile_params_container').classList.contains('active')) {
             this._setValue(this.editor.getValue());
         } else {
-            L.DomUtil.get('profile_params_container').style.display = 'none';
-            L.DomUtil.get('profile_editor').style.display = 'flex';
             this._setValue(this._buildCustomProfile());
         }
     }
diff --git a/locales/en.json b/locales/en.json
index 1da8a25..9148640 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -203,13 +203,13 @@
       "title": "Layers"
     },
     "profile": {
+      "profile": "Profile",
+      "options": "Options",
       "clear": "Clear",
       "help": "Help",
       "no_easy_configuration_warning": "No easy configuration is available for this profile.",
       "placeholder": "Write your custom profile here.",
       "save": "Save",
-      "switch_advanced": "Switch to advanced editor",
-      "switch_basic": "Switch to basic editor",
       "upload": "Upload"
     }
   },