history nav is working, remains flickering problems

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';
+}

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 == '<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');
+      return ajax_path;
-      $link.addClass('ajax-loading');
+    };
+    function ajaxLinkLoadContent(url, sys_path, ajax_path){
 
-      // TODO: use Drupal.url()
+      _$body.addClass('ajax-loading');
-      // Drupal.url = function (path) {
-      //   return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
-      // };
 
       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){
+    function onAjaxLinkLoaded(data, sys_path){
-      console.log('ajax link loaded : data', data);
+      // 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

@@ -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

@@ -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

@@ -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');
+      return ajax_path;
-      $link.addClass('ajax-loading');
+    };
+    function ajaxLinkLoadContent(url, sys_path, ajax_path){
 
-      // TODO: use Drupal.url()
+      _$body.addClass('ajax-loading');
-      // Drupal.url = function (path) {
-      //   return drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix + path;
-      // };
 
       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){
+    function onAjaxLinkLoaded(data, sys_path){
-      console.log('ajax link loaded : data', data);
+      // 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

@@ -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

@@ -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

@@ -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'}))