ajax

user/themes/figureslibres/js/script_k.js

@@ -1,31 +1,147 @@
-var $culturelle = $('#text_figli p > a:nth-of-type(3)');
+var $link_txt = $('#text_figli p > a');
+var $link_list = $('.list-projets a');
+
+function ajax_txt($href,$this, this_id) {
+  var $link_txt = $('#text_figli > p');
+  var idlink_txt = $link_txt.attr("id");
+  var search_id =$link_txt.find('#' + this_id);
 
-function ajax() {
   $.ajax({
-     url : 'projets/culturelle.html', // La ressource ciblée
+     url : $href, // La ressource ciblée
      type : 'GET', // Le type de la requête HTTP
      dataType:'html',
      success: function(data) {
-         $(data).find('.card').insertAfter($culturelle);
+       $(data).find('.card').addClass(this_id).insertAfter(search_id);
+
+       var $card = $('#text_figli .card .card-image > a');
+
+       $card.click(function(e) {
+         e.preventDefault();
+         var $this = $(this);
+         var $href = $this.attr("href");
+         var this_id = $this.parent('.card-image').attr("id");
+
+         if ($this.parent('.card-image').hasClass('views')) {
+           $('#'+this_id+' #item').remove();
+           $this.parent('.card-image').removeClass("views");
+         }else{
+
+           $.ajax({
+             url : $href, // La ressource ciblée
+             type : 'GET', // Le type de la requête HTTP
+             dataType:'html',
+            success: function(data) {
+              $(data).find('#item').insertAfter($this);
+
+              $(window).on('resize', function(x){
+                var x = $this.offset();
+                var x = $this.offset();
+                var Wwindow = $('#text_figli').width();
+                var Wcard = $this.parents('.card').width();
+                var xcard = $this.offset().left;
+                var marginR = Wwindow - (Wcard + xcard);
+
+                console.log('x.left resize =',x.left);
+                $this.parent('.card-image').find('#item').css('margin-left', -x.left+8);
+                $this.parents('.card').css('margin-right', marginR);
+              });
+
+              var x = $this.offset();
+              var Wwindow = $('#text_figli').width();
+              var Wcard = $this.parents('.card').width();
+              var xcard = $this.offset().left;
+              var marginR = Wwindow - (Wcard + xcard);
+              // si la distance entre l'image précédente et la bord droit du text est supérieur ou égale
+              // a un card
+              // alors soustrai xcard a la marg calculer de this.
+              // sinon tu ne change rien
+              console.log('marginR', marginR);
+
+              // console.log('x.left',x.left);
+              // console.log('marginR',marginR.right);
+              $this.parent('.card-image').find('#item').css('margin-left', -x.left+8);
+              $this.parents('.card').css('margin-right', marginR);
+            }
+           });
+           $this.parent('.card-image').addClass('views');
+         }
+
+       });
+
      }
   });
 }
 
+function ajax_liste($href,$this, this_id) {
+  var $link_txt = $('#text_figli > p');
+  var idlink_txt = $link_txt.attr("id");
+  var search_id =$link_txt.find('#' + this_id);
+
+  console.log('$href',$href);
+  var url = $href.split("/");
+  var id = url[url.length - 2];
+  var projetc_name = url[url.length - 1];
+  console.log('projetc_name',projetc_name);
+
+  $.ajax({
+     url : '/projets/' + id, // La ressource ciblée
+     type : 'GET', // Le type de la requête HTTP
+     dataType:'html',
+     success: function(data) {
+       $(data).find('.card').addClass(this_id).insertAfter(search_id);
+     },
+     complete: function(){
+       // Handle the complete event
+       setTimeout( function(){
+         $.ajax({
+           url : '/projets/' + id + '/' + projetc_name, // La ressource ciblée
+           type : 'GET', // Le type de la requête HTTP
+           dataType:'html',
+           success: function(data) {
+             var $link_item = $('#text_figli > p > .card');
+             var idlink_txt = $link_txt.attr("id");
+             var search_id =$link_item.find('#' + projetc_name);
+             console.log('search_id',id);
+             $(data).find('#item').insertAfter(search_id);
+             console.log('complete2');
+           },
+         })
+       }, 2000);
+     }
+   });
+}
+
 function deploy() {
-  $culturelle.click(function(e){
-    $(this).addClass('marg');
-    e.preventDefault()
-
-    var $detectCard = $('#text_figli > p > .card');
-    if ($detectCard[0]) {
-      console.log(true);
-      $(".card").remove();
-      $(this).removeClass("marg");
+  $link_txt.click(function(e){
+    e.preventDefault();
+    var $this = $(this);
+    var $href = $this.attr("href");
+    var this_id = $this.attr("id");
+
+    if ($this.hasClass('open')) {
+      $('.card.'+this_id).remove();
+      $this.removeClass("open");
     }else{
-      console.log(false);
-      ajax();
+      ajax_txt($href, $this, this_id);
+      $this.addClass('open');
     }
   });
+
+  $link_list.click(function(e){
+    e.preventDefault();
+    var $this = $(this);
+    var $href = $this.attr("href");
+    var this_id = $this.attr("id");
+
+    if ($this.hasClass('open')) {
+      $('.card.'+this_id).remove();
+      $this.removeClass("open");
+    }else{
+      ajax_liste($href, $this, this_id);
+      $this.addClass('open');
+    }
+  });
+
 }
 
 jQuery(document).ready(function($){

user/themes/figureslibres/scss/configurations/_variable.scss

@@ -16,7 +16,6 @@ $Wi: 80%;
 $Wi50: calc(( 100% / 2 ) - (#{$margI} / 2));
 $Wi33: calc(( 100% / 3 ) - (#{$margI} / 3));
 
-
 // mobile
 $txt-figli-m: 1.5rem;
 
@@ -29,3 +28,19 @@ $txt-figli-t: 2.5rem;
 
 // line-height
 $Flhome-t: 3rem;
+
+// :root {
+//   --color: red;
+// }
+//
+// :root .category{
+//   --color:blue;
+// }
+//
+// .card{
+//   color: var(--color);
+// }
+//
+// :root .category{
+//   color: var(--color);
+// }

user/themes/figureslibres/scss/theme/_item.scss

@@ -1,4 +1,10 @@
 #item{
+  .e-content{
+    -webkit-columns: 300px 2;
+    -moz-columns: 300px 2;
+        columns: 300px 2;
+    margin-bottom: $marg;
+    }
   .card-image{
     img{
       margin-bottom: $marg;

user/themes/figureslibres/scss/theme/_start.scss

@@ -1,3 +1,6 @@
+*{
+  box-sizing: border-box;
+}
 html, body, header{
   background: #f9f9f9fe;
 }
@@ -10,15 +13,15 @@ body{
         p {
           a{
             position: relative;
-              &::after{
-                display: block;
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                transform: translate(-25%,-65%);
-                z-index: 999;
-              }
+            //   &::after{
+            //     display: block;
+            //     content: '';
+            //     position: absolute;
+            //     top: 0;
+            //     left: 0;
+            //     transform: translate(-25%,-65%);
+            //     z-index: 999;
+            //   }
             // &:hover{
             //   &::after{
             //     content: url('/user/themes/figureslibres/images/ovale.svg');
@@ -34,15 +37,15 @@ body{
           }
         }
         .card{
-          width: calc(100% / 4);
+          width: calc((100% / 3) - ( #{$marg} * 2) );
           height: auto;
-          overflow: hidden;
+          // overflow: hidden;
           display: inline-block;
           vertical-align: top;
           line-height: 0;
           margin-right: $marg;
           position: relative;
-          margin-top: $marg;
+          margin-top: $marg;        
           .card-header{
             display: none;
             & > *{
@@ -62,8 +65,12 @@ body{
               transform: translateY(-100%);
             }
           }
-          &:last-child{
-            vertical-align: baseline;
+          &:last-of-type{
+            vertical-align: baseline!important;
+          }
+          #item{
+            width: calc( 307% - #{$marg} );
+            // margin-left: -50vw;
           }
         }
       }

user/themes/figureslibres/scss/theme/_typography.scss

@@ -32,13 +32,13 @@ header{
       position: relative;
       &:nth-child(1){
       }
-      &:nth-child(2){
+      &#publique{
         font-family: $playfair;
       }
-      &:nth-child(3){
+      &#sociale{
         font-family: $syne;
       }
-      &:nth-child(4){
+      &#culturelle{
         font-family: $avara;
       }
     }
@@ -52,9 +52,13 @@ header{
     & > * {
       margin-right: $marg;
       font-size: 1.15rem;
+      font-weight: bold;
     }
     h2{
       margin: 0 $marg 0 0;
+      a{
+        font-weight: bold;
+      }
     }
   }
 }

user/themes/figureslibres/templates/partials/blog-list-item.html.twig

@@ -1,7 +1,11 @@
+{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'-', 'é':'e', ',':'',':':'','.':'','(':'',')':'','?':'', "’": '','ê':'e' }) }}{% endmacro %}
+
+{% import _self as macro %}
+
 <div class="card">
     {% set image = page.media.images|first %}
     {% if image %}
-      <div class="card-image">
+      <div id="{{ macro.pageLinkName(page.title) }}" class="card-image">
           <a href="{{ page.url }}">{{ image.html("", "Projet") }}</a>
       </div>
     {% endif %}

user/themes/figureslibres/templates/partials/blog/other_projets.html.twig

@@ -1,6 +1,6 @@
 <div class="other_projets">
   <h3>Les autres projets <span class="{{page.parent.title|lower}}">{{page.parent.title|lower}}s</span></h3>
-  {% set collection_random = page.parent.collection|slice(1,3) %}
+  {% set collection_random = page.parent.collection|slice(1,4) %}
 
   {% for item in collection_random %}
     {% if item.title == page.title == false %}

user/themes/figureslibres/templates/partials/blog/title.html.twig

@@ -1,4 +1,5 @@
 {% set title_level = title_level ?: 'h2' %}
+
 {% if page.header.link %}
     <{{ title_level }}>
         {% if page.header.continue_link is not same as(false) %}

user/themes/figureslibres/templates/partials/taxonomylist.html.twig

@@ -15,7 +15,7 @@
 
     {% for i in my_collection %}
       <li>
-        <a href="{{i.url}}">{{i.title}}</a>
+        <a id="{{i.parent.folder}}" href="{{i.url}}">{{i.title}}</a>
       </li>
     {% endfor %}
   </ul>