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/dist/main.css
Vendored
+7 -1
View File
@@ -736,7 +736,7 @@ header {
color: #000; }
.sticky-clone-wrapper {
padding-top: 6em;
padding-top: 5em;
padding-bottom: 1em;
position: fixed;
top: 0;
@@ -750,6 +750,12 @@ header {
margin: 0 0 0 70px; }
body.mode-text .sticky-clone-wrapper h1.part-title {
margin: 0 0 0 70px; }
.sticky-clone-wrapper h2.title {
font-size: 1em; }
body.mode-connections .sticky-clone-wrapper h2.title {
margin: 0 0 0 70px; }
body.mode-text .sticky-clone-wrapper h2.title {
margin: 0 0 0 70px; }
main#content {
margin-top: 5em; }
assets/dist/main.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/dist/main.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/main.js
+1 -1
View File
@@ -38,7 +38,7 @@ var Layout = {
function init(){
_dbs.load(function(){
console.log('init dbs callback');
// console.log("Init _dbs.data", _dbs.data);
console.log("Init _dbs.data", _dbs.data);
// console.log("Init _dbs.data_byid", _dbs.data_byid);
// console.log("Init _dbs.data_strct", _dbs.data_strct);
m.route.prefix("");
assets/main.scss
+10 -1
View File
@@ -131,7 +131,7 @@ header{
.sticky-clone-wrapper{
padding-top: $header_height+1em;
padding-top: $header_height;
padding-bottom: 1em;
position: fixed;
top:0; left: 0;
@@ -147,6 +147,15 @@ header{
margin:0 0 0 $margin_left;
}
}
h2.title{
font-size: 1em;
body.mode-connections &{
margin: 0 0 0 $margin_left;
}
body.mode-text &{
margin:0 0 0 $margin_left;
}
}
}
main#content{
assets/modules/ModeText.js
+3 -3
View File
@@ -268,7 +268,7 @@ var _Part = {
this.enonces = vn.attrs.enonces;
},
view(vn){
// console.log(vn.attrs.enonces);
console.log("part enonces", vn.attrs.enonces);
return m("section", {
'id' :this.id,
'class' :'part'
@@ -278,7 +278,7 @@ var _Part = {
m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
// create text node
this.enonces.map(e => {
// console.log(e.type);
console.log(e.title +" - "+ e.type);
// var title = e.title || '';
switch (e.type) {
case "title":
@@ -342,7 +342,7 @@ module.exports = {
// // i18next.changeLanguage(vn.attrs.lang);
// },
view(vn){
// console.log('_ModeText view : lang', vn.attrs.lang);
// console.log('_ModeText view : _dbs.data', _dbs.data);
return m('main', {id:"content", 'class':'mode-text'}, _dbs.data[vn.attrs.lang].map((p) => {
// console.log("MAP _dbs", p);
if(p.id == 'intro'){
assets/modules/header.js
+4 -4
View File
@@ -13,11 +13,11 @@ var markdown = require('markdown-it')()
// / __ / __/ /_/ / /_/ / __/ /
// /_/ /_/\___/\__,_/\__,_/\___/_/
module.exports = {
onupdate(vn){
console.log("Header onupdate : vn", vn);
},
// onupdate(vn){
// // console.log("Header onupdate : vn", vn);
// },
view(vn){
console.log("Header view : vn", vn);
// console.log("Header view : vn", vn);
return m('header', [
m('hgroup', [
m('h1', 'Ethica'),
assets/modules/i18n.js
+6 -24
View File
@@ -1,34 +1,16 @@
module.exports = {
t(key){
console.log('i18n',this);
if(this.locales[key]){
if(this.lang){
if(this.locales[key][this.lang]){
return this.locales[key][this.lang];
}else{
this.log(`Key "${key}" does not exists for language ${this.lang}`);
}
return this.locales[key][this.lang];// key for current language
}else{this.log(`Key "${key}" does not exists for language ${this.lang}`);}
}else if(this.locales[key][this.fallback]){
return this.locales[key][this.fallback];
}else{
this.log(`Key "${key}" does not exists for fallback language ${this.fallback}`);
}
}else{
this.log(`Key "${key}" does not exists.`);
}
// if(this.lang){
// if(this.locales[key][this.lang]){
// // key exists in current language
// return this.locales[key][this.lang];
// }else{
// console.log('Key ${key} does not exists for language ${this.lang}');
// }
// }else if(this.locales[key][this.fallback]){
// // key exists in fallback language
// return this.locales[key][this.fallback];
// }
return key;
return this.locales[key][this.fallback];// key for fallback language
}else{this.log(`Key "${key}" does not exists for fallback language ${this.fallback}`);}
}else{this.log(`Key "${key}" does not exists.`);}
return key;// if nothing else retrn key it self
},
setLang(l){
this.lang = l
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;
}
}