From 51b6f477ddd70138ae9fd6a489e7a23b82a6a542 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Thu, 29 Mar 2018 23:58:36 +0200 Subject: [PATCH] history nav is working, remains flickering problems --- .../assets/dist/scripts/history.min.js | 11 ++ .../edlptheme/assets/dist/scripts/main.min.js | 101 +++++++++++++++--- .../edlptheme/assets/dist/styles/app.min.css | 2 +- .../edlptheme/assets/scripts/history.js | 11 ++ .../custom/edlptheme/assets/scripts/main.js | 101 +++++++++++++++--- .../custom/edlptheme/assets/styles/app.scss | 3 +- .../custom/edlptheme/edlptheme.libraries.yml | 4 + sites/all/themes/custom/edlptheme/gulpfile.js | 2 +- 8 files changed, 198 insertions(+), 37 deletions(-) create mode 100644 sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js create mode 100644 sites/all/themes/custom/edlptheme/assets/scripts/history.js diff --git a/sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js b/sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js new file mode 100644 index 000000000..be887dec8 --- /dev/null +++ b/sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js @@ -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'; +} diff --git a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js index 75f574ab2..fc0ce7623 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js +++ b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js @@ -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 == ''){ 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(); diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index a32c4bc80..2431aba3f 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css @@ -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; diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/history.js b/sites/all/themes/custom/edlptheme/assets/scripts/history.js new file mode 100644 index 000000000..be887dec8 --- /dev/null +++ b/sites/all/themes/custom/edlptheme/assets/scripts/history.js @@ -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'; +} diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index 75f574ab2..fc0ce7623 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js @@ -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 == ''){ 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(); diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 2138812d7..5cac5b10c 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -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{ diff --git a/sites/all/themes/custom/edlptheme/edlptheme.libraries.yml b/sites/all/themes/custom/edlptheme/edlptheme.libraries.yml index 3ebf78648..198b0e15f 100644 --- a/sites/all/themes/custom/edlptheme/edlptheme.libraries.yml +++ b/sites/all/themes/custom/edlptheme/edlptheme.libraries.yml @@ -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 diff --git a/sites/all/themes/custom/edlptheme/gulpfile.js b/sites/all/themes/custom/edlptheme/gulpfile.js index e03eb0dba..047aa7746 100644 --- a/sites/all/themes/custom/edlptheme/gulpfile.js +++ b/sites/all/themes/custom/edlptheme/gulpfile.js @@ -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'}))