BIG refactoring: splited code parts in modules
This commit is contained in:
Bachir Soussi Chiadmi
Vendored
+14
-9
@@ -757,22 +757,27 @@ header {
|
||||
z-index: 5; }
|
||||
header > * {
|
||||
display: inline-block;
|
||||
vertical-align: top; }
|
||||
vertical-align: bottom; }
|
||||
header > *:first-child {
|
||||
margin-left: 1em; }
|
||||
header > *:last-child {
|
||||
margin-right: 1em; }
|
||||
|
||||
aside#menus {
|
||||
nav#menus {
|
||||
float: right; }
|
||||
aside#menus > ul {
|
||||
nav#menus > ul {
|
||||
display: inline-block; }
|
||||
aside#menus ul#languages li {
|
||||
list-style: none;
|
||||
line-height: 0.9; }
|
||||
aside#menus ul#languages li a {
|
||||
text-decoration: none;
|
||||
color: inherit; }
|
||||
nav#menus ul {
|
||||
margin: 0 0.5em; }
|
||||
nav#menus ul li {
|
||||
list-style: none;
|
||||
line-height: 0.9;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 0.2em; }
|
||||
nav#menus ul li a {
|
||||
text-decoration: none;
|
||||
color: inherit; }
|
||||
|
||||
main#content {
|
||||
margin: 3em auto;
|
||||
|
||||
Vendored
+1694
-1583
File diff suppressed because it is too large
Load Diff
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+29
-432
@@ -12,418 +12,28 @@ require('./fonts/amiri/amiri.css');
|
||||
require('./fonts/dejavu/dejavu.css');
|
||||
require('./fonts/opensans/opensans.css');
|
||||
|
||||
|
||||
|
||||
var m = require('mithril');
|
||||
// var marked = require('marked');
|
||||
var markdown = require('markdown-it')()
|
||||
.use(require('markdown-it-footnote'));
|
||||
|
||||
var _lang;
|
||||
var _langs = [
|
||||
{'lc':'fr', 'label':'fr', 'db':'2-Appuhn-FR-ethicadb.json'},
|
||||
{'lc':'bra', 'label':'bra', 'db':'ethica-bresilen.json'}
|
||||
];
|
||||
|
||||
var _dbs = {};
|
||||
var _dbs_by_id = {};
|
||||
var _loaded_dbs = 0;
|
||||
// var _helpers = require('modules/helpers');
|
||||
var _dbs = require('./modules/dbs');
|
||||
var _Tree = require('./modules/tree');
|
||||
var _Dots = require('./modules/dots');
|
||||
|
||||
function init(){
|
||||
// var hash = window.location.hash;
|
||||
_lang = getUrlVars()['lang'] || 'fr';
|
||||
console.log(_lang);
|
||||
|
||||
// create lang menu
|
||||
// m.mount(document.getElementById('menus'), _LangMenu);
|
||||
|
||||
// load all dbs, when loaded init main app
|
||||
for (var i = 0; i < _langs.length; i++) {
|
||||
// if(_langs[i].lc == lang){
|
||||
// var dbfile = _langs[i].db;
|
||||
// }
|
||||
loadJSON(_langs[i].lc, 'assets/jsondb/'+_langs[i].db, onDBLoaded);
|
||||
|
||||
}
|
||||
|
||||
|
||||
_dbs.load(function(){
|
||||
console.log("Init _dbs.data", _dbs.data);
|
||||
console.log("Init _dbs.data_byid", _dbs.data_byid);
|
||||
m.route(document.body, "/tree", {
|
||||
"/tree": _Tree,
|
||||
"/dots": _Dots,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// __ __ ___
|
||||
// / / ____ _____ ____ _/ |/ /__ ____ __ __
|
||||
// / / / __ `/ __ \/ __ `/ /|_/ / _ \/ __ \/ / / /
|
||||
// / /___/ /_/ / / / / /_/ / / / / __/ / / / /_/ /
|
||||
// /_____/\__,_/_/ /_/\__, /_/ /_/\___/_/ /_/\__,_/
|
||||
// /____/
|
||||
var _LangMenu = {
|
||||
view: function(){
|
||||
// return m('main', {id:"content"}, DataItems.map(c => m(_Item,c)));
|
||||
// create ul dom
|
||||
return m('ul', {id:"languages"}, _langs.map(function(lang){
|
||||
// create li dom for each lank link
|
||||
return m('li',
|
||||
// create a dom
|
||||
m('a', {
|
||||
'lang':lang.lc,
|
||||
'href':'/?lang='+lang.lc,
|
||||
onclick:function(e){
|
||||
e.preventDefault();
|
||||
// console.log('click lang', e);
|
||||
var lang = e.target.getAttribute('lang');
|
||||
console.log(lang);
|
||||
if(lang != _lang){
|
||||
// change url variable
|
||||
// change db
|
||||
_lang = lang;
|
||||
// redraw UI
|
||||
// m.redraw();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}, lang.label)
|
||||
);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// _
|
||||
// (_)________ ____
|
||||
// / / ___/ __ \/ __ \
|
||||
// / (__ ) /_/ / / / /
|
||||
// __/ /____/\____/_/ /_/
|
||||
// /___/
|
||||
function loadJSON(lc, file, callback) {
|
||||
|
||||
var xobj = new XMLHttpRequest();
|
||||
xobj.overrideMimeType("application/json");
|
||||
// xobj.setRequestHeader('Accept-Encoding', 'gzip');
|
||||
xobj.open('GET', file, true); // Replace 'my_data' with the path to your file
|
||||
// xobj.onload = callback;
|
||||
xobj.onreadystatechange = function () {
|
||||
// console.log(xobj);
|
||||
if (xobj.readyState == 4 && xobj.status == "200") {
|
||||
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
|
||||
callback(lc, xobj.responseText);
|
||||
}
|
||||
};
|
||||
|
||||
xobj.send(null);
|
||||
|
||||
// TODO: load and unzip gziped json
|
||||
// TODO: load multiple languages jsons
|
||||
};
|
||||
|
||||
function onDBLoaded(lc, json){
|
||||
|
||||
_dbs[lc] = JSON.parse(json);
|
||||
_loaded_dbs ++;
|
||||
|
||||
if (_loaded_dbs == _langs.length) {
|
||||
console.log("_dbs", _dbs);
|
||||
parseDBs();
|
||||
// m.mount(document.getElementById('app'), _Tree);
|
||||
m.mount(document.body, _App);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function parseDBs(){
|
||||
for(l in _dbs){
|
||||
// console.log('l', l);
|
||||
_dbs_by_id[l] = {};
|
||||
for (p in _dbs[l]) {
|
||||
// console.log(_dbs[l][p]);
|
||||
for (e in _dbs[l][p].enonces) {
|
||||
// console.log('e',e);
|
||||
_dbs_by_id[l][_dbs[l][p].enonces[e].id] = _dbs[l][p].enonces[e];
|
||||
for (c in _dbs[l][p][e]){
|
||||
// console.log(_db[p][e][c]);
|
||||
_dbs_by_id[_dbs[l][p][e][c].id] = _dbs[l][p][e][c];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('_dbs_by_id', _dbs_by_id);
|
||||
}
|
||||
|
||||
// __ _ __
|
||||
// / / (_)___ / /__
|
||||
// / / / / __ \/ //_/
|
||||
// / /___/ / / / / ,<
|
||||
// /_____/_/_/ /_/_/|_|
|
||||
var _Link = {
|
||||
targetid:"",
|
||||
opened:false,
|
||||
oninit: function(vn){
|
||||
// console.log("INIT LINK : vn", vn);
|
||||
// define target id
|
||||
vn.state.tid = vn.attrs.href;
|
||||
},
|
||||
onupdate: function(vn){
|
||||
vn.state.tid = vn.attrs.href;
|
||||
},
|
||||
view: function(vn){
|
||||
if(vn.state.opened){
|
||||
// console.log('vn.state.tid', vn.state);
|
||||
return m('div', {'class':'opened-link'},
|
||||
[
|
||||
m('span', {'class':"link text"}, vn.children),
|
||||
typeof _dbs_by_id[_lang][vn.state.tid].childs != "undefined"
|
||||
? m(_Enonce, _dbs_by_id[_lang][vn.state.tid])
|
||||
: m(_Item, _dbs_by_id[_lang][vn.state.tid])
|
||||
]
|
||||
);
|
||||
}else{
|
||||
// console.log(vn);
|
||||
return m('a', {
|
||||
'class':'link',
|
||||
'href':'#'+vn.state.tid,
|
||||
'rel':vn.state.tid,
|
||||
onclick:function(e){
|
||||
e.preventDefault();
|
||||
console.log('click', vn);
|
||||
vn.state.opened = true;
|
||||
return false;
|
||||
}
|
||||
}, vn.children);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// ______ __
|
||||
// /_ __/__ _ __/ /_
|
||||
// / / / _ \| |/_/ __/
|
||||
// / / / __/> </ /_
|
||||
// /_/ \___/_/|_|\__/
|
||||
|
||||
// recusive function to record information of all subnodes
|
||||
function parseTextDom(nodes){
|
||||
var list = [];
|
||||
// loop through childNodes
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
var n = {};
|
||||
if(typeof nodes[i].localName != "undefined"){
|
||||
n.tag=nodes[i].localName;
|
||||
if (n.tag == 'p') {
|
||||
// replace p by div as we will insert other div in them
|
||||
n.tag = 'div';
|
||||
n.attrs = {'class':'paragraph'};
|
||||
}
|
||||
if (n.tag == 'a') {
|
||||
// record the href attribute for cross reference
|
||||
n.attrs = {'href':nodes[i].attributes.href.value};
|
||||
}
|
||||
if(nodes[i].childNodes.length){
|
||||
// again parse node's childs
|
||||
n.childs = parseTextDom(nodes[i].childNodes);
|
||||
}
|
||||
}else if (nodes[i].textContent.length > 1){
|
||||
// if node has no localName it is probably a #text node
|
||||
// we record it if it's not empty
|
||||
n.tag='#text';
|
||||
n.text=nodes[i].textContent;
|
||||
}
|
||||
// add the node to the list if it has a tag
|
||||
if(typeof n.tag != "undefined")
|
||||
list.push(n);
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
// recusive fucntion to generate mithril object from information recorded with parseTextDom()
|
||||
function populateTextDom(n,i){
|
||||
// console.log('populateTextDom : '+i,n);
|
||||
return n.tag == "#text"
|
||||
? m.trust(n.text)
|
||||
: m(
|
||||
n.tag != 'a' ? n.tag : _Link,
|
||||
typeof n.attrs != "undefined" ? n.attrs : {},
|
||||
typeof n.childs != "undefined"
|
||||
? n.childs.map(populateTextDom)
|
||||
: typeof n.text != "undefined"
|
||||
? m.trust(n.text)
|
||||
: null
|
||||
);
|
||||
}
|
||||
|
||||
var _Text = {
|
||||
id:null,
|
||||
text:"",
|
||||
texthtml:"",
|
||||
textdom:null,
|
||||
textchilds:[],
|
||||
parsetext: function(){
|
||||
// console.log('parsetext', this);
|
||||
// !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
|
||||
// convert markdown to html
|
||||
this.texthtml = markdown.render(this.text)
|
||||
// TODO: fixe number link text disapear [3](1d3) ( in 104d )
|
||||
// TODO: fixe parenthèse disparait _(par les Défin. [test 3](1d3) et [test 5](1d5))_ ( in 104d )
|
||||
// parse html string to virtual dom
|
||||
this.textdom = new DOMParser().parseFromString(this.texthtml, "text/html");
|
||||
// get the text nodes (avoid html document extra)
|
||||
this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
|
||||
},
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
this.text = vn.attrs.text;
|
||||
this.parsetext();
|
||||
},
|
||||
onbeforeupdate: function(vn,old){
|
||||
this.text = vn.attrs.text;
|
||||
this.parsetext();
|
||||
},
|
||||
view: function(vn){
|
||||
// console.log('_Text :: view : '+vn.attrs.slug, vn);
|
||||
return m('div',
|
||||
{'class':'text'},
|
||||
// loop through childNodes list generated by parseTextDom() in init
|
||||
this.textchilds.map(populateTextDom)
|
||||
); // /m.div.text
|
||||
} // view:
|
||||
}
|
||||
|
||||
// ______
|
||||
// / _/ /____ ____ ___
|
||||
// / // __/ _ \/ __ `__ \
|
||||
// _/ // /_/ __/ / / / / /
|
||||
// /___/\__/\___/_/ /_/ /_/
|
||||
var _Item = {
|
||||
id:null,
|
||||
part:null,
|
||||
type:null,
|
||||
nested:false,
|
||||
oninit: function(vn){
|
||||
// console.log('vn.attrs', vn.attrs);
|
||||
this.id = vn.attrs.id;
|
||||
this.type = vn.attrs.type;
|
||||
// vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
|
||||
this.text = vn.attrs.text;
|
||||
this.nested = vn.attrs.nested || false;
|
||||
},
|
||||
onbeforeupdate: function(vn, old){
|
||||
this.nested = vn.attrs.nested || false;
|
||||
this.type = vn.attrs.type;
|
||||
this.text = vn.attrs.text;
|
||||
},
|
||||
view: function(vn){
|
||||
return m("section", {
|
||||
'id':this.id,
|
||||
'class':'item'+(this.nested ? ' nested':'')
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h3", {
|
||||
// 'ref':vn.attrs.href,
|
||||
onclick: function(e){
|
||||
vn.state.active = vn.state.active ? 0 : 1;
|
||||
}
|
||||
}, this.type),
|
||||
// create text node
|
||||
m(_Text, {'text':this.text, 'id':this.id})
|
||||
]
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
// ______
|
||||
// / ____/___ ____ ____ ________
|
||||
// / __/ / __ \/ __ \/ __ \/ ___/ _ \
|
||||
// / /___/ / / / /_/ / / / / /__/ __/
|
||||
// /_____/_/ /_/\____/_/ /_/\___/\___/
|
||||
var _Enonce = {
|
||||
partid:null,
|
||||
id:null,
|
||||
title:null,
|
||||
text:null,
|
||||
nested:false,
|
||||
childs:[],
|
||||
oninit:function(vn){
|
||||
// // console.log('Enonce on init', vn);
|
||||
this.partid = vn.attrs.partid;
|
||||
this.id = vn.attrs.id;
|
||||
this.title = vn.attrs.title;
|
||||
this.text = vn.attrs.text;
|
||||
this.childs = vn.attrs.childs;
|
||||
this.nested = vn.attrs.nested || false;
|
||||
},
|
||||
onbeforeupdate:function(vn, old) {
|
||||
// console.log(vn.attrs.childs);
|
||||
this.title = vn.attrs.title;
|
||||
this.text = vn.attrs.text;
|
||||
this.childs = vn.attrs.childs;
|
||||
this.nested = vn.attrs.nested || false;
|
||||
// if(vn.attrs.id == '1d1') console.log('_Enonce UPDATE, text :', vn.attrs.text);
|
||||
},
|
||||
view: function(vn){
|
||||
// if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
|
||||
return m("section", {
|
||||
'id' :this.id,
|
||||
'class' :'enonce'+(this.nested ? ' nested':'')
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h2", {}, this.title),
|
||||
// create text node
|
||||
m(_Text, {'text':this.text, 'id':this.id}),
|
||||
// addd children
|
||||
this.childs.map(function(c){
|
||||
return m(_Item, c)
|
||||
})
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
// ____ __
|
||||
// / __ \____ ______/ /_
|
||||
// / /_/ / __ `/ ___/ __/
|
||||
// / ____/ /_/ / / / /_
|
||||
// /_/ \__,_/_/ \__/
|
||||
var _Part = {
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
this.title = vn.attrs.title;
|
||||
this.enonces = vn.attrs.enonces;
|
||||
},
|
||||
onbeforeupdate: function(vn, old){
|
||||
// console.log('_Part, onbeforeupdate old',old);
|
||||
this.title = vn.attrs.title;
|
||||
this.enonces = vn.attrs.enonces;
|
||||
},
|
||||
view: function(vn){
|
||||
// console.log(vn.attrs.enonces);
|
||||
return m("section", {
|
||||
'id' :this.id,
|
||||
'class' :'part'
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h1", {'class':'part'}, this.title),
|
||||
// create text node
|
||||
this.enonces.map(function(e){
|
||||
// console.log(e.text);
|
||||
return m(_Enonce, Object.assign({"partid":this.id},e))
|
||||
})
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// ______
|
||||
// /_ __/_______ ___
|
||||
// / / / ___/ _ \/ _ \
|
||||
// / / / / / __/ __/
|
||||
// /_/ /_/ \___/\___/
|
||||
var _Tree = {
|
||||
view: function(){
|
||||
console.log('_Tree view', _lang);
|
||||
return m('main', {id:"content"}, _dbs[_lang].map(function(p){
|
||||
// console.log("MAP _dbs", p);
|
||||
return m(_Part,p);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ___
|
||||
// / | ____ ____
|
||||
@@ -431,35 +41,22 @@ var _Tree = {
|
||||
// / ___ |/ /_/ / /_/ /
|
||||
// /_/ |_/ .___/ .___/
|
||||
// /_/ /_/
|
||||
var _App = {
|
||||
view: function(){
|
||||
console.log('_App view', _lang);
|
||||
return [
|
||||
m('header', [
|
||||
m('h1', 'Ethica'),
|
||||
m('aside', {'id':"menus"}, m(_LangMenu) )
|
||||
]),
|
||||
m(_Tree),
|
||||
m('footer', [
|
||||
m('p', m.trust('© 2017 <a href="./">Ethica Spinoza</a>'))
|
||||
])
|
||||
]
|
||||
}
|
||||
}
|
||||
// __ __ __
|
||||
// / / / /__ / /___ ___ __________
|
||||
// / /_/ / _ \/ / __ \/ _ \/ ___/ ___/
|
||||
// / __ / __/ / /_/ / __/ / (__ )
|
||||
// /_/ /_/\___/_/ .___/\___/_/ /____/
|
||||
// /_/
|
||||
// var _App = {
|
||||
// view: function(){
|
||||
// console.log('_App view', _lang);
|
||||
// return [
|
||||
// m('header', [
|
||||
// m('h1', 'Ethica'),
|
||||
// m('aside', {'id':"menus"}, m(_LangMenu) )
|
||||
// ]),
|
||||
// m(_Tree),
|
||||
// m('footer', [
|
||||
// m('p', m.trust('© 2017 <a href="./">Ethica Spinoza</a>'))
|
||||
// ])
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
|
||||
function getUrlVars() {
|
||||
var vars = {};
|
||||
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
|
||||
vars[key] = value;
|
||||
});
|
||||
return vars;
|
||||
}
|
||||
|
||||
// _ _ __
|
||||
// (_)___ (_) /_
|
||||
|
||||
+17
-3
@@ -26,27 +26,41 @@ header{
|
||||
width:100%; top:0; z-index: 5;
|
||||
>*{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
vertical-align: bottom;
|
||||
&:first-child{ margin-left: 1em;}
|
||||
&:last-child{ margin-right: 1em;}
|
||||
}
|
||||
}
|
||||
|
||||
aside#menus{
|
||||
nav#menus{
|
||||
float:right;
|
||||
>ul{
|
||||
display: inline-block;
|
||||
}
|
||||
ul#languages{
|
||||
ul{
|
||||
margin:0 0.5em;
|
||||
li{
|
||||
list-style: none;
|
||||
line-height: 0.9;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 0.2em;
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
// ul#languages{
|
||||
// li{
|
||||
// list-style: none;
|
||||
// line-height: 0.9;
|
||||
// a{
|
||||
// text-decoration: none;
|
||||
// color: inherit;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// #app{
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
|
||||
// _
|
||||
// (_)________ ____
|
||||
// / / ___/ __ \/ __ \
|
||||
// / (__ ) /_/ / / / /
|
||||
// __/ /____/\____/_/ /_/
|
||||
// /___/
|
||||
|
||||
module.exports = {
|
||||
lang:'fr',
|
||||
langs:[
|
||||
{'lc':'fr', 'label':'fr', 'db':'2-Appuhn-FR-ethicadb.json'},
|
||||
{'lc':'bra', 'label':'bra', 'db':'ethica-bresilen.json'}
|
||||
],
|
||||
data:[],
|
||||
loaded_dbs:0,
|
||||
data_byid:[],
|
||||
load: function(callback) {
|
||||
// load all dbs, when all loaded call main app callback function
|
||||
for (var i = 0; i < this.langs.length; i++) {
|
||||
this.loadJSON(this.langs[i].lc, 'assets/jsondb/'+this.langs[i].db, callback)
|
||||
}
|
||||
},
|
||||
loadJSON: function(lc, file, callback){
|
||||
|
||||
var xobj = new XMLHttpRequest();
|
||||
xobj.overrideMimeType("application/json");
|
||||
// TODO: load and unzip gziped json
|
||||
// xobj.setRequestHeader('Accept-Encoding', 'gzip');
|
||||
xobj.onreadystatechange = function () {
|
||||
// console.log('onreadystatechange', xobj.readyState);
|
||||
switch(xobj.readyState){
|
||||
case 3:
|
||||
console.log('loading');
|
||||
break;
|
||||
case 4:
|
||||
if (xobj.status === 200) {
|
||||
this.onJSONLoaded(lc, xobj.responseText, callback);
|
||||
} else {
|
||||
console.log("Status de la réponse: %d (%s)", xobj.status, xobj.statusText);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
xobj.open('GET', file, true);
|
||||
xobj.send(null);
|
||||
},
|
||||
onJSONLoaded: function(lc, json, callback){
|
||||
console.log('onDBLoaded');
|
||||
this.data[lc] = JSON.parse(json);
|
||||
this.loaded_dbs ++;
|
||||
//
|
||||
if (this.loaded_dbs == this.langs.length) {
|
||||
this.parseByID(callback);
|
||||
}
|
||||
|
||||
},
|
||||
parseByID: function(callback){
|
||||
for(l in this.data){
|
||||
// console.log('l', l);
|
||||
this.data_byid[l] = {};
|
||||
for (p in this.data[l]) {
|
||||
// console.log(this.data[l][p]);
|
||||
for (e in this.data[l][p].enonces) {
|
||||
// console.log('e',e);
|
||||
this.data_byid[l][this.data[l][p].enonces[e].id] = this.data[l][p].enonces[e];
|
||||
for (c in this.data[l][p].enonces[e].childs){
|
||||
// console.log(_db[p][e][c]);
|
||||
this.data_byid[l][this.data[l][p].enonces[e].childs[c].id] = this.data[l][p].enonces[e].childs[c];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('this.data_byid', this.data_byid);
|
||||
callback();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
|
||||
var m = require('mithril');
|
||||
var _dbs = require('./dbs');
|
||||
var _Header = require('./header');
|
||||
var _Footer = require('./footer');
|
||||
|
||||
// var _lang = require('../main.js')._langs;
|
||||
|
||||
// ____ __
|
||||
// / __ \____ / /______
|
||||
// / / / / __ \/ __/ ___/
|
||||
// / /_/ / /_/ / /_(__ )
|
||||
// /_____/\____/\__/____/
|
||||
module.exports = {
|
||||
view: function(){
|
||||
console.log('_Dots view', _dbs.lang);
|
||||
return [
|
||||
m(_Header),
|
||||
m('main', {id:"content"}, "Hello dots !"),
|
||||
m(_Footer)
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
|
||||
var m = require('mithril');
|
||||
|
||||
|
||||
// ____ __
|
||||
// / __/___ ____ / /____ _____
|
||||
// / /_/ __ \/ __ \/ __/ _ \/ ___/
|
||||
// / __/ /_/ / /_/ / /_/ __/ /
|
||||
// /_/ \____/\____/\__/\___/_/
|
||||
module.exports = {
|
||||
view: function(vn){
|
||||
return m('footer', [
|
||||
m('p', m.trust('© 2017 <a href="./">Ethica Spinoza</a>'))
|
||||
]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
|
||||
var m = require('mithril');
|
||||
var _dbs = require('./dbs');
|
||||
|
||||
|
||||
// __ __ __
|
||||
// / / / /__ ____ _____/ /__ _____
|
||||
// / /_/ / _ \/ __ `/ __ / _ \/ ___/
|
||||
// / __ / __/ /_/ / /_/ / __/ /
|
||||
// /_/ /_/\___/\__,_/\__,_/\___/_/
|
||||
module.exports = {
|
||||
view: function(vn){
|
||||
return m('header', [
|
||||
m('h1', 'Ethica'),
|
||||
m('nav', {'id':"menus"}, [
|
||||
m(_RouteMenu),
|
||||
m(_LangMenu)
|
||||
])
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var _RouteMenu = {
|
||||
view: function(){
|
||||
// create ul dom
|
||||
return m('ul', {id:"routes"}, [
|
||||
m('li', m('a', {'href':'#!/tree'}, "tree")),
|
||||
m('li', m('a', {'href':'#!/dots'}, "dots")),
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// __ __ ___
|
||||
// / / ____ _____ ____ _/ |/ /__ ____ __ __
|
||||
// / / / __ `/ __ \/ __ `/ /|_/ / _ \/ __ \/ / / /
|
||||
// / /___/ /_/ / / / / /_/ / / / / __/ / / / /_/ /
|
||||
// /_____/\__,_/_/ /_/\__, /_/ /_/\___/_/ /_/\__,_/
|
||||
// /____/
|
||||
var _LangMenu = {
|
||||
view: function(){
|
||||
// create ul dom
|
||||
return m('ul', {id:"languages"}, _dbs.langs.map(function(lang){
|
||||
// create li dom for each lank link
|
||||
return m('li',
|
||||
// create a dom
|
||||
m('a', {
|
||||
'lang':lang.lc,
|
||||
'href':'/?lang='+lang.lc,
|
||||
onclick:function(e){
|
||||
e.preventDefault();
|
||||
// console.log('click lang', e);
|
||||
var lang = e.target.getAttribute('lang');
|
||||
console.log(lang);
|
||||
if(lang != _dbs.lang){
|
||||
// change url variable
|
||||
// change db
|
||||
_dbs.lang = lang;
|
||||
// redraw UI
|
||||
// m.redraw();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}, lang.label)
|
||||
);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// __ __ __
|
||||
// / / / /__ / /___ ___ __________
|
||||
// / /_/ / _ \/ / __ \/ _ \/ ___/ ___/
|
||||
// / __ / __/ / /_/ / __/ / (__ )
|
||||
// /_/ /_/\___/_/ .___/\___/_/ /____/
|
||||
// /_/
|
||||
|
||||
function getUrlVars() {
|
||||
var vars = {};
|
||||
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
|
||||
vars[key] = value;
|
||||
});
|
||||
return vars;
|
||||
}
|
||||
@@ -0,0 +1,297 @@
|
||||
|
||||
var m = require('mithril');
|
||||
|
||||
var markdown = require('markdown-it')()
|
||||
.use(require('markdown-it-footnote'));
|
||||
|
||||
var _dbs = require('./dbs');
|
||||
var _Header = require('./header');
|
||||
var _Footer = require('./footer');
|
||||
|
||||
// __ _ __
|
||||
// / / (_)___ / /__
|
||||
// / / / / __ \/ //_/
|
||||
// / /___/ / / / / ,<
|
||||
// /_____/_/_/ /_/_/|_|
|
||||
var _Link = {
|
||||
tid:"",
|
||||
opened:false,
|
||||
oninit: function(vn){
|
||||
// console.log("INIT LINK : vn", vn);
|
||||
// define target id
|
||||
this.tid = vn.attrs.href;
|
||||
},
|
||||
onbeforeupdate: function(vn){
|
||||
this.tid = vn.attrs.href;
|
||||
},
|
||||
view: function(vn){
|
||||
this.tid_known = typeof _dbs.data_byid[_dbs.lang][this.tid] === 'undefined' ? false : true;
|
||||
if (!this.tid_known) {
|
||||
console.log('!! target id '+this.tid+' unkonwn !!');
|
||||
}
|
||||
if(this.opened && this.tid_known){
|
||||
// console.log('this.tid', vn.state);
|
||||
return m('div', {'class':'opened-link'},
|
||||
[
|
||||
m('span', {'class':"link text"}, vn.children),
|
||||
typeof _dbs.data_byid[_dbs.lang][this.tid].childs != "undefined"
|
||||
? m(_Enonce, _dbs.data_byid[_dbs.lang][this.tid])
|
||||
: m(_Item, _dbs.data_byid[_dbs.lang][this.tid])
|
||||
]
|
||||
);
|
||||
}else{
|
||||
// console.log(vn);
|
||||
return m('a', {
|
||||
'class':'link',
|
||||
'href':'#'+this.tid,
|
||||
'rel':this.tid,
|
||||
onclick:function(e){
|
||||
e.preventDefault();
|
||||
console.log('click', this);
|
||||
vn.state.opened = true;
|
||||
return false;
|
||||
}
|
||||
}, vn.children); // c'est quoi ce vn.children ?
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// ______ __
|
||||
// /_ __/__ _ __/ /_
|
||||
// / / / _ \| |/_/ __/
|
||||
// / / / __/> </ /_
|
||||
// /_/ \___/_/|_|\__/
|
||||
|
||||
// recusive function to record information of all subnodes
|
||||
function parseTextDom(nodes){
|
||||
var list = [];
|
||||
// loop through childNodes
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
var n = {};
|
||||
if(typeof nodes[i].localName != "undefined"){
|
||||
n.tag=nodes[i].localName;
|
||||
if (n.tag == 'p') {
|
||||
// replace p by div as we will insert other div in them
|
||||
n.tag = 'div';
|
||||
n.attrs = {'class':'paragraph'};
|
||||
}
|
||||
if (n.tag == 'a') {
|
||||
// record the href attribute for cross reference
|
||||
n.attrs = {'href':nodes[i].attributes.href.value};
|
||||
}
|
||||
if(nodes[i].childNodes.length){
|
||||
// again parse node's childs
|
||||
n.childs = parseTextDom(nodes[i].childNodes);
|
||||
}
|
||||
}else if (nodes[i].textContent.length > 1){
|
||||
// if node has no localName it is probably a #text node
|
||||
// we record it if it's not empty
|
||||
n.tag='#text';
|
||||
n.text=nodes[i].textContent;
|
||||
}
|
||||
// add the node to the list if it has a tag
|
||||
if(typeof n.tag != "undefined")
|
||||
list.push(n);
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
// recusive fucntion to generate mithril object from information recorded with parseTextDom()
|
||||
function populateTextDom(n,i){
|
||||
// console.log('populateTextDom : '+i,n);
|
||||
return n.tag == "#text"
|
||||
? m.trust(n.text)
|
||||
: m(
|
||||
n.tag != 'a' ? n.tag : _Link,
|
||||
typeof n.attrs != "undefined" ? n.attrs : {},
|
||||
typeof n.childs != "undefined"
|
||||
? n.childs.map(populateTextDom)
|
||||
: typeof n.text != "undefined"
|
||||
? m.trust(n.text)
|
||||
: null
|
||||
);
|
||||
}
|
||||
|
||||
var _Text = {
|
||||
id:null,
|
||||
text:"",
|
||||
texthtml:"",
|
||||
textdom:null,
|
||||
textchilds:[],
|
||||
parsetext: function(){
|
||||
// console.log('parsetext', this);
|
||||
// !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
|
||||
// convert markdown to html
|
||||
this.texthtml = markdown.render(this.text)
|
||||
// TODO: fixe number link text disapear [3](1d3) ( in 104d )
|
||||
// TODO: fixe parenthèse disparait _(par les Défin. [test 3](1d3) et [test 5](1d5))_ ( in 104d )
|
||||
// parse html string to virtual dom
|
||||
this.textdom = new DOMParser().parseFromString(this.texthtml, "text/html");
|
||||
// get the text nodes (avoid html document extra)
|
||||
this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
|
||||
},
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
this.text = vn.attrs.text;
|
||||
this.parsetext();
|
||||
},
|
||||
onbeforeupdate: function(vn,old){
|
||||
this.text = vn.attrs.text;
|
||||
this.parsetext();
|
||||
},
|
||||
view: function(vn){
|
||||
// console.log('_Text :: view : '+vn.attrs.slug, vn);
|
||||
return m('div',
|
||||
{'class':'text'},
|
||||
// loop through childNodes list generated by parseTextDom() in init
|
||||
this.textchilds.map(populateTextDom)
|
||||
); // /m.div.text
|
||||
} // view:
|
||||
}
|
||||
|
||||
// ______
|
||||
// / _/ /____ ____ ___
|
||||
// / // __/ _ \/ __ `__ \
|
||||
// _/ // /_/ __/ / / / / /
|
||||
// /___/\__/\___/_/ /_/ /_/
|
||||
var _Item = {
|
||||
id:null,
|
||||
part:null,
|
||||
type:null,
|
||||
nested:false,
|
||||
oninit: function(vn){
|
||||
// console.log('vn.attrs', vn.attrs);
|
||||
this.id = vn.attrs.id;
|
||||
this.type = vn.attrs.type;
|
||||
// vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
|
||||
this.text = vn.attrs.text;
|
||||
this.nested = vn.attrs.nested || false;
|
||||
},
|
||||
onbeforeupdate: function(vn, old){
|
||||
this.nested = vn.attrs.nested || false;
|
||||
this.type = vn.attrs.type;
|
||||
this.text = vn.attrs.text;
|
||||
},
|
||||
view: function(vn){
|
||||
return m("section", {
|
||||
'id':this.id,
|
||||
'class':'item'+(this.nested ? ' nested':'')
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h3", {
|
||||
// 'ref':vn.attrs.href,
|
||||
onclick: function(e){
|
||||
vn.state.active = vn.state.active ? 0 : 1;
|
||||
}
|
||||
}, this.type),
|
||||
// create text node
|
||||
m(_Text, {'text':this.text, 'id':this.id})
|
||||
]
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
// ______
|
||||
// / ____/___ ____ ____ ________
|
||||
// / __/ / __ \/ __ \/ __ \/ ___/ _ \
|
||||
// / /___/ / / / /_/ / / / / /__/ __/
|
||||
// /_____/_/ /_/\____/_/ /_/\___/\___/
|
||||
var _Enonce = {
|
||||
partid:null,
|
||||
id:null,
|
||||
title:null,
|
||||
text:null,
|
||||
nested:false,
|
||||
childs:[],
|
||||
oninit:function(vn){
|
||||
// // console.log('Enonce on init', vn);
|
||||
this.partid = vn.attrs.partid;
|
||||
this.id = vn.attrs.id;
|
||||
this.title = vn.attrs.title;
|
||||
this.text = vn.attrs.text;
|
||||
this.childs = vn.attrs.childs;
|
||||
this.nested = vn.attrs.nested || false;
|
||||
},
|
||||
onbeforeupdate:function(vn, old) {
|
||||
// console.log(vn.attrs.childs);
|
||||
this.title = vn.attrs.title;
|
||||
this.text = vn.attrs.text;
|
||||
this.childs = vn.attrs.childs;
|
||||
this.nested = vn.attrs.nested || false;
|
||||
// if(vn.attrs.id == '1d1') console.log('_Enonce UPDATE, text :', vn.attrs.text);
|
||||
},
|
||||
view: function(vn){
|
||||
// if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
|
||||
return m("section", {
|
||||
'id' :this.id,
|
||||
'class' :'enonce'+(this.nested ? ' nested':'')
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h2", {}, this.title),
|
||||
// create text node
|
||||
m(_Text, {'text':this.text, 'id':this.id}),
|
||||
// addd children
|
||||
this.childs.map(function(c){
|
||||
return m(_Item, c)
|
||||
})
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
// ____ __
|
||||
// / __ \____ ______/ /_
|
||||
// / /_/ / __ `/ ___/ __/
|
||||
// / ____/ /_/ / / / /_
|
||||
// /_/ \__,_/_/ \__/
|
||||
var _Part = {
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
this.title = vn.attrs.title;
|
||||
this.enonces = vn.attrs.enonces;
|
||||
},
|
||||
onbeforeupdate: function(vn, old){
|
||||
// console.log('_Part, onbeforeupdate old',old);
|
||||
this.title = vn.attrs.title;
|
||||
this.enonces = vn.attrs.enonces;
|
||||
},
|
||||
view: function(vn){
|
||||
// console.log(vn.attrs.enonces);
|
||||
return m("section", {
|
||||
'id' :this.id,
|
||||
'class' :'part'
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h1", {'class':'part'}, this.title),
|
||||
// create text node
|
||||
this.enonces.map(function(e){
|
||||
// console.log(e.text);
|
||||
return m(_Enonce, Object.assign({"partid":this.id},e))
|
||||
})
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// ______
|
||||
// /_ __/_______ ___
|
||||
// / / / ___/ _ \/ _ \
|
||||
// / / / / / __/ __/
|
||||
// /_/ /_/ \___/\___/
|
||||
module.exports = {
|
||||
view: function(){
|
||||
console.log('_Tree view', _dbs.lang);
|
||||
return [
|
||||
m(_Header),
|
||||
m('main', {id:"content"}, _dbs.data[_dbs.lang].map(function(p){
|
||||
// console.log("MAP _dbs", p);
|
||||
return m(_Part,p);
|
||||
})
|
||||
),
|
||||
m(_Footer)
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user