bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

composer is almost finished, ramins to record compos order through ajax

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-26 21:21:00 +02:00
parent 0fedff7573
commit 90c9c68dcd
26 changed files with 1048 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+9 -4
View File
@@ -147,10 +147,15 @@
this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
this.loadNode(this.historic[this.currentHistoricIndex].nid);
// emmit new playing doc (e.g.: corpus map nowing that audio played from RandomPlayer)
_$corpus_canvas.trigger({
'type':'audio-node-opened',
'nid':this.historic[this.currentHistoricIndex].nid
});
try {
_$corpus_canvas.trigger({
'type':'audio-node-opened',
'nid':this.historic[this.currentHistoricIndex].nid
});
} catch (e) {
console.warn('AudioPlayer : _$corpus_canvas does not exists');
}
this.showHidePreviousBtn();
this.showHideNextBtn();
this.show();
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+187 -14
View File
@@ -1100,6 +1100,9 @@ body, html {
margin: 0;
padding: 0; }
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {
padding-top: 24px !important; }
header[role="banner"] {
z-index: 2;
position: relative;
@@ -1136,7 +1139,7 @@ main[role="main"] {
padding: 7em 2em 9em;
overflow: hidden;
pointer-events: none;
height: auto; }
height: 100%; }
main[role="main"] .layout-content {
width: 100%;
height: 100%;
@@ -1144,8 +1147,8 @@ main[role="main"] {
main[role="main"] .layout-content > * {
pointer-events: auto; }
body[corpus-map="ready"] main[role="main"] {
height: 100%; }
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs main[role="main"] {
padding-top: 8em; }
footer[role="contentinfo"] {
z-index: 2;
@@ -1567,7 +1570,8 @@ main[role="main"] span.close-col-btn {
#studio-ui .chutier_ui .documents {
padding-top: 35px;
height: calc(100% - 35px);
overflow-y: auto; }
overflow-y: auto;
overflow-x: hidden; }
#studio-ui .chutier_ui .documents ul, #studio-ui .chutier_ui .documents li {
margin: 0;
padding: 0;
@@ -1578,6 +1582,12 @@ main[role="main"] span.close-col-btn {
width: 49%;
margin-bottom: 0.5em;
white-space: nowrap; }
#studio-ui .chutier_ui .documents li > div {
display: inline-block;
padding-right: 2em; }
#studio-ui .chutier_ui .documents li > div.ui-draggable {
cursor: -webkit-grab;
cursor: grab; }
#studio-ui .chutier_ui .documents li .entrees {
line-height: 0; }
#studio-ui .chutier_ui .documents li .entrees span {
@@ -1653,12 +1663,16 @@ main[role="main"] span.close-col-btn {
white-space: nowrap; }
#studio-ui .composition_ui > .wrapper section.compositions-list, #studio-ui .composition_ui > .wrapper section.composer {
display: inline-block;
vertical-align: top;
vertical-align: bottom;
height: 100%; }
#studio-ui .composition_ui > .wrapper .compositions-list {
width: 30%;
height: 100%;
overflow-y: auto; }
overflow-y: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-right: 0.5em;
border-right: 1px solid #aaa; }
#studio-ui .composition_ui > .wrapper .compositions-list li {
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
@@ -1671,7 +1685,20 @@ main[role="main"] span.close-col-btn {
font-size: 0.756em; }
#studio-ui .composition_ui > .wrapper .compositions-list a.composition-link {
display: inline-block;
width: calc(100% - 14px); }
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: calc(100% - 21px); }
#studio-ui .composition_ui > .wrapper .compositions-list a.composition-link:before {
content: "";
width: 7px;
height: 7px;
border: 1px solid black;
background-color: white;
display: inline-block;
vertical-align: middle;
margin-right: 5px; }
#studio-ui .composition_ui > .wrapper .compositions-list a.composition-link.is-active:before {
background-color: black; }
#studio-ui .composition_ui > .wrapper .compositions-list a.delete-composition-link {
display: inline-block;
vertical-align: middle;
@@ -1690,13 +1717,13 @@ main[role="main"] span.close-col-btn {
display: inline-block;
vertical-align: top;
overflow: hidden;
margin-top: 0.4em;
height: 1em;
-webkit-transition: height 0.2s ease-in-out;
transition: height 0.2s ease-in-out; }
#studio-ui .composition_ui > .wrapper .compositions-list a.new-composition-link:before {
content: "+";
font-weight: bold;
margin-right: 0.2em; }
margin-right: 5px; }
#studio-ui .composition_ui > .wrapper .compositions-list a.new-composition-link.folded {
height: 0; }
#studio-ui .composition_ui > .wrapper .compositions-list .new-compo-form {
@@ -1720,11 +1747,157 @@ main[role="main"] span.close-col-btn {
#studio-ui .composition_ui > .wrapper .compositions-list .new-compo-form.ajax-loading {
opacity: 0.4; }
#studio-ui .composition_ui > .wrapper .composer {
-webkit-box-sizing: content-box;
box-sizing: content-box;
width: 69%;
padding-left: 1em;
border-left: 1px solid #aaa; }
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 0.5em;
width: 69%; }
#studio-ui .composition_ui > .wrapper .composer > * {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
#studio-ui .composition_ui > .wrapper .composer > header {
height: 25px;
padding-bottom: 5px; }
#studio-ui .composition_ui > .wrapper .composer > .composition {
position: relative;
height: calc(100% - 60px);
padding-bottom: 1em; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
padding: 0 0.5em; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents:before, #studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents:after {
content: "";
width: calc(100% - 2px);
position: absolute;
bottom: 0;
left: 0; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents:before {
border-top: 1px solid #A1A1A1;
height: 14.5px; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents:after {
border-left: 1px solid #A1A1A1;
border-right: 1px solid #A1A1A1;
height: 29px; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents .field__item {
display: inline-block;
position: relative;
width: 25px;
height: 100%;
white-space: nowrap;
pointer-events: none;
opacity: 1;
-webkit-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents .field__item.ui-draggable-dragging {
height: 100px; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents .field__item.ready-to-remove {
opacity: 0.3;
cursor: crosshair; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents .field__item > * {
pointer-events: all; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents .field__item article {
position: absolute;
bottom: 0;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents .field__item article h2 {
margin: 0;
text-transform: none; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents .field__item article h2 a {
font-size: 0.756em; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents .field__item article h2 a:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
border: 1px solid white;
background-color: white; }
#studio-ui .composition_ui > .wrapper .composer > .composition .field--name-documents .field__item .handler {
z-index: 99;
cursor: -webkit-grab;
cursor: grab;
position: absolute;
bottom: 0;
left: 1px;
display: block;
width: 12px;
height: 12px;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
border: 1px solid red;
background-color: white; }
#studio-ui .composition_ui > .wrapper .composer > .composition .remove-drop-zone {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 45%;
z-index: 150; }
#studio-ui .composition_ui > .wrapper .composer > .actions {
padding-top: 5px;
height: 25px; }
#studio-ui .field__item.ui-draggable-dragging {
display: inline-block;
position: relative;
width: 25px;
height: 100%;
white-space: nowrap;
pointer-events: none;
opacity: 1;
-webkit-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out; }
#studio-ui .field__item.ui-draggable-dragging.ui-draggable-dragging {
height: 100px; }
#studio-ui .field__item.ui-draggable-dragging.ready-to-remove {
opacity: 0.3;
cursor: crosshair; }
#studio-ui .field__item.ui-draggable-dragging > * {
pointer-events: all; }
#studio-ui .field__item.ui-draggable-dragging article {
position: absolute;
bottom: 0;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
#studio-ui .field__item.ui-draggable-dragging article h2 {
margin: 0;
text-transform: none; }
#studio-ui .field__item.ui-draggable-dragging article h2 a {
font-size: 0.756em; }
#studio-ui .field__item.ui-draggable-dragging article h2 a:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
border: 1px solid white;
background-color: white; }
#studio-ui .field__item.ui-draggable-dragging .handler {
z-index: 99;
cursor: -webkit-grab;
cursor: grab;
position: absolute;
bottom: 0;
left: 1px;
display: block;
width: 12px;
height: 12px;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
border: 1px solid red;
background-color: white; }
.col[theme="edlp_search_search_form"], .col[theme="edlp_search_search_form"] > .wrapper {
position: relative;
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+9 -4
View File
@@ -147,10 +147,15 @@
this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
this.loadNode(this.historic[this.currentHistoricIndex].nid);
// emmit new playing doc (e.g.: corpus map nowing that audio played from RandomPlayer)
_$corpus_canvas.trigger({
'type':'audio-node-opened',
'nid':this.historic[this.currentHistoricIndex].nid
});
try {
_$corpus_canvas.trigger({
'type':'audio-node-opened',
'nid':this.historic[this.currentHistoricIndex].nid
});
} catch (e) {
console.warn('AudioPlayer : _$corpus_canvas does not exists');
}
this.showHidePreviousBtn();
this.showHideNextBtn();
this.show();
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+161 -8
View File
@@ -472,6 +472,66 @@ main[role="main"]{
}
#studio-ui{
height:100%;
@mixin draggable_sortable_field__item {
// outline: 1px dotted green;
display: inline-block;
position: relative;
// margin-right: 25px;
width:25px;
height: 100%;
&.ui-draggable-dragging{
height:100px;
// cursor: grabbing;
}
white-space: nowrap;
pointer-events: none;
opacity: 1;
transition: opacity 0.1s ease-in-out;
&.ready-to-remove{
opacity:0.3;
cursor:crosshair;
}
&>*{
pointer-events: all;
}
article{
// outline: 1px dotted purple;
position: absolute;
bottom:0;
transform-origin: left top;
transform: rotateZ(-45deg);
h2{
margin:0;
text-transform: none;
a{
&:before{
content:"";
display: inline-block;
vertical-align: middle;
width:$compo_square_size; height:$compo_square_size;
border: 1px solid white;
background-color: white;
// TODO: entries color;
}
font-size: 0.756em;
}
}
}
.handler{
z-index: 99;
cursor: grab;
position: absolute;
bottom:0; left:1px;
display: block;
width:$compo_square_size; height:$compo_square_size;
transform-origin: left top;
transform: rotateZ(-45deg);
border: 1px solid red;
background-color: white;
// TODO: entries color;
}
} // end mixin
.chutier_ui{
height: 50%;
border-bottom: 1px solid red;
@@ -492,6 +552,7 @@ main[role="main"]{
padding-top: 35px;
height:calc(100% - 35px);
overflow-y: auto;
overflow-x: hidden;
// box-sizing: content-box;
// outline: 1px solid green;
ul,li{
@@ -502,6 +563,13 @@ main[role="main"]{
display: inline-block; vertical-align: top;
width:49%; margin-bottom: 0.5em;
white-space: nowrap;
>div{
display:inline-block;
padding-right: 2em;
&.ui-draggable{
cursor:grab;
}
}
.entrees{
line-height: 0;
span{
@@ -523,6 +591,7 @@ main[role="main"]{
}
}
$compo_square_size:12px;
.composition_ui{
height:50%;
&>h2{
@@ -543,12 +612,16 @@ main[role="main"]{
overflow: hidden;
white-space: nowrap;
section.compositions-list, section.composer{
display: inline-block; vertical-align: top;
display: inline-block; vertical-align: bottom;
height: 100%;
}
.compositions-list{
width:30%; height:100%;
width:30%;
height:100%; // this is not working
overflow-y: auto;
box-sizing: border-box;
padding-right: 0.5em;
border-right: 1px solid #aaa;
li{
opacity: 1;
transition: opacity 0.3s ease-in-out;
@@ -563,10 +636,25 @@ main[role="main"]{
}
a{
font-size: 0.756em;
$w:7px;
$s:7px; $m:5px;
&.composition-link{
display: inline-block;
width: calc(100% - #{$s +$m +2});
box-sizing: border-box;
// width:100%;
width: calc(100% - #{$w +$s +$m +2});
&:before{
content: "";
width:$w; height:$w;
border: 1px solid black;
background-color: white;
display: inline-block;
vertical-align: middle;
margin-right: $m;
}
&.is-active:before{
background-color: black;
}
}
&.delete-composition-link{
display: inline-block;
@@ -584,12 +672,13 @@ main[role="main"]{
// padding-left: 1em;
&:before{
content:"+";
font-weight: bold;
margin-right: 0.2em;
// font-weight: bold;
margin-right: $m;
}
display: inline-block;
vertical-align: top;
overflow: hidden;
margin-top: 0.4em;
height:1em;
transition: height 0.2s ease-in-out;
&.folded{
@@ -622,13 +711,77 @@ main[role="main"]{
}
}
.composer{
box-sizing: content-box;
position: relative;
box-sizing: border-box;
padding-left: 0.5em;
width:69%;
padding-left: 1em;
border-left: 1px solid #aaa;
$header_height:25px;
$actions_height:25px;
$padding:5px;
>*{
box-sizing: border-box;
}
>header{
height:$header_height;
padding-bottom:$padding;
}
>.composition{
position: relative;
height:calc(100% - #{$header_height + $actions_height + $padding*2});
// outline: 1px solid red;
padding-bottom: 1em;
.field--name-documents{
position: relative;
box-sizing: border-box;
height: 100%;
width: 100%; padding:0 0.5em;
$h:29px; $w:calc(100% - 2px); $c:#A1A1A1;
&:before, &:after{
content: "";
width:$w;
position: absolute;
bottom:0; left:0;
// z-index: -1;
}
&:before{
border-top: 1px solid $c;
height:$h /2;
}
&:after{
border-left: 1px solid $c;
border-right: 1px solid $c;
height:$h;
}
.field__item{
@include draggable_sortable_field__item;
}
}
.remove-drop-zone{
position: absolute;
top:0; left:0; width:100%; height:45%;
z-index: 150;
// &.ui-droppable-hover{
// background-color: red;
// }
}
}
>.actions{
padding-top:$padding;
height:$actions_height;
// outline: 1px solid blue;
}
}
}
}
// drag and drop specifics
// created by js
.field__item.ui-draggable-dragging{
// outline: 1px solid green;
@include draggable_sortable_field__item;
}
}
sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss
+14 -5
View File
@@ -9,7 +9,9 @@ body, html{
padding:0;
// background-color: rgb(219, 219, 219);
}
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
padding-top: 24px!important;
}
// div.layout-container{
// position: relative;
// width:100%; height:100%;
@@ -57,7 +59,7 @@ main[role="main"]{
padding:7em 2em 9em;
overflow: hidden;
pointer-events: none;
height:auto;
height:100%;
.layout-content{
width: 100%; height:100%;
overflow:hidden;
@@ -67,10 +69,17 @@ main[role="main"]{
}
}
body[corpus-map="ready"] main[role="main"]{
height:100%;
// overflow-y: hidden;
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
main[role="main"]{
padding-top: 7em + 1em;
}
}
// body.toolbar-fixed.toolbar-tray-open{
// main[role="main"]{
// padding-top: 7em + 4em;
// // overflow-y: hidden;
// }
// }
footer[role="contentinfo"]{
// outline: 1px solid pink;
sites/all/themes/custom/edlptheme/edlptheme.libraries.yml
+3
View File
@@ -22,6 +22,9 @@ global-js:
- core/matchmedia.addListener
- core/jquery
- core/jquery.once
- core/jquery.ui.draggable
- core/jquery.ui.dropable
- core/jquery.ui.sortable
- url_to_video_filter/player_embed
- url_to_video_filter/vimeo_embed
- url_to_video_filter/youtube_embed
sites/all/themes/custom/edlptheme/edlptheme.theme
+25
View File
@@ -103,6 +103,31 @@ function edlptheme_preprocess_node__enregistrement__search_index(&$vars){
// dpm($vars['link_attributes']);
}
function edlptheme_preprocess_node__enregistrement__compo(&$vars){
$node = $vars['elements']['#node'];
$options = ['absolute' => TRUE];
$url = Url::fromRoute('entity.node.canonical', ['node' => $node->id()], $options);
$system_path = $url->getInternalPath();
// get the audio file url
$field_son_values = $node->get('field_son')->getValue();
$son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
$son_file = \Drupal\file\Entity\File::load($son_fid);
$son_url = null;
if($son_file){
$son_uri = $son_file->getFileUri();
$son_url = file_create_url($son_uri);
}
$vars['link_attributes'] = new Attribute(array(
'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path,
'audio_url' => $son_url,
'nid' => $node->id(),
'class' => array('audio-link', 'ajax-link')
));
// dpm($vars['link_attributes']);
}
function edlptheme_preprocess_node__enregistrement__player_cartel(&$vars){
// dpm($vars);
// if transcript not empty
sites/all/themes/custom/edlptheme/templates/content/node--enregistrement--compo.html.twig
+91
View File
@@ -0,0 +1,91 @@
{#
/**
* @file
* Theme override 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: 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: Themed creation date field.
* - author_name: 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.
*/
#}
{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
]
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
<h2{{ title_attributes.addClass('node-title') }}>
<a href="{{ url }}" rel="bookmark" {{ link_attributes }}>
{% set text = label|render|striptags %}
{{ text|length > 25 ? text|slice(0, 25)|split(' ')|slice(0, -1)|join(' ') ~ '…' : text }}
</a>
</h2>
</article>
sites/all/themes/custom/edlptheme/templates/content/node--page--image-2-columns0.html.twig
+103
View File
@@ -0,0 +1,103 @@
{#
/**
* @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: 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: Themed creation date field.
* - author_name: 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 classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
node.isSticky() ? 'node--sticky',
not node.isPublished() ? 'node--unpublished',
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
'clearfix',
]
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
<div{{ content_attributes }}>
{{ content.field_visuel }}
</div>
<header>
{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes.addClass('node-title') }}>
<a href="{{ url }}" rel="bookmark" {{ link_attributes }}>{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{{ content|without('field_visuel') }}
</header>
</article>