From b1598ae2316dc31c015ad89df910b2a0acbdb28a Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@g-u-i.me>
Date: Sat, 3 Mar 2018 12:55:15 +0100
Subject: [PATCH] added productions menu block to ajax load

---
 .../src/Controller/ProductionsController.php  | 26 +++++--
 .../edlptheme/assets/dist/scripts/main.min.js | 68 ++++++++++++++-----
 .../edlptheme/assets/dist/styles/app.min.css  | 13 ++++
 .../custom/edlptheme/assets/scripts/main.js   | 68 ++++++++++++++-----
 .../custom/edlptheme/assets/styles/app.scss   | 44 ++++++++----
 5 files changed, 166 insertions(+), 53 deletions(-)

diff --git a/sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php b/sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php
index f8cb80094..e3efdb899 100644
--- a/sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php
+++ b/sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php
@@ -9,8 +9,6 @@ use Symfony\Component\HttpFoundation\JsonResponse;
 
 class ProductionsController extends ControllerBase {
 
-// TODO: generate the menu, how ?
-
   private function query() {
     // TODO: get the production menu
     // @see https://api.drupal.org/api/drupal/core%21modules%21menu_ui%21menu_ui.module/8.6.x
@@ -42,8 +40,6 @@ class ProductionsController extends ControllerBase {
 
     $this->nodes = entity_load_multiple('node', $nids);
 
-    // TODO: apply right display
-
   }
 
 
@@ -66,9 +62,17 @@ class ProductionsController extends ControllerBase {
    * @return renderable array
    */
   public function productions() {
+    // $this.getProductionBlock();
     return $this->toRenderable();
   }
 
+
+  private function getProductionBlock(){
+    $block = \Drupal\block\Entity\Block::load('productions');
+
+    return $block;
+  }
+
   /**
    * Get agenda data as json through ajax.
    *
@@ -80,11 +84,21 @@ class ProductionsController extends ControllerBase {
     $renderable = $this->toRenderable();
     $rendered = render($renderable);
 
-    // TODO: add menu production block
+    // add menu production block
+    $block = $this->getProductionBlock();
+    $block_render = \Drupal::entityTypeManager()
+      ->getViewBuilder('block')
+      ->view($block);
+
 
     $response->setData([
       'test'=>'hello',
-      'rendered'=> $rendered
+      'rendered'=> $rendered,
+      'block' => array(
+        'rendered'=> \Drupal::service('renderer')->renderRoot($block_render),
+        'region'=> str_replace('_', '-', $block->getRegion()),
+        'id'=> preg_replace('/^[^:]+:(.+)$/', 'block-$1', $block->getPluginId())
+      )
     ]);
 
     return $response;
diff --git a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
index b1e5d687e..8d75fc4e5 100644
--- a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
+++ b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
@@ -69,8 +69,7 @@ edlp_vars = {
           var $this = $(this);
 
           // avoid already ajaxified links
-          if($this.is('.ajax-enable'))
-            return;
+          if($this.is('.ajax-enable')) return;
 
           var sys_path = $this.attr('data-drupal-link-system-path');
           if(sys_path){
@@ -93,36 +92,59 @@ edlp_vars = {
 
       var sys_path = $(this).attr('data-drupal-link-system-path');
       if(sys_path == '<front>'){
-        closeAllModals();
+        backToFrontPage();
         return false;
       }
 
-      var path = window.location.origin + drupalSettings.path.baseUrl + sys_path +'/ajax';
-      closeAllModals();
+      var path = window.location.origin + drupalSettings.path.baseUrl + sys_path;
       _$body.addClass('ajax-loading');
       $link.addClass('ajax-loading');
-      $.getJSON(path, {}, function(data){
-        onAjaxLinkLoaded(data, $link, sys_path);
-      });
+      // $.getJSON(path, {}, function(data){
+      //   onAjaxLinkLoaded(data, $link, sys_path);
+      // });
+      $.getJSON(path+'/ajax', {})
+        .done(function(data){
+          onAjaxLinkLoaded(data, $link, sys_path);
+        })
+        .fail(function(jqxhr, textStatus, error){
+          onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path);
+        });
 
       return false;
     };
 
-    function onAjaxLinkLoaded(data, $link, sys_path){
-      console.log('ajax link loaded');
-      _$content_container.html(data.rendered);
+    function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
+      console.warn('fail : error', jqxhr.responseText);
+      $link.removeClass('ajax-loading');
       _$body.removeClass('ajax-loading');
+    };
+
+    function onAjaxLinkLoaded(data, $link, sys_path){
+      console.log('ajax link loaded : data', data);
+      _$body.removeClass('ajax-loading');
+
+      // replace all content with newly loaded
+      _$content_container.html(data.rendered);
+
       // add body class for currently loaded content
       _$body.removeClass().addClass('path-'+sys_path.replace(/\//g, '-'));
-
       // id node add a generic path-node class to body
       m = sys_path.match(/^\/?(edlp\/node\/\d+)$/g);
-      if(m){
+      if(m)
         _$body.addClass('path-edlp-node');
-      }
+
+      // handle clicked link classes
       _$ajaxLinks.removeClass('is-active');
       $link.removeClass('ajax-loading').addClass('is-active');
 
+      // if block attached (eg : from edlp_productions module)
+      if(typeof data.block != 'undefined'){
+        // if block not already added
+        if(!$('#'+data.block.id, '.region-'+data.block.region).length){
+          $('.region-'+data.block.region).append(data.block.rendered);
+        }
+      }
+
       initScrollbars();
 
       if(sys_path == "productions")
@@ -142,7 +164,7 @@ edlp_vars = {
       _$corpus_map = $('canvas#corpus-map');
       _$corpus_map.on('corpus-cliked-on-map', function(e) {
         console.log('theme : corpus-cliked-on-map');
-        closeAllModals();
+        backToFrontPage();
       });
     }
 
@@ -170,6 +192,20 @@ edlp_vars = {
       // });
     };
 
+
+    //  ___            _   ___
+    // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
+    // | _| '_/ _ \ ' \  _|  _/ _` / _` / -_)
+    // |_||_| \___/_||_\__|_| \__,_\__, \___|
+    //                             |___/
+    function backToFrontPage(){
+      closeAllModals();
+      // assume we are going back to front page
+      $('body').removeClass().addClass('path-frontpage');
+      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
+
+    }
+
     //  __  __         _      _
     // |  \/  |___  __| |__ _| |___
     // | |\/| / _ \/ _` / _` | (_-<
@@ -179,8 +215,6 @@ edlp_vars = {
       // TODO: animate the remove
       _$content_container.html('');
       _$ajaxLinks.removeClass('is-active');
-      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
-
     };
 
     init();
diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
index 08d9e2324..4c9066fb5 100644
--- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
+++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
@@ -1265,10 +1265,19 @@ main[role="main"] ul, main[role="main"] li, main[role="main"] ul.inline li:first
   padding: 0;
   list-style: none; }
 
+main[role="main"] .layout-content {
+  -webkit-transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  opacity: 1; }
+
+body.ajax-loading main[role="main"] .layout-content {
+  opacity: 0.2; }
+
 body.ajax-loading main[role="main"]:before {
   content: "";
   display: block;
   position: absolute;
+  z-index: 10;
   width: 60px;
   height: 60px;
   top: calc(50% - 30px);
@@ -1405,6 +1414,8 @@ footer {
           font-size: 0.756em; }
         footer .block-language ul li.is-active a {
           color: red; }
+  body:not(.path-productions) footer #block-productions {
+    display: none; }
   footer #block-productions ul {
     white-space: nowrap; }
     footer #block-productions ul li a {
@@ -1433,6 +1444,8 @@ footer {
     transform: rotate(359deg); } }
   footer .block-block-edlp-entrees {
     display: inline-block; }
+    body:not(.path-frontpage) footer .block-block-edlp-entrees {
+      display: none; }
     footer .block-block-edlp-entrees ul {
       white-space: nowrap; }
       footer .block-block-edlp-entrees ul li {
diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js
index f202e5d0f..e1110753c 100644
--- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js
+++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js
@@ -46,8 +46,7 @@
           var $this = $(this);
 
           // avoid already ajaxified links
-          if($this.is('.ajax-enable'))
-            return;
+          if($this.is('.ajax-enable')) return;
 
           var sys_path = $this.attr('data-drupal-link-system-path');
           if(sys_path){
@@ -70,36 +69,59 @@
 
       var sys_path = $(this).attr('data-drupal-link-system-path');
       if(sys_path == '<front>'){
-        closeAllModals();
+        backToFrontPage();
         return false;
       }
 
-      var path = window.location.origin + drupalSettings.path.baseUrl + sys_path +'/ajax';
-      closeAllModals();
+      var path = window.location.origin + drupalSettings.path.baseUrl + sys_path;
       _$body.addClass('ajax-loading');
       $link.addClass('ajax-loading');
-      $.getJSON(path, {}, function(data){
-        onAjaxLinkLoaded(data, $link, sys_path);
-      });
+      // $.getJSON(path, {}, function(data){
+      //   onAjaxLinkLoaded(data, $link, sys_path);
+      // });
+      $.getJSON(path+'/ajax', {})
+        .done(function(data){
+          onAjaxLinkLoaded(data, $link, sys_path);
+        })
+        .fail(function(jqxhr, textStatus, error){
+          onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path);
+        });
 
       return false;
     };
 
-    function onAjaxLinkLoaded(data, $link, sys_path){
-      console.log('ajax link loaded');
-      _$content_container.html(data.rendered);
+    function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
+      console.warn('fail : error', jqxhr.responseText);
+      $link.removeClass('ajax-loading');
       _$body.removeClass('ajax-loading');
+    };
+
+    function onAjaxLinkLoaded(data, $link, sys_path){
+      console.log('ajax link loaded : data', data);
+      _$body.removeClass('ajax-loading');
+
+      // replace all content with newly loaded
+      _$content_container.html(data.rendered);
+
       // add body class for currently loaded content
       _$body.removeClass().addClass('path-'+sys_path.replace(/\//g, '-'));
-
       // id node add a generic path-node class to body
       m = sys_path.match(/^\/?(edlp\/node\/\d+)$/g);
-      if(m){
+      if(m)
         _$body.addClass('path-edlp-node');
-      }
+
+      // handle clicked link classes
       _$ajaxLinks.removeClass('is-active');
       $link.removeClass('ajax-loading').addClass('is-active');
 
+      // if block attached (eg : from edlp_productions module)
+      if(typeof data.block != 'undefined'){
+        // if block not already added
+        if(!$('#'+data.block.id, '.region-'+data.block.region).length){
+          $('.region-'+data.block.region).append(data.block.rendered);
+        }
+      }
+
       initScrollbars();
 
       if(sys_path == "productions")
@@ -119,7 +141,7 @@
       _$corpus_map = $('canvas#corpus-map');
       _$corpus_map.on('corpus-cliked-on-map', function(e) {
         console.log('theme : corpus-cliked-on-map');
-        closeAllModals();
+        backToFrontPage();
       });
     }
 
@@ -147,6 +169,20 @@
       // });
     };
 
+
+    //  ___            _   ___
+    // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
+    // | _| '_/ _ \ ' \  _|  _/ _` / _` / -_)
+    // |_||_| \___/_||_\__|_| \__,_\__, \___|
+    //                             |___/
+    function backToFrontPage(){
+      closeAllModals();
+      // assume we are going back to front page
+      $('body').removeClass().addClass('path-frontpage');
+      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
+
+    }
+
     //  __  __         _      _
     // |  \/  |___  __| |__ _| |___
     // | |\/| / _ \/ _` / _` | (_-<
@@ -156,8 +192,6 @@
       // TODO: animate the remove
       _$content_container.html('');
       _$ajaxLinks.removeClass('is-active');
-      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
-
     };
 
     init();
diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
index 48c37f508..29b091689 100644
--- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss
+++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
@@ -152,19 +152,31 @@ main[role="main"]{
     margin:0; padding:0;
     list-style: none;
   }
-  body.ajax-loading &:before{
-    content:"";
-    display: block;
-    position: absolute;
-    $s:60px;
-    width:$s; height:$s;
-    top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
-    background-color: white;
-    background-image: url(../../img/edlp-loader-anim.svg);
-    background-size: 50%;
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: $s/2;
+
+  // ajax loading effects
+  .layout-content{
+    transition: opacity 0.5s ease-in-out;
+    opacity: 1;
+  }
+  body.ajax-loading &{
+    .layout-content{
+      opacity:0.2;
+    }
+    &:before{
+      content:"";
+      display: block;
+      position: absolute;
+      z-index: 10;
+      $s:60px;
+      width:$s; height:$s;
+      top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
+      background-color: white;
+      background-image: url(../../img/edlp-loader-anim.svg);
+      background-size: 50%;
+      background-repeat: no-repeat;
+      background-position: center;
+      border-radius: $s/2;
+    }
   }
 }
 
@@ -358,6 +370,9 @@ footer{
   }
 
   #block-productions{
+
+    body:not(.path-productions) & {display:none}
+
     ul{
       white-space: nowrap;
       li{
@@ -386,6 +401,9 @@ footer{
   }
 
   .block-block-edlp-entrees{
+
+    body:not(.path-frontpage) & {display:none}
+
     display: inline-block;
     // vertical-align: top;
     ul{