nw-playground
v0.1.0
Published
Quick experiments with NW.js
Downloads
6
Maintainers
alexbinaryReadme
nw-playground
Usage
Quick experiments with NW.js :
require('nw-playground')(document).convertAll();This will turn all code that looks like this :
<pre>
console.log('hello');
</pre>Into this :
<div class="nw-playground">
<pre class="nw-playground-editor" contentEditable="true">
console.log('hello');
</pre>
<button class="nw-playground-button-run">
Run
</button>
</div>User will be able to edit the content of the <pre> tag.
Clicking the Run button will create a <script> tag containing the code currently inside the <pre> tag nested inside a closure, and append it at the end of the <body> :
<body>
<!-- ... -->
<script>
(function() {
console.log('hello');
})();
</script>
</body>Clicking again will remove previous <script> tag before creating a new one
(this will not stop the code !).
Advanced usage
Convert custom elements
require('nw-playground')(document).convertOne(
document.querySelector('#myElement')
);Callback
You can pass a callback that will be called after a playground has been created :
// here the callback is called after the given element has been turned into a
// playground
require('nw-playground')(document).convertOne(
element,
function(element, container) {
/* ... */
}
);
// here the callback is called once for each converted element
require('nw-playground')(document).convertAll(
function(element, container) {
/* ... */
}
);The element argument is the original element that has been converted (class nw-playground-editor) and container is the top level wrapper element of the corresponding playground (class nw-playground).
You can use this to customize the generated HTML to suit your needs.
Syntax highlighting with Highlight.js
You can pass the main Highlight.js object to color the code inside the playgrounds :
<head>
<!-- ... -->
<!-- load Highlight.js -->
<link rel="stylesheet" href="highlight/styles/default.css">
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<!-- ... -->
<script>
hljs.configure(/* ... */);
require('nw-playground')(document, hljs).convertAll();
</script>
</body>Code inside each playground will be highlighted on load and when the element looses focus.
Reference
init(document[, hljs])
var init = require('nw-playground');
init(/* ... */);document: the DOM document (required)hljs: main Highlight.js object (optional)
convertAll([callback])
Convert all pre tags to a playground.
callback: function called once for each element that has been converted. Receives following parameters :element: the original element that has been converted (classnw-playground-editor)container: the top level wrapper element of the corresponding playground (classnw-playground)
convertOne(element[, callback])
Convert given element to a playground.
callback: function called after the element has been converted. Receives following parameters :element: the original element that has been converted (classnw-playground-editor)container: the top level wrapper element of the corresponding playground (classnw-playground)
License
The MIT License (MIT) - Copyright (c) 2015 Alexandre Bintz [email protected]
See LICENSE file for full text.