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/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;