Why isn't this Javascript working?

[ryan schar]

Hello,

I am using Captivate 9.

I am trying to have the project pause when the user opens the TOC, and play again when he closes it or makes a selection in the toc.

Here is the code:

window.addEventListener("moduleReadyEvent", function(evt) {          window.cpAPIEventEmitter.addEventListener('CPAPI_VARIABLEVALUECHANGED',function(e){                                      if(e.Data.oldVal===0){               

          window.cpAPIInterface.setVariableValue("cpCmndResume", 0);           

          window.cpAPIInterface.setVariableValue("cpCmndPause", 1);           

          console.log('opened TOC')                         }        

     else if(e.Data.oldVal===1){               

          window.cpAPIInterface.setVariableValue("cpCmndResume", 1);            

          window.cpAPIInterface.setVariableValue("cpCmndPause", 0);            

          console.log('closed TOC')                   }    

},'cpCmndTOCVisible') });

The right if-conditions are true when they are suppposed to be, but I can't seem to the playbar to stop and continue.

[TLCMediaDesign]

It's because the 'CPAPI_VARIABLEVALUECHANGED' event only works with "info" variables, not "cmnd" variables.

You would need to add an event listener to the toc buttons and toggle that way. This code will do the trick. It doesn't listen for a TOC button on the playbar, only the Expand/Collapse Icons at the top:

window.addEventListener( 'moduleReadyEvent', function ( e )
{
var tocIcons = document.getElementsByClassName('tocExpandCollapse')

for ( var i = 0; i < tocIcons.length; i++ )
{
  tocIcons.addEventListener("click", checkTOC, false);
}
});

function checkTOC()
{                                
 
if ( window.cpCmndTOCVisible == true)
{
   window.cpCmndPause = 1;                             
}
else
{
  window.cpCmndResume = 1;                
}
}

[ryan schar]

Great. Thank you!

[ryan schar]

Hi TLCMediaDesign,

I am trying out this solution, and I am still having some issues.

To give you some more background, my TOC toggle button is a button on the master slide.  I am using a setTimeout to access the button because it doesnt seem to be there yet when moduleReadyEvent is called.  I have added a text caption to display the current frame count to my slide for testing purposes.  Even this simple toggle of play / pause code doesnt work.  The frame count keeps incrementing.

Here is a look at my code so far:

window.addEventListener("moduleReadyEvent", function(evt) {

window.setTimeout(function(){

    var toggleButton = document.getElementById('si6333');

    var playing = true;

    toggleButton.addEventListener('click',function(){

        if (playing){

            window.cpCmndPause = 1;

            playing = false;

        }

        else{

            window.cpCmndResume = 1;

            playing = true;       

        }

    })

},1000)

});

Any ideas? 

[TLCMediaDesign]

I tried your code and it worked for me.

All I had in the file I tried was the smartshape button on the master slide with "no action" selected.

What else do you have on the slides?

[ryan schar]

Hello,

I am testing a slight alternative to this code, and I realized the code does work on the first slide, but the second the project crosses into the second slide, it stops working.  I was watching the dev console, and from slide two on, I dont get the 'clicked' log anymore. It seems that my event listener is removed when the project crosses to slide two.   Slide two is now just a completely blank slide I just added for testing. There is nothing on it other than the objects from slide one that are set to show for the whole project.

Here is the slightly altered code

window.addEventListener("moduleReadyEvent", function(evt) {

window.setTimeout(function(){

    var toggleButton = document.getElementById('si6333');

    var playing = true;

    toggleButton.addEventListener('click',function(){

        console.log('click')

        if (playing){

            window.cpAPIInterface.setVariableValue("cpCmndPause", 1);

            playing = false;

        }

        else{

            window.cpAPIInterface.setVariableValue("cpCmndResume", 1);

            playing = true;       

        }

    })

},1000)

});

[TLCMediaDesign]

I think it is because the object is getting nullified, then recreated on every slide, even though it has the same id. I modified the code and added listeners for the project to pause and play and toggled the "playing" variable there. No matter what pauses the slide, the variable then toggles. Change the element ID, mine was "si2447"

var interval;
var toggleButton;
var playing = true;

var interfaceObj, eventEmitterObj;

window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners()
});

function initializeEventListeners()
{
eventEmitterObj.addEventListener( 'CPAPI_MOVIEPAUSE', checkPause, false );  
eventEmitterObj.addEventListener( 'CPAPI_MOVIERESUME', checkResume, false ); 

eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
{        
  interval = setInterval( checkExists, 100 )
});   
}

function checkPause( )
{
playing = false;
}

function checkResume( )
{
playing = true; 
}

function checkExists( )
{
if ( document.getElementById('si2447') )
{
  clearInterval( interval );
  interval = null;
 
  document.getElementById('si2447').addEventListener('click',function() 
  {   
   if ( playing )
   {
             window.cpCmndPause = 1;             
   }
         else
   {
             window.cpCmndResume = 1;                   
   }
     });
}
}

[ryan schar]

Hello,

wow, yea that seems to do the trick ...  I added some code (lines 149, 179, and 185 in the image) so that the TOC opens as well when the button is pushed and closes when the button is pushed again.  I will also add code so that the play and pause buttons (actually two "states" of the "same" button on my master) are shown at the correct time.

This is the same code thats in the image:

var interval;

var toggleButton;

var playing = true;

var interfaceObj, eventEmitterObj;

window.addEventListener( 'moduleReadyEvent', function ( e )

{

interfaceObj = e.Data;

eventEmitterObj = interfaceObj.getEventEmitter();

initializeEventListeners()

});

function initializeEventListeners()

{

eventEmitterObj.addEventListener( 'CPAPI_MOVIEPAUSE', checkPause, false );  

eventEmitterObj.addEventListener( 'CPAPI_MOVIERESUME', checkResume, false ); 

eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )

{        

  interval = setInterval( checkExists, 100 )

  // added - hide TOC and resume after user makes selection in TOC

  if(window.cpCmndTOCVisible){

    window.cpCmndResume = 1;

    window.cpCmndTOCVisible = false;

    playing = true;

  }

});   

}

function checkPause( )

{

playing = false;

}

function checkResume( )

{

playing = true; 

}

function checkExists( )

{

if ( document.getElementById('si6333') )

{

  clearInterval( interval );

  interval = null;

  document.getElementById('si6333').addEventListener('click',function() 

  {   

   if ( playing )

   {

             window.cpCmndPause = 1;

             //added - show TOC

             window.cpCmndTOCVisible = true;             

   }

         else

   {

             window.cpCmndResume = 1;

             //added - hide TOC

             window.cpCmndTOCVisible = false;                    

   }

     });

}

}

[TLCMediaDesign]

Is there a question here or are you stating that everything is working now.

Another, shorter way of doing this is to add the CPAPI_VARIABLEVALUECHANGED listener for the cpInfoCurrentFrame, which is like an enterframe listener in AS3.

This way you can monitor any variable.

[ryan schar]

Ok. Great, thank you. There are no more questions. I just posted that in

case someone else wanted to use it at some point.

On Tue, Nov 15, 2016 at 12:30 PM, TLCMediaDesign <forums_noreply@adobe.com>

[TLCMediaDesign]

Also, it's better to use the setInterval to check when the object is actually in the DOM. That way it is always caught.