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

added productions menu block to ajax load

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-03 12:55:15 +01:00
parent 55f5d5b2f0
commit b1598ae231
5 changed files with 166 additions and 53 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
+51 -17
View File
@@ -69,8 +69,7 @@ edlp_vars = {
var $this = $(this);
// avoid already ajaxified links
if($this.is('.ajax-enable'))
return;
if($this.is('.ajax-enable')) return;
var sys_path = $this.attr('data-drupal-link-system-path');
if(sys_path){
@@ -93,36 +92,59 @@ edlp_vars = {
var sys_path = $(this).attr('data-drupal-link-system-path');
if(sys_path == '<front>'){
closeAllModals();
backToFrontPage();
return false;
}
var path = window.location.origin + drupalSettings.path.baseUrl + sys_path +'/ajax';
closeAllModals();
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, {}, function(data){
// onAjaxLinkLoaded(data, $link, sys_path);
// });
$.getJSON(path+'/ajax', {})
.done(function(data){
onAjaxLinkLoaded(data, $link, sys_path);
})
.fail(function(jqxhr, textStatus, error){
onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path);
});
return false;
};
function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded');
_$content_container.html(data.rendered);
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('fail : error', jqxhr.responseText);
$link.removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded : data', data);
_$body.removeClass('ajax-loading');
// replace all content with newly loaded
_$content_container.html(data.rendered);
// add body class for currently loaded content
_$body.removeClass().addClass('path-'+sys_path.replace(/\//g, '-'));
// id node add a generic path-node class to body
m = sys_path.match(/^\/?(edlp\/node\/\d+)$/g);
if(m){
if(m)
_$body.addClass('path-edlp-node');
}
// handle clicked link classes
_$ajaxLinks.removeClass('is-active');
$link.removeClass('ajax-loading').addClass('is-active');
// if block attached (eg : from edlp_productions module)
if(typeof data.block != 'undefined'){
// if block not already added
if(!$('#'+data.block.id, '.region-'+data.block.region).length){
$('.region-'+data.block.region).append(data.block.rendered);
}
}
initScrollbars();
if(sys_path == "productions")
@@ -142,7 +164,7 @@ edlp_vars = {
_$corpus_map = $('canvas#corpus-map');
_$corpus_map.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
closeAllModals();
backToFrontPage();
});
}
@@ -170,6 +192,20 @@ edlp_vars = {
// });
};
// ___ _ ___
// | __| _ ___ _ _| |_| _ \__ _ __ _ ___
// | _| '_/ _ \ ' \ _| _/ _` / _` / -_)
// |_||_| \___/_||_\__|_| \__,_\__, \___|
// |___/
function backToFrontPage(){
closeAllModals();
// assume we are going back to front page
$('body').removeClass().addClass('path-frontpage');
$('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
}
// __ __ _ _
// | \/ |___ __| |__ _| |___
// | |\/| / _ \/ _` / _` | (_-<
@@ -179,8 +215,6 @@ edlp_vars = {
// TODO: animate the remove
_$content_container.html('');
_$ajaxLinks.removeClass('is-active');
$('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
};
init();
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+13
View File
@@ -1265,10 +1265,19 @@ main[role="main"] ul, main[role="main"] li, main[role="main"] ul.inline li:first
padding: 0;
list-style: none; }
main[role="main"] .layout-content {
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity: 1; }
body.ajax-loading main[role="main"] .layout-content {
opacity: 0.2; }
body.ajax-loading main[role="main"]:before {
content: "";
display: block;
position: absolute;
z-index: 10;
width: 60px;
height: 60px;
top: calc(50% - 30px);
@@ -1405,6 +1414,8 @@ footer {
font-size: 0.756em; }
footer .block-language ul li.is-active a {
color: red; }
body:not(.path-productions) footer #block-productions {
display: none; }
footer #block-productions ul {
white-space: nowrap; }
footer #block-productions ul li a {
@@ -1433,6 +1444,8 @@ footer {
transform: rotate(359deg); } }
footer .block-block-edlp-entrees {
display: inline-block; }
body:not(.path-frontpage) footer .block-block-edlp-entrees {
display: none; }
footer .block-block-edlp-entrees ul {
white-space: nowrap; }
footer .block-block-edlp-entrees ul li {
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+51 -17
View File
@@ -46,8 +46,7 @@
var $this = $(this);
// avoid already ajaxified links
if($this.is('.ajax-enable'))
return;
if($this.is('.ajax-enable')) return;
var sys_path = $this.attr('data-drupal-link-system-path');
if(sys_path){
@@ -70,36 +69,59 @@
var sys_path = $(this).attr('data-drupal-link-system-path');
if(sys_path == '<front>'){
closeAllModals();
backToFrontPage();
return false;
}
var path = window.location.origin + drupalSettings.path.baseUrl + sys_path +'/ajax';
closeAllModals();
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, {}, function(data){
// onAjaxLinkLoaded(data, $link, sys_path);
// });
$.getJSON(path+'/ajax', {})
.done(function(data){
onAjaxLinkLoaded(data, $link, sys_path);
})
.fail(function(jqxhr, textStatus, error){
onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path);
});
return false;
};
function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded');
_$content_container.html(data.rendered);
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('fail : error', jqxhr.responseText);
$link.removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded : data', data);
_$body.removeClass('ajax-loading');
// replace all content with newly loaded
_$content_container.html(data.rendered);
// add body class for currently loaded content
_$body.removeClass().addClass('path-'+sys_path.replace(/\//g, '-'));
// id node add a generic path-node class to body
m = sys_path.match(/^\/?(edlp\/node\/\d+)$/g);
if(m){
if(m)
_$body.addClass('path-edlp-node');
}
// handle clicked link classes
_$ajaxLinks.removeClass('is-active');
$link.removeClass('ajax-loading').addClass('is-active');
// if block attached (eg : from edlp_productions module)
if(typeof data.block != 'undefined'){
// if block not already added
if(!$('#'+data.block.id, '.region-'+data.block.region).length){
$('.region-'+data.block.region).append(data.block.rendered);
}
}
initScrollbars();
if(sys_path == "productions")
@@ -119,7 +141,7 @@
_$corpus_map = $('canvas#corpus-map');
_$corpus_map.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
closeAllModals();
backToFrontPage();
});
}
@@ -147,6 +169,20 @@
// });
};
// ___ _ ___
// | __| _ ___ _ _| |_| _ \__ _ __ _ ___
// | _| '_/ _ \ ' \ _| _/ _` / _` / -_)
// |_||_| \___/_||_\__|_| \__,_\__, \___|
// |___/
function backToFrontPage(){
closeAllModals();
// assume we are going back to front page
$('body').removeClass().addClass('path-frontpage');
$('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
}
// __ __ _ _
// | \/ |___ __| |__ _| |___
// | |\/| / _ \/ _` / _` | (_-<
@@ -156,8 +192,6 @@
// TODO: animate the remove
_$content_container.html('');
_$ajaxLinks.removeClass('is-active');
$('a[data-drupal-link-system-path="<front>"]').addClass('is-active');
};
init();
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+31 -13
View File
@@ -152,19 +152,31 @@ main[role="main"]{
margin:0; padding:0;
list-style: none;
}
body.ajax-loading &:before{
content:"";
display: block;
position: absolute;
$s:60px;
width:$s; height:$s;
top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
background-color: white;
background-image: url(../../img/edlp-loader-anim.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
border-radius: $s/2;
// ajax loading effects
.layout-content{
transition: opacity 0.5s ease-in-out;
opacity: 1;
}
body.ajax-loading &{
.layout-content{
opacity:0.2;
}
&:before{
content:"";
display: block;
position: absolute;
z-index: 10;
$s:60px;
width:$s; height:$s;
top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
background-color: white;
background-image: url(../../img/edlp-loader-anim.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
border-radius: $s/2;
}
}
}
@@ -358,6 +370,9 @@ footer{
}
#block-productions{
body:not(.path-productions) & {display:none}
ul{
white-space: nowrap;
li{
@@ -386,6 +401,9 @@ footer{
}
.block-block-edlp-entrees{
body:not(.path-frontpage) & {display:none}
display: inline-block;
// vertical-align: top;
ul{