ui.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /**
  2. * @Author: Bachir Soussi Chiadmi <bach>
  3. * @Date: 12-09-2017
  4. * @Email: bachir@figureslibres.io
  5. * @Last modified by: bach
  6. * @Last modified time: 12-09-2017
  7. * @License: GPL-V3
  8. */
  9. // https://plainjs.com
  10. module.exports = {
  11. init(){
  12. // console.log('UI init');
  13. this.initStickyTitles();
  14. },
  15. initStickyTitles(){
  16. // _____ __ _ __ __ _ __ __
  17. // / ___// /_(_)____/ /____ __ / /_(_) /_/ /__
  18. // \__ \/ __/ / ___/ //_/ / / / / __/ / __/ / _ \
  19. // ___/ / /_/ / /__/ ,< / /_/ / / /_/ / /_/ / __/
  20. // /____/\__/_/\___/_/|_|\__, / \__/_/\__/_/\___/
  21. // /____/
  22. // https://codepen.io/chrissp26/pen/gBrdo?editors=0010
  23. // let header_height = $('header').height();
  24. let header_height = document.getElementsByTagName('header')[0].clientHeight;
  25. // console.log(header_height);
  26. // create the stkd titles wrapper block
  27. var stkd_wrapper = document.querySelector('.sticky-clone-wrapper');
  28. if(!stkd_wrapper){
  29. var stkd_wrapper = document.createElement('div');
  30. stkd_wrapper.classList.add('sticky-clone-wrapper');
  31. document.body.append(stkd_wrapper);
  32. }
  33. // get all part title
  34. var part_titles = new Array();
  35. Array.from(document.querySelectorAll('h1.part-title')).forEach(function(e){
  36. e._part = e.getAttribute('part');
  37. part_titles.push(e)
  38. });
  39. // console.log('part_titles', part_titles);
  40. var stkd_part,
  41. last_stkd_part = false,
  42. subparts,
  43. stkd_subpart,
  44. last_stkd_subpart = false,
  45. clone;
  46. let OnScroll = function(event){
  47. // console.log('on scrool', event);
  48. stkd_part = false;
  49. for (let i = part_titles.length-1; i >= 0; i--) {
  50. if(part_titles[i].getBoundingClientRect().top < header_height){
  51. stkd_part = part_titles[i];
  52. // console.log("stkd_part");
  53. break;
  54. }
  55. }
  56. if (stkd_part) {
  57. // console.log('got stkd_part', stkd_part._part);
  58. if(stkd_part._part !== last_stkd_part._part){
  59. // console.log('new sticky', stkd_part.innerHTML);
  60. // clone only once
  61. clone = stkd_part.cloneNode(true);
  62. stkd_wrapper.innerHTML = '';
  63. // fill stkd_wrapper
  64. stkd_wrapper.appendChild(clone);
  65. last_stkd_part = stkd_part;
  66. // // get all subpart title only once
  67. // let part_wrapper = stkd_part.parentNode;
  68. // subparts = new Array();
  69. // Array.from(part_wrapper.querySelectorAll('h2.title')).forEach(function(e){
  70. // subparts.push(e)
  71. // });
  72. // // console.log('subparts', subparts);
  73. }
  74. // // subtitle
  75. // stkd_subpart = false;
  76. // for (let i = subparts.length-1; i >= 0; i--) {
  77. // if(subparts[i].getBoundingClientRect().top < header_height + stkd_part.clientHeight){
  78. // stkd_subpart = subparts[i];
  79. // break;
  80. // }
  81. // }
  82. //
  83. // if (stkd_subpart){
  84. // if( stkd_subpart.innerHTML !== last_stkd_subpart.innerHTML ){
  85. // console.log("new stkd_subpart "+stkd_subpart.innerHTML);
  86. // clone = stkd_subpart.cloneNode(true);
  87. // // stkd_wrapper.lastChild.remove();
  88. // stkd_wrapper.appendChild(clone);
  89. // last_stkd_subpart = stkd_subpart;
  90. // }
  91. // }else{
  92. // // stkd_wrapper.lastChild.remove();
  93. // stkd_subpart = last_stkd_subpart = false;
  94. // }
  95. }else{
  96. // empty stkd_wrapper
  97. stkd_wrapper.innerHTML = '';
  98. stkd_part = last_stkd_part = false;
  99. }
  100. };
  101. //
  102. // $window.on('scroll', OnScroll);
  103. // console.log('window', window);
  104. window.onscroll = OnScroll;
  105. }
  106. }