From 19692ed60a6bf8388a3e7b8350d37bd9ed240902 Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Wed, 11 May 2016 15:21:36 +0200
Subject: [PATCH] Warn when viewing an outdated example, and offer a redirect
 to latest

---
 config/examples/example.html  | 31 +++++++++++++++++++++++++++++++
 examples/resources/layout.css |  4 ++++
 2 files changed, 35 insertions(+)

diff --git a/config/examples/example.html b/config/examples/example.html
index b0102bc5b7..5b9ae887c9 100644
--- a/config/examples/example.html
+++ b/config/examples/example.html
@@ -36,6 +36,11 @@
 
     <div class="container-fluid">
 
+      <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+        <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        This example uses OpenLayers v<span>{{ olVersion }}</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
+      </div>
+
       <div class="row-fluid">
         <div class="span12">
           <h4 id="title">{{ title }}</h4>
@@ -85,4 +90,30 @@
     <script src="./resources/prism/prism.min.js"></script>
     {{{ js.tag }}}
   </body>
+  <script>
+  var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
+  fetch(packageUrl).then(function(response) {
+    return response.json();
+  }).then(function(json) {
+    var latestVersion = json.version;
+    document.getElementById('latest-version').innerHTML = latestVersion;
+    var url = window.location.href;
+    var branchSearch = url.match(/\/([^\/]*)\/examples\//);
+    var cookieText = 'dismissed=-' + latestVersion + '-';
+    var dismissed = document.cookie.indexOf(cookieText) != -1;
+    if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '{{ olVersion }}' != latestVersion) {
+      var link = url.replace(branchSearch[0], '/latest/examples/');
+      fetch(link, {method: 'head'}).then(function(response) {
+        var a = document.getElementById('latest-link');
+        a.href = response.status == 200 ? link : '../../latest/examples/';
+      });
+      var latestCheck = document.getElementById('latest-check');
+      latestCheck.style.display = '';
+      document.getElementById('latest-dismiss').onclick = function() {
+        latestCheck.style.display = 'none';
+        document.cookie = cookieText;
+      }
+    }
+  });
+  </script>
 </html>
diff --git a/examples/resources/layout.css b/examples/resources/layout.css
index a049565693..c140ddc8ba 100644
--- a/examples/resources/layout.css
+++ b/examples/resources/layout.css
@@ -122,3 +122,7 @@ pre {
 #api-links ul {
   display: inline;
 }
+#latest-check {
+  margin-top: -10px;
+  margin-bottom: 10px;
+}