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

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

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-10-15 17:30:42 +02:00
parent 72602b3e12
commit e77ed37c76
15 changed files with 1196 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.htaccess
+4
View File
@@ -0,0 +1,4 @@
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [L]
assets/dist/main.css
Vendored
+96 -37
View File
@@ -753,77 +753,136 @@ html, body {
header {
position: fixed;
width: 100%;
height: 3em;
height: 4em;
top: 0;
z-index: 5;
background-color: white; }
header > * {
display: inline-block;
vertical-align: bottom; }
vertical-align: text-bottom; }
header > *:last-child {
margin-right: 1em; }
header > h1 {
font-size: 3em;
margin: 0 0 0 70px; }
header #menus > * {
display: inline-block;
vertical-align: top; }
header #menus nav {
padding: 1em 1em;
position: relative; }
header #menus nav h3 {
margin: 0;
padding: 0;
cursor: pointer;
transition: color 0.3s ease-in-out; }
header #menus nav ul {
position: absolute;
margin: 0;
left: 0;
padding: 0 1em 1em;
background-color: white;
white-space: nowrap;
height: 1px;
opacity: 0;
overflow: hidden;
transition: opacity 0.3s ease-in-out; }
header #menus nav ul li {
margin: 0;
padding: 0;
list-style: none;
transition: color 0.3s ease-in-out;
font-weight: 500;
font-size: 1.2em;
line-height: 1.2; }
header #menus nav ul li a {
color: inherit;
text-decoration: none; }
header #menus:hover h3 {
color: #646464; }
header #menus:hover nav:hover {
z-index: 10; }
header #menus:hover nav:hover h3 {
color: #000; }
header #menus:hover nav:hover ul {
height: auto;
opacity: 1;
transition: height opacity 0.3s ease-in-out; }
header #menus:hover nav:hover li {
color: #646464; }
header #menus:hover nav:hover li:hover {
color: #000; }
nav#menus {
float: right; }
nav#menus > ul {
display: inline-block; }
nav#menus ul {
margin: 0 0.5em; }
nav#menus ul li {
list-style: none;
line-height: 0.9;
display: inline-block;
vertical-align: middle;
margin: 0 0.2em; }
nav#menus ul li a {
text-decoration: none;
color: inherit; }
.sticky-clone-wrapper {
padding-top: 4em;
position: fixed;
top: 0;
left: 0;
z-index: 4;
background-color: white; }
.sticky-clone-wrapper h1.part-title {
font-size: 1.6em; }
body.inline .sticky-clone-wrapper h1.part-title {
margin: 0 0 0 70px; }
body.tree .sticky-clone-wrapper h1.part-title {
margin: 0 0 0 70px; }
main#content {
margin-top: 3em; }
margin-top: 4em; }
main#content h1.part-title {
font-size: 1.6em;
width: 450px; }
main#content section.part {
position: relative; }
main#content h2.title, main#content h2.filet {
font-size: 1em;
width: 450px; }
h1.part {
font-size: 1.6em;
width: 450px; }
main#content.inline h1.part-title {
margin: 1em 0 0 70px; }
section.enonce {
main#content.inline h2.title, main#content.inline h4.filet {
margin: 1em 0 0 70px; }
main#content.inline section.enonce {
width: 450px;
margin: 1em 0 1em 50px;
margin: 1em 0 1em 70px;
overflow-x: visible;
font-family: 'amiri', sans-serif;
font-size: 16px;
font-kerning: auto;
line-height: 1.4; }
section.enonce h2 {
main#content.inline section.enonce h2 {
font-size: 1em;
font-weight: 300;
margin: 0;
cursor: pointer; }
section.enonce h3 {
main#content.inline section.enonce h3 {
font-size: 0.9em;
font-weight: 300;
margin: 0;
cursor: pointer; }
section.enonce div.text {
main#content.inline section.enonce div.text {
font-size: 1.3em; }
section.enonce div.text div.paragraph {
main#content.inline section.enonce div.text div.paragraph {
margin-bottom: 1em; }
section.enonce div.text div.paragraph div.opened-link {
main#content.inline section.enonce div.text div.paragraph div.opened-link {
display: inline; }
section.enonce div.text div.paragraph a.link, section.enonce div.text div.paragraph span.link.text {
main#content.inline section.enonce div.text div.paragraph a.link, main#content.inline section.enonce div.text div.paragraph span.link.text {
font-weight: 600;
text-decoration: none;
color: inherit; }
section.enonce div.text div.paragraph span.link.text:after {
main#content.inline section.enonce div.text div.paragraph span.link.text:after {
content: ':'; }
section.enonce div.text div.paragraph section.enonce, section.enonce div.text div.paragraph section.item {
main#content.inline section.enonce div.text div.paragraph section.enonce, main#content.inline section.enonce div.text div.paragraph section.item {
padding-left: 2em;
border-left: 1px solid #999; }
h1.part {
margin: 1em 0 0 70px; }
main#content.tree h1.part-title {
margin: 0 0 0 70px; }
main#content.tree h2.title, main#content.tree h4.filet {
margin: 0 0 0 70px; }
.dot {
position: relative;
@@ -848,7 +907,7 @@ h1.part {
margin: 0;
opacity: 0;
transition: opacity 0.4s ease-in-out;
width: 405px; }
width: 385px; }
.dot:not(.disabled) > p.summary {
cursor: pointer; }
.dot.disabled > p.summary {
@@ -857,7 +916,7 @@ h1.part {
display: inline-block;
vertical-align: top;
margin: 0;
width: 405px; }
width: 385px; }
.dot > section.text p {
margin: 0; }
.dot > section.text p:not(:last-child) {
@@ -872,7 +931,7 @@ h1.part {
border-bottom: 1px solid #e2e2e2; }
.dot > nav.links {
position: relative;
left: 100px;
left: 140px;
box-sizing: border-box; }
.dot > nav.links.to {
bottom: 100%;
@@ -887,7 +946,7 @@ h1.part {
border-left: 1px solid #e2e2e2;
position: absolute;
top: 0;
left: 70px;
left: 90px;
height: 100%;
width: 1px;
z-index: -1; }
assets/dist/main.js
Vendored
+672 -482
View File
File diff suppressed because it is too large Load Diff
assets/dist/main.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/jsondb/3-Elwes-EN-ethicadb.json
+2 -2
View File
@@ -2,7 +2,7 @@
{
"index": 1,
"id": "p1",
"title": "_Part I._ \n\n CONCERNING GOG.",
"title": "_Part I._ \n\n CONCERNING GOD.",
"enonces": [
{
"title":"DEFINITIONS",
@@ -5383,4 +5383,4 @@
}
]
}
]
]
assets/main.js
+5 -3
View File
@@ -22,14 +22,16 @@ var _dbs = require('./modules/dbs');
var _Inline = require('./modules/inline');
var _Tree = require('./modules/tree');
function init(){
_dbs.load(function(){
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(document.body, "/inline", {
"/inline": _Inline,
"/tree": _Tree,
m.route.prefix("");
m.route(document.body, "/lat/inline", {
"/:lang/inline": _Inline,
"/:lang/tree": _Tree,
});
});
};
assets/main.scss
+177 -81
View File
@@ -21,64 +21,126 @@ html, body{
padding:0;
}
$header_height:3em;
$header_height:4em;
$dot_w:500px;
$margin_left:50px;
$bullet_w:40px;
$margin_left:50px + ($bullet_w/2);
header{
position: fixed;
width:100%; height:$header_height;
top:0; z-index: 5;
background-color: white;
// padding: 0 0 0 $margin_left;
// border-bottom: 1px solid green;
>*{
display: inline-block;
vertical-align: bottom;
vertical-align: text-bottom;
// &:first-child{ margin-left: 1em;}
&:last-child{ margin-right: 1em;}
}
>h1{
margin: 0 0 0 $margin_left+($bullet_w/2);
font-size: 3em;
margin: 0 0 0 $margin_left;
}
}
nav#menus{
float:right;
>ul{
display: inline-block;
}
ul{
margin:0 0.5em;
li{
list-style: none;
line-height: 0.9;
#menus{
// float:right;
>*{
display: inline-block;
vertical-align: middle;
margin: 0 0.2em;
a{
text-decoration: none;
color: inherit;
vertical-align: top;
}
nav {
padding:1em 1em;
position: relative;
h3{
margin:0; padding:0;
cursor: pointer;
transition: color 0.3s ease-in-out;
}
ul{
position: absolute;
margin:0;
left:0; padding:0 1em 1em;
background-color: rgba(255,255,255, 1);
// top:2em;
white-space: nowrap;
height:1px; opacity:0;
overflow: hidden;
transition: opacity 0.3s ease-in-out;
li{
margin:0;
padding:0;
list-style: none;
transition: color 0.3s ease-in-out;
font-weight:500;
font-size: 1.2em;
line-height: 1.2;
a{
color: inherit;
text-decoration: none;
}
}
}
}
// nav#parts-nav{
// ul{
// right:0; left: auto;
// }
// }
&:hover{
h3{
color: rgb(100,100,100);
}
nav:hover{
z-index: 10;
h3{
color:#000;
}
ul{
height:auto; opacity: 1;
transition: height opacity 0.3s ease-in-out;
}
li{
color: rgb(100,100,100);
&:hover{
color: #000;
}
}
}
}
}
// ul#languages{
// li{
// list-style: none;
// line-height: 0.9;
// a{
// text-decoration: none;
// color: inherit;
// }
// }
// }
}
// #app{
// position: relative;
// text-align: center;
// margin: 3em auto;
// }
.sticky-clone-wrapper{
padding-top: $header_height;
position: fixed;
top:0; left: 0;
z-index: 4;
background-color: white;
h1.part-title{
font-size: 1.6em;
body.inline &{
margin: 0 0 0 $margin_left;
}
body.tree &{
margin:0 0 0 $margin_left;
}
}
}
main#content{
margin-top: $header_height;
// margin: 5em;
@@ -86,12 +148,22 @@ main#content{
// &>*{
// width: 450px;
// }
}
h1.part{
font-size: 1.6em;
width:450px;
// margin: 1em 0;
h1.part-title{
font-size: 1.6em;
width:450px;
}
section.part{
position: relative;
}
h2.title, h2.filet{
font-size: 1em;
width:450px;
// margin: 1em 0;
}
}
// ____ __ _
@@ -99,66 +171,90 @@ h1.part{
// / // __ \/ / / / __ \/ _ \
// _/ // / / / /___/ / / / / __/
// /___/_/ /_/_____/_/_/ /_/\___/
section.enonce{
width:450px;
margin: 1em 0 1em $margin_left;
overflow-x: visible;
@include base_font;
// max-height:14px;
// overflow: hidden;
// transition: max-height 0.5s ease-in-out;
// &.active{
// max-height:1000px;
main#content.inline{
h1.part-title{
margin: 1em 0 0 $margin_left;
}
h2.title, h4.filet{
margin: 1em 0 0 $margin_left;
}
// .sticky{
// color: red;
// &.fixed{
// position: fixed;
// }
// }
h2{
font-size: 1em;
font-weight: 300;
margin: 0;
cursor:pointer;
}
section.enonce{
width:450px;
margin: 1em 0 1em $margin_left;
overflow-x: visible;
@include base_font;
// max-height:14px;
// overflow: hidden;
// transition: max-height 0.5s ease-in-out;
// &.active{
// max-height:1000px;
// }
h3{
font-size: 0.9em;
font-weight: 300;
margin: 0;
cursor:pointer;
}
div.text{
font-size: 1.3em;
div.paragraph{
margin-bottom: 1em;
div.opened-link{
display:inline;
}
a.link, span.link.text{
font-weight: 600;
text-decoration: none;
color: inherit;
}
span.link.text:after{
content:':'
}
section.enonce, section.item{
padding-left:2em;
border-left: 1px solid #999;
}
h2{
font-size: 1em;
font-weight: 300;
margin: 0;
cursor:pointer;
}
h3{
font-size: 0.9em;
font-weight: 300;
margin: 0;
cursor:pointer;
}
div.text{
font-size: 1.3em;
div.paragraph{
margin-bottom: 1em;
div.opened-link{
display:inline;
}
a.link, span.link.text{
font-weight: 600;
text-decoration: none;
color: inherit;
}
span.link.text:after{
content:':'
}
section.enonce, section.item{
padding-left:2em;
border-left: 1px solid #999;
}
}
}
}
}
// ______
// /_ __/_______ ___
// / / / ___/ _ \/ _ \
// / / / / / __/ __/
// /_/ /_/ \___/\___/
h1.part{
margin:1em 0 0 $margin_left+($bullet_w/2);
}
main#content.tree{
h1.part-title{
margin:0 0 0 $margin_left;
}
h2.title, h4.filet{
margin:0 0 0 $margin_left;
}
}
.dot{
position: relative;
@@ -172,7 +268,7 @@ h1.part{
display: inline-block;
// position: absolute;
// left:-3.5em;
width: $margin_left; text-align: right;
width: $margin_left - ($bullet_w/2); text-align: right;
opacity:0;
// transform: translate3d(0, 0, 0);
// transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
assets/modules/dbs.js
+5 -5
View File
@@ -9,10 +9,10 @@
module.exports = {
lang:'fr',
langs:[
{'lc':'lat', 'label':'lat', 'db':'0-LAT-ethicadb.json'},
{'lc':'fr', 'label':'fr', 'db':'2-Appuhn-FR-ethicadb.json'},
{'lc':'bra', 'label':'bra', 'db':'ethica-bresilen.json'},
{'lc':'en', 'label':'en', 'db':'3-Elwes-EN-ethicadb.json'}
{'lc':'lat', 'label':'Latin', 'db':'0-LAT-ethicadb.json'},
{'lc':'fr', 'label':'Français', 'db':'2-Appuhn-FR-ethicadb.json'},
{'lc':'bra', 'label':'Brazilian', 'db':'ethica-bresilen.json'},
{'lc':'en', 'label':'English', 'db':'3-Elwes-EN-ethicadb.json'}
],
data:[],
loaded_dbs:0,
@@ -21,7 +21,7 @@ module.exports = {
load: function(callback) {
// load all dbs, when all loaded call main app callback function
for (var i = 0; i < this.langs.length; i++) {
this.loadJSON(this.langs[i].lc, 'assets/jsondb/'+this.langs[i].db, callback)
this.loadJSON(this.langs[i].lc, '/assets/jsondb/'+this.langs[i].db, callback)
}
},
loadJSON: function(lc, file, callback){
assets/modules/header.js
+76 -25
View File
@@ -1,6 +1,8 @@
var m = require('mithril');
var _dbs = require('./dbs');
var markdown = require('markdown-it')()
.use(require('markdown-it-footnote'));
// __ __ __
@@ -12,7 +14,11 @@ module.exports = {
view: function(vn){
return m('header', [
m('h1', 'Ethica'),
m('nav', {'id':"menus"}, [
// m('nav', {'id':'parts-nav'}, [
//
// ]),
m('div', {'id':"menus"}, [
m(_PartsNav),
m(_RouteMenu),
m(_LangMenu)
])
@@ -20,15 +26,55 @@ module.exports = {
}
}
// ____ __
// / __ \____ ______/ /______ ____ ___ ___ ____ __ __
// / /_/ / __ `/ ___/ __/ ___/ / __ `__ \/ _ \/ __ \/ / / /
// / ____/ /_/ / / / /_(__ ) / / / / / / __/ / / / /_/ /
// /_/ \__,_/_/ \__/____/ /_/ /_/ /_/\___/_/ /_/\__,_/
var _PartsNav = {
view: function(vn){
var lang = m.route.param('lang');
console.log('partsmenu', lang);
return m('nav', {id:'parts-nav'}, [
// TODO: replaced labels with localized content
m('h3', 'Parts'),
m('ul', _dbs.data[lang].map(function(p){
// console.log("anchors, part", p);
return m('li', [
m('a', {'href':'#'+p.id}, m.trust(markdown.renderInline(p.title)))
]);
})
)
]);
}
};
// ____ __
// / __ \____ __ __/ /____ ____ ___ ___ ____ __ __
// / /_/ / __ \/ / / / __/ _ \ / __ `__ \/ _ \/ __ \/ / / /
// / _, _/ /_/ / /_/ / /_/ __/ / / / / / / __/ / / / /_/ /
// /_/ |_|\____/\__,_/\__/\___/ /_/ /_/ /_/\___/_/ /_/\__,_/
var _RouteMenu = {
view: function(){
// create ul dom
return m('ul', {id:"routes"}, [
m('li', m('a', {'href':'#!/inline'}, "inline")),
m('li', m('a', {'href':'#!/tree'}, "tree")),
]
);
var lang = m.route.param('lang');
var path = m.route.get().match(/^(\/[^\/]+)(\/[^\/|#]+)(.*)$/);
console.log('Route menu Path', path);
return m('nav', {id:'routes'}, [
// TODO: replaced labels with localized content
m('h3', 'Routes'),
m('ul', [
m('li', m('a', {
'href':'/'+lang+'/inline'+path[3],
oncreate : m.route.link,
onupdate : m.route.link
}, "inline")),
m('li', m('a', {
'href':'/'+lang+'/tree'+path[3],
oncreate : m.route.link,
onupdate : m.route.link
}, "tree")),
])
]);
}
}
@@ -40,31 +86,36 @@ var _RouteMenu = {
// /____/
var _LangMenu = {
view: function(){
var path = m.route.get().match(/^\/[^\/]+(.+)$/);
// console.log('Lang menu Path', path);
// create ul dom
return m('ul', {id:"languages"}, _dbs.langs.map(function(lang){
return m('nav', {id:'languages'}, [
// TODO: replaced labels with localized content
m('h3', 'languages'),
m('ul', _dbs.langs.map(function(lang){
// create li dom for each lank link
return m('li',
// create a dom
m('a', {
'lang':lang.lc,
'href':'/?lang='+lang.lc,
onclick:function(e){
e.preventDefault();
// console.log('click lang', e);
var lang = e.target.getAttribute('lang');
console.log(lang);
if(lang != _dbs.lang){
// change url variable
// change db
_dbs.lang = lang;
// redraw UI
// m.redraw();
}
return false;
}
'href':'/'+lang.lc+path[1]
// onclick:function(e){
// e.preventDefault();
// // console.log('click lang', e);
// var lang = e.target.getAttribute('lang');
// // console.log(lang);
// if(lang != _dbs.lang){
// // change url variable
// // change db
// _dbs.lang = lang;
// // redraw UI
// // m.redraw();
// }
// return false;
// }
}, lang.label)
);
})
);
}))
]);
}
}
assets/modules/inline.js
+21 -10
View File
@@ -8,6 +8,7 @@ var markdown = require('markdown-it')()
var _dbs = require('./dbs');
var _Header = require('./header');
var _Footer = require('./footer');
var _Ui = require('./ui.js');
// __ _ __
// / / (_)___ / /__
@@ -134,7 +135,7 @@ var _Text = {
},
oninit: function(vn){
this.id = vn.attrs.id;
this.text = vn.attrs.text;
this.text = vn.attrs.text || "";
this.parsetext();
},
onbeforeupdate: function(vn,old){
@@ -212,7 +213,7 @@ var _Enonce = {
this.id = vn.attrs.id;
this.title = vn.attrs.title;
this.text = vn.attrs.text;
this.childs = vn.attrs.childs;
this.childs = vn.attrs.childs || [];
this.nested = vn.attrs.nested || false;
},
onbeforeupdate:function(vn, old) {
@@ -250,12 +251,12 @@ var _Enonce = {
var _Part = {
oninit: function(vn){
this.id = vn.attrs.id;
this.title = vn.attrs.title;
this.title = vn.attrs.title || '';
this.enonces = vn.attrs.enonces;
},
onbeforeupdate: function(vn, old){
// console.log('_Part, onbeforeupdate old',old);
this.title = vn.attrs.title;
this.title = vn.attrs.title || '';
this.enonces = vn.attrs.enonces;
},
view: function(vn){
@@ -266,18 +267,20 @@ var _Part = {
},
[
// create title node
m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
// create text node
this.enonces.map(function(e){
console.log(e.type);
// console.log(e.type);
// var title = e.title || '';
switch (e.type) {
case "title":
// handle titles
// console.log('title');
return m("h2", {'class':'title'}, m.trust(markdown.renderInline(e.title)));
break;
case "filet":
// handle filets
// console.log('filet');
return m("h4", {'class':'filet'}, m.trust(markdown.renderInline(e.title)));
break;
default:
@@ -296,11 +299,18 @@ var _Part = {
// _/ // / / / /___/ / / / / __/
// /___/_/ /_/_____/_/_/ /_/\___/
module.exports = {
view: function(){
console.log('_Inline view', _dbs.lang);
// oninit : function(vn){
// this.lang = vn.attrs.lang;
// },
oncreate: function(vn){
document.body.classList.add('inline');
_Ui.init();
},
view: function(vn){
console.log('_Inline view', vn.attrs.lang);
return [
m(_Header),
m('main', {id:"content", 'class':'inline'}, _dbs.data[_dbs.lang].map(function(p){
m('main', {id:"content", 'class':'inline'}, _dbs.data[vn.attrs.lang].map(function(p){
// console.log("MAP _dbs", p);
return m(_Part,p);
})
@@ -308,4 +318,5 @@ module.exports = {
m(_Footer)
]
}
}
assets/modules/tree.js
+12 -6
View File
@@ -8,8 +8,7 @@ var markdown = require('markdown-it')()
var _dbs = require('./dbs');
var _Header = require('./header');
var _Footer = require('./footer');
// var _lang = require('../main.js')._langs;
var _Ui = require('./ui.js');
// ____ __
// / __ \____ / /_
@@ -298,7 +297,7 @@ var _Part = {
},
[
// create title node
m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
m("h1", {'class':'part-title', 'part':this.id}, m.trust(markdown.renderInline(this.title))),
// create text node
this.enonces.map(function(e){
// console.log(e.text);
@@ -329,11 +328,18 @@ var _Part = {
// / / / / / __/ __/
// /_/ /_/ \___/\___/
module.exports = {
view: function(){
// console.log('_Tree view', _dbs.lang);
// oninit : function(vn){
// this.lang = vn.attrs.lang;
// },
oncreate: function(vn){
document.body.classList.add('tree');
_Ui.init();
},
view: function(vn){
console.log('_Tree view', vn.attrs.lang);
return [
m(_Header),
m('main', {id:"content", 'class':'tree'}, _dbs.data[_dbs.lang].map(function(p){
m('main', {id:"content", 'class':'tree'}, _dbs.data[vn.attrs.lang].map(function(p){
return m(_Part,p);
})
),
assets/modules/ui.js
+114
View File
@@ -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
}
index.html
+3 -3
View File
@@ -3,10 +3,10 @@
<head>
<meta charset="utf-8">
<title>Ethica Spinoza</title>
<link rel="stylesheet" href="assets/dist/main.css">
<link rel="stylesheet" href="/assets/dist/main.css">
</head>
<body>
<script src="assets/dist/main.js" charset="utf-8"></script>
<script src="/assets/dist/main.js" charset="utf-8"></script>
</body>
</html>
package.json
+2 -1
View File
@@ -1,7 +1,7 @@
{
"name": "ethica",
"version": "1.0.0",
"description": "ethica hugo theme",
"description": "ethica",
"main": "js/main.js",
"author": "Bachir Soussi Chiadmi <bachir@g-u-i.me>",
"license": "GPL-3.0",
@@ -12,6 +12,7 @@
"dependencies": {
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"jquery": "^3.2.1",
"markdown-it": "^8.3.1",
"markdown-it-footnote": "^3.0.1",
"mithril": "^1.1.1",
yarn.lock
+6 -40
View File
@@ -131,10 +131,6 @@ async-foreach@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
async@0.2.x:
version "0.2.10"
resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
async@^2.1.2, async@^2.1.5:
version "2.3.0"
resolved "https://registry.yarnpkg.com/async/-/async-2.3.0.tgz#1013d1051047dd320fe24e494d5c66ecaf6147d9"
@@ -477,21 +473,6 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
dependencies:
delayed-stream "~1.0.0"
commander@^2.8.1:
version "2.9.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
dependencies:
graceful-readlink ">= 1.0.0"
compression-webpack-plugin@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-0.4.0.tgz#811de04215f811ea6a12d4d8aed8457d758f13ac"
dependencies:
async "0.2.x"
webpack-sources "^0.1.0"
optionalDependencies:
node-zopfli "^2.0.0"
concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -680,12 +661,6 @@ deep-extend@~0.4.0:
version "0.4.1"
resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
defaults@^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
dependencies:
clone "^1.0.2"
defined@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
@@ -987,10 +962,6 @@ graceful-fs@^4.1.2:
version "4.1.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
"graceful-readlink@>= 1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
har-schema@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
@@ -1248,6 +1219,10 @@ jodid25519@^1.0.0:
dependencies:
jsbn "~0.1.0"
jquery@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"
js-base64@^2.1.8, js-base64@^2.1.9:
version "2.1.9"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
@@ -1549,7 +1524,7 @@ ms@0.7.2:
version "0.7.2"
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
nan@^2.0.0, nan@^2.3.0, nan@^2.3.2:
nan@^2.3.0, nan@^2.3.2:
version "2.6.1"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.1.tgz#8c84f7b14c96b89f57fbc838012180ec8ca39a01"
@@ -1599,7 +1574,7 @@ node-libs-browser@^2.0.0:
util "^0.10.3"
vm-browserify "0.0.4"
node-pre-gyp@^0.6.29, node-pre-gyp@^0.6.4:
node-pre-gyp@^0.6.29:
version "0.6.34"
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.34.tgz#94ad1c798a11d7fc67381b50d47f8cc18d9799f7"
dependencies:
@@ -1636,15 +1611,6 @@ node-sass@^4.5.3:
sass-graph "^2.1.1"
stdout-stream "^1.4.0"
node-zopfli@^2.0.0:
version "2.0.2"
resolved "https://registry.yarnpkg.com/node-zopfli/-/node-zopfli-2.0.2.tgz#a7a473ae92aaea85d4c68d45bbf2c944c46116b8"
dependencies:
commander "^2.8.1"
defaults "^1.0.2"
nan "^2.0.0"
node-pre-gyp "^0.6.4"
"nopt@2 || 3":
version "3.0.6"
resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"