Merge pull request #10047 from KaiVolland/apidoc-changes

Apidoc changes
This commit is contained in:
Andreas Hocevar
2019-10-23 13:41:03 +02:00
committed by GitHub
9 changed files with 235 additions and 581 deletions

View File

@@ -1,9 +0,0 @@
@navWidth: 250px;
@colorSubtitle: rgb(119, 156, 52);
@colorRed: rgb(238, 125, 125);
@colorLink: #2a6496;
@colorBgNavi: #2a2a2a;
.font-description () {
font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif
}

View File

@@ -1,10 +0,0 @@
@import "common.less";
footer {
margin: 15px 0;
padding-top: 15px;
border-top: 1px solid #e1e1e1;
.font-description();
font-size: 0.8em;
color: gray;
}

View File

@@ -1,22 +0,0 @@
@import "common.less";
// normalize
html, body {
font: 1em "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
background-color: #fff;
}
ul, ol {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#wrap {
position: relative;
}
@import "navigation.less";
@import "main.less";
@import "footer.less";

View File

@@ -1,288 +0,0 @@
@import "common.less";
.main {
padding: 20px 20px;
margin-left: @navWidth;
.page-title {
display: none;
}
h1 {
font-weight: bold;
font-size: 1.6em;
margin: 0;
}
h2 {
font-weight: bold;
font-size: 1.5em;
margin: 0;
}
h3 {
font-weight: bold;
font-size: 12px;
margin: 5px 0;
}
h4 {
font-weight: bold;
font-size: 1em;
}
h5 {
font-weight: bold;
font-size: 12px;
}
dd {
font-size: 12px;
}
h4.name {
span.type-signature {
display: inline-block;
border-radius: 3px;
background-color: gray;
color: #fff;
font-size: 0.7em;
padding: 2px 4px;
}
span.type {
margin-left: 5px;
}
span.glyphicon {
display: inline-block;
vertical-align: middle;
color: #e1e1e1;
margin-left: 7px;
}
span.returnType {
margin-left: 3px;
background-color: transparent!important;
color: gray!important;
}
}
span.static {
display: inline-block;
border-radius: 3px;
background-color: @colorSubtitle!important;
color: #fff;
font-size: 0.7em;
padding: 2px 4px;
margin-right: 8px;
}
span.number {
background-color: #ccc!important;
color: #2fa2b1!important;
}
span.string {
background-color: #ccc!important;
color: #2fa2b1!important;
}
span.object {
background-color: #ccc!important;
color: #2fa2b1!important;
}
span.array {
background-color: #ccc!important;
color: #2fa2b1!important;
}
span.boolean {
background-color: #ccc!important;
color: #2fa2b1!important;
}
.subsection-title {
font-size: 14px;
margin-top: 30px;
color: @colorSubtitle;
}
.description {
margin-top: 10px;
// .font-description();
font-size: 13px;
p {
font-size: 13px;
}
}
.tag-source {
font-size: 12px;
}
dt.tag-source {
margin-top: 5px;
}
dt.tag-todo {
font-size: 10px;
display: inline-block;
background-color: @colorLink;
color: #fff;
padding: 2px 4px;
border-radius: 5px;
}
.type-signature {
font-size: 12px;
}
.tag-deprecated {
display: inline-block;
font-size: 10px;
}
.important {
background-color: @colorRed;
color: #fff;
padding: 2px 4px;
border-radius: 5px;
}
.nameContainer {
position: relative;
margin-top: 20px;
padding-top: 5px;
border-top: 1px solid #e1e1e1;
.inherited {
display: inline-block;
border-radius: 3px;
background-color: #888!important;
font-size: 0.7em;
padding: 2px 4px;
margin-right: 5px;
a {
color: #fff;
}
}
.tag-source {
position: absolute;
top: 17px;
right: 0;
font-size: 10px;
a {
color: gray;
}
}
&.inherited {
color: gray;
}
h4 {
margin-right: 150px;
line-height: 1.3;
.signature {
font-size: 13px;
font-weight: normal;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
}
}
pre {
font-size: 11px;
}
table {
width: 100%;
margin-bottom: 15px;
th {
padding: 3px 3px;
}
td {
vertical-align: top;
padding: 5px 3px;
}
.name {
width: 110px;
}
.type {
width: 60px;
color: #aaa;
font-size: 11px;
}
.attributes {
width: 80px;
color: #aaa;
font-size: 11px;
}
.description {
font-size: 12px;
p {
margin: 0;
}
}
.optional {
float: left;
border-radius: 3px;
background-color: #ddd!important;
font-size: 0.7em;
padding: 2px 4px;
margin-right: 5px;
color: gray;
}
}
.readme {
p {
margin-top: 15px;
line-height: 1.2;
font-size: 0.85em;
}
h1 {
font-size: 1.7em;
}
h2 {
margin-top: 30px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #e1e1e1;
}
li {
font-size: 0.9em;
margin-bottom: 10px;
}
}
article {
ol, ul {
margin-left: 25px;
}
ol > li {
list-style-type: decimal;
margin-bottom: 5px;
}
ul > li {
margin-bottom: 5px;
list-style-type: disc;
}
}
}

View File

@@ -1,103 +0,0 @@
@import "common.less";
::-webkit-scrollbar {
width: 8px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: gray;
border-radius: 4px;
}
.navigation {
position: fixed;
float: left;
width: @navWidth;
height: 100%;
background-color: @colorBgNavi;
.applicationName {
margin: 0;
margin-top: 15px;
padding: 10px 15px;
font: bold 1.25em Helvetica;
color: #fff;
a {
color: #fff;
}
}
.search {
padding: 10px 15px;
input {
background-color: #333;
color: #fff;
border-color: #555;
}
}
.list {
padding: 10px 15px 0 15px;
position: relative;
overflow: auto;
width: 100%;
}
li.item {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #333;
a {
color: #bbb;
&:hover {
color: #fff;
}
}
.title {
cursor: pointer;
position: relative;
a {
color: #e1e1e1;
&:hover {
color: #fff;
}
}
display: block;
font-size: 0.8em;
.static {
display: block;
border-radius: 3px;
background-color: @colorSubtitle;
color: #000;
font-size: 0.7em;
padding: 2px 4px;
float: right;
}
}
.subtitle {
margin-top: 10px;
font: bold 0.65em Helvetica;
color: @colorSubtitle;
display: block;
}
ul {
& > li {
font-size: 0.7em;
padding-left: 8px;
margin-top: 2px;
}
}
.itemMembers {
display: none;
}
}
}

View File

@@ -215,38 +215,74 @@ function buildNav(members) {
return 0;
});
function createEntry(type, v) {
return {
type: type,
longname: v.longname,
name: v.name,
classes: find({
kind: 'class',
memberof: v.longname
}).map(createEntry.bind(this, 'class')),
members: find({
kind: 'member',
memberof: v.longname
}),
methods: find({
kind: 'function',
memberof: v.longname
}),
typedefs: find({
kind: 'typedef',
memberof: v.longname
}),
events: find({
kind: 'event',
memberof: v.longname
})
};
}
_.each(merged, function(v) {
// exclude interfaces from sidebar
if (v.interface !== true) {
if (v.kind == 'module') {
nav.push(createEntry('module', v));
if (v.interface !== true && v.kind === 'class') {
nav.push({
type: 'class',
longname: v.longname,
prettyname: v.longname
.split('~')[0]
.replace('module:', ''),
name: v.name,
module: find({
kind: 'module',
longname: v.memberof
})[0],
members: find({
kind: 'member',
memberof: v.longname
}),
methods: find({
kind: 'function',
memberof: v.longname
}),
typedefs: find({
kind: 'typedef',
memberof: v.longname
}),
fires: v.fires,
events: find({
kind: 'event',
memberof: v.longname
})
});
} else if (v.kind == 'module') {
const classes = find({
kind: 'class',
memberof: v.longname
});
const members = find({
kind: 'member',
memberof: v.longname
});
const methods = find({
kind: 'function',
memberof: v.longname
});
const typedefs = find({
kind: 'typedef',
memberof: v.longname
});
const events = find({
kind: 'event',
memberof: v.longname
});
// only add modules that have more to show than just a single class
if (classes.length !== 1 && (classes.length + members.length + methods.length + typedefs.length + events.length > 0)) {
nav.push({
type: 'module',
longname: v.longname,
prettyname: v.longname
.split('~')[0]
.replace('module:', ''),
name: v.name,
members: members,
methods: methods,
typedefs: typedefs,
fires: v.fires,
events: events
});
}
}
});

View File

@@ -1,121 +1,158 @@
$(function () {
// Search Items
$('#search').on('keyup', function (e) {
var value = $(this).val();
var $el = $('.navigation');
// Search Items
$('#include_modules').change(function (e) {
console.log('change');
if ($(this).is(':checked')) {
if (value) {
var regexp = new RegExp(value, 'i');
$el.find('li, .itemMembers').hide();
} else {
$el.find('li').each(function (i, v) {
var $item = $(v);
}
});
if ($item.data('name') && regexp.test($item.data('name'))) {
const container = $item.parent().parent().parent();
container.show();
container.closest('.itemMembers').show();
container.closest('.item').show();
$item.show();
$item.closest('.itemMembers').show();
$item.closest('.item').show();
}
});
} else {
$el.find('.item, .itemMembers').hide();
$('.navigation>ul>li').show();
var getSearchWeight = function (searchTerm, $matchedItem) {
let weight = 0;
// We could get smarter on the weight here
if ($matchedItem.data('shortname')
&& $matchedItem.data('shortname').toLowerCase() === searchTerm.toLowerCase()) {
weight++;
}
return weight;
};
// sort function callback
var weightSorter = function (a, b) {
var aW = $(a).data('weight') || 0;
var bW = $(b).data('weight') || 0;
return bW - aW;
};
// Search Items
$('#search').on('keyup', function (e) {
var value = $(this).val();
var $el = $('.navigation');
if (value && value.length > 1) {
var regexp = new RegExp(value, 'i');
$el.find('li, .itemMembers').hide();
$el.find('li').each(function (i, v) {
const $item = $(v);
const name = $item.data('name');
if (name && regexp.test(name)) {
const $classEntry = $item.closest('.item');
const $members = $item.closest('.itemMembers');
// Do the weight thing
$classEntry.removeData('weight');
$classEntry.show();
const weight = getSearchWeight(value, $classEntry);
$classEntry.data('weight', weight);
$members.show();
$classEntry.show();
$item.show();
}
});
$el.find('.list').scrollTop(0);
});
$(".navigation ul.list li.item:visible")
.sort(weightSorter) // sort elements
.appendTo(".navigation ul.list"); // append again to the list
// Toggle when click an item element
$('.navigation').on('click', '.title', function (e) {
$(this).parent().find('.itemMembers').toggle();
});
// Show an item related a current documentation automatically
var filename = $('.page-title').data('filename')
.replace(/\.[a-z]+$/, '')
.replace('module-', 'module:')
.replace(/_/g, '/')
.replace(/-/g, '~');
var $currentItem = $('.navigation .item[data-name*="' + filename + '"]:eq(0)');
if ($currentItem.length) {
$currentItem
.remove()
.prependTo('.navigation .list')
.show()
.find('.itemMembers')
.show();
} else {
$el.find('.item, .itemMembers').show();
}
// Auto resizing on navigation
var _onResize = function () {
var height = $(window).height();
var $el = $('.navigation');
$el.find('.list').scrollTop(0);
});
$el.height(height).find('.list').height(height - 133);
};
// Toggle when click an item element
$('.navigation').on('click', '.title', function (e) {
$(this).parent().find('.itemMembers').toggle();
});
$(window).on('resize', _onResize);
_onResize();
// Show an item related a current documentation automatically
var filename = $('.page-title').data('filename')
.replace(/\.[a-z]+$/, '')
.replace('module-', 'module:')
.replace(/_/g, '/')
.replace(/-/g, '~');
var $currentItem = $('.navigation .item[data-name*="' + filename + '"]:eq(0)');
var currentVersion = document.getElementById('package-version').innerHTML;
if ($currentItem.length) {
$currentItem
.remove()
.prependTo('.navigation .list')
.show()
.find('.itemMembers')
.show();
}
// warn about outdated version
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(/\/([^\/]*)\/apidoc\//);
var cookieText = 'dismissed=-' + latestVersion + '-';
var dismissed = document.cookie.indexOf(cookieText) != -1;
if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
var link = url.replace(branchSearch[0], '/latest/apidoc/');
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;
}
// Auto resizing on navigation
var _onResize = function () {
var height = $(window).height();
var $el = $('.navigation');
$el.height(height).find('.list').height(height - 133);
};
$(window).on('resize', _onResize);
_onResize();
var currentVersion = document.getElementById('package-version').innerHTML;
// warn about outdated version
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(/\/([^\/]*)\/apidoc\//);
var cookieText = 'dismissed=-' + latestVersion + '-';
var dismissed = document.cookie.indexOf(cookieText) != -1;
if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
var link = url.replace(branchSearch[0], '/latest/apidoc/');
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
var srcLinks = $('div.tag-source');
srcLinks.each(function(i, el) {
var textParts = el.innerHTML.trim().split(', ');
var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
textParts[0];
el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
'<a href="' + link + textParts[1].replace('line ', '#L') + '">' +
textParts[1] + '</a>';
});
// create source code links to github
var srcLinks = $('div.tag-source');
srcLinks.each(function(i, el) {
var textParts = el.innerHTML.trim().split(', ');
var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
textParts[0];
el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
'<a href="' + link + textParts[1].replace('line ', '#L') + '">' +
textParts[1] + '</a>';
});
// Highlighting current anchor
// Highlighting current anchor
var anchors = $('.anchor');
var _onHashChange = function () {
var activeHash = window.document.location.hash
.replace(/\./g, '\\.') // Escape dot in element id
.replace(/\~/g, '\\~'); // Escape tilde in element id
var anchors = $('.anchor');
var _onHashChange = function () {
var activeHash = window.document.location.hash
.replace(/\./g, '\\.') // Escape dot in element id
.replace(/\~/g, '\\~'); // Escape tilde in element id
anchors.removeClass('highlighted');
anchors.removeClass('highlighted');
if (activeHash.length > 0) {
anchors.filter(activeHash).addClass('highlighted');
}
};
if (activeHash.length > 0) {
anchors.filter(activeHash).addClass('highlighted');
}
};
$(window).on('hashchange', _onHashChange);
_onHashChange();
$(window).on('hashchange', _onHashChange);
_onHashChange();
});

View File

@@ -36,7 +36,7 @@
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a.active
{
{
outline:0;
color: #fff;
background-color: #268591;
@@ -106,6 +106,15 @@ li {
.navigation .applicationName a {
color: #fff;
}
.navigation .include-modules {
color: #e1e1e1;
float: right;
font-size: 0.75em;
padding: 5px 15px;
}
.navigation .include-modules input {
vertical-align: text-bottom;
}
.navigation .search {
padding: 10px 15px;
}
@@ -125,6 +134,11 @@ li {
padding-bottom: 8px;
border-bottom: 1px solid #333;
}
.navigation li.perfect-match {
border: 5px solid orange;
}
.navigation li.item a {
color: #bbb;
}
@@ -158,6 +172,12 @@ li {
color: #1F6B75;
display: block;
}
.navigation li.item .modulelink {
position: relative;
font-size: 0.75em;
padding-left: 5px;
top: -5px;
}
.navigation li.item ul > li {
font-size: 0.75em;
padding-left: 8px;
@@ -165,6 +185,7 @@ li {
}
.navigation li.item .itemMembers {
display: none;
padding-left: 8px;
}
.main {
padding: 20px 20px;

View File

@@ -1,7 +1,7 @@
<?js
var self = this;
function toShortName(name) {
return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
}
?>
<div class="navigation">
@@ -10,31 +10,23 @@ function toShortName(name) {
</div>
<ul class="list">
<?js
let navbuilder;
this.nav.forEach(navbuilder = function (item) {
this.nav.forEach(function (item) {
?>
<li class="item" data-name="<?js= item.longname ?>">
<li class="item" data-name="<?js= item.longname ?>" data-shortname="<?js= item.name.toLowerCase() ?>">
<span class="title">
<?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
<?js if (item.type === 'module') { ?>
<span class="glyphicon glyphicon-plus"></span>
<?js } else if (item.type === 'class') { ?>
<span class="glyphicon glyphicon-chevron-right"></span>
<?js } ?>
<?js= self.linkto(item.longname, item.prettyname) ?>
<?js if (item.type === 'namespace' &&
(item.members.length + item.typedefs.length + item.methods.length +
item.events.length > 0)) { ?>
item.events.length > 0)) { ?>
<?js } ?>
</span>
<ul class="members itemMembers">
<?js
if (item.classes.length) {
?>
<span class="subtitle">Classes</span>
<?js
item.classes.forEach(function (v) {
navbuilder(v);
});
}
?>
</ul>
<ul class="members itemMembers">
<?js
if (item.members.length) {
?>
<span class="subtitle">Members</span>