bachir/app.ethica-spinoza.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sticky titles ok, only level 1, more level seems to not be doable

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-02-20 17:24:02 +01:00
parent 7d6ff629b5
commit c7beaf1e10
9 changed files with 134 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/modules/ui.js
+101 -101
View File
@@ -7,108 +7,108 @@
* @License: GPL-V3
*/
// var $ = require('jquery');
// https://plainjs.com
// jQuery(document).ready(function($) {
// console.log('Hello Jquery');
// var $window;
var init = function(){
// console.log('UI init');
// $window = $(window);
// _____ __ _ __ __ _ __ __
// / ___// /_(_)____/ /____ __ / /_(_) /_/ /__
// \__ \/ __/ / ___/ //_/ / / / / __/ / __/ / _ \
// ___/ / /_/ / /__/ ,< / /_/ / / /_/ / /_/ / __/
// /____/\__/_/\___/_/|_|\__, / \__/_/\__/_/\___/
// /____/
// https://codepen.io/chrissp26/pen/gBrdo?editors=0010
// var header_height = $('header').height();
var header_height = document.getElementsByTagName('header')[0].clientHeight;
// console.log(header_height);
// var $sticky_clone_wrapper = $('<div>').addClass('sticky-clone-wrapper').appendTo('body');
var sticky_clone_wrapper = document.createElement('div');
sticky_clone_wrapper.classList.add('sticky-clone-wrapper');
document.body.append(sticky_clone_wrapper);
//
// var $stickies = $('h1.part-title').addClass('sticky').each(function(i){
// var $sticky = $(this);
// $sticky
// .data('originalPosition', $sticky.offset().top)
// .data('originalHeight', $sticky.outerHeight());
// });
var stickies = new Array();
Array.from(document.querySelectorAll('h1.part-title')).forEach(function(e){
// console.log('sticky', e);
e._part = e.getAttribute('part');
stickies.push(e)
});
console.log('stickies', stickies);
//
// var OnScroll = function(event){
// var $last_sticky;
// $stickies.each(function(i){
// var $sticky = $(this);
// var pos = $sticky.data('originalPosition');
// if(pos < $window.scrollTop()+header_height){
//
// }
// // if(i == 1){
// // console.log(pos +" | "+$window.scrollTop());
// // }
// // if(pos < $window.scrollTop()+header_height){
// // if(!$sticky.is('.sticked')){
// // $sticky.addClass('sticked').clone().appendTo($sticky_clone_wrapper.empty());
// // }
// // }else{
// // if($sticky.is('.sticked')){
// // $sticky.removeClass('sticked');
// // $('.part-title[part="'+$sticky.attr('part')+'"]', $sticky_clone_wrapper).remove();
// // }
// // }
// });
// };
var last_sticky = "", sticked_sticky, clone;
var OnScroll = function(event){
// console.log('on scrool', event);
sticked_sticky = false;
for (var i = stickies.length-1; i >= 0; i--) {
if(stickies[i].getBoundingClientRect().top < header_height){
sticked_sticky = stickies[i];
break;
}
}
if (sticked_sticky) {
// console.log('sticked_sticky', sticked_sticky._part);
if(last_sticky !== sticked_sticky._part){
// console.log('new sticky', last_sticky);
// fill sticky_clone_wrapper
clone = sticked_sticky.cloneNode(true);
sticky_clone_wrapper.innerHTML = '';
sticky_clone_wrapper.appendChild(clone);
last_sticky = sticked_sticky._part;
}
}else{
// empty sticky_clone_wrapper
sticky_clone_wrapper.innerHTML = '';
}
};
//
// $window.on('scroll', OnScroll);
// console.log('window', window);
window.onscroll = OnScroll;
}
// });
module.exports = {
init : init
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
let stkd_wrapper = document.createElement('div');
stkd_wrapper.classList.add('sticky-clone-wrapper');
document.body.append(stkd_wrapper);
// get all part title
let 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;
}
}