Browse Source

in my way to display full titles on connection mode

Bachir Soussi Chiadmi 6 years ago
parent
commit
f69747ac0a
7 changed files with 159 additions and 163 deletions
  1. 22 34
      assets/dist/main.css
  2. 0 0
      assets/dist/main.js
  3. 0 0
      assets/dist/main.js.map
  4. 71 46
      assets/main.scss
  5. 30 79
      assets/modules/ModeConnections.js
  6. 5 4
      assets/modules/dbs.js
  7. 31 0
      webpack.config.js

+ 22 - 34
assets/dist/main.css

@@ -745,32 +745,31 @@ header {
   width: 100%;
   background-color: white; }
   .sticky-clone-wrapper h1.part-title {
-    font-size: 1.6em; }
-    body.mode-connections .sticky-clone-wrapper h1.part-title {
-      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; }
+    margin: 0 0 0 70px; }
 
 main#content {
   margin-top: 5em; }
-  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; }
 
 section.intro {
   margin-left: 70px; }
 
+h1.part-title {
+  font-size: 1.8em;
+  margin: 0 0 0 70px;
+  font-weight: normal;
+  letter-spacing: 0.3em; }
+  h1.part-title em {
+    font-size: 0.7em;
+    letter-spacing: normal; }
+
+h2.title {
+  font-size: 1.2em;
+  font-weight: normal;
+  margin: 1em 0 0 70px;
+  line-height: 1; }
+
 main#content.mode-text h1.part-title {
   margin: 1em 0 0 70px; }
 
@@ -813,33 +812,27 @@ main#content.mode-text section.enonce {
       main#content.mode-text section.enonce div.text div.paragraph img {
         float: left; }
 
-main#content.mode-connections h1.part-title {
-  margin: 0 0 0 70px; }
-
-main#content.mode-connections h2.title, main#content.mode-connections h4.filet {
-  margin: 0 0 0 70px; }
-
 .dot {
   margin: 0 0 0 70px;
   position: relative;
   border: 1px solid white;
-  width: 500px; }
+  width: 550px; }
   .dot > p.summary {
     display: inline-block;
     vertical-align: top;
-    margin: 0;
+    margin: 0 0 0 0.6em;
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
-    width: 385px; }
-  .dot:not(.disabled) > p.summary {
+    max-width: 475px; }
+  .dot:not(.disabled) > span.title, .dot:not(.disabled) > p.summary {
     cursor: pointer; }
