created production menu block, styled links, ajaxified links

sites/all/modules/figli/edlp_productions/src/Controller/ProductionsController.php

@@ -80,6 +80,8 @@ class ProductionsController extends ControllerBase {
     $renderable = $this->toRenderable();
     $rendered = render($renderable);
 
+    // TODO: add menu production block
+
     $response->setData([
       'test'=>'hello',
       'rendered'=> $rendered

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

@@ -62,19 +62,25 @@ edlp_vars = {
     // TODO: implement history.js
     function  initAjaxLinks(){
       console.log('initAjaxLinks');
-      $('a', '#block-mainnavigation, #block-footer.menu--footer').addClass('ajax-link');
+      $('a', '#block-mainnavigation, #block-footer.menu--footer, #block-productions').addClass('ajax-link');
 
       _$ajaxLinks = $('.ajax-link')
         .each(function(i,e){
           var $this = $(this);
+
+          // avoid already ajaxified links
+          if($this.is('.ajax-enable'))
+            return;
+
           var sys_path = $this.attr('data-drupal-link-system-path');
           if(sys_path){
             // convert node link to edlp_ajax_node module links
             m = sys_path.match(/^\/?(node\/\d+)$/g);
             if(m) $this.attr('data-drupal-link-system-path', 'edlp/'+m[0]);
           }
+          $this.on('click', onClickAjaxLink).addClass('ajax-enable');
         })
-        .on('click', onClickAjaxLink);
+
       ;
     };
 
@@ -103,7 +109,7 @@ edlp_vars = {
     };
 
     function onAjaxLinkLoaded(data, $link, sys_path){
-      console.log('ajax link loaded : data', data);
+      console.log('ajax link loaded');
       _$content_container.html(data.rendered);
       _$body.removeClass('ajax-loading');
       // add body class for currently loaded content
@@ -118,10 +124,11 @@ edlp_vars = {
       $link.removeClass('ajax-loading').addClass('is-active');
 
       initScrollbars();
-      console.log(sys_path);
+
-      if(sys_path == "productions"){
+      if(sys_path == "productions")
-        window.requestAnimationFrame(initProductions);
+        initProductions();
-      }
+
+      initAjaxLinks();
 
     };
 

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

@@ -1405,6 +1405,32 @@ footer {
           font-size: 0.756em; }
         footer .block-language ul li.is-active a {
           color: red; }
+  footer #block-productions ul {
+    white-space: nowrap; }
+    footer #block-productions ul li a {
+      pointer-events: all;
+      background-color: #fff;
+      padding-right: 0.4em; }
+      footer #block-productions ul li a:before {
+        content: "";
+        display: inline-block;
+        width: 7px;
+        height: 7px;
+        border: 1px solid red;
+        margin-right: 0.5em; }
+      footer #block-productions ul li a:hover:before {
+        background-color: red; }
+      footer #block-productions ul li a.ajax-loading:before {
+        -webkit-animation: rotation 2s infinite linear;
+        animation: rotation 2s infinite linear; }
+
+@keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg); } }
   footer .block-block-edlp-entrees {
     display: inline-block; }
     footer .block-block-edlp-entrees ul {

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

@@ -39,19 +39,25 @@
     // TODO: implement history.js
     function  initAjaxLinks(){
       console.log('initAjaxLinks');
-      $('a', '#block-mainnavigation, #block-footer.menu--footer').addClass('ajax-link');
+      $('a', '#block-mainnavigation, #block-footer.menu--footer, #block-productions').addClass('ajax-link');
 
       _$ajaxLinks = $('.ajax-link')
         .each(function(i,e){
           var $this = $(this);
+
+          // avoid already ajaxified links
+          if($this.is('.ajax-enable'))
+            return;
+
           var sys_path = $this.attr('data-drupal-link-system-path');
           if(sys_path){
             // convert node link to edlp_ajax_node module links
             m = sys_path.match(/^\/?(node\/\d+)$/g);
             if(m) $this.attr('data-drupal-link-system-path', 'edlp/'+m[0]);
           }
+          $this.on('click', onClickAjaxLink).addClass('ajax-enable');
         })
-        .on('click', onClickAjaxLink);
+
       ;
     };
 
@@ -80,7 +86,7 @@
     };
 
     function onAjaxLinkLoaded(data, $link, sys_path){
-      console.log('ajax link loaded : data', data);
+      console.log('ajax link loaded');
       _$content_container.html(data.rendered);
       _$body.removeClass('ajax-loading');
       // add body class for currently loaded content
@@ -95,10 +101,11 @@
       $link.removeClass('ajax-loading').addClass('is-active');
 
       initScrollbars();
-      console.log(sys_path);
+
-      if(sys_path == "productions"){
+      if(sys_path == "productions")
-        window.requestAnimationFrame(initProductions);
+        initProductions();
-      }
+
+      initAjaxLinks();
 
     };
 

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

