fixed studio and compoplayer init process

sites/all/modules/figli/edlp_studio/assets/js/edlp_studio.js

@@ -3,7 +3,7 @@
   var _settings = drupalSettings.edlp_studio;
   var $composer;
 
-  // audio play is handled by edlp_theme 
+  // audio play is handled by edlp_theme
 
   function init(){
     console.log('Studio Init');
@@ -14,14 +14,20 @@
   function initEvents(){
     $('body')
       .on('new-audio-cartel-loaded', initAjaxChutierLinks)
-      .on('new-content-ajax-loaded', initStudio);
+      .on('new-content-ajax-loaded', initStudio)
+      .on('all-modal-closed', initStudio);
   };
 
   function initStudio(){
-    $composer = $('.composition_ui .composer', '#studio-ui');
+    if($('#studio-ui').length){
-    initAjaxChutierLinks();
+      $composer = $('.composition_ui .composer', '#studio-ui');
-    initAjaxCompoLinks();
+      initAjaxChutierLinks();
-    initDragAndDropUI();
+      initAjaxCompoLinks();
+      initDragAndDropUI();
+      $('body').trigger({'type':'studio-initialized'});
+    }else{
+      $('body').trigger({'type':'studio-not-active'});
+    }
   }
 
   //   ___ _        _   _           _  _         _       _    _      _

sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js

@@ -45,6 +45,12 @@
     function initEvents(){
       $('body')
         .on('on-studio-chutier-updated', initAjaxLinks)
+        .on('studio-initialized', function(e){
+          _compoPlayer.initControls();
+        })
+        .on('studio-not-active', function(e){
+          _compoPlayer.deactivate();
+        })
         .on('on-studio-compo-updated', function(e){
           initAjaxLinks();
           _compoPlayer.refresh();
@@ -280,7 +286,6 @@
       _$body.attr('corpus-map', 'ready');
     }
 
-
     //    _          _ _
     //   /_\ _  _ __| (_)___
     //  / _ \ || / _` | / _ \
@@ -637,11 +642,14 @@
     //  \___\___/_|_|_| .__/\___/_| |_\__,_|\_, \___|_|
     //                |_|                   |__/
     function CompoPlayer(){
+      this.active = false;
       this.playing = false;
       this.paused = false;
       this.playlist = [];
       this.current_index = 0;
+      this.$composer = null;
       this.$compo = null;
+      this.$controls = null;
       this.init();
     };
     CompoPlayer.prototype = {
@@ -655,26 +663,30 @@
           .on('audio-ended', this.onAudioPlayerEnded.bind(this));
           // .on('audio-play-next', this.onAudioPlayNext.bind(this));
 
+        // this.newCompo();
+      },
+      initControls(){
+        console.log('CompoPlayer initControls()');
+        this.$composer = $('.composition_ui .composer');
+        this.$controls = $('.composition_ui .composer .compo-player-controls');
+
+        this.$previous = $('<div>').addClass('previous')
+          .on('click', this.prev.bind(this))
+          .appendTo(this.$controls);
+        this.$playpause = $('<div>').addClass('play-pause')
+          .on('click', this.togglePlayPause.bind(this))
+          .appendTo(this.$controls);
+        this.$next = $('<div>').addClass('next')
+          .on('click', this.next.bind(this))
+          .appendTo(this.$controls);
+
+        this.active = true; // TODO: set active false
+
         this.newCompo();
       },
       newCompo(){
         console.log('CompoPlayer newCompo()');
-        // $('.composition_ui .composer .composition .field--name-documents')
-        this.$composer = $('.composition_ui .composer');
         this.$compo = $('.composition_ui .composer .composition');
-        this.$controls = $('.composition_ui .composer .compo-player-controls');
-        if(!this.$controls.is('.ready')){
-          this.$previous = $('<div>').addClass('previous')
-            .on('click', this.prev.bind(this))
-            .appendTo(this.$controls);
-          this.$playpause = $('<div>').addClass('play-pause')
-            .on('click', this.togglePlayPause.bind(this))
-            .appendTo(this.$controls);
-          this.$next = $('<div>').addClass('next')
-            .on('click', this.next.bind(this))
-            .appendTo(this.$controls);
-          this.$controls.addClass('ready');
-        }
         this.refresh();
       },
       refresh(){
@@ -810,6 +822,10 @@
         }
         return this;
       },
+      deactivate(){
+        this.stop();
+        this.active = false;
+      },
       // _audioPlayer events
       onAudioOpenDocument(args){
         if(args.caller !== this){
@@ -887,6 +903,7 @@
       // TODO: animate the remove
       _$row.html('');
       _$ajaxLinks.removeClass('is-active');
+      _$body.trigger({'type':'all-modal-closed'});
     };
 
     init();

sites/all/themes/custom/edlptheme/assets/scripts/main.js

@@ -45,6 +45,12 @@
     function initEvents(){
       $('body')
         .on('on-studio-chutier-updated', initAjaxLinks)
+        .on('studio-initialized', function(e){
+          _compoPlayer.initControls();
+        })
+        .on('studio-not-active', function(e){
+          _compoPlayer.deactivate();
+        })
         .on('on-studio-compo-updated', function(e){
           initAjaxLinks();
           _compoPlayer.refresh();
@@ -280,7 +286,6 @@
       _$body.attr('corpus-map', 'ready');
     }
 
-
     //    _          _ _
     //   /_\ _  _ __| (_)___
     //  / _ \ || / _` | / _ \
@@ -637,11 +642,14 @@
     //  \___\___/_|_|_| .__/\___/_| |_\__,_|\_, \___|_|
     //                |_|                   |__/
     function CompoPlayer(){
+      this.active = false;
       this.playing = false;
       this.paused = false;
       this.playlist = [];
       this.current_index = 0;
+      this.$composer = null;
       this.$compo = null;
+      this.$controls = null;
       this.init();
     };
     CompoPlayer.prototype = {
@@ -655,26 +663,30 @@
           .on('audio-ended', this.onAudioPlayerEnded.bind(this));
           // .on('audio-play-next', this.onAudioPlayNext.bind(this));
 
+        // this.newCompo();
+      },
+      initControls(){
+        console.log('CompoPlayer initControls()');
+        this.$composer = $('.composition_ui .composer');
+        this.$controls = $('.composition_ui .composer .compo-player-controls');
+
+        this.$previous = $('<div>').addClass('previous')
+          .on('click', this.prev.bind(this))
+          .appendTo(this.$controls);
+        this.$playpause = $('<div>').addClass('play-pause')
+          .on('click', this.togglePlayPause.bind(this))
+          .appendTo(this.$controls);
+        this.$next = $('<div>').addClass('next')
+          .on('click', this.next.bind(this))
+          .appendTo(this.$controls);
+
+        this.active = true; // TODO: set active false
+
         this.newCompo();
       },
       newCompo(){
         console.log('CompoPlayer newCompo()');
-        // $('.composition_ui .composer .composition .field--name-documents')
-        this.$composer = $('.composition_ui .composer');
         this.$compo = $('.composition_ui .composer .composition');
-        this.$controls = $('.composition_ui .composer .compo-player-controls');
-        if(!this.$controls.is('.ready')){
-          this.$previous = $('<div>').addClass('previous')
-            .on('click', this.prev.bind(this))
-            .appendTo(this.$controls);
-          this.$playpause = $('<div>').addClass('play-pause')
-            .on('click', this.togglePlayPause.bind(this))
-            .appendTo(this.$controls);
-          this.$next = $('<div>').addClass('next')
-            .on('click', this.next.bind(this))
-            .appendTo(this.$controls);
-          this.$controls.addClass('ready');
-        }
         this.refresh();
       },
       refresh(){
@@ -810,6 +822,10 @@
         }
         return this;
       },
+      deactivate(){
+        this.stop();
+        this.active = false;
+      },
       // _audioPlayer events
       onAudioOpenDocument(args){
         if(args.caller !== this){
@@ -887,6 +903,7 @@
       // TODO: animate the remove
       _$row.html('');
       _$ajaxLinks.removeClass('is-active');
+      _$body.trigger({'type':'all-modal-closed'});
     };
 
     init();