')
+ .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);
diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
index 31b87ed79..cc6586b50 100644
--- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
+++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
@@ -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;
diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js
index d664ac9bf..5fd43076a 100644
--- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js
+++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js
@@ -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('
'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'');
},
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 = $('
').html('🔀').addClass('random-player-btn');
+ this.init()
+ };
+ RandomPlayer.prototype = {
+ init(){
+ // this.shuffle();
+ $('')
+ .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);
diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
index 2c2685be4..1fdbfc173 100644
--- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss
+++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss
@@ -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;