app.ethica-spinoza.net/assets/modules/ui.js

/**
 * @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
 */

// 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
}