├── README.md
├── css-snippet.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
  1 | # reveal-css-snippet
  2 | 
  3 | A [Reveal.js](https://github.com/hakimel/reveal.js) plugin that allows live CSS editing in code blocks.
  4 | 
  5 | ## Installation
  6 | 
  7 | Using [npm](https://www.npmjs.com/):
  8 | 
  9 | ```bash
 10 | npm install --save reveal-css-snippet
 11 | ```
 12 | 
 13 | ## Demo
 14 | Play with it on [Codepen](http://codepen.io/soluml/pen/QbQmoa)!
 15 | 
 16 | ## Usage
 17 | 
 18 | `RevealCSSSnippet()` returns a `<pre><code>` DOM node that allows you to live edit the presentations css styles which is useful for giving live coding demo's. You can then append this DOM node to any element in the presentation that you wish.
 19 | 
 20 | Optionally, you can pass in an object with two properties defined below. Both are optional:
 21 | 
 22 | ```js
 23 | RevealCSSSnippet({
 24 |     //el is a DOM node that you wish to scope the CSS too. The scoping is done via attribute selector, so beware of specificity issues with existing styles. The default is no scoping, which allows you to write CSS to target anything in the presentation.
 25 |     el: document.getElementById('targetElement'),
 26 |     
 27 |     //cssValue is the default CSS to be loaded into the block at initialization. The default is empty string.
 28 |     cssValue: "background: #ff0;\r\nwidth: 500px;\r\nheight: 50px;"
 29 | });
 30 | ```
 31 | 
 32 | ## Examples
 33 | 
 34 | ### Presentation Wide CSS Snippet:
 35 | 
 36 | **_HTML:_**
 37 | ```html
 38 | <!-- This section is a slide. -->
 39 | <section id="csssnip-slide">
 40 |     <h2>CSS Snippet Example</h2>
 41 | </section>
 42 | ```
 43 | 
 44 | **_In Reveal.initialize [index.html]:_**
 45 | ```js
 46 | // https://github.com/hakimel/reveal.js#configuration
 47 | Reveal.initialize({
 48 |     ...
 49 |     // Optional reveal.js plugins
 50 |     dependencies: [
 51 |         ...
 52 |         { src: 'plugin/reveal-css-snippet/css-snippet.js', callback: function() {
 53 |             document.getElementById('csssnip-slide').appendChild(RevealCSSSnippet({
 54 |                 //Default CSS I want automatically loaded in...
 55 |                 //Make background red and my specific slide's heading black
 56 |                 cssValue: "body {\r\n  background: #f00;\r\n}\r\n\r\n#csssnip-slide h2 {\r\n  color: #000;\r\n}"
 57 |             }));
 58 |         } },
 59 |         ...
 60 |     ]
 61 | ```
 62 | 
 63 | ### Element Scoped CSS Snippet:
 64 | 
 65 | **_HTML:_**
 66 | ```html
 67 | <!-- This section is a slide. -->
 68 | <section id="csssnip-slide">
 69 |     <h2>CSS Snippet Example</h2>
 70 |     <div id="targetElement"></div>
 71 | </section>
 72 | ```
 73 | 
 74 | **_In Reveal.initialize [index.html]:_**
 75 | ```js
 76 | // https://github.com/hakimel/reveal.js#configuration
 77 | Reveal.initialize({
 78 |     ...
 79 |     // Optional reveal.js plugins
 80 |     dependencies: [
 81 |         ...
 82 |         { src: 'plugin/reveal-css-snippet/css-snippet.js', callback: function() {
 83 |             document.getElementById('csssnip-slide').appendChild(RevealCSSSnippet({
 84 |                 //Element I want it scoped too
 85 |                 el: document.getElementById('targetElement'),
 86 |                 //Default CSS I want automatically loaded in
 87 |                 cssValue: "background: #ff0;\r\nwidth: 500px;\r\nheight: 50px;"
 88 |             }));
 89 |         } },
 90 |         ...
 91 |     ]
 92 | ```
 93 | 
 94 | ## License
 95 | 
 96 | The MIT License (MIT)
 97 | 
 98 | ## Author
 99 | 
100 | [![twitter/soluml](http://www.gravatar.com/avatar/832fa8588ea749ba2a83672fa36b8981?s=100)](https://twitter.com/soluml "Follow @soluml on Twitter")
101 | 


--------------------------------------------------------------------------------
/css-snippet.js:
--------------------------------------------------------------------------------
 1 | window.RevealCSSSnippet = function (O) {
 2 |     'use strict';
 3 | 
 4 |     var pre = document.createElement('pre'),
 5 |         txt = document.createElement('code'),
 6 |         stl = document.createElement('style'),
 7 |         ts;
 8 | 
 9 |     do {
10 |         ts = parseInt((Math.random() * 100000), 10);
11 |     } while (document.getElementById('csssnippet-' + ts));
12 | 
13 |     function addEvent(el, type, fn) {
14 |         if (el.attachEvent) {
15 |             el['e' + type + fn] = fn;
16 |             el[type + fn] = function () {
17 |                 el['e' + type + fn](window.event);
18 |             };
19 |             el.attachEvent('on' + type, el[type + fn]);
20 |         } else {
21 |             el.addEventListener(type, fn, false);
22 |         }
23 |     }
24 |     
25 |     function insertTextAtCursor(text) {
26 |         var sel,
27 |             range,
28 |             textNode;
29 | 
30 |         if (window.getSelection) {
31 |             sel = window.getSelection();
32 | 
33 |             if (sel.getRangeAt && sel.rangeCount) {
34 |                 range = sel.getRangeAt(0);
35 |                 range.deleteContents();
36 |                 textNode = document.createTextNode(text);
37 |                 range.insertNode(textNode);
38 |                 range.setStart(textNode, textNode.length);
39 |                 range.setEnd(textNode, textNode.length);
40 |                 sel.removeAllRanges();
41 |                 sel.addRange(range);
42 |             }
43 |         } else if (document.selection && document.selection.createRange) {
44 |             range = document.selection.createRange();
45 |             range.pasteHTML(text);
46 |         }
47 |     }
48 |     
49 |     function keyup() {
50 |         var stl = document.getElementById('csssnippet-' + ts),
51 |             val = (txt.textContent || txt.innerText).replace(/\s/g, ' ').trim();
52 | 
53 |         if (O.el) {
54 |             stl.innerHTML = '[data-csssnippet="' + ts + '"]{' + val + '}';
55 |         } else {
56 |             stl.innerHTML = val;
57 |         }
58 |     }
59 | 
60 |     function keydown(e) {
61 |         var key = e.which || e.keyCode || e.charCode,
62 |             val = txt.textContent || txt.innerText;
63 |         
64 |         //Tab Button
65 |         if (key === 9) {
66 |             insertTextAtCursor('  ');
67 |             e.preventDefault();
68 |         }
69 |     }
70 | 
71 |     stl.setAttribute('id', 'csssnippet-' + ts);
72 |     document.head.appendChild(stl);
73 |     txt.setAttribute('contenteditable', 'true');
74 |     txt.setAttribute('class', 'css');
75 |     txt.setAttribute('autocapitalize', 'off');
76 |     txt.setAttribute('autocorrect', 'off');
77 |     txt.setAttribute('autocomplete', 'off');
78 |     txt.setAttribute('spellcheck', 'false');
79 |     pre.setAttribute('class', 'css-snippet');
80 |     pre.appendChild(txt);
81 |     addEvent(txt, 'keydown', keydown);
82 |     addEvent(txt, 'keyup', keyup);
83 | 
84 |     if (O.el) {
85 |         O.el.setAttribute('data-csssnippet', ts);
86 |     }
87 |     
88 |     if (O.cssValue) {
89 |         txt.appendChild(document.createTextNode(O.cssValue));
90 |         keyup();
91 |     }
92 | 
93 |     return pre;
94 | };
95 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "reveal-css-snippet",
 3 |     "version": "0.1.2",
 4 |     "description": "A Reveal.js plugin that allows live CSS editing in code blocks.",
 5 |     "license": {
 6 |         "name": "MIT"
 7 |     },
 8 |     "main": "css-snippet.js",
 9 |     "keywords": [
10 |         "Reveal.js",
11 |         "css",
12 |         "snippet",
13 |         "live",
14 |         "code"
15 |     ],
16 |     "author": {
17 |         "name": "Benjamin Solum",
18 |         "email": "benjamin@soluml.com",
19 |         "url": "https://soluml.com/"
20 |     },
21 |     "repository": {
22 |         "type": "git",
23 |         "url": "git+https://github.com/soluml/reveal-css-snippet.git"
24 |     },
25 |     "bugs": {
26 |         "url": "https://github.com/soluml/reveal-css-snippet/issues"
27 |     },
28 |     "homepage": "https://github.com/soluml/reveal-css-snippet#readme"
29 | }
30 | 


--------------------------------------------------------------------------------