header.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. var m = require('mithril');
  2. var _dbs = require('./dbs');
  3. var _i18n = require('./i18n');
  4. var markdown = require('markdown-it')()
  5. .use(require('markdown-it-footnote'));
  6. // import * as i18next from 'i18next';
  7. // __ __ __
  8. // / / / /__ ____ _____/ /__ _____
  9. // / /_/ / _ \/ __ `/ __ / _ \/ ___/
  10. // / __ / __/ /_/ / /_/ / __/ /
  11. // /_/ /_/\___/\__,_/\__,_/\___/_/
  12. module.exports = {
  13. // onupdate(vn){
  14. // // console.log("Header onupdate : vn", vn);
  15. // },
  16. view(vn){
  17. // console.log("Header view : vn", vn);
  18. return m('header', [
  19. m('hgroup', [
  20. m('h1', 'Ethica'),
  21. m('h2', 'Spinoza (1632-1677)')
  22. ]),
  23. m('div', {'id':"menus"}, [
  24. m(_PartsNav),
  25. m(_Filters),
  26. m(_RouteMenu),
  27. m(_LangMenu)
  28. ])
  29. ]);
  30. }
  31. }
  32. // ____ __
  33. // / __ \____ ______/ /______ ____ ___ ___ ____ __ __
  34. // / /_/ / __ `/ ___/ __/ ___/ / __ `__ \/ _ \/ __ \/ / / /
  35. // / ____/ /_/ / / / /_(__ ) / / / / / / __/ / / / /_/ /
  36. // /_/ \__,_/_/ \__/____/ /_/ /_/ /_/\___/_/ /_/\__,_/
  37. var _PartsNav = {
  38. view(vn){
  39. var lang = m.route.param('lang');
  40. // console.log('partsmenu', lang);
  41. return m('nav', {id:'parts-nav'}, [
  42. // TODO: replaced labels with localized content
  43. m('h3', _i18n.t('Parts')),
  44. m('ul', _dbs.data[lang].map(function(p){
  45. // console.log("anchors, part", p);
  46. if(p.id !== "intro"){
  47. return m('li', [
  48. m('a', {'href':'#'+p.id}, m.trust(markdown.renderInline(p.title)))
  49. ]);
  50. }
  51. })
  52. )
  53. ]);
  54. }
  55. };
  56. // ___ _ _ _ __ __
  57. // | __(_) | |_ ___ _ _ ___ | \/ |___ _ _ _ _
  58. // | _|| | | _/ -_) '_(_-< | |\/| / -_) ' \ || |
  59. // |_| |_|_|\__\___|_| /__/ |_| |_\___|_||_\_,_|
  60. var _Filters = {
  61. view(vn){
  62. var lang = m.route.param('lang');
  63. return m('nav', {id:'filters'}, [
  64. m('h3', _i18n.t('Filters')),
  65. m('ul', _dbs.types[lang].map(function(p){
  66. // console.log("types", p);
  67. return m('li', [
  68. m('a', {
  69. 'href':`#filter-${p}`,
  70. 'type':`${p}`,
  71. onclick(e){
  72. // console.log('click filter btn', type);
  73. e.preventDefault();
  74. if(e.target.parentNode.classList.contains('active')){
  75. // unshow active filter
  76. e.target.parentNode.classList.remove('active');
  77. // remove the filter
  78. _dbs.active_type_filter = null;
  79. }else{
  80. // deactivate active filter if any
  81. // a.li.ul.li.active.a.click
  82. var prev_activelink = e.target.parentNode.parentNode.getElementsByClassName('active').item(0);//.getElementsByName('a');//.dispatchEvent('click');
  83. if(prev_activelink){
  84. prev_activelink.firstChild.click();
  85. }
  86. console.log('prev_activelink', prev_activelink);
  87. // show the active filter
  88. e.target.parentNode.classList.add('active');
  89. // activate the filter
  90. let type = e.target.getAttribute("type");
  91. _dbs.active_type_filter = type;
  92. }
  93. return false;
  94. }
  95. }, _i18n.t(p))
  96. ]);
  97. })
  98. )
  99. ]);
  100. }
  101. }
  102. // ____ __
  103. // / __ \____ __ __/ /____ ____ ___ ___ ____ __ __
  104. // / /_/ / __ \/ / / / __/ _ \ / __ `__ \/ _ \/ __ \/ / / /
  105. // / _, _/ /_/ / /_/ / /_/ __/ / / / / / / __/ / / / /_/ /
  106. // /_/ |_|\____/\__,_/\__/\___/ /_/ /_/ /_/\___/_/ /_/\__,_/
  107. var _RouteMenu = {
  108. view(){
  109. var lang = m.route.param('lang');
  110. var path = m.route.get().match(/^(\/[^\/]+)(\/[^\/|#]+)(.*)$/);
  111. // console.log('Route menu Path', path);
  112. return m('nav', {id:'routes'}, [
  113. // TODO: replaced labels with localized content
  114. m('h3', _i18n.t('Mode')),
  115. m('ul', [
  116. m('li', m('a', {
  117. 'href':`/${lang}/text${path[3]}`,
  118. oncreate : m.route.link,
  119. onupdate : m.route.link
  120. }, _i18n.t("Text"))),
  121. m('li', m('a', {
  122. 'href':`/${lang}/connections${path[3]}`,
  123. oncreate : m.route.link,
  124. onupdate : m.route.link
  125. }, _i18n.t("Connections"))),
  126. ])
  127. ]);
  128. }
  129. }
  130. // __ __ ___
  131. // / / ____ _____ ____ _/ |/ /__ ____ __ __
  132. // / / / __ `/ __ \/ __ `/ /|_/ / _ \/ __ \/ / / /
  133. // / /___/ /_/ / / / / /_/ / / / / __/ / / / /_/ /
  134. // /_____/\__,_/_/ /_/\__, /_/ /_/\___/_/ /_/\__,_/
  135. // /____/
  136. var _LangMenu = {
  137. view(){
  138. var path = m.route.get().match(/^\/[^\/]+(.+)$/);
  139. // console.log('Lang menu Path', path);
  140. // create ul dom
  141. // console.log("Header _LangMenu view : i18next", i18next);
  142. return m('nav', {id:'languages'}, [
  143. // TODO: replaced labels with localized content
  144. m('h3', _i18n.t('Language')),
  145. m('ul', _dbs.langs.map(lang => {
  146. // create li dom for each lang link
  147. return m('li', m('a', {
  148. 'lang':lang.lc,
  149. 'href':`/${lang.lc}${path[1]}`,
  150. oncreate : m.route.link,
  151. onupdate : m.route.link
  152. }, lang.label)
  153. );
  154. }))
  155. ]);
  156. }
  157. }