@@ -25,6 +25,14 @@ header[role="banner"]{
   pointer-events: all;
 }
 
+@mixin spining-loader-square{
+  @keyframes rotation {
+    from {transform: rotate(0deg);}
+    to   {transform: rotate(359deg);}
+  }
+  animation: rotation 2s infinite linear;
+}
+
 #block-edlptheme-branding{
   display: inline-block;
   h1{
@@ -91,11 +99,7 @@ header[role="banner"]{
           margin-right: 0.3em;
         }
         &.ajax-loading:before{
-          @keyframes rotation {
+          @include spining-loader-square;
-            from {transform: rotate(0deg);}
-            to   {transform: rotate(359deg);}
-          }
-          animation: rotation 2s infinite linear;
         }
         &.is-active:before,
         &:hover:before{
@@ -228,9 +232,7 @@ body.path-productions{
       >.wrapper{
         margin-bottom: 1em;
         padding:0;
-        >*{
+        >*{padding:0;}
-          padding:0;
-        }
 
         article.node{
           .field--name-field-visuel{
@@ -307,16 +309,9 @@ footer{
     // outline: 1px dotted purple;
     // position: relative;
   }
-  .region-footer-left{
+  .region-footer-left{text-align: left;}
-    text-align: left;
+  .region-footer-center{text-align: center;}
-  }
+  .region-footer-right{text-align: right;min-width: 30px;}
-  .region-footer-center{
-    text-align: center;
-  }
-  .region-footer-right{
-    text-align: right;
-    min-width: 30px;
-  }
 
   nav.block-menu{
     display: inline-block;
@@ -362,6 +357,34 @@ footer{
     }
   }
 
+  #block-productions{
+    ul{
+      white-space: nowrap;
+      li{
+        a{
+          // outline: 1px solid blue;
+          pointer-events: all;
+          background-color: #fff;
+          padding-right: 0.4em;
+          &:before{
+            content: "";
+            display:inline-block;
+            $sq:7px;
+            width: $sq; height:$sq;
+            border: 1px solid red;
+            margin-right: 0.5em;
+          }
+          &:hover:before{
+            background-color: red;
+          }
+          &.ajax-loading:before{
+            @include spining-loader-square;
+          }
+        }
+      }
+    }
+  }
+
   .block-block-edlp-entrees{
     display: inline-block;
     // vertical-align: top;

sites/default/config/sync/block.block.productions.yml

@@ -0,0 +1,29 @@
+uuid: e389b1e8-b7f4-4d95-b994-aec2084b6404
+langcode: fr
+status: true
+dependencies:
+  config:
+    - system.menu.productions
+  module:
+    - system
+  theme:
+    - edlptheme
+id: productions
+theme: edlptheme
+region: footer_center
+weight: 0
+provider: null
+plugin: 'system_menu_block:productions'
+settings:
+  id: 'system_menu_block:productions'
+  label: Productions
+  provider: system
+  label_display: '0'
+  level: 1
+  depth: 1
+visibility:
+  request_path:
+    id: request_path
+    pages: "/productions\r\n/productions/*"
+    negate: false
+    context_mapping: {  }

sites/default/config/sync/system.menu.productions.yml

@@ -1,5 +1,5 @@
 uuid: 0f3cb8e8-0a25-4d13-a7a9-d6879d44bfed
-langcode: fr
+langcode: und
 status: true
 dependencies: {  }
 id: productions