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

added animation to edlp loader, created edlp_ajax_node module

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-01 13:06:19 +01:00
parent de3d9edc03
commit 432fb2367f
13 changed files with 321 additions and 67 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
+38 -5
View File
@@ -29,6 +29,7 @@ edlp_vars = {
var _is_front = _$body.is('.path-frontpage');
var _$corpus_map;
var _$content_container = $('.layout-container>main>.layout-content');
var _$ajaxLinks;
function init(){
console.log("EdlpTheme init()");
@@ -53,30 +54,59 @@ edlp_vars = {
// / _ \ | / _` \ \ /
// /_/ \_\/ \__,_/_\_\
// |__/
// TODO: add url hash nav
// TODO: implement history.js
function initAjaxLinks(){
console.log('initAjaxLinks');
$('a', '#block-mainnavigation').on('click', onClickAjaxLink);
$('a', '#block-mainnavigation, #block-footer.menu--footer').addClass('ajax-link');
_$ajaxLinks = $('.ajax-link')
.each(function(i,e){
var $this = $(this);
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]);
}
})
.on('click', onClickAjaxLink);
;
};
function onClickAjaxLink(e){
e.preventDefault();
// TODO: drupal settings not defined on NOT front page
var $link = $(this);
if($link.is('.is-active'))
return false;
var sys_path = $(this).attr('data-drupal-link-system-path');
if(sys_path == '<front>'){
closeAllModals();
return false;
}
// TODO: drupal settings not defined on NOT front page
var path = window.location.origin + drupalSettings.basepath + sys_path +'/ajax';
closeAllModals();
_$body.addClass('ajax-loading');
$link.addClass('ajax-loading');
$.getJSON(path, {}, function(data){
onAjaxLinkLoaded(data, sys_path);
onAjaxLinkLoaded(data, $link, sys_path);
});
return false;
};
function onAjaxLinkLoaded(data, sys_path){
function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded : data', data);
_$content_container.html(data.rendered);
_$body.removeClass().addClass('path-'+sys_path);
_$body.removeClass('ajax-loading');
_$body.removeClass().addClass('path-'+sys_path);
_$ajaxLinks.removeClass('is-active');
$link.removeClass('ajax-loading').addClass('is-active');
initScrollbars();
};
@@ -95,6 +125,9 @@ edlp_vars = {
console.log('theme : closeAllModals');
// 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
+25 -6
View File
@@ -1202,6 +1202,25 @@ header[role="banner"] {
height: 0.6em;
border: 1px solid #000;
margin-right: 0.3em; }
#block-mainnavigation ul li a.ajax-loading:before {
-webkit-animation: rotation 2s infinite linear;
animation: rotation 2s infinite linear; }
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
#block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a:hover:before {
border-color: red;
background-color: red; }
@@ -1249,16 +1268,16 @@ body.ajax-loading main[role="main"]:before {
content: "";
display: block;
position: absolute;
width: 50px;
height: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
width: 60px;
height: 60px;
top: calc(50% - 30px);
left: calc(50% - 30px);
background-color: white;
background-image: url(../../img/edlp-loader.svg);
background-image: url(../../img/edlp-loader-anim.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
border-radius: 25px; }
border-radius: 30px; }
body.path-agenda main .col, body.path-agenda main .col > .wrapper {
height: 100%; }