From 5a277b0a3451c3dec9637305d166bd1f9612e3ea Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Wed, 27 Aug 2014 17:01:00 +0200 Subject: [PATCH 01/13] add Bootstrap: - remove normalize.css, included - adjust to Bootstrap's "box-sizing: border-box" - conflict with Leaflet "label" class --- README.md | 4 ++-- bower.json | 1 - css/style.css | 16 ++++++++++++++-- index.html | 8 +++++++- js/plugin/Routing.js | 2 +- 5 files changed, 24 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 438ae36..1a3bbb4 100644 --- a/README.md +++ b/README.md @@ -54,7 +54,7 @@ Copyright 2012 Jacob Toye; [MIT License](https://github.com/Leaflet/Leaflet.draw Copyright (c) 2013 Stefano Cudini; [MIT License](https://github.com/stefanocudini/leaflet-search/blob/master/LICENSE.txt) * [leaflet-plugins](https://github.com/shramov/leaflet-plugins) Copyright (c) 2011-2012, Pavel Shramov; [2-clause BSD License](https://github.com/shramov/leaflet-plugins/blob/master/LICENSE) -* [normalize.css](https://github.com/necolas/normalize.css) -Copyright (c) Nicolas Gallagher and Jonathan Neal; [MIT License](https://github.com/necolas/normalize.css/blob/master/LICENSE.md) * [Async.js](https://github.com/caolan/async) Copyright (c) 2010-2014 Caolan McMahon; [MIT License](https://github.com/caolan/async/blob/master/LICENSE) +* [Bootstrap](http://getbootstrap.com/) +Copyright (c) 2011-2014 Twitter, Inc; [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/bower.json b/bower.json index 344c820..fbed5a4 100644 --- a/bower.json +++ b/bower.json @@ -7,7 +7,6 @@ "bower_components" ], "dependencies": { - "normalize-css": "*", "leaflet-search": "*", "leaflet-plugins": "*", "leaflet-routing": "nrenner/leaflet-routing#styles", diff --git a/css/style.css b/css/style.css index 7773486..6a947c6 100644 --- a/css/style.css +++ b/css/style.css @@ -45,7 +45,7 @@ div.elevation { .title { padding-top: 4px; /* normalize height, for absolute Profile control positioning */ - height: 17px; + height: 21px; } .title-name { font-size: larger; @@ -121,7 +121,7 @@ td { .leaflet-leftpane .leaflet-control { margin: 3px 5px; - width: 370px; + width: 386px; } /* Profile Control */ @@ -185,3 +185,15 @@ textarea:focus { stroke-dashoffset: 0; } } + +/* override Bootstrap label for Leaflet layer switcher */ +.leaflet-control-layers label { + max-width: none; + margin-bottom: 0px; + font-weight: normal; + /* normalize label height + | Firefox | Chrome | + Leaflet only | 21 | 20 | + Bootstrap | 23 | 22 |*/ + height: 21px; +} \ No newline at end of file diff --git a/index.html b/index.html index 3afeb9c..919430d 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,8 @@ + + BRouter web client @@ -12,7 +14,8 @@ - + + @@ -80,6 +83,9 @@ + + + diff --git a/js/control/Profile.js b/js/control/Profile.js index 888b6ba..5892655 100644 --- a/js/control/Profile.js +++ b/js/control/Profile.js @@ -1,6 +1,5 @@ BR.Profile = BR.Control.extend({ options: { - heading: 'Profile', divId: 'profile_div' }, @@ -8,6 +7,10 @@ BR.Profile = BR.Control.extend({ L.DomUtil.get('profile_upload').onsubmit = L.bind(this._submit, this); L.DomUtil.get('clear').onclick = L.bind(this.clear, this); + $('#tab a').click(function (e) { + e.preventDefault(); + $(this).tab('show'); + }); return BR.Control.prototype.onAdd.call(this, map); }, From bb371a30a7e180c1837a544139fca0cfd9b53cd8 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Fri, 29 Aug 2014 15:32:06 +0200 Subject: [PATCH 03/13] extract Control from Profile class into Tabs control --- index.html | 3 ++- js/control/Profile.js | 15 ++------------- js/control/Tabs.js | 14 ++++++++++++++ js/index.js | 2 +- 4 files changed, 19 insertions(+), 15 deletions(-) create mode 100644 js/control/Tabs.js diff --git a/index.html b/index.html index d35c197..e7ac42e 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@ - @@ -101,6 +103,8 @@ + + + diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js new file mode 100644 index 0000000..4d6f2ca --- /dev/null +++ b/js/control/TrackMessages.js @@ -0,0 +1,51 @@ +BR.TrackMessages = L.Class.extend({ + initialize: function () { + }, + + update: function (polyline, segments) { + var i, + messages, + data = [], + columns; + + if (!segments || segments.length === 0) + return; + + for (i = 0; segments && i < segments.length; i++) { + messages = segments[i].feature.properties.messages; + + if (i === 0) { + columns = this._getColumns(messages[0]); + } + + data = data.concat(messages.slice(1)); + } + + $('#datatable').DataTable({ + destroy: true, + data: data, + columns: columns, + paging: false, + searching: false, + info: false, + scrollY: 330, + scrollX: 370, + scrollCollapse: true, + order: [] + }); + + }, + + _getColumns: function(headings) { + var columns = []; + for (k = 0; k < headings.length; k++) { + // http://datatables.net/reference/option/#Columns + columns.push({ + title: headings[k] + }); + } + return columns; + } +}); + +BR.TrackMessages.include(L.Mixin.Events); diff --git a/js/index.js b/js/index.js index 214e8a6..5474642 100644 --- a/js/index.js +++ b/js/index.js @@ -88,6 +88,7 @@ elevation, download, profile, + trackMessages, leftPaneId = 'leftpane', saveWarningShown = false; @@ -140,6 +141,7 @@ BR.message.hideError(); routingOptions.setCustomProfile(null); }); + trackMessages = new BR.TrackMessages(); routing = new BR.Routing({ routing: { @@ -177,6 +179,7 @@ elevation.update(track); stats.update(track, segments); + trackMessages.update(track, segments); if (latLngs.length > 1) { urls.gpx = router.getUrl(latLngs, 'gpx'); From 0168dbb541f1b93cbb3ae8422e59c2779b84677d Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Wed, 3 Sep 2014 15:29:07 +0200 Subject: [PATCH 05/13] replace absolute positioning with flexbox layout for profile and data tabs --- css/style.css | 70 +++++++++++++++++++++++++++++---------------------- index.html | 16 ++++++------ 2 files changed, 48 insertions(+), 38 deletions(-) diff --git a/css/style.css b/css/style.css index 7348209..0753812 100644 --- a/css/style.css +++ b/css/style.css @@ -15,11 +15,6 @@ html, body, #map { div.elevation { margin-bottom: -2px !important; } -/* -.info, div.elevation { - display:table-row; -} -*/ .hidden { display: none; @@ -44,8 +39,6 @@ div.elevation { } .title { padding-top: 4px; - /* normalize height, for absolute Profile control positioning */ - height: 21px; } .title-name { font-size: larger; @@ -75,8 +68,6 @@ div.elevation { select { max-width: 176px; - /* normalize height, for absolute Profile control positioning */ - height: 24px; } table { @@ -126,32 +117,51 @@ td { /* Profile Control */ -.leaflet-leftpane .leaflet-control:last-child { - position: absolute; - top: 461px; - bottom: 0px; +/* flexbox layout: maximize textarea and data table (nested container/box path) */ +.flex_container, +.leaflet-leftpane, +.leaflet-leftpane .leaflet-control:last-child, +#tabs_div, +.tab-content, +.tab-pane.active, +#profile_upload, +#datatable_wrapper, +.dataTables_scroll, +.dataTables_scrollBody { + display: -webkit-flex; + display: flex; + + -webkit-flex-direction: column; + flex-direction: column; } -.tab-content { - padding: 5px 0px; +.flex_box_none, +.leaflet-leftpane .leaflet-control, +#tab, +.dataTables_scrollHead { + -webkit-flex: none; + flex: none; } -/* -#profile_upload input { - position: absolute; - top: 6px; - right: 8px; -} -*/ - -/* http://snook.ca/archives/html_and_css/absolute-position-textarea */ -#textarea_container { - position: absolute; - top: 64px; - bottom: 6px; - left: 8px; - right: 8px; +.flex_box, +.leaflet-leftpane .leaflet-control:last-child, +#tabs_div, +.tab-content, +.tab-pane.active, +#profile_upload, +textarea, +#datatable_wrapper, +.dataTables_scroll, +.dataTables_scrollBody, +#datatable { + -webkit-flex: auto; + flex: auto; } + +#profile_buttons { + padding-top: 4px; +} + textarea { width: 100%; height: 100%; diff --git a/index.html b/index.html index 592d967..3bef48e 100644 --- a/index.html +++ b/index.html @@ -61,14 +61,14 @@
-  
- - - -
- Help -
- + +
+
+ + + +
+ Help
From 2ab15561a83a6b5ed81ca61e67831727bd453ea6 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Thu, 4 Sep 2014 19:55:55 +0200 Subject: [PATCH 06/13] configure columns, hide empty columns + destroy because of slow hiding --- js/control/TrackMessages.js | 92 ++++++++++++++++++++++++++++++------- 1 file changed, 75 insertions(+), 17 deletions(-) diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js index 4d6f2ca..d6fc2ce 100644 --- a/js/control/TrackMessages.js +++ b/js/control/TrackMessages.js @@ -1,27 +1,44 @@ BR.TrackMessages = L.Class.extend({ + + columnOptions: { + 'Longitude': { visible: false }, + 'Latitude': { visible: false }, + 'Elevation': { title: 'elev.', className: 'dt-body-right' }, + 'Distance': { title: 'dist.', className: 'dt-body-right' }, + 'CostPerKm': { title: 'cost/km', className: 'dt-body-right' }, + 'ElevCost': { title: 'elevcost', className: 'dt-body-right' }, + 'TurnCost': { title: 'turncost', className: 'dt-body-right' } + }, + initialize: function () { + var table = document.getElementById('datatable'); + this.tableClassName = table.className; + this.tableParent = table.parentElement; }, update: function (polyline, segments) { var i, messages, data = [], - columns; - - if (!segments || segments.length === 0) - return; + columns, + headings, + table; for (i = 0; segments && i < segments.length; i++) { messages = segments[i].feature.properties.messages; - - if (i === 0) { - columns = this._getColumns(messages[0]); - } - data = data.concat(messages.slice(1)); } - $('#datatable').DataTable({ + this._destroyTable(); + + if (data.length === 0) + return; + + headings = messages[0]; + columns = this._getColumns(headings, data); + + console.time('datatable'); + table = $('#datatable').DataTable({ destroy: true, data: data, columns: columns, @@ -34,17 +51,58 @@ BR.TrackMessages = L.Class.extend({ order: [] }); + console.timeEnd('datatable'); }, - - _getColumns: function(headings) { - var columns = []; + + _destroyTable: function() { + var ele; + + if ($.fn.DataTable.isDataTable('#datatable') ) { + // destroy option too slow on update, really remove elements with destroy method + $('#datatable').DataTable().destroy(true); + + // recreate original table element, destroy removes all + ele = document.createElement('table'); + ele.id = 'datatable'; + ele.className = this.tableClassName; + this.tableParent.appendChild(ele); + } + + return ele || document.getElementById('datatable'); + }, + + _getColumns: function(headings, data) { + var columns = [], + defaultOptions, + options, + emptyColumns = this._getEmptyColumns(data); + for (k = 0; k < headings.length; k++) { - // http://datatables.net/reference/option/#Columns - columns.push({ - title: headings[k] - }); + defaultOptions = { + title: headings[k], + visible: !emptyColumns[k] + }; + options = L.extend(defaultOptions, this.columnOptions[headings[k]]); + columns.push(options); } return columns; + }, + + _getEmptyColumns: function(data) { + var empty = new Array(data[0].length), + i; + + for (i = 0; i < empty.length; i++) { + empty[i] = true; + } + + data.forEach(function(row) { + row.forEach(function(val, i) { + empty[i] = empty[i] && !val; + }); + }); + + return empty; } }); From 44900f9bd5d9ed81fd3532651a8ba2f3733632aa Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Fri, 5 Sep 2014 19:19:14 +0200 Subject: [PATCH 07/13] don't update table when data tab hidden, update when shown --- js/control/Tabs.js | 26 +++++++++++++++++++++++--- js/control/TrackMessages.js | 18 +++++++++++++++++- js/index.js | 18 ++++++++++++++++-- 3 files changed, 56 insertions(+), 6 deletions(-) diff --git a/js/control/Tabs.js b/js/control/Tabs.js index 40b60c5..b41ca52 100644 --- a/js/control/Tabs.js +++ b/js/control/Tabs.js @@ -1,14 +1,34 @@ BR.Tabs = BR.Control.extend({ options: { - divId: 'tabs_div' + divId: 'tabs_div', + // tab a.hash > instance + tabs: {} + }, + + initialize: function (options) { + L.setOptions(this, options); }, onAdd: function (map) { $('#tab a').click(function (e) { - e.preventDefault(); - $(this).tab('show'); + e.preventDefault(); + $(this).tab('show'); }); + // e.target = activated tab + // 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]; + + if (tab && tab.show) { + tab.show(); + } + if (prevTab && prevTab.hide) { + prevTab.hide(); + } + }, this)); + return BR.Control.prototype.onAdd.call(this, map); } }); diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js index d6fc2ce..6a8e843 100644 --- a/js/control/TrackMessages.js +++ b/js/control/TrackMessages.js @@ -1,4 +1,6 @@ BR.TrackMessages = L.Class.extend({ + // true when tab is shown, false when hidden + active: false, columnOptions: { 'Longitude': { visible: false }, @@ -10,7 +12,9 @@ BR.TrackMessages = L.Class.extend({ 'TurnCost': { title: 'turncost', className: 'dt-body-right' } }, - initialize: function () { + initialize: function (options) { + L.setOptions(this, options); + var table = document.getElementById('datatable'); this.tableClassName = table.className; this.tableParent = table.parentElement; @@ -24,6 +28,9 @@ BR.TrackMessages = L.Class.extend({ headings, table; + if (!this.active) + return; + for (i = 0; segments && i < segments.length; i++) { messages = segments[i].feature.properties.messages; data = data.concat(messages.slice(1)); @@ -54,6 +61,15 @@ BR.TrackMessages = L.Class.extend({ console.timeEnd('datatable'); }, + show: function() { + this.active = true; + this.options.requestUpdate(this); + }, + + hide: function() { + this.active = false; + }, + _destroyTable: function() { var ele; diff --git a/js/index.js b/js/index.js index 5474642..f49fd30 100644 --- a/js/index.js +++ b/js/index.js @@ -107,6 +107,13 @@ routing.rerouteAllSegments(onUpdate); } + function requestUpdate(updatable) { + var track = routing.toPolyline(), + segments = routing.getSegments(); + + updatable.update(track, segments); + } + routingOptions = new BR.RoutingOptions(); routingOptions.on('update', updateRoute); @@ -141,7 +148,9 @@ BR.message.hideError(); routingOptions.setCustomProfile(null); }); - trackMessages = new BR.TrackMessages(); + trackMessages = new BR.TrackMessages({ + requestUpdate: requestUpdate + }); routing = new BR.Routing({ routing: { @@ -199,7 +208,12 @@ stats.addTo(map); download.addTo(map); elevation.addTo(map); - map.addControl(new BR.Tabs()); + map.addControl(new BR.Tabs({ + tabs: { + '#tab_profile': profile, + '#tab_data': trackMessages + } + })); nogos.addTo(map); routing.addTo(map); From c48f9ffb5c1c2b7c0bb9f0c1359f3ad1b81ddbe1 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Tue, 16 Sep 2014 12:08:38 +0200 Subject: [PATCH 08/13] highlight track segment corresponding to hovered table row on map --- js/control/Tabs.js | 8 +++++ js/control/TrackMessages.js | 70 +++++++++++++++++++++++++++++++++++-- 2 files changed, 75 insertions(+), 3 deletions(-) diff --git a/js/control/Tabs.js b/js/control/Tabs.js index b41ca52..60258c2 100644 --- a/js/control/Tabs.js +++ b/js/control/Tabs.js @@ -10,6 +10,14 @@ BR.Tabs = BR.Control.extend({ }, onAdd: function (map) { + var tabs = this.options.tabs; + + for (var key in tabs) { + if (tabs[key].onAdd) { + tabs[key].onAdd(map); + } + } + $('#tab a').click(function (e) { e.preventDefault(); $(this).tab('show'); diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js index 6a8e843..47c2cb7 100644 --- a/js/control/TrackMessages.js +++ b/js/control/TrackMessages.js @@ -1,4 +1,12 @@ BR.TrackMessages = L.Class.extend({ + + options: { + edgeStyle: { + color: 'yellow', + weight: 8 + } + }, + // true when tab is shown, false when hidden active: false, @@ -20,13 +28,16 @@ BR.TrackMessages = L.Class.extend({ this.tableParent = table.parentElement; }, + onAdd: function (map) { + this._map = map; + }, + update: function (polyline, segments) { var i, messages, data = [], columns, - headings, - table; + headings; if (!this.active) return; @@ -45,7 +56,7 @@ BR.TrackMessages = L.Class.extend({ columns = this._getColumns(headings, data); console.time('datatable'); - table = $('#datatable').DataTable({ + this._table = $('#datatable').DataTable({ destroy: true, data: data, columns: columns, @@ -58,6 +69,10 @@ BR.TrackMessages = L.Class.extend({ order: [] }); + // highlight track segment (graph edge) on row hover + this._setEdges(this._table, polyline); + $('#datatable tbody tr').hover(L.bind(this._handleHover, this), L.bind(this._handleHoverOut, this)); + console.timeEnd('datatable'); }, @@ -119,6 +134,55 @@ BR.TrackMessages = L.Class.extend({ }); return empty; + }, + + _getRowLatLng: function(row) { + var data = row.data(), + lon = data[0] / 1000000, + lat = data[1] / 1000000; + + return L.latLng(lat, lon); + }, + + _setEdges: function(table, polyline) { + var trackLatLngs = polyline.getLatLngs(), + index = 0; + + this._track = polyline; + // track latLngs index for end node of edge + this._edges = []; + + table.rows().indexes().each(L.bind(function(rowIndex) { + var row = table.row(rowIndex), + latLng = this._getRowLatLng(row), + i; + + for (i = index; i < trackLatLngs.length; i++) { + if (latLng.equals(trackLatLngs[i])) { + break; + } + } + + this._edges.push(i); + + index = i; + }, this)); + }, + + _handleHover: function(evt) { + var tr = $(evt.currentTarget), + row = this._table.row(tr), + trackLatLngs = this._track.getLatLngs(), + startIndex = row.index() > 0 ? this._edges[row.index() - 1] : 0, + endIndex = this._edges[row.index()], + edgeLatLngs = trackLatLngs.slice(startIndex, endIndex + 1); + + this._selectedEdge = L.polyline(edgeLatLngs, this.options.edgeStyle).addTo(this._map); + }, + + _handleHoverOut: function(evt) { + this._map.removeLayer(this._selectedEdge); + this._selectedEdge = null; } }); From bfe577019384cd4c3c3fd054dd7e2b73c4f3a715 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Fri, 6 Mar 2015 17:18:07 +0100 Subject: [PATCH 09/13] add new columns, no word wrapping in tags column --- css/style.css | 1 + js/control/TrackMessages.js | 9 ++++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 0753812..9c05c70 100644 --- a/css/style.css +++ b/css/style.css @@ -239,6 +239,7 @@ table.dataTable.mini thead td { table.dataTable.mini tbody th, table.dataTable.mini tbody td { padding: 2px 2px; + white-space: nowrap; } table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js index 47c2cb7..6d9c074 100644 --- a/js/control/TrackMessages.js +++ b/js/control/TrackMessages.js @@ -15,9 +15,12 @@ BR.TrackMessages = L.Class.extend({ 'Latitude': { visible: false }, 'Elevation': { title: 'elev.', className: 'dt-body-right' }, 'Distance': { title: 'dist.', className: 'dt-body-right' }, - 'CostPerKm': { title: 'cost/km', className: 'dt-body-right' }, - 'ElevCost': { title: 'elevcost', className: 'dt-body-right' }, - 'TurnCost': { title: 'turncost', className: 'dt-body-right' } + 'CostPerKm': { title: '$/km', className: 'dt-body-right' }, + 'ElevCost': { title: 'elev$', className: 'dt-body-right' }, + 'TurnCost': { title: 'turn$', className: 'dt-body-right' }, + 'NodeCost': { title: 'node$', className: 'dt-body-right' }, + 'InitialCost': { title: 'initial$', className: 'dt-body-right' }, + 'OsmTags': { title: 'tags'} }, initialize: function (options) { From 597303a6d37dc6eee51b5e283b8a02cd12b9b11e Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Sun, 8 Mar 2015 09:37:39 +0100 Subject: [PATCH 10/13] fix segment highlight when no match for last message lat/lon --- js/control/TrackMessages.js | 54 +++++++++++++++++++++---------------- 1 file changed, 31 insertions(+), 23 deletions(-) diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js index 6d9c074..77fbb1e 100644 --- a/js/control/TrackMessages.js +++ b/js/control/TrackMessages.js @@ -73,7 +73,7 @@ BR.TrackMessages = L.Class.extend({ }); // highlight track segment (graph edge) on row hover - this._setEdges(this._table, polyline); + this._setEdges(polyline, segments); $('#datatable tbody tr').hover(L.bind(this._handleHover, this), L.bind(this._handleHoverOut, this)); console.timeEnd('datatable'); @@ -139,37 +139,45 @@ BR.TrackMessages = L.Class.extend({ return empty; }, - _getRowLatLng: function(row) { - var data = row.data(), - lon = data[0] / 1000000, - lat = data[1] / 1000000; + _getMessageLatLng: function(message) { + var lon = message[0] / 1000000, + lat = message[1] / 1000000; return L.latLng(lat, lon); }, - - _setEdges: function(table, polyline) { - var trackLatLngs = polyline.getLatLngs(), - index = 0; - this._track = polyline; + _setEdges: function(polyline, segments) { + var messages, segLatLngs, length, si, mi, latLng, i, segIndex, + baseIndex = 0; + // track latLngs index for end node of edge this._edges = []; + this._track = polyline; - table.rows().indexes().each(L.bind(function(rowIndex) { - var row = table.row(rowIndex), - latLng = this._getRowLatLng(row), - i; - - for (i = index; i < trackLatLngs.length; i++) { - if (latLng.equals(trackLatLngs[i])) { - break; + for (si = 0; si < segments.length; si++) { + messages = segments[si].feature.properties.messages; + segLatLngs = segments[si].getLatLngs(); + length = segLatLngs.length; + segIndex = 0; + + for (mi = 1; mi < messages.length; mi++) { + latLng = this._getMessageLatLng(messages[mi]); + + for (i = segIndex; i < length; i++) { + if (latLng.equals(segLatLngs[i])) { + break; + } } + if (i === length) { + i = length - 1; + if (mi !== messages.length - 1) debugger; + } + + segIndex = i + 1; + this._edges.push(baseIndex + i); } - - this._edges.push(i); - - index = i; - }, this)); + baseIndex += length; + } }, _handleHover: function(evt) { From 4ab4572e0e6a64d3a07b47c30633211108340ab4 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Sun, 8 Mar 2015 09:37:50 +0100 Subject: [PATCH 11/13] expose map instance for console debugging --- js/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/js/index.js b/js/index.js index f49fd30..212714e 100644 --- a/js/index.js +++ b/js/index.js @@ -76,6 +76,10 @@ }).addTo(map); map.addControl(new BR.Search()); + + // expose map instance for console debugging + BR.debug = BR.debug || {}; + BR.debug.map = map; } function initApp() { From 9eade5bbb6c3c67bd98a17f7f5785518fb0599d7 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Sun, 8 Mar 2015 10:02:48 +0100 Subject: [PATCH 12/13] handle missing messages (+ code style) --- js/control/TrackMessages.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js index 77fbb1e..9dc4c8f 100644 --- a/js/control/TrackMessages.js +++ b/js/control/TrackMessages.js @@ -36,24 +36,25 @@ BR.TrackMessages = L.Class.extend({ }, update: function (polyline, segments) { - var i, - messages, - data = [], - columns, - headings; + var i, messages, columns, headings, + data = []; - if (!this.active) + if (!this.active) { return; + } for (i = 0; segments && i < segments.length; i++) { messages = segments[i].feature.properties.messages; - data = data.concat(messages.slice(1)); + if (messages) { + data = data.concat(messages.slice(1)); + } } this._destroyTable(); - if (data.length === 0) + if (data.length === 0) { return; + } headings = messages[0]; columns = this._getColumns(headings, data); From ed228a96cefbbe63c91231b5ff678a1ea7f6648b Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Sun, 8 Mar 2015 12:07:16 +0100 Subject: [PATCH 13/13] profile buttons: no group, blur (bootstrap sets focus?), uploading text --- index.html | 7 ++----- js/control/Profile.js | 18 ++++++++++++++---- js/index.js | 4 ++++ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 3bef48e..bdc848c 100644 --- a/index.html +++ b/index.html @@ -63,11 +63,8 @@
-
- - - -
+ + Help
diff --git a/js/control/Profile.js b/js/control/Profile.js index 3b9268c..e0e7be1 100644 --- a/js/control/Profile.js +++ b/js/control/Profile.js @@ -1,23 +1,33 @@ BR.Profile = L.Class.extend({ initialize: function () { - L.DomUtil.get('profile_upload').onsubmit = L.bind(this._submit, this); + L.DomUtil.get('upload').onclick = L.bind(this._upload, this); L.DomUtil.get('clear').onclick = L.bind(this.clear, this); }, clear: function(evt) { + var button = evt.target || evt.srcElement; + evt.preventDefault(); document.profile_upload.profile.value = null; this.fire('clear'); + button.blur(); }, - _submit: function(evt) { - var form = evt.target || evt.srcElement, + _upload: function(evt) { + var button = evt.target || evt.srcElement, profile = document.profile_upload.profile.value; + $(button).button('uploading'); evt.preventDefault(); - this.fire('update', { profileText: profile }); + this.fire('update', { + profileText: profile, + callback: function () { + $(button).button('reset'); + $(button).blur(); + } + }); } }); diff --git a/js/index.js b/js/index.js index 212714e..e471340 100644 --- a/js/index.js +++ b/js/index.js @@ -146,6 +146,10 @@ router.setOptions(routingOptions.getOptions()); } } + + if (evt.callback) { + evt.callback(); + } }); }); profile.on('clear', function(evt) {