kevin/Popsu-coloque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajax_notes

Browse Source
This commit is contained in:
kevin
2020-07-29 17:39:36 +02:00
parent b8dad034eb
commit 62e09ba0eb
9 changed files with 260 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/sites/development.services.yml
+3
View File
@@ -4,6 +4,9 @@
# 'example.settings.local.php' file, which sits next to this file.
parameters:
http.response.debug_cacheability_headers: true
twig.config:
debug: true
auto_reload: true
services:
cache.backend.null:
class: Drupal\Core\Cache\NullBackendFactory
web/themes/custom/popsu_colloque/css-compiled/index.css
+31 -7
View File
File diff suppressed because one or more lines are too long
web/themes/custom/popsu_colloque/css-compiled/index.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/popsu_colloque/css/configs/mixin.scss
+16 -2
View File
@@ -29,8 +29,8 @@
transition: 0.3s transform ease, 0.3s box-shadow ease;
&:hover{
transform: scale(1.05);
transition: 0.3s all ease;
box-shadow: 0px 0px 13px 0px $color2;
transition: 0.3s transform ease, 0.3s box-shadow ease;
}
}
@@ -46,7 +46,21 @@
transition: 0.3s all ease;
box-shadow: 0px 0px 13px 0px $color2;
}
}
}
}
@mixin shadow_side_note{
img{
box-shadow: none;
transition: 0.3s transform ease, 0.3s box-shadow ease;
}
&:hover{
& > div img{
transform: scale(1.05);
transition: 0.3s all ease;
box-shadow: 0px 0px 13px 0px $color2;
}
}
}
web/themes/custom/popsu_colloque/css/index.scss
+63 -7
View File
@@ -50,11 +50,71 @@ article img,
object-fit: cover;
}
#presentation{
.__wrapper{
.__wrap_side{
position: inherit;
@media screen and (min-width: 768px){
position: relative;
}
}
}
}
.side_notes{
& > a{
position: absolute;
width: calc(100% - 30px);
left: 30px;
width: calc(100% - 45px);
@media screen and (min-width: 768px){
margin-top: -3rem;
}
.wrap{
position: relative;
width: max-content;
.__hero{
margin: 0!important;
height: 200px;
max-width: 300px;
.__img{
height: 200px;
img{
width: auto;
height: 100%;
}
}
}
.__head{
background: white;
padding: 0.5rem;
width: max-content;
min-width: 300px;
& > *{
font-family: 'cormorantBold';
color: $color2;
display:inline;
}
}
.thumbnails.bibliographie{
width: 100%;
}
}
.close{
cursor: pointer;
background: $color2;
position: absolute;
// margin-top: -5.5rem;
transform: translateY(-50%);
top: -12px;
left: -15px;
width: 30px;
height: 27px;
&::after{
content: "+";
color: white;
display: block;
margin: auto;
text-align: center;
transform: rotate(45deg);
}
}
}
@@ -64,7 +124,3 @@ article img,
flex: 100%;
max-width: 100%;
}
.side_notes .d-flex {
// flex-direction: column;
}
web/themes/custom/popsu_colloque/css/pages/front.scss
+1
View File
@@ -62,6 +62,7 @@ header{
font-size: 0.7rem
}
}
}
#block-views-block-dernieres-publications-block-1{
web/themes/custom/popsu_colloque/css/pages/layout.scss
-1
View File
@@ -40,7 +40,6 @@ body{
}
}
article{
.__title{
@include croix_or;
web/themes/custom/popsu_colloque/js/script.js
+46 -39
View File
@@ -6,11 +6,13 @@
$link.each(function(){
$(this).click(function(e) {
$this = $(this);
if ( $this.is('#ressource') || $this.is('#publication') ) {
if ( $this.is('#ressource') || $this.is('#bibliographie') ) {
e.preventDefault();
var $url = $this.attr("href");
if ($( ".side_notes" )[0]) {
$( ".side_notes" ).remove();
$( ".side_notes" ).fadeOut(200, function() {
$(this).remove();
});
}
content_type($url, $this);
ajax($url, $this);
@@ -20,35 +22,66 @@
function content_type($url, $this) {
if ($this.is('#ressource')) {
$("<div class='side_notes'><a href="+$url+"></a> </div>").insertAfter(".__wrap_side article");
}else if ( $this.is('#publication') ) {
console.log('clcik');
$("<div class='side_notes'></>").insertAfter(".__wrap_side article");
$("<div class='side_notes'><div class='wrap'><a href="+$url+"></a></div> </div>").insertAfter(".__wrap_side article");
} else if ( $this.is('#bibliographie') ) {
$("<div class='side_notes'><div class='wrap'></div></>").insertAfter(".__wrap_side article");
}
}
function ajax($url , $this) {
$.ajax({
url: $url,
url: $url + '#publicationAjax',
method: "GET",
dataType:'html',
dataType:'text',
async: true,
success: function(data) {
if ($this.is('#ressource')) {
$(data).find('article.publications .__wrapper').appendTo('.side_notes a');
}else if ($this.is('#publication')) {
$(data).find('article.publications .__wrapper').appendTo('.side_notes');
var hero = 'article .__wrapper .__hero';
var head = 'article .__wrapper .__head';
$(data).find(hero +','+ head).appendTo('.side_notes > div a').hide().fadeIn(200);
$("<div class='close'></div>").appendTo(".side_notes > div");
}else if ($this.is('#bibliographie')) {
$(data).find('article.bibliographie').appendTo('.side_notes > div');
$("<div class='close'></div>").appendTo(".side_notes > div");
}
position_link($this);
$(window).resize(function() {
position_link($this);
});
close();
},
})
}
function position_link($this) {
var $top_link = $this.position().top;
console.log($top_link);
$('.side_notes > *').css("top", $top_link);
var width = $(window).width();
console.log('$top_link',$top_link);
$('.side_notes').css("top", $top_link);
if (width <= '754') {
var $top_link = $this.offset().top;
console.log('$top_link',$top_link);
$('.side_notes').css("top", $top_link);
}
}
function close() {
var $croix = $('.side_notes .close');
$croix.click(function(e) {
$(this).parents('.side_notes').fadeOut(200, function() {
$(this).remove();
});
});
}
}
function slide() {
@@ -69,8 +102,6 @@
date;
var $cells = this.cells;
// console.log('$cells',$cells);
$('.__slide article.programme[data-date]').each(function(i, el){
date = $(el).data('date');
@@ -83,26 +114,10 @@
$(this).addClass('first');
var dateValue = $(this).data('date');
console.log('dateValue',dateValue);
// $(this).html(dateValue );
$("<span>"+dateValue+"</span>").prependTo($(this));
}
});
// var date = this.cells.element.dataset.date;
// var date = this.cells;
// for (var i = 0; i < date.length; i++) {
// console.log("cc",date[i].element.dataset.date);
// $head_date.append( "<div>"+date[i].element.dataset.date+"</div>" );
// }
},
// change: function(index, e) {
// var date_change = this.cells[index].element.dataset.date;
//
// if ($head_date.html() != date_change) {
// $head_date.html( "<div>"+date_change+"</div>" );
// }
//
// }
}
})
});
@@ -130,14 +145,6 @@
})
});
// function date() {
// var thumbnails = $('.__slide article.programme');
// $.each(thumbnails, function(i){
// date = thumbnails[i].dataset.date;
// })
// }
// date();
}
function burger() {
web/themes/custom/popsu_colloque/template/node/node--bibliographie--full.html.twig
+99
View File
@@ -0,0 +1,99 @@
{#
/**
* @file
* Default theme implementation to display a node.
*
* Available variables:
* - node: The node entity with limited access to object properties and methods.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - node.getCreatedTime() will return the node creation timestamp.
* - node.hasField('field_example') returns TRUE if the node bundle includes
* field_example. (This does not indicate the presence of a value in this
* field.)
* - node.isPublished() will return whether the node is published or not.
* Calling other methods, such as node.delete(), will result in an exception.
* See \Drupal\node\Entity\Node for a full list of public properties and
* methods for the node object.
* - label: (optional) The title of the node.
* - content: All node items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the printing
* of a given child element.
* - author_picture: The node author user entity, rendered using the "compact"
* view mode.
* - metadata: Metadata for this node.
* - date: (optional) Themed creation date field.
* - author_name: (optional) Themed author name field.
* - url: Direct URL of the current node.
* - display_submitted: Whether submission information should be displayed.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - node: The current template type (also known as a "theming hook").
* - node--type-[type]: The current node type. For example, if the node is an
* "Article" it would result in "node--type-article". Note that the machine
* name will often be in a short form of the human readable label.
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
* teaser would result in: "node--view-mode-teaser", and
* full: "node--view-mode-full".
* The following are controlled through the node publishing options.
* - node--promoted: Appears on nodes promoted to the front page.
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
* teaser listings.
* - node--unpublished: Appears on unpublished nodes visible only to site
* admins.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main
* content tag that appears in the template.
* - author_attributes: Same as attributes, except applied to the author of
* the node tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
* - view_mode: View mode; for example, "teaser" or "full".
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
* - readmore: Flag for more state. Will be true if the teaser content of the
* node cannot hold the main body content.
* - logged_in: Flag for authenticated user status. Will be true when the
* current user is a logged-in member.
* - is_admin: Flag for admin user status. Will be true when the current user
* is an administrator.
*
* @see template_preprocess_node()
*
* @todo Remove the id attribute (or make it a class), because if that gets
* rendered twice on a page this is invalid CSS for example: two lists
* in different view modes.
*
* @ingroup themeable
*/
#}
{% set urlExt = content.field_lien_externe[0]['#title'] %}
{% if urlExt %}
{% set class = 'link_ext' %}
{% endif %}
<article class="thumbnails bibliographie {{class}}">
<div>
{% if urlExt %}
<a target="_blank" href="{{urlExt}}">
{% endif %}
<div class="__auteur">
{{content.field_auteur}}
</div>
<div>
{{ label }}
</div>
<div class="__body">
{{ content.body }}
</div>
{% if urlExt %}
</a>
{% endif %}
</div>
</article>