bachir/app.ethica-spinoza.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved route strategy (url path), headers menu are working

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-10-15 17:30:42 +02:00
parent 72602b3e12
commit e77ed37c76
15 changed files with 1196 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/modules/dbs.js
+5 -5
View File
@@ -9,10 +9,10 @@
module.exports = {
lang:'fr',
langs:[
{'lc':'lat', 'label':'lat', 'db':'0-LAT-ethicadb.json'},
{'lc':'fr', 'label':'fr', 'db':'2-Appuhn-FR-ethicadb.json'},
{'lc':'bra', 'label':'bra', 'db':'ethica-bresilen.json'},
{'lc':'en', 'label':'en', 'db':'3-Elwes-EN-ethicadb.json'}
{'lc':'lat', 'label':'Latin', 'db':'0-LAT-ethicadb.json'},
{'lc':'fr', 'label':'Français', 'db':'2-Appuhn-FR-ethicadb.json'},
{'lc':'bra', 'label':'Brazilian', 'db':'ethica-bresilen.json'},
{'lc':'en', 'label':'English', 'db':'3-Elwes-EN-ethicadb.json'}
],
data:[],
loaded_dbs:0,
@@ -21,7 +21,7 @@ module.exports = {
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)
this.loadJSON(this.langs[i].lc, '/assets/jsondb/'+this.langs[i].db, callback)
}
},
loadJSON: function(lc, file, callback){
assets/modules/header.js
+76 -25
View File
@@ -1,6 +1,8 @@
var m = require('mithril');
var _dbs = require('./dbs');
var markdown = require('markdown-it')()
.use(require('markdown-it-footnote'));
// __ __ __
@@ -12,7 +14,11 @@ module.exports = {
view: function(vn){
return m('header', [
m('h1', 'Ethica'),
m('nav', {'id':"menus"}, [
// m('nav', {'id':'parts-nav'}, [
//
// ]),
m('div', {'id':"menus"}, [
m(_PartsNav),
m(_RouteMenu),
m(_LangMenu)
])
@@ -20,15 +26,55 @@ module.exports = {
}
}
// ____ __
// / __ \____ ______/ /______ ____ ___ ___ ____ __ __
// / /_/ / __ `/ ___/ __/ ___/ / __ `__ \/ _ \/ __ \/ / / /
// / ____/ /_/ / / / /_(__ ) / / / / / / __/ / / / /_/ /
// /_/ \__,_/_/ \__/____/ /_/ /_/ /_/\___/_/ /_/\__,_/
var _PartsNav = {
view: function(vn){
var lang = m.route.param('lang');
console.log('partsmenu', lang);
return m('nav', {id:'parts-nav'}, [
// TODO: replaced labels with localized content
m('h3', 'Parts'),
m('ul', _dbs.data[lang].map(function(p){
// console.log("anchors, part", p);
return m('li', [
m('a', {'href':'#'+p.id}, m.trust(markdown.renderInline(p.title)))
]);
})
)
]);
}
};
// ____ __
// / __ \____ __ __/ /____ ____ ___ ___ ____ __ __
// / /_/ / __ \/ / / / __/ _ \ / __ `__ \/ _ \/ __ \/ / / /
// / _, _/ /_/ / /_/ / /_/ __/ / / / / / / __/ / / / /_/ /
// /_/ |_|\____/\__,_/\__/\___/ /_/ /_/ /_/\___/_/ /_/\__,_/
var _RouteMenu = {
view: function(){
// create ul dom
return m('ul', {id:"routes"}, [
m('li', m('a', {'href':'#!/inline'}, "inline")),
m('li', m('a', {'href':'#!/tree'}, "tree")),
]
);
var lang = m.route.param('lang');
var path = m.route.get().match(/^(\/[^\/]+)(\/[^\/|#]+)(.*)$/);
console.log('Route menu Path', path);
return m('nav', {id:'routes'}, [
// TODO: replaced labels with localized content
m('h3', 'Routes'),
m('ul', [
m('li', m('a', {
'href':'/'+lang+'/inline'+path[3],
oncreate : m.route.link,
onupdate : m.route.link
}, "inline")),
m('li', m('a', {
'href':'/'+lang+'/tree'+path[3],
oncreate : m.route.link,
onupdate : m.route.link
}, "tree")),
])
]);
}
}
@@ -40,31 +86,36 @@ var _RouteMenu = {
// /____/
var _LangMenu = {
view: function(){
var path = m.route.get().match(/^\/[^\/]+(.+)$/);
// console.log('Lang menu Path', path);
// create ul dom
return m('ul', {id:"languages"}, _dbs.langs.map(function(lang){
return m('nav', {id:'languages'}, [
// TODO: replaced labels with localized content
m('h3', 'languages'),
m('ul', _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;
}
'href':'/'+lang.lc+path[1]
// 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)
);
})
);
}))
]);
}
}
assets/modules/inline.js
+21 -10
View File
@@ -8,6 +8,7 @@ var markdown = require('markdown-it')()
var _dbs = require('./dbs');
var _Header = require('./header');
var _Footer = require('./footer');
var _Ui = require('./ui.js');
// __ _ __
// / / (_)___ / /__
@@ -134,7 +135,7 @@ var _Text = {
},
oninit: function(vn){
this.id = vn.attrs.id;
this.text = vn.attrs.text;
this.text = vn.attrs.text || "";
this.parsetext();
},
onbeforeupdate: function(vn,old){
@@ -212,7 +213,7 @@ var _Enonce = {
this.id = vn.attrs.id;
this.title = vn.attrs.title;
this.text = vn.attrs.text;
this.childs = vn.attrs.childs;
this.childs = vn.attrs.childs || [];
this.nested = vn.attrs.nested || false;
},
onbeforeupdate:function(vn, old) {
@@ -250,12 +251,12 @@ var _Enonce = {
var _Part = {
oninit: function(vn){
this.id = vn.attrs.id;
this.title = vn.attrs.title;
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.title = vn.attrs.title || '';
this.enonces = vn.attrs.enonces;
},
view: function(vn){
@@ -266,18 +267,20 @@ var _Part = {
},
[
// create title node
m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
// create text node
this.enonces.map(function(e){
console.log(e.type);
// console.log(e.type);
// var title = e.title || '';
switch (e.type) {
case "title":
// handle titles
// console.log('title');
return m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)));
break;
case "filet":
// handle filets
// console.log('filet');
return m("h4", {'class':'filet'}, m.trust(markdown.renderInline(e.title)));
break;
default:
@@ -296,11 +299,18 @@ var _Part = {
// _/ // / / / /___/ / / / / __/
// /___/_/ /_/_____/_/_/ /_/\___/
module.exports = {
view: function(){
console.log('_Inline view', _dbs.lang);
// oninit : function(vn){
// this.lang = vn.attrs.lang;
// },
oncreate: function(vn){
document.body.classList.add('inline');
_Ui.init();
},
view: function(vn){
console.log('_Inline view', vn.attrs.lang);
return [
m(_Header),
m('main', {id:"content", 'class':'inline'}, _dbs.data[_dbs.lang].map(function(p){
m('main', {id:"content", 'class':'inline'}, _dbs.data[vn.attrs.lang].map(function(p){
// console.log("MAP _dbs", p);
return m(_Part,p);
})
@@ -308,4 +318,5 @@ module.exports = {
m(_Footer)
]
}
}
assets/modules/tree.js
+12 -6
View File
@@ -8,8 +8,7 @@ var markdown = require('markdown-it')()
var _dbs = require('./dbs');
var _Header = require('./header');
var _Footer = require('./footer');
// var _lang = require('../main.js')._langs;
var _Ui = require('./ui.js');
// ____ __
// / __ \____ / /_
@@ -298,7 +297,7 @@ var _Part = {
},
[
// create title node
m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
// create text node
this.enonces.map(function(e){
// console.log(e.text);
@@ -329,11 +328,18 @@ var _Part = {
// / / / / / __/ __/
// /_/ /_/ \___/\___/
module.exports = {
view: function(){
// console.log('_Tree view', _dbs.lang);
// oninit : function(vn){
// this.lang = vn.attrs.lang;
// },
oncreate: function(vn){
document.body.classList.add('tree');
_Ui.init();
},
view: function(vn){
console.log('_Tree view', vn.attrs.lang);
return [
m(_Header),
m('main', {id:"content", 'class':'tree'}, _dbs.data[_dbs.lang].map(function(p){
m('main', {id:"content", 'class':'tree'}, _dbs.data[vn.attrs.lang].map(function(p){
return m(_Part,p);
})
),
assets/modules/ui.js
+114
View File
@@ -0,0 +1,114 @@
/**
* @Author: Bachir Soussi Chiadmi <bach>
* @Date: 12-09-2017
* @Email: bachir@figureslibres.io
* @Last modified by: bach
* @Last modified time: 12-09-2017
* @License: GPL-V3
*/
// var $ = require('jquery');
// https://plainjs.com
// jQuery(document).ready(function($) {
// console.log('Hello Jquery');
// var $window;
var init = function(){
console.log('UI init');
// $window = $(window);
// _____ __ _ __ __ _ __ __
// / ___// /_(_)____/ /____ __ / /_(_) /_/ /__
// \__ \/ __/ / ___/ //_/ / / / / __/ / __/ / _ \
// ___/ / /_/ / /__/ ,< / /_/ / / /_/ / /_/ / __/
// /____/\__/_/\___/_/|_|\__, / \__/_/\__/_/\___/
// /____/
// https://codepen.io/chrissp26/pen/gBrdo?editors=0010
// var header_height = $('header').height();
var header_height = document.getElementsByTagName('header')[0].clientHeight;
console.log(header_height);
// var $sticky_clone_wrapper = $('<div>').addClass('sticky-clone-wrapper').appendTo('body');
var sticky_clone_wrapper = document.createElement('div');
sticky_clone_wrapper.classList.add('sticky-clone-wrapper');
document.body.append(sticky_clone_wrapper);
//
// var $stickies = $('h1.part-title').addClass('sticky').each(function(i){
// var $sticky = $(this);
// $sticky
// .data('originalPosition', $sticky.offset().top)
// .data('originalHeight', $sticky.outerHeight());
// });
var stickies = new Array();
Array.from(document.querySelectorAll('h1.part-title')).forEach(function(e){
// console.log('sticky', e);
e._part = e.getAttribute('part');
stickies.push(e)
});
console.log('stickies', stickies);
//
// var OnScroll = function(event){
// var $last_sticky;
// $stickies.each(function(i){
// var $sticky = $(this);
// var pos = $sticky.data('originalPosition');
// if(pos < $window.scrollTop()+header_height){
//
// }
// // if(i == 1){
// // console.log(pos +" | "+$window.scrollTop());
// // }
// // if(pos < $window.scrollTop()+header_height){
// // if(!$sticky.is('.sticked')){
// // $sticky.addClass('sticked').clone().appendTo($sticky_clone_wrapper.empty());
// // }
// // }else{
// // if($sticky.is('.sticked')){
// // $sticky.removeClass('sticked');
// // $('.part-title[part="'+$sticky.attr('part')+'"]', $sticky_clone_wrapper).remove();
// // }
// // }
// });
// };
var last_sticky = "", sticked_sticky, clone;
var OnScroll = function(event){
// console.log('on scrool', event);
sticked_sticky = false;
for (var i = stickies.length-1; i >= 0; i--) {
if(stickies[i].getBoundingClientRect().top < header_height){
sticked_sticky = stickies[i];
break;
}
}
if (sticked_sticky) {
// console.log('sticked_sticky', sticked_sticky._part);
if(last_sticky !== sticked_sticky._part){
// console.log('new sticky', last_sticky);
// fill sticky_clone_wrapper
clone = sticked_sticky.cloneNode(true);
sticky_clone_wrapper.innerHTML = '';
sticky_clone_wrapper.appendChild(clone);
last_sticky = sticked_sticky._part;
}
}else{
// empty sticky_clone_wrapper
sticky_clone_wrapper.innerHTML = '';
}
};
//
// $window.on('scroll', OnScroll);
// console.log('window', window);
window.onscroll = OnScroll;
}
// });
module.exports = {
init : init
}