ajax
This commit is contained in:
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -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 deploy() {
|
||||
$culturelle.click(function(e){
|
||||
$(this).addClass('marg');
|
||||
e.preventDefault()
|
||||
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);
|
||||
|
||||
var $detectCard = $('#text_figli > p > .card');
|
||||
if ($detectCard[0]) {
|
||||
console.log(true);
|
||||
$(".card").remove();
|
||||
$(this).removeClass("marg");
|
||||
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() {
|
||||
$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($){
|
||||
|
||||
@@ -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);
|
||||
// }
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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) %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user