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)?
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>