added some fancy display and interactivity to dots
This commit is contained in:
Bachir Soussi Chiadmi
Vendored
+27
@@ -824,6 +824,33 @@ section.enonce {
|
||||
padding-left: 2em;
|
||||
border-left: 1px solid #999; }
|
||||
|
||||
.dot {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: transform 0.2s ease-in-out; }
|
||||
.dot span.id {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: -3.5em;
|
||||
opacity: 0;
|
||||
transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out; }
|
||||
.dot p.summary {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1em;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out; }
|
||||
.dot:hover, .dot.opened {
|
||||
transform: translate3d(0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out; }
|
||||
.dot:hover p.summary, .dot.opened p.summary {
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s ease-in-out; }
|
||||
.dot:hover span.id, .dot.opened span.id {
|
||||
opacity: 1;
|
||||
transform: translate3d(-0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out; }
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0; }
|
||||
|
||||
Vendored
+191
-3
@@ -2781,12 +2781,184 @@ init()
|
||||
|
||||
|
||||
var m = __webpack_require__(1);
|
||||
|
||||
// https://github.com/markdown-it/markdown-it
|
||||
var markdown = __webpack_require__(29)()
|
||||
.use(__webpack_require__(28));
|
||||
|
||||
var _dbs = __webpack_require__(2);
|
||||
var _Header = __webpack_require__(8);
|
||||
var _Footer = __webpack_require__(7);
|
||||
|
||||
// var _lang = require('../main.js')._langs;
|
||||
|
||||
// ____ __
|
||||
// / __ \____ / /_
|
||||
// / / / / __ \/ __/
|
||||
// / /_/ / /_/ / /_
|
||||
// /_____/\____/\__/
|
||||
var _Dot = {
|
||||
id:null,
|
||||
type:'',
|
||||
text:'',
|
||||
summary:'',
|
||||
opened:false,
|
||||
classes:['dot'],
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
this.type = vn.attrs.type;
|
||||
this.text = markdown.render(vn.attrs.text);
|
||||
// TODO: summary needs more work (strip tags, markdown render)
|
||||
this.summary = markdown.renderInline(vn.attrs.text.match('([^ ]*[ ]{0,1}){1,8}')[0]) + "…"
|
||||
},
|
||||
onbeforeupdate: function(vn){
|
||||
if (this.opened){
|
||||
this.classes.push('opened');
|
||||
}else{
|
||||
this.classes = ['dot'];
|
||||
}
|
||||
},
|
||||
view: function(vn){
|
||||
return m('div',{
|
||||
'id':this.id,
|
||||
'class':this.classes.join(' '),
|
||||
onclick:function(e){
|
||||
vn.state.opened = true;
|
||||
}
|
||||
},
|
||||
[
|
||||
m('span', {'class':'id'}, this.id), // this.type+' '+
|
||||
m('span', {'class':'bullet'}, m.trust('⚫')),
|
||||
m('p', {'class':'summary'}, m.trust(this.summary))
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
down vote
|
||||
Here's full list of black dotlikes from unicode
|
||||
|
||||
● - ● - Black Circle
|
||||
⏺ - ⏺ - Black Circle for Record
|
||||
⚫ - ⚫ - Medium Black Circle
|
||||
⬤ - ⬤ - Black Large Circle
|
||||
⧭ - ⧭ - Black Circle with Down Arrow
|
||||
🞄 - 🞄 - Black Slightly Small Circle
|
||||
• - • - Bullet
|
||||
∙ - ∙ - Bullet Operator
|
||||
⋅ - ⋅ - Dot Operator
|
||||
🌑 - 🌑 - New Moon Symbol
|
||||
*/
|
||||
|
||||
|
||||
// _______ _ __ __
|
||||
// / ___/ / (_) /__/ /
|
||||
// / /__/ _ \/ / / _ /
|
||||
// \___/_//_/_/_/\_,_/
|
||||
var _Child = {
|
||||
id:null,
|
||||
part:null,
|
||||
type:null,
|
||||
// nested:false,
|
||||
text:'',
|
||||
oninit: function(vn){
|
||||
// console.log('vn.attrs', vn.attrs);
|
||||
this.id = vn.attrs.id;
|
||||
this.type = vn.attrs.type;
|
||||
// vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
|
||||
this.text = vn.attrs.text;
|
||||
// this.nested = vn.attrs.nested || false;
|
||||
},
|
||||
onbeforeupdate: function(vn, old){
|
||||
// this.nested = vn.attrs.nested || false;
|
||||
this.type = vn.attrs.type;
|
||||
this.text = vn.attrs.text;
|
||||
},
|
||||
view: function(vn){
|
||||
return m(_Dot, {"id":this.id, 'text':this.text, 'type':this.type});
|
||||
}
|
||||
};
|
||||
|
||||
// ______
|
||||
// / ____/___ ____ ____ ________
|
||||
// / __/ / __ \/ __ \/ __ \/ ___/ _ \
|
||||
// / /___/ / / / /_/ / / / / /__/ __/
|
||||
// /_____/_/ /_/\____/_/ /_/\___/\___/
|
||||
var _Enonce = {
|
||||
partid:null,
|
||||
id:null,
|
||||
title:null,
|
||||
text:null,
|
||||
// nested:false,
|
||||
childs:[],
|
||||
oninit:function(vn){
|
||||
// // console.log('Enonce on init', vn);
|
||||
this.partid = vn.attrs.partid;
|
||||
this.id = vn.attrs.id;
|
||||
this.title = vn.attrs.title;
|
||||
this.text = vn.attrs.text;
|
||||
this.childs = vn.attrs.childs;
|
||||
// this.nested = vn.attrs.nested || false;
|
||||
},
|
||||
onbeforeupdate:function(vn, old) {
|
||||
// console.log(vn.attrs.childs);
|
||||
this.title = vn.attrs.title;
|
||||
this.text = vn.attrs.text;
|
||||
this.childs = vn.attrs.childs;
|
||||
// this.nested = vn.attrs.nested || false;
|
||||
// if(vn.attrs.id == '1d1') console.log('_Enonce UPDATE, text :', vn.attrs.text);
|
||||
},
|
||||
view: function(vn){
|
||||
// if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
|
||||
return [
|
||||
// create dot
|
||||
m(_Dot, {"id":this.id, 'text':this.text,'type':this.title}),
|
||||
// addd children
|
||||
this.childs.map(function(c){
|
||||
return m(_Child, c);
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ____ __
|
||||
// / __ \____ ______/ /_
|
||||
// / /_/ / __ `/ ___/ __/
|
||||
// / ____/ /_/ / / / /_
|
||||
// /_/ \__,_/_/ \__/
|
||||
var _Part = {
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
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.enonces = vn.attrs.enonces;
|
||||
},
|
||||
view: function(vn){
|
||||
// console.log(vn.attrs.enonces);
|
||||
return m("section", {
|
||||
'id' :this.id,
|
||||
'class' :'part'
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
|
||||
// create text node
|
||||
this.enonces.map(function(e){
|
||||
// console.log(e.text);
|
||||
return m(_Enonce, Object.assign({"partid":this.id},e))
|
||||
})
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ____ __
|
||||
// / __ \____ / /______
|
||||
// / / / / __ \/ __/ ___/
|
||||
@@ -2797,13 +2969,28 @@ module.exports = {
|
||||
console.log('_Dots view', _dbs.lang);
|
||||
return [
|
||||
m(_Header),
|
||||
m('main', {id:"content"}, "Hello dots !"),
|
||||
m('main', {id:"content", 'class':'dots'}, _dbs.data[_dbs.lang].map(function(p){
|
||||
return m(_Part,p);
|
||||
})
|
||||
),
|
||||
m(_Footer)
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// function(){
|
||||
// switch(_dbs.lang){
|
||||
// case 'fr':
|
||||
// return "Hello dots !";
|
||||
// break;
|
||||
// case 'bra':
|
||||
// return '"Hola dots !"'
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
/***/ }),
|
||||
/* 20 */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
@@ -2811,6 +2998,7 @@ module.exports = {
|
||||
|
||||
var m = __webpack_require__(1);
|
||||
|
||||
// https://github.com/markdown-it/markdown-it
|
||||
var markdown = __webpack_require__(29)()
|
||||
.use(__webpack_require__(28));
|
||||
|
||||
@@ -3075,7 +3263,7 @@ var _Part = {
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h1", {'class':'part'}, this.title),
|
||||
m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
|
||||
// create text node
|
||||
this.enonces.map(function(e){
|
||||
// console.log(e.text);
|
||||
@@ -3096,7 +3284,7 @@ module.exports = {
|
||||
console.log('_Tree view', _dbs.lang);
|
||||
return [
|
||||
m(_Header),
|
||||
m('main', {id:"content"}, _dbs.data[_dbs.lang].map(function(p){
|
||||
m('main', {id:"content", 'class':'tree'}, _dbs.data[_dbs.lang].map(function(p){
|
||||
// console.log("MAP _dbs", p);
|
||||
return m(_Part,p);
|
||||
})
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -83,6 +83,11 @@ h1.part{
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
// ______
|
||||
// /_ __/_______ ___
|
||||
// / / / ___/ _ \/ _ \
|
||||
// / / / / / __/ __/
|
||||
// /_/ /_/ \___/\___/
|
||||
section.enonce{
|
||||
width:450px;
|
||||
margin: 1em 0;
|
||||
@@ -134,6 +139,49 @@ section.enonce{
|
||||
}
|
||||
}
|
||||
|
||||
// ____ __
|
||||
// / __ \____ / /______
|
||||
// / / / / __ \/ __/ ___/
|
||||
// / /_/ / /_/ / /_(__ )
|
||||
// /_____/\____/\__/____/
|
||||
.dot{
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transform: translate3d(0,0,0);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
span.id{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left:-3.5em;
|
||||
opacity:0;
|
||||
// transform: translate3d(0, 0, 0);
|
||||
transition: transform 0.2s ease-in-out,opacity 0.4s ease-in-out;
|
||||
}
|
||||
span.bullet{
|
||||
}
|
||||
p.summary{
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1em;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
&:hover, &.opened{
|
||||
transform: translate3d(0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out;
|
||||
p.summary{
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s ease-in-out;
|
||||
}
|
||||
span.id{
|
||||
opacity: 1;
|
||||
transform: translate3d(-0.5em, 0, 0);
|
||||
transition: transform 0.1s ease-in-out,opacity 0.4s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
+188
-1
@@ -1,11 +1,183 @@
|
||||
|
||||
var m = require('mithril');
|
||||
|
||||
// https://github.com/markdown-it/markdown-it
|
||||
var markdown = require('markdown-it')()
|
||||
.use(require('markdown-it-footnote'));
|
||||
|
||||
var _dbs = require('./dbs');
|
||||
var _Header = require('./header');
|
||||
var _Footer = require('./footer');
|
||||
|
||||
// var _lang = require('../main.js')._langs;
|
||||
|
||||
// ____ __
|
||||
// / __ \____ / /_
|
||||
// / / / / __ \/ __/
|
||||
// / /_/ / /_/ / /_
|
||||
// /_____/\____/\__/
|
||||
var _Dot = {
|
||||
id:null,
|
||||
type:'',
|
||||
text:'',
|
||||
summary:'',
|
||||
opened:false,
|
||||
classes:['dot'],
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
this.type = vn.attrs.type;
|
||||
this.text = markdown.render(vn.attrs.text);
|
||||
// TODO: summary needs more work (strip tags, markdown render)
|
||||
this.summary = markdown.renderInline(vn.attrs.text.match('([^ ]*[ ]{0,1}){1,8}')[0]) + "…"
|
||||
},
|
||||
onbeforeupdate: function(vn){
|
||||
if (this.opened){
|
||||
this.classes.push('opened');
|
||||
}else{
|
||||
this.classes = ['dot'];
|
||||
}
|
||||
},
|
||||
view: function(vn){
|
||||
return m('div',{
|
||||
'id':this.id,
|
||||
'class':this.classes.join(' '),
|
||||
onclick:function(e){
|
||||
vn.state.opened = true;
|
||||
}
|
||||
},
|
||||
[
|
||||
m('span', {'class':'id'}, this.id), // this.type+' '+
|
||||
m('span', {'class':'bullet'}, m.trust('⚫')),
|
||||
m('p', {'class':'summary'}, m.trust(this.summary))
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
down vote
|
||||
Here's full list of black dotlikes from unicode
|
||||
|
||||
● - ● - Black Circle
|
||||
⏺ - ⏺ - Black Circle for Record
|
||||
⚫ - ⚫ - Medium Black Circle
|
||||
⬤ - ⬤ - Black Large Circle
|
||||
⧭ - ⧭ - Black Circle with Down Arrow
|
||||
🞄 - 🞄 - Black Slightly Small Circle
|
||||
• - • - Bullet
|
||||
∙ - ∙ - Bullet Operator
|
||||
⋅ - ⋅ - Dot Operator
|
||||
🌑 - 🌑 - New Moon Symbol
|
||||
*/
|
||||
|
||||
|
||||
// _______ _ __ __
|
||||
// / ___/ / (_) /__/ /
|
||||
// / /__/ _ \/ / / _ /
|
||||
// \___/_//_/_/_/\_,_/
|
||||
var _Child = {
|
||||
id:null,
|
||||
part:null,
|
||||
type:null,
|
||||
// nested:false,
|
||||
text:'',
|
||||
oninit: function(vn){
|
||||
// console.log('vn.attrs', vn.attrs);
|
||||
this.id = vn.attrs.id;
|
||||
this.type = vn.attrs.type;
|
||||
// vn.state.part = vn.state.slug.match(/^(\d)(.+)/)[1];
|
||||
this.text = vn.attrs.text;
|
||||
// this.nested = vn.attrs.nested || false;
|
||||
},
|
||||
onbeforeupdate: function(vn, old){
|
||||
// this.nested = vn.attrs.nested || false;
|
||||
this.type = vn.attrs.type;
|
||||
this.text = vn.attrs.text;
|
||||
},
|
||||
view: function(vn){
|
||||
return m(_Dot, {"id":this.id, 'text':this.text, 'type':this.type});
|
||||
}
|
||||
};
|
||||
|
||||
// ______
|
||||
// / ____/___ ____ ____ ________
|
||||
// / __/ / __ \/ __ \/ __ \/ ___/ _ \
|
||||
// / /___/ / / / /_/ / / / / /__/ __/
|
||||
// /_____/_/ /_/\____/_/ /_/\___/\___/
|
||||
var _Enonce = {
|
||||
partid:null,
|
||||
id:null,
|
||||
title:null,
|
||||
text:null,
|
||||
// nested:false,
|
||||
childs:[],
|
||||
oninit:function(vn){
|
||||
// // console.log('Enonce on init', vn);
|
||||
this.partid = vn.attrs.partid;
|
||||
this.id = vn.attrs.id;
|
||||
this.title = vn.attrs.title;
|
||||
this.text = vn.attrs.text;
|
||||
this.childs = vn.attrs.childs;
|
||||
// this.nested = vn.attrs.nested || false;
|
||||
},
|
||||
onbeforeupdate:function(vn, old) {
|
||||
// console.log(vn.attrs.childs);
|
||||
this.title = vn.attrs.title;
|
||||
this.text = vn.attrs.text;
|
||||
this.childs = vn.attrs.childs;
|
||||
// this.nested = vn.attrs.nested || false;
|
||||
// if(vn.attrs.id == '1d1') console.log('_Enonce UPDATE, text :', vn.attrs.text);
|
||||
},
|
||||
view: function(vn){
|
||||
// if(vn.attrs.id == '1d1') console.log('_Enonce VIEW, text :', vn.attrs.text);
|
||||
return [
|
||||
// create dot
|
||||
m(_Dot, {"id":this.id, 'text':this.text,'type':this.title}),
|
||||
// addd children
|
||||
this.childs.map(function(c){
|
||||
return m(_Child, c);
|
||||
})
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ____ __
|
||||
// / __ \____ ______/ /_
|
||||
// / /_/ / __ `/ ___/ __/
|
||||
// / ____/ /_/ / / / /_
|
||||
// /_/ \__,_/_/ \__/
|
||||
var _Part = {
|
||||
oninit: function(vn){
|
||||
this.id = vn.attrs.id;
|
||||
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.enonces = vn.attrs.enonces;
|
||||
},
|
||||
view: function(vn){
|
||||
// console.log(vn.attrs.enonces);
|
||||
return m("section", {
|
||||
'id' :this.id,
|
||||
'class' :'part'
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
|
||||
// create text node
|
||||
this.enonces.map(function(e){
|
||||
// console.log(e.text);
|
||||
return m(_Enonce, Object.assign({"partid":this.id},e))
|
||||
})
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ____ __
|
||||
// / __ \____ / /______
|
||||
// / / / / __ \/ __/ ___/
|
||||
@@ -16,8 +188,23 @@ module.exports = {
|
||||
console.log('_Dots view', _dbs.lang);
|
||||
return [
|
||||
m(_Header),
|
||||
m('main', {id:"content"}, "Hello dots !"),
|
||||
m('main', {id:"content", 'class':'dots'}, _dbs.data[_dbs.lang].map(function(p){
|
||||
return m(_Part,p);
|
||||
})
|
||||
),
|
||||
m(_Footer)
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// function(){
|
||||
// switch(_dbs.lang){
|
||||
// case 'fr':
|
||||
// return "Hello dots !";
|
||||
// break;
|
||||
// case 'bra':
|
||||
// return '"Hola dots !"'
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
|
||||
var m = require('mithril');
|
||||
|
||||
// https://github.com/markdown-it/markdown-it
|
||||
var markdown = require('markdown-it')()
|
||||
.use(require('markdown-it-footnote'));
|
||||
|
||||
@@ -265,7 +266,7 @@ var _Part = {
|
||||
},
|
||||
[
|
||||
// create title node
|
||||
m("h1", {'class':'part'}, this.title),
|
||||
m("h1", {'class':'part'}, m.trust(markdown.renderInline(this.title))),
|
||||
// create text node
|
||||
this.enonces.map(function(e){
|
||||
// console.log(e.text);
|
||||
@@ -286,7 +287,7 @@ module.exports = {
|
||||
console.log('_Tree view', _dbs.lang);
|
||||
return [
|
||||
m(_Header),
|
||||
m('main', {id:"content"}, _dbs.data[_dbs.lang].map(function(p){
|
||||
m('main', {id:"content", 'class':'tree'}, _dbs.data[_dbs.lang].map(function(p){
|
||||
// console.log("MAP _dbs", p);
|
||||
return m(_Part,p);
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user