added animation to edlp loader, created edlp_ajax_node module

sites/all/modules/figli/edlp_ajax_node/edlp_ajax_node.info.yml

@@ -0,0 +1,11 @@
+# @Author: Bachir Soussi Chiadmi <bach>
+# @Email:  bachir@figureslibres.io
+# @Filename: edlp_ajax_node.info.yml
+# @License: GPL-V3
+
+
+name: Edlp Ajax Node
+type: module
+description: Manage ajax node loading for edlp d8.
+core: 8.x
+package: Edlp

sites/all/modules/figli/edlp_ajax_node/edlp_ajax_node.module

@@ -0,0 +1,21 @@
+<?php
+
+# @Author: Bachir Soussi Chiadmi <bach>
+# @Email:  bachir@figureslibres.io
+# @Filename: edlp_ajax_node.module
+# @License: GPL-V3
+
+/**
+ * Implements hook_theme().
+ */
+function edlp_ajax_node_theme($existing, $type, $theme, $path) {
+  // @see https://www.drupal.org/docs/8/theming/twig/create-custom-twig-templates-from-custom-module
+  return array(
+    'edlp_ajax_node' => array(
+      'file' => 'includes/edlp_ajax_node.inc',
+      'variables' => array(
+        'node' => NULL
+      ),
+    ),
+  );
+}

sites/all/modules/figli/edlp_ajax_node/edlp_ajax_node.routing.yml

@@ -0,0 +1,23 @@
+# @Author: Bachir Soussi Chiadmi <bach>
+# @Date:   13-12-2017
+# @Email:  bachir@figureslibres.io
+# @Filename: edlp_corpus.routing.yml
+# @Last modified by:   bach
+# @Last modified time: 20-12-2017
+# @License: GPL-V3
+
+edlp_ajax_node.node:
+  path: '/edlp/node/{nid}'
+  defaults:
+    _controller: '\Drupal\edlp_ajax_node\Controller\EdlpAjaxNodeController::node'
+    _title: 'Node'
+  requirements:
+    _permission: 'access content'
+
+edlp_ajax_node.ajaxnode:
+  path: '/edlp/node/{nid}/ajax'
+  defaults:
+    _controller: '\Drupal\edlp_ajax_node\Controller\EdlpAjaxNodeController::nodejson'
+    _title: 'AjaxNode'
+  requirements:
+    _permission: 'access content'

sites/all/modules/figli/edlp_ajax_node/includes/edlp_ajax_node.inc

@@ -0,0 +1,12 @@
+<?php
+
+// use Drupal\Core\Url;
+
+function template_preprocess_edlp_ajax_node(&$vars){
+  // dpm($vars);
+/*
+  @see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity
+  */
+  $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
+  $vars['node'] = $view_builder->view($vars['node'], 'default');
+}

sites/all/modules/figli/edlp_ajax_node/src/Controller/EdlpAjaxNodeController.php

@@ -0,0 +1,54 @@
+<?php
+
+namespace Drupal\edlp_ajax_node\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Symfony\Component\HttpFoundation\JsonResponse;
+
+
+class EdlpAjaxNodeController extends ControllerBase {
+
+  private function query() {
+    $this->node = entity_load('node', $this->nid);
+  }
+
+  private function toRenderable(){
+    $this->query();
+    // dpm($this->future_nodes);
+    return array(
+      "#theme"=>'edlp_ajax_node',
+      '#node' => $this->node,
+    );
+  }
+
+  /**
+   * Display node as a page.
+   *
+   * @return renderable array
+   */
+  public function node($nid) {
+    $this->nid = $nid;
+    return $this->toRenderable();
+  }
+
+  /**
+   * Get node as json through ajax.
+   *
+   * @return json
+   */
+  public function nodejson($nid) {
+    $this->nid = $nid;
+    $response = new JsonResponse();
+    $renderable = $this->toRenderable();
+    $rendered = render($renderable);
+
+    $response->setData([
+      'test'=>'hello edlp ajax node',
+      'nid' => $this->nid,
+      'rendered'=> $rendered
+    ]);
+
+    return $response;
+  }
+
+}

sites/all/modules/figli/edlp_ajax_node/templates/edlp-ajax-node.html.twig

@@ -0,0 +1 @@
+{{ node }}

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

