ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Rework plugin

Browse Source
This commit is contained in:
Tim Schaub
2015-04-06 05:01:50 -06:00
parent c265676f67
commit 6d318dce78
2 changed files with 79 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
config/examples/example.html
View File

@@ -9,7 +9,7 @@
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
{{{ resources }}}
{{{ css_resource }}}
{{{ css.tag }}}
<link rel="stylesheet" href="../resources/prism/prism.css" type="text/css">
<script src="../resources/zeroclipboard/ZeroClipboard.min.js"></script>
<title>{{ title }}</title>
@@ -46,8 +46,8 @@
<form method="POST" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
<input type="button" class="btn btn-info" id="copy-button" value="Copy example code">
<input type="submit" class="btn btn-primary" id="jsfiddle-button" value="Create JSFiddle">
<textarea class="hidden" name="js">{{ js_inline }}</textarea>
<textarea class="hidden" name="css">{{ css_inline }}</textarea>
<textarea class="hidden" name="js">{{ js.source }}</textarea>
<textarea class="hidden" name="css">{{ css.source }}</textarea>
<textarea class="hidden" name="html">{{ contents }}</textarea>
<input type="hidden" name="wrap" value="l">
<input type="hidden" name="resources" value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css,https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.css,https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.js">
@@ -61,9 +61,9 @@
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.css" type="text/css"&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/{{ ol_version }}/ol.js"&gt;&lt;/script&gt;
{{ resources }}
{{#if css_inline}}
{{#if css.source}}
&lt;style&gt;
{{ css_inline }}
{{ css.source }}
&lt;/style&gt;
{{/if}}
&lt;/head&gt;
@@ -73,7 +73,7 @@
{{ contents }}
&lt;/div&gt;
&lt;script&gt;
{{ js_inline }}
{{ js.source }}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
@@ -85,7 +85,7 @@
<script src="../resources/bootstrap/js/bootstrap.min.js"></script>
<script src="../resources/example-behaviour.js"></script>
<script src="../resources/prism/prism.min.js"></script>
{{{ js_resource }}}
{{{ js.tag }}}
</body>
</html>

118
tasks/build-examples.js
View File

@@ -6,7 +6,7 @@ var templates = require('metalsmith-templates');
var marked = require('marked');
var pkg = require('../package.json');
var fileRegEx = /([^\/^\.]*)\.html$/;
var markupRegEx = /([^\/^\.]*)\.html$/;
var cleanupJSRegEx = /.*(goog\.require(.*);|.*renderer: exampleNS\..*,?)[\n]*/g;
var isCssRegEx = /\.css$/;
var isJsRegEx = /\.js$/;
@@ -15,64 +15,91 @@ var srcDir = path.join(__dirname, '..', 'examples_src');
var destDir = path.join(__dirname, '..', 'examples');
var templatesDir = path.join(__dirname, '..', 'config', 'examples');
function main(callback) {
/**
* 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
* these files are run through the example template, the extra metadata is used
* to show the complete example source in the textarea and submit the parts to
* jsFiddle.
*
* @param {Object} files The file lookup provided by Metalsmith. Property names
* are file paths relative to the source directory. The file objects
* include any existing metadata (e.g. from YAML front-matter), the file
* contents, and stats.
* @param {Object} metalsmith The metalsmith instance the plugin is being used
* with.
* @param {function(Error)} done Called when done (with any error).
*/
function augmentExamples(files, metalsmith, done) {
for (var filename in files) {
var file = files[filename];
var match = filename.match(markupRegEx);
if (match && filename !== 'index.html') {
if (!file.template) {
done(new Error('Missing template in YAML front-matter:' + filename));
return;
}
var id = match[1];
if (file.docs) {
file.docs = marked(file.docs);
}
if (file.contents) {
file.contents = new Buffer(marked(file.contents.toString()));
}
function build(files) {
var file, match, str;
for (var f in files) {
file = files[f];
match = f.match(fileRegEx);
if (match) {
if (file.template) {
if (file.docs) {
file.docs = marked(file.docs);
}
if (file.contents) {
str = marked(file.contents.toString());
file.contents = new Buffer(str);
}
file.js_resource = '<script src="loader.js?id=' + match[1] +
'"></script>';
var js = files[match[1] + '.js'].contents.toString();
file.js_inline = js.replace(cleanupJSRegEx, '');
var cssFilename = match[1] + '.css';
if (cssFilename in files) {
file.css_resource = '<link rel="stylesheet" href="' + cssFilename +
// add js tag and source
var jsFilename = id + '.js';
if (!(jsFilename in files)) {
done(new Error('No .js file found for ' + filename));
return;
}
file.js = {
tag: '<script src="loader.js?id=' + id + '"></script>',
source: files[jsFilename].contents.toString().replace(
cleanupJSRegEx, '')
};
// add css tag and source
var cssFilename = id + '.css';
if (cssFilename in files) {
file.css = {
tag: '<link rel="stylesheet" href="' + cssFilename + '">',
source: files[cssFilename].contents.toString()
};
}
// add additional resources
if (file.resources) {
var resources = file.resources.split(',');
var resource;
for (var i = resources.length - 1; i >= 0; --i) {
resource = resources[i];
if (isJsRegEx.test(resource)) {
resources[i] = '<script src="' + resource + '"></script>';
} else if (isCssRegEx.test(resource)) {
resources[i] = '<link rel="stylesheet" href="' + resource +
'">';
file.css_inline = files[cssFilename].contents.toString();
} else {
done(new Error('Invalid value for "resource": ' +
resource + 'is not .js or .css: ' + filename));
return;
}
if (file.resources) {
var resources = file.resources.split(',');
var resource;
for (var i = resources.length - 1; i >= 0; --i) {
resource = resources[i];
if (isJsRegEx.test(resource)) {
resources[i] = '<script src="' + resource + '"></script>';
} else if (isCssRegEx.test(resource)) {
resources[i] = '<link rel="stylesheet" href="' + resource +
'">';
} else {
callback(new Error(f + ': Invalid value for "resource": ' +
resource + ' is no .js or .css.'));
}
file.resources = resources.join('\n');
}
}
} else if (f !== 'index.html') {
callback(new Error(f + ': Invalid YAML front-matter.'));
file.resources = resources.join('\n');
}
}
}
}
done();
}
function main(callback) {
new Metalsmith('.')
.source(srcDir)
.destination(destDir)
.metadata({
'ol_version': pkg.version
})
.use(build)
.use(augmentExamples)
.use(templates({
engine: 'handlebars',
directory: templatesDir
@@ -82,7 +109,6 @@ function main(callback) {
});
}
if (require.main === module) {
main(function(err) {
if (err) {