1.0.9 • Published 7 years ago
@square-one/view-inject v1.0.9
View Inject
HTML library that will take multiple files and insert the block code within a custom tag into other areas of the main file.
- Options
target *(string) required
This is a css selector that should be used to narrow down were in the target the injection should go.
action *(string) defaults: 'append'
The action that should be used when the selector finds a target, the available options are.
append: Addes the element to the end of the tree in the target foundprepend: Addes the element to the first of the tree in the target foundinsert-before: Will add the element in before the target that was foundinsert-after: Will add the element in after the target that was foundreplace: Will replace the target found
Usage
main.html
<html class="app html-app">
<head>
<title>This is the title</title>
</head>
<body>
<div id="container">
<content class="main-content">
<p>This is some special content.</p>
</content>
</div>
</body>
</html>inject.html
<view-inject target=".app .container">
<content>
<p>This is extra content</p>
</content>
</view-inject>
<view-inject target=".app .container content.main-content" action="prepend">
<p>Adding in some more content</p>
</view-inject>app.js
var fs = require('fs');
var ViewInject = require('@add-io').ViewInject;
var injector = new ViewInject('./main.html', ['./inject.html']);
injector.process().then(function(result) {
fs.writeFile('output.html', result, function (err) {
process.end();
});
});output.html
<html class="app html-app">
<head>
<title>This is the title</title>
</head>
<body>
<div id="container">
<content class="main-content">
<p>Adding in some more content</p>
<p>This is some special content.</p>
</content>
<content>
<p>This is extra content</p>
</content>
</div>
</body>
</html>