Merge pull request #5339 from ahocevar/div-instead-of-alert

Use a div instead of alert for version warning
This commit is contained in:
Andreas Hocevar
2016-05-12 18:20:56 +02:00
4 changed files with 40 additions and 20 deletions
@@ -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') + '">' +
@@ -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;
}
+10 -1
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>
@@ -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">