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

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 {