position ajax

web/themes/custom/popsu_colloque/css/layout.css

@@ -12,3 +12,14 @@ article img,
   height: 100%;
   object-fit: cover;
 }
+
+.layout-content > div{
+  display: flex;
+}
+.side_notes{
+  position: relative;
+}
+
+.side_notes > *{
+  position: absolute;
+}

web/themes/custom/popsu_colloque/js/script.js

@@ -3,34 +3,52 @@ function notes() {
   var $link = $('#presentation a');
   $link.each(function(){
     $(this).click(function(e) {
-      if ($(this).is('#ressource')) {
+      $this = $(this);
+      if ( $this.is('#ressource') || $this.is('#publication') ) {
         e.preventDefault();
-        var $url = $(this).attr("href");
+
+        var $url = $this.attr("href");
 
         if ($( ".side_notes" )[0]) {
           $( ".side_notes" ).remove();
         }
-
-        $("<div class='side_notes'/>").insertAfter("article");
-
-        ajax($url);
-      }else{
-        // nothing
+        content_type($url, $this);
+        ajax($url, $this);
       }
     });
   })
 
-  function ajax($url) {
+  function content_type($url, $this) {
+    if ($this.is('#ressource')) {
+      $("<div class='side_notes'><a href="+$url+"></a> </div>").insertAfter("article");
+    }else if ( $this.is('#publication') ) {
+      console.log('clcik');
+      $("<div class='side_notes'></>").insertAfter("article");
+    }
+  }
+
+  function ajax($url , $this) {
     $.ajax({
       url: $url,
       method: "GET",
       dataType:'html',
       async: true,
       success: function(data) {
+        if ($this.is('#ressource')) {
+          $(data).find('article > div:not(.__wrap_side) .__wrapper').appendTo('.side_notes a');
+        }else if ($this.is('#publication')) {
           $(data).find('article > div:not(.__wrap_side) .__wrapper').appendTo('.side_notes');
+        }
+        position_link($this);
       },
     })
   }
+
+  function position_link($this) {
+    var $top_link = $this.position().top;
+    console.log($top_link);
+    $('.side_notes > *').css("top", $top_link);
+  }
 }
 
 $( document ).ready(function() {