first alpha mithril version: display text, open nested crossref infinitly
This commit is contained in:
Bachir Soussi Chiadmi
+20
-7
@@ -1,10 +1,23 @@
|
||||
{{ partial "header.html" . }}
|
||||
<main>
|
||||
{{ $paginator := .Paginate (where .Site.Pages "Type" "item") }}
|
||||
{{ range $paginator.Pages }}
|
||||
{{ partial "item.html" . }}
|
||||
{{ end }}
|
||||
{{ partial "pagination.html" . }}
|
||||
</main>
|
||||
<div id="app">
|
||||
<main id="main">
|
||||
{{ range where .Data.Pages "Type" "item" }}
|
||||
{{ partial "item.html" . }}
|
||||
{{ end }}
|
||||
</main>
|
||||
</div>
|
||||
{{ partial "sidebar.html" . }}
|
||||
<script charset="utf-8">
|
||||
var DataItems = [
|
||||
{{ range where .Data.Pages "Type" "item" }}
|
||||
{
|
||||
"href": "{{ .RelPermalink }}",
|
||||
"title": "{{ .Title }}",
|
||||
"text": "{{ .Content }}",
|
||||
"slug": "{{ .Slug }}"
|
||||
},
|
||||
{{ end }}
|
||||
]
|
||||
</script>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
@@ -24,4 +24,3 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<article>
|
||||
<section id="{{ .Slug }}">
|
||||
<h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
|
||||
{{ range .Params.tags }}
|
||||
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
|
||||
@@ -6,4 +6,4 @@
|
||||
<div>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@@ -1,14 +1,4 @@
|
||||
<aside>
|
||||
<div>
|
||||
<div>
|
||||
<h3>LATEST POSTS</h3>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
{{ range first 5 .Site.Pages }}
|
||||
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -1,17 +1,169 @@
|
||||
|
||||
var m = require('mithril');
|
||||
/**
|
||||
* @Author: Bachir Soussi Chiadmi <bach>
|
||||
* @Date: 16-04-2017
|
||||
* @Email: bachir@figureslibres.io
|
||||
* @Last modified by: bach
|
||||
* @Last modified time: 18-04-2017
|
||||
* @License: GPL-V3
|
||||
*/
|
||||
|
||||
require('normalize.css/normalize.css');
|
||||
require('./fonts/amiri/amiri.css');
|
||||
require('./fonts/dejavu/dejavu.css');
|
||||
require('./fonts/opensans/opensans.css');
|
||||
|
||||
console.log("Hello");
|
||||
var m = require('mithril');
|
||||
|
||||
console.log("DataItems", DataItems);
|
||||
|
||||
var DataItemsBySlug = {};
|
||||
for (item of DataItems) {
|
||||
DataItemsBySlug[item.slug] = item;
|
||||
}
|
||||
console.log("DataItemsBySlug", DataItemsBySlug);
|
||||
|
||||
// __ _ __
|
||||
// / / (_)___ / /__
|
||||
// / / / / __ \/ //_/
|
||||
// / /___/ / / / / ,<
|
||||
// /_____/_/_/ /_/_/|_|
|
||||
var _Link = {
|
||||
targetslug:"",
|
||||
opened:false,
|
||||
oninit: function(vn){
|
||||
vn.state.targetslug = vn.attrs.href.replace(/^.*\/(.+)$/, "$1").replace(/^(.+)\/$/, "$1");
|
||||
},
|
||||
view: function(vn){
|
||||
if(vn.state.opened){
|
||||
// return m('div', "Hello "+vn.state.targetslug);
|
||||
return m(_Item, DataItemsBySlug[vn.state.targetslug]);
|
||||
}else{
|
||||
return m('a', {
|
||||
'class':'link',
|
||||
'href':'#'+vn.state.targetslug,
|
||||
'rel':vn.state.targetslug,
|
||||
onclick:function(e){
|
||||
e.preventDefault();
|
||||
vn.state.opened = true;
|
||||
return false;
|
||||
}
|
||||
}, vn.children);
|
||||
}
|
||||
|
||||
var app = {
|
||||
view: function() {
|
||||
return m('div', 'hello Ethica!')
|
||||
}
|
||||
}
|
||||
|
||||
m.mount(document.getElementById('app'), app)
|
||||
// ______ __
|
||||
// /_ __/__ _ __/ /_
|
||||
// / / / _ \| |/_/ __/
|
||||
// / / / __/> </ /_
|
||||
// /_/ \___/_/|_|\__/
|
||||
var _Text = {
|
||||
textchilds:[],
|
||||
oninit: function(vn){
|
||||
// initiaize text childNodes array
|
||||
vn.state.textchilds = [];
|
||||
// parse html string to virtual dom
|
||||
var textdom = new DOMParser().parseFromString(vn.attrs.text, "text/html");
|
||||
// get the text nodes (avoid html document extra)
|
||||
var childs = textdom.getElementsByTagName('body')[0].childNodes;
|
||||
// loop through childNodes
|
||||
for (var i = 0; i < childs.length; i++) {
|
||||
// if not textnode, get only first level paragraphs
|
||||
if(typeof childs[i].localName != "undefined" && childs[i].localName == "p"){
|
||||
var p = {
|
||||
tag:"p",
|
||||
childs:[]
|
||||
}
|
||||
// loop though paragraph child nodes (normaly only textnodes and <a>)
|
||||
for (var j = 0; j < childs[i].childNodes.length; j++) {
|
||||
// if not textnode
|
||||
if(typeof childs[i].childNodes[j].localName != "undefined"){
|
||||
switch (childs[i].childNodes[j].localName) {
|
||||
case 'a':
|
||||
p.childs.push({
|
||||
tag:'a',
|
||||
href:childs[i].childNodes[j].href,
|
||||
text:childs[i].childNodes[j].innerHTML
|
||||
});
|
||||
break;
|
||||
}
|
||||
}else{
|
||||
// if textnode
|
||||
p.childs.push({
|
||||
tag:'#text',
|
||||
text:childs[i].childNodes[j].data
|
||||
});
|
||||
}
|
||||
}
|
||||
vn.state.textchilds.push(p);
|
||||
}
|
||||
}
|
||||
},
|
||||
view: function(vn){
|
||||
// console.log('_Text :: view : '+vn.attrs.slug, vn);
|
||||
return m('div',
|
||||
{'class':'text'},
|
||||
// loop through first level paragraph
|
||||
vn.state.textchilds.map(function(p,i){
|
||||
// create paragraph and loop through text and link nodes
|
||||
return m('div', {'class':'paragraph'}, p.childs.map(function(c,j) {
|
||||
// return p.childs.map(function(c,j) {
|
||||
// create text and link node
|
||||
switch (c.tag) {
|
||||
case 'a':
|
||||
return m(_Link,
|
||||
{
|
||||
href:c.href
|
||||
}, c.text);
|
||||
break;
|
||||
case '#text':
|
||||
return m.trust(c.text);
|
||||
break;
|
||||
}
|
||||
}) // /map
|
||||
) // /m.div.paragraph
|
||||
}) // /map
|
||||
) // /m.div.text
|
||||
} // view:
|
||||
}
|
||||
|
||||
// ______
|
||||
// / _/ /____ ____ ___
|
||||
// / // __/ _ \/ __ `__ \
|
||||
// _/ // /_/ __/ / / / / /
|
||||
// /___/\__/\___/_/ /_/ /_/
|
||||
var _Item = {
|
||||
active:0,
|
||||
view: function(vn){
|
||||
return m("section", {
|
||||
'id':vn.attrs.slug,
|
||||
'class':'item'+(vn.state.active ? ' active' : '')
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h1", {
|
||||
'ref':vn.attrs.href,
|
||||
onclick: function(e){
|
||||
vn.state.active = vn.state.active ? 0 : 1;
|
||||
}
|
||||
}, vn.attrs.title),
|
||||
// create text node
|
||||
m(_Text, {'text':vn.attrs.text, 'slug':vn.attrs.slug})
|
||||
]
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
// ______
|
||||
// /_ __/_______ ___
|
||||
// / / / ___/ _ \/ _ \
|
||||
// / / / / / __/ __/
|
||||
// /_/ /_/ \___/\___/
|
||||
var _Tree = {
|
||||
view: function(){
|
||||
return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
|
||||
}
|
||||
}
|
||||
|
||||
m.mount(document.getElementById('app'), _Tree);
|
||||
|
||||
+44
-5
@@ -1,8 +1,47 @@
|
||||
/*
|
||||
Main scss
|
||||
*/
|
||||
// @Author: Bachir Soussi Chiadmi <bach>
|
||||
// @Date: 16-04-2017
|
||||
// @Email: bachir@figureslibres.io
|
||||
// @Last modified by: bach
|
||||
// @Last modified time: 18-04-2017
|
||||
// @License: GPL-V3
|
||||
|
||||
|
||||
html, body{
|
||||
font-family: 'dejavu', sans-serif;
|
||||
background-color: green;
|
||||
font-size: 16px;
|
||||
font-family: 'amiri', sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#app{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
main#content{
|
||||
display:inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
section.item{
|
||||
width:350px;
|
||||
margin: 1em 0;
|
||||
// max-height:14px;
|
||||
// overflow: hidden;
|
||||
// transition: max-height 0.5s ease-in-out;
|
||||
// &.active{
|
||||
// max-height:1000px;
|
||||
// }
|
||||
|
||||
h1{
|
||||
font-size: 0.750em;
|
||||
margin: 0;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
div.text div.paragraph{
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
div.text section.item{
|
||||
padding-left:2em;
|
||||
border-left: 1px solid #999;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
/**
|
||||
* @Author: Bachir Soussi Chiadmi <bach>
|
||||
* @Date: 11-04-2017
|
||||
* @Email: bachir@figureslibres.io
|
||||
* @Last modified by: bach
|
||||
* @Last modified time: 16-04-2017
|
||||
* @License: GPL-V3
|
||||
*/
|
||||
|
||||
var webpack = require('webpack');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user