123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- /**
- * @Author: Bachir Soussi Chiadmi <bach>
- * @Date: 12-09-2017
- * @Email: bachir@figureslibres.io
- * @Last modified by: bach
- * @Last modified time: 12-09-2017
- * @License: GPL-V3
- */
- // https://plainjs.com
- module.exports = {
- init(){
- // console.log('UI init');
- this.initStickyTitles();
- },
- initStickyTitles(){
- // _____ __ _ __ __ _ __ __
- // / ___// /_(_)____/ /____ __ / /_(_) /_/ /__
- // \__ \/ __/ / ___/ //_/ / / / / __/ / __/ / _ \
- // ___/ / /_/ / /__/ ,< / /_/ / / /_/ / /_/ / __/
- // /____/\__/_/\___/_/|_|\__, / \__/_/\__/_/\___/
- // /____/
- // https://codepen.io/chrissp26/pen/gBrdo?editors=0010
- // let header_height = $('header').height();
- let header_height = document.getElementsByTagName('header')[0].clientHeight;
- // console.log(header_height);
- // create the stkd titles wrapper block
- var stkd_wrapper = document.querySelector('.sticky-clone-wrapper');
- if(!stkd_wrapper){
- var stkd_wrapper = document.createElement('div');
- stkd_wrapper.classList.add('sticky-clone-wrapper');
- document.body.append(stkd_wrapper);
- }
- // get all part title
- var part_titles = new Array();
- Array.from(document.querySelectorAll('h1.part-title')).forEach(function(e){
- e._part = e.getAttribute('part');
- part_titles.push(e)
- });
- // console.log('part_titles', part_titles);
- var stkd_part,
- last_stkd_part = false,
- subparts,
- stkd_subpart,
- last_stkd_subpart = false,
- clone;
- let OnScroll = function(event){
- // console.log('on scrool', event);
- stkd_part = false;
- for (let i = part_titles.length-1; i >= 0; i--) {
- if(part_titles[i].getBoundingClientRect().top < header_height){
- stkd_part = part_titles[i];
- // console.log("stkd_part");
- break;
- }
- }
- if (stkd_part) {
- // console.log('got stkd_part', stkd_part._part);
- if(stkd_part._part !== last_stkd_part._part){
- // console.log('new sticky', stkd_part.innerHTML);
- // clone only once
- clone = stkd_part.cloneNode(true);
- stkd_wrapper.innerHTML = '';
- // fill stkd_wrapper
- stkd_wrapper.appendChild(clone);
- last_stkd_part = stkd_part;
- // // get all subpart title only once
- // let part_wrapper = stkd_part.parentNode;
- // subparts = new Array();
- // Array.from(part_wrapper.querySelectorAll('h2.title')).forEach(function(e){
- // subparts.push(e)
- // });
- // // console.log('subparts', subparts);
- }
- // // subtitle
- // stkd_subpart = false;
- // for (let i = subparts.length-1; i >= 0; i--) {
- // if(subparts[i].getBoundingClientRect().top < header_height + stkd_part.clientHeight){
- // stkd_subpart = subparts[i];
- // break;
- // }
- // }
- //
- // if (stkd_subpart){
- // if( stkd_subpart.innerHTML !== last_stkd_subpart.innerHTML ){
- // console.log("new stkd_subpart "+stkd_subpart.innerHTML);
- // clone = stkd_subpart.cloneNode(true);
- // // stkd_wrapper.lastChild.remove();
- // stkd_wrapper.appendChild(clone);
- // last_stkd_subpart = stkd_subpart;
- // }
- // }else{
- // // stkd_wrapper.lastChild.remove();
- // stkd_subpart = last_stkd_subpart = false;
- // }
- }else{
- // empty stkd_wrapper
- stkd_wrapper.innerHTML = '';
- stkd_part = last_stkd_part = false;
- }
- };
- //
- // $window.on('scroll', OnScroll);
- // console.log('window', window);
- window.onscroll = OnScroll;
- }
- }
|