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

history nav is now ok

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-04-03 15:00:13 +02:00
parent f3fc776b71
commit 4e01b68f5b
20 changed files with 810 additions and 554 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
+16 -5
View File
@@ -1,10 +1,21 @@
// 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');
// https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
function setCookie(name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);
document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}
// var edlp is provided by edlp_ajax.module file
if(edlp.redirect){
document.body.style.visibility = 'hidden';
// record current sys_path in cookie (or storage) (without first slash to be like real system-path)
setCookie('edlp_origin_path', edlp.sys_path.replace(/^\//, ''), 1);
// create new location (transform current path to hash)
// TODO: understand why edlp.com/#/presentation is magicaly transformed into edlp.com/presentation
var newloc = window.location.origin+'#'+window.location.pathname;
// redirect
window.location.replace(newloc);
}else{
document.body.style.visibility = 'visible';
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+263 -212
View File
@@ -1,6 +1,7 @@
(function($, Drupal, drupalSettings) {
EdlpTheme = function(){
var _ajax_settings = drupalSettings.edlp_ajax;
var _$body = $('body');
var _is_front = _$body.is('.path-frontpage');
var _$corpus_canvas;
@@ -15,9 +16,10 @@
// | || ' \| | _|
// |___|_||_|_|\__|
function init(){
console.log("EdlpTheme init()");
//console.log("EdlpTheme init()");
// TODO: redirect all no-front pages to front with write hash
// redirect all no-front pages to front with right url ajax load
initHistory();
_$body.on('corpus-map-ready', onCorpusMapReady);
@@ -26,16 +28,11 @@
initAjaxLinks();
if (_$body.is('.path-productions')){
initProductions();
}
if (_$body.is('.path-productions')) initProductions();
if(_$body.is('.path-frontpage')){
initHome();
}
if(_$body.is('.path-frontpage')) initHome();
// initScrollbars();
initHistory();
initEvents();
};
@@ -81,15 +78,223 @@
// });
};
// _ _
// /_\ (_)__ ___ __
// / _ \ | / _` \ \ /
// /_/ \_\/ \__,_/_\_\
// |__/
// TODO: add url hash nav
// TODO: implement history.js
function parseAjaxSysPath(sys_path, view_mode){
// console.log('Theme : parseAjaxSysPath', sys_path);
var ajax_path = sys_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);
if(node_match){
ajax_path = _ajax_settings.entityjson_path+'/'+node_match[0];
// check for viewmode attribute
if(view_mode){
ajax_path += '/'+view_mode;
}
}else if(term_match){
ajax_path = _ajax_settings.entityjson_path+'/'+term_match[0];
ajax_path = ajax_path.replace(/taxonomy\/term/, 'taxonomy_term');
// check for viewmode attribute
if(view_mode){
ajax_path += '/'+view_mode;
}
}else{
// convert other link to ajax
// TODO: we assume that other links (no node, no term) are all from own modules (e.g. productions) !! may not be true !!
ajax_path += '/ajax'
}
return ajax_path;
};
function ajaxLoadContent(url, sys_path, ajax_path, selector){
//console.log('ajaxLoadContent : ajax_path', ajax_path);
_$body.addClass('ajax-loading');
var path = window.location.origin + Drupal.url(ajax_path);
$.getJSON(path, {})
.done(function(data){
onAjaxLoaded(data, sys_path, selector);
})
.fail(function(jqxhr, textStatus, error){
onAjaxLoadError(jqxhr, textStatus, error, sys_path);
});
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){
// console.log('url:'+url+' ; state',state);
// we can not pushestate with absolute url
history.pushState(state, null, url);
}
};
function onAjaxLoadError(jqxhr, textStatus, error, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$('.ajax-loading').removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
function onAjaxLoaded(data, sys_path, selector){
console.log('ajax link loaded : data', data);
// reset all style may been added by other pages (like masonry for productions)
// and replace all content with newly loaded
// TODO: build a system to replace or append contents (like studio + search)
_$row.removeAttr('style').html(data.rendered);
// add close btn
if(sys_path != 'productions'){
addCloseBtnToCols();
}
// add body class for currently loaded content
var body_classes = [
'path-'+sys_path.replace(/\//g, '-'),
'entity-type-'+data.entity_type,
'bundle-'+data.bundle,
'view-mode-'+data.view_mode
];
_$body.removeClass().addClass(body_classes.join(' '));
// id node add a generic path-node class to body
m = sys_path.match(/^\/?(node\/\d+)$/g);
if(m)
_$body.addClass('path-edlp-node');
// handle clicked link classes
_$ajaxLinks.removeClass('is-active');
$('.ajax-loading').removeClass('ajax-loading');
// TODO: break entrees links wich all have same sys_path
if(typeof selector != 'undefined'){
$('a[selector="'+selector+'"]').addClass('is-active');
}else{
$('a[data-drupal-link-system-path="'+sys_path+'"]').addClass('is-active');
}
// if bundle page (productions) activate production links
if (typeof data.bundle != 'undefined' && data.bundle == "page") {
$('a[data-drupal-link-system-path="productions"]').addClass('is-active');
}
// if node is in production menu tree, set first level of tree active, e.g. pieces sonores
if (typeof data.menu_parents != 'undefined') {
for (var i = 0; i < data.menu_parents.length; i++) {
var menu_sys_path = data.menu_parents[i];
$('a[data-drupal-link-system-path="'+menu_sys_path+'"]').addClass('is-active');
}
}
// if block attached (eg : from edlp_productions module)
// not used anymore as production block is always present (but not visible)
if(typeof data.block != 'undefined'){
// if block not already added
if(!$('#'+data.block.id, '.region-'+data.block.region).length){
$('.region-'+data.block.region).append(data.block.rendered);
}
}
// initScrollbars();
if(sys_path == "productions")
initProductions();
initAjaxLinks();
// trigger other modules behaviours
_$body.trigger({'type':'new-content-ajax-loaded'});
// and call druapl behaviours
Drupal.attachBehaviors(_$row[0]);
_$body.attr('booted', 'booted');
_$body.removeClass('ajax-loading');
};
function addCloseBtnToCols(){
$('.col', _$row).each(function(index, el) {
if($('span.close-col-btn', this).length)
return true;
$(this).children('.wrapper').append($('<span>')
.addClass('close-col-btn')
.on('click', function(e){
// check for theme attribute and emmit event
var $col = $(this).parents('.col');
var theme = $col.attr('theme');
if(theme != ''){
_$body.trigger({'type':theme+'-col-closed'});
}
// remove the col
$col.remove();
// if row is empty call closeAllModals()
if(!$('.col', _$row).length){
backToFrontPage();
}
})
);
});
};
// _ _ _ _
// | || (_)__| |_ ___ _ _ _ _
// | __ | (_-< _/ _ \ '_| || |
// |_||_|_/__/\__\___/_| \_, |
// |__/
function initHistory(){
initFirstLoad();
window.addEventListener('popstate', onHistoryPopState);
};
function initFirstLoad(){
// console.log('theme : initFirstLoad()', window.location);
// console.log(document.cookie);
var url = window.location.pathname;
if(url != '' && url != '/'){
var origin_path = getCookie('edlp_origin_path');
// console.log('origin_path', origin_path);
if(origin_path){
var state = {
ajax_path: parseAjaxSysPath(origin_path),
sys_path: origin_path,
};
ajaxLoadContent(null, state.sys_path, state.ajax_path);
history.replaceState(state, null, url);
// reset the cookie
deleteCookie('edlp_origin_path');
deleteCookie('edlp_sys_path');
}
}else{
history.replaceState({home:true}, null, url);
_$body.attr('booted', 'booted');
}
};
function onHistoryPopState(e){
//console.log('onPopState',e);
if(e.state.home){
backToFrontPage();
}else{
ajaxLoadContent(null, e.state.sys_path, e.state.ajax_path)
}
};
// _ _ _ _ _
// /_\ (_)__ ___ _| | (_)_ _ | |__ ___
// / _ \ | / _` \ \ / |__| | ' \| / /(_-<
// /_/ \_\/ \__,_/_\_\____|_|_||_|_\_\/__/
// |__/
function initAjaxLinks(){
console.log('initAjaxLinks');
// console.log('initAjaxLinks');
$('a', '#block-mainnavigation')
.add('a', '#block-footer.menu--footer')
@@ -98,9 +303,10 @@
.add('a', '.productions-subtree')
.add('a', '.productions-parent')
// .add('a.index-link, a.notice-link', '#block-edlpentreesblock')
// .addClass('use-ajax')
.addClass('ajax-link');
Drupal.ajax.bindAjaxLinks('#block-footer.menu--footer');
_$ajaxLinks = $('.ajax-link:not(.ajax-enabled)')
.each(function(i,e){
var $this = $(this);
@@ -141,193 +347,18 @@
return false;
}
var ajax_path = parseLinkAjaxPath($link);
var view_mode = $link.attr('viewmode');
var ajax_path = parseAjaxSysPath(sys_path, view_mode);
$link.addClass('ajax-loading');
ajaxLinkLoadContent(url, sys_path, ajax_path);
if($link.is('[selector]')){
var selector = $link.attr('selector');
}
ajaxLoadContent(url, sys_path, ajax_path, selector);
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);
if(node_match){
ajax_path = 'edlp/ajax/json/'+node_match[0];
// check for viewmode attribute
if($link.attr('viewmode')){
ajax_path += '/'+$link.attr('viewmode');
}
}else if(term_match){
ajax_path = 'edlp/ajax/json/'+term_match[0];
ajax_path = ajax_path.replace(/taxonomy\/term/, 'taxonomy_term');
// check for viewmode attribute
if($link.attr('viewmode')){
ajax_path += '/'+$link.attr('viewmode');
}
}else{
// convert other link to ajax
ajax_path += '/ajax'
}
return ajax_path;
};
function ajaxLinkLoadContent(url, sys_path, ajax_path){
_$body.addClass('ajax-loading');
var path = window.location.origin + Drupal.url(ajax_path);
$.getJSON(path, {})
.done(function(data){
onAjaxLinkLoaded(data, sys_path);
})
.fail(function(jqxhr, textStatus, error){
onAjaxLinkLoadError(jqxhr, textStatus, error, sys_path);
});
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, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$('.ajax-loading').removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
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)
// and replace all content with newly loaded
// TODO: build a system to replace or append contents (like studio + search)
_$row.removeAttr('style').html(data.rendered);
// add close btn
if(sys_path != 'procuction'){
addCloseBtnToCols();
}
// add body class for currently loaded content
var body_classes = [
'path-'+sys_path.replace(/\//g, '-'),
'entity-type-'+data.entity_type,
'bundle-'+data.bundle,
'view-mode-'+data.view_mode
];
_$body.removeClass().addClass(body_classes.join(' '));
// id node add a generic path-node class to body
m = sys_path.match(/^\/?(node\/\d+)$/g);
if(m)
_$body.addClass('path-edlp-node');
// handle clicked link classes
_$ajaxLinks.removeClass('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'){
// if block not already added
if(!$('#'+data.block.id, '.region-'+data.block.region).length){
$('.region-'+data.block.region).append(data.block.rendered);
}
}
// initScrollbars();
if(sys_path == "productions")
initProductions();
initAjaxLinks();
// trigger other modules behaviours
_$body.trigger({'type':'new-content-ajax-loaded'});
// and call druapl behaviours
Drupal.attachBehaviors(_$row[0]);
};
function addCloseBtnToCols(){
$('.col', _$row).each(function(index, el) {
if($('span.close-col-btn', this).length)
return true;
$(this).children('.wrapper').append($('<span>')
.addClass('close-col-btn')
.on('click', function(e){
// check for theme attribute and emmit event
var $col = $(this).parents('.col');
var theme = $col.attr('theme');
if(theme != ''){
_$body.trigger({'type':theme+'-col-closed'});
}
// remove the col
$col.remove();
// if row is empty call closeAllModals()
if(!$('.col', _$row).length){
backToFrontPage();
}
})
);
});
};
// _ _ _ _ _ ___
// | || (_)__| |_ ___ _ _ _ _ _ | / __|
// | __ | (_-< _/ _ \ '_| || | || \__ \
// |_||_|_/__/\__\___/_| \_, |\__/|___/
// |__/
function initHistory(){
initFirstLoad();
window.addEventListener('popstate', onHistoryPopState);
};
function initFirstLoad(){
console.log(window.location);
// console.log(document);
var url = window.location.pathname;
if( url != "" && url != "/"){
// TODO: THIS IS NOT WORKING ! with link which dont exist in dom, e.g. productions
// TODO: how to retrieve sys_path without dom ?
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)
}
};
// ___
// / __|___ _ _ _ __ _ _ ___
@@ -335,15 +366,15 @@
// \___\___/_| | .__/\_,_/__/
// |_|
function onCorpusMapReady(e){
console.log('theme : onCorpusReady', e);
//console.log('theme : onCorpusReady', e);
_$corpus_canvas = $('canvas#corpus-map');
_$corpus_canvas
.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
//console.log('theme : corpus-cliked-on-map');
backToFrontPage();
})
.on('corpus-cliked-on-node', function(e) {
console.log('theme : corpus-cliked-on-node', e);
//console.log('theme : corpus-cliked-on-node', e);
_audioPlayer
.emmit('stop-shuffle')
.openDocument(e.target_node);
@@ -491,7 +522,7 @@
var that = this;
window.requestAnimationFrame(that.updateLoadingBar.bind(that));
}else{
console.log('Audio fully loaded');
//console.log('Audio fully loaded');
}
},
onCanplay(){
@@ -554,7 +585,10 @@
// cartel functions
loadNode(nid){
this.$cartel.addClass('loading');
$.getJSON('/edlp/ajax/json/node/'+nid+'/player_cartel', {})
var vm = 'player_cartel';
var ajax_path = _ajax_settings.entityjson_path+'/node/'+nid+'/'+vm;
var path = window.location.origin + Drupal.url(ajax_path);
$.getJSON(path, {})
.done(this.onNodeLoaded.bind(this))
.fail(this.onNodeLoadFail.bind(this));
},
@@ -671,7 +705,7 @@
var r = Math.floor(Math.random() * tempPLaylist.length);
this.shuffledPlaylist.push(tempPLaylist.splice(r,1)[0]);
}
console.log('RandomPlayer, this.shuffledPlaylist', this.shuffledPlaylist);
//console.log('RandomPlayer, this.shuffledPlaylist', this.shuffledPlaylist);
},
toggleActive(e){
if (this.active) {
@@ -697,11 +731,11 @@
_audioPlayer.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
},
onAudioPlayNext(){
console.log('RandomPlayer : onAudioPlayNext()');
//console.log('RandomPlayer : onAudioPlayNext()');
this.next();
},
onAudioPlayerEnded(){
console.log('RandomPlayer : onAudioPlayerEnded()');
//console.log('RandomPlayer : onAudioPlayerEnded()');
this.next();
}
};
@@ -724,7 +758,7 @@
};
CompoPlayer.prototype = {
init(){
console.log('CompoPlayer init()');
// console.log('CompoPlayer init()');
// attach an event on AudioPlayer
_audioPlayer
.on('audio-open-document', this.onAudioOpenDocument.bind(this))
@@ -736,12 +770,12 @@
// this.newCompo();
},
newCompo(){
console.log('CompoPlayer newCompo()');
//console.log('CompoPlayer newCompo()');
// this.$compo = $('.composition_ui .composer .composition');
this.initControls();
},
initControls(){
console.log('CompoPlayer initControls()');
//console.log('CompoPlayer initControls()');
this.$composer = $('.composition_ui .composer');
this.$compo = $('.composition_ui .composer .composition');
this.$controls = $('.composition_ui .composer .compo-player-controls');
@@ -794,7 +828,7 @@
}
},
start(){
console.log('start');
//console.log('start');
// console.log('CompoPlayer start()');
this.playing = true;
this.play();
@@ -810,7 +844,7 @@
this.setActiveItem().showHideControls();
},
pause(){
console.log('pause');
//console.log('pause');
this.paused = true;
this.showHideControls();
_audioPlayer.stop();
@@ -936,7 +970,6 @@
// }
};
// ___ _ ___
// | __| _ ___ _ _| |_| _ \__ _ __ _ ___
// | _| '_/ _ \ ' \ _| _/ _` / _` / -_)
@@ -952,7 +985,7 @@
function initHome(){
addCloseBtnToCols();
console.log('theme : initHome');
// console.log('theme : initHome');
// console.log('theme : initProductions');
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
@@ -971,7 +1004,6 @@
});
}
// ___ _ _ _
// | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
@@ -1000,13 +1032,32 @@
// | |\/| / _ \/ _` / _` | (_-<
// |_| |_\___/\__,_\__,_|_/__/
function closeAllModals(){
console.log('theme : closeAllModals');
//console.log('theme : closeAllModals');
// TODO: animate the remove
_$row.html('');
_$ajaxLinks.removeClass('is-active');
_$body.trigger({'type':'all-modal-closed'});
};
// _ _ _
// | || |___| |_ __ ___ _ _ ___
// | __ / -_) | '_ \/ -_) '_(_-<
// |_||_\___|_| .__/\___|_| /__/
// |_|
// https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
function getCookie(name) {
var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return v ? v[2] : null;
}
function setCookie(name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);
document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}
function deleteCookie(name) { setCookie(name, '', -1); }
init();
} // end EdlpTheme()
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+33 -8
View File
@@ -1259,6 +1259,28 @@ header[role="banner"] {
border-color: red;
background-color: red; }
#corpus-map {
opacity: 0; }
body[corpus="map-ready"] #corpus-map {
-webkit-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
opacity: 1; }
main[role="main"] .row {
opacity: 0; }
main[role="main"] .row .col {
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
body[booted="booted"] main[role="main"] .row {
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
opacity: 1; }
body.ajax-loading main[role="main"] .row .col:not([theme="edlp_search_search_form"]) {
opacity: 0.2; }
main[role="main"] .layout-content {
pointer-events: none; }
main[role="main"] .layout-content .row {
@@ -1303,14 +1325,6 @@ main[role="main"] ul, main[role="main"] li, main[role="main"] ul.inline li:first
padding: 0;
list-style: none; }
main[role="main"] .layout-content {
-webkit-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity: 1; }
body.ajax-loading main[role="main"] .layout-content .col:not([theme="edlp_search_search_form"]) {
opacity: 0.2; }
main[role="main"] span.close-col-btn {
pointer-events: all;
cursor: pointer;
@@ -2394,6 +2408,17 @@ footer {
height: 5px;
border: 1px solid #000;
margin-right: 0.5em; }
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a.ajax-loading:before {
-webkit-animation: rotation 2s infinite linear;
animation: rotation 2s infinite linear; }
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
footer .block-block-edlp-entrees ul li .entree-content .term-description {
display: inline-block;
margin-left: 1.5em;
sites/all/themes/custom/edlptheme/assets/scripts/history.js
+16 -5
View File
@@ -1,10 +1,21 @@
// 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');
// https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
function setCookie(name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);
document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}
// var edlp is provided by edlp_ajax.module file
if(edlp.redirect){
document.body.style.visibility = 'hidden';
// record current sys_path in cookie (or storage) (without first slash to be like real system-path)
setCookie('edlp_origin_path', edlp.sys_path.replace(/^\//, ''), 1);
// create new location (transform current path to hash)
// TODO: understand why edlp.com/#/presentation is magicaly transformed into edlp.com/presentation
var newloc = window.location.origin+'#'+window.location.pathname;
// redirect
window.location.replace(newloc);
}else{
document.body.style.visibility = 'visible';
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+263 -212
View File
@@ -1,6 +1,7 @@
(function($, Drupal, drupalSettings) {
EdlpTheme = function(){
var _ajax_settings = drupalSettings.edlp_ajax;
var _$body = $('body');
var _is_front = _$body.is('.path-frontpage');
var _$corpus_canvas;
@@ -15,9 +16,10 @@
// | || ' \| | _|
// |___|_||_|_|\__|
function init(){
console.log("EdlpTheme init()");
//console.log("EdlpTheme init()");
// TODO: redirect all no-front pages to front with write hash
// redirect all no-front pages to front with right url ajax load
initHistory();
_$body.on('corpus-map-ready', onCorpusMapReady);
@@ -26,16 +28,11 @@
initAjaxLinks();
if (_$body.is('.path-productions')){
initProductions();
}
if (_$body.is('.path-productions')) initProductions();
if(_$body.is('.path-frontpage')){
initHome();
}
if(_$body.is('.path-frontpage')) initHome();
// initScrollbars();
initHistory();
initEvents();
};
@@ -81,15 +78,223 @@
// });
};
// _ _
// /_\ (_)__ ___ __
// / _ \ | / _` \ \ /
// /_/ \_\/ \__,_/_\_\
// |__/
// TODO: add url hash nav
// TODO: implement history.js
function parseAjaxSysPath(sys_path, view_mode){
// console.log('Theme : parseAjaxSysPath', sys_path);
var ajax_path = sys_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);
if(node_match){
ajax_path = _ajax_settings.entityjson_path+'/'+node_match[0];
// check for viewmode attribute
if(view_mode){
ajax_path += '/'+view_mode;
}
}else if(term_match){
ajax_path = _ajax_settings.entityjson_path+'/'+term_match[0];
ajax_path = ajax_path.replace(/taxonomy\/term/, 'taxonomy_term');
// check for viewmode attribute
if(view_mode){
ajax_path += '/'+view_mode;
}
}else{
// convert other link to ajax
// TODO: we assume that other links (no node, no term) are all from own modules (e.g. productions) !! may not be true !!
ajax_path += '/ajax'
}
return ajax_path;
};
function ajaxLoadContent(url, sys_path, ajax_path, selector){
//console.log('ajaxLoadContent : ajax_path', ajax_path);
_$body.addClass('ajax-loading');
var path = window.location.origin + Drupal.url(ajax_path);
$.getJSON(path, {})
.done(function(data){
onAjaxLoaded(data, sys_path, selector);
})
.fail(function(jqxhr, textStatus, error){
onAjaxLoadError(jqxhr, textStatus, error, sys_path);
});
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){
// console.log('url:'+url+' ; state',state);
// we can not pushestate with absolute url
history.pushState(state, null, url);
}
};
function onAjaxLoadError(jqxhr, textStatus, error, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$('.ajax-loading').removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
function onAjaxLoaded(data, sys_path, selector){
console.log('ajax link loaded : data', data);
// reset all style may been added by other pages (like masonry for productions)
// and replace all content with newly loaded
// TODO: build a system to replace or append contents (like studio + search)
_$row.removeAttr('style').html(data.rendered);
// add close btn
if(sys_path != 'productions'){
addCloseBtnToCols();
}
// add body class for currently loaded content
var body_classes = [
'path-'+sys_path.replace(/\//g, '-'),
'entity-type-'+data.entity_type,
'bundle-'+data.bundle,
'view-mode-'+data.view_mode
];
_$body.removeClass().addClass(body_classes.join(' '));
// id node add a generic path-node class to body
m = sys_path.match(/^\/?(node\/\d+)$/g);
if(m)
_$body.addClass('path-edlp-node');
// handle clicked link classes
_$ajaxLinks.removeClass('is-active');
$('.ajax-loading').removeClass('ajax-loading');
// TODO: break entrees links wich all have same sys_path
if(typeof selector != 'undefined'){
$('a[selector="'+selector+'"]').addClass('is-active');
}else{
$('a[data-drupal-link-system-path="'+sys_path+'"]').addClass('is-active');
}
// if bundle page (productions) activate production links
if (typeof data.bundle != 'undefined' && data.bundle == "page") {
$('a[data-drupal-link-system-path="productions"]').addClass('is-active');
}
// if node is in production menu tree, set first level of tree active, e.g. pieces sonores
if (typeof data.menu_parents != 'undefined') {
for (var i = 0; i < data.menu_parents.length; i++) {
var menu_sys_path = data.menu_parents[i];
$('a[data-drupal-link-system-path="'+menu_sys_path+'"]').addClass('is-active');
}
}
// if block attached (eg : from edlp_productions module)
// not used anymore as production block is always present (but not visible)
if(typeof data.block != 'undefined'){
// if block not already added
if(!$('#'+data.block.id, '.region-'+data.block.region).length){
$('.region-'+data.block.region).append(data.block.rendered);
}
}
// initScrollbars();
if(sys_path == "productions")
initProductions();
initAjaxLinks();
// trigger other modules behaviours
_$body.trigger({'type':'new-content-ajax-loaded'});
// and call druapl behaviours
Drupal.attachBehaviors(_$row[0]);
_$body.attr('booted', 'booted');
_$body.removeClass('ajax-loading');
};
function addCloseBtnToCols(){
$('.col', _$row).each(function(index, el) {
if($('span.close-col-btn', this).length)
return true;
$(this).children('.wrapper').append($('<span>')
.addClass('close-col-btn')
.on('click', function(e){
// check for theme attribute and emmit event
var $col = $(this).parents('.col');
var theme = $col.attr('theme');
if(theme != ''){
_$body.trigger({'type':theme+'-col-closed'});
}
// remove the col
$col.remove();
// if row is empty call closeAllModals()
if(!$('.col', _$row).length){
backToFrontPage();
}
})
);
});
};
// _ _ _ _
// | || (_)__| |_ ___ _ _ _ _
// | __ | (_-< _/ _ \ '_| || |
// |_||_|_/__/\__\___/_| \_, |
// |__/
function initHistory(){
initFirstLoad();
window.addEventListener('popstate', onHistoryPopState);
};
function initFirstLoad(){
// console.log('theme : initFirstLoad()', window.location);
// console.log(document.cookie);
var url = window.location.pathname;
if(url != '' && url != '/'){
var origin_path = getCookie('edlp_origin_path');
// console.log('origin_path', origin_path);
if(origin_path){
var state = {
ajax_path: parseAjaxSysPath(origin_path),
sys_path: origin_path,
};
ajaxLoadContent(null, state.sys_path, state.ajax_path);
history.replaceState(state, null, url);
// reset the cookie
deleteCookie('edlp_origin_path');
deleteCookie('edlp_sys_path');
}
}else{
history.replaceState({home:true}, null, url);
_$body.attr('booted', 'booted');
}
};
function onHistoryPopState(e){
//console.log('onPopState',e);
if(e.state.home){
backToFrontPage();
}else{
ajaxLoadContent(null, e.state.sys_path, e.state.ajax_path)
}
};
// _ _ _ _ _
// /_\ (_)__ ___ _| | (_)_ _ | |__ ___
// / _ \ | / _` \ \ / |__| | ' \| / /(_-<
// /_/ \_\/ \__,_/_\_\____|_|_||_|_\_\/__/
// |__/
function initAjaxLinks(){
console.log('initAjaxLinks');
// console.log('initAjaxLinks');
$('a', '#block-mainnavigation')
.add('a', '#block-footer.menu--footer')
@@ -98,9 +303,10 @@
.add('a', '.productions-subtree')
.add('a', '.productions-parent')
// .add('a.index-link, a.notice-link', '#block-edlpentreesblock')
// .addClass('use-ajax')
.addClass('ajax-link');
Drupal.ajax.bindAjaxLinks('#block-footer.menu--footer');
_$ajaxLinks = $('.ajax-link:not(.ajax-enabled)')
.each(function(i,e){
var $this = $(this);
@@ -141,193 +347,18 @@
return false;
}
var ajax_path = parseLinkAjaxPath($link);
var view_mode = $link.attr('viewmode');
var ajax_path = parseAjaxSysPath(sys_path, view_mode);
$link.addClass('ajax-loading');
ajaxLinkLoadContent(url, sys_path, ajax_path);
if($link.is('[selector]')){
var selector = $link.attr('selector');
}
ajaxLoadContent(url, sys_path, ajax_path, selector);
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);
if(node_match){
ajax_path = 'edlp/ajax/json/'+node_match[0];
// check for viewmode attribute
if($link.attr('viewmode')){
ajax_path += '/'+$link.attr('viewmode');
}
}else if(term_match){
ajax_path = 'edlp/ajax/json/'+term_match[0];
ajax_path = ajax_path.replace(/taxonomy\/term/, 'taxonomy_term');
// check for viewmode attribute
if($link.attr('viewmode')){
ajax_path += '/'+$link.attr('viewmode');
}
}else{
// convert other link to ajax
ajax_path += '/ajax'
}
return ajax_path;
};
function ajaxLinkLoadContent(url, sys_path, ajax_path){
_$body.addClass('ajax-loading');
var path = window.location.origin + Drupal.url(ajax_path);
$.getJSON(path, {})
.done(function(data){
onAjaxLinkLoaded(data, sys_path);
})
.fail(function(jqxhr, textStatus, error){
onAjaxLinkLoadError(jqxhr, textStatus, error, sys_path);
});
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, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$('.ajax-loading').removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
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)
// and replace all content with newly loaded
// TODO: build a system to replace or append contents (like studio + search)
_$row.removeAttr('style').html(data.rendered);
// add close btn
if(sys_path != 'procuction'){
addCloseBtnToCols();
}
// add body class for currently loaded content
var body_classes = [
'path-'+sys_path.replace(/\//g, '-'),
'entity-type-'+data.entity_type,
'bundle-'+data.bundle,
'view-mode-'+data.view_mode
];
_$body.removeClass().addClass(body_classes.join(' '));
// id node add a generic path-node class to body
m = sys_path.match(/^\/?(node\/\d+)$/g);
if(m)
_$body.addClass('path-edlp-node');
// handle clicked link classes
_$ajaxLinks.removeClass('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'){
// if block not already added
if(!$('#'+data.block.id, '.region-'+data.block.region).length){
$('.region-'+data.block.region).append(data.block.rendered);
}
}
// initScrollbars();
if(sys_path == "productions")
initProductions();
initAjaxLinks();
// trigger other modules behaviours
_$body.trigger({'type':'new-content-ajax-loaded'});
// and call druapl behaviours
Drupal.attachBehaviors(_$row[0]);
};
function addCloseBtnToCols(){
$('.col', _$row).each(function(index, el) {
if($('span.close-col-btn', this).length)
return true;
$(this).children('.wrapper').append($('<span>')
.addClass('close-col-btn')
.on('click', function(e){
// check for theme attribute and emmit event
var $col = $(this).parents('.col');
var theme = $col.attr('theme');
if(theme != ''){
_$body.trigger({'type':theme+'-col-closed'});
}
// remove the col
$col.remove();
// if row is empty call closeAllModals()
if(!$('.col', _$row).length){
backToFrontPage();
}
})
);
});
};
// _ _ _ _ _ ___
// | || (_)__| |_ ___ _ _ _ _ _ | / __|
// | __ | (_-< _/ _ \ '_| || | || \__ \
// |_||_|_/__/\__\___/_| \_, |\__/|___/
// |__/
function initHistory(){
initFirstLoad();
window.addEventListener('popstate', onHistoryPopState);
};
function initFirstLoad(){
console.log(window.location);
// console.log(document);
var url = window.location.pathname;
if( url != "" && url != "/"){
// TODO: THIS IS NOT WORKING ! with link which dont exist in dom, e.g. productions
// TODO: how to retrieve sys_path without dom ?
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)
}
};
// ___
// / __|___ _ _ _ __ _ _ ___
@@ -335,15 +366,15 @@
// \___\___/_| | .__/\_,_/__/
// |_|
function onCorpusMapReady(e){
console.log('theme : onCorpusReady', e);
//console.log('theme : onCorpusReady', e);
_$corpus_canvas = $('canvas#corpus-map');
_$corpus_canvas
.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
//console.log('theme : corpus-cliked-on-map');
backToFrontPage();
})
.on('corpus-cliked-on-node', function(e) {
console.log('theme : corpus-cliked-on-node', e);
//console.log('theme : corpus-cliked-on-node', e);
_audioPlayer
.emmit('stop-shuffle')
.openDocument(e.target_node);
@@ -491,7 +522,7 @@
var that = this;
window.requestAnimationFrame(that.updateLoadingBar.bind(that));
}else{
console.log('Audio fully loaded');
//console.log('Audio fully loaded');
}
},
onCanplay(){
@@ -554,7 +585,10 @@
// cartel functions
loadNode(nid){
this.$cartel.addClass('loading');
$.getJSON('/edlp/ajax/json/node/'+nid+'/player_cartel', {})
var vm = 'player_cartel';
var ajax_path = _ajax_settings.entityjson_path+'/node/'+nid+'/'+vm;
var path = window.location.origin + Drupal.url(ajax_path);
$.getJSON(path, {})
.done(this.onNodeLoaded.bind(this))
.fail(this.onNodeLoadFail.bind(this));
},
@@ -671,7 +705,7 @@
var r = Math.floor(Math.random() * tempPLaylist.length);
this.shuffledPlaylist.push(tempPLaylist.splice(r,1)[0]);
}
console.log('RandomPlayer, this.shuffledPlaylist', this.shuffledPlaylist);
//console.log('RandomPlayer, this.shuffledPlaylist', this.shuffledPlaylist);
},
toggleActive(e){
if (this.active) {
@@ -697,11 +731,11 @@
_audioPlayer.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
},
onAudioPlayNext(){
console.log('RandomPlayer : onAudioPlayNext()');
//console.log('RandomPlayer : onAudioPlayNext()');
this.next();
},
onAudioPlayerEnded(){
console.log('RandomPlayer : onAudioPlayerEnded()');
//console.log('RandomPlayer : onAudioPlayerEnded()');
this.next();
}
};
@@ -724,7 +758,7 @@
};
CompoPlayer.prototype = {
init(){
console.log('CompoPlayer init()');
// console.log('CompoPlayer init()');
// attach an event on AudioPlayer
_audioPlayer
.on('audio-open-document', this.onAudioOpenDocument.bind(this))
@@ -736,12 +770,12 @@
// this.newCompo();
},
newCompo(){
console.log('CompoPlayer newCompo()');
//console.log('CompoPlayer newCompo()');
// this.$compo = $('.composition_ui .composer .composition');
this.initControls();
},
initControls(){
console.log('CompoPlayer initControls()');
//console.log('CompoPlayer initControls()');
this.$composer = $('.composition_ui .composer');
this.$compo = $('.composition_ui .composer .composition');
this.$controls = $('.composition_ui .composer .compo-player-controls');
@@ -794,7 +828,7 @@
}
},
start(){
console.log('start');
//console.log('start');
// console.log('CompoPlayer start()');
this.playing = true;
this.play();
@@ -810,7 +844,7 @@
this.setActiveItem().showHideControls();
},
pause(){
console.log('pause');
//console.log('pause');
this.paused = true;
this.showHideControls();
_audioPlayer.stop();
@@ -936,7 +970,6 @@
// }
};
// ___ _ ___
// | __| _ ___ _ _| |_| _ \__ _ __ _ ___
// | _| '_/ _ \ ' \ _| _/ _` / _` / -_)
@@ -952,7 +985,7 @@
function initHome(){
addCloseBtnToCols();
console.log('theme : initHome');
// console.log('theme : initHome');
// console.log('theme : initProductions');
var $grid = $('.grid',_$row).masonry({
itemSelector:'.col',
@@ -971,7 +1004,6 @@
});
}
// ___ _ _ _
// | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
@@ -1000,13 +1032,32 @@
// | |\/| / _ \/ _` / _` | (_-<
// |_| |_\___/\__,_\__,_|_/__/
function closeAllModals(){
console.log('theme : closeAllModals');
//console.log('theme : closeAllModals');
// TODO: animate the remove
_$row.html('');
_$ajaxLinks.removeClass('is-active');
_$body.trigger({'type':'all-modal-closed'});
};
// _ _ _
// | || |___| |_ __ ___ _ _ ___
// | __ / -_) | '_ \/ -_) '_(_-<
// |_||_\___|_| .__/\___|_| /__/
// |_|
// https://plainjs.com/javascript/utilities/set-cookie-get-cookie-and-delete-cookie-5/
function getCookie(name) {
var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return v ? v[2] : null;
}
function setCookie(name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);
document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}
function deleteCookie(name) { setCookie(name, '', -1); }
init();
} // end EdlpTheme()
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+55 -26
View File
@@ -152,10 +152,62 @@ header[role="banner"]{
}
}
// ___
// / __|__ _ _ ___ ____ _ ___
// | (__/ _` | ' \ V / _` (_-<
// \___\__,_|_||_\_/\__,_/__/
#corpus-map{
opacity: 0;
body[corpus="map-ready"] &{
transition: opacity 2s ease-out;
opacity: 1;
}
}
// _
// _ __ __ _(_)_ _
// | ' \/ _` | | ' \
// |_|_|_\__,_|_|_||_|
// booting sequence
// and ajax loading effects
main[role="main"]{
.row{
opacity: 0;
.col{
opacity:1;
transition: opacity 0.5s ease-in-out;
}
}
body[booted="booted"] &{
.row{
transition: opacity 1s ease-out;
opacity:1;
}
}
body.ajax-loading &{
.row .col:not([theme="edlp_search_search_form"]){
opacity:0.2;
}
// &:before{
// content:"";
// display: block;
// position: absolute;
// z-index: 10;
// $s:60px;
// width:$s; height:$s;
// top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
// // padding:1em;
// background-color: rgba(255,255,255, 0.5);
// background-image: url(../img/edlp-loader-anim.svg);
// background-size: 50%;
// background-repeat: no-repeat;
// background-position: center;
// // border-radius: $s/2;
// }
}
}
main[role="main"]{
.layout-content{
pointer-events: none;
@@ -209,32 +261,6 @@ main[role="main"]{
list-style: none;
}
// ajax loading effects
.layout-content{
transition: opacity 0.5s ease-in-out;
opacity: 1;
}
body.ajax-loading &{
.layout-content .col:not([theme="edlp_search_search_form"]){
opacity:0.2;
}
// &:before{
// content:"";
// display: block;
// position: absolute;
// z-index: 10;
// $s:60px;
// width:$s; height:$s;
// top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
// // padding:1em;
// background-color: rgba(255,255,255, 0.5);
// background-image: url(../img/edlp-loader-anim.svg);
// background-size: 50%;
// background-repeat: no-repeat;
// background-position: center;
// // border-radius: $s/2;
// }
}
span.close-col-btn{
// z-index: 10;
pointer-events: all;
@@ -1374,6 +1400,9 @@ footer{
border: 1px solid #000;
margin-right: 0.5em;
}
&.ajax-loading:before{
@include spining-loader-square;
}
}
.term-description{
display: inline-block;
sites/all/themes/custom/edlptheme/edlptheme.libraries.yml
+1 -1
View File
@@ -8,7 +8,7 @@ global-css:
history-js:
version: VERSION
js:
assets/dist/scripts/history.min.js: { weight:-999, scope: header }
assets/dist/scripts/history.min.js: { weight:-998, scope: header, group: edlptheme }
global-js:
version: VERSION
sites/all/themes/custom/edlptheme/edlptheme.theme
+12
View File
@@ -11,6 +11,18 @@ use Drupal\Core\Template\Attribute;
use Drupal\Component\Utility\Unicode;
use Drupal\Core\Render\Element;
/**
* Implements hook_page_attachments().
* @param array $attachments
*/
// this does not work with themes
// function edlptheme_page_attachments(array &$attachments) {
// dpm('edlptheme_page_attachments', $attachments);
// }
function edlptheme_preprocess_page(&$vars){
// dsm($vars, 'vars');
}