├── LICENSE
├── README.md
├── bootstrap.gif
├── editor.js
├── html2json2dom.gif
├── index.html
└── to_cell.webpacked.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 gliechtenstein
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # HTML to Cell
 2 | 
 3 | A notebook that turns HTML => JSON => DOM, powered by Cell.
 4 | 
 5 | |              | Column 1 | Column 2 | Column 3
 6 | |--------------|------------|----------|-----------
 7 | |What it does  | input HTML | HTML to JSON | JSON to DOM
 8 | 
 9 | 
10 | <img src="./html2json2dom.gif">
11 | <br>
12 | <img src="./bootstrap.gif">
13 | 
14 | # Demo
15 | 
16 | Check out the demo [https://gliechtenstein.github.io/HTML2JSON2DOM/](https://gliechtenstein.github.io/HTML2JSON2DOM/)
17 | 
18 | # Built With
19 | 
20 | 1. cell: https://github.com/intercellular/cell
21 | 2. to_cell: https://github.com/devsnek/to_cell
22 | 3. codemirror: https://github.com/codemirror/CodeMirror
23 | 


--------------------------------------------------------------------------------
/bootstrap.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gliechtenstein/HTML2JSON2DOM/1f323cecf0b9f0bed1b93801e7a6d4ea5da4af26/bootstrap.gif


--------------------------------------------------------------------------------
/editor.js:
--------------------------------------------------------------------------------
 1 | CM = function(gene) { 
 2 |   return {
 3 |     $type: "textarea",
 4 |     id: gene.id ? gene.id : null,
 5 |     _ed: null,
 6 |     _out: gene._out,
 7 |     _in: function(message) {
 8 |       if(this._ed) this._ed.setValue(message);
 9 |     },
10 |     _default: {
11 |       mode: "xml", htmlMode: true, lineNumbers: true, lineWrapping: true, lint: true, styleActiveLine: true, autoCloseBrackets: true, matchBrackets: true, viewportMargin: true, theme: "neo", gutters: ["CodeMirror-lint-markers"]
12 |     },
13 |     $init: function(){
14 |       var self = this;
15 |       for(var key in gene.options) {
16 |         this._default[key] = gene.options[key];
17 |       }
18 |       this._ed = CodeMirror.fromTextArea(this, this._default);
19 |       this._wrapper = this._ed.getWrapperElement();
20 |       for(var key in gene.style) {
21 |         this._wrapper.style[key] = gene.style[key];
22 |       }
23 |       try{
24 |         this._ed.on("change", function(e){
25 |           if(self._out) self._out(self._ed.getValue())
26 |         })
27 |       } catch (e) {}
28 |       if(gene.value) {
29 |         self._ed.setValue(gene.value);
30 |         if(self._out) {
31 |           setTimeout(function(){
32 |             self._out(gene.value);
33 |           },0)
34 |         }
35 |       }
36 |     }
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/html2json2dom.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gliechtenstein/HTML2JSON2DOM/1f323cecf0b9f0bed1b93801e7a6d4ea5da4af26/html2json2dom.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.css" rel='stylesheet'>
 3 | <link href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/neo.css' rel='stylesheet'>
 4 | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.js"></script>
 5 | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.27.4/mode/xml/xml.min.js"></script>
 6 | 
 7 | <script src='https://tojson.co/node_modules/jsonlint/lib/jsonlint.js'></script>
 8 | <script src='https://tojson.co/node_modules/codemirror/addon/lint/lint.js'></script>
 9 | <script src='https://tojson.co/node_modules/codemirror/addon/lint/javascript-lint.js'></script>
10 | <script src='https://tojson.co/node_modules/codemirror/addon/lint/json-lint.js'></script>
11 | <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.0/mode/javascript/javascript.js"></script>
12 | <script src="https://www.celljs.org/cell.js"></script>
13 | <script src="https://intercellular.github.io/forkme/forkme.js"></script>
14 | <style>
15 | html {
16 |   height: 100%;
17 |   width: 100%;
18 |   overflow: hidden;
19 | }
20 | </style>
21 | 
22 | <!-- Initialize with default content -->
23 | <script type="text/template" id="template">
24 | <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
25 | <div class="jumbotron">
26 |   <h1>HTML to JSON to DOM</h1>
27 |   <img src="https://imgflip.com/s/meme/Yo-Dawg-Heard-You.jpg">
28 |   <hr>
29 |   <p class="lead">A Notebook that turns HTML into JSON into DOM</p>
30 |   <p class="lead">Powered by <a href="https://www.celljs.org">Cell.js</a></p>
31 |   <p><a class="btn btn-lg btn-success" href="https://github.com/gliechtenstein/HTML2JSON2DOM" role="button">Check out the code</a></p>
32 | </div>
33 | </script>
34 | 
35 | <script src="./editor.js"></script>
36 | <script src="./to_cell.webpacked.js"></script>
37 | <script>
38 | app = {
39 |   $cell: true,
40 |   $type: "body",
41 |   style: {
42 |     display: "flex",
43 |     flexDirection: "row",
44 |     margin: 0,
45 |     padding: 0
46 |   },
47 |   $components: [
48 |     CM({
49 |       _out: function(res) {
50 |         try {
51 |           var json = JSON.stringify(to_cell.html(res), null, 2);
52 |           document.querySelector("#output")._in(json); 
53 |         } catch (e) {
54 |         }
55 |       },
56 |       value: document.querySelector("#template").innerHTML.trim(),
57 |       options: { mode: "xml" },
58 |       style: { width: "33%", height: "100%" }
59 |     }),
60 |     CM({
61 |       id: "output",
62 |       _out: function(res) {
63 |         if(res && res.length > 0) document.querySelector("#cell")._in(JSON.parse(res));
64 |       },
65 |       options: { mode: "application/json" },
66 |       style: { width: "33%", height: "100%" }
67 |     }),
68 |     {
69 |       style: { width: "33%", height: "100%", overflow: "auto" },
70 |       $components: [{
71 |         id: "cell",
72 |         _genes: [],
73 |         $components: [],
74 |         _in: function(genes) {
75 |           try {
76 |             var self = this;
77 |             this.$components = genes.filter(function(gene) {
78 |               return !gene.$type || gene.$type != "#text";
79 |             }).map(function(gene) {
80 |               var new_gene = gene;
81 |               delete new_gene.$cell;
82 |               return new_gene;
83 |             })
84 |           } catch (e) { }
85 |         }
86 |       }]
87 |     },
88 |     ForkMe("https://github.com/gliechtenstein/HTML2JSON2DOM")
89 |   ]
90 | }
91 | </script>
92 | </html>
93 | 


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