Loading a video inside a toggler through Alloy UI (Liferay 6.2)

Question

I am trying to display a video player inside a modal window in Liferay 6.2 through Alloy UI, with no luck. I have a simple portlet with the following structure in view.jsp:

<div id="myToggler">
    <button class="header toggler-header-collapsed">Show Video</button>
    <p class="content toggler-content-collapsed">
        <div id="myVideo"></div>
    </p>
</div>

In the main JavaScript file, main.js, the toggler is loaded into the #myToggler layer, and the video is loaded into the #myVideo layer, which is, in fact, inside the toggler. The video is not loaded into the toggler, though.

YUI ( ).use (
    'aui-toggler',
    'aui-video',

    function (Y) {
        new Y.TogglerDelegate ({
            animated: true,
            closeAllOnExpand: true,
            container: '#myToggler',
            content: '.content',
            header: '.header',
            transition: {
                duration: .5,
                easing: 'cubic-bezier'
            }
        }).render ( );

        new Y.Video ({
            boundingBox: '#myVideo',
            ogvUrl: 'http://alloyui.com/video/movie.ogg',
            url: 'http://alloyui.com/video/movie.mp4'
        }).render ( );
    }
);

So, how can I load the video inside the toggler? Or, for that matter, how can I load any arbitrary Alloy UI widget inside another (e.g. a video player inside a modal window)?

Answer 1

When I run your code I get:

Uncaught TypeError: undefined is not a function

This is due to the fact that, TogglerDelegate does not have a render() method. Also, you should not put a div into a p element. Instead, just make the toggler content into a div. See below for a runnable example:

YUI ( ).use (
    'aui-toggler',
    'aui-video',

    function (Y) {
        new Y.TogglerDelegate ({
            animated: true,
            closeAllOnExpand: true,
            container: '#myToggler',
            content: '.content',
            header: '.header',
            transition: {
                duration: .5,
                easing: 'cubic-bezier'
            }
        });

        new Y.Video ({
            boundingBox: '#myVideo',
            ogvUrl: 'http://alloyui.com/video/movie.ogg',
            url: 'http://alloyui.com/video/movie.mp4'
        }).render ( );
    }
);

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div id="myToggler">
    <button class="header toggler-header-collapsed">Show Video</button>
    <div class="content toggler-content-collapsed">
      <div id="myVideo"></div>
    </div>
</div>

[H]ow can I load any arbitrary Alloy UI widget inside another (e.g. a video player inside a modal window)?

One way to do this is to specify the outer widget's boundingBox and contentBox, and place the inner widget inside the contentBox of the outer widget. See below for a runnable example:

YUI().use('aui-modal', 'aui-video', function(Y) {

  new Y.Modal({
    boundingBox: '#bb',
    contentBox: '#cb',
    headerContent: 'Modal header'
  }).render();

  new Y.Video({
    boundingBox: '#myVideo',
    ogvUrl: 'http://alloyui.com/video/movie.ogg',
    url: 'http://alloyui.com/video/movie.mp4'
  }).render();
});

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
  <div id="bb">
    <div id="cb" style="background-color: grey;">
      <div id="myVideo">
      </div>
    </div>
  </div>
</div>