navigation improvement, fix #372

This commit is contained in:
2019-12-03 18:56:00 +01:00
parent fdcb29a4f9
commit 1081ca49a6
2 changed files with 135 additions and 12 deletions
+15 -4
View File
@@ -1,5 +1,5 @@
(function($,Drupal,drupalSettings){EdlpTheme=function(){var _origin=window.location.origin;var _base_url=drupalSettings.path.baseUrl;var _ajax_settings=drupalSettings.edlp_ajax;var _$body=$('body');var _corpus_ready=false;var _$corpus_canvas;var _$row=$('main[role="main"]>.layout-content>.row');var _$ajaxLinks;var _audioPlayer;var _randomPlayer;var _compoPlayer;var _ajax_timing={start:0,end:0};var _corpus_promise;var _is_mobile=edlp_mobile.device_is_mobile;var _is_loggedin=drupalSettings.user.uid===0?false:true;var _$log_form;var _user_tokens;function init(){void 0;if(!_is_loggedin){initLogForm();}
(function($,Drupal,drupalSettings){EdlpTheme=function(){var _origin=window.location.origin;var _base_url=drupalSettings.path.baseUrl;var _ajax_settings=drupalSettings.edlp_ajax;var _$body=$('body');var _corpus_ready=false;var _$corpus_canvas;var _$row=$('main[role="main"]>.layout-content>.row');var _$ajaxLinks;var _audioPlayer;var _randomPlayer;var _compoPlayer;var _ajax_timing={start:0,end:0};var _corpus_promise;var _is_mobile=edlp_mobile.device_is_mobile;var _is_loggedin=drupalSettings.user.uid===0?false:true;var _$log_form;var _user_tokens;var _states_history=[];function init(){void 0;if(!_is_loggedin){initLogForm();}
if(_is_mobile){initMobile();}
initEvents();_audioPlayer=new AudioPlayer();_compoPlayer=new CompoPlayer();initAjaxLinks();initHistory();if(!_is_mobile){checkLayout();initAudioLinksHover();}
if(_is_mobile){if(drupalSettings.path.isFront){initHomeMobile();}
@@ -8,7 +8,9 @@ function initMobile(){$('h2, a','#block-mainnavigation').add('h2, a','#block-mai
function onclickHomeMobileMenu(e){$('#block-mainnavigation-2').toggleClass('opened');};function initHomeMobile(){};function initEvents(){var $corpus_df=$.Deferred();_corpus_promise=$corpus_df.promise();_$body.on('corpus-map-ready',function(e){onCorpusMapReady(e);$corpus_df.resolve();}).on('on-studio-chutier-updated',initAjaxLinks).on('studio-initialized',function(e){_compoPlayer.newCompo();}).on('studio-not-active',function(e){_compoPlayer.deactivate();}).on('on-studio-compo-updated',function(e){initAjaxLinks();_compoPlayer.refresh();}).on('on-studio-compo-opened',function(e){initAjaxLinks();_compoPlayer.newCompo();}).on('search-results-loaded',function(e){initAjaxLinks();initAudioLinksHover();checkVisibleCorpusMapSpace();}).on('open_entree',function(e){void 0;closeAllModals();checkLayout();_$body.removeClass();if(typeof e.url!='undefined'){var state=getSysPathState(e.sys_path);history.pushState(state,null,e.url);if(typeof _paq!=='undefined'){_paq.push(['setCustomUrl',e.url]);_paq.push(['setDocumentTitle',e.title]);_paq.push(['trackPageView']);}}}).on('close_entree',function(e){backToFrontPage();checkLayout();});window.addEventListener('resize',checkLayout,false);}
function checkLayout(){var $audioplayer=$("#audio-player");if($audioplayer.length){var navpos=$('#block-mainnavigation').position();if(typeof navpos!='undefined'){$audioplayer.css({'width':navpos.left+'px'});}}
checkGridBlockHeight();checkGridBlockVisible();};function initScrollbars(){};function getSysPathState(sys_path,view_mode){var state={'sys_path':sys_path,'ajax_path':sys_path};var node_match=state.ajax_path.match(/^\/?(node\/(\d+))$/i);void 0;var term_match=state.ajax_path.match(/^\/?(taxonomy\/term\/(\d+))$/i);void 0;if(node_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+node_match[1];state.node_nid=node_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}}else if(term_match){state.ajax_path=_ajax_settings.entityjson_path+'/'+term_match[1];state.ajax_path=state.ajax_path.replace(/taxonomy\/term/,'taxonomy_term');state.entree_tid=term_match[2];if(view_mode){state.ajax_path+='/'+view_mode;state.view_mode=view_mode;}else{state.ajax_path=null;}}else{state.ajax_path+='/ajax'}
return state;};function ajaxLoadContent(state){void 0;_$body.addClass('ajax-loading');_ajax_timing.start=performance.now();var path=_origin+Drupal.url(state.ajax_path);$.getJSON(path,{}).done(function(data){onAjaxLoaded(data,state);}).fail(function(jqxhr,textStatus,error){onAjaxLoadError(jqxhr,textStatus,error,state.sys_path);});};function onAjaxLoadError(jqxhr,textStatus,error,sys_path){void 0;$('.ajax-loading').removeClass('ajax-loading');_$body.removeClass('ajax-loading');};function onAjaxLoaded(data,state){void 0;var $rendered=$(data.rendered);$rendered.attr({'sys_path':state.sys_path,'view_mode':state.view_mode});if(data.entity_type=="node"&&data.bundle=="evenement"){if(_$row.find('.col.event').length){_$row.find('.col.event').replaceWith($rendered);}else if(_$row.find('.col.aside').length){_$row.find('.col.aside').replaceWith($rendered);}else{_$row.append($rendered);}}else{_$row.removeAttr('style').html($rendered);}
return state;};function ajaxLoadContent(state){void 0;_$body.addClass('ajax-loading');_ajax_timing.start=performance.now();var path=_origin+Drupal.url(state.ajax_path);$.getJSON(path,{}).done(function(data){onAjaxLoaded(data,state);}).fail(function(jqxhr,textStatus,error){onAjaxLoadError(jqxhr,textStatus,error,state.sys_path);});};function onAjaxLoadError(jqxhr,textStatus,error,sys_path){void 0;$('.ajax-loading').removeClass('ajax-loading');_$body.removeClass('ajax-loading');};function onAjaxLoaded(data,state){void 0;var $rendered=$(data.rendered);$rendered.attr({'sys_path':state.sys_path,'view_mode':state.view_mode});if(data.entity_type=="node"&&data.bundle=="evenement"){if(_$row.find('.col.event').length){_$row.find('.col.event').replaceWith($rendered);}else if(_$row.find('.col.aside').length){_$row.find('.col.aside').replaceWith($rendered);}else{_$row.append($rendered);}}
else if((state.context=='document-transcript'||state.context=='document-artcile')&&state.caller=="search"){_$row.append($rendered);}
else{_$row.removeAttr('style').html($rendered);}
if((data.entity_type=="node"&&data.bundle=="static")||state.sys_path=="docsindex"){$('.ajax-link.is-active.articles-link').removeClass('is-active');}
var body_classes=['path-'+state.sys_path.replace(/\//g,'-'),'entity-type-'+data.entity_type,'bundle-'+data.bundle,'view-mode-'+data.view_mode];_$body.removeClass().addClass(body_classes.join(' '));if(state.node_nid)
_$body.addClass('path-edlp-node');$('.ajax-loading').removeClass('ajax-loading');$('.ajax-link.is-active:not(.articles-link)').removeClass('is-active');$('.is-active-trail').removeClass('is-active-trail');if(typeof state.selector!='undefined'){void 0;$('a[selector="'+state.selector+'"]').addClass('is-active');initAudioLinksHover();}else{if(typeof state.view_mode!='undefined'){$('a[viewmode="'+state.view_mode+'"][data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');}else{_corpus_promise.done(function(){$('a[data-drupal-link-system-path="'+state.sys_path+'"]').addClass('is-active');});}
@@ -23,8 +25,12 @@ if(data.entity_type=="node"&&data.bundle=="enregistrement"&&data.view_mode=="tra
if(state.sys_path=="search"){initSearch();}
if(typeof data.translations_links!='undefined'){void 0;var lang_code=drupalSettings.path.currentLanguage;var $links=$(data.translations_links);$links.find('li[hreflang="'+lang_code+'"]').addClass('is-active').find('a').addClass('is-active');if(state.view_mode){$links.find('a').each(function(i,e){var $a=$(this);$a.attr('href',$a.attr('href')+'#'+state.view_mode);});}
$('ul','.block.language-switcher-language-url').replaceWith($links);}
initAjaxLinks();initAudioLinksHover();checkVisibleCorpusMapSpace();_$body.trigger({'type':'new-content-ajax-loaded'});Drupal.attachBehaviors(_$row[0]);_$body.attr('booted','booted');_$body.removeClass('ajax-loading');if(state.url){history.pushState(state,null,state.url);if(typeof _paq!=='undefined'){_paq.push(['setCustomUrl',state.url]);_paq.push(['setDocumentTitle',data.title]);_ajax_timing.end=performance.now();_paq.push(['setGenerationTimeMs',_ajax_timing.end-_ajax_timing.start]);_paq.push(['trackPageView']);}}};function initAudioLinksHover(){void 0;_$row.find('a.audio-link').on('mouseover',function(event){event.preventDefault();if(_corpus_ready){_$corpus_canvas.trigger({type:'mouseover-audio-link',nid:$(this).attr('nid')});}}).on('mouseout',function(event){event.preventDefault();if(_corpus_ready){_$corpus_canvas.trigger({type:'mouseout-audio-link',nid:$(this).attr('nid')});}});};function addCloseModalBtnToCols(){if(_is_mobile)return;$('.col',_$row).each(function(index,el){if($('span.close-col-btn',this).length)
return true;$(this).children('.wrapper').prepend($('<span>').addClass('close-col-btn').on('click',onCloseModal));});};function onCloseModal(e){void 0;var $col=$(this).parents('.col');var theme=$col.attr('theme');if(theme!=''){_$body.trigger({'type':theme+'-col-closed'});}
initAjaxLinks();initAudioLinksHover();checkVisibleCorpusMapSpace();_$body.trigger({'type':'new-content-ajax-loaded'});Drupal.attachBehaviors(_$row[0]);_$body.attr('booted','booted');_$body.removeClass('ajax-loading');_states_history.unshift(state);if(state.url){history.pushState(state,null,state.url);if(typeof _paq!=='undefined'){_paq.push(['setCustomUrl',state.url]);_paq.push(['setDocumentTitle',data.title]);_ajax_timing.end=performance.now();_paq.push(['setGenerationTimeMs',_ajax_timing.end-_ajax_timing.start]);_paq.push(['trackPageView']);}}};function initAudioLinksHover(){void 0;_$row.find('a.audio-link').on('mouseover',function(event){event.preventDefault();if(_corpus_ready){_$corpus_canvas.trigger({type:'mouseover-audio-link',nid:$(this).attr('nid')});}}).on('mouseout',function(event){event.preventDefault();if(_corpus_ready){_$corpus_canvas.trigger({type:'mouseout-audio-link',nid:$(this).attr('nid')});}});};function addCloseModalBtnToCols(){if(_is_mobile)return;$('.col',_$row).each(function(index,el){if($('span.close-col-btn',this).length)
return true;$(this).children('.wrapper').prepend($('<span>').addClass('close-col-btn').on('click',onCloseModal));});};function onCloseModal(e){void 0;void 0;if(['document-transcript','document-article'].indexOf(_states_history[0].context)!=-1)
{if(_states_history[0].caller=="production"){for(var i=0;i<_states_history.length;i++){if(_states_history[i].context=="production"){void 0;ajaxLoadContent(_states_history[i]);return;}}}
if(_states_history[0].caller=="entree-index"){for(var i=0;i<_states_history.length;i++){if(_states_history[i].context=="entree-index"){void 0;ajaxLoadContent(_states_history[i]);return;}}}
if(_states_history[0].caller=="entree-notice"){for(var i=0;i<_states_history.length;i++){if(_states_history[i].context=="entree-notice"){void 0;ajaxLoadContent(_states_history[i]);return;}}}}
var $col=$(this).parents('.col');var theme=$col.attr('theme');if(theme!=''){_$body.trigger({'type':theme+'-col-closed'});}
if(_$body.is('.entity-type-node.bundle-page')&&$(this).next().is('.node--type-page')){$col.add($col.siblings('.col')).remove();}else{$col.remove();}
checkRowEmpty();checkVisibleCorpusMapSpace();if($col.attr('view_mode')&&$col.attr('sys_path')){$('a[data-drupal-link-system-path="'+$col.attr('sys_path')+'"][viewmode="'+$col.attr('view_mode')+'"]').removeClass('is-active');}};function initHistory(){initFirstLoad();window.addEventListener('popstate',onHistoryPopState);};function initFirstLoad(){void 0;void 0;var edlp_origin=JSON.parse(window.localStorage.getItem('edlp_origin'));void 0;if(edlp_origin!=null&&edlp_origin.sys_path){var hash=edlp_origin.hash.replace('#','');var state=getSysPathState(edlp_origin.sys_path,hash);if(edlp_origin.entity_type=="taxonomy_term"&&edlp_origin.entity_bundle=="entrees"&&hash){state.selector='entree-'+hash+'-link-'+edlp_origin.entity_id;if(_corpus_ready){_$corpus_canvas.trigger({type:'open-entree',tid:edlp_origin.entity_id});}else{$('li.entree[tid="'+edlp_origin.entity_id+'"] a.term-link').addClass('is-active');}}
if(edlp_origin.audio_url){var node={nid:edlp_origin.entity_id,audio_url:edlp_origin.audio_url};_audioPlayer.openDocument(node,'history_first_load');closeAllModals();if(hash==""||hash=='random'){state.audio=true;state.node=node;_$body.attr('booted','booted');}else{ajaxLoadContent(state);}}
@@ -42,6 +48,11 @@ if($link.is('[type^="audio"]')){_audioPlayer.emmit('stop-shuffle').openSound($li
var sys_path=$(this).attr('data-drupal-link-system-path');if(sys_path=='<front>'){if(!_is_mobile){if($link.is('.is-active')&&_corpus_ready){_$corpus_canvas.trigger({'type':'shuffle-collection'});}else{backToFrontPage();}
return false;}}
var view_mode=$link.attr('viewmode');var state=getSysPathState(sys_path,view_mode);state.url=$(this).attr('href');if(view_mode){state.url+="#"+view_mode;}
var contexts=/^.*\/(productions|documents|entrees|search)(\/.*)?/g.exec(state.url);void 0;if(contexts){switch(contexts[1]){case'productions':state.context="production"
break;case'entrees':switch(view_mode){case'index':state.context="entree-index";break;case'notice':state.context="entree-notice";break;}
break;case'search':state.context="search";break;case'documents':switch(view_mode){case'transcript':state.context="document-transcript";break;case'article':state.context="document-article";break;default:state.context="document";}
if(typeof _states_history[0]!="undefined"){if(_states_history[0].caller){state.caller=_states_history[0].caller}else{state.caller=_states_history[0].context}}else{state.caller=null;}
break;}}else{state.context=null;state.context=caller;}
if($link.is('[selector]')){state.selector=$link.attr('selector');}
$link.addClass('ajax-loading');ajaxLoadContent(state);return false;};function onCorpusMapReady(e){_corpus_ready=true;_$corpus_canvas=$('canvas#corpus-map');_$corpus_canvas.on('corpus-cliked-on-map',function(e){backToFrontPage();}).on('corpus-cliked-on-node',function(e){_audioPlayer.emmit('stop-shuffle').openDocument(e.target_node);});_randomPlayer=new RandomPlayer(e.playlist);initAjaxLinks();_$body.attr('corpus-map','ready');}
function openEntree(tid){if(tid){closeAllModals();_$body.removeClass();if(_corpus_ready){_$corpus_canvas.trigger({type:'open-entree',tid:tid});}else{$('li.entree[tid="'+tid+'"] a.term-link').addClass('is-active');}}};function checkVisibleCorpusMapSpace(){var left_limit=0,right_limit=0;_$row.find('.col').each(function(i,e){var $col=$(this);var offset=$col.offset();void 0;switch(true){case $col.is('.float-right'):right_limit=Math.max(right_limit,Math.abs(offset.left-15-window.innerWidth));break;default:left_limit=Math.max(left_limit,offset.left+$col.width()+15);break;}});void 0;if(_corpus_ready){_$body.trigger({type:'visible-space-changed',left_limit:left_limit,right_limit:right_limit});}else{_corpus_promise.done(function(){_$body.trigger({type:'visible-space-changed',left_limit:left_limit,right_limit:right_limit});});}};function AudioPlayer(){var that=this;this.fid;this.audio=new Audio();this.audio_events=["loadedmetadata","playing","pause","timeupdate","ended","error"];this.$container=$('<div id="audio-player">');this.$btns=$('<div>').addClass('btns').appendTo(this.$container);this.$previous=$('<div>').addClass('previous').appendTo(this.$btns);this.$playpause=$('<div>').addClass('play-pause').appendTo(this.$btns);this.$next=$('<div>').addClass('next').appendTo(this.$btns);this.$timelinecont=$('<div>').addClass('time-line-container').appendTo(this.$container);this.$timeline=$('<div>').addClass('time-line').appendTo(this.$timelinecont);this.$loader=$('<div>').addClass('loader').appendTo(this.$timeline);this.$cursor=$('<div>').addClass('cursor').appendTo(this.$timeline);this.$time=$('<div>').addClass('time').appendTo(this.$container);this.$currentTime=$('<div>').addClass('current-time').html('00:00').appendTo(this.$time);this.$duration=$('<div>').addClass('duration').html('00:00').appendTo(this.$time);this.$fav=$('<div>').addClass('favoris').appendTo(this.$container);this.$cartel=$('<div>').addClass('cartel').appendTo(this.$container);this.scndCartel_visible=0;this.cartelSwitchIntervalMS=7000;this.cartelSwitchInterval=false;this.hideTimer=false;this.hideTimeMS=15000;this.currentHistoricIndex=null;this.historic=[];this.shuffle_is_active=false;this.auto_open_article=false;this.event_handlers={'audio-open-document':[],'audio-play':[],'audio-pause':[],'audio-play-next':[],'audio-ended':[],'stop-shuffle':[]};this.init();};AudioPlayer.prototype={init(){this.$container_parent=$('header[role="banner"] .region-header');this.$container.appendTo(this.$container_parent);this.timeline_w=parseInt(this.$timeline.width());this.$loader.on('click',this.seek.bind(this));var fn='';for(var i=0;i<this.audio_events.length;i++){fn=this.audio_events[i];fn='on'+fn.charAt(0).toUpperCase()+fn.slice(1);this.audio.addEventListener(this.audio_events[i],this[fn].bind(this),true);}
@@ -22,6 +22,7 @@
var _is_loggedin = drupalSettings.user.uid === 0 ? false : true;
var _$log_form;
var _user_tokens;
var _states_history = [];
// ___ _ _
// |_ _|_ _ (_) |_
@@ -366,7 +367,14 @@
}else{
_$row.append($rendered);
}
}else{
}
else if(
(state.context == 'document-transcript' || state.context == 'document-artcile')
&& state.caller == "search"
){
_$row.append($rendered);
}
else{
_$row.removeAttr('style').html($rendered);
}
@@ -514,15 +522,12 @@
_$body.removeClass('ajax-loading');
// record the states history as we can't get them from history api
_states_history.unshift(state);
// url is null means that we are loading content on popState event
// so we don't record the state again
if(state.url){
// var state = {
// ajax_path:ajax_path,
// sys_path:sys_path,
// };
// console.log('url:'+url+' ; state',state);
// console.log(window.location);
// /!\ we can not pushestate with absolute url /!\
history.pushState(state, null, state.url);
@@ -584,6 +589,55 @@
function onCloseModal(e){
console.log("onCloseModal");
// check from production to audio text back to production
console.log("onCloseModal _states_history",_states_history);
if(['document-transcript', 'document-article'].indexOf(_states_history[0].context) != -1)
{
if (_states_history[0].caller == "production") {
for (var i = 0; i < _states_history.length; i++) {
if (_states_history[i].context == "production") {
// history.go(i*-1-1);
console.log("onCloseModal return to production", _states_history[i]);
ajaxLoadContent(_states_history[i]);
return;
}
}
}
if (_states_history[0].caller == "entree-index") {
for (var i = 0; i < _states_history.length; i++) {
if (_states_history[i].context == "entree-index") {
console.log("onCloseModal return to entree-index", _states_history[i]);
ajaxLoadContent(_states_history[i]);
return;
}
}
}
if (_states_history[0].caller == "entree-notice") {
for (var i = 0; i < _states_history.length; i++) {
if (_states_history[i].context == "entree-notice") {
console.log("onCloseModal return to entree-notice", _states_history[i]);
ajaxLoadContent(_states_history[i]);
return;
}
}
}
}
// return to productions home when closing a prod
// if(['production'].indexOf(_states_history[0].context) != -1)
// {
// var i = 0;
// while (_states_history[i].caller == "production-home") {
// if (_states_history[i].context == "production-home") {
// // history.go(i*-1-1);
// console.log("onCloseModal return to productions home", _states_history[i]);
// ajaxLoadContent(_states_history[i]);
// return;
// }
// i++;
// }
// }
// check for theme attribute and emmit event
var $col = $(this).parents('.col');
var theme = $col.attr('theme');
@@ -882,6 +936,64 @@
state.url += "#"+view_mode;
}
// get context for navigation purpose
// var contexts = state.url.match(/^.*\/(productions)\/.*/g);
var contexts = /^.*\/(productions|documents|entrees|search)(\/.*)?/g.exec(state.url);
console.log("onClickAjaxLink contexts", contexts);
if(contexts){
switch (contexts[1]) {
case 'productions':
// console.log("onClickAjaxLink is production");
// if (typeof contexts[2] !== 'undefined') {
state.context = "production"
// }else{
// state.context = "production-home"
// }
break;
case 'entrees':
switch(view_mode) {
case 'index':
state.context = "entree-index";
break;
case 'notice':
state.context = "entree-notice";
break;
}
break;
case 'search':
state.context = "search";
break;
case 'documents':
// console.log("onClickAjaxLink is production");
switch (view_mode) {
case 'transcript':
state.context = "document-transcript";
break;
case 'article':
state.context = "document-article";
break;
default:
state.context = "document";
}
// get the caller from pecedent context
if(typeof _states_history[0] != "undefined"){
if(_states_history[0].caller){
state.caller = _states_history[0].caller
}else{
state.caller = _states_history[0].context
}
}else{
state.caller = null;
}
break;
}
}else{
state.context = null;
state.context = caller;
}
if($link.is('[selector]')){
state.selector = $link.attr('selector');
}
@@ -1308,7 +1420,7 @@
.fail(this.onNodeLoadFail.bind(this));
},
onNodeLoaded(data){
console.log('AudioPlayer node loaded', data);
console.log('AudioPlayer node loaded');//, data);
this.$cartel.html(data.rendered).removeClass('loading');
_$body.trigger({'type':'new-audio-cartel-loaded'});
initAjaxLinks();