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

history nav is working, remains flickering problems

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-29 23:58:36 +02:00
parent 33a04c55b1
commit 51b6f477dd
8 changed files with 198 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js
Vendored
+11
View File
@@ -0,0 +1,11 @@
// console.log('History');
// console.log(window.location);
// console.log(document);
document.body.style.visibility = 'hidden';
if(window.location.pathname != "" && window.location.pathname != "/"){
// console.log('redirect');
var newloc = window.location.origin+'#'+window.location.pathname;
window.location.replace(newloc);
}else{
document.body.style.visibility = 'visible';
}
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+84 -17
View File
@@ -35,6 +35,7 @@
}
// initScrollbars();
initHistory();
initEvents();
};
@@ -118,8 +119,8 @@
return false;
// Audio links
// launch audio player and stop here
if($link.is('.audio-link')){
// TODO: stop randomplayer
_audioPlayer
.emmit('stop-shuffle')
.openDocument({
@@ -130,13 +131,26 @@
}
// other links
var url = $(this).attr('href');
var sys_path = $(this).attr('data-drupal-link-system-path');
var ajax_path = sys_path;
// front page
// just remove contents and stop here
if(sys_path == '<front>'){
backToFrontPage();
return false;
}
var ajax_path = parseLinkAjaxPath($link);
$link.addClass('ajax-loading');
ajaxLinkLoadContent(url, sys_path, ajax_path);
return false;
};
function parseLinkAjaxPath($link){
var ajax_path = $link.attr('data-drupal-link-system-path');
// convert node link to edlp_ajax_node module links
var node_match = ajax_path.match(/^\/?(node\/\d+)$/g);
var term_match = ajax_path.match(/^\/?(taxonomy\/term\/\d+)$/g);
@@ -158,32 +172,40 @@
ajax_path += '/ajax'
}
_$body.addClass('ajax-loading');
$link.addClass('ajax-loading');
return ajax_path;
};
function ajaxLinkLoadContent(url, sys_path, ajax_path){
// TODO: use Drupal.url()
// Drupal.url = function (path) {
// return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
// };
_$body.addClass('ajax-loading');
var path = window.location.origin + Drupal.url(ajax_path);
$.getJSON(path, {})
.done(function(data){
onAjaxLinkLoaded(data, $link, sys_path);
onAjaxLinkLoaded(data, sys_path);
})
.fail(function(jqxhr, textStatus, error){
onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path);
onAjaxLinkLoadError(jqxhr, textStatus, error, sys_path);
});
return false;
var state = {
ajax_path:ajax_path,
sys_path:sys_path,
};
// url is null means that we are loading content on popState event
// so we don't record the state again
if(url){
history.pushState(state, null, url);
}
};
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
function onAjaxLinkLoadError(jqxhr, textStatus, error, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$link.removeClass('ajax-loading');
$('.ajax-loading').removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded : data', data);
function onAjaxLinkLoaded(data, sys_path){
// console.log('ajax link loaded : data', data);
_$body.removeClass('ajax-loading');
// reset all style may been added by other pages (like masonry for productions)
@@ -212,7 +234,12 @@
// handle clicked link classes
_$ajaxLinks.removeClass('is-active');
$link.removeClass('ajax-loading').addClass('is-active');
$('.ajax-loading').removeClass('ajax-loading');
$('a[data-drupal-link-system-path="'+sys_path+'"]').addClass('is-active');
// TODO: keep production menu active for content type Page (production)
// TODO: if node is in production menu tree, set first level of tree active, e.g. pieces sonores
// if block attached (eg : from edlp_productions module)
if(typeof data.block != 'undefined'){
@@ -222,7 +249,7 @@
}
}
initScrollbars();
// initScrollbars();
if(sys_path == "productions")
initProductions();
@@ -262,6 +289,44 @@
});
};
// _ _ _ _ _ ___
// | || (_)__| |_ ___ _ _ _ _ _ | / __|
// | __ | (_-< _/ _ \ '_| || | || \__ \
// |_||_|_/__/\__\___/_| \_, |\__/|___/
// |__/
function initHistory(){
initFirstLoad();
window.addEventListener('popstate', onHistoryPopState);
};
function initFirstLoad(){
console.log(window.location);
// console.log(document);
var url = window.location.pathname;
if( url != "" && url != "/"){
var $link = $('a[href="'+url+'"][data-drupal-link-system-path]').eq(0);
console.log($link);
var sys_path = $link.attr('data-drupal-link-system-path');
var state = {
ajax_path: parseLinkAjaxPath($link),
sys_path: sys_path,
};
history.replaceState(state, null, url);
ajaxLinkLoadContent(null, state.sys_path, state.ajax_path)
}else{
history.replaceState({home:true}, null, url);
}
};
function onHistoryPopState(e){
console.log('onPopState',e);
if(e.state.home){
backToFrontPage();
}else{
ajaxLinkLoadContent(null, e.state.sys_path, e.state.ajax_path)
}
};
// ___
// / __|___ _ _ _ __ _ _ ___
// | (__/ _ \ '_| '_ \ || (_-<
@@ -379,6 +444,8 @@
this.currentHistoricIndex = this.historic.length-1;
// this.shuffle_mode = shuffle_mode || false;
// TODO: add an hash tag to be able to share and play audio from any where
this.emmit('audio-open-document', {caller:caller});
this.launch();
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+1 -1
View File
@@ -2306,7 +2306,7 @@ footer {
height: 7px;
border: 1px solid red;
margin-right: 0.5em; }
footer nav#block-productions.block-menu ul li a:hover:before {
footer nav#block-productions.block-menu ul li a:hover:before, footer nav#block-productions.block-menu ul li a.is-active:before {
background-color: red; }
footer nav#block-productions.block-menu ul li a.ajax-loading:before {
-webkit-animation: rotation 2s infinite linear;
sites/all/themes/custom/edlptheme/assets/scripts/history.js
+11
View File
@@ -0,0 +1,11 @@
// console.log('History');
// console.log(window.location);
// console.log(document);
document.body.style.visibility = 'hidden';
if(window.location.pathname != "" && window.location.pathname != "/"){
// console.log('redirect');
var newloc = window.location.origin+'#'+window.location.pathname;
window.location.replace(newloc);
}else{
document.body.style.visibility = 'visible';
}
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+84 -17
View File
@@ -35,6 +35,7 @@
}
// initScrollbars();
initHistory();
initEvents();
};
@@ -118,8 +119,8 @@
return false;
// Audio links
// launch audio player and stop here
if($link.is('.audio-link')){
// TODO: stop randomplayer
_audioPlayer
.emmit('stop-shuffle')
.openDocument({
@@ -130,13 +131,26 @@
}
// other links
var url = $(this).attr('href');
var sys_path = $(this).attr('data-drupal-link-system-path');
var ajax_path = sys_path;
// front page
// just remove contents and stop here
if(sys_path == '<front>'){
backToFrontPage();
return false;
}
var ajax_path = parseLinkAjaxPath($link);
$link.addClass('ajax-loading');
ajaxLinkLoadContent(url, sys_path, ajax_path);
return false;
};
function parseLinkAjaxPath($link){
var ajax_path = $link.attr('data-drupal-link-system-path');
// convert node link to edlp_ajax_node module links
var node_match = ajax_path.match(/^\/?(node\/\d+)$/g);
var term_match = ajax_path.match(/^\/?(taxonomy\/term\/\d+)$/g);
@@ -158,32 +172,40 @@
ajax_path += '/ajax'
}
_$body.addClass('ajax-loading');
$link.addClass('ajax-loading');
return ajax_path;
};
function ajaxLinkLoadContent(url, sys_path, ajax_path){
// TODO: use Drupal.url()
// Drupal.url = function (path) {
// return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
// };
_$body.addClass('ajax-loading');
var path = window.location.origin + Drupal.url(ajax_path);
$.getJSON(path, {})
.done(function(data){
onAjaxLinkLoaded(data, $link, sys_path);
onAjaxLinkLoaded(data, sys_path);
})
.fail(function(jqxhr, textStatus, error){
onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path);
onAjaxLinkLoadError(jqxhr, textStatus, error, sys_path);
});
return false;
var state = {
ajax_path:ajax_path,
sys_path:sys_path,
};
// url is null means that we are loading content on popState event
// so we don't record the state again
if(url){
history.pushState(state, null, url);
}
};
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
function onAjaxLinkLoadError(jqxhr, textStatus, error, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$link.removeClass('ajax-loading');
$('.ajax-loading').removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded : data', data);
function onAjaxLinkLoaded(data, sys_path){
// console.log('ajax link loaded : data', data);
_$body.removeClass('ajax-loading');
// reset all style may been added by other pages (like masonry for productions)
@@ -212,7 +234,12 @@
// handle clicked link classes
_$ajaxLinks.removeClass('is-active');
$link.removeClass('ajax-loading').addClass('is-active');
$('.ajax-loading').removeClass('ajax-loading');
$('a[data-drupal-link-system-path="'+sys_path+'"]').addClass('is-active');
// TODO: keep production menu active for content type Page (production)
// TODO: if node is in production menu tree, set first level of tree active, e.g. pieces sonores
// if block attached (eg : from edlp_productions module)
if(typeof data.block != 'undefined'){
@@ -222,7 +249,7 @@
}
}
initScrollbars();
// initScrollbars();
if(sys_path == "productions")
initProductions();
@@ -262,6 +289,44 @@
});
};
// _ _ _ _ _ ___
// | || (_)__| |_ ___ _ _ _ _ _ | / __|
// | __ | (_-< _/ _ \ '_| || | || \__ \
// |_||_|_/__/\__\___/_| \_, |\__/|___/
// |__/
function initHistory(){
initFirstLoad();
window.addEventListener('popstate', onHistoryPopState);
};
function initFirstLoad(){
console.log(window.location);
// console.log(document);
var url = window.location.pathname;
if( url != "" && url != "/"){
var $link = $('a[href="'+url+'"][data-drupal-link-system-path]').eq(0);
console.log($link);
var sys_path = $link.attr('data-drupal-link-system-path');
var state = {
ajax_path: parseLinkAjaxPath($link),
sys_path: sys_path,
};
history.replaceState(state, null, url);
ajaxLinkLoadContent(null, state.sys_path, state.ajax_path)
}else{
history.replaceState({home:true}, null, url);
}
};
function onHistoryPopState(e){
console.log('onPopState',e);
if(e.state.home){
backToFrontPage();
}else{
ajaxLinkLoadContent(null, e.state.sys_path, e.state.ajax_path)
}
};
// ___
// / __|___ _ _ _ __ _ _ ___
// | (__/ _ \ '_| '_ \ || (_-<
@@ -379,6 +444,8 @@
this.currentHistoricIndex = this.historic.length-1;
// this.shuffle_mode = shuffle_mode || false;
// TODO: add an hash tag to be able to share and play audio from any where
this.emmit('audio-open-document', {caller:caller});
this.launch();
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+2 -1
View File
@@ -1294,7 +1294,8 @@ footer{
border: 1px solid red;
margin-right: 0.5em;
}
&:hover:before{
&:hover:before,
&.is-active:before{
background-color: red;
}
&.ajax-loading:before{
sites/all/themes/custom/edlptheme/edlptheme.libraries.yml
+4
View File
@@ -5,6 +5,10 @@ global-css:
assets/dist/styles/app.min.css: {}
# assets/dist/bower/OverlayScrollbars.min.css: {}
history-js:
version: VERSION
js:
assets/dist/scripts/history.min.js: { weight:-999, scope: header }
global-js:
version: VERSION
sites/all/themes/custom/edlptheme/gulpfile.js
+1 -1
View File
@@ -29,7 +29,7 @@ var config = {
}
gulp.task('scripts', function () {
gulp.src(['./assets/scripts/main.js']) // './assets/scripts/shared_variables.js',
gulp.src(['./assets/scripts/main.js', './assets/scripts/history.js']) // './assets/scripts/shared_variables.js',
// .pipe(concat('main.js'))
.pipe(config.production ? jsmin() : util.noop())
.pipe(rename({suffix: '.min'}))