added on/off switch to corpus-map, added loader svg for ajax (remains to animate it

sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js

@@ -20,8 +20,9 @@
 (function($) {
 
   EdlpCorpus = function(){
+    var _activated = false;
     var _$container = $('body');
-    var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
+    var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
     var _canvas = _$canvas[0];
     var _ctx = _canvas.getContext('2d');
     var _canvas_props = {
@@ -31,7 +32,7 @@
       'margin_left':0
     };
     var _physics = new Physics();
-    // var _stage = new createjs.Stage('edlp-map');
+    // var _stage = new createjs.Stage('corpus-map');
     var _nodes = [];
     // var _particules = [];
     var _base_radius = 3; // nodes radius (real radius, not diametre)
@@ -60,7 +61,11 @@
       console.log("EdlpCorpus initMap()");
       // console.log('_physics',_physics);
       initCanvas();
-      loadCorpus();
+      if(_activated){
+        loadCorpus();
+      }else{
+        _$canvas.addClass('de-activated');
+      }
     };
 
     //    ______

sites/all/modules/figli/edlp_corpus/assets/dist/styles/corpus.min.css

@@ -1,7 +1,9 @@
-canvas#edlp-map {
+canvas#corpus-map {
   position: absolute;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   top: 0;
   left: 0;
   z-index: 0; }
+  canvas#corpus-map.de-activated {
+    background-color: #f4f4f4; }

sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js

@@ -20,8 +20,9 @@
 (function($) {
 
   EdlpCorpus = function(){
+    var _activated = false;
     var _$container = $('body');
-    var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
+    var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
     var _canvas = _$canvas[0];
     var _ctx = _canvas.getContext('2d');
     var _canvas_props = {
@@ -31,7 +32,7 @@
       'margin_left':0
     };
     var _physics = new Physics();
-    // var _stage = new createjs.Stage('edlp-map');
+    // var _stage = new createjs.Stage('corpus-map');
     var _nodes = [];
     // var _particules = [];
     var _base_radius = 3; // nodes radius (real radius, not diametre)
@@ -60,7 +61,11 @@
       console.log("EdlpCorpus initMap()");
       // console.log('_physics',_physics);
       initCanvas();
-      loadCorpus();
+      if(_activated){
+        loadCorpus();
+      }else{
+        _$canvas.addClass('de-activated');
+      }
     };
 
     //    ______

sites/all/modules/figli/edlp_corpus/assets/styles/corpus.scss

@@ -6,8 +6,10 @@
 // @Last modified time: 20-12-2017
 // @License: GPL-V3
 
-canvas#edlp-map{
-  // background-color: grey;
+canvas#corpus-map{
+  &.de-activated{
+    background-color: rgb(244, 244, 244);
+  }
   position: absolute;
   box-sizing: border-box;
   top:0; left:0;

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -25,37 +25,34 @@ edlp_vars = {
 
   EdlpTheme = function(){
 
-    var _is_front = $('body').is('.path-frontpage');
+    var _$body = $('body');
+    var _is_front = _$body.is('.path-frontpage');
     var _$corpus_map;
     var _$content_container = $('.layout-container>main>.layout-content');
 
     function init(){
       console.log("EdlpTheme init()");
-      // if(_is_front) initFront();
-
-      $('body').on('corpus-map-ready', onCorpusMapReady);
-
+      _$body.on('corpus-map-ready', onCorpusMapReady);
       initScrollbars();
-
       initAjaxLinks();
     };
 
-
-
-    // function initFront(){
-    //   console.log('theme : initFront');
-    // };
-
+    //  ___             _ _ ___
+    // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
+    // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
+    // |___/\__|_| \___/_|_|___/\__,_|_| /__/
     function initScrollbars(){
+      console.log("initScrollbars");
       $('.os-scroll').overlayScrollbars({
         overflowBehavior:{x:'h',y:'scroll'}
       });
-      // $('.row .col>*', 'main[role="main"]').overlayScrollbars({
-      //   overflowBehavior:{x:'h',y:'scroll'}
-      // });
     };
 
-    // ajax
+    //    _    _
+    //   /_\  (_)__ ___ __
+    //  / _ \ | / _` \ \ /
+    // /_/ \_\/ \__,_/_\_\
+    //      |__/
     function  initAjaxLinks(){
       console.log('initAjaxLinks');
       $('a', '#block-mainnavigation').on('click', onClickAjaxLink);
@@ -64,22 +61,29 @@ edlp_vars = {
     function onClickAjaxLink(e){
       e.preventDefault();
       // TODO: drupal settings not defined on NOT front page
-      var path = window.location.origin + drupalSettings.basepath + $(this).attr('data-drupal-link-system-path')+'/ajax';
-      $.getJSON(path, {}, onAjaxLinkLoaded);
+      var sys_path = $(this).attr('data-drupal-link-system-path');
+      var path = window.location.origin + drupalSettings.basepath + sys_path +'/ajax';
+      closeAllModals();
+      _$body.addClass('ajax-loading');
+      $.getJSON(path, {}, function(data){
+        onAjaxLinkLoaded(data, sys_path);
+      });
 
       return false;
     };
 
-    function onAjaxLinkLoaded(data){
+    function onAjaxLinkLoaded(data, sys_path){
       console.log('ajax link loaded : data', data);
-      $('main[role="main"] .layout-content').html(data.rendered);
+      _$content_container.html(data.rendered);
+      _$body.removeClass().addClass('path-'+sys_path);
+      _$body.removeClass('ajax-loading');
       initScrollbars();
     };
 
     // corpus
     function onCorpusMapReady(e){
       console.log('theme : onCorpusReady');
-      _$corpus_map = $('canvas#edlp-map');
+      _$corpus_map = $('canvas#corpus-map');
       _$corpus_map.on('corpus-cliked-on-map', function(e) {
         console.log('theme : corpus-cliked-on-map');
         closeAllModals();
@@ -89,7 +93,7 @@ edlp_vars = {
     //modals
     function closeAllModals(){
       console.log('theme : closeAllModals');
-      // TODO: animate the remove 
+      // TODO: animate the remove
       _$content_container.html('');
     };
 

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1127,6 +1127,9 @@ footer[role="contentinfo"] {
   bottom: 0;
   width: 100%; }
 
+.os-scroll {
+  height: 100%; }
+
 .layout-container {
   pointer-events: none; }
 
@@ -1211,6 +1214,7 @@ main[role="main"] .layout-content {
     overflow: hidden; }
     main[role="main"] .layout-content .row .col {
       pointer-events: all;
+      max-height: 100%;
       position: relative; }
       main[role="main"] .layout-content .row .col > .wrapper {
         position: relative;
@@ -1241,7 +1245,22 @@ main[role="main"] ul, main[role="main"] li, main[role="main"] ul.inline li:first
   padding: 0;
   list-style: none; }
 
-body.path-agenda main .col > .wrapper {
+body.ajax-loading main[role="main"]:before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+  background-color: white;
+  background-image: url(../../img/edlp-loader.svg);
+  background-size: 50%;
+  background-repeat: no-repeat;
+  background-position: center;
+  border-radius: 25px; }
+
+body.path-agenda main .col, body.path-agenda main .col > .wrapper {
   height: 100%; }
 
 #agenda {

sites/all/themes/custom/edlptheme/assets/img/edlp-loader.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   sodipodi:docname="edlp-loader.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
+   id="svg8"
+   version="1.1"
+   viewBox="0 0 10.583333 10.583334"
+   height="40"
+   width="40">
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="interpolate_points"
+       id="path-effect866"
+       is_visible="true"
+       interpolator_type="CentripetalCatmullRom" />
+  </defs>
+  <sodipodi:namedview
+     inkscape:window-maximized="1"
+     inkscape:window-y="28"
+     inkscape:window-x="0"
+     inkscape:window-height="1025"
+     inkscape:window-width="1920"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     inkscape:snap-bbox="true"
+     units="px"
+     showgrid="false"
+     inkscape:current-layer="layer1"
+     inkscape:document-units="mm"
+     inkscape:cy="12.514606"
+     inkscape:cx="17.614095"
+     inkscape:zoom="16"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-286.41665)">
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 0.28364121,296.71886 C 10.346939,286.74502 10.346939,286.74502 10.346939,286.74502"
+       id="path815"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#ff0004;stroke-width:1.05833328;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;image-rendering:optimizeSpeed"
+       d="m 3.636975,290.03857 c 3.3566295,3.38673 3.3566295,3.38673 3.3566295,3.38673"
+       id="path815-9"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -2,37 +2,34 @@
 
   EdlpTheme = function(){
 
-    var _is_front = $('body').is('.path-frontpage');
+    var _$body = $('body');
+    var _is_front = _$body.is('.path-frontpage');
     var _$corpus_map;
     var _$content_container = $('.layout-container>main>.layout-content');
 
     function init(){
       console.log("EdlpTheme init()");
-      // if(_is_front) initFront();
-
-      $('body').on('corpus-map-ready', onCorpusMapReady);
-
+      _$body.on('corpus-map-ready', onCorpusMapReady);
       initScrollbars();
-
       initAjaxLinks();
     };
 
-
-
-    // function initFront(){
-    //   console.log('theme : initFront');
-    // };
-
+    //  ___             _ _ ___
+    // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
+    // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
+    // |___/\__|_| \___/_|_|___/\__,_|_| /__/
     function initScrollbars(){
+      console.log("initScrollbars");
       $('.os-scroll').overlayScrollbars({
         overflowBehavior:{x:'h',y:'scroll'}
       });
-      // $('.row .col>*', 'main[role="main"]').overlayScrollbars({
-      //   overflowBehavior:{x:'h',y:'scroll'}
-      // });
     };
 
-    // ajax
+    //    _    _
+    //   /_\  (_)__ ___ __
+    //  / _ \ | / _` \ \ /
+    // /_/ \_\/ \__,_/_\_\
+    //      |__/
     function  initAjaxLinks(){
       console.log('initAjaxLinks');
       $('a', '#block-mainnavigation').on('click', onClickAjaxLink);
@@ -41,22 +38,29 @@
     function onClickAjaxLink(e){
       e.preventDefault();
       // TODO: drupal settings not defined on NOT front page
-      var path = window.location.origin + drupalSettings.basepath + $(this).attr('data-drupal-link-system-path')+'/ajax';
-      $.getJSON(path, {}, onAjaxLinkLoaded);
+      var sys_path = $(this).attr('data-drupal-link-system-path');
+      var path = window.location.origin + drupalSettings.basepath + sys_path +'/ajax';
+      closeAllModals();
+      _$body.addClass('ajax-loading');
+      $.getJSON(path, {}, function(data){
+        onAjaxLinkLoaded(data, sys_path);
+      });
 
       return false;
     };
 
-    function onAjaxLinkLoaded(data){
+    function onAjaxLinkLoaded(data, sys_path){
       console.log('ajax link loaded : data', data);
-      $('main[role="main"] .layout-content').html(data.rendered);
+      _$content_container.html(data.rendered);
+      _$body.removeClass().addClass('path-'+sys_path);
+      _$body.removeClass('ajax-loading');
       initScrollbars();
     };
 
     // corpus
     function onCorpusMapReady(e){
       console.log('theme : onCorpusReady');
-      _$corpus_map = $('canvas#edlp-map');
+      _$corpus_map = $('canvas#corpus-map');
       _$corpus_map.on('corpus-cliked-on-map', function(e) {
         console.log('theme : corpus-cliked-on-map');
         closeAllModals();
@@ -66,7 +70,7 @@
     //modals
     function closeAllModals(){
       console.log('theme : closeAllModals');
-      // TODO: animate the remove 
+      // TODO: animate the remove
       _$content_container.html('');
     };
 

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -110,7 +110,7 @@ main[role="main"]{
       overflow: hidden;
       .col{
         pointer-events:all;
-        // height: 100%;
+        max-height: 100%;
         position: relative;
         &>.wrapper{
           position: relative;
@@ -118,7 +118,7 @@ main[role="main"]{
           border-top: 1px solid red;
           border-bottom: 1px solid red;
           background-color: $transparent-bg;
-          max-height: 100%;
+          max-height: 100%; // this is not working :(
           padding:0 0 1em;
           &>*{
             padding:0 1em;
@@ -140,9 +140,25 @@ main[role="main"]{
     margin:0; padding:0;
     list-style: none;
   }
+  body.ajax-loading &:before{
+    content:"";
+    display: block;
+    position: absolute;
+    $s:50px;
+    width:$s; height:$s;
+    top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
+    background-color: white;
+    background-image: url(../../img/edlp-loader.svg);
+    background-size: 50%;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: $s/2;
+  }
 }
-body.path-agenda main .col>.wrapper{
-  height:100%;
+body.path-agenda main .col{
+  &, &>.wrapper{
+    height:100%;
+  }
 }
 #agenda{
   position: relative;

sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss

@@ -7,6 +7,7 @@ body, html{
   font-style: normal;
   margin:0;
   padding:0;
+  // background-color: rgb(219, 219, 219);
 }
 
 div.layout-container{
@@ -48,6 +49,10 @@ footer[role="contentinfo"]{
   width:100%;
 }
 
-canvas#edlp-map{
+canvas#corpus-map{
   // outline: 1px solid grey;
 }
+
+.os-scroll{
+  height: 100%;
+}

sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col small-col-12 med-col-6 large-col-3 ">
+  <div class="col small-col-12 med-col-12 large-col-8 ">
     <div class="wrapper">
       <div id="agenda">