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

refactored, started random player

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-18 12:06:33 +01:00
parent e84c95b99b
commit d317b85ef3
7 changed files with 504 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+71 -96
View File
@@ -17,7 +17,7 @@
* *
*/ */
(function($) { (function($, Drupal, drupalSettings) {
EdlpCorpus = function(){ EdlpCorpus = function(){
var _activated = true; var _activated = true;
@@ -42,6 +42,7 @@
var _nodes_centered = []; var _nodes_centered = [];
var _nodes_centered_attractions = []; var _nodes_centered_attractions = [];
var _playlist = [];
// var _particules = []; // var _particules = [];
// var _base_radius = 3; // nodes radius (real radius, not diametre) // var _base_radius = 3; // nodes radius (real radius, not diametre)
@@ -75,15 +76,6 @@
// _/ // / / / / /_(__ ) // _/ // / / / / /_(__ )
// /___/_/ /_/_/\__/____/ // /___/_/ /_/_/\__/____/
function init(){ function init(){
console.log("EdlpCorpus init()");
// console.log("document", document);
initMap();
};
function initMap(){
console.log("EdlpCorpus initMap()");
// console.log('_physics',_physics);
initCanvas(); initCanvas();
if(_activated){ if(_activated){
loadCorpus(); loadCorpus();
@@ -92,17 +84,15 @@
} }
}; };
// ______ // ___
// / ____/___ _____ _ ______ ______ // / __|__ _ _ ___ ____ _ ___
// / / / __ `/ __ \ | / / __ `/ ___/ // | (__/ _` | ' \ V / _` (_-<
// / /___/ /_/ / / / / |/ / /_/ (__ ) // \___\__,_|_||_\_/\__,_/__/
// \____/\__,_/_/ /_/|___/\__,_/____/
function initCanvas(){ function initCanvas(){
// resize the canvas to fill browser window dynamically // resize the canvas to fill browser window dynamically
window.addEventListener('resize', onResizeCanvas, false); window.addEventListener('resize', onResizeCanvas, false);
onResizeCanvas(); onResizeCanvas();
}; };
function onResizeCanvas() { function onResizeCanvas() {
_canvas.width = window.innerWidth; _canvas.width = window.innerWidth;
_canvas.height = window.innerHeight; _canvas.height = window.innerHeight;
@@ -113,12 +103,11 @@
} }
}; };
// ___ _ // ___
// / | (_)___ __ __ // / __|___ _ _ _ __ _ _ ___
// / /| | / / __ `/ |/_/ // | (__/ _ \ '_| '_ \ || (_-<
// / ___ | / / /_/ /> < // \___\___/_| | .__/\_,_/__/
// /_/ |_|_/ /\__,_/_/|_| // |_|
// /___/
function loadCorpus(){ function loadCorpus(){
// console.log('drupalSettings',drupalSettings); // console.log('drupalSettings',drupalSettings);
// console.log('window.location', window.location); // console.log('window.location', window.location);
@@ -131,24 +120,21 @@
onCorpusLoadError(jqxhr, textStatus, error); onCorpusLoadError(jqxhr, textStatus, error);
}); });
}; };
function onCorpusLoadError(jqxhr, textStatus, error){ function onCorpusLoadError(jqxhr, textStatus, error){
console.warn('corpus load failed', jqxhr.responseText); console.warn('corpus load failed', jqxhr.responseText);
}; };
function onCorpusLoaded(data){ function onCorpusLoaded(data){
console.log('corpus loaded : data', data); console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]); // console.log('first node', data.nodes[0]);
// buildParticles(data.nodes); // buildParticles(data.nodes);
initNodePopup();
initArtilesLink();
initPhysics(); initPhysics();
buildNodes(data.nodes); buildNodes(data.nodes);
initArtilesLink();
initNodePopup();
initEvents(); initEvents();
startAnime(); startAnime();
}; };
// ___ _ _ // ___ _ _
// | _ \ |_ _ _ __(_)__ ___ // | _ \ |_ _ _ __(_)__ ___
// | _/ ' \ || (_-< / _(_-< // | _/ ' \ || (_-< / _(_-<
@@ -195,11 +181,10 @@
}; };
// _ __ __ // _ _ _
// / | / /___ ____/ /__ _____ // | \| |___ __| |___ ___
// / |/ / __ \/ __ / _ \/ ___/ // | .` / _ \/ _` / -_|_-<
// / /| / /_/ / /_/ / __(__ ) // |_|\_\___/\__,_\___/__/
// /_/ |_/\____/\__,_/\___/____/
function buildNodes(nodes){ function buildNodes(nodes){
console.log("buildNodes", nodes); console.log("buildNodes", nodes);
var d; var d;
@@ -207,6 +192,12 @@
d = i < 1 ? true : false; d = i < 1 ? true : false;
// _nodes.push(new Node(i,nodes[i],d)); // _nodes.push(new Node(i,nodes[i],d));
new Node(i,nodes[i],d); new Node(i,nodes[i],d);
_playlist.push({
'id':i,
'nid':nodes[i].nid,
'audio_url':nodes[i].audio_url
});
} }
console.log('_nodes',_nodes); console.log('_nodes',_nodes);
console.log('_articles_nodes',_articles_nodes); console.log('_articles_nodes',_articles_nodes);
@@ -518,7 +509,8 @@
this.init(); this.init();
}; };
// TODO: we may convert a lot of computation into a web worker https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers // TODO: we may convert a lot of computation into a web worker
// https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
function checkParticulesCollisions(){ function checkParticulesCollisions(){
// pre create vars to save memory; // pre create vars to save memory;
var d, full_rad, margin, var d, full_rad, margin,
@@ -597,20 +589,41 @@
} }
} }
}; };
// show opened audio node // show opened audio node
function openNode(id){ function openNode(id){
closeNode(); closeNode();
_node_opened_id = id; _node_opened_id = id;
_nodes[id].open(); _nodes[id].open();
} }
function closeNode(){ function closeNode(){
if(_node_opened_id != -1){ if(_node_opened_id != -1){
_nodes[_node_opened_id].close(); _nodes[_node_opened_id].close();
_node_opened_id = -1; _node_opened_id = -1;
} }
} }
function createNodesRepulsions(){
// how to delete all these attractions before creates new once
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++) {
_physics.makeAttraction(_nodes_centered[n].p, _nodes_centered[q].p, -0.4, 10);
}
}
};
function purgeNodesRepulsions(){
// console.log('_physics.attractions.length', _physics.attractions.length);
for (var a = _physics.attractions.length-1; a >= 0; a--) {
// assuming that only nodes repulsions have constant < 1
// and are all at the end of array
if(Math.abs(_physics.attractions[a].constant) < 1){
_physics.attractions.splice(a,1);
}else{
break;
}
}
// console.log('_physics.attractions.length', _physics.attractions.length);
};
// ___ _ // ___ _
// | __|_ _| |_ _ _ ___ ___ ___ // | __|_ _| |_ _ _ ___ ___ ___
@@ -633,33 +646,17 @@
} }
createNodesRepulsions(); createNodesRepulsions();
}; };
function highlightEntries(){
function createNodesRepulsions(){ _$entrees_block_termlinks.removeClass('highlighted');
// how to delete all these attractions before creates new once var entree;
console.log('_nodes_centered', _nodes_centered); for (var i = 0; i < _nodes[_node_hover_id].entrees.length; i++) {
purgeNodesRepulsions(); entree = _nodes[_node_hover_id].entrees[i];
for (var n = 0; n < _nodes_centered.length; n++) { _$entrees_block_termlinks.filter(function(){
for (var q = n+1; q < _nodes_centered.length; q++) { return $(this).attr('tid') == entree;
_physics.makeAttraction(_nodes_centered[n].p, _nodes_centered[q].p, -0.4, 10); }).addClass('highlighted');
}
} }
}; };
function purgeNodesRepulsions(){
// console.log('_physics.attractions.length', _physics.attractions.length);
for (var a = _physics.attractions.length-1; a >= 0; a--) {
// assuming that only nodes repulsions have constant < 1
// and are all at the end of array
if(Math.abs(_physics.attractions[a].constant) < 1){
_physics.attractions.splice(a,1);
}else{
break;
}
}
// console.log('_physics.attractions.length', _physics.attractions.length);
};
// ___ _ _ _ // ___ _ _ _
// / __| __ _ _ __ _ _ __ | |__| (_)_ _ __ _ // / __| __ _ _ __ _ _ __ | |__| (_)_ _ __ _
// \__ \/ _| '_/ _` | ' \| '_ \ | | ' \/ _` | // \__ \/ _| '_/ _` | ' \| '_ \ | | ' \/ _` |
@@ -672,7 +669,6 @@
// setTimeout(stopScrambling, 2000); // setTimeout(stopScrambling, 2000);
stopScrambling(); stopScrambling();
}; };
function stopScrambling(){ function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
setTimeout(function(n){ setTimeout(function(n){
@@ -680,7 +676,6 @@
}.bind(this, _nodes[i]), 1000 + Math.random()*4000); }.bind(this, _nodes[i]), 1000 + Math.random()*4000);
} }
}; };
function closeAllEntries(){ function closeAllEntries(){
_$entrees_block_termlinks.each(function(index, el) { _$entrees_block_termlinks.each(function(index, el) {
if($(this).parents('li').is('.opened')){ if($(this).parents('li').is('.opened')){
@@ -708,7 +703,6 @@
) )
); );
}; };
function onCLickedOnArticles(e){ function onCLickedOnArticles(e){
e.preventDefault(); e.preventDefault();
$(this).toggleClass('is-active'); $(this).toggleClass('is-active');
@@ -723,14 +717,12 @@
// }); // });
return false; return false;
}; };
function filterArticles(){ function filterArticles(){
console.log('filterArticles'); console.log('filterArticles');
for (var i = 0; i < _no_articles_nodes.length; i++) { for (var i = 0; i < _no_articles_nodes.length; i++) {
_no_articles_nodes[i].fade(); _no_articles_nodes[i].fade();
} }
}; };
function resetArticlesFilter(){ function resetArticlesFilter(){
console.log('resetArticlesFilter'); console.log('resetArticlesFilter');
for (var i = 0; i < _no_articles_nodes.length; i++) { for (var i = 0; i < _no_articles_nodes.length; i++) {
@@ -738,12 +730,10 @@
} }
}; };
// ___ _
// ______ __ // | __|_ _____ _ _| |_ ___
// / ____/ _____ ____ / /______ // | _|\ V / -_) ' \ _(_-<
// / __/ | | / / _ \/ __ \/ __/ ___/ // |___|\_/\___|_||_\__/__/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
function initEvents(){ function initEvents(){
_$canvas _$canvas
.on('mousemove', function(event) { .on('mousemove', function(event) {
@@ -771,10 +761,11 @@
'target_node':{ 'target_node':{
'id':_node_hover_id, 'id':_node_hover_id,
'nid':_nodes[_node_hover_id].nid, 'nid':_nodes[_node_hover_id].nid,
'audio_url':_nodes[_node_hover_id].son_url 'audio_url':_nodes[_node_hover_id].audio_url
}, },
}; };
_$canvas.trigger(event); _$canvas.trigger(event);
// TODO: instead of directly opening the doc, create an event listener (e.g. : audio played from random)
openNode(_node_hover_id); openNode(_node_hover_id);
}else{ }else{
// console.log('corpus : click on map'); // console.log('corpus : click on map');
@@ -899,11 +890,10 @@
} }
} }
// ____ __ // ___ _
// / __ \___ ____ ____/ /__ _____ // | _ \___ _ _ __| |___ _ _
// / /_/ / _ \/ __ \/ __ / _ \/ ___/ // | / -_) ' \/ _` / -_) '_|
// / _, _/ __/ / / / /_/ / __/ / // |_|_\___|_||_\__,_\___|_|
// /_/ |_|\___/_/ /_/\__,_/\___/_/
function render(){ function render(){
_ctx.clearRect(0, 0, _canvas.width, _canvas.height); _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
@@ -926,24 +916,6 @@
} }
}; };
// _ _ _ _ _ _ _ _ ___ _ _
// | || (_)__ _| |_ | |_(_)__ _| |_| |_| __|_ _| |_ _ _(_)___ ___
// | __ | / _` | ' \| / / / _` | ' \ _| _|| ' \ _| '_| / -_|_-<
// |_||_|_\__, |_||_|_\_\_\__, |_||_\__|___|_||_\__|_| |_\___/__/
// |___/ |___/
function highlightEntries(){
_$entrees_block_termlinks.removeClass('highlighted');
var entree;
for (var i = 0; i < _nodes[_node_hover_id].entrees.length; i++) {
entree = _nodes[_node_hover_id].entrees[i];
_$entrees_block_termlinks.filter(function(){
return $(this).attr('tid') == entree;
}).addClass('highlighted');
}
}
// ___ _ _ _ _ // ___ _ _ _ _
// / __| |_ __ _ _ _| |_ /_\ _ _ (_)_ __ ___ // / __| |_ __ _ _ _| |_ /_\ _ _ (_)_ __ ___
// \__ \ _/ _` | '_| _|/ _ \| ' \| | ' \/ -_) // \__ \ _/ _` | '_| _|/ _ \| ' \| | ' \/ -_)
@@ -951,7 +923,10 @@
function startAnime(){ function startAnime(){
_physics.onUpdate(render); _physics.onUpdate(render);
_physics.play() _physics.play()
$('body').trigger('corpus-map-ready'); $('body').trigger({
'type':'corpus-map-ready',
'playlist':_playlist
});
}; };
init(); init();
@@ -963,4 +938,4 @@
}); });
})(jQuery); })(jQuery, Drupal, drupalSettings);
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+71 -96
View File
@@ -17,7 +17,7 @@
* *
*/ */
(function($) { (function($, Drupal, drupalSettings) {
EdlpCorpus = function(){ EdlpCorpus = function(){
var _activated = true; var _activated = true;
@@ -42,6 +42,7 @@
var _nodes_centered = []; var _nodes_centered = [];
var _nodes_centered_attractions = []; var _nodes_centered_attractions = [];
var _playlist = [];
// var _particules = []; // var _particules = [];
// var _base_radius = 3; // nodes radius (real radius, not diametre) // var _base_radius = 3; // nodes radius (real radius, not diametre)
@@ -75,15 +76,6 @@
// _/ // / / / / /_(__ ) // _/ // / / / / /_(__ )
// /___/_/ /_/_/\__/____/ // /___/_/ /_/_/\__/____/
function init(){ function init(){
console.log("EdlpCorpus init()");
// console.log("document", document);
initMap();
};
function initMap(){
console.log("EdlpCorpus initMap()");
// console.log('_physics',_physics);
initCanvas(); initCanvas();
if(_activated){ if(_activated){
loadCorpus(); loadCorpus();
@@ -92,17 +84,15 @@
} }
}; };
// ______ // ___
// / ____/___ _____ _ ______ ______ // / __|__ _ _ ___ ____ _ ___
// / / / __ `/ __ \ | / / __ `/ ___/ // | (__/ _` | ' \ V / _` (_-<
// / /___/ /_/ / / / / |/ / /_/ (__ ) // \___\__,_|_||_\_/\__,_/__/
// \____/\__,_/_/ /_/|___/\__,_/____/
function initCanvas(){ function initCanvas(){
// resize the canvas to fill browser window dynamically // resize the canvas to fill browser window dynamically
window.addEventListener('resize', onResizeCanvas, false); window.addEventListener('resize', onResizeCanvas, false);
onResizeCanvas(); onResizeCanvas();
}; };
function onResizeCanvas() { function onResizeCanvas() {
_canvas.width = window.innerWidth; _canvas.width = window.innerWidth;
_canvas.height = window.innerHeight; _canvas.height = window.innerHeight;
@@ -113,12 +103,11 @@
} }
}; };
// ___ _ // ___
// / | (_)___ __ __ // / __|___ _ _ _ __ _ _ ___
// / /| | / / __ `/ |/_/ // | (__/ _ \ '_| '_ \ || (_-<
// / ___ | / / /_/ /> < // \___\___/_| | .__/\_,_/__/
// /_/ |_|_/ /\__,_/_/|_| // |_|
// /___/
function loadCorpus(){ function loadCorpus(){
// console.log('drupalSettings',drupalSettings); // console.log('drupalSettings',drupalSettings);
// console.log('window.location', window.location); // console.log('window.location', window.location);
@@ -131,24 +120,21 @@
onCorpusLoadError(jqxhr, textStatus, error); onCorpusLoadError(jqxhr, textStatus, error);
}); });
}; };
function onCorpusLoadError(jqxhr, textStatus, error){ function onCorpusLoadError(jqxhr, textStatus, error){
console.warn('corpus load failed', jqxhr.responseText); console.warn('corpus load failed', jqxhr.responseText);
}; };
function onCorpusLoaded(data){ function onCorpusLoaded(data){
console.log('corpus loaded : data', data); console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]); // console.log('first node', data.nodes[0]);
// buildParticles(data.nodes); // buildParticles(data.nodes);
initNodePopup();
initArtilesLink();
initPhysics(); initPhysics();
buildNodes(data.nodes); buildNodes(data.nodes);
initArtilesLink();
initNodePopup();
initEvents(); initEvents();
startAnime(); startAnime();
}; };
// ___ _ _ // ___ _ _
// | _ \ |_ _ _ __(_)__ ___ // | _ \ |_ _ _ __(_)__ ___
// | _/ ' \ || (_-< / _(_-< // | _/ ' \ || (_-< / _(_-<
@@ -195,11 +181,10 @@
}; };
// _ __ __ // _ _ _
// / | / /___ ____/ /__ _____ // | \| |___ __| |___ ___
// / |/ / __ \/ __ / _ \/ ___/ // | .` / _ \/ _` / -_|_-<
// / /| / /_/ / /_/ / __(__ ) // |_|\_\___/\__,_\___/__/
// /_/ |_/\____/\__,_/\___/____/
function buildNodes(nodes){ function buildNodes(nodes){
console.log("buildNodes", nodes); console.log("buildNodes", nodes);
var d; var d;
@@ -207,6 +192,12 @@
d = i < 1 ? true : false; d = i < 1 ? true : false;
// _nodes.push(new Node(i,nodes[i],d)); // _nodes.push(new Node(i,nodes[i],d));
new Node(i,nodes[i],d); new Node(i,nodes[i],d);
_playlist.push({
'id':i,
'nid':nodes[i].nid,
'audio_url':nodes[i].audio_url
});
} }
console.log('_nodes',_nodes); console.log('_nodes',_nodes);
console.log('_articles_nodes',_articles_nodes); console.log('_articles_nodes',_articles_nodes);
@@ -518,7 +509,8 @@
this.init(); this.init();
}; };
// TODO: we may convert a lot of computation into a web worker https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers // TODO: we may convert a lot of computation into a web worker
// https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
function checkParticulesCollisions(){ function checkParticulesCollisions(){
// pre create vars to save memory; // pre create vars to save memory;
var d, full_rad, margin, var d, full_rad, margin,
@@ -597,20 +589,41 @@
} }
} }
}; };
// show opened audio node // show opened audio node
function openNode(id){ function openNode(id){
closeNode(); closeNode();
_node_opened_id = id; _node_opened_id = id;
_nodes[id].open(); _nodes[id].open();
} }
function closeNode(){ function closeNode(){
if(_node_opened_id != -1){ if(_node_opened_id != -1){
_nodes[_node_opened_id].close(); _nodes[_node_opened_id].close();
_node_opened_id = -1; _node_opened_id = -1;
} }
} }
function createNodesRepulsions(){
// how to delete all these attractions before creates new once
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++) {
_physics.makeAttraction(_nodes_centered[n].p, _nodes_centered[q].p, -0.4, 10);
}
}
};
function purgeNodesRepulsions(){
// console.log('_physics.attractions.length', _physics.attractions.length);
for (var a = _physics.attractions.length-1; a >= 0; a--) {
// assuming that only nodes repulsions have constant < 1
// and are all at the end of array
if(Math.abs(_physics.attractions[a].constant) < 1){
_physics.attractions.splice(a,1);
}else{
break;
}
}
// console.log('_physics.attractions.length', _physics.attractions.length);
};
// ___ _ // ___ _
// | __|_ _| |_ _ _ ___ ___ ___ // | __|_ _| |_ _ _ ___ ___ ___
@@ -633,33 +646,17 @@
} }
createNodesRepulsions(); createNodesRepulsions();
}; };
function highlightEntries(){
function createNodesRepulsions(){ _$entrees_block_termlinks.removeClass('highlighted');
// how to delete all these attractions before creates new once var entree;
console.log('_nodes_centered', _nodes_centered); for (var i = 0; i < _nodes[_node_hover_id].entrees.length; i++) {
purgeNodesRepulsions(); entree = _nodes[_node_hover_id].entrees[i];
for (var n = 0; n < _nodes_centered.length; n++) { _$entrees_block_termlinks.filter(function(){
for (var q = n+1; q < _nodes_centered.length; q++) { return $(this).attr('tid') == entree;
_physics.makeAttraction(_nodes_centered[n].p, _nodes_centered[q].p, -0.4, 10); }).addClass('highlighted');
}
} }
}; };
function purgeNodesRepulsions(){
// console.log('_physics.attractions.length', _physics.attractions.length);
for (var a = _physics.attractions.length-1; a >= 0; a--) {
// assuming that only nodes repulsions have constant < 1
// and are all at the end of array
if(Math.abs(_physics.attractions[a].constant) < 1){
_physics.attractions.splice(a,1);
}else{
break;
}
}
// console.log('_physics.attractions.length', _physics.attractions.length);
};
// ___ _ _ _ // ___ _ _ _
// / __| __ _ _ __ _ _ __ | |__| (_)_ _ __ _ // / __| __ _ _ __ _ _ __ | |__| (_)_ _ __ _
// \__ \/ _| '_/ _` | ' \| '_ \ | | ' \/ _` | // \__ \/ _| '_/ _` | ' \| '_ \ | | ' \/ _` |
@@ -672,7 +669,6 @@
// setTimeout(stopScrambling, 2000); // setTimeout(stopScrambling, 2000);
stopScrambling(); stopScrambling();
}; };
function stopScrambling(){ function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) { for (var i = 0; i < _nodes.length; i++) {
setTimeout(function(n){ setTimeout(function(n){
@@ -680,7 +676,6 @@
}.bind(this, _nodes[i]), 1000 + Math.random()*4000); }.bind(this, _nodes[i]), 1000 + Math.random()*4000);
} }
}; };
function closeAllEntries(){ function closeAllEntries(){
_$entrees_block_termlinks.each(function(index, el) { _$entrees_block_termlinks.each(function(index, el) {
if($(this).parents('li').is('.opened')){ if($(this).parents('li').is('.opened')){
@@ -708,7 +703,6 @@
) )
); );
}; };
function onCLickedOnArticles(e){ function onCLickedOnArticles(e){
e.preventDefault(); e.preventDefault();
$(this).toggleClass('is-active'); $(this).toggleClass('is-active');
@@ -723,14 +717,12 @@
// }); // });
return false; return false;
}; };
function filterArticles(){ function filterArticles(){
console.log('filterArticles'); console.log('filterArticles');
for (var i = 0; i < _no_articles_nodes.length; i++) { for (var i = 0; i < _no_articles_nodes.length; i++) {
_no_articles_nodes[i].fade(); _no_articles_nodes[i].fade();
} }
}; };
function resetArticlesFilter(){ function resetArticlesFilter(){
console.log('resetArticlesFilter'); console.log('resetArticlesFilter');
for (var i = 0; i < _no_articles_nodes.length; i++) { for (var i = 0; i < _no_articles_nodes.length; i++) {
@@ -738,12 +730,10 @@
} }
}; };
// ___ _
// ______ __ // | __|_ _____ _ _| |_ ___
// / ____/ _____ ____ / /______ // | _|\ V / -_) ' \ _(_-<
// / __/ | | / / _ \/ __ \/ __/ ___/ // |___|\_/\___|_||_\__/__/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
function initEvents(){ function initEvents(){
_$canvas _$canvas
.on('mousemove', function(event) { .on('mousemove', function(event) {
@@ -771,10 +761,11 @@
'target_node':{ 'target_node':{
'id':_node_hover_id, 'id':_node_hover_id,
'nid':_nodes[_node_hover_id].nid, 'nid':_nodes[_node_hover_id].nid,
'audio_url':_nodes[_node_hover_id].son_url 'audio_url':_nodes[_node_hover_id].audio_url
}, },
}; };
_$canvas.trigger(event); _$canvas.trigger(event);
// TODO: instead of directly opening the doc, create an event listener (e.g. : audio played from random)
openNode(_node_hover_id); openNode(_node_hover_id);
}else{ }else{
// console.log('corpus : click on map'); // console.log('corpus : click on map');
@@ -899,11 +890,10 @@
} }
} }
// ____ __ // ___ _
// / __ \___ ____ ____/ /__ _____ // | _ \___ _ _ __| |___ _ _
// / /_/ / _ \/ __ \/ __ / _ \/ ___/ // | / -_) ' \/ _` / -_) '_|
// / _, _/ __/ / / / /_/ / __/ / // |_|_\___|_||_\__,_\___|_|
// /_/ |_|\___/_/ /_/\__,_/\___/_/
function render(){ function render(){
_ctx.clearRect(0, 0, _canvas.width, _canvas.height); _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
@@ -926,24 +916,6 @@
} }
}; };
// _ _ _ _ _ _ _ _ ___ _ _
// | || (_)__ _| |_ | |_(_)__ _| |_| |_| __|_ _| |_ _ _(_)___ ___
// | __ | / _` | ' \| / / / _` | ' \ _| _|| ' \ _| '_| / -_|_-<
// |_||_|_\__, |_||_|_\_\_\__, |_||_\__|___|_||_\__|_| |_\___/__/
// |___/ |___/
function highlightEntries(){
_$entrees_block_termlinks.removeClass('highlighted');
var entree;
for (var i = 0; i < _nodes[_node_hover_id].entrees.length; i++) {
entree = _nodes[_node_hover_id].entrees[i];
_$entrees_block_termlinks.filter(function(){
return $(this).attr('tid') == entree;
}).addClass('highlighted');
}
}
// ___ _ _ _ _ // ___ _ _ _ _
// / __| |_ __ _ _ _| |_ /_\ _ _ (_)_ __ ___ // / __| |_ __ _ _ _| |_ /_\ _ _ (_)_ __ ___
// \__ \ _/ _` | '_| _|/ _ \| ' \| | ' \/ -_) // \__ \ _/ _` | '_| _|/ _ \| ' \| | ' \/ -_)
@@ -951,7 +923,10 @@
function startAnime(){ function startAnime(){
_physics.onUpdate(render); _physics.onUpdate(render);
_physics.play() _physics.play()
$('body').trigger('corpus-map-ready'); $('body').trigger({
'type':'corpus-map-ready',
'playlist':_playlist
});
}; };
init(); init();
@@ -963,4 +938,4 @@
}); });
})(jQuery); })(jQuery, Drupal, drupalSettings);
sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php
+8 -8
View File
@@ -61,14 +61,14 @@ class CorpusController extends ControllerBase {
// dpm($description); // dpm($description);
$field_son_values = $node->get('field_son')->getValue(); $field_son_values = $node->get('field_son')->getValue();
$son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : ""; $audio_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
$son_file = \Drupal\file\Entity\File::load($son_fid); $audio_file = \Drupal\file\Entity\File::load($audio_fid);
$son_url = null; $audio_url = null;
// if node don't have a sound file atteched, skip it // if node don't have a sound file atteched, skip it
if(!$son_file) continue; if(!$audio_file) continue;
$son_uri = $son_file->getFileUri(); $son_uri = $audio_file->getFileUri();
$son_url = file_create_url($son_uri); $audio_url = file_create_url($son_uri);
// has article ? // has article ?
$article_value = $node->body->getValue(); $article_value = $node->body->getValue();
@@ -83,8 +83,8 @@ class CorpusController extends ControllerBase {
"title" => $node->get('title')->getString(), "title" => $node->get('title')->getString(),
"description" => $description, "description" => $description,
"entrees" => $entrees, "entrees" => $entrees,
// "son_fid" => $son_fid, // "son_fid" => $audio_fid,
"son_url" => $son_url, "audio_url" => $audio_url,
"has_article" => $has_article, "has_article" => $has_article,
"chutier_action" => 'add', "chutier_action" => 'add',
); );
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+170 -41
View File
@@ -1,21 +1,26 @@
(function($) { (function($, Drupal, drupalSettings) {
EdlpTheme = function(){ EdlpTheme = function(){
var _$body = $('body'); var _$body = $('body');
var _is_front = _$body.is('.path-frontpage'); var _is_front = _$body.is('.path-frontpage');
var _$corpus_canvas; var _$corpus_canvas;
var _$content_container = $('main[role="main"]>.layout-content'); var _$content_container = $('main[role="main"]>.layout-content');
var _$ajaxLinks; var _$ajaxLinks;
var _audio_player; var _audio_player;
var _randomPlayer;
// ___ _ _
// |_ _|_ _ (_) |_
// | || ' \| | _|
// |___|_||_|_|\__|
function init(){ function init(){
console.log("EdlpTheme init()"); console.log("EdlpTheme init()");
// TODO: redirect all no-front pages to front with write hash // TODO: redirect all no-front pages to front with write hash
_$body.on('corpus-map-ready', onCorpusMapReady); _$body.on('corpus-map-ready', onCorpusMapReady);
initAudioPlayer();
_audio_player = new AudioPlayer();
initAjaxLinks(); initAjaxLinks();
@@ -23,12 +28,14 @@
initProductions(); initProductions();
} }
initScrollbars(); // initScrollbars();
initEvents(); initEvents();
}; };
// ___ _
// | __|_ _____ _ _| |_ ___
// | _|\ V / -_) ' \ _(_-<
// |___|\_/\___|_||_\__/__/
function initEvents(){ function initEvents(){
$('body') $('body')
.on('on-studio-chutier-updated', function(e){ .on('on-studio-chutier-updated', function(e){
@@ -52,10 +59,6 @@
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
// https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29 // https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
// https://www.binarytides.com/using-html5-audio-element-javascript/ // https://www.binarytides.com/using-html5-audio-element-javascript/
//
function initAudioPlayer(){
_audio_player = new AudioPlayer();
};
function AudioPlayer(){ function AudioPlayer(){
var that = this; var that = this;
this.fid; this.fid;
@@ -88,6 +91,16 @@
this.hideTimer = false; this.hideTimer = false;
this.hideTimeMS = 10000; this.hideTimeMS = 10000;
// history
this.next_node = null;
this.currentHistoricIndex = null;
this.historic = [];
// object events
this.event_handlers = {
'audio-ended':[]
};
this.init(); this.init();
}; };
AudioPlayer.prototype = { AudioPlayer.prototype = {
@@ -108,37 +121,31 @@
true); true);
} }
// init btns events // init btns events
this.$previous.on('click', this.playPrevious.bind(this));
this.$playpause.on('click', this.togglePlayPause.bind(this)); this.$playpause.on('click', this.togglePlayPause.bind(this));
this.$next.on('click', this.playNext.bind(this));
// TODO: previous and next btns // TODO: previous and next btns
}, },
openDocument(node){ openDocument(node, next_node){
console.log('AudioPlayer openDocument', node); console.log('AudioPlayer openDocument', node);
this.setSRC(node.audio_url); this.historic.push(node);
this.loadNode(node.nid); this.currentHistoricIndex = this.historic.length-1;
this.next_node = next_node || null;
// TODO: emmit new playing doc (need for corpus map nowing that audio played from RandomPlayer)
this.launch();
}, },
// cartel functions launch(){
loadNode(nid){ this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
this.$cartel.addClass('loading'); this.loadNode(this.historic[this.currentHistoricIndex].nid);
$.getJSON('/edlp/ajax/json/node/'+nid+'/player_cartel', {}) this.showHidePreviousBtn();
.done(this.onNodeLoaded.bind(this)) this.showHideNextBtn();
.fail(this.onNodeLoadFail.bind(this)); this.show();
},
onNodeLoaded(data){
console.log('AudioPlayer node loaded', data);
this.$cartel.html(data.rendered).removeClass('loading');
_$body.trigger({'type':'new-audio-cartel-loaded'});
initAjaxLinks();
},
onNodeLoadFail(jqxhr, textStatus, error){
console.warn('AudioPlayer node load failed', jqxhr.responseText);
this.$cartel.removeClass('loading').html('');
}, },
// audio functions // audio functions
setSRC(url){ setSRC(url){
// console.log('AudioPlayer setSRC : url', url); // console.log('AudioPlayer setSRC : url', url);
this.clearTimeOutToHide(); this.clearTimeOutToHide();
this.audio.src = url; this.audio.src = url;
this.show();
}, },
onLoadedmetadata(){ onLoadedmetadata(){
var rem = parseInt(this.audio.duration, 10), var rem = parseInt(this.audio.duration, 10),
@@ -165,7 +172,18 @@
play(){ play(){
this.audio.play(); this.audio.play();
}, },
togglePlayPause(){ playPrevious(){
if(typeof this.historic[this.currentHistoricIndex-1] !== 'undefined'){
this.currentHistoricIndex -= 1;
this.launch();
}
},
playNext(){
if(this.next_node){
this.openDocument(this.next_node);
}
},
togglePlayPause(e){
if(this.audio.paused){ if(this.audio.paused){
this.audio.play(); this.audio.play();
}else{ }else{
@@ -190,13 +208,48 @@
this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>'); this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
}, },
onEnded(){ onEnded(){
this.emmit('audio-ended');
this.stop();
},
stop(){
this.$container.removeClass('is-playing'); this.$container.removeClass('is-playing');
this.timeOutToHide(); this.timeOutToHide();
}, },
// cartel functions
loadNode(nid){
this.$cartel.addClass('loading');
$.getJSON('/edlp/ajax/json/node/'+nid+'/player_cartel', {})
.done(this.onNodeLoaded.bind(this))
.fail(this.onNodeLoadFail.bind(this));
},
onNodeLoaded(data){
console.log('AudioPlayer node loaded', data);
this.$cartel.html(data.rendered).removeClass('loading');
_$body.trigger({'type':'new-audio-cartel-loaded'});
initAjaxLinks();
},
onNodeLoadFail(jqxhr, textStatus, error){
console.warn('AudioPlayer node load failed', jqxhr.responseText);
this.$cartel.removeClass('loading').html('');
},
// global // global
show(){ show(){
this.$container.addClass('visible'); this.$container.addClass('visible');
}, },
showHidePreviousBtn(s){
if(this.historic.length > 1){
this.$previous.addClass('is-active');
}else{
this.$previous.removeClass('is-active');
}
},
showHideNextBtn(){
if(this.next_node){
this.$next.addClass('is-active');
}else{
this.$next.removeClass('is-active');
}
},
timeOutToHide(){ timeOutToHide(){
this.clearTimeOutToHide(); this.clearTimeOutToHide();
this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS); this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
@@ -210,17 +263,29 @@
this.$container.removeClass('visible'); this.$container.removeClass('visible');
// trigger highlighted node remove on corpus map // trigger highlighted node remove on corpus map
_$corpus_canvas.trigger('audio-node-closed'); _$corpus_canvas.trigger('audio-node-closed');
} },
// object events
on(event_name, handler){
if(typeof this.event_handlers[event_name] == 'undefined'){
console.warn('AudioPlayer : event '+event_name+' does not exists');
}
this.event_handlers[event_name].push(handler);
},
emmit(event_name){
var handler;
for (var i = this.event_handlers[event_name].length; i >= 0 ; i--) {
handler = this.event_handlers[event_name][i];
setTimeout(handler, 0);
}
},
} }
// ___ _ _ ___ // ___ _ _ ___
// / __| __ _ _ ___| | | _ ) __ _ _ _ ___ // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
// \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-< // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
// |___/\__|_| \___/_|_|___/\__,_|_| /__/ // |___/\__|_| \___/_|_|___/\__,_|_| /__/
function initScrollbars(){ function initScrollbars(){
console.log("initScrollbars"); // console.log("initScrollbars");
// TODO: find a better js scroll than overlayScrollbars which does not handle well max-height + overflow-y:auto; // TODO: find a better js scroll than overlayScrollbars which does not handle well max-height + overflow-y:auto;
// $('.os-scroll').overlayScrollbars({ // $('.os-scroll').overlayScrollbars({
// overflowBehavior:{ // overflowBehavior:{
@@ -261,7 +326,6 @@
} }
}); });
}; };
function onClickAjaxLink(e){ function onClickAjaxLink(e){
e.preventDefault(); e.preventDefault();
var $link = $(this); var $link = $(this);
@@ -326,13 +390,11 @@
return false; return false;
}; };
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){ function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText); console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$link.removeClass('ajax-loading'); $link.removeClass('ajax-loading');
_$body.removeClass('ajax-loading'); _$body.removeClass('ajax-loading');
}; };
function onAjaxLinkLoaded(data, $link, sys_path){ function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded : data', data); console.log('ajax link loaded : data', data);
_$body.removeClass('ajax-loading'); _$body.removeClass('ajax-loading');
@@ -386,7 +448,7 @@
// \___\___/_| | .__/\_,_/__/ // \___\___/_| | .__/\_,_/__/
// |_| // |_|
function onCorpusMapReady(e){ function onCorpusMapReady(e){
console.log('theme : onCorpusReady'); console.log('theme : onCorpusReady', e);
_$corpus_canvas = $('canvas#corpus-map'); _$corpus_canvas = $('canvas#corpus-map');
_$corpus_canvas _$corpus_canvas
.on('corpus-cliked-on-map', function(e) { .on('corpus-cliked-on-map', function(e) {
@@ -398,9 +460,77 @@
_audio_player.openDocument(e.target_node); _audio_player.openDocument(e.target_node);
}); });
_randomPlayer = new RandomPlayer(e.playlist);
_$body.attr('corpus-map', 'ready'); _$body.attr('corpus-map', 'ready');
} }
// ___ _ ___ _
// | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _ ___ _ _
// | / _` | ' \/ _` / _ \ ' \| _/ / _` | || / -_) '_|
// |_|_\__,_|_||_\__,_\___/_|_|_|_| |_\__,_|\_, \___|_|
// |__/
function RandomPlayer(playlist){
this.active = false;
this.playlist = playlist;
this.$btn = $('<a>').html('&#x1f500;').addClass('random-player-btn');
this.init()
};
RandomPlayer.prototype = {
init(){
// this.shuffle();
$('<div>')
.addClass('block random-player')
.append(this.$btn)
.insertAfter('#block-userlogin');
// events
this.$btn.on('click', this.toggleActive.bind(this));
// attach an event on AudioPlayer
_audio_player.on('audio-ended', this.onAudioPlayerEnded.bind(this));
},
shuffle(){
var tempPLaylist = [];
for (var i = this.playlist.length-1; i >= 0 ; i--) {
tempPLaylist.push(this.playlist[i]);
}
this.shuffledPlaylist = [];
while(tempPLaylist.length > 0){
var r = Math.floor(Math.random() * tempPLaylist.length);
this.shuffledPlaylist.push(tempPLaylist.splice(r,1)[0]);
}
console.log('RandomPlayer, this.shuffledPlaylist', this.shuffledPlaylist);
},
toggleActive(e){
if (this.active) {
this.stop();
}else{
this.shuffle();
this.play();
}
},
play(){
this.active = true;
this.next();
},
stop(){
this.active = false;
// stop audio player
_audio_player.stop();
},
next(){
if(this.shuffledPlaylist.length > 0)
_audio_player.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
},
onAudioPlayerEnded(){
console.log('RandomPlayer : onAudioPlayerEnded()');
if(this.active){
this.next();
}
}
};
// ___ _ _ _ // ___ _ _ _
// | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___ // | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-< // | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
@@ -425,7 +555,6 @@
// }); // });
}; };
// ___ _ ___ // ___ _ ___
// | __| _ ___ _ _| |_| _ \__ _ __ _ ___ // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
// | _| '_/ _ \ ' \ _| _/ _` / _` / -_) // | _| '_/ _ \ ' \ _| _/ _` / _` / -_)
@@ -458,4 +587,4 @@
}); });
})(jQuery); })(jQuery, Drupal, drupalSettings);
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+5
View File
@@ -2031,6 +2031,11 @@ footer {
text-indent: 40px; text-indent: 40px;
margin: 0; margin: 0;
overflow: hidden; } overflow: hidden; }
footer .block.random-player {
pointer-events: all; }
footer .block.random-player a {
background-color: inherit;
cursor: pointer; }
footer #block-userlogin { footer #block-userlogin {
pointer-events: all; pointer-events: all;
position: relative; position: relative;
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+170 -41
View File
@@ -1,21 +1,26 @@
(function($) { (function($, Drupal, drupalSettings) {
EdlpTheme = function(){ EdlpTheme = function(){
var _$body = $('body'); var _$body = $('body');
var _is_front = _$body.is('.path-frontpage'); var _is_front = _$body.is('.path-frontpage');
var _$corpus_canvas; var _$corpus_canvas;
var _$content_container = $('main[role="main"]>.layout-content'); var _$content_container = $('main[role="main"]>.layout-content');
var _$ajaxLinks; var _$ajaxLinks;
var _audio_player; var _audio_player;
var _randomPlayer;
// ___ _ _
// |_ _|_ _ (_) |_
// | || ' \| | _|
// |___|_||_|_|\__|
function init(){ function init(){
console.log("EdlpTheme init()"); console.log("EdlpTheme init()");
// TODO: redirect all no-front pages to front with write hash // TODO: redirect all no-front pages to front with write hash
_$body.on('corpus-map-ready', onCorpusMapReady); _$body.on('corpus-map-ready', onCorpusMapReady);
initAudioPlayer();
_audio_player = new AudioPlayer();
initAjaxLinks(); initAjaxLinks();
@@ -23,12 +28,14 @@
initProductions(); initProductions();
} }
initScrollbars(); // initScrollbars();
initEvents(); initEvents();
}; };
// ___ _
// | __|_ _____ _ _| |_ ___
// | _|\ V / -_) ' \ _(_-<
// |___|\_/\___|_||_\__/__/
function initEvents(){ function initEvents(){
$('body') $('body')
.on('on-studio-chutier-updated', function(e){ .on('on-studio-chutier-updated', function(e){
@@ -52,10 +59,6 @@
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement // https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
// https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29 // https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
// https://www.binarytides.com/using-html5-audio-element-javascript/ // https://www.binarytides.com/using-html5-audio-element-javascript/
//
function initAudioPlayer(){
_audio_player = new AudioPlayer();
};
function AudioPlayer(){ function AudioPlayer(){
var that = this; var that = this;
this.fid; this.fid;
@@ -88,6 +91,16 @@
this.hideTimer = false; this.hideTimer = false;
this.hideTimeMS = 10000; this.hideTimeMS = 10000;
// history
this.next_node = null;
this.currentHistoricIndex = null;
this.historic = [];
// object events
this.event_handlers = {
'audio-ended':[]
};
this.init(); this.init();
}; };
AudioPlayer.prototype = { AudioPlayer.prototype = {
@@ -108,37 +121,31 @@
true); true);
} }
// init btns events // init btns events
this.$previous.on('click', this.playPrevious.bind(this));
this.$playpause.on('click', this.togglePlayPause.bind(this)); this.$playpause.on('click', this.togglePlayPause.bind(this));
this.$next.on('click', this.playNext.bind(this));
// TODO: previous and next btns // TODO: previous and next btns
}, },
openDocument(node){ openDocument(node, next_node){
console.log('AudioPlayer openDocument', node); console.log('AudioPlayer openDocument', node);
this.setSRC(node.audio_url); this.historic.push(node);
this.loadNode(node.nid); this.currentHistoricIndex = this.historic.length-1;
this.next_node = next_node || null;
// TODO: emmit new playing doc (need for corpus map nowing that audio played from RandomPlayer)
this.launch();
}, },
// cartel functions launch(){
loadNode(nid){ this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
this.$cartel.addClass('loading'); this.loadNode(this.historic[this.currentHistoricIndex].nid);
$.getJSON('/edlp/ajax/json/node/'+nid+'/player_cartel', {}) this.showHidePreviousBtn();
.done(this.onNodeLoaded.bind(this)) this.showHideNextBtn();
.fail(this.onNodeLoadFail.bind(this)); this.show();
},
onNodeLoaded(data){
console.log('AudioPlayer node loaded', data);
this.$cartel.html(data.rendered).removeClass('loading');
_$body.trigger({'type':'new-audio-cartel-loaded'});
initAjaxLinks();
},
onNodeLoadFail(jqxhr, textStatus, error){
console.warn('AudioPlayer node load failed', jqxhr.responseText);
this.$cartel.removeClass('loading').html('');
}, },
// audio functions // audio functions
setSRC(url){ setSRC(url){
// console.log('AudioPlayer setSRC : url', url); // console.log('AudioPlayer setSRC : url', url);
this.clearTimeOutToHide(); this.clearTimeOutToHide();
this.audio.src = url; this.audio.src = url;
this.show();
}, },
onLoadedmetadata(){ onLoadedmetadata(){
var rem = parseInt(this.audio.duration, 10), var rem = parseInt(this.audio.duration, 10),
@@ -165,7 +172,18 @@
play(){ play(){
this.audio.play(); this.audio.play();
}, },
togglePlayPause(){ playPrevious(){
if(typeof this.historic[this.currentHistoricIndex-1] !== 'undefined'){
this.currentHistoricIndex -= 1;
this.launch();
}
},
playNext(){
if(this.next_node){
this.openDocument(this.next_node);
}
},
togglePlayPause(e){
if(this.audio.paused){ if(this.audio.paused){
this.audio.play(); this.audio.play();
}else{ }else{
@@ -190,13 +208,48 @@
this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>'); this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
}, },
onEnded(){ onEnded(){
this.emmit('audio-ended');
this.stop();
},
stop(){
this.$container.removeClass('is-playing'); this.$container.removeClass('is-playing');
this.timeOutToHide(); this.timeOutToHide();
}, },
// cartel functions
loadNode(nid){
this.$cartel.addClass('loading');
$.getJSON('/edlp/ajax/json/node/'+nid+'/player_cartel', {})
.done(this.onNodeLoaded.bind(this))
.fail(this.onNodeLoadFail.bind(this));
},
onNodeLoaded(data){
console.log('AudioPlayer node loaded', data);
this.$cartel.html(data.rendered).removeClass('loading');
_$body.trigger({'type':'new-audio-cartel-loaded'});
initAjaxLinks();
},
onNodeLoadFail(jqxhr, textStatus, error){
console.warn('AudioPlayer node load failed', jqxhr.responseText);
this.$cartel.removeClass('loading').html('');
},
// global // global
show(){ show(){
this.$container.addClass('visible'); this.$container.addClass('visible');
}, },
showHidePreviousBtn(s){
if(this.historic.length > 1){
this.$previous.addClass('is-active');
}else{
this.$previous.removeClass('is-active');
}
},
showHideNextBtn(){
if(this.next_node){
this.$next.addClass('is-active');
}else{
this.$next.removeClass('is-active');
}
},
timeOutToHide(){ timeOutToHide(){
this.clearTimeOutToHide(); this.clearTimeOutToHide();
this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS); this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
@@ -210,17 +263,29 @@
this.$container.removeClass('visible'); this.$container.removeClass('visible');
// trigger highlighted node remove on corpus map // trigger highlighted node remove on corpus map
_$corpus_canvas.trigger('audio-node-closed'); _$corpus_canvas.trigger('audio-node-closed');
} },
// object events
on(event_name, handler){
if(typeof this.event_handlers[event_name] == 'undefined'){
console.warn('AudioPlayer : event '+event_name+' does not exists');
}
this.event_handlers[event_name].push(handler);
},
emmit(event_name){
var handler;
for (var i = this.event_handlers[event_name].length; i >= 0 ; i--) {
handler = this.event_handlers[event_name][i];
setTimeout(handler, 0);
}
},
} }
// ___ _ _ ___ // ___ _ _ ___
// / __| __ _ _ ___| | | _ ) __ _ _ _ ___ // / __| __ _ _ ___| | | _ ) __ _ _ _ ___
// \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-< // \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
// |___/\__|_| \___/_|_|___/\__,_|_| /__/ // |___/\__|_| \___/_|_|___/\__,_|_| /__/
function initScrollbars(){ function initScrollbars(){
console.log("initScrollbars"); // console.log("initScrollbars");
// TODO: find a better js scroll than overlayScrollbars which does not handle well max-height + overflow-y:auto; // TODO: find a better js scroll than overlayScrollbars which does not handle well max-height + overflow-y:auto;
// $('.os-scroll').overlayScrollbars({ // $('.os-scroll').overlayScrollbars({
// overflowBehavior:{ // overflowBehavior:{
@@ -261,7 +326,6 @@
} }
}); });
}; };
function onClickAjaxLink(e){ function onClickAjaxLink(e){
e.preventDefault(); e.preventDefault();
var $link = $(this); var $link = $(this);
@@ -326,13 +390,11 @@
return false; return false;
}; };
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){ function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText); console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$link.removeClass('ajax-loading'); $link.removeClass('ajax-loading');
_$body.removeClass('ajax-loading'); _$body.removeClass('ajax-loading');
}; };
function onAjaxLinkLoaded(data, $link, sys_path){ function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded : data', data); console.log('ajax link loaded : data', data);
_$body.removeClass('ajax-loading'); _$body.removeClass('ajax-loading');
@@ -386,7 +448,7 @@
// \___\___/_| | .__/\_,_/__/ // \___\___/_| | .__/\_,_/__/
// |_| // |_|
function onCorpusMapReady(e){ function onCorpusMapReady(e){
console.log('theme : onCorpusReady'); console.log('theme : onCorpusReady', e);
_$corpus_canvas = $('canvas#corpus-map'); _$corpus_canvas = $('canvas#corpus-map');
_$corpus_canvas _$corpus_canvas
.on('corpus-cliked-on-map', function(e) { .on('corpus-cliked-on-map', function(e) {
@@ -398,9 +460,77 @@
_audio_player.openDocument(e.target_node); _audio_player.openDocument(e.target_node);
}); });
_randomPlayer = new RandomPlayer(e.playlist);
_$body.attr('corpus-map', 'ready'); _$body.attr('corpus-map', 'ready');
} }
// ___ _ ___ _
// | _ \__ _ _ _ __| |___ _ __ | _ \ |__ _ _ _ ___ _ _
// | / _` | ' \/ _` / _ \ ' \| _/ / _` | || / -_) '_|
// |_|_\__,_|_||_\__,_\___/_|_|_|_| |_\__,_|\_, \___|_|
// |__/
function RandomPlayer(playlist){
this.active = false;
this.playlist = playlist;
this.$btn = $('<a>').html('&#x1f500;').addClass('random-player-btn');
this.init()
};
RandomPlayer.prototype = {
init(){
// this.shuffle();
$('<div>')
.addClass('block random-player')
.append(this.$btn)
.insertAfter('#block-userlogin');
// events
this.$btn.on('click', this.toggleActive.bind(this));
// attach an event on AudioPlayer
_audio_player.on('audio-ended', this.onAudioPlayerEnded.bind(this));
},
shuffle(){
var tempPLaylist = [];
for (var i = this.playlist.length-1; i >= 0 ; i--) {
tempPLaylist.push(this.playlist[i]);
}
this.shuffledPlaylist = [];
while(tempPLaylist.length > 0){
var r = Math.floor(Math.random() * tempPLaylist.length);
this.shuffledPlaylist.push(tempPLaylist.splice(r,1)[0]);
}
console.log('RandomPlayer, this.shuffledPlaylist', this.shuffledPlaylist);
},
toggleActive(e){
if (this.active) {
this.stop();
}else{
this.shuffle();
this.play();
}
},
play(){
this.active = true;
this.next();
},
stop(){
this.active = false;
// stop audio player
_audio_player.stop();
},
next(){
if(this.shuffledPlaylist.length > 0)
_audio_player.openDocument(this.shuffledPlaylist.splice(0,1)[0]);
},
onAudioPlayerEnded(){
console.log('RandomPlayer : onAudioPlayerEnded()');
if(this.active){
this.next();
}
}
};
// ___ _ _ _ // ___ _ _ _
// | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___ // | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
// | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-< // | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
@@ -425,7 +555,6 @@
// }); // });
}; };
// ___ _ ___ // ___ _ ___
// | __| _ ___ _ _| |_| _ \__ _ __ _ ___ // | __| _ ___ _ _| |_| _ \__ _ __ _ ___
// | _| '_/ _ \ ' \ _| _/ _` / _` / -_) // | _| '_/ _ \ ' \ _| _/ _` / _` / -_)
@@ -458,4 +587,4 @@
}); });
})(jQuery); })(jQuery, Drupal, drupalSettings);
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+9 -4
View File
@@ -1045,10 +1045,15 @@ footer{
overflow: hidden; overflow: hidden;
} }
} }
// #block-fancylogin{
// pointer-events: all; .block.random-player{
// pointer-events: all;
// } a{
background-color: inherit;
cursor: pointer;
}
}
#block-userlogin{ #block-userlogin{
pointer-events: all; pointer-events: all;
// outline: 1px solid blue; // outline: 1px solid blue;