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(){
var _activated = true;
@@ -42,6 +42,7 @@
var _nodes_centered = [];
var _nodes_centered_attractions = [];
var _playlist = [];
// var _particules = [];
// var _base_radius = 3; // nodes radius (real radius, not diametre)
@@ -75,15 +76,6 @@
// _/ // / / / / /_(__ )
// /___/_/ /_/_/\__/____/
function init(){
console.log("EdlpCorpus init()");
// console.log("document", document);
initMap();
};
function initMap(){
console.log("EdlpCorpus initMap()");
// console.log('_physics',_physics);
initCanvas();
if(_activated){
loadCorpus();
@@ -92,17 +84,15 @@
}
};
// ______
// / ____/___ _____ _ ______ ______
// / / / __ `/ __ \ | / / __ `/ ___/
// / /___/ /_/ / / / / |/ / /_/ (__ )
// \____/\__,_/_/ /_/|___/\__,_/____/
// ___
// / __|__ _ _ ___ ____ _ ___
// | (__/ _` | ' \ V / _` (_-<
// \___\__,_|_||_\_/\__,_/__/
function initCanvas(){
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', onResizeCanvas, false);
onResizeCanvas();
};
function onResizeCanvas() {
_canvas.width = window.innerWidth;
_canvas.height = window.innerHeight;
@@ -113,12 +103,11 @@
}
};
// ___ _
// / | (_)___ __ __
// / /| | / / __ `/ |/_/
// / ___ | / / /_/ /> <
// /_/ |_|_/ /\__,_/_/|_|
// /___/
// ___
// / __|___ _ _ _ __ _ _ ___
// | (__/ _ \ '_| '_ \ || (_-<
// \___\___/_| | .__/\_,_/__/
// |_|
function loadCorpus(){
// console.log('drupalSettings',drupalSettings);
// console.log('window.location', window.location);
@@ -131,24 +120,21 @@
onCorpusLoadError(jqxhr, textStatus, error);
});
};
function onCorpusLoadError(jqxhr, textStatus, error){
console.warn('corpus load failed', jqxhr.responseText);
};
function onCorpusLoaded(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
// buildParticles(data.nodes);
initNodePopup();
initArtilesLink();
initPhysics();
buildNodes(data.nodes);
initArtilesLink();
initNodePopup();
initEvents();
startAnime();
};
// ___ _ _
// | _ \ |_ _ _ __(_)__ ___
// | _/ ' \ || (_-< / _(_-<
@@ -195,11 +181,10 @@
};
// _ __ __
// / | / /___ ____/ /__ _____
// / |/ / __ \/ __ / _ \/ ___/
// / /| / /_/ / /_/ / __(__ )
// /_/ |_/\____/\__,_/\___/____/
// _ _ _
// | \| |___ __| |___ ___
// | .` / _ \/ _` / -_|_-<
// |_|\_\___/\__,_\___/__/
function buildNodes(nodes){
console.log("buildNodes", nodes);
var d;
@@ -207,6 +192,12 @@
d = i < 1 ? true : false;
// _nodes.push(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('_articles_nodes',_articles_nodes);
@@ -518,7 +509,8 @@
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(){
// pre create vars to save memory;
var d, full_rad, margin,
@@ -597,20 +589,41 @@
}
}
};
// show opened audio node
function openNode(id){
closeNode();
_node_opened_id = id;
_nodes[id].open();
}
function closeNode(){
if(_node_opened_id != -1){
_nodes[_node_opened_id].close();
_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();
};
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 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');
}
};
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);
stopScrambling();
};
function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) {
setTimeout(function(n){
@@ -680,7 +676,6 @@
}.bind(this, _nodes[i]), 1000 + Math.random()*4000);
}
};
function closeAllEntries(){
_$entrees_block_termlinks.each(function(index, el) {
if($(this).parents('li').is('.opened')){
@@ -708,7 +703,6 @@
)
);
};
function onCLickedOnArticles(e){
e.preventDefault();
$(this).toggleClass('is-active');
@@ -723,14 +717,12 @@
// });
return false;
};
function filterArticles(){
console.log('filterArticles');
for (var i = 0; i < _no_articles_nodes.length; i++) {
_no_articles_nodes[i].fade();
}
};
function resetArticlesFilter(){
console.log('resetArticlesFilter');
for (var i = 0; i < _no_articles_nodes.length; i++) {
@@ -738,12 +730,10 @@
}
};
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
// ___ _
// | __|_ _____ _ _| |_ ___
// | _|\ V / -_) ' \ _(_-<
// |___|\_/\___|_||_\__/__/
function initEvents(){
_$canvas
.on('mousemove', function(event) {
@@ -771,10 +761,11 @@
'target_node':{
'id':_node_hover_id,
'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);
// TODO: instead of directly opening the doc, create an event listener (e.g. : audio played from random)
openNode(_node_hover_id);
}else{
// console.log('corpus : click on map');
@@ -899,11 +890,10 @@
}
}
// ____ __
// / __ \___ ____ ____/ /__ _____
// / /_/ / _ \/ __ \/ __ / _ \/ ___/
// / _, _/ __/ / / / /_/ / __/ /
// /_/ |_|\___/_/ /_/\__,_/\___/_/
// ___ _
// | _ \___ _ _ __| |___ _ _
// | / -_) ' \/ _` / -_) '_|
// |_|_\___|_||_\__,_\___|_|
function render(){
_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(){
_physics.onUpdate(render);
_physics.play()
$('body').trigger('corpus-map-ready');
$('body').trigger({
'type':'corpus-map-ready',
'playlist':_playlist
});
};
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(){
var _activated = true;
@@ -42,6 +42,7 @@
var _nodes_centered = [];
var _nodes_centered_attractions = [];
var _playlist = [];
// var _particules = [];
// var _base_radius = 3; // nodes radius (real radius, not diametre)
@@ -75,15 +76,6 @@
// _/ // / / / / /_(__ )
// /___/_/ /_/_/\__/____/
function init(){
console.log("EdlpCorpus init()");
// console.log("document", document);
initMap();
};
function initMap(){
console.log("EdlpCorpus initMap()");
// console.log('_physics',_physics);
initCanvas();
if(_activated){
loadCorpus();
@@ -92,17 +84,15 @@
}
};
// ______
// / ____/___ _____ _ ______ ______
// / / / __ `/ __ \ | / / __ `/ ___/
// / /___/ /_/ / / / / |/ / /_/ (__ )
// \____/\__,_/_/ /_/|___/\__,_/____/
// ___
// / __|__ _ _ ___ ____ _ ___
// | (__/ _` | ' \ V / _` (_-<
// \___\__,_|_||_\_/\__,_/__/
function initCanvas(){
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', onResizeCanvas, false);
onResizeCanvas();
};
function onResizeCanvas() {
_canvas.width = window.innerWidth;
_canvas.height = window.innerHeight;
@@ -113,12 +103,11 @@
}
};
// ___ _
// / | (_)___ __ __
// / /| | / / __ `/ |/_/
// / ___ | / / /_/ /> <
// /_/ |_|_/ /\__,_/_/|_|
// /___/
// ___
// / __|___ _ _ _ __ _ _ ___
// | (__/ _ \ '_| '_ \ || (_-<
// \___\___/_| | .__/\_,_/__/
// |_|
function loadCorpus(){
// console.log('drupalSettings',drupalSettings);
// console.log('window.location', window.location);
@@ -131,24 +120,21 @@
onCorpusLoadError(jqxhr, textStatus, error);
});
};
function onCorpusLoadError(jqxhr, textStatus, error){
console.warn('corpus load failed', jqxhr.responseText);
};
function onCorpusLoaded(data){
console.log('corpus loaded : data', data);
// console.log('first node', data.nodes[0]);
// buildParticles(data.nodes);
initNodePopup();
initArtilesLink();
initPhysics();
buildNodes(data.nodes);
initArtilesLink();
initNodePopup();
initEvents();
startAnime();
};
// ___ _ _
// | _ \ |_ _ _ __(_)__ ___
// | _/ ' \ || (_-< / _(_-<
@@ -195,11 +181,10 @@
};
// _ __ __
// / | / /___ ____/ /__ _____
// / |/ / __ \/ __ / _ \/ ___/
// / /| / /_/ / /_/ / __(__ )
// /_/ |_/\____/\__,_/\___/____/
// _ _ _
// | \| |___ __| |___ ___
// | .` / _ \/ _` / -_|_-<
// |_|\_\___/\__,_\___/__/
function buildNodes(nodes){
console.log("buildNodes", nodes);
var d;
@@ -207,6 +192,12 @@
d = i < 1 ? true : false;
// _nodes.push(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('_articles_nodes',_articles_nodes);
@@ -518,7 +509,8 @@
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(){
// pre create vars to save memory;
var d, full_rad, margin,
@@ -597,20 +589,41 @@
}
}
};
// show opened audio node
function openNode(id){
closeNode();
_node_opened_id = id;
_nodes[id].open();
}
function closeNode(){
if(_node_opened_id != -1){
_nodes[_node_opened_id].close();
_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();
};
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 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');
}
};
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);
stopScrambling();
};
function stopScrambling(){
for (var i = 0; i < _nodes.length; i++) {
setTimeout(function(n){
@@ -680,7 +676,6 @@
}.bind(this, _nodes[i]), 1000 + Math.random()*4000);
}
};
function closeAllEntries(){
_$entrees_block_termlinks.each(function(index, el) {
if($(this).parents('li').is('.opened')){
@@ -708,7 +703,6 @@
)
);
};
function onCLickedOnArticles(e){
e.preventDefault();
$(this).toggleClass('is-active');
@@ -723,14 +717,12 @@
// });
return false;
};
function filterArticles(){
console.log('filterArticles');
for (var i = 0; i < _no_articles_nodes.length; i++) {
_no_articles_nodes[i].fade();
}
};
function resetArticlesFilter(){
console.log('resetArticlesFilter');
for (var i = 0; i < _no_articles_nodes.length; i++) {
@@ -738,12 +730,10 @@
}
};
// ______ __
// / ____/ _____ ____ / /______
// / __/ | | / / _ \/ __ \/ __/ ___/
// / /___ | |/ / __/ / / / /_(__ )
// /_____/ |___/\___/_/ /_/\__/____/
// ___ _
// | __|_ _____ _ _| |_ ___
// | _|\ V / -_) ' \ _(_-<
// |___|\_/\___|_||_\__/__/
function initEvents(){
_$canvas
.on('mousemove', function(event) {
@@ -771,10 +761,11 @@
'target_node':{
'id':_node_hover_id,
'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);
// TODO: instead of directly opening the doc, create an event listener (e.g. : audio played from random)
openNode(_node_hover_id);
}else{
// console.log('corpus : click on map');
@@ -899,11 +890,10 @@
}
}
// ____ __
// / __ \___ ____ ____/ /__ _____
// / /_/ / _ \/ __ \/ __ / _ \/ ___/
// / _, _/ __/ / / / /_/ / __/ /
// /_/ |_|\___/_/ /_/\__,_/\___/_/
// ___ _
// | _ \___ _ _ __| |___ _ _
// | / -_) ' \/ _` / -_) '_|
// |_|_\___|_||_\__,_\___|_|
function render(){
_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(){
_physics.onUpdate(render);
_physics.play()
$('body').trigger('corpus-map-ready');
$('body').trigger({
'type':'corpus-map-ready',
'playlist':_playlist
});
};
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);
$field_son_values = $node->get('field_son')->getValue();
$son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
$son_file = \Drupal\file\Entity\File::load($son_fid);
$son_url = null;
$audio_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
$audio_file = \Drupal\file\Entity\File::load($audio_fid);
$audio_url = null;
// 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_url = file_create_url($son_uri);
$son_uri = $audio_file->getFileUri();
$audio_url = file_create_url($son_uri);
// has article ?
$article_value = $node->body->getValue();
@@ -83,8 +83,8 @@ class CorpusController extends ControllerBase {
"title" => $node->get('title')->getString(),
"description" => $description,
"entrees" => $entrees,
// "son_fid" => $son_fid,
"son_url" => $son_url,
// "son_fid" => $audio_fid,
"audio_url" => $audio_url,
"has_article" => $has_article,
"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(){
var _$body = $('body');
var _is_front = _$body.is('.path-frontpage');
var _$corpus_canvas;
var _$content_container = $('main[role="main"]>.layout-content');
var _$ajaxLinks;
var _audio_player;
var _randomPlayer;
// ___ _ _
// |_ _|_ _ (_) |_
// | || ' \| | _|
// |___|_||_|_|\__|
function init(){
console.log("EdlpTheme init()");
// TODO: redirect all no-front pages to front with write hash
_$body.on('corpus-map-ready', onCorpusMapReady);
initAudioPlayer();
_audio_player = new AudioPlayer();
initAjaxLinks();
@@ -23,12 +28,14 @@
initProductions();
}
initScrollbars();
// initScrollbars();
initEvents();
};
// ___ _
// | __|_ _____ _ _| |_ ___
// | _|\ V / -_) ' \ _(_-<
// |___|\_/\___|_||_\__/__/
function initEvents(){
$('body')
.on('on-studio-chutier-updated', function(e){
@@ -52,10 +59,6 @@
// 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://www.binarytides.com/using-html5-audio-element-javascript/
//
function initAudioPlayer(){
_audio_player = new AudioPlayer();
};
function AudioPlayer(){
var that = this;
this.fid;
@@ -88,6 +91,16 @@
this.hideTimer = false;
this.hideTimeMS = 10000;
// history
this.next_node = null;
this.currentHistoricIndex = null;
this.historic = [];
// object events
this.event_handlers = {
'audio-ended':[]
};
this.init();
};
AudioPlayer.prototype = {
@@ -108,37 +121,31 @@
true);
}
// init btns events
this.$previous.on('click', this.playPrevious.bind(this));
this.$playpause.on('click', this.togglePlayPause.bind(this));
this.$next.on('click', this.playNext.bind(this));
// TODO: previous and next btns
},
openDocument(node){
openDocument(node, next_node){
console.log('AudioPlayer openDocument', node);
this.setSRC(node.audio_url);
this.loadNode(node.nid);
this.historic.push(node);
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
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('');
launch(){
this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
this.loadNode(this.historic[this.currentHistoricIndex].nid);
this.showHidePreviousBtn();
this.showHideNextBtn();
this.show();
},
// audio functions
setSRC(url){
// console.log('AudioPlayer setSRC : url', url);
this.clearTimeOutToHide();
this.audio.src = url;
this.show();
},
onLoadedmetadata(){
var rem = parseInt(this.audio.duration, 10),
@@ -165,7 +172,18 @@
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){
this.audio.play();
}else{
@@ -190,13 +208,48 @@
this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
},
onEnded(){
this.emmit('audio-ended');
this.stop();
},
stop(){
this.$container.removeClass('is-playing');
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
show(){
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(){
this.clearTimeOutToHide();
this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
@@ -210,17 +263,29 @@
this.$container.removeClass('visible');
// trigger highlighted node remove on corpus map
_$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(){
console.log("initScrollbars");
// console.log("initScrollbars");
// TODO: find a better js scroll than overlayScrollbars which does not handle well max-height + overflow-y:auto;
// $('.os-scroll').overlayScrollbars({
// overflowBehavior:{
@@ -261,7 +326,6 @@
}
});
};
function onClickAjaxLink(e){
e.preventDefault();
var $link = $(this);
@@ -326,13 +390,11 @@
return false;
};
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$link.removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded : data', data);
_$body.removeClass('ajax-loading');
@@ -386,7 +448,7 @@
// \___\___/_| | .__/\_,_/__/
// |_|
function onCorpusMapReady(e){
console.log('theme : onCorpusReady');
console.log('theme : onCorpusReady', e);
_$corpus_canvas = $('canvas#corpus-map');
_$corpus_canvas
.on('corpus-cliked-on-map', function(e) {
@@ -398,9 +460,77 @@
_audio_player.openDocument(e.target_node);
});
_randomPlayer = new RandomPlayer(e.playlist);
_$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;
margin: 0;
overflow: hidden; }
footer .block.random-player {
pointer-events: all; }
footer .block.random-player a {
background-color: inherit;
cursor: pointer; }
footer #block-userlogin {
pointer-events: all;
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(){
var _$body = $('body');
var _is_front = _$body.is('.path-frontpage');
var _$corpus_canvas;
var _$content_container = $('main[role="main"]>.layout-content');
var _$ajaxLinks;
var _audio_player;
var _randomPlayer;
// ___ _ _
// |_ _|_ _ (_) |_
// | || ' \| | _|
// |___|_||_|_|\__|
function init(){
console.log("EdlpTheme init()");
// TODO: redirect all no-front pages to front with write hash
_$body.on('corpus-map-ready', onCorpusMapReady);
initAudioPlayer();
_audio_player = new AudioPlayer();
initAjaxLinks();
@@ -23,12 +28,14 @@
initProductions();
}
initScrollbars();
// initScrollbars();
initEvents();
};
// ___ _
// | __|_ _____ _ _| |_ ___
// | _|\ V / -_) ' \ _(_-<
// |___|\_/\___|_||_\__/__/
function initEvents(){
$('body')
.on('on-studio-chutier-updated', function(e){
@@ -52,10 +59,6 @@
// 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://www.binarytides.com/using-html5-audio-element-javascript/
//
function initAudioPlayer(){
_audio_player = new AudioPlayer();
};
function AudioPlayer(){
var that = this;
this.fid;
@@ -88,6 +91,16 @@
this.hideTimer = false;
this.hideTimeMS = 10000;
// history
this.next_node = null;
this.currentHistoricIndex = null;
this.historic = [];
// object events
this.event_handlers = {
'audio-ended':[]
};
this.init();
};
AudioPlayer.prototype = {
@@ -108,37 +121,31 @@
true);
}
// init btns events
this.$previous.on('click', this.playPrevious.bind(this));
this.$playpause.on('click', this.togglePlayPause.bind(this));
this.$next.on('click', this.playNext.bind(this));
// TODO: previous and next btns
},
openDocument(node){
openDocument(node, next_node){
console.log('AudioPlayer openDocument', node);
this.setSRC(node.audio_url);
this.loadNode(node.nid);
this.historic.push(node);
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
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('');
launch(){
this.setSRC(this.historic[this.currentHistoricIndex].audio_url);
this.loadNode(this.historic[this.currentHistoricIndex].nid);
this.showHidePreviousBtn();
this.showHideNextBtn();
this.show();
},
// audio functions
setSRC(url){
// console.log('AudioPlayer setSRC : url', url);
this.clearTimeOutToHide();
this.audio.src = url;
this.show();
},
onLoadedmetadata(){
var rem = parseInt(this.audio.duration, 10),
@@ -165,7 +172,18 @@
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){
this.audio.play();
}else{
@@ -190,13 +208,48 @@
this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
},
onEnded(){
this.emmit('audio-ended');
this.stop();
},
stop(){
this.$container.removeClass('is-playing');
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
show(){
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(){
this.clearTimeOutToHide();
this.hideTimer = setTimeout(this.hide.bind(this), this.hideTimeMS);
@@ -210,17 +263,29 @@
this.$container.removeClass('visible');
// trigger highlighted node remove on corpus map
_$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(){
console.log("initScrollbars");
// console.log("initScrollbars");
// TODO: find a better js scroll than overlayScrollbars which does not handle well max-height + overflow-y:auto;
// $('.os-scroll').overlayScrollbars({
// overflowBehavior:{
@@ -261,7 +326,6 @@
}
});
};
function onClickAjaxLink(e){
e.preventDefault();
var $link = $(this);
@@ -326,13 +390,11 @@
return false;
};
function onAjaxLinkLoadError(jqxhr, textStatus, error, $link, sys_path){
console.warn('ajaxlink load failed for '+sys_path+' : '+error, jqxhr.responseText);
$link.removeClass('ajax-loading');
_$body.removeClass('ajax-loading');
};
function onAjaxLinkLoaded(data, $link, sys_path){
console.log('ajax link loaded : data', data);
_$body.removeClass('ajax-loading');
@@ -386,7 +448,7 @@
// \___\___/_| | .__/\_,_/__/
// |_|
function onCorpusMapReady(e){
console.log('theme : onCorpusReady');
console.log('theme : onCorpusReady', e);
_$corpus_canvas = $('canvas#corpus-map');
_$corpus_canvas
.on('corpus-cliked-on-map', function(e) {
@@ -398,9 +460,77 @@
_audio_player.openDocument(e.target_node);
});
_randomPlayer = new RandomPlayer(e.playlist);
_$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;
}
}
// #block-fancylogin{
// pointer-events: all;
//
// }
.block.random-player{
pointer-events: all;
a{
background-color: inherit;
cursor: pointer;
}
}
#block-userlogin{
pointer-events: all;
// outline: 1px solid blue;