118 lines
3.7 KiB
JavaScript
118 lines
3.7 KiB
JavaScript
/**
|
|
* @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;
|
|
}
|
|
}
|