Trying to call javascript functions from a jslib (similar to WebGLMovieTexture)

Unity Engine
1

This isn’t exactly a unity issue just probably more a syntax problem.

I’m trying to launch a popup youtube video on top of the webgl content from with in Unity C#. Originally I was thinking of using window.open in javascript but this trigger the popup blocker.

As an example I have the following in my index.html

<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a><script type="text/javascript">
    $(document).ready(function() {
        $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 700,
            type: 'iframe', 
            mainClass: 'mfp-fade',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
        });
    });
</script>

I’m using Magnific Popup (GitHub - dimsemenov/Magnific-Popup: Light and responsive lightbox script with focus on performance.) and the above link works as a test. But I’m trying to trigger the same functionality from inside a .jslib file.

var LibraryWebGLPopup = {

WebGLPopupShowURL: function(url)
{
    var str = Pointer_stringify(url);

    magnificPopup({
          disableOn: 700,
          type: 'iframe',
          mainClass: 'mfp-fade',
          removalDelay: 160,
          preloader: false,
          fixedContentPos: false
        });
},
};
mergeInto(LibraryManager.library, LibraryWebGLPopup);

I’ve getting an exception / error of “ReferenceError: magnificPopup is not defined” so I know unity is calling the correct function in my .jslib but I’m not sure if and how I can call ‘magnificPopup’ or not.

Any suggestions?

2

I ended up doing this in a much simpler way which is working really well. I’ll document it a bit here in case someone for whatever reason wants to do something similar in the future.

I’d recommend making your own html template and placing it in ‘Assets/WebGLTemplates’ that way you aren’t overwriting your changes each time you deploy. I’m using ‘Magnific Popup’ to create and show the iframe as I didn’t really have the time and I like the way this looks.

Add the following lines to your in index.html (this assumes you’ve placed magnific plugin in your TemplateData folder)

    <link href="TemplateData/magnific/magnific-popup.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="TemplateData/magnific/jquery.magnific-popup.js"></script>

Add the function to show the popup somewhere in your in index.html

<script type="text/javascript">

    function ShowVideoPopup( arg ) {
      $.magnificPopup.open({

      callbacks: {
        close: function() {
          // Will fire when popup is closed
          SendMessage("Game", "VideoPopupClosed", "");
        }
      },

      items: {
        src: arg,
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false,
      },
   
      type: 'iframe',
      closeOnContentClick: false,
      closeOnBgClick: true,
      closeBtnInside: false,
      showCloseBtn: true,
      });
    }
  </script>

This will call the unity function 'VideoPopupClosed" on an object called “Game” using unity’s SendMessage so you can detect when the popup is closed.

To call the javascript from unity use something like

public static void PlayVideoInWebIFrame(string url) {
    Application.ExternalCall("ShowVideoPopup", url);
}

Just thought I’d document this a bit as it could be used for anything you want to show in an iframe and Magnific popup seems very flexible.

1 Like