ModeText.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  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. tid:"",
  16. opened:false,
  17. oninit(vn){
  18. // console.log("INIT LINK : vn", vn);
  19. // define target id
  20. this.tid = vn.attrs.href;
  21. },
  22. onbeforeupdate(vn){
  23. this.tid = vn.attrs.href;
  24. },
  25. view(vn){
  26. this.tid_known = typeof _dbs.data_byid[_dbs.lang][this.tid] === 'undefined' ? false : true;
  27. if (!this.tid_known) {
  28. console.log('!! target id '+this.tid+' unkonwn !!');
  29. }
  30. if(this.opened && this.tid_known){
  31. // console.log('this.tid', vn.state);
  32. return m('div', {'class':'opened-link'},
  33. [
  34. m('span', {'class':"link text"}, vn.children),
  35. typeof _dbs.data_byid[_dbs.lang][this.tid].childs != "undefined"
  36. ? m(_Enonce, _dbs.data_byid[_dbs.lang][this.tid])
  37. : m(_Item, _dbs.data_byid[_dbs.lang][this.tid])
  38. ]
  39. );
  40. }else{
  41. // console.log(vn);
  42. return m('a', {
  43. 'class':'link',
  44. 'href':'#'+this.tid,
  45. 'rel':this.tid,
  46. onclick(e){
  47. e.preventDefault();
  48. console.log('click', this);
  49. vn.state.opened = true;
  50. return false;
  51. }
  52. }, vn.children); // c'est quoi ce vn.children ?
  53. }
  54. }
  55. }
  56. // ______ __
  57. // /_ __/__ _ __/ /_
  58. // / / / _ \| |/_/ __/
  59. // / / / __/> </ /_
  60. // /_/ \___/_/|_|\__/
  61. // recusive function to record information of all subnodes
  62. function parseTextDom(nodes){
  63. var list = [];
  64. // loop through childNodes
  65. for (var i = 0; i < nodes.length; i++) {
  66. var n = {};
  67. if(typeof nodes[i].localName != "undefined"){
  68. n.tag=nodes[i].localName;
  69. if (n.tag == 'p') {
  70. // replace p by div as we will insert other div in them
  71. n.tag = 'div';
  72. n.attrs = {'class':'paragraph'};
  73. }
  74. if (n.tag == 'a') {
  75. // record the href attribute for cross reference
  76. n.attrs = {'href':nodes[i].attributes.href.value};
  77. }
  78. if (n.tag == 'img') {
  79. // record the href attribute for cross reference
  80. n.attrs = {
  81. 'src':nodes[i].attributes.src.value,
  82. 'alt':nodes[i].attributes.alt.value
  83. };
  84. }
  85. if(nodes[i].childNodes.length){
  86. // again parse node's childs
  87. n.childs = parseTextDom(nodes[i].childNodes);
  88. }
  89. }else if (nodes[i].textContent.length > 1){
  90. // if node has no localName it is probably a #text node
  91. // we record it if it's not empty
  92. n.tag='#text';
  93. n.text=nodes[i].textContent;
  94. }
  95. // add the node to the list if it has a tag
  96. if(typeof n.tag != "undefined")
  97. list.push(n);
  98. }
  99. return list;
  100. }
  101. // recusive fucntion to generate mithril object from information recorded with parseTextDom()
  102. function populateTextDom(n,i){
  103. // console.log('populateTextDom : '+i,n);
  104. return n.tag == "#text"
  105. ? m.trust(n.text)
  106. : m(
  107. n.tag != 'a' ? n.tag : _Link,
  108. typeof n.attrs != "undefined" ? n.attrs : {},
  109. typeof n.childs != "undefined"
  110. ? n.childs.map(populateTextDom)
  111. : typeof n.text != "undefined"
  112. ? m.trust(n.text)
  113. : null
  114. );
  115. }
  116. var _Text = {
  117. id:null,
  118. text:"",
  119. texthtml:"",
  120. textdom:null,
  121. textchilds:[],
  122. parsetext(){
  123. // console.log('parsetext', this);
  124. // !! we need to convert markdown to html here because parseTextDom() is recursive through nodes tree
  125. // convert markdown to html
  126. this.texthtml = markdown.render(this.text)
  127. // TODO: fixe number link text disapear [3](1d3) ( in 104d )
  128. // TODO: fixe parenthèse disparait _(par les Défin. [test 3](1d3) et [test 5](1d5))_ ( in 104d )
  129. // parse html string to virtual dom
  130. this.textdom = new DOMParser().parseFromString(this.texthtml, "text/html");
  131. // get the text nodes (avoid html document extra)
  132. this.textchilds = parseTextDom(this.textdom.getElementsByTagName('body')[0].childNodes);
  133. if(this.id == "115sc"){
  134. console.log(this.textchilds);
  135. }
  136. },
  137. oninit(vn){
  138. this.id = vn.attrs.id;
  139. this.text = vn.attrs.text || "";
  140. this.parsetext();
  141. },
  142. onbeforeupdate(vn,old){
  143. this.text = vn.attrs.text;
  144. this.parsetext();
  145. },
  146. view(vn){
  147. // console.log('_Text :: view : '+vn.attrs.slug, vn);
  148. return m('div',
  149. {'class':'text'},
  150. // loop through childNodes list generated by parseTextDom() in init
  151. this.textchilds.map(populateTextDom)
  152. ); // /m.div.text
  153. } // view:
  154. }
  155. // ______
  156. // / _/ /____ ____ ___
  157. // / // __/ _ \/ __ `__ \
  158. // _/ // /_/ __/ / / / / /
  159. // /___/\__/\___/_/ /_/ /_/
  160. var _Item = {
  161. id:null,
  162. part:null,
  163. type:null,
  164. nested:false,
  165. oninit(vn){
  166. // console.log('vn.attrs', vn.attrs);
  167. this.id = vn.attrs.id;
  168. this.type = vn.attrs.type;
  169. // vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
  170. this.text = vn.attrs.text;
  171. this.nested = vn.attrs.nested || false;
  172. },
  173. onbeforeupdate(vn, old){
  174. this.nested = vn.attrs.nested || false;
  175. this.type = vn.attrs.type;
  176. this.text = vn.attrs.text;
  177. },
  178. view(vn){
  179. return m("section", {
  180. 'id':this.id,
  181. 'class':'item'+(this.nested ? ' nested':'')
  182. },
  183. [
  184. // create title node
  185. m("h3", {
  186. // 'ref':vn.attrs.href,
  187. onclick(e){
  188. vn.state.active = vn.state.active ? 0 : 1;
  189. }
  190. }, m.trust(markdown.renderInline(this.type))),
  191. // create text node
  192. m(_Text, {'text':this.text, 'id':this.id})
  193. ]
  194. )
  195. }
  196. };
  197. // ______
  198. // / ____/___ ____ ____ ________
  199. // / __/ / __ \/ __ \/ __ \/ ___/ _ \
  200. // / /___/ / / / /_/ / / / / /__/ __/
  201. // /_____/_/ /_/\____/_/ /_/\___/\___/
  202. var _Enonce = {
  203. partid:null,
  204. id:null,
  205. title:null,
  206. text:null,
  207. nested:false,
  208. childs:[],
  209. oninit(vn){
  210. // // console.log('Enonce on init', vn);
  211. this.partid = vn.attrs.partid;
  212. this.id = vn.attrs.id;
  213. this.title = vn.attrs.title || "";
  214. this.text = vn.attrs.text;
  215. this.childs = vn.attrs.childs || [];
  216. this.nested = vn.attrs.nested || false;
  217. },
  218. onbeforeupdate(vn, old) {
  219. // console.log(vn.attrs.childs);
  220. this.title = vn.attrs.title || "";
  221. this.text = vn.attrs.text;
  222. this.childs = vn.attrs.childs || [];
  223. this.nested = vn.attrs.nested || false;
  224. // if(vn.attrs.id == '1d1') console.log('_Enonce UPDATE, text :', vn.attrs.text);
  225. },
  226. view(vn){
  227. // if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
  228. return m("section", {
  229. 'id' :this.id,
  230. 'class' :'enonce'+(this.nested ? ' nested':'')
  231. },
  232. [
  233. // create title node
  234. m("h2", {}, m.trust(markdown.renderInline(this.title))),
  235. // create text node
  236. m(_Text, {'text':this.text, 'id':this.id}),
  237. // addd children
  238. this.childs.map(c => { return m(_Item, c); })
  239. ])
  240. }
  241. }
  242. // ____ __
  243. // / __ \____ ______/ /_
  244. // / /_/ / __ `/ ___/ __/
  245. // / ____/ /_/ / / / /_
  246. // /_/ \__,_/_/ \__/
  247. var _Part = {
  248. oninit(vn){
  249. this.id = vn.attrs.id;
  250. this.title = vn.attrs.title || '';
  251. this.enonces = vn.attrs.enonces;
  252. },
  253. onbeforeupdate(vn, old){
  254. // console.log('_Part, onbeforeupdate old',old);
  255. this.title = vn.attrs.title || '';
  256. this.enonces = vn.attrs.enonces;
  257. },
  258. view(vn){
  259. // console.log(vn.attrs.enonces);
  260. return m("section", {
  261. 'id' :this.id,
  262. 'class' :'part'
  263. },
  264. [
  265. // create title node
  266. m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
  267. // create text node
  268. this.enonces.map(e => {
  269. // console.log(e.type);
  270. // var title = e.title || '';
  271. switch (e.type) {
  272. case "title":
  273. // handle titles
  274. // console.log('title');
  275. return m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)));
  276. break;
  277. case "filet":
  278. // handle filets
  279. // console.log('filet');
  280. return m("h4", {'class':'filet'}, m.trust(markdown.renderInline(e.title)));
  281. break;
  282. default:
  283. // or build structure
  284. return m(_Enonce, Object.assign({"partid":this.id},e));
  285. }
  286. })
  287. ]
  288. )
  289. }
  290. }
  291. // ____ __
  292. // / _/___ / /__________
  293. // / // __ \/ __/ ___/ __ \
  294. // _/ // / / / /_/ / / /_/ /
  295. // /___/_/ /_/\__/_/ \____/
  296. var _Intro = {
  297. oninit(vn){
  298. console.log('_Intro : oninit : vn', vn);
  299. this.id = vn.attrs.id;
  300. this.text = vn.attrs.text || '';
  301. },
  302. onbeforeupdate(vn, old){
  303. this.id = vn.attrs.id;
  304. this.text = vn.attrs.text || '';
  305. },
  306. view(vn){
  307. return m("section", {'class':'intro'}, m("p",m.trust(markdown.renderInline(this.text))));
  308. }
  309. }
  310. // ______ __
  311. // /_ __/__ _ __/ /_
  312. // / / / _ \| |/_/ __/
  313. // / / / __/> </ /_
  314. // /_/ \___/_/|_|\__/
  315. module.exports = {
  316. // oninit(vn){
  317. // this.lang = vn.attrs.lang;
  318. // },
  319. oncreate(vn){
  320. document.body.classList.add('mode-text');
  321. _Ui.init();
  322. },
  323. view(vn){
  324. console.log('_ModeText view', vn.attrs.lang);
  325. return [
  326. m(_Header),
  327. m('main', {id:"content", 'class':'mode-text'}, _dbs.data[vn.attrs.lang].map((p) => {
  328. console.log("MAP _dbs", p);
  329. if(p.id == 'intro'){
  330. return m(_Intro,p);
  331. }else{
  332. return m(_Part,p);
  333. }
  334. })
  335. ),
  336. m(_Footer)
  337. ]
  338. }
  339. }