@@ -29,6 +29,7 @@ edlp_vars = {
     var _is_front = _$body.is('.path-frontpage');
     var _$corpus_map;
     var _$content_container = $('.layout-container>main>.layout-content');
+    var _$ajaxLinks;
 
     function init(){
       console.log("EdlpTheme init()");
@@ -53,30 +54,59 @@ edlp_vars = {
     //  / _ \ | / _` \ \ /
     // /_/ \_\/ \__,_/_\_\
     //      |__/
+
+    // TODO: add url hash nav
+    // TODO: implement history.js
     function  initAjaxLinks(){
       console.log('initAjaxLinks');
-      $('a', '#block-mainnavigation').on('click', onClickAjaxLink);
+      $('a', '#block-mainnavigation, #block-footer.menu--footer').addClass('ajax-link');
+
+      _$ajaxLinks = $('.ajax-link')
+        .each(function(i,e){
+          var $this = $(this);
+          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]);
+          }
+        })
+        .on('click', onClickAjaxLink);
+      ;
     };
 
     function onClickAjaxLink(e){
       e.preventDefault();
-      // TODO: drupal settings not defined on NOT front page
+      var $link = $(this);
+
+      if($link.is('.is-active'))
+        return false;
+
       var sys_path = $(this).attr('data-drupal-link-system-path');
+      if(sys_path == '<front>'){
+        closeAllModals();
+        return false;
+      }
+
+      // TODO: drupal settings not defined on NOT front page
       var path = window.location.origin + drupalSettings.basepath + sys_path +'/ajax';
       closeAllModals();
       _$body.addClass('ajax-loading');
+      $link.addClass('ajax-loading');
       $.getJSON(path, {}, function(data){
-        onAjaxLinkLoaded(data, sys_path);
+        onAjaxLinkLoaded(data, $link, sys_path);
       });
 
       return false;
     };
 
-    function onAjaxLinkLoaded(data, sys_path){
+    function onAjaxLinkLoaded(data, $link, sys_path){
       console.log('ajax link loaded : data', data);
       _$content_container.html(data.rendered);
-      _$body.removeClass().addClass('path-'+sys_path);
       _$body.removeClass('ajax-loading');
+      _$body.removeClass().addClass('path-'+sys_path);
+      _$ajaxLinks.removeClass('is-active');
+      $link.removeClass('ajax-loading').addClass('is-active');
       initScrollbars();
     };
 
@@ -95,6 +125,9 @@ edlp_vars = {
       console.log('theme : closeAllModals');
       // TODO: animate the remove
       _$content_container.html('');
+      _$ajaxLinks.removeClass('is-active');
+      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
+
     };
 
     init();

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

@@ -1202,6 +1202,25 @@ header[role="banner"] {
           height: 0.6em;
           border: 1px solid #000;
           margin-right: 0.3em; }
+        #block-mainnavigation ul li a.ajax-loading:before {
+          -webkit-animation: rotation 2s infinite linear;
+          animation: rotation 2s infinite linear; }
+
+@-webkit-keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg); } }
+
+@keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg); } }
         #block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a:hover:before {
           border-color: red;
           background-color: red; }
@@ -1249,16 +1268,16 @@ body.ajax-loading main[role="main"]:before {
   content: "";
   display: block;
   position: absolute;
-  width: 50px;
+  width: 60px;
-  height: 50px;
+  height: 60px;
-  top: calc(50% - 25px);
+  top: calc(50% - 30px);
-  left: calc(50% - 25px);
+  left: calc(50% - 30px);
   background-color: white;
-  background-image: url(../../img/edlp-loader.svg);
+  background-image: url(../../img/edlp-loader-anim.svg);
   background-size: 50%;
   background-repeat: no-repeat;
   background-position: center;
-  border-radius: 25px; }
+  border-radius: 30px; }
 
 body.path-agenda main .col, body.path-agenda main .col > .wrapper {
   height: 100%; }

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

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+  width="40"
+  height="40"
+  fill="#ffffff"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect
+    id="bg"
+    x="0" y="0"
+    width="40" height="40"
+    >
+  </rect>
+  <rect
+    id="blak-line"
+    x="0" y="19"
+    width="50" height="2"
+    fill="#000000"
+    transform="rotate(315 22 26)">
+  </rect>
+  <rect
+    id="red-line"
+    x="11" y="18"
+    width="18" height="4"
+    fill="#ff0004"
+    transform="rotate(45 20 20)">
+  </rect>
+  <animate
+    xlink:href="#red-line"
+    attributeName="y"
+    from="1"
+    to="1"
+    dur="1.5s"
+    values="1;18;35;18;1"
+    keyTimes="0;0.25;0.5;0.75;1"
+    keySplines=".42 0 1 1;
+                0 0 .59 1;
+                .42 0 1 1"
+    fill="freeze"
+    begin="0s"
+    repeatCount="indefinite"
+    id="red-anim-one"/>
+</svg>

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

@@ -1,6 +1,4 @@
 <?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#"
@@ -9,45 +7,35 @@
    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"
+   width="40"
-   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">
+   viewBox="0 0 10.583333 10.583334"
-  <defs
+   version="1.1"
-     id="defs2">
+   id="svg8"
-    <inkscape:path-effect
+   sodipodi:docname="edlp-loader.svg"
-       effect="interpolate_points"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
-       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" />
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1025"
+     id="namedview941"
+     showgrid="false"
+     inkscape:zoom="22.5"
+     inkscape:cx="20"
+     inkscape:cy="20"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <defs
+     id="defs2" />
   <metadata
      id="metadata5">
     <rdf:RDF>
@@ -61,19 +49,20 @@
     </rdf:RDF>
   </metadata>
   <g
