123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- /**
- * @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');
- 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 _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);
|