history nav is now ok

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
@@ -5,6 +5,53 @@
# @Filename: edlp_ajax.module
# @License: GPL-V3
use Drupal\Core\Url;
/**
* Implements hook_page_attachments().
* @param array $attachments
*/
function edlp_ajax_page_attachments(array &$attachments) {
$url = Url::fromRoute('edlp_ajax.entityjson');
$attachments['#attached']['drupalSettings']['edlp_ajax']['entityjson_path'] = $url->getInternalPath();
// $url = Url::fromRoute('edlp_ajax.urljson');
// $attachments['#attached']['drupalSettings']['edlp_ajax']['urljson_path'] = $url->getInternalPath();
$redirect = false;
$current_path = \Drupal::service('path.current')->getPath();
$is_front = \Drupal::service('path.matcher')->isFrontPage();
// do not redirect if note node, term, or custom routing
if(preg_match('/^\/?node\/\d+/', $current_path)
|| preg_match('/^\/?taxonomy\/term\/\d+/', $current_path)
|| preg_match('/^\/?productions/', $current_path)
|| preg_match('/^\/?agenda/', $current_path)
|| preg_match('/^\/?studio/', $current_path)){
// TODO: search url
$redirect = true;
}
$js_str = "var edlp = {\n
sys_path:'".$current_path."',\n
is_front:".($is_front ? 'true':'false').",\n
redirect:".($redirect ? 'true':'false').",\n
};";
$attachments['#attached']['html_head'][] = [
[
'#type' => 'html_tag',
'#tag' => 'script',
'#value' => $js_str,
'#weight' => -999,
'#group' => 'edlp'
],
// A key, to make it possible to recognize this HTML element when altering.
'edlp',
];
}
/**
* Implements hook_theme().
*/
@@ -6,20 +6,14 @@
# @Last modified time: 20-12-2017
# @License: GPL-V3
edlp_ajax.node:
path: '/edlp/ajax/{entity_type}/{id}/{viewmode}'
defaults:
_controller: '\Drupal\edlp_ajax\Controller\EdlpAjaxController::entity'
_title: 'EdlpAjax'
viewmode: 'default'
requirements:
_permission: 'access content'
edlp_ajax.ajaxnode:
path: '/edlp/ajax/json/{entity_type}/{id}/{viewmode}'
edlp_ajax.entityjson:
path: '/edlp/ajax/entity/json/{entity_type}/{id}/{viewmode}'
defaults:
_controller: '\Drupal\edlp_ajax\Controller\EdlpAjaxController::entityjson'
_title: 'EdlpAjaxJson'
entity_type : null
id: null
viewmode: 'default'
requirements:
_permission: 'access content'
# id: \d+
@@ -3,6 +3,9 @@
namespace Drupal\edlp_ajax\Controller;
use Drupal\Core\Controller\ControllerBase;
use Symfony\Component\HttpFoundation\Request;
use Drupal\Core\Url;
use Drupal\menu_link_content\Entity\MenuLinkContent;
use Symfony\Component\HttpFoundation\JsonResponse;
@@ -29,18 +32,6 @@ class EdlpAjaxController extends ControllerBase {
}
}
/**
* Display entity as a page.
*
* @return renderable array
*/
public function entity($entity_type, $id, $viewmode) {
$this->entity_type = $entity_type;
$this->id = $id;
$this->viewmode = $viewmode;
return $this->toRenderable();
}
/**
* Get entity as json through ajax.
*
@@ -50,6 +41,7 @@ class EdlpAjaxController extends ControllerBase {
$this->entity_type = $entity_type;
$this->id = $id;
$this->viewmode = $viewmode;
$renderable = $this->toRenderable();
$rendered = render($renderable);
@@ -64,17 +56,43 @@ class EdlpAjaxController extends ControllerBase {
$bundle = NULL;
}
$response = new JsonResponse();
$response->setData([
$data = [
'test' => 'hello edlp ajax',
'id' => $this->id,
'view_mode' => $this->viewmode,
'bundle' => $bundle,
'entity_type' => $this->entity_type,
'rendered'=> $rendered,
]);
];
// if content type page (productions) get the menu items
if($bundle == "page"){
$menuLinkManager = \Drupal::service('plugin.manager.menu.link');
$links = $menuLinkManager->loadLinksByRoute('entity.node.canonical', array('node' => $this->id), 'productions');
// dpm($links, 'links');
$menu_parents = array();
foreach ($links as $link) {
$parents = $menuLinkManager->getParentIds($link->getPluginId());
// dpm($parents, 'parents');
foreach ($parents as $parent_id) {
$parent = $menuLinkManager->getInstance(array('id'=>$parent_id));
// dpm($parent, 'parent');
$url = $parent->getUrlObject();
$sys_path = $url->getInternalPath();
// dpm($sys_path);
$menu_parents[] = $sys_path;
}
}
$data['menu_parents'] = $menu_parents;
}
$response = new JsonResponse();
$response->setData($data);
return $response;
// return array(
// '#markup'=>'hello'
// );
}
}
@@ -60,7 +60,7 @@
var _node_pop_up;
// Colors depend on drupalSettings loaded by edlp_corpus.module
var _ecolors = drupalSettings.edlp_corpus.colors;
console.log('Corpus : _ecolors', _ecolors);
//console.log('Corpus : _ecolors', _ecolors);
// Physics
var _attracter,
_repulser_top,
@@ -127,7 +127,7 @@
console.warn('corpus load failed', jqxhr.responseText);
};
function onCorpusLoaded(data){
console.log('corpus loaded : data', data);
//console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
// buildParticles(data.nodes);
initPhysics();
@@ -188,7 +188,7 @@
// | .` / _ \/ _` / -_|_-<
// |_|\_\___/\__,_\___/__/
function buildNodes(nodes){
console.log("buildNodes", nodes);
//console.log("buildNodes", nodes);
var d;
for (var i in nodes) {
d = i < 1 ? true : false;
@@ -201,12 +201,12 @@
'audio_url':nodes[i].audio_url
});
}
console.log('_nodes',_nodes);
console.log('_articles_nodes',_articles_nodes);
console.log('_no_articles_nodes',_no_articles_nodes);
console.log('_nodes_by_entries', _nodes_by_entries);
//console.log('_nodes',_nodes);
//console.log('_articles_nodes',_articles_nodes);
//console.log('_no_articles_nodes',_no_articles_nodes);
//console.log('_nodes_by_entries', _nodes_by_entries);
console.log('_physics.attractions.length', _physics.attractions.length);
//console.log('_physics.attractions.length', _physics.attractions.length);
};
function Node(i,node,d){
@@ -624,7 +624,7 @@
}
function createNodesRepulsions(){
// how to delete all these attractions before creates new once
console.log('_nodes_centered', _nodes_centered);
//console.log('_nodes_centered', _nodes_centered);
purgeNodesRepulsions();
for (var n = 0; n < _nodes_centered.length; n++) {
for (var q = n+1; q < _nodes_centered.length; q++) {
@@ -767,13 +767,13 @@
return false;
};
function filterArticles(){
console.log('filterArticles');
//console.log('filterArticles');
for (var i = 0; i < _no_articles_nodes.length; i++) {
_no_articles_nodes[i].fade();
}
};
function resetArticlesFilter(){
console.log('resetArticlesFilter');
//console.log('resetArticlesFilter');
for (var i = 0; i < _no_articles_nodes.length; i++) {
_no_articles_nodes[i].unFade();
}
@@ -856,7 +856,7 @@
_nodes_by_nid[e.target_id].chutier_action = e.new_action;
})
.on('search-results-loaded', function(e){
console.log("Edlp Corpus, search-results-loaded",e.results);
//console.log("Edlp Corpus, search-results-loaded",e.results);
// TODO: filter map's nodes
filterSearchResults(e.results);
})
@@ -981,10 +981,12 @@
function startAnime(){
_physics.onUpdate(render);
_physics.play()
$('body').trigger({
'type':'corpus-map-ready',
'playlist':_playlist
});
$('body')
.attr('corpus', 'map-ready')
.trigger({
'type':'corpus-map-ready',
'playlist':_playlist
});
};
init();
@@ -60,7 +60,7 @@
var _node_pop_up;
// Colors depend on drupalSettings loaded by edlp_corpus.module
var _ecolors = drupalSettings.edlp_corpus.colors;
console.log('Corpus : _ecolors', _ecolors);
//console.log('Corpus : _ecolors', _ecolors);
// Physics
var _attracter,
_repulser_top,
@@ -127,7 +127,7 @@
console.warn('corpus load failed', jqxhr.responseText);
};
function onCorpusLoaded(data){
console.log('corpus loaded : data', data);
//console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
// buildParticles(data.nodes);
initPhysics();
@@ -188,7 +188,7 @@
// | .` / _ \/ _` / -_|_-<
// |_|\_\___/\__,_\___/__/
function buildNodes(nodes){
console.log("buildNodes", nodes);
//console.log("buildNodes", nodes);
var d;
for (var i in nodes) {
d = i < 1 ? true : false;
@@ -201,12 +201,12 @@
'audio_url':nodes[i].audio_url
});
}
console.log('_nodes',_nodes);
console.log('_articles_nodes',_articles_nodes);
console.log('_no_articles_nodes',_no_articles_nodes);
console.log('_nodes_by_entries', _nodes_by_entries);
//console.log('_nodes',_nodes);
//console.log('_articles_nodes',_articles_nodes);
//console.log('_no_articles_nodes',_no_articles_nodes);
//console.log('_nodes_by_entries', _nodes_by_entries);
console.log('_physics.attractions.length', _physics.attractions.length);
//console.log('_physics.attractions.length', _physics.attractions.length);
};
function Node(i,node,d){
@@ -624,7 +624,7 @@
}
function createNodesRepulsions(){
// how to delete all these attractions before creates new once
console.log('_nodes_centered', _nodes_centered);
//console.log('_nodes_centered', _nodes_centered);
purgeNodesRepulsions();
for (var n = 0; n < _nodes_centered.length; n++) {
for (var q = n+1; q < _nodes_centered.length; q++) {
@@ -767,13 +767,13 @@
return false;
};
function filterArticles(){
console.log('filterArticles');
//console.log('filterArticles');
for (var i = 0; i < _no_articles_nodes.length; i++) {
_no_articles_nodes[i].fade();
}
};
function resetArticlesFilter(){
console.log('resetArticlesFilter');
//console.log('resetArticlesFilter');
for (var i = 0; i < _no_articles_nodes.length; i++) {
_no_articles_nodes[i].unFade();
}
@@ -856,7 +856,7 @@
_nodes_by_nid[e.target_id].chutier_action = e.new_action;
})
.on('search-results-loaded', function(e){
console.log("Edlp Corpus, search-results-loaded",e.results);
//console.log("Edlp Corpus, search-results-loaded",e.results);
// TODO: filter map's nodes
filterSearchResults(e.results);
})
@@ -981,10 +981,12 @@
function startAnime(){
_physics.onUpdate(render);
_physics.play()
$('body').trigger({
'type':'corpus-map-ready',
'playlist':_playlist
});
$('body')
.attr('corpus', 'map-ready')
.trigger({
'type':'corpus-map-ready',
'playlist':_playlist
});
};
init();
@@ -49,6 +49,7 @@ class BlockEntrees extends BlockBase {
'attributes' => array(
'class' => ['term-'.$tid, 'term-link'],
'tid'=>$tid,
'selector' => 'entree-term-link-'.$tid,
'data-drupal-link-system-path' => $url->getInternalPath()
)
));
@@ -61,6 +62,7 @@ class BlockEntrees extends BlockBase {
'class' => ['index-link', 'ajax-link'],
'viewmode'=>'index',
'tid'=>$tid,
'selector' => 'entree-index-link-'.$tid,
'data-drupal-link-system-path' => $url->getInternalPath()
)
));
@@ -73,6 +75,7 @@ class BlockEntrees extends BlockBase {
'class' => ['notice-link', 'ajax-link'],
'viewmode'=>'notice',
'tid'=>$tid,
'selector' => 'entree-notice-link-'.$tid,
'data-drupal-link-system-path' => $url->getInternalPath()
)
));
@@ -6,7 +6,7 @@
var _$form;
function init(){
console.log('EdlpSearch Init', settings);
// console.log('EdlpSearch Init', settings);
initEvents();
initAjax();
};
@@ -20,8 +20,8 @@
function initAjax(){
_$form = $('#edlp-search-form:not(.ajax-enabled)');
if(!_$form.length) return false;
console.log('EdlpSearch initAjaxForm()');
//console.log('EdlpSearch initAjaxForm()');
_$form = $('#edlp-search-form:not(.ajax-enabled)')
.on('submit', onSubmitForm)
.addClass('ajax-enabled');
@@ -51,7 +51,7 @@
// genres
args.genres = $('input[name="genres"]', this).val();
console.log('EdlpSearch onSubmitForm() : args',args);
//console.log('EdlpSearch onSubmitForm() : args',args);
loadResults(args);
@@ -59,7 +59,7 @@
};
function loadResults(args){
console.log('EdlpSearch loadResults() : args', args);
//console.log('EdlpSearch loadResults() : args', args);
_$form.addClass('ajax-loading');
_$body.addClass('ajax-loading');
$('[theme="edlp_search_results"]', _$container).addClass('ajax-loading');
@@ -273,12 +273,12 @@ class EdlpSearchController extends ControllerBase {
$query->keys($this->keys);
}
// TODO: langues
// langues
if (!empty($this->langues)) {
$query->addCondition('field_langues', $this->langues, "=");
}
// TODO: genres
// genres
if (!empty($this->genres)) {
$query->addCondition('field_genres', $this->genres, "=");
}
@@ -6,7 +6,7 @@
// audio play is handled by edlp_theme
function init(){
console.log('Studio Init');
// console.log('Studio Init');
initEvents();
initStudio();
};
@@ -35,13 +35,13 @@
// | (__| ' \ || | _| / -_) '_| | .` / _ \/ _` / -_) | |__| | ' \| / /(_-<
// \___|_||_\_,_|\__|_\___|_| |_|\_\___/\__,_\___| |____|_|_||_|_\_\/__/
function initAjaxChutierLinks(){
console.log('studio initAjaxChutierLinks');
//console.log('studio initAjaxChutierLinks');
$('.chutier-ajax-link:not(.ajax-enabled)')
.addClass('ajax-enabled')
.on('click', onClickChutierAjaxLink);
};
function onClickChutierAjaxLink(e){
console.log('studio onClickAjaxLink chutier');
//console.log('studio onClickAjaxLink chutier');
e.preventDefault();
addRemoveToChutier($(this));
return false;
@@ -60,7 +60,7 @@
});
};
function onActionToChutierDone($link, data){
console.log('onActionToChutierDone',data);
//console.log('onActionToChutierDone',data);
$('body').trigger({
'type':'chutier-action-done',
'action_done':data.action_done,
@@ -82,7 +82,7 @@
// \___\___/_|_|_| .__/\___/__/_|\__|_\___/_||_/__/
// |_|
function initAjaxCompoLinks(){
console.log('studio initAjaxCompoLinks');
//console.log('studio initAjaxCompoLinks');
$('.new-composition-link:not(.ajax-enabled)')
.on('click', onClickNewCompoLink)
.addClass('ajax-enabled');
@@ -101,7 +101,7 @@
// |_| |_|
function onClickCompoLink(e){
e.preventDefault();
console.log('onClickCompoLink');
//console.log('onClickCompoLink');
openCompo($(this));
return false;
};
@@ -120,7 +120,7 @@
});
};
function onOpenCompoDone(data, $link){
console.log('onActionToCompoDone',data);
//console.log('onActionToCompoDone',data);
$('.composition-link').removeClass('is-active');
$link.removeClass('ajax-loading').addClass('is-active');
if($('.composition', $composer).length){
@@ -163,7 +163,7 @@
};
function onNewCompoFormSubmit(e, $link, $form){
var name = $('input[type="text"]',$form).val();
console.log('onNewCompoFormSubmit', name);
//console.log('onNewCompoFormSubmit', name);
if(name != ''){
$form.addClass('ajax-loading').children('*').attr('disabled', 'disabled');
createNewCompo(name, $link, $form);
@@ -185,7 +185,7 @@
});
};
function onCreateCompoDone(data, $link, $form){
console.log('onActionToCompoDone',data);
//console.log('onActionToCompoDone',data);
var $new_link = $(data.new_link);
var $delete_link = $(data.delete_link);
$link
@@ -225,10 +225,10 @@
});
};
function onDeleteCompoDone(data, $link, $form){
console.log('onDeleteCompoDone',data);
//console.log('onDeleteCompoDone',data);
if(data.status == "ok"){
$link.parents('li').remove();
console.log("$('.composition-link').length", $('.composition-link').length);
//console.log("$('.composition-link').length", $('.composition-link').length);
if($('.composition-link').length){
openCompo($('.composition-link').eq(0));
}else{
@@ -365,7 +365,7 @@
});
}
function onOrderChanged(e, ui){
console.log('onOrderChanged : e', e);
//console.log('onOrderChanged : e', e);
var cid = $(e.target).parents('.composition').attr('cid');
var documents = {};
$('a', e.target).each(function(i) {
@@ -376,10 +376,10 @@
recordCompoList(cid, documents);
};
function recordCompoList(cid, docs){
console.log('recordCompoList '+cid, docs);
//console.log('recordCompoList '+cid, docs);
var ajax_path = _settings.save_compo_ajax_url+'/'+cid;
var path = window.location.origin + Drupal.url(ajax_path);
console.log('path', path);
//console.log('path', path);
$.getJSON(path, {
documents:docs
})
@@ -394,7 +394,7 @@
});
}
function onRecordCompoDone(data){
console.log('onDeleteCompoDone',data);
//console.log('onDeleteCompoDone',data);
if(data.status == "ok"){
}else{
console.warn(data.message);
@@ -25,7 +25,7 @@ edlp_studio.composition_controller_action_ajax:
_permission: 'use chutier'
edlp_studio.studio_ui:
path: '/edlp/studio-ui'
path: '/studio'
defaults:
_controller: '\Drupal\edlp_studio\Controller\StudioUIController::StudioUI'
_title: 'Studio User Interface'
@@ -33,7 +33,7 @@ edlp_studio.studio_ui:
_permission: 'use chutier'
edlp_studio.studio_ui_ajax:
path: '/edlp/studio-ui/ajax'
path: '/studio/ajax'
defaults:
_controller: '\Drupal\edlp_studio\Controller\StudioUIController::StudioUIJson'
_title: 'Studio User Interface'
@@ -41,7 +41,7 @@ edlp_studio.studio_ui_ajax:
_permission: 'use chutier'
edlp_studio.studio_chutier_ui_ajax:
path: '/edlp/studio/chutier-ui/ajax'
path: '/studio/chutier-ui/ajax'
defaults:
_controller: '\Drupal\edlp_studio\Controller\StudioUIController::StudioChutierUIJson'
_title: 'Chutier of Studio User Interface'
@@ -51,7 +51,7 @@ class StudioLinkBlock extends BlockBase implements ContainerFactoryPluginInterf
public function build() {
$build = [];
if($this->user->id()){
$url = Url::fromRoute('edlp_studio.studio_ui', [], ['absolute' => TRUE]);
$url = Url::fromRoute('edlp_studio.studio_ui');
$build['edlp_studio_link_block'] = array(
'#title' => "Studio",
'#type' => 'link',
@@ -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';
@@ -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()
@@ -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;
@@ -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';
@@ -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()
@@ -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;
@@ -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
@@ -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');
}
@@ -24,6 +24,6 @@ settings:
visibility:
request_path:
id: request_path
pages: "/productions\r\n/productions/*"
pages: '<front>'
negate: false
context_mapping: { }