-  .dot.disabled > p.summary {
+  .dot.disabled > span.title, .dot.disabled > p.summary {
     cursor: default; }
   .dot > section.text {
     display: inline-block;
     vertical-align: top;
     margin: 0;
-    width: 385px; }
+    width: 435px; }
     .dot > section.text p {
       margin: 0; }
       .dot > section.text p:not(:last-child) {
@@ -876,13 +869,8 @@ main#content.mode-connections h2.title, main#content.mode-connections h4.filet {
   .dot:hover > p.summary, .dot.opened > p.summary, .dot.highlight > p.summary {
     opacity: 1;
     transition: opacity 0.4s ease-in-out; }
-  .dot:hover > span.id, .dot.opened > span.id, .dot.highlight > span.id {
-    opacity: 1;
-    transition: opacity 0.4s ease-in-out; }
   .dot.disabled > * {
     color: grey; }
-  .dot:not(.opened) {
-    line-height: 0.7; }
 
 footer {
   position: fixed;

File diff suppressed because it is too large
+ 0 - 0
assets/dist/main.js


File diff suppressed because it is too large
+ 0 - 0
assets/dist/main.js.map


+ 71 - 46
assets/main.scss

@@ -22,7 +22,7 @@ html, body{
 }
 
 $header_height:5em;
-$dot_w:500px;
+$dot_w:550px;
 $bullet_w:40px;
 $margin_left:50px + ($bullet_w/2);
 
@@ -139,23 +139,23 @@ header{
   width:100%;
   background-color: white;
   h1.part-title{
-    font-size: 1.6em;
-    body.mode-connections &{
-      margin: 0 0 0 $margin_left;
-    }
-    body.mode-text &{
-      margin:0 0 0 $margin_left;
-    }
-  }
-  h2.title{
-    font-size: 1em;
-    body.mode-connections &{
-      margin: 0 0 0 $margin_left;
-    }
-    body.mode-text &{
+    // // font-size: 1.6em;
+    // // body.mode-connections &{
+    // //   margin: 0 0 0 $margin_left;
+    // }
+    // body.mode-text &{
       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{
@@ -166,20 +166,20 @@ main#content{
   //   width: 450px;
   // }
 
-  h1.part-title{
-    font-size: 1.6em;
-    width:450px;
-  }
+  // 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;
-  }
+  // h2.title, h2.filet{
+  //   font-size: 1em;
+  //   width:450px;
+  //   // margin: 1em 0;
+  // }
 
 }
 
@@ -187,6 +187,28 @@ section.intro{
   margin-left: $margin_left;
 }
 
+// Commons
+
+h1.part-title{
+  font-size: 1.8em;
+  margin:0 0 0 $margin_left;
+  font-weight: normal;
+  letter-spacing: 0.3em;
+  em{
+    font-size: 0.7em;
+    letter-spacing: normal;
+  }
+}
+
+h2.title{
+  font-size: 1.2em;
+  font-weight: normal;
+  margin:1em 0 0 $margin_left;
+  line-height: 1;
+}
+
+
+
 //     ____      __    _
 //    /  _/___  / /   (_)___  ___
 //    / // __ \/ /   / / __ \/ _ \
@@ -271,13 +293,9 @@ main#content.mode-text{
 //  / / / /  /  __/  __/
 // /_/ /_/   \___/\___/
 main#content.mode-connections{
-
-  h1.part-title{
-    margin:0 0 0 $margin_left;
-  }
-  h2.title, h4.filet{
-    margin:0 0 0 $margin_left;
-  }
+  // h2.title, h4.filet{
+  //   margin:0 0 0 $margin_left;
+  // }
 }
 .dot{
   margin:0 0 0 $margin_left;
@@ -305,17 +323,24 @@ main#content.mode-connections{
   //   font-size: 15px;
   //   font-kerning: none;
   // }
+  >span.title{
+  }
+
   >p.summary{
     display: inline-block;
     vertical-align: top;
-    margin: 0;
+    margin: 0 0 0 0.6em;
     opacity: 0;
     transition: opacity 0.4s ease-in-out;
-    width : $dot_w - $margin_left - $bullet_w -5px;
+    max-width : $dot_w - $margin_left -5px;
   }
-  &:not(.disabled) > p.summary{cursor: pointer;}
-  &.disabled > p.summary{cursor: default;}
-
+  &:not(.disabled) {
+    >span.title,>p.summary{cursor: pointer;}
+  }
+  &.disabled {
+    >span.title,>p.summary{cursor: default;}
+  }
+  
   >section.text{
     display: inline-block;
     vertical-align: top;
@@ -372,20 +397,20 @@ main#content.mode-connections{
       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;
-      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;
+    //   transition: opacity 0.4s ease-in-out;
+    // }
   }
   &.disabled>*{
     color:grey;
   }
 
-  &:not(.opened){
-    line-height: 0.7;
-  }
+  // &:not(.opened){
+  //   line-height: 0.8;
+  // }
 
 
 }

+ 30 - 79
assets/modules/ModeConnections.js

@@ -27,75 +27,12 @@ var _Dot = {
   links:null,
   parents:[],
   lang:_dbs.lang,
-  setupDotType(vn){
-    // var rx_id = /^(\d)(app|agd|\d\d|pr|ad|ap|c|p|d|a)(cd|sc|\d\d|d|c|a|l|p|\d)?(e|\d|sc)?(d|c|a|sc)?$/;
-    // var m = this.id.match(rx_id);
-    // if(m){
-    //   switch(true){
-    //     case /^\d{2}$/.test(m[2]):
-    //       switch(true){
-    //         case /^cd$/.test(m[3])    : this.dottype = 'corollaire-demo'; break;
-    //         case /^sc$/.test(m[3])    : this.dottype = 'scolie'; break;
-    //         case /^d$/.test(m[3])     : this.dottype = 'demonstration'; break;
-    //         case /^c$/.test(m[3])     :
-    //           switch(true){
-    //             case /^sc$/.test(m[4]): this.dottype = 'scolie'; break;
-    //             case /^d$/.test(m[4]) : this.dottype = 'demonstration'; break;
-    //             case /^d$/.test(m[5]) : this.dottype = 'demonstration'; break;
-    //             case /^sc$/.test(m[5]): this.dottype = 'scolie'; break;
-    //             case /^\d$/.test(m[4]): this.dottype = 'corollaire'; break;
-    //             case !m[4]            : this.dottype = 'corollaire'; break;
-    //           }
-    //           break;
-    //         case /^a$/.test(m[3])     : this.dottype = 'axiom'; break;
-    //         case /^l$/.test(m[3])     :
-    //           switch(true){
-    //             case /^d$/.test(m[5]) : this.dottype = 'demonstration'; break;
-    //             case /^sc$/.test(m[5]): this.dottype = 'scolie'; break;
-    //             case !m[5]            : this.dottype = 'lemme'; break;
-    //           }
-    //           break;
-    //         case /^p$/.test(m[3])     : this.dottype = 'postulat'; break;
-    //         case /^\d$/.test(m[3])    : this.dottype = '??'; break;
-    //         case /^\d{2}$/.test(m[3]) : this.dottype = '??'; break;
-    //         case !m[3]                : this.dottype = 'proposition'; break;
-    //       }
-    //       break;
-    //     case /^app|ap$/.test(m[2])    : this.dottype = 'appendice'; break;
-    //     case /^agd$/.test(m[2])       : this.dottype = 'def-gen-affect'; break;
-    //     case /^pr$/.test(m[2])        : this.dottype = 'preface'; break;
-    //     case /^ad$/.test(m[2])        :
-    //       switch(true){
-    //         case /^e$/.test(m[4])     :this.dottype = 'explication'; break;
-    //         case !m[4]                :this.dottype = 'def-affect'; break;
-    //       }
-    //       break;
-    //     case /^c$/.test(m[2])         : this.dottype = 'chapitre'; break;
-    //     case /^p$/.test(m[2])         : this.dottype = 'postulat'; break;
-    //     case /^d$/.test(m[2])         :
-    //       switch(true){
-    //         case /^e$/.test(m[4])     : this.dottype = 'explication'; break;
-    //         case !m[4]                : this.dottype = 'definition'; break;
-    //       }
-    //       break;
-    //     case /^a$/.test(m[2])         : this.dottype = 'axiom'; break;
-    //   }
-    //   // }
-    // }
-    // console.log(`${this.id} -> ${this.dottype}`,m);
-    //
-    // // TODO: fix false ids
-    // // we have app and ap for appendice (1app | 4ap)
-    // // 213def ??
-    // // 209cd demo ou corollaire-demo ??
-    // // 210csc scolie ou corollaire-scolie ??
-    // // 213l1d demo ??
-  },
   setupTitle(vn){
     this.title = vn.attrs.title;
     if(!this.title){
       this.title = this.type;
     }
+    this.title = markdown.renderInline(this.title);
   },
   setuptext(vn){
     // console.log('setuptext', vn);
@@ -113,16 +50,15 @@ var _Dot = {
 
   },
   oninit(vn){
+    // console.log('Dot init : vn',vn);
     this.id = vn.attrs.id;
     this.type = vn.attrs.type;
-    // this.title = vn.attrs.title || "title";
-    // this.setupDotType(vn);
     this.dottype = vn.attrs.dottype;
 
     this.setupTitle(vn);
     this.setuptext(vn);
 
-    console.log(`${this.id} -> ${this.dottype}`);
+    // console.log(`${this.id} -> ${this.dottype}`);
 
     if(typeof vn.attrs.active !== 'undefined')
       this.active = vn.attrs.active;
@@ -150,6 +86,7 @@ var _Dot = {
     if(this.lang != _dbs.lang){
       this.lang = _dbs.lang;
       this.setuptext(vn);
+      this.setupTitle(vn);
     }
   },
   view(vn){
@@ -158,15 +95,17 @@ var _Dot = {
       // console.log('_Dot view '+this.id+' parents :',this.parents);
       var dot_content = [
         // links to
-        // TODO: add dottype class to nested dots
         this.links.to.length
           ? m('nav', {'class':'links to'}, this.links.to.map(id => {
               // console.log(id);
               if(typeof _dbs.data_byid[_dbs.lang][id] !== 'undefined'){
+                var obj = _dbs.data_byid[_dbs.lang][id];
+                // console.log('link to : obj', obj);
                 return m(_Dot, {
                   "id":id,
-                  'text':_dbs.data_byid[_dbs.lang][id].text,
-                  'type':'',
+                  'text':obj.text,
+                  'dottype':obj.dottype,
+                  'type':obj.type,
                   // passe the memory of crossed dots plus the current one
                   'parents':vn.state.parents.concat([vn.state.id]),
                   // activate link only if not in parents (already went through it)
@@ -175,7 +114,7 @@ var _Dot = {
               }
             })
           )
-          : null,
+          : null, // if no links to, add nothing
         // id
         // m('span', {'class':'id'}, this.id), // this.type+' '+
         // bullet
@@ -214,12 +153,14 @@ var _Dot = {
         // links from
         this.links.from.length
           ? m('nav', {'class':'links from'}, this.links.from.map(id => {
-              // retrun a dot
-              // TODO: add dottype class to nested dots
+              var obj = _dbs.data_byid[_dbs.lang][id];
+              // console.log('link from : obj', obj);
+              // return a dot
               return m(_Dot, {
                 "id":id,
-                'text':_dbs.data_byid[_dbs.lang][id].text,
-                'type':'',
+                'text':obj.text,
+                'dottype':obj.dottype,
+                'type':obj.type,
                 // passe the memory of crossed dots plus the current one
                 'parents':vn.state.parents.concat([vn.state.id]),
                 // activate link only if not in parents (already went through it)
@@ -227,14 +168,20 @@ var _Dot = {
               });
             })
           )
-          : null
+          : null, // if no links from, add nothing
       ];
     }else{
       // preview dot
       var dot_content = [
           // m('span', {'class':'id'}, this.id), // this.type+' '+
           // m('span', {'class':'bullet'}, m.trust('•')),
-          m('span', {'class':'title'}, m.trust(this.title)),
+          m('span', {
+            'class':'title',
+            onclick(e){
+              // TODO: animate openening (text and links separatly)
+              vn.state.opened = true;
+            }
+          }, m.trust(this.title)), // TODO: on nested dot add full description : Part 1, Prop 8, scolie
           m('p', {
             'class':'summary',
             onclick(e){
@@ -247,7 +194,11 @@ var _Dot = {
 
     return m('div',{
         'uid':this.id,
-        'class':`dot ${this.dottype}`
+        'class':`dot ${this.dottype}`,
+        // onclick(e){
+        //   // TODO: animate openening (text and links separatly)
+        //   vn.state.opened = true;
+        // }
       },
       dot_content
     );
@@ -352,7 +303,7 @@ var _Enonce = {
     // 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, 'dottype':this.dottype}),
+      m(_Dot, {"id":this.id, 'text':this.text, 'type':this.title, 'dottype':this.dottype}),
       // addd children
       this.childs.map(c => { return m(_Child, c); })
     ]

+ 5 - 4
assets/modules/dbs.js

@@ -78,6 +78,7 @@ module.exports = {
 
   },
   parseByID(callback){
+    // create a id keyed array of contents
     // loop through laguages
     for(l in this.data){
       // console.log('l', l);
@@ -93,18 +94,18 @@ module.exports = {
               // guess the type from the id
               // console.log(this.data[l][p].enonces[e].id);
               this.data[l][p].enonces[e].dottype = this.setupType(this.data[l][p].enonces[e].id);
+              // records childs in array keyed by ids
+              this.data_byid[l][this.data[l][p].enonces[e].id] = this.data[l][p].enonces[e];
             }
-            // records childs in flat array by ids
-            this.data_byid[l][this.data[l][p].enonces[e].id] = this.data[l][p].enonces[e];
             // loop through childs
             for (c in this.data[l][p].enonces[e].childs){
               // console.log(_db[p][e][c]);
               if(this.data[l][p].enonces[e].childs[c].id){
                 // guess the type from the id
                 this.data[l][p].enonces[e].childs[c].dottype = this.setupType(this.data[l][p].enonces[e].childs[c].id);
+                // records childs in array keyed by ids
+                this.data_byid[l][this.data[l][p].enonces[e].childs[c].id] = this.data[l][p].enonces[e].childs[c];
               }
-              // records childs in flat array by ids
-              this.data_byid[l][this.data[l][p].enonces[e].childs[c].id] = this.data[l][p].enonces[e].childs[c];
             }
           }
         }

+ 31 - 0
webpack.config.js

@@ -45,9 +45,40 @@ module.exports = {
     }),
     new UglifyJsPlugin({
       sourceMap: true,
+      parallel:4,
       uglifyOptions: {
         ecma: 8,
+        // disable most of compress to gain in compilation speed
+        // https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1
         compress: {
+          arrows: false,
+          booleans: false,
+          // cascade: false,
+          collapse_vars: false,
+          comparisons: false,
+          computed_props: false,
+          hoist_funs: false,
+          hoist_props: false,
+          hoist_vars: false,
+          if_return: false,
+          inline: false,
+          join_vars: false,
+          keep_infinity: true,
+          loops: false,
+          negate_iife: false,
+          properties: false,
+          reduce_funcs: false,
+          reduce_vars: false,
+          sequences: false,
+          side_effects: false,
+          switches: false,
+          top_retain: false,
+          toplevel: false,
+          typeofs: false,
+          unused: false,
+          conditionals: false,
+          dead_code: true,
+          evaluate: false,
           warnings: false
         },
       }

Some files were not shown because too many files changed in this diff