├── LICENSE.md
├── README.md
└── src
    ├── README.md
    ├── index.php
    ├── node
        ├── index.html
        └── index.js
    ├── projects
        ├── console
        │   ├── README.md
        │   ├── app.js
        │   ├── console.js
        │   ├── index.html
        │   └── style.css
        ├── inputs
        │   ├── README.md
        │   ├── index.html
        │   ├── style.css
        │   └── tag.html
        ├── multi
        │   ├── README.md
        │   ├── index.html
        │   ├── script.js
        │   ├── style.css
        │   └── tag.js
        ├── paginator
        │   ├── README.md
        │   ├── index.html
        │   ├── paginator.js
        │   ├── paginator.tag
        │   └── style.css
        ├── theme
        │   ├── README.md
        │   ├── index.html
        │   ├── style.css
        │   ├── style2.css
        │   └── theme.js
        └── todos
        │   ├── README.md
        │   ├── index.html
        │   ├── script.js
        │   ├── style.css
        │   └── todos.html
    ├── style.css
    └── tag.html


/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Richard Bondi
 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.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Examples
 2 | ========
 3 | 
 4 | This is a project to display live online demos with source code, similar to embedding a fiddle but self hosted.
 5 | See in action [here](http://richardbondi.net/riot/)
 6 | 
 7 | Features
 8 | --------
 9 | 
10 | * Display a live demo and view all the source files
11 | * Syntax highlighted source view
12 | * Examples can include multiple files, not limited to one of each type of file.  You can have for example multiple css or js files
13 | 
14 | Requirement
15 | ----------
16 | 
17 | * PHP server or node
18 | * Examples that you wish to show off
19 | 
20 | Usage
21 | -----
22 | 
23 | Replace the files in the `projects` directory with your own set of examples,  The root level README.md will be the page 
24 | heading.  README.md files in the project directories will be the heading for each example
25 | 
26 | This project was inspired by [riot.js](https://github.com/muut/riotjs) which is an great minimal library for binding dom
27 | to data.  Riot examples included.
28 | 
29 | 


--------------------------------------------------------------------------------
/src/README.md:
--------------------------------------------------------------------------------
1 | Riot Examples
2 | =============
3 | 
4 | View code by selecting file in left column.  Live demo in right column.  Follow edit link to experiment in plunker
5 | 
6 | This demo page was also created with riot, visit demo project [here.](https://github.com/rsbondi/examples)
7 | 


--------------------------------------------------------------------------------
/src/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $dirs = scandir('./projects/');
 4 | $readme = array(array("name"=>"README.md", "contents"=>file_get_contents("./README.md")));
 5 | 
 6 | $json = array();
 7 | foreach($dirs as $dir) {
 8 |     if(is_dir($dir)) continue;
 9 |     $json["projects/$dir"] = array();
10 |     $files = scandir("projects/$dir");
11 |     foreach($files as $f) {
12 |         if(is_dir("projects/$dir/$f")) continue;
13 |         $json["projects/$dir"][] = array("name"=>$f, "contents"=>file_get_contents("projects/$dir/$f"));
14 |     }
15 | }
16 | ?>
17 | <!DOCTYPE html>
18 | <html>
19 | <head>
20 |     <link rel="stylesheet" href="style.css">
21 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
22 | </head>
23 | <body>
24 |     <div class="examples">
25 |         <examples>
26 |     </div>
27 | 
28 |     <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
29 |     <script src="tag.html" type="riot/tag"></script>
30 |     <script src="https://cdn.jsdelivr.net/g/riot@2.1.0(riot.min.js+compiler.min.js)"></script>
31 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
32 |     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
33 | 
34 |     <script>
35 |         var apps = <?= json_encode($json); ?>;
36 |         var readme = <?= json_encode($readme); ?>;
37 |         riot.compile(function() {
38 |             var ex = riot.mount( 'examples',  {examples: apps, readme: readme})
39 |             var aCodes = document.getElementsByTagName('pre');
40 |             for (var i=0; i < aCodes.length; i++) {
41 |                 hljs.highlightBlock(aCodes[i]);
42 |             }
43 |         })
44 | 
45 |     </script>
46 | 
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/src/node/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <link rel="stylesheet" href="style.css">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | </head>
 7 | <body>
 8 | <div class="examples">
 9 |     <examples>
10 | </div>
11 | 
12 | <script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
13 | <script src="tag.html" type="riot/tag"></script>
14 | <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.0.8/riot+compiler.min.js"></script>
15 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
16 | <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
17 | 
18 | <script>
19 |     var promises = []
20 |     promises.push(get('/readme'))
21 |     promises.push(get('/apps'))
22 | 
23 |     Promise.all(promises).then(function(data) {
24 |         console.log('promise return', data)
25 |         riot.compile(function() {
26 |             var ex = riot.mount( 'examples',  {examples: data[1], readme: [data[0]]})
27 |             var aCodes = document.getElementsByTagName('pre');
28 |             for (var i=0; i < aCodes.length; i++) {
29 |                 hljs.highlightBlock(aCodes[i]);
30 |             }
31 |         })
32 | 
33 |     })
34 | 
35 |     function get(url) {
36 |         return new Promise(function(resolve, reject) {
37 |             var request = new XMLHttpRequest();
38 |             request.open('GET', url, true);
39 | 
40 |             request.onload = function() {
41 |                 if (request.status >= 200 && request.status < 400) {
42 |                     resolve(JSON.parse(request.responseText))
43 |                 } else {
44 |                     reject('server eror')
45 | 
46 |                 }
47 |             };
48 | 
49 |             request.onerror = function() {
50 |                 reject('request error')
51 |             };
52 | 
53 |             request.send();
54 |         })
55 |     }
56 | 
57 | </script>
58 | 
59 | </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/src/node/index.js:
--------------------------------------------------------------------------------
 1 | var http = require("http"),
 2 |     url = require("url"),
 3 |     path = require("path"),
 4 |     fs = require("fs"),
 5 |     port = process.argv[2] || 8888;
 6 | 
 7 | http.createServer(function(req, res) {
 8 | 
 9 |     var projects = '../projects/'
10 | 
11 |     /*  special case, / is here while others start at ../
12 |         readme and apps respond to ajax and return json objects for riot template
13 |      */
14 |     if(req.url=='/') {
15 |         var index = fs.readFileSync('index.html', 'utf-8')
16 |         res.writeHead(200, {'Content-Type': 'text/html'});
17 |         res.end(index)
18 | 
19 |         return
20 |     }
21 | 
22 |     if(req.url=='/readme') {
23 |         var rm = fs.readFileSync('../README.md', 'utf-8')
24 |         res.writeHead(200, {'Content-Type': 'text/json'});
25 |         var readme = {'name': 'README.md', 'contents': rm}
26 |         res.end(JSON.stringify(readme))
27 | 
28 |         return
29 |     }
30 | 
31 |     if(req.url=='/apps') {
32 |         var apps = {}
33 | 
34 |         var dirs = fs.readdirSync(projects)
35 |         dirs.forEach(function(d) {
36 |             apps[projects+d] = [];
37 |             var files = fs.readdirSync(projects+d)
38 |             files.forEach(function(fname) {
39 |                 if(!fs.lstatSync(projects+d+'/'+fname).isDirectory()) {
40 |                     var file = fs.readFileSync(projects+d+'/'+fname, 'utf8')
41 |                     apps[projects+d].push({'name': fname, 'contents': file})
42 |                 }
43 |             })
44 |         })
45 |         res.end(JSON.stringify(apps))
46 |         return
47 |     }
48 | 
49 |     /* static file serving from ../  */
50 |     var uri = url.parse(req.url).pathname
51 |         , filename = path.join(process.cwd(), '../'+uri);
52 |     fs.exists(filename, function(exists) {
53 |         if(!exists) {
54 |             res.writeHead(404, {"Content-Type": "text/plain"});
55 |             res.write("404 Not Found\n");
56 |             res.end();
57 |             return;
58 |         }
59 | 
60 |         if (fs.statSync(filename).isDirectory()) filename += '/index.html';
61 | 
62 |         fs.readFile(filename, "binary", function(err, file) {
63 |             if(err) {
64 |                 res.writeHead(500, {"Content-Type": "text/plain"});
65 |                 res.write(err + "\n");
66 |                 res.end();
67 |                 return;
68 |             }
69 | 
70 |             res.writeHead(200);
71 |             res.write(file, "binary");
72 |             res.end();
73 |         });
74 |     });
75 | }).listen(parseInt(port, 10));
76 | 
77 | console.log("Example file server running on port:" + port + "/\nCTRL + C to shutdown");


--------------------------------------------------------------------------------
/src/projects/console/README.md:
--------------------------------------------------------------------------------
1 | Console
2 | =======
3 | 
4 | Log information in an app
5 | 


--------------------------------------------------------------------------------
/src/projects/console/app.js:
--------------------------------------------------------------------------------
 1 | riot.tag('app', '<form onsubmit="{ add }"><input id="message" type="text"><button type="submit">Add</button></form>  <label>log <input type="radio" name="cls" onclick="{ set }" value="log" checked></label>  <label>warn <input type="radio" name="cls" onclick="{ set }" value="warn"></label>  <label>debug <input type="radio" name="cls" onclick="{ set }" value="debug"></label>  <label>error <input type="radio" name="cls" onclick="{ set }" value="error"></label>', function(opts) {
 2 |     
 3 |   this.cls = 'log'
 4 | 
 5 |   this.add = function() {
 6 |       riotConsole.add({message: message.value, cls: this.cls})
 7 |       message.value=''
 8 |     }
 9 |     
10 |   this.set = function(e) {
11 |       this.cls = e.target.value
12 |       riotConsole.add({message: 'now logging type '+this.cls, cls: this.cls})
13 |       return true
14 |     }
15 | })


--------------------------------------------------------------------------------
/src/projects/console/console.js:
--------------------------------------------------------------------------------
 1 | riot.tag('console', '<ul class="console"><li each="{ items }" class="{ cls }">  { message }  </li></ul>', function(opts) {
 2 |   
 3 |     this.items=[]
 4 |     
 5 |     this.add = function(a) {
 6 |       this.items.push(a)
 7 |       this.update() 
 8 |       this.root.lastChild.scrollTop =  this.root.lastChild.scrollHeight // scroll when full
 9 |     }
10 |     
11 |     this.clear = function() {
12 |       this.items = []
13 |       this.update()
14 |     }
15 |     
16 | })


--------------------------------------------------------------------------------
/src/projects/console/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <link rel="stylesheet" href="style.css">
 6 |   </head>
 7 | 
 8 |   <body>
 9 | 
10 |     <app></app>
11 |     <console></console>
12 |     <button id='clear'>clear</button>
13 |     
14 | <script src="https://cdn.jsdelivr.net/riot/2.1.0/riot.min.js"></script>
15 | <script src="console.js"></script>
16 | <script src="app.js"></script>
17 | 
18 | <script>
19 |   var riotConsole = riot.mount('console')[0]
20 |   var app = riot.mount('app')[0]
21 | 
22 |   riotConsole.add({message: 'initially logging type log', cls: 'log'})
23 |   
24 |   clear.addEventListener('click', function() {
25 |     riotConsole.clear()
26 |   })
27 | 
28 | </script>
29 | 
30 | </body>
31 | 
32 | </html>


--------------------------------------------------------------------------------
/src/projects/console/style.css:
--------------------------------------------------------------------------------
 1 | .console {
 2 |   height: 200px;
 3 |   overflow: auto;
 4 |   font-family: "Courier New", Courier, monospace;
 5 |   font-size: 12px;
 6 |   margin-top: 10px;
 7 |   border: 1px solid gray;
 8 |   padding: 5px;
 9 |   line-height: 18px;
10 | }
11 | 
12 | .error {
13 |   color: red;
14 |   background: url(http://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons16x16/exclamation.png) no-repeat;
15 |   padding-left: 20px;
16 | }
17 | .debug {
18 |   color: blue;
19 |   background: url(http://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons16x16/information.png) no-repeat;
20 |   padding-left: 20px;
21 | }
22 | .warn {
23 |   color: #cccc00;
24 |   padding-left: 20px;
25 |   background: url(//cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons16x16/error.png) no-repeat;
26 | }
27 | .log {
28 |   background: url(http://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons16x16/error_log.png) no-repeat;
29 |   padding-left: 20px;
30 | }
31 | 
32 | label {
33 |   margin-left: 10px;
34 | }
35 | 
36 | #clear {
37 |   margin-top: 10px;
38 | }
39 | 
40 | form {
41 |   display: inline-block;
42 | }


--------------------------------------------------------------------------------
/src/projects/inputs/README.md:
--------------------------------------------------------------------------------
1 | Dynamic Inputs
2 | ======
3 | 
4 | Create inputs widgets on a form of varying types(could be select, calendar, color pick, anything). Useful in a form 
5 | builder where the field types can be saved and the form displayed with the proper input.
6 | 


--------------------------------------------------------------------------------
/src/projects/inputs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 |   <head>
 5 |     <link rel="stylesheet" href="style.css">
 6 |   </head>
 7 | 
 8 |   <body>
 9 |   <div id="container">
10 |   <p>Select a label name and input type to add to list</p>
11 |     <app>
12 |   </div>
13 | 
14 | <script src="tag.html" type="riot/tag"></script>
15 | <script src="https://cdn.jsdelivr.net/g/riot@2.1.0(riot.min.js+compiler.min.js)"></script>
16 | <script>
17 |   riot.mount('app')
18 | </script>
19 | 
20 | </body>
21 | 
22 | </html>
23 | 


--------------------------------------------------------------------------------
/src/projects/inputs/style.css:
--------------------------------------------------------------------------------
 1 | .label {
 2 |   width: 120px;
 3 |   display: inline-block;
 4 | }
 5 | .row{
 6 |   line-height:30px;
 7 | }
 8 | #container {
 9 |   margin: 30px auto;
10 |   width: 400px;
11 |   border: 1px solid black;
12 |   padding: 15px;
13 | }
14 | .remove {
15 |   float: right;
16 |   margin-right: 20px;
17 |   color: #aa0000;
18 |   font-weight: bold;
19 |   font-size: 1.1em;
20 |   cursor: pointer;
21 | }
22 | 


--------------------------------------------------------------------------------
/src/projects/inputs/tag.html:
--------------------------------------------------------------------------------
 1 | <integer>
 2 |   <input type="number" name="{ opts.name }" />
 3 |   
 4 |   console.log('opts in input', opts)
 5 | </integer>
 6 | 
 7 | <decimal>
 8 |   <input type="number" step="0.01" name="{ opts.name }" />
 9 | </decimal>
10 | 
11 | <string>
12 |   <input type="text" name="{ opts.name }" />
13 | </string>
14 | 
15 | <choose>
16 |   <select name="{ opts.name }">
17 |     <option value="1">One</option>
18 |     <option value="2">Two</option>
19 |     <option value="3">Three</option>
20 |   </select>
21 | </choose>
22 | 
23 | <raw>
24 |   <span></span>
25 | 
26 |   riot.mountTo(this.root, opts.content.tag, opts.content)
27 | </raw>
28 | 
29 | <app>
30 |   name:
31 |   <input id="fieldName">&nbsp; type:
32 |   <select id="inputType">
33 |     <option value="integer">Integer</option>
34 |     <option value="decimal">Decimal</option>
35 |     <option value="string">String</option>
36 |     <option value="choose">Select</option>
37 |   </select>
38 | 
39 |   <button onclick="{ add }">Add</button>
40 | 
41 |   <h3>Inputs</h3>
42 | 
43 |   <div id="inputs" each={inp in inputs }>
44 |     <div class="row">
45 |       <div class='label'>{ inp.name || inp.tag }:</div>
46 |       <raw content="{ inp }" />
47 |       <div class='remove' onclick={ parent.remove }>x</div>
48 |     </div>
49 |   </div>
50 | 
51 |   <script>
52 |     this.inputs = []
53 |     
54 |     add() {
55 |       this.inputs.push({"name": fieldName.value,"tag": inputType.value})
56 |     }
57 |     
58 |     remove(e) {
59 |       this.inputs.splice(this.inputs.indexOf(e.item.inp), 1)
60 |     }
61 |   </script>
62 | </app>


--------------------------------------------------------------------------------
/src/projects/multi/README.md:
--------------------------------------------------------------------------------
1 | riot.js multi select
2 | ====================
3 | 
4 | a dropdown type selector showing all selections inline, removable selctions by clicking remove button
5 | 


--------------------------------------------------------------------------------
/src/projects/multi/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <link rel="stylesheet" href="style.css">
 6 |   <script src="https://cdn.jsdelivr.net/riot/2.1.0/riot.min.js"></script>
 7 | </head>
 8 | 
 9 | <body>
10 |   <h3>Select Color</h3>
11 |   <multi-select id="colors"></multi-select>
12 | 
13 |   <h3>Select Hobby</h3>
14 |   <multi-select id="hobbies"></multi-select>
15 | 
16 |   <!-- template -->
17 |   <textarea id="selectTag">
18 |     <ul class="selected">
19 |       <li each="{ selected }">
20 |         <div>{ name }<a href="#" onclick="{ parent.remove }">x</a>
21 |         </div>
22 | 
23 |       </li>
24 |       <li class="selector" onclick="{ show }">&nbsp;</li>
25 |     </ul>
26 | 
27 |     <ul class="selections" show="{ showing }">
28 |       <li each="{ selections }">
29 |         <div onclick="{ parent.select }">{ name }</div>
30 |       </li>
31 |     </ul>
32 |   </textarea>
33 |   
34 |   <script src="tag.js"></script>
35 |   <script src="script.js"></script>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/src/projects/multi/script.js:
--------------------------------------------------------------------------------
 1 |     // could pass additional attributes to access ex. colors.selected[i].value
 2 |     var colors = riot.mount('#colors', {
 3 |       selections: [{
 4 |         name: "Red"
 5 |       }, {
 6 |         name: "Blue"
 7 |       }, {
 8 |         name: "Green"
 9 |       }, {
10 |         name: "White"
11 |       }]
12 |     })[0];
13 | 
14 |     var hobbies = riot.mount('#hobbies', {
15 |       selections: [{
16 |         name: "Art"
17 |       }, {
18 |         name: "Writing"
19 |       }, {
20 |         name: "Meditation"
21 |       }, {
22 |         name: "Sports"
23 |       }, {
24 |         name: "Music"
25 |       }, {
26 |         name: "Computers"
27 |       }]
28 |     })[0];
29 | 


--------------------------------------------------------------------------------
/src/projects/multi/style.css:
--------------------------------------------------------------------------------
 1 | #selectTag {
 2 |   display: none;
 3 | }
 4 | .selected {
 5 |   min-height: 30px;
 6 |   min-width: 200px;
 7 |   border: 1px solid black;
 8 | }
 9 | multi-select ul {
10 |   list-style-type: none;
11 |   padding: 0;
12 |   margin-left: 0;
13 |   font-weight: bold;
14 | }
15 | .selected {
16 |   padding: 2px;
17 |   margin: 0 0 -1px;
18 |   width: 100%;
19 |   display: table;
20 |   table-layout: fixed;
21 | }
22 | .selected li div {
23 |   border: 1px solid black;
24 |   padding: 5px;
25 | }
26 | .selected li div,
27 | .selected li a {
28 |   float: left;
29 |   margin-right: 5px;
30 | }
31 | .selected li a {
32 |   text-decoration: none;
33 |   color: darkblue;
34 |   border: 1px solid darkblue;
35 |   background-color: lightgrey;
36 |   padding: 0 5px;
37 | }
38 | .selector {
39 |   width: 100%;
40 |   border: none;
41 |   height: 30px;
42 | }
43 | .selections {
44 |   border: 1px solid black;
45 |   margin-top: 0;
46 |   position: absolute;
47 |   left: 10px;
48 |   right: 10px;
49 |   z-index: 10;
50 |   background: white;
51 | }
52 | .selections li {
53 |   padding: 5px;
54 | }
55 | .selections li:hover {
56 |   background-color: #ccccff;
57 | }
58 | label {
59 |   margin-top: 8px;
60 | }
61 | .show {
62 |   display: block;
63 | }
64 | .hide {
65 |   display: none;
66 | }


--------------------------------------------------------------------------------
/src/projects/multi/tag.js:
--------------------------------------------------------------------------------
 1 | riot.tag('multi-select', selectTag.value, function(opts) {
 2 |   
 3 |   this.selections = opts.selections.sort(function(a,b) {return a.name > b.name});
 4 |   this.selected = [];
 5 |   this.showing = false;
 6 |   self = this;
 7 |   
 8 |   this.remove = function(e) {
 9 |     this._swap(e.item, this.selected, this.selections);
10 |     this.selections.sort(function(a,b) {return a.name > b.name});
11 | 
12 |   }.bind(this);
13 | 
14 |   this.select = function(e) {
15 |     this._swap(e.item, this.selections, this.selected);
16 |   }.bind(this);
17 |   
18 |   this.show = function(e) {
19 |     this.showing = !this.showing;
20 |   }.bind(this);
21 |   
22 |   this._swap = function(item, src, dest) {
23 |     dest.push(item);
24 |     src.splice(src.indexOf(item), 1);
25 |     this.showing = false;
26 |   };
27 |   
28 | });
29 | 


--------------------------------------------------------------------------------
/src/projects/paginator/README.md:
--------------------------------------------------------------------------------
1 | Paginator
2 | ========
3 | 
4 | A paginator component.  This is running a compiled version, `paginator.tag` file included for reference
5 | 


--------------------------------------------------------------------------------
/src/projects/paginator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <link rel="stylesheet" href="style.css">
 6 | </head>
 7 | 
 8 | <body>
 9 |   <h3>Grouped</h3>
10 |   <paginator class="a"></paginator>
11 |   <div id="events" class='group'>group above and below</div>
12 |   <paginator class="a"></paginator>
13 |   
14 |   <h3>Single</h3>
15 |   <paginator class="b"></paginator>
16 |   
17 |   <h3>Filter</h3>
18 |   <paginator class="c"></paginator>
19 |   <button id="filter">Filter</button> this sets a random number of pages to simulate a filter
20 | 
21 | 
22 |   <script src="https://cdn.jsdelivr.net/g/riot@2.1.0(riot.min.js)"></script>
23 |   <script src="paginator.js"></script>
24 | 
25 |   <script>
26 |     var paginatorGroup  = riot.mount('.a', {'total': 13, 'nblocks': 7})
27 |     var paginatorSingle = riot.mount('.b', {'total': 11, 'nblocks': 5})[0]
28 |     var paginatorFilter = riot.mount('.c', {'total': 11, 'nblocks': 5})[0]
29 | 
30 |     paginatorGroup.forEach(function(g) { // need better way to sync
31 |       g.on('pageChange', function(e) {
32 |         events.innerHTML = 'Grouped paginator event handled here page ' + e.page
33 |         paginatorGroup.forEach(function(p) {
34 |           p.trigger('setPage', e)
35 |         })
36 |       })
37 |     })
38 | 
39 |     paginatorSingle.on('pageChange', function(e) {
40 |       events.innerHTML = 'Single paginator event now do something page ' + e.page
41 |     })
42 | 
43 |     paginatorFilter.on('pageChange', function(e) {
44 |       events.innerHTML = 'Filter paginator event page ' + e.page
45 |     })
46 | 
47 |     filter.addEventListener('click', function() {
48 |       var total = Math.floor(Math.random() * 16)
49 |       paginatorFilter.init({
50 |         current: 1,
51 |         total: total,
52 |         nblocks: Math.min(total, 5)
53 |       })
54 |       events.innerHTML = 'Filter paginator reset page count to ' + paginatorFilter.total
55 |     })
56 |   </script>
57 | 
58 | </body>
59 | 
60 | </html>


--------------------------------------------------------------------------------
/src/projects/paginator/paginator.js:
--------------------------------------------------------------------------------
 1 | riot.tag('paginator', '<ul> <li class="{ disabled: current==1 }" onclick="{ prev }">&lt;</li> <li each="{ num in range }" class="{ active: parent.current==num }" onclick="{ parent.page }">{ num }</li> <li class="{ disabled: current==total }" onclick="{ next }">&gt;</li> </ul>', function(opts) {
 2 |   var self = this
 3 | 
 4 |   this.init = function(o) {
 5 |     this.total = o.total      // total pages
 6 |     this.current = 1          // current page
 7 |     this.nblocks = o.nblocks  // how many to display
 8 |     this.pages = []
 9 |     for (i = 1; i <= this.total; i++) this.pages.push(i)
10 |     this.setRange()
11 |   }
12 | 
13 |   this.setRange = function() {
14 |     var start = this.current <= this.nblocks ?
15 |       1 : (this.total - this.current) >= this.nblocks ?
16 |       this.current : this.total - this.nblocks + 1
17 | 
18 |     this.range = this.pages.slice(start - 1, start + this.nblocks - 1)
19 |     this.update && this.update()
20 |     this.trigger('pageChange', {
21 |       'page': this.current
22 |     })
23 |   }
24 | 
25 |   this.page = function(e) {
26 |     self.current = parseInt(e.target.innerHTML) // self because called from loop
27 |     self.setRange()
28 |   }
29 | 
30 |   this.next = function() {
31 |     if (this.current == this.total) return;
32 |     this.current = Math.min(this.total, this.current + 1)
33 |     this.setRange()
34 |   }
35 | 
36 |   this.prev = function() {
37 |     if (this.current == 1) return;
38 |     this.current = Math.max(1, this.current - 1)
39 |     this.setRange()
40 |   }
41 | 
42 |   this.init(opts)
43 | 
44 |   this.on('setPage', function(p) {
45 |     if (p.page == this.current) return
46 |     this.current = p.page
47 |     this.setRange()
48 |   })
49 | 
50 | });


--------------------------------------------------------------------------------
/src/projects/paginator/paginator.tag:
--------------------------------------------------------------------------------
 1 | <paginator>
 2 | 
 3 |     <ul>
 4 |         <li class="{ disabled: current==1 }" onclick={ prev  }>&lt;</li>
 5 |         <li each={ num in range } class="{ active: parent.current==num }" onclick={ parent.page }>{ num }</li>
 6 |         <li class="{ disabled: current==total }" onclick={ next  }>&gt;</li>
 7 |     </ul>
 8 | 
 9 |     <script>
10 |         init(o) {
11 |             this.total = o.total      // total pages
12 |             this.current = 1          // current page
13 |             this.nblocks = o.nblocks  // how many to display
14 |             this.pages = []
15 |             for (i = 1; i <= this.total; i++) this.pages.push(i)
16 |             this.setRange()
17 |         }
18 | 
19 |         setRange() {
20 |             var start = this.current <= this.nblocks ?
21 |                     1 : (this.total - this.current) >= this.nblocks ?
22 |                     this.current : this.total - this.nblocks + 1
23 | 
24 |             this.range = this.pages.slice(start - 1, start + this.nblocks - 1)
25 |             this.update && this.update()
26 |             this.trigger('pageChange', {
27 |                 'page': this.current
28 |             })
29 |         }
30 | 
31 |         page(e) {
32 |             self.current = parseInt(e.target.innerHTML) // self because called from loop
33 |             self.setRange()
34 |         }
35 | 
36 |         next() {
37 |             if (this.current == this.total) return;
38 |             this.current = Math.min(this.total, this.current + 1)
39 |             this.setRange()
40 |         }
41 | 
42 |         prev() {
43 |             if (this.current == 1) return;
44 |             this.current = Math.max(1, this.current - 1)
45 |             this.setRange()
46 |         }
47 | 
48 |         this.init(opts)
49 | 
50 |         this.on('setPage', function(p) {
51 |             if (p.page == this.current) return
52 |             this.current = p.page
53 |             this.setRange()
54 |         })
55 | 
56 |     </script>
57 | 
58 | </paginator>


--------------------------------------------------------------------------------
/src/projects/paginator/style.css:
--------------------------------------------------------------------------------
 1 | /* Styles go here */
 2 | paginator ul {
 3 |     list-style: none;
 4 | }
 5 | 
 6 | paginator ul li {
 7 |     display: inline-block;
 8 |     border: 1px solid grey;
 9 |     margin: 0 1px;
10 |     height: 26px;
11 |     width: 36px;
12 |     text-align: center;
13 |     padding-top: 8px;
14 |     cursor: pointer;
15 |     -webkit-touch-callout: none;
16 |     -webkit-user-select: none;
17 |     -khtml-user-select: none;
18 |     -moz-user-select: none;
19 |     -ms-user-select: none;
20 |     user-select: none;
21 | 
22 | }
23 | 
24 | .active {
25 |     background: #eeeeff;
26 |     border: 2px solid darkblue;
27 | 
28 | }
29 | 
30 | .disabled {
31 |     background: eeeeee;
32 |     color: lightgrey;
33 |     border-color: lightgrey;
34 | }
35 | 
36 | .group {
37 |     margin-left: 40px;
38 |     height: 100px;
39 |     border: 1px solid lightgrey;
40 |     width: 368px;
41 |     padding-top: 10px;
42 |     text-align: center;
43 | }
44 | 
45 | #filter {
46 |     margin-left: 40px;
47 |     padding: 0.6em 1.3em;
48 |     cursor: pointer;
49 | }
50 | 
51 | h3 {
52 |   background: #f8f8ff;
53 |   color: darkblue;
54 |   padding: 0.3em;
55 |   border: 1px solid darkblue;
56 | }


--------------------------------------------------------------------------------
/src/projects/theme/README.md:
--------------------------------------------------------------------------------
 1 | Riot Theme Switcher
 2 | ===================
 3 | 
 4 | Observations
 5 | 
 6 | * Plunker is very slow on the updates, runs fine in the real world
 7 | * Riot does not play well with &lt;head&gt;
 8 | * The official spec says <link rel=""> can only go in the head, but it seems to work in body
 9 | * Maybe to be legit, the themes could go in the tag and use if or show to expose
10 | * The default also needs to be hard coded in the head to work with ie on initial load
11 | 


--------------------------------------------------------------------------------
/src/projects/theme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <link rel="stylesheet" href="style.css">
 6 | </head>
 7 | 
 8 | <body>
 9 | <theme></theme>
10 | <theme-switch></theme-switch>
11 | <h1>Hello Riot!</h1>
12 | 
13 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <code>Confecta res esset.</code> <a href='http://loripsum.net/' target='_blank'>At enim hic etiam dolore.</a> Magna laus. At modo dixeras nihil in istis rebus esse, quod interesset. </p>
14 | 
15 | <pre>
16 | Nos beatam vitam non depulsione mali, sed adeptione boni
17 | iudicemus, nec eam cessando, sive gaudentem, ut Aristippus,
18 | sive non dolentem, ut hic, sed agendo aliquid considerandove
19 | quaeramus.
20 | 
21 | Et hi quidem ita non sola virtute finem bonorum contineri
22 | putant, ut rebus tamen omnibus virtutem anteponant;
23 | </pre>
24 | 
25 | 
26 | <p><a href='http://loripsum.net/' target='_blank'>Quid Zeno?</a> Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit. </p>
27 | 
28 | <ul>
29 |     <li>Quod si ita se habeat, non possit beatam praestare vitam sapientia.</li>
30 |     <li>Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest.</li>
31 |     <li>Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur.</li>
32 |     <li>Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam;</li>
33 |     <li>Cetera illa adhibebat, quibus demptis negat se Epicurus intellegere quid sit bonum.</li>
34 |     <li>Estne, quaeso, inquam, sitienti in bibendo voluptas?</li>
35 | </ul>
36 | 
37 | 
38 | <p><code>Aperiendum est igitur, quid sit voluptas;</code> Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio? De vacuitate doloris eadem sententia erit. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. Idemque diviserunt naturam hominis in animum et corpus. <a href='http://loripsum.net/' target='_blank'>Pugnant Stoici cum Peripateticis.</a> Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. Si longus, levis dictata sunt. Sed ille, ut dixi, vitiose. Summus dolor plures dies manere non potest? </p>
39 | 
40 | <p>Hanc ergo intuens debet institutum illud quasi signum absolvere. Quantum Aristoxeni ingenium consumptum videmus in musicis? Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Morbo gravissimo affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. <code>Rationis enim perfectio est virtus;</code> </p>
41 | 
42 | <p>Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Duo Reges: constructio interrete. Itaque hic ipse iam pridem est reiectus; Mene ergo et Triarium dignos existimas, apud quos turpiter loquare? Quod non faceret, si in voluptate summum bonum poneret. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? </p>
43 | 
44 | <script src="https://cdn.jsdelivr.net/riot/2.1.0/riot.min.js"></script>
45 | <script src="theme.js"></script>
46 | 
47 | <script>
48 |     var theme = riot.mount('theme')[0]
49 |     var switcher = riot.mount('theme-switch')[0]
50 |     switcher.on('switch', function(s) {
51 |         theme.switch(s)
52 |     })
53 | </script>
54 | 
55 | 
56 | </body>
57 | 
58 | </html>


--------------------------------------------------------------------------------
/src/projects/theme/style.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |   background: lightgrey;
 3 | }
 4 | 
 5 | pre {
 6 |   margin: 10px;
 7 |   background: lightgrey;
 8 |   padding: 20px;
 9 |   border-radius: 8px 5px;
10 | }
11 | 
12 | a {
13 |   font-weight: bold;
14 | }
15 | 
16 | code {
17 |   border: 1px solid lightgrey;
18 |   color: blue;
19 |   padding: 3px;
20 |   background: #cceeff;
21 | }
22 | 
23 | body {
24 |   font-family: arial;
25 | }
26 | 
27 | ul {
28 |   border: 1px dotted #cccccc;
29 |   font-size: 0.8em;
30 | }
31 | 
32 | li {
33 |   line-height: 1.5em;
34 | }


--------------------------------------------------------------------------------
/src/projects/theme/style2.css:
--------------------------------------------------------------------------------
 1 | h1 {
 2 |     background: darkgrey;
 3 | }
 4 | 
 5 | pre {
 6 |     margin: 10px;
 7 |     background: darkgrey;
 8 |     padding: 20px;
 9 |     border-radius: 8px 5px;
10 | }
11 | 
12 | a {
13 |     font-weight: bold;
14 |     color: yellow;
15 | }
16 | 
17 | code {
18 |     border: 1px solid darkgrey;
19 |     color: #cceeff;
20 |     padding: 3px;
21 |     background: blue;
22 | }
23 | 
24 | body {
25 |     font-family: helvetica;
26 |     background: black;
27 |     color: white;
28 | }
29 | 
30 | ul {
31 |     border: 1px dotted #cccccc;
32 |     font-size: 0.8em;
33 | }
34 | 
35 | li {
36 |     line-height: 1.5em;
37 | }
38 | 
39 | p {
40 |     line-height: 2em;
41 | }


--------------------------------------------------------------------------------
/src/projects/theme/theme.js:
--------------------------------------------------------------------------------
 1 | riot.tag('theme', '<link rel="stylesheet" href="{style}">', function(opts) {
 2 |   
 3 |     this.style='style.css'
 4 |     
 5 |     this.switch = function(s) {
 6 |       this.style = s
 7 |       this.update()
 8 |     }
 9 |     
10 | })
11 | 
12 | riot.tag('theme-switch', '<select onchange="{switch}"><option value="style.css">default</option><option value="style2.css">alt</option></select>', function(opts) {
13 |   
14 |   this.switch = function() {
15 |     this.trigger('switch', this.root.firstChild.value)
16 |   }
17 | })


--------------------------------------------------------------------------------
/src/projects/todos/README.md:
--------------------------------------------------------------------------------
1 | Browser compile tag todos example
2 | ===================================
3 | 
4 | updated for in browser compiler
5 | 


--------------------------------------------------------------------------------
/src/projects/todos/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <link rel="stylesheet" href="style.css">
 6 | </head>
 7 | 
 8 | <body>
 9 | <todos>
10 | 
11 | <script src="todos.html" type="riot/tag"></script>
12 | <script src="https://cdn.jsdelivr.net/g/riot@2.1.0(riot.min.js+compiler.min.js)"></script>
13 | <script src="script.js"></script>
14 | 
15 | </body>
16 | 
17 | </html>


--------------------------------------------------------------------------------
/src/projects/todos/script.js:
--------------------------------------------------------------------------------
 1 | var a = {
 2 |     title: 'I want to behave!',
 3 |     items: [{
 4 |       title: 'Avoid excessive coffeine',
 5 |       done: true
 6 |     }, {
 7 |       title: 'Be less provocative'
 8 |     }, {
 9 |       title: 'Be nice to people'
10 |     }]
11 | 
12 | };
13 | 
14 | var b =   {
15 |     title: 'Learn riotjs!',
16 |       items: [{
17 |         title: 'Set up plunker example',
18 |         done: true
19 |       }, {
20 |         title: 'Set up inline template',
21 |         done: true
22 |       }, {
23 |         title: 'Add multiple instances to example',
24 |         done: true
25 |       }, {
26 |         title: 'Make non todo example'
27 |       }]
28 | 
29 | };
30 | 
31 | riot.mount('todos', {todos:[a,b]});
32 | 


--------------------------------------------------------------------------------
/src/projects/todos/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | body {
 3 |   font-family: 'myriad pro', sans-serif;
 4 |   font-size: 20px;
 5 |   border: 0;
 6 | }
 7 | 
 8 | todo, todos {
 9 |   display: block;
10 |   max-width: 500px;
11 |   margin: 5% auto;
12 | }
13 | 
14 | todo {
15 |   border: 1px solid black;
16 |   padding: 8px;
17 | }
18 | form input {
19 |   font-size: 100%;
20 |   padding: .6em;
21 |   border: 1px solid #ccc;
22 |   border-radius: 3px;
23 | }
24 | 
25 | button {
26 |   background-color: #1FADC5;
27 |   border: 1px solid rgba(0,0,0,.2);
28 |   font-size: 100%;
29 |   color: #fff;
30 |   padding: .6em 1.2em;
31 |   border-radius: 3em;
32 |   cursor: pointer;
33 |   margin: 0 .3em;
34 |   outline: none;
35 | }
36 | 
37 | 
38 | button.remove {
39 |   background-color: #ff5555;
40 | }
41 | 
42 | button[disabled] {
43 |   background-color: #ddd;
44 |   color: #aaa;
45 | }
46 | 
47 | 
48 | ul {
49 |   padding: 0;
50 | }
51 | 
52 | li {
53 |   list-style-type: none;
54 |   padding: .2em 0;
55 | }
56 | 
57 | .completed {
58 |   text-decoration: line-through;
59 |   color: #ccc;
60 | }
61 | 
62 | label {
63 |   cursor: pointer;
64 | }
65 | 
66 | #todotag, #todos {
67 |   display: none;
68 | }
69 | 
70 | 


--------------------------------------------------------------------------------
/src/projects/todos/todos.html:
--------------------------------------------------------------------------------
  1 | <todo>
  2 |   <h3>{ parent.title }</h3>
  3 | 
  4 |   <ul class="item">
  5 |     <li each={ items }>
  6 |       <label class="{ completed: done }">
  7 |         <input type="checkbox" checked={ done } onclick={ parent.toggle }>{ title }
  8 |       </label>
  9 |     </li>
 10 |   </ul>
 11 | 
 12 |   <form onsubmit={ add }>
 13 |     <input name="input" onkeyup={ edit }>
 14 |     <button disabled={ !text }>Add #{ items.length + 1 }</button>
 15 |     <button disabled={ canRemove() } class="remove" onclick={ remove } title="Remove completed items">x</button>
 16 |   </form>
 17 | 
 18 |   <script>
 19 |     var todos = this.parent // in a loop, context changes
 20 |     this.items = this.parent.items || []
 21 |     var self = this
 22 | 
 23 |     add(e) {
 24 |       if (this.text) {
 25 |         this.items.push({
 26 |           title: this.text
 27 |         })
 28 |         this.text = this.input.value = ''
 29 |         todos.update()
 30 |       }
 31 |     }
 32 | 
 33 |     remove(e) {
 34 |       for (var i = this.items.length -1; i>=0; i--) {
 35 |         if (this.items[i].done) {
 36 |           this.items.splice(i, 1);
 37 |         }
 38 |       }
 39 |       todos.update()
 40 |     }
 41 | 
 42 |     edit(e) {
 43 |       this.text = e.target.value;
 44 |     }
 45 | 
 46 |     toggle(e) {
 47 |       var item = e.item
 48 |       item.done = !item.done
 49 |       this.parent.update()
 50 |       return true
 51 |     }
 52 | 
 53 |     this.canRemove = function() {
 54 |       var dones = this.items.filter(function(i) {
 55 |         return i.done
 56 |       })
 57 |       return !dones.length
 58 |     }.bind(this)
 59 |   </script>
 60 | </todo>
 61 | 
 62 | <todos>
 63 |   <h3>Add List/Remove Empty</h3>
 64 |   <form onsubmit={ add }>
 65 |     <input name="input" onkeyup={ edit }>
 66 |     <button disabled={ !text }>Add</button>
 67 |     <button disabled={ canRemove() } class="remove" onclick={ remove } title="Remove empty lists">x</button>
 68 |   </form>
 69 |   <todo each={ todos }></todo>
 70 | 
 71 |   <script>
 72 |     this.todos = opts.todos || []
 73 |     var self = this;
 74 | 
 75 |     edit(e) {
 76 |       this.text = e.target.value
 77 |     }
 78 | 
 79 |     add(e) {
 80 |       if (this.text) {
 81 |         this.todos.push({title: this.text, items: []});
 82 |         this.text = this.input.value = ''
 83 |       }
 84 |     }
 85 | 
 86 |     remove(e) {
 87 |       for (var i = this.todos.length -1; i>=0; i--) {
 88 |         if (this.todos[i].items.length === 0) {
 89 |           this.todos.splice(i, 1)
 90 |         }
 91 |       }
 92 |     }
 93 | 
 94 |     this.canRemove = function() {
 95 |       var empties = this.todos.filter(function(t) {
 96 |         return t.items.length==0
 97 |       })
 98 |       return empties.length == 0
 99 |     }.bind(this)
100 | 
101 |   </script>
102 | </todos>


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
  1 | .project .tabs-content ul {
  2 |     padding-left: 0;
  3 | }
  4 | .project .tabs-content li {
  5 |     display: none;
  6 | }
  7 | 
  8 | .project .tabs-content li.active {
  9 |     display: block;
 10 | }
 11 | 
 12 | .project .tabs li {
 13 |     cursor: pointer;
 14 |     margin-bottom:16px;
 15 |     color: #0055cc;
 16 | }
 17 | .project .tabs li.active {
 18 |     font-weight: bold;
 19 | }
 20 | .project {
 21 |     margin-top: 4em;
 22 | }
 23 | .project ul {
 24 |     list-style: none;
 25 | }
 26 | .examples {
 27 |     margin: auto;
 28 | }
 29 | .tabs li:first-child {
 30 |     color: #657b83;
 31 |     font-weight: bold;
 32 |     font-size: 1.3em;
 33 |     margin-bottom: 1em;
 34 | }
 35 | iframe {
 36 |     width: 37.5em;
 37 |     height: 25em;
 38 |     overflow: auto;
 39 |     margin-left: 1.25em;
 40 |     border:1px solid lightgrey;
 41 | }
 42 | .tabs-content {
 43 |     width: 37.5em;
 44 |     height: 25em;
 45 |     overflow: auto;
 46 |     float: left;
 47 |     border: 1px solid lightgrey;
 48 |     margin: 0;
 49 |     padding-left: 0;
 50 | }
 51 | 
 52 | .tabs {
 53 |     float: left;
 54 |     clear: both;
 55 |     width:12.5em;
 56 |     overflow: auto;
 57 | }
 58 | 
 59 | .readme {
 60 |     padding-left: 15em;
 61 |     border-top: 1px solid;
 62 |     margin-top: 1.25em;
 63 | }
 64 | 
 65 | 
 66 | h1 {
 67 |     color: #0079a1;
 68 | }
 69 | 
 70 | .hljs {
 71 |     background-color: #ffffff!important;
 72 |     overflow-x: visible!important;
 73 | }
 74 | 
 75 | @media only screen and (max-width: 93.50em) {
 76 |     iframe {
 77 |         margin-left: 15em;
 78 |         margin-top: 1.25em;
 79 |     }
 80 | }
 81 | @media only screen and (max-width: 54.63em) {
 82 |     iframe, .readme {
 83 |         margin-left: 0;
 84 |         margin-top: 1.25em;
 85 |     }
 86 | 
 87 |     iframe, .tabs-content {
 88 |         clear: both;
 89 |         display: block;
 90 |     }
 91 | 
 92 |     .readme {
 93 |         padding-left: 0;
 94 |         width: 37.5em;
 95 |     }
 96 | 
 97 |     .tabs {
 98 |         width: 36.47em;
 99 |         padding: 0.63em;
100 |     }
101 | 
102 |     .tabs li {
103 |         display: inline;
104 |         margin-right: 0.63em;
105 |     }
106 | }


--------------------------------------------------------------------------------
/src/tag.html:
--------------------------------------------------------------------------------
 1 | <examples>
 2 |     <div class="readme"><readme file="{readme}"></div>
 3 |     <div class='project' each={dir, file in examples}>
 4 |         <project dir={dir} file={file}>
 5 |     </div>
 6 | 
 7 |     <script>
 8 |         this.examples = opts.examples
 9 |         this.readme   = opts.readme
10 |     </script>
11 | </examples>
12 | 
13 | <project>
14 |     <a name="{ project }"></a>
15 |     <div class="readme"><readme file="{file}"></div>
16 | 
17 |     <ul class='tabs'>
18 |         <li>Files</li>
19 |         <li each={f, i in file} class="{active:parent.active==i}"  onclick={parent.settab} hide={f.name=='README.md'}>
20 |             {f.name}
21 |         </li>
22 |         <li>&nbsp;</li>
23 |         <li onclick={edit}>[Edit in plunker]</li>
24 |     </ul>
25 |     <ul class="tabs-content">
26 |         <li each={f, i in file} class="{active:parent.active==i}" onclick="{ parent.selectAll }">
27 |             <pre>
28 |            {f.contents}
29 |             </pre>
30 |         </li>
31 |     </ul>
32 | 
33 |     <iframe src="{dir}/" frameborder="0" />
34 | 
35 |     <form name="{ project }" method="post" action="http://plnkr.co/edit/?p=preview">
36 |       <input type="hidden" name="description" value={ 'Example' }>
37 |       <input type="hidden" name="private" value="true">
38 |       <input type="hidden" name="tags[0]" value="riotjs">
39 |       <input type="hidden" name="tags[1]" value="example">
40 |       <input each={ file } type="hidden" name="files[{ name }]" value="{ contents }">
41 |     </form>
42 | 
43 |     <script>
44 |         this.dir = opts.dir
45 |         this.project = opts.dir.substring(opts.dir.indexOf('/')+1)
46 |         this.file = opts.file
47 |         this.active = this.file[0].name == 'README.md' ? 1 : 0
48 |         var self = this
49 | 
50 |         settab(e) {
51 |             self.active = e.item.i
52 |         }
53 | 
54 |         selectAll(e) {
55 |             var r = document.createRange();
56 |             r.selectNodeContents(e.target);
57 |             var sel=window.getSelection();
58 |             sel.removeAllRanges();
59 |             sel.addRange(r);
60 |         }
61 | 
62 |         edit() {
63 |           console.log('edit', opts)
64 |           document.querySelector('form[name='+self.project+']').submit()
65 |         }
66 | 
67 |     </script>
68 | </project>
69 | 
70 | <readme>
71 |     <script>
72 |         this.file = opts.file
73 |         var self=this
74 | 
75 |         this.file.some(function(f) {
76 |             if(f.name == 'README.md') {
77 |                 self.root.innerHTML = marked(f.contents)
78 |                 return true
79 |             }
80 |         })
81 |     </script>
82 | </readme>
83 | 


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