Use a div instead of alert for version warning

With this change, it is also no longer necessary to display the version in the
navigation bar. The accidently removed doctype is also brought back.
This commit is contained in:
Andreas Hocevar
2016-05-12 16:16:06 +02:00
parent d0e5b1e395
commit 0d2b833e06
4 changed files with 40 additions and 20 deletions

View File

@@ -53,30 +53,39 @@ $(function () {
$(window).on('resize', _onResize); $(window).on('resize', _onResize);
_onResize(); _onResize();
var currentVersion = document.getElementById('package-version').innerHTML;
// warn about outdated version // warn about outdated version
var srcLinks = $('div.tag-source'); var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
var location = window.location.href; fetch(packageUrl).then(function(response) {
var branchSearch = location.match(/\/([^\/]*)\/apidoc\//); return response.json();
if (branchSearch && branchSearch.length) { }).then(function(json) {
var branch = branchSearch[1]; var latestVersion = json.version;
if (branch !== 'latest') { document.getElementById('latest-version').innerHTML = latestVersion;
if (/^v[0-9\.]*$/.test(branch)) { var url = window.location.href;
var ok = confirm('You are viewing outdated docs. Do you want to try the latest?'); var branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
if (ok) { var cookieText = 'dismissed=-' + latestVersion + '-';
window.location.href = location.replace(branchSearch[0], '/latest/apidoc/'); var dismissed = document.cookie.indexOf(cookieText) != -1;
} if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
} else { var link = url.replace(branchSearch[0], '/latest/apidoc/');
$('.package-version').text(branch); fetch(link, {method: 'head'}).then(function(response) {
var a = document.getElementById('latest-link');
a.href = response.status == 200 ? link : '../../latest/apidoc/';
});
var latestCheck = document.getElementById('latest-check');
latestCheck.style.display = '';
document.getElementById('latest-dismiss').onclick = function() {
latestCheck.style.display = 'none';
document.cookie = cookieText;
} }
} }
} });
// create source code links to github // create source code links to github
var version = $('.package-version'); var srcLinks = $('div.tag-source');
var branch = version.text();
srcLinks.each(function(i, el) { srcLinks.each(function(i, el) {
var textParts = el.innerHTML.trim().split(', '); var textParts = el.innerHTML.trim().split(', ');
var link = 'https://github.com/openlayers/ol3/blob/' + branch + '/' + var link = 'https://github.com/openlayers/ol3/blob/' + currentVersion + '/' +
textParts[0]; textParts[0];
el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' + el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
'<a href="' + link + textParts[1].replace('line ', '#l') + '">' + '<a href="' + link + textParts[1].replace('line ', '#l') + '">' +

View File

@@ -132,7 +132,6 @@ li {
display: block; display: block;
font-size: 0.85em; font-size: 0.85em;
} }
.navigation h4,
.navigation li.item .title a { .navigation li.item .title a {
color: #e1e1e1; color: #e1e1e1;
} }
@@ -417,3 +416,7 @@ footer {
left: 250px; left: 250px;
font-weight: normal; font-weight: normal;
} }
#latest-check {
margin-top: -10px;
margin-bottom: 10px;
}

View File

@@ -1,7 +1,12 @@
<?js
var version = obj.packageInfo.version;
?>
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>OpenLayers 3 API Reference - <?js= title ?></title> <title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
<script src="scripts/prettify/prettify.js"> </script> <script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script> <script src="scripts/prettify/lang-css.js"> </script>
<script src="scripts/jquery.min.js"> </script> <script src="scripts/jquery.min.js"> </script>
@@ -35,6 +40,10 @@
<?js= this.partial('navigation.tmpl', this) ?> <?js= this.partial('navigation.tmpl', this) ?>
<div class="main"> <div class="main">
<h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1> <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
<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 documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
</div>
<?js= content ?> <?js= content ?>
</div> </div>
</div> </div>

View File

@@ -3,7 +3,6 @@ var self = this;
?> ?>
<div class="navigation"> <div class="navigation">
<div class="search"> <div class="search">
<h4 class='package-version'>v<?js= self.version ?></h4>
<input id="search" type="text" class="form-control input-sm" placeholder="Search Documentation"> <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentation">
</div> </div>
<ul class="list"> <ul class="list">