ModeText.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  1. var m = require('mithril');
  2. // https://github.com/markdown-it/markdown-it
  3. var markdown = require('markdown-it')()
  4. .use(require('markdown-it-footnote'));
  5. var _dbs = require('./dbs');
  6. // var _Header = require('./header');
  7. // var _Footer = require('./footer');
  8. var _Ui = require('./ui.js');
  9. // __ _ __
  10. // / / (_)___ / /__
  11. // / / / / __ \/ //_/
  12. // / /___/ / / / / ,<
  13. // /_____/_/_/ /_/_/|_|
  14. var _Link = {
  15. parent_id:null,
  16. tid:"",
  17. opened:false,
  18. oninit(vn){
  19. // console.log("INIT LINK : vn", vn);
  20. // define target id
  21. this.tid = vn.attrs.href;
  22. },
  23. onbeforeupdate(vn){
  24. this.tid = vn.attrs.href;
  25. },
  26. view(vn){
  27. // console.log(vn.attrs);
  28. this.tid_known =
  29. typeof vn.attrs.lang === 'undefined'
  30. ? false
  31. : typeof _dbs.data_byid[vn.attrs.lang][this.tid] === 'undefined'
  32. ? false
  33. : true;
  34. if (!this.tid_known) {
  35. // console.log(`!! in ${this.id}, target id ${this.tid} is unkonwn !!`);
  36. }
  37. if(this.opened && this.tid_known){
  38. console.log('link vn.state', vn.state);
  39. // traget object
  40. this.tob = Object.assign({"nested":true},_dbs.data_byid[vn.attrs.lang][this.tid]);
  41. // this.tob = Object.assign({'lang':vn.attrs.lang}, this.tob);
  42. console.log('this.tob',this.tob);
  43. return m('div', {'class':'opened-link'},
  44. [
  45. m('span', {'class':"link text"}, vn.children),
  46. m('div', {
  47. 'class':'close-link-btn',
  48. onclick(e){
  49. // e.preventDefault();
  50. console.log('click close btn', this);
  51. vn.state.opened = false;
  52. // return false;
  53. }
  54. }),//, m('span', m.trust("&#128473;"))),
  55. typeof this.tob.childs !== "undefined"
  56. ? m(_Enonce, this.tob)
  57. : m(_Item, this.tob)
  58. ]
  59. );
  60. }else{
  61. // console.log(vn);
  62. return m('a', {
  63. 'class':'link',
  64. 'href':'#'+this.tid,
  65. 'rel':this.tid,
  66. onclick(e){
  67. e.preventDefault();
  68. console.log('click', this);
  69. vn.state.opened = true;
  70. return false;
  71. }
  72. }, vn.children);
  73. }
  74. }
  75. }
  76. // ______ __
  77. // /_ __/__ _ __/ /_
  78. // / / / _ \| |/_/ __/
  79. // / / / __/> </ /_
  80. // /_/ \___/_/|_|\__/
  81. // recusive function to record information of all subnodes
  82. function parseTextDom(nodes){
  83. var list = [];
  84. // loop through childNodes
  85. for (var i = 0; i < nodes.length; i++) {
  86. var n = {};
  87. if(typeof nodes[i].localName != "undefined"){
  88. n.tag=nodes[i].localName;
  89. if (n.tag == 'p') {
  90. // replace p by div as we will insert other div in them
  91. n.tag = 'div';
  92. n.attrs = {'class':'paragraph'};
  93. }
  94. if (n.tag == 'a') {
  95. // record the href attribute for cross reference
  96. n.attrs = {'href':nodes[i].attributes.href.value};
  97. }
  98. if (n.tag == 'img') {
  99. // record the href attribute for cross reference
  100. n.attrs = {
  101. 'src':nodes[i].attributes.src.value,
  102. 'alt':nodes[i].attributes.alt.value
  103. };
  104. }
  105. if(nodes[i].childNodes.length){
  106. // again parse node's childs
  107. n.childs = parseTextDom(nodes[i].childNodes);
  108. }
  109. }else if (nodes[i].textContent.length > 0){
  110. // if node has no localName it is probably a #text node
  111. // we record it if it's not empty
  112. n.tag='#text';
  113. n.text=nodes[i].textContent;
  114. }
  115. // add the node to the list if it has a tag
  116. if(typeof n.tag != "undefined")
  117. list.push(n);
  118. }
  119. return list;
  120. }
  121. // recusive fucntion to generate mithril object from information recorded with parseTextDom()
  122. function populateTextDom(n){
  123. // console.log('populateTextDom : '+i,n);
  124. return n.tag == "#text"
  125. ? m.trust(n.text)
  126. : m(
  127. n.tag != 'a' ? n.tag : _Link,
  128. typeof n.attrs != "undefined" ? Object.assign({"lang":this.attrs.lang},n.attrs) : {},
  129. typeof n.childs != "undefined"
  130. ? n.childs.map(populateTextDom, this)
  131. : typeof n.text != "undefined"
  132. ? m.trust(n.text)
  133. : null
  134. );
  135. }
  136. var _Text = {
  137. id:null,
  138. text:"",
  139. texthtml:"",
  140. textdom:null,
  141. textchilds:[],
  142. parsetext(vn){
  143. // if(vn.attrs.nested){debugger;}
  144. // console.log('parsetext', this);
  145. // !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
  146. // convert markdown to html
  147. // if(typeof this.text === "undefined"){
  148. // debugger;
  149. // }
  150. this.texthtml = markdown.render(this.text);
  151. // convert html string to virtual dom
  152. this.textdom = new DOMParser().parseFromString(this.texthtml, "text/html");
  153. // get the text nodes (avoid html document extra) and apply some transformations
  154. this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
  155. },
  156. oninit(vn){
  157. // if(vn.attrs.nested){debugger;}
  158. this.id = vn.attrs.id;
  159. this.text = vn.attrs.text || "";
  160. // if(vn.attrs.nested){debugger;}
  161. this.parsetext(vn);
  162. },
  163. onbeforeupdate(vn,old){
  164. // if(vn.attrs.nested){debugger;}
  165. this.text = vn.attrs.text;
  166. this.parsetext(vn);
  167. },
  168. view(vn){
  169. // console.log('_Text :: view : '+vn.attrs.slug, vn);
  170. return m('div',
  171. {'class':'text'},
  172. // loop through childNodes list generated by parseTextDom() in init
  173. // TODO : pass lang to populateTextDom
  174. this.textchilds.map(populateTextDom, vn)
  175. ); // /m.div.text
  176. } // view:
  177. }
  178. // ______
  179. // / _/ /____ ____ ___
  180. // / // __/ _ \/ __ `__ \
  181. // _/ // /_/ __/ / / / / /
  182. // /___/\__/\___/_/ /_/ /_/
  183. var _Item = {
  184. id:null,
  185. part:null,
  186. type:null,
  187. nested:false,
  188. oninit(vn){
  189. // if(vn.attrs.nested){debugger;}
  190. // TODO: what to do with items without text ? as type title for example
  191. // if(typeof vn.attrs.text === 'undefined'){debugger;}
  192. // console.log('vn.attrs', vn.attrs);
  193. this.id = vn.attrs.id;
  194. this.type = vn.attrs.type;
  195. // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
  196. this.text = vn.attrs.text;
  197. this.nested = vn.attrs.nested || false;
  198. this.dottype = vn.attrs.dottype || null;
  199. },
  200. onbeforeupdate(vn, old){
  201. this.nested = vn.attrs.nested || false;
  202. this.type = vn.attrs.type;
  203. this.text = vn.attrs.text;
  204. },
  205. view(vn){
  206. // if(this.id == "340c2"){
  207. // console.log(`${this.id} vn.attrs `,vn.attrs);
  208. // }
  209. return m("section", {
  210. 'id':this.id,
  211. // 'class':'item'+(this.nested ? ' nested':'')
  212. 'class' :`item${this.nested ? ' nested':''} ${this.dottype}`
  213. },
  214. // filter by type if active filter
  215. !_dbs.active_type_filter || _dbs.active_type_filter == vn.attrs.dottype || vn.attrs.nested
  216. ? [
  217. // create title node (only if not nested)
  218. !this.nested
  219. ? m("h3", {
  220. // 'ref':vn.attrs.href,
  221. // onclick(e){ WHAT IS THIS STATE ACTIVE ???
  222. // vn.state.active = vn.state.active ? 0 : 1;
  223. // }
  224. }, m.trust(markdown.renderInline(this.type)))
  225. : null,
  226. // create text node
  227. typeof vn.attrs.text !== "undefined"
  228. ? m(_Text, {'text':this.text, 'id':this.id, 'lang':vn.attrs.lang})
  229. : null,
  230. // add children (only if not nested)
  231. // typeof vn.attrs.childs !== 'undefined' && !this.nested
  232. // ? vn.attrs.childs.map(c => { return m(_Item, c); })
  233. // : null
  234. ]
  235. :null
  236. )
  237. }
  238. };
  239. // ______
  240. // / ____/___ ____ ____ ________
  241. // / __/ / __ \/ __ \/ __ \/ ___/ _ \
  242. // / /___/ / / / /_/ / / / / /__/ __/
  243. // /_____/_/ /_/\____/_/ /_/\___/\___/
  244. var _Enonce = {
  245. partid:null,
  246. // id:null,
  247. title:null,
  248. // text:null,
  249. // nested:false,
  250. // childs:[],
  251. oninit(vn){
  252. // if(vn.attrs.nested){debugger;}
  253. // // console.log('Enonce on init', vn);
  254. this.partid = vn.attrs.partid;
  255. // this.id = vn.attrs.id;
  256. this.title = vn.attrs.title || "";
  257. // this.text = vn.attrs.text;
  258. // this.childs = vn.attrs.childs || [];
  259. // this.nested = vn.attrs.nested || false;
  260. this.dottype = vn.attrs.dottype || "no-dottype";
  261. },
  262. onbeforeupdate(vn, old) {
  263. // console.log(vn.attrs.childs);
  264. this.title = vn.attrs.title || "";
  265. // this.text = vn.attrs.text;
  266. // this.childs = vn.attrs.childs || [];
  267. // this.nested = vn.attrs.nested || false;
  268. // if(vn.attrs.id == '1d1') console.log('_Enonce UPDATE, text :', vn.attrs.text);
  269. },
  270. view(vn){
  271. // if(vn.attrs.nested){
  272. // console.log('ennonce vn.attrs', vn.attrs);
  273. // }
  274. return m("section", {
  275. 'id' :vn.attrs.id,
  276. 'class' :`enonce${vn.attrs.nested ? ' nested':''} ${this.dottype}`
  277. },
  278. [
  279. // filter by type if active filter (but let map on children)
  280. !_dbs.active_type_filter || _dbs.active_type_filter == vn.attrs.dottype
  281. // create title node (only if not nested)
  282. ? !vn.attrs.nested ? m("h2", {}, m.trust(markdown.renderInline(this.title))) : null
  283. : null,
  284. !_dbs.active_type_filter || _dbs.active_type_filter == vn.attrs.dottype || vn.attrs.nested
  285. // create text node
  286. ? m(_Text, {'text':vn.attrs.text, 'id':vn.attrs.id, 'nested':vn.attrs.nested})
  287. : null,
  288. // add children (only if not nested)
  289. typeof vn.attrs.childs !== 'undefined' && !vn.attrs.nested
  290. ? vn.attrs.childs.map(c => {
  291. c.lang = vn.attrs.lang;
  292. return m(_Item, c);
  293. })
  294. : null
  295. ])
  296. }
  297. }
  298. // ____ __
  299. // / __ \____ ______/ /_
  300. // / /_/ / __ `/ ___/ __/
  301. // / ____/ /_/ / / / /_
  302. // /_/ \__,_/_/ \__/
  303. var _Part = {
  304. oninit(vn){
  305. // this.id = vn.attrs.id;
  306. // this.title = vn.attrs.title || '';
  307. // this.enonces = vn.attrs.enonces;
  308. },
  309. onbeforeupdate(vn, old){
  310. // console.log('_Part, onbeforeupdate old',old);
  311. // this.title = vn.attrs.title || '';
  312. // this.enonces = vn.attrs.enonces;
  313. },
  314. view(vn){
  315. // console.log("part enonces", vn.attrs.enonces);
  316. return m("section", {
  317. 'id' :vn.attrs.id,
  318. 'class' :'part'
  319. },
  320. [
  321. // create title node
  322. m("h1", {'class':'part-title', 'part':vn.attrs.id}, m.trust(markdown.renderInline(vn.attrs.title))),
  323. // create text node
  324. vn.attrs.enonces.map(e => {
  325. // console.log(e.title +" - "+ e.type);
  326. // var title = e.title || '';
  327. switch (e.type) {
  328. case "title":
  329. // handle titles
  330. // console.log('title');
  331. return !_dbs.active_type_filter
  332. ? m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)))
  333. : null ;
  334. break;
  335. case "filet":
  336. // handle filets
  337. // console.log('filet');
  338. return m("h4", {'class':'filet'}, m.trust(markdown.renderInline(e.title)));
  339. break;
  340. default:
  341. // or build structure
  342. e.lang = vn.attrs.lang;
  343. return m(_Enonce, Object.assign({"partid":vn.attrs.id},e));
  344. }
  345. })
  346. ]
  347. )
  348. }
  349. }
  350. // ____ __
  351. // / _/___ / /__________
  352. // / // __ \/ __/ ___/ __ \
  353. // _/ // / / / /_/ / / /_/ /
  354. // /___/_/ /_/\__/_/ \____/
  355. var _Intro = {
  356. oninit(vn){
  357. // console.log('_Intro : oninit : vn', vn);
  358. this.id = vn.attrs.id;
  359. this.text = vn.attrs.text || '';
  360. },
  361. onbeforeupdate(vn, old){
  362. this.id = vn.attrs.id;
  363. this.text = vn.attrs.text || '';
  364. },
  365. view(vn){
  366. return m("section", {'class':'intro'}, m("p",m.trust(markdown.renderInline(this.text))));
  367. }
  368. }
  369. // ______ __
  370. // /_ __/__ _ __/ /_
  371. // / / / _ \| |/_/ __/
  372. // / / / __/> </ /_
  373. // /_/ \___/_/|_|\__/
  374. module.exports = {
  375. // oninit(vn){
  376. // // this.lang = vn.attrs.lang;
  377. // console.log('ModeText oninit : lang', vn.attrs.lang);
  378. // // i18next.changeLanguage(vn.attrs.lang);
  379. // },
  380. oncreate(vn){
  381. document.body.classList.add('mode-text');
  382. _Ui.init();
  383. },
  384. // onbeforeupdate(vn, old){
  385. // console.log('ModeText onbeforeupdate : lang', vn.attrs.lang);
  386. // // i18next.changeLanguage(vn.attrs.lang);
  387. // },
  388. view(vn){
  389. // console.log('_ModeText view', vn.attrs.lang);
  390. console.log('_dbs.active_type_filter : ', _dbs.active_type_filter);
  391. return m('main', {id:"content", 'class':'mode-text'}, _dbs.data[vn.attrs.lang].map((p) => {
  392. // console.log("MAP _dbs", p);
  393. p.lang = vn.attrs.lang;
  394. if(p.id == 'intro'){
  395. return m(_Intro,p);
  396. }else{
  397. return m(_Part,p);
  398. }
  399. })
  400. );
  401. }
  402. }