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{