diff --git a/config/examples/example.html b/config/examples/example.html index eea96c02b4..fa52d8e50d 100644 --- a/config/examples/example.html +++ b/config/examples/example.html @@ -33,6 +33,7 @@

{{ shortdesc }}

{{ md docs }}
{{ tags }}
+ diff --git a/examples/resources/layout.css b/examples/resources/layout.css index a0daef1002..066bcc5021 100644 --- a/examples/resources/layout.css +++ b/examples/resources/layout.css @@ -18,6 +18,9 @@ body { #tags, #shortdesc, .hidden { display: none; } +#api-links ul { + display: inline; +} body, h1, h2, h3, h4, p, li, td, th { font-family: Quattrocento Sans; diff --git a/tasks/build-examples.js b/tasks/build-examples.js index 212b8c04e3..b8bb463166 100644 --- a/tasks/build-examples.js +++ b/tasks/build-examples.js @@ -8,6 +8,7 @@ var pkg = require('../package.json'); var markupRegEx = /([^\/^\.]*)\.html$/; var cleanupJSRegEx = /.*(goog\.require(.*);|.*renderer: common\..*,?)[\n]*/g; +var googRequiresRegEx = /.*goog\.require\('(ol\.\S*)'\);/g; var isCssRegEx = /\.css$/; var isJsRegEx = /\.js$/; @@ -15,6 +16,41 @@ var srcDir = path.join(__dirname, '..', 'examples'); var destDir = path.join(__dirname, '..', 'build', 'examples'); var templatesDir = path.join(__dirname, '..', 'config', 'examples'); +/** + * Returns an array of classes that are explicitly required inside the source + * by calling 'goog.require(…)' + * + * @param {string} src The JavaScript sourcecode to search for goog.require. + * @returns {Array.} An array of ol-classes that the source requires. + */ +function getGoogRequires(src) { + var googRequires = []; + var match = googRequiresRegEx.exec(src); + while (match) { + googRequires.push(match[1]); + match = googRequiresRegEx.exec(src); + } + return googRequires; +} + +/** + * Takes an array of the names of required OpenLayers symbols and returns an + * HTML-snippet with an unordered list to the API-docs for the particular + * classes. + * + * @param {Array.} googRequires An array of ol-classes that the source + * requires. + * @returns {string} The HTML-snippet with the list of links to API-docs. + */ +function getLinkToApiHtml(googRequires) { + var lis = googRequires.map(function(symb) { + var href = '../apidoc/' + symb + '.html'; + return '
  • ' + symb + '
  • '; + }); + return ''; +} + /** * A Metalsmith plugin that adds metadata to the example HTML files. For each * example HTML file, this adds metadata for related js and css resources. When @@ -46,10 +82,11 @@ function augmentExamples(files, metalsmith, done) { if (!(jsFilename in files)) { throw new Error('No .js file found for ' + filename); } + var jsSource = files[jsFilename].contents.toString(); file.js = { tag: '', - source: files[jsFilename].contents.toString().replace( - cleanupJSRegEx, '') + source: jsSource.replace(cleanupJSRegEx, ''), + apiHtml: getLinkToApiHtml(getGoogRequires(jsSource)) }; // add css tag and source