|
@@ -7,108 +7,108 @@
|
|
|
* @License: GPL-V3
|
|
|
*/
|
|
|
|
|
|
-// var $ = require('jquery');
|
|
|
// https://plainjs.com
|
|
|
|
|
|
+module.exports = {
|
|
|
+ init(){
|
|
|
+ // console.log('UI init');
|
|
|
+ this.initStickyTitles();
|
|
|
+ },
|
|
|
+ initStickyTitles(){
|
|
|
+ // _____ __ _ __ __ _ __ __
|
|
|
+ // / ___// /_(_)____/ /____ __ / /_(_) /_/ /__
|
|
|
+ // \__ \/ __/ / ___/ //_/ / / / / __/ / __/ / _ \
|
|
|
+ // ___/ / /_/ / /__/ ,< / /_/ / / /_/ / /_/ / __/
|
|
|
+ // /____/\__/_/\___/_/|_|\__, / \__/_/\__/_/\___/
|
|
|
+ // /____/
|
|
|
+ // https://codepen.io/chrissp26/pen/gBrdo?editors=0010
|
|
|
|
|
|
-// jQuery(document).ready(function($) {
|
|
|
-// console.log('Hello Jquery');
|
|
|
-
|
|
|
-// var $window;
|
|
|
+ // let header_height = $('header').height();
|
|
|
+ let header_height = document.getElementsByTagName('header')[0].clientHeight;
|
|
|
+ // console.log(header_height);
|
|
|
|
|
|
-var init = function(){
|
|
|
- // console.log('UI init');
|
|
|
- // $window = $(window);
|
|
|
- // _____ __ _ __ __ _ __ __
|
|
|
- // / ___// /_(_)____/ /____ __ / /_(_) /_/ /__
|
|
|
- // \__ \/ __/ / ___/ //_/ / / / / __/ / __/ / _ \
|
|
|
- // ___/ / /_/ / /__/ ,< / /_/ / / /_/ / /_/ / __/
|
|
|
- // /____/\__/_/\___/_/|_|\__, / \__/_/\__/_/\___/
|
|
|
- // /____/
|
|
|
- // https://codepen.io/chrissp26/pen/gBrdo?editors=0010
|
|
|
+ // create the stkd titles wrapper block
|
|
|
+ let stkd_wrapper = document.createElement('div');
|
|
|
+ stkd_wrapper.classList.add('sticky-clone-wrapper');
|
|
|
+ document.body.append(stkd_wrapper);
|
|
|
|
|
|
- // var header_height = $('header').height();
|
|
|
- var header_height = document.getElementsByTagName('header')[0].clientHeight;
|
|
|
- // console.log(header_height);
|
|
|
+ // 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 $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 stkd_part,
|
|
|
+ last_stkd_part = false,
|
|
|
+ subparts,
|
|
|
+ stkd_subpart,
|
|
|
+ last_stkd_subpart = false,
|
|
|
+ clone;
|
|
|
|
|
|
- //
|
|
|
- // 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;
|
|
|
+ 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 (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 = '';
|
|
|
- }
|
|
|
- };
|
|
|
+ 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;
|
|
|
|
|
|
- //
|
|
|
- // $window.on('scroll', OnScroll);
|
|
|
- // console.log('window', window);
|
|
|
- window.onscroll = OnScroll;
|
|
|
-}
|
|
|
-// });
|
|
|
+ // // 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;
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
-module.exports = {
|
|
|
- init : init
|
|
|
+ //
|
|
|
+ // $window.on('scroll', OnScroll);
|
|
|
+ // console.log('window', window);
|
|
|
+ window.onscroll = OnScroll;
|
|
|
+ }
|
|
|
}
|