improved route strategy (url path), headers menu are working

2017-10-15 17:30:42 +02:00
parent 72602b3e12
commit e77ed37c76
15 changed files with 1196 additions and 696 deletions
@@ -0,0 +1,114 @@
+/**
+ * @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
+}