-     inkscape:label="Calque 1"
+     transform="translate(0,-286.41665)"
-     inkscape:groupmode="layer"
+     id="layer1">
-     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"
+       style="fill:#000000;fill-opacity:1;"
-       d="M 0.28364121,296.71886 C 10.346939,286.74502 10.346939,286.74502 10.346939,286.74502"
+       d="m 10.160156,286.55664 c -3.3541666,3.32487 -6.7083332,6.64974 -10.06249975,9.97461 0.13135558,0.1048 0.26232471,0.31854 0.3939252,0.35431 3.34720715,-3.31732 6.69441435,-6.63465 10.04162155,-9.95197 -0.124349,-0.12565 -0.248698,-0.2513 -0.373047,-0.37695 z"
-       id="path815"
+       id="black-line"
        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"
+       style="fill:#ff0004;fill-opacity:1;"
-       d="m 3.636975,290.03857 c 3.3566295,3.38673 3.3566295,3.38673 3.3566295,3.38673"
+       d="m 4.0136719,289.66602 c -0.250651,0.24805 -0.5013021,0.49609 -0.7519531,0.74414 1.1184896,1.12891 2.2369791,2.25781 3.3554687,3.38672 0.250651,-0.24805 0.5013021,-0.4961 0.7519531,-0.74415 -1.1184896,-1.1289 -2.2369791,-2.25781 -3.3554687,-3.38671 z"
-       id="path815-9"
+       id="red-line"
-       inkscape:connector-curvature="0" />
+       inkscape:connector-curvature="0" >
+        <!-- <animateMotion path="H 20 Z" dur="2s" repeatCount="indefinite" /> -->
+        
+    </path>
   </g>
 </svg>

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

@@ -6,6 +6,7 @@
     var _is_front = _$body.is('.path-frontpage');
     var _$corpus_map;
     var _$content_container = $('.layout-container>main>.layout-content');
+    var _$ajaxLinks;
 
     function init(){
       console.log("EdlpTheme init()");
@@ -30,30 +31,59 @@
     //  / _ \ | / _` \ \ /
     // /_/ \_\/ \__,_/_\_\
     //      |__/
+
+    // TODO: add url hash nav
+    // TODO: implement history.js
     function  initAjaxLinks(){
       console.log('initAjaxLinks');
-      $('a', '#block-mainnavigation').on('click', onClickAjaxLink);
+      $('a', '#block-mainnavigation, #block-footer.menu--footer').addClass('ajax-link');
+
+      _$ajaxLinks = $('.ajax-link')
+        .each(function(i,e){
+          var $this = $(this);
+          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]);
+          }
+        })
+        .on('click', onClickAjaxLink);
+      ;
     };
 
     function onClickAjaxLink(e){
       e.preventDefault();
-      // TODO: drupal settings not defined on NOT front page
+      var $link = $(this);
+
+      if($link.is('.is-active'))
+        return false;
+
       var sys_path = $(this).attr('data-drupal-link-system-path');
+      if(sys_path == '<front>'){
+        closeAllModals();
+        return false;
+      }
+
+      // TODO: drupal settings not defined on NOT front page
       var path = window.location.origin + drupalSettings.basepath + sys_path +'/ajax';
       closeAllModals();
       _$body.addClass('ajax-loading');
+      $link.addClass('ajax-loading');
       $.getJSON(path, {}, function(data){
-        onAjaxLinkLoaded(data, sys_path);
+        onAjaxLinkLoaded(data, $link, sys_path);
       });
 
       return false;
     };
 
-    function onAjaxLinkLoaded(data, sys_path){
+    function onAjaxLinkLoaded(data, $link, sys_path){
       console.log('ajax link loaded : data', data);
       _$content_container.html(data.rendered);
-      _$body.removeClass().addClass('path-'+sys_path);
       _$body.removeClass('ajax-loading');
+      _$body.removeClass().addClass('path-'+sys_path);
+      _$ajaxLinks.removeClass('is-active');
+      $link.removeClass('ajax-loading').addClass('is-active');
       initScrollbars();
     };
 
@@ -72,6 +102,9 @@
       console.log('theme : closeAllModals');
       // TODO: animate the remove
       _$content_container.html('');
+      _$ajaxLinks.removeClass('is-active');
+      $('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
+
     };
 
     init();

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

@@ -90,6 +90,13 @@ header[role="banner"]{
           border: 1px solid #000;
           margin-right: 0.3em;
         }
+        &.ajax-loading:before{
+          @keyframes rotation {
+            from {transform: rotate(0deg);}
+            to   {transform: rotate(359deg);}
+          }
+          animation: rotation 2s infinite linear;
+        }
         &.is-active:before,
         &:hover:before{
           border-color: red;
@@ -144,11 +151,11 @@ main[role="main"]{
     content:"";
     display: block;
     position: absolute;
-    $s:50px;
+    $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.svg);
+    background-image: url(../../img/edlp-loader-anim.svg);
     background-size: 50%;
     background-repeat: no-repeat;
     background-position: center;

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

@@ -0,0 +1,7 @@
+<div class="row">
+  <div class="col small-col-12 med-col-12 large-col-8 ">
+    <div class="wrapper">
+      {{ node }}
+    </div>
+  </div>
+</div>