ajax

user/pages/01.home/default.md

@@ -3,4 +3,4 @@ title: Home
 body_classes: 'title-center title-h1h2'
 ---
 
-**Figures Libres** est un collectif né de la rencontre de deux démarches citoyennes : porter des messages d'utilité [publique](/projets/publique), [sociale](/projets/sociale) et [culturelle](/projets/culturelle) ; Œuvrer sur logiciels libres pour créer sans consommer et libérer l'information. Nous sommes graphistes, développeurs, designers, photographes, artistes, enseignant⋅e⋅s, militant⋅e⋅s…  et croisons nos pratiques et compétences pour avancer plus loin à plusieurs. Convaincu⋅e⋅s que la création est un outil démocratique, nous partageons les convictions de nos commanditaires. Nous préférons maîtriser nos outils, plutôt que l'inverse, les adapter à nos envies et à vos besoins. Comme nous sommes joueur⋅euse⋅s et utopistes nous aimons les construire avec vous et les partager avec tous. Votre projet sera un site, une affiche, une campagne, une application, un livre, une exposition, une manifestation… tant mieux ! nous n'aimons pas les réponses toutes faites ; mais bien faites.
+**Figures Libres** est un collectif né de la rencontre de deux démarches citoyennes : porter des messages d'utilité [publique](/projets/publique?id=publique), [sociale](/projets/sociale?id=sociale) et [culturelle](/projets/culturelle?id=culturelle) ; Œuvrer sur logiciels libres pour créer sans consommer et libérer l'information. Nous sommes graphistes, développeurs, designers, photographes, artistes, enseignant⋅e⋅s, militant⋅e⋅s…  et croisons nos pratiques et compétences pour avancer plus loin à plusieurs. Convaincu⋅e⋅s que la création est un outil démocratique, nous partageons les convictions de nos commanditaires. Nous préférons maîtriser nos outils, plutôt que l'inverse, les adapter à nos envies et à vos besoins. Comme nous sommes joueur⋅euse⋅s et utopistes nous aimons les construire avec vous et les partager avec tous. Votre projet sera un site, une affiche, une campagne, une application, un livre, une exposition, une manifestation… tant mieux ! nous n'aimons pas les réponses toutes faites ; mais bien faites.

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>