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

started second cartel of audio player

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-07 21:21:45 +01:00
parent 608e9f6ae2
commit 0ca9c9cc83
30 changed files with 607 additions and 81 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 -10
View File
@@ -128,6 +128,7 @@ edlp_vars = {
console.log('AudioPlayer node loaded', data);
this.$cartel.html(data.rendered);
this.$cartel.removeClass('loading');
initAjaxLinks();
},
onNodeLoadFail(jqxhr, textStatus, error){
console.warn('AudioPlayer node load failed', jqxhr.responseText);
@@ -238,20 +239,16 @@ edlp_vars = {
_$ajaxLinks = $('.ajax-link:not(.ajax-enabled)')
.each(function(i,e){
var $this = $(this);
// avoid already ajaxified links
// if($this.is('.ajax-enable')) return;
var sys_path = $this.attr('data-drupal-link-system-path');
if(sys_path){
// convert node link to edlp_ajax_node module links
m = sys_path.match(/^\/?(node\/\d+)$/g);
if(m) $this.attr('data-drupal-link-system-path', 'edlp/'+m[0]);
$this.on('click', onClickAjaxLink).addClass('ajax-enable');
}
$this.on('click', onClickAjaxLink).addClass('ajax-enable');
})
;
});
};
function onClickAjaxLink(e){
@@ -270,10 +267,12 @@ edlp_vars = {
var path = window.location.origin + drupalSettings.path.baseUrl + sys_path;
_$body.addClass('ajax-loading');
$link.addClass('ajax-loading');
// $.getJSON(path, {}, function(data){
// onAjaxLinkLoaded(data, $link, sys_path);
// });
$.getJSON(path+'/ajax', {})
// check for viewmode attribute
path += '/ajax';
if($link.attr('viewmode') != ''){
path += '/'+$link.attr('viewmode');
}
$.getJSON(path, {})
.done(function(data){
onAjaxLinkLoaded(data, $link, sys_path);
})
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+45 -23
View File
@@ -1363,6 +1363,7 @@ body.ajax-loading main[role="main"]:before {
#audio-player .favoris {
height: 100%; }
#audio-player .cartel {
position: relative;
max-width: 400px;
margin-left: 1em;
background-color: white;
@@ -1371,58 +1372,79 @@ body.ajax-loading main[role="main"]:before {
transition: opacity 0.5s ease-in-out; }
#audio-player .cartel.loading {
opacity: 0; }
#audio-player .cartel .entrees {
#audio-player .cartel .first-cartel .entrees {
line-height: 0; }
#audio-player .cartel .entrees span {
#audio-player .cartel .first-cartel .entrees span {
display: inline-block;
width: 8px;
height: 8px;
background-color: black;
margin-right: 3px; }
#audio-player .cartel .entrees span[tid='134'] {
#audio-player .cartel .first-cartel .entrees span[tid='134'] {
background-color: #2b8f2f; }
#audio-player .cartel .entrees span[tid='121'] {
#audio-player .cartel .first-cartel .entrees span[tid='121'] {
background-color: #3a33b6; }
#audio-player .cartel .entrees span[tid='125'] {
#audio-player .cartel .first-cartel .entrees span[tid='125'] {
background-color: #2c9f57; }
#audio-player .cartel .entrees span[tid='119'] {
#audio-player .cartel .first-cartel .entrees span[tid='119'] {
background-color: #c48978; }
#audio-player .cartel .entrees span[tid='132'] {
#audio-player .cartel .first-cartel .entrees span[tid='132'] {
background-color: #5270bb; }
#audio-player .cartel .entrees span[tid='122'] {
#audio-player .cartel .first-cartel .entrees span[tid='122'] {
background-color: #fb54d3; }
#audio-player .cartel .entrees span[tid='129'] {
#audio-player .cartel .first-cartel .entrees span[tid='129'] {
background-color: #e07483; }
#audio-player .cartel .entrees span[tid='120'] {
#audio-player .cartel .first-cartel .entrees span[tid='120'] {
background-color: #655845; }
#audio-player .cartel .entrees span[tid='130'] {
#audio-player .cartel .first-cartel .entrees span[tid='130'] {
background-color: #7e0868; }
#audio-player .cartel .entrees span[tid='118'] {
#audio-player .cartel .first-cartel .entrees span[tid='118'] {
background-color: #0e7121; }
#audio-player .cartel .entrees span[tid='127'] {
#audio-player .cartel .first-cartel .entrees span[tid='127'] {
background-color: #dabd42; }
#audio-player .cartel .entrees span[tid='133'] {
#audio-player .cartel .first-cartel .entrees span[tid='133'] {
background-color: #0399bb; }
#audio-player .cartel .entrees span[tid='128'] {
#audio-player .cartel .first-cartel .entrees span[tid='128'] {
background-color: #399a1c; }
#audio-player .cartel .entrees span[tid='124'] {
#audio-player .cartel .first-cartel .entrees span[tid='124'] {
background-color: #708540; }
#audio-player .cartel .entrees span[tid='116'] {
#audio-player .cartel .first-cartel .entrees span[tid='116'] {
background-color: #191bff; }
#audio-player .cartel .entrees span[tid='117'] {
#audio-player .cartel .first-cartel .entrees span[tid='117'] {
background-color: #279d84; }
#audio-player .cartel .entrees span[tid='131'] {
#audio-player .cartel .first-cartel .entrees span[tid='131'] {
background-color: #5219ab; }
#audio-player .cartel .entrees span[tid='126'] {
#audio-player .cartel .first-cartel .entrees span[tid='126'] {
background-color: #d49cb6; }
#audio-player .cartel .entrees span[tid='123'] {
#audio-player .cartel .first-cartel .entrees span[tid='123'] {
background-color: #497715; }
#audio-player .cartel h2.node-title {
#audio-player .cartel .first-cartel h2.node-title {
margin: 0.2em 0 0;
font-size: 1em; }
#audio-player .cartel p {
#audio-player .cartel .first-cartel p {
margin: 0;
font-size: 0.75em; }
#audio-player .cartel .second-cartel {
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
min-width: 100%;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out; }
#audio-player .cartel .second-cartel > * {
display: inline-block;
vertical-align: top; }
#audio-player .cartel .second-cartel .col-left a {
display: block;
font-size: 0.90em;
font-weight: 600; }
#audio-player .cartel .second-cartel .col-right {
font-size: 0.75em; }
#audio-player .cartel:hover .second-cartel {
opacity: 1; }
#audio-player.is-playing .btns .play-pause {
background-image: url(../img/audio-player-pause.svg); }
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+9 -10
View File
@@ -105,6 +105,7 @@
console.log('AudioPlayer node loaded', data);
this.$cartel.html(data.rendered);
this.$cartel.removeClass('loading');
initAjaxLinks();
},
onNodeLoadFail(jqxhr, textStatus, error){
console.warn('AudioPlayer node load failed', jqxhr.responseText);
@@ -215,20 +216,16 @@
_$ajaxLinks = $('.ajax-link:not(.ajax-enabled)')
.each(function(i,e){
var $this = $(this);
// avoid already ajaxified links
// if($this.is('.ajax-enable')) return;
var sys_path = $this.attr('data-drupal-link-system-path');
if(sys_path){
// convert node link to edlp_ajax_node module links
m = sys_path.match(/^\/?(node\/\d+)$/g);
if(m) $this.attr('data-drupal-link-system-path', 'edlp/'+m[0]);
$this.on('click', onClickAjaxLink).addClass('ajax-enable');
}
$this.on('click', onClickAjaxLink).addClass('ajax-enable');
})
;
});
};
function onClickAjaxLink(e){
@@ -247,10 +244,12 @@
var path = window.location.origin + drupalSettings.path.baseUrl + sys_path;
_$body.addClass('ajax-loading');
$link.addClass('ajax-loading');
// $.getJSON(path, {}, function(data){
// onAjaxLinkLoaded(data, $link, sys_path);
// });
$.getJSON(path+'/ajax', {})
// check for viewmode attribute
path += '/ajax';
if($link.attr('viewmode') != ''){
path += '/'+$link.attr('viewmode');
}
$.getJSON(path, {})
.done(function(data){
onAjaxLinkLoaded(data, $link, sys_path);
})
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+40 -10
View File
@@ -299,26 +299,56 @@ main[role="main"]{
}
.cartel{
// TODO: set max-width regarding responsive
position: relative;
max-width: 400px;
margin-left: 1em;
background-color: white;
opacity: 1;
transition: opacity 0.5s ease-in-out;
&.loading{opacity: 0;}
.first-cartel{
.entrees{
line-height: 0;
span{
@include entrie-micro-square;
.entrees{
line-height: 0;
span{
@include entrie-micro-square;
}
}
h2.node-title{
margin:0.2em 0 0;
font-size: 1em;
}
p{
margin:0;
font-size: 0.75em;
}
}
h2.node-title{
margin:0.2em 0 0;
font-size: 1em;
.second-cartel{
position: absolute;
top: 0; left:0;
background-color: white;
height:100%; min-width: 100%;
opacity: 0;
transition: opacity 0.2s ease-in-out;
&>*{
display: inline-block;
vertical-align: top;
}
.col-left{
a{
display: block;
font-size: 0.90em;
font-weight: 600;
}
}
.col-right{
font-size: 0.75em;
}
}
p{
margin:0;
font-size: 0.75em;
&:hover{
.second-cartel{
opacity: 1;
}
}
}
&.is-playing{
sites/all/themes/custom/edlptheme/edlptheme.theme
+46 -2
View File
@@ -5,7 +5,7 @@
* Functions to support theming in the edlp theme.
*/
use Drupal\Core\Url;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Template\Attribute;
@@ -17,7 +17,7 @@ use Drupal\Core\Template\Attribute;
function edlptheme_preprocess_node(&$vars){
$node = $vars['elements']['#node'];
$options = ['absolute' => TRUE];
$url = \Drupal\Core\Url::fromRoute('entity.node.canonical', ['node' => $node->id()], $options);
$url = Url::fromRoute('entity.node.canonical', ['node' => $node->id()], $options);
$system_path = $url->getInternalPath();
$vars['link_attributes'] = new Attribute(array(
'data-drupal-link-system-path' => $system_path=='' ? '<front>' : $system_path
@@ -53,3 +53,47 @@ function edlptheme_preprocess_edlp_productions(&$vars){
}
// dpm($vars);
}
function edlptheme_preprocess_node__player_cartel(&$vars){
// dpm($vars);
// if transcript not empty
$url = Url::fromRoute('entity.node.canonical', ['node'=>$vars['node']->id()], array(
'attributes' => array(
'class' => ['link-transcript', 'ajax-link'],
'viewmode'=>'transcript'
)
));
$vars['link_transcript'] = array(
'#title' => t("Lire le text."),
'#type' => 'link',
'#url' => $url,
'#options'=>array(
'attributes' => array(
'data-drupal-link-system-path' => $url->getInternalPath()
)
)
);
// if article not empty
$url = Url::fromRoute('entity.node.canonical', ['node'=>$vars['node']->id()], array(
'attributes' => array(
'class' => ['link-article', 'ajax-link'],
'viewmode'=>'article'
)
));
$vars['link_article'] = array(
'#title' => t("Lire l'article."),
'#type' => 'link',
'#url' => $url,
'#options' => array(
'attributes'=>array(
'data-drupal-link-system-path' => $url->getInternalPath()
)
)
);
// if article or transcript
$vars['col_left'] = true;
// if
$vars['col_right'] = true;
}
sites/all/themes/custom/edlptheme/templates/content/node--player-cartel.html.twig
+28 -15
View File
@@ -82,19 +82,32 @@
%}
{{ attach_library('classy/node') }}
<article{{ attributes.addClass(classes) }}>
<div class="entrees">
{# THIS IS REALLY DIRTY !! #}
{% for key, child in content.field_entrees if key|first != '#' %}
{% set tid = child['#cache']['tags'][0]|replace({'taxonomy_term:':''}) %}
<span class="entree" tid="{{ tid }}" title="{{ child }}"></span>
{% endfor %}
</div>
<h2{{ title_attributes.addClass('node-title') }}>
{{ label }}
</h2>
<div{{ content_attributes.addClass('node__content') }}>
{{ content|without('field_entrees') }}
</div>
<section class="first-cartel">
<div class="entrees">
{# THIS IS REALLY DIRTY !! #}
{% for key, child in content.field_entrees if key|first != '#' %}
{% set tid = child['#cache']['tags'][0]|replace({'taxonomy_term:':''}) %}
<span class="entree" tid="{{ tid }}" title="{{ child }}"></span>
{% endfor %}
</div>
<h2{{ title_attributes.addClass('node-title') }}>
{{ label }}
</h2>
<div class="description">
{{ content.field_description }}
</div>
</section>
<section class="second-cartel">
{% if col_left %}
<div class="col-left">
{{ link_transcript }}
{{ link_article }}
</div>
{% endif %}
{% if col_right %}
<div class="col-right">
right colume
</div>
{% endif %}
</section>
</article>