Opus Pro Features:
This feature allows HTML5 developers to include JavaScript directly in Opus Pro publications and launch JavaScript actions from any object. It means the benefits of a flexible layout and the quick, easy web-design which Opus Pro offers, can be combined easily with the power of custom JavaScript.
You can add the JavaScript action to any trigger in Opus Pro, just like any other action. It is similar to the OpusScript object and is provided on the Programming tab.
Once added to your trigger simply type or paste the JavaScript you want to run in the box provided. In this example the script runs the responsive_update function with the parameters 550 and 77 which that function uses to set the width and height of a DIV in which the Opus resizable content is placed.
If you want to create your own functions to call with your JavaScript action you can include these in your Opus Pro publication too. There is an option in the Publish Settings to add content which will be inserted into the <HEAD> section of the HTML. Simply paste or type your script into the box provided. Here we are adding the responsive_update function we called in the Javascript slider example.
Note that when putting Javascript in the <HEAD> section you should put script tags at the beginning and the end.
Entries in the <HEAD> section of Publish Settings will only be included when publishing as a single page or as multiple pages. For content published to Single DIV you will need to add the function to the <HEAD> section of the HTML your are including your Opus content in.
You can also get information back to Opus variables from Javascript function on your web page whether they are Opus functions or not. In the interactive video example we use a Javascript action to get the current position of the video being played using the currentTime property and put that in a variable called currTime which we have added to our Opus publication in the usual way - see below.
Note that as the readout uses an Opus variable we need to identify the variable currTime as belonging to the _DWPub object when accessing it using the Javascript action.
You can do the same thing with OpusScript by using the syntax 'variable=window.function()' so the script would be:
currTime=window.getVidTime()
We can use the same process to get information we might often want to use on a web page such as the date or the screen width of the device being used - useful for displaying a different page of your content for mobile users.
In some instances you will want to use Javascript to access Opus objects. In particular you may want to access information in variables or write custom controls for video and audio objects. However, Opus objects don't exist on the page in quite the same way as standard HTML5 elements as they are all part of the Opus publication HTML component; _DWPub.
Objects can be referred to by the label
_DWPub.PageName.ObjectName
and if there is additional content to that object it can be accessed using
_DWPub.PageName.ObjectName.element() for graphical objects,
_DWPub.PageName.ObjectName.videoElement() for video
_DWPub.PageName.ObjectName.audioElement() for audio.
Note: Users with versions prior to Opus Pro v9.6 should drop the _DWPub and use the syntax PageName.ObjectName.m_audioElement and ...m_videoElement without brackets in both cases.
This allows you to create actions in Opus to access properties of HTML5 components such as the current position of video or tell a sound file to play using the HTML properties (details available W3Schools) though not all may be appropriate to Opus publication elements.
In this example (used in the Peeling Productions showcase publication) we have added a Javascript function to the HTML header which gets the current time of a video object called SGInVid on IntroPg page of our publication and returns that value to the script calling the function.
Then on the page itself we have a simple Javascript action on a tenth-of-a-second ticker trigger, to run that function and put the time into an Opus publication variable called currTime. This variable is displayed in a text object on the page of our publication as any other variable would be.
On each of the buttons in the Peeling Productions example we need to reset the current video so that it will restart when we return to that page. The best way to reset a video in HTML5 is to set the currentTime propertie to 0 and "load" the video. The resulting Javascript action looks like this.
As you can see from the examples above you can use Javascript to update Opus variables which are displayed on screen or used in other ways - as in the currTime variable above.
You can also set the value of Javascript variables as illustrated in the reset video example above where we set the currentTime property of the video to be 0.
We've provided a basic Opus Pro publication illustrating some of these examples which you can download and adapt for your own publications. The publication includes playing an audio file chosen by the user and how to get the duration and current position for the chosen file.
download JavaScript Examples publication - requires Opus Pro v9.6 or betterOther javascript functions for use with Opus and other web design tools are provided in the Opus Xtras page.