use tab instead of separate control for transit demo

css/style.css

@@ -125,7 +125,8 @@ td {
 #profile_upload,
 #datatable_wrapper,
 .dataTables_scroll,
-.dataTables_scrollBody {
+.dataTables_scrollBody,
+#iternity {
   display: -webkit-flex;
   display: flex;
 
@@ -151,11 +152,19 @@ textarea,
 #datatable_wrapper,
 .dataTables_scroll,
 .dataTables_scrollBody,
-#datatable {
+#datatable,
+#iternity,
+#iternity pre {
   -webkit-flex: auto;
   flex: auto;
 }
 
+#iternity pre {
+    font-size: small;
+    /* turn off bootstrap 'break-word' */
+    word-wrap: normal;
+}
+
 #profile_buttons {
     padding-top: 4px;
 }

dist/url-search-params.js

@@ -0,0 +1,2 @@
+/*! (C) WebReflection Mit Style License */
+var URLSearchParams=URLSearchParams||function(){"use strict";function e(e){return encodeURIComponent(e).replace(i,u)}function t(e){return decodeURIComponent(e.replace(s," "))}function n(e){this[f]=Object.create(null);if(!e)return;for(var n,r,i=(e||"").split("&"),s=0,o=i.length;s<o;s++)r=i[s],n=r.indexOf("="),-1<n&&this.append(t(r.slice(0,n)),t(r.slice(n+1)))}function l(){try{return!!Symbol.iterator}catch(e){return!1}}var r=n.prototype,i=/[!'\(\)~]|%20|%00/g,s=/\+/g,o={"!":"%21","'":"%27","(":"%28",")":"%29","~":"%7E","%20":"+","%00":"\0"},u=function(e){return o[e]},a=l(),f="__URLSearchParams__:"+Math.random();r.append=function(t,n){var r=this[f];t in r?r[t].push(""+n):r[t]=[""+n]},r.delete=function(t){delete this[f][t]},r.get=function(t){var n=this[f];return t in n?n[t][0]:null},r.getAll=function(t){var n=this[f];return t in n?n[t].slice(0):[]},r.has=function(t){return t in this[f]},r.set=function(t,n){this[f][t]=[""+n]},r.forEach=function(t,n){var r=this[f];Object.getOwnPropertyNames(r).forEach(function(e){r[e].forEach(function(r){t.call(n,r,e,this)},this)},this)},r.keys=function(){var t=[];this.forEach(function(e,n){t.push(n)});var n={next:function(){var e=t.shift();return{done:e===undefined,value:e}}};return a&&(n[Symbol.iterator]=function(){return n}),n},r.values=function(){var t=[];this.forEach(function(e){t.push(e)});var n={next:function(){var e=t.shift();return{done:e===undefined,value:e}}};return a&&(n[Symbol.iterator]=function(){return n}),n},r.entries=function(){var t=[];this.forEach(function(e,n){t.push([n,e])});var n={next:function(){var e=t.shift();return{done:e===undefined,value:e}}};return a&&(n[Symbol.iterator]=function(){return n}),n},a&&(r[Symbol.iterator]=r.entries),r.toJSON=function(){return{}},r.toString=function y(){var t=this[f],n=[],r,i,s,o;for(i in t){s=e(i);for(r=0,o=t[i];r<o.length;r++)n.push(s+"="+e(o[r]))}return n.join("&")};var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,p=function(e){function t(t,n){r.append.call(this,t,n),t=this.toString(),e.set.call(this._usp,t?"?"+t:"")}function n(t){r.delete.call(this,t),t=this.toString(),e.set.call(this._usp,t?"?"+t:"")}function i(t,n){r.set.call(this,t,n),t=this.toString(),e.set.call(this._usp,t?"?"+t:"")}return function(e,r){return e.append=t,e.delete=n,e.set=i,c(e,"_usp",{configurable:!0,writable:!0,value:r})}},d=function(e){return function(t,n){return c(t,"_searchParams",{configurable:!0,writable:!0,value:e(n,t)}),n}},v=function(e){var t=e.append;e.append=r.append,n.call(e,e._usp.search.slice(1)),e.append=t},m=function(e,t){if(!(e instanceof t))throw new TypeError("'searchParams' accessed on an object that does not implement interface "+t.name)},g=function(e){var t=e.prototype,r=h(t,"searchParams"),i=h(t,"href"),s=h(t,"search"),o;!r&&s&&s.set&&(o=d(p(s)),Object.defineProperties(t,{href:{get:function(){return i.get.call(this)},set:function(e){var t=this._searchParams;i.set.call(this,e),t&&v(t)}},search:{get:function(){return s.get.call(this)},set:function(e){var t=this._searchParams;s.set.call(this,e),t&&v(t)}},searchParams:{get:function(){return m(this,e),this._searchParams||o(this,new n(this.search.slice(1)))},set:function(t){m(this,e),o(this,t)}}}))};return g(HTMLAnchorElement),/^function|object$/.test(typeof URL)&&g(URL),n}();

index.html

@@ -40,12 +40,14 @@
     <div id="tabs_div" class="hidden">
       
         <ul id="tab" class="nav nav-tabs" role="tablist">
-            <li class="active"><a href="#tab_profile" role="tab">Profile</a></li>
-            <li><a href="#tab_data" role="tab">Data</a></li>
         </ul>
 
         <div class="tab-content">
-            <div class="tab-pane active" id="tab_profile">
+            <div class="tab-pane hidden" id="tab_iternity">
+                <div id="iternity">
+                </div>
+            </div>
+            <div class="tab-pane" id="tab_profile">
                 <form id="profile_upload" name="profile_upload">
                     <textarea type="text" name="profile" spellcheck="false" wrap="off" maxlength="100000" placeholder="... paste your custom routing profile here ..."></textarea>
                     <div id="profile_message"></div>

js/control/Iternity.js

@@ -1,18 +1,18 @@
-BR.Iternity = BR.Control.extend({
+BR.Iternity = L.Class.extend({
 	  options: {
         heading: 'Iternity'
     },
 
     onAdd: function (map) {
-        var container = BR.Control.prototype.onAdd.call(this, map);
+        this._content = document.getElementById('iternity');
+        L.DomUtil.removeClass(this._content.parentElement, 'hidden');
         this.update();
-        return container;
     },
 
     update: function (polyline, segments) {
         var i, j, iter, html = '';
 
-        html += '<small><pre>';
+        html += '<pre>';
         for (i = 0; segments && i < segments.length; i++)
         {
             iter = segments[i].feature.iternity;
@@ -21,7 +21,7 @@ BR.Iternity = BR.Control.extend({
               html += iter[j] + '\n';
             }
         }
-        html += '</pre></small>';
+        html += '</pre>';
 
         this._content.innerHTML = html;
     }

js/control/Profile.js

@@ -1,4 +1,8 @@
 BR.Profile = L.Class.extend({
+	  options: {
+        heading: 'Profile'
+    },
+
     cache: {},
 
     initialize: function () {

js/control/Tabs.js

@@ -13,6 +13,8 @@ BR.Tabs = BR.Control.extend({
         var tabs = this.options.tabs;
 
         for (var key in tabs) {
+            $('<li><a href="' + key + '" role="tab">' + tabs[key].options.heading + '</a></li>').appendTo('#tab');
+
             if (tabs[key].onAdd) {
                 tabs[key].onAdd(map);
             }
@@ -27,7 +29,7 @@ BR.Tabs = BR.Control.extend({
         // e.relatedTarget = previous tab
         $('#tab a').on('shown.bs.tab', L.bind(function (e) {
             var tab = this.options.tabs[e.target.hash],
-                prevTab = this.options.tabs[e.relatedTarget.hash];
+                prevTab = e.relatedTarget ? this.options.tabs[e.relatedTarget.hash] : null;
 
             if (tab && tab.show) {
                 tab.show();
@@ -37,6 +39,9 @@ BR.Tabs = BR.Control.extend({
             }
         }, this));
 
+        // activate first tab (instead of setting 'active' class in html)
+        $('#tab li:not(.hidden) a:first').tab('show');
+
         return BR.Control.prototype.onAdd.call(this, map);
     }
 });

js/control/TrackMessages.js

@@ -1,6 +1,7 @@
 BR.TrackMessages = L.Class.extend({
 
     options: {
+        heading: 'Data',
         edgeStyle: {
             color: 'yellow',
             opacity: 0.8,

js/index.js

@@ -122,6 +122,7 @@
             iternity,
             elevation,
             download,
+            tabs,
             profile,
             trackMessages,
             routingToolbar,
@@ -303,19 +304,23 @@
             }));
         }
         routingOptions.addTo(map);
-        if (BR.conf.transit) {
-            iternity.addTo(map);
-        } else {
+        if (!BR.conf.transit) {
             stats.addTo(map);
         }
         download.addTo(map);
         elevation.addTo(map);
-        map.addControl(new BR.Tabs({
+
+        tabs = new BR.Tabs({
             tabs: {
+                '#tab_iternity': iternity,
                 '#tab_profile': profile,
                 '#tab_data': trackMessages
             }
-        }));
+        });
+        if (!BR.conf.transit) {
+            delete tabs.options.tabs['#tab_iternity'];
+        }
+        map.addControl(tabs);
 
         nogos.addTo(map);
         routing.addTo(map);