history nav is working, remains flickering problems

2018-03-29 23:58:36 +02:00
parent 33a04c55b1
commit 51b6f477dd
8 changed files with 198 additions and 37 deletions
@@ -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';
+}
@@ -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();