I'm having problems firing and listening to events with the froogaloop api.
My code is :
$f('player').addEvent('ready', video.load);
$f('player').addEvent('play', video.show);
$f('player').addEvent('finish', video.unload);
And my function:
load: function() { $f('player').api('play'); }
And the video.show() function never starts..!
Can you help me?
You need to wrap your player events inside the ready event.
So in your case, you can do it like this:
var player = $f('player');
// Listen for the 'ready' event
player.addEvent('ready', function () {
// Now you can start listening to all other events
player.addEvent('play', video.show);
player.addEvent('finish', video.unload);
});
See the Events section on Vimeo's API documentation page. It says:
Do not try to add listeners or call functions before receiving this (ready) event.
Related
I am trying to figure it out if there is a function in the Bacon.js API that allows to subscribe to an EventStream and when the first event fires up, the handle is unsubscribed. The way to do it that I know is the following:
let stream = new Bacon.Bus();
stream.onValue(val => {
doSomething(val);
return Bacon.noMore;
});
But is there something like stream.onValueOnce that automatically unsubscribe the handler after it is executed?
I also know that there is the Bacon.once that creates a EventStream that returns a single value and then ends the stream but this is not what I am looking for.
Update
As Bless Yahu sais, take or first methods can be used. To be more specific, you have to call it from the created eventStream like that:
let stream = new Bacon.Bus();
stream.first().onValue(val => {
doSomething(val);
});
Here is a fiddle that shows it:
https://fiddle.jshell.net/3kjtwcwy/
How about stream.take(1)? https://baconjs.github.io/api.html#observable-take
Or stream.first()? https://baconjs.github.io/api.html#observable-first
I'm having trouble with a click event on a sprite in CreateJS. The event isn't firing as expected. I've tried:
button.addEventListener("click", function() { alert('test'); });
and
button.on("click", function() { alert('test'); });
Neither of them fire on click event. Any ideas?
I found my problem. I forgot to enable the mouse on the stage.
e.g.
var stage = new createjs.Stage("canvasId");
//Children of container can dispatch mouse events
stage.mouseChildren = true;
//EaselJS checks 10 times per second what's under mouse pointer
stage.enableMouseOver(10);
CreateJS mouse events tutorial
Im trying to figure out how to close a pop up dialog based on a published event .. i.e when a person moves the mouse to another part of the page.(i only want it closed when i move to this part of the page) Is this possible
i have a topic published when the user moves off this area.
_hoverOffArea : function() {
topic.publish("messageRollOver/close");
},
how do i get my popup to subscribe to this topic and close itself ?
var tooltip = new TooltipDialog({
onMouseLeave : function() {
},
onBlur : function() {
}
});
messageTooltip.set("content", rollOver.domNode);
popup.open({
popup: tooltip,
around: e
});
You may be over thinking it. The dojo/topic module has a subscribe method which takes a topic name ("messageRollOver/close") and a function to fire when the message is published.
topic.subscribe('messageRollOver/close',function(args){
console.log('close tooltip');
});
You can pass arbitrary parameters to the publish message that are then passed to the subscribe:
topic.subscribe("messageRollOver/close",function(arg1){
console.log("arg1 = ",arg1);
});
var tooltip = new TooltipDialog(/*params*/);
topic.publish("messageRollOver/close",tooltip);
when the subscribe function is invoked, arg1 would be the second argument to the topic#publish function call.
My understanding of the WinJS.Application.start() function is that it allows WinJS to queue up certain normal page initialization events to give you a chance to set up other data first in your default.js file. By calling the start() function at the end of default.js, WinJS then fires off all the queued events for you (such as the activated event).
I'm trying to understand where everything fits in the life cycle, so I'm not clear why the first of the following examples works but the second doesn't. All I'm doing is updating the page title, which doesn't work as expected when I call app.start() after a 5-second delay:
First, here's default.html:
<html>
<head>
<script references...>
</head>
<body>
<h1 id="pageTitle">Page of coolness...</h1>
</body>
</html>
And here's the first default.js example (which works as expected):
(function () {
var app = WinJS.Application;
app.onactivated = function () {
document.getElementById("pageTitle").innerText = "Rock it!";
};
// This code *does* fire the onactivated event:
// The page displays "Rock it!" in the page title
app.start();
})();
Here's the second default.js example (which doesn't work as expected):
(function () {
var app = WinJS.Application;
app.onactivated = function () {
document.getElementById("pageTitle").innerText = "Rock it!";
};
// This code *doesn't* fire the onactivated event:
// It initially displays "Page of coolness..." in the page title.
// After 5 seconds, it adds "Gettin' there...Almost made it..."
// to the the page title, but "Rock it!" never gets displayed
WinJS.Promise.timeout(5000).then(function () {
document.getElementById("pageTitle").innerText += "Gettin' there...";
app.start();
document.getElementById("pageTitle").innerText += "Almost made it...";
});
})();
Why does calling app.start() after the 5-second delay cause the activated event not to fire?
The documentation for the start function is a little misleading.
When you call start, WinJS.Application begins to queue and dispatch events, including those which are emitted by Windows.UI.WebUI.WebUIApplication. One of these events is activated, which is what leads to your handler function being called.
The important point is that the queuing doesn't begin until you call start. Any events that are emitted by WebUIApplication before the queuing begins are lost forever.
This is the situation you have created by delaying your call to start: the activated event is sent by WebUIApplication before the WinJS.Application queue has been set up. The activated event is never received by WinJS.Application and so your handler function is never invoked.
I know you are just trying to figure out the life cycle, but there isn't a reason to delay your call to the start function in real life. The only way to get the effect you are trying to create in your code is to place the Promise inside the onactivated handler function, like this:
(function () {
var app = WinJS.Application;
app.onactivated = function () {
document.getElementById("pageTitle").innerText += "Gettin' there...";
WinJS.Promise.timeout(5000).then(function () {
document.getElementById("pageTitle").innerText = "Rock it!";
});
document.getElementById("pageTitle").innerText += "Almost made it...";
};
app.start();
})();
In the home page, I've used registerForNetworkStatusChangeNotif() function (which I borrowed from MSDN) for registering network notification change. The function adds an event listener networkstatuschanged and it works fine for that page alone i.e. an error is shown when connectivity is interrupted and the page is refreshed automatically when connectivity is restored -
var networkInfo = Windows.Networking.Connectivity.NetworkInformation;
...
networkInfo.addEventListener("networkstatuschanged", onNetworkStatusChange);
How should I handle the Internet availability check for other pages?
I've tried registering this function in default.js so that it is available for all the pages. My app uses the Geolocation feature and the statuschanged event clashes with the networkstatuschanged event and my app fails to show the loss of Internet connectivity error. How can I resolve this issue so that unavailability of Internet connectivity is properly handled.
You need to listen to a specific event. And when it fires, you check the internet connectivity.
var networkInformation = Windows.Networking.Connectivity.NetworkInformation;
...
ready: function(element, options)
{
// Registering for connection change
networkInformation.addEventListener("networkstatuschanged", this.onNetworkStatusChanged);
...
}
unload: function()
{
// Unregistering for connection change
networkInformation.removeEventListener("networkstatuschanged", this.onNetworkStatusChanged);
...
}
onNetworkStatusChanged: function(eventArgs)
{
// Retrieve the InternetConnectionProfile
var internetConnectionProfile = networkInformation.getInternetConnectionProfile();
// Accesses the NetworkConnectivityLevel
var networkConnectivityLevel = internetConnectionProfile.getNetworkConnectivityLevel();
// Switch on NetworkConnectivityLevel
switch (networkConnectivityLevel) {
case Windows.Networking.Connectivity.NetworkConnectivityLevel.none:
...
case Windows.Networking.Connectivity.NetworkConnectivityLevel.localAccess:
...
case Windows.Networking.Connectivity.NetworkConnectivityLevel.constrainedInternetAccess:
...
case Windows.Networking.Connectivity.NetworkConnectivityLevel.internetAccess:
...
}
...
}
I expect the automatic page 'refresh' is due to databinding. To have more control, you would need to bind to the Networking object on page 'ready' and unbind again on page 'unload'. For example:
var networkInfo = Windows.Networking.Connectivity.NetworkInformation;
this.networkHandler = this._doSomething();
...
..
ready: function(element, options)
{
networkInfo.addEventListener(this.networkHandler);
...
..
}
unload: function()
{
networkInfo.removeEventListener(this.networkHandler);
...
..
}
_doSomething : function(event)
{
// Examine the 'event' object and perform 'refresh' accordingly
// Most likely a call to WinJS.Binding.processAll(...)
}
All you would then need is to define the handler method '_doSomething()' to examine the connectivity details passed by the 'event' object and trigger your binding/refresh logic accordingly.
Hope this helps!