For showing a loading screen, we listen to the jQuery ajaxStart() event the following way:
$(document).ajaxStart(function() {
//show loading screen
});
However, this event doesn't get fired sending forge.reques.ajax() requests (at least is seems so).
Is there already a solution like that for forge or do I have to write that event by hand?
This doesn't currently exist in forge, but its pretty easy to implement:
var onAjaxStart = function () {
// show loading screen
}
var onAjaxEnd = function () {
// hide loading screen
}
var myAjax = function (params) {
onAjaxStart();
var success = params.success;
params.success = function () {
onAjaxEnd();
success && success();
};
forge.request.ajax(params);
}
Then us myAjax(...) instead of forge.request.ajax(...).
Related
The MovieClip class in the EaselJS module has a loop property which can be set to true or false, causing the movie clip to play infinitely or only once. http://www.createjs.com/docs/easeljs/classes/MovieClip.html
I need to play a movie clip (banner ad) three times. How can that be done?
This is the init function:
<script>
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete(evt) {
exportRoot = new lib.banner_728x90();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
There is currently no loop count support, nor any events from MovieClip indicating when an animation finishes. The latter isn't a bad idea, feel free to log a bug in GitHub.
One solution you could use would be to dispatch some custom events from a timeline script in Animate:
this.dispatchEvent("walkend");
Then you can listen for the event, and handle it yourself.
var loopCount = 0;
exportRoot.myClip.on("walkend", function(event) {
loopCount++;
if (loopCount > 2) {
doSomething();
event.remove(); // No longer get this event.
}
});
Hope that helps.
I have an OpenLayers 3.9.0 map. I also have a pair of LonLat coordinates that I am tracking from an external source and updating onto the map. I am continuously re-centering the map on these coordinates:
function gets_called_when_I_have_updated_coords() {
map.getView.setCenter(coords);
}
What I want is to disable this auto-centering whenever the user interacts with the map. In other words, I want this:
var auto_center = true;
function gets_called_when_I_have_updated_coords() {
if (auto_center) {
map.getView.setCenter(coords);
}
}
function user_started_interacting() {
auto_center = false;
}
// But where should this function be attached to?
// where.on('what?', user_started_interacting);
I don't know how to detect a user interaction.
I expected that the default interactions had some kind of event, so that when the user starts dragging/rotating/zooming the map, an event would be triggered and my code would run. I could not find such event.
Here, the user is dragging:
map.on('pointermove', function(evt){
if(evt.dragging){
//user interacting
console.info('dragging');
}
});
Here, the user is changing resolution:
map.getView().on('change:resolution', function(evt){
console.info(evt);
});
UPDATE
Some options to detect keyboard interaction:
//unofficial && undocumented
map.on('key', function(evt){
console.info(evt);
console.info(evt.originalEvent.keyIdentifier);
});
//DOM listener
map.getTargetElement().addEventListener('keydown', function(evt){
console.info(evt);
console.info(evt.keyIdentifier);
});
A fiddle to test.
An other approach could be to listen to the pointerdown and pointerup events occurring on the map and while the down is in action, disable your auto-center feature.
map.on('pointerdown', function() {
auto_center = false;
}, this);
map.on('pointerup', function() {
auto_center = true;
}, this);
This approach may need more work, but it would be a start. Thoughts ?
As an workaround, I can attach an event to a change in the view:
map.getView().on('change:center', function(ev){…});
But I must take extra steps to distinguish from code-initiated changes from user-initiated ones. The complete code looks somewhat like this:
var auto_center = true;
var ignore_change_events = false;
function gets_called_when_I_have_updated_coords() {
if (auto_center) {
ignore_change_events = true;
map.getView.setCenter(coords);
ignore_change_events = false;
}
}
map.getView().on('change:center', function() {
if (ignore_change_events) {
return;
}
auto_center = false;
});
Note that this approach breaks if any animation is used (and there is no callback or event for when an animation finishes).
Depending on your project, you may want to try either this solution or Jonatas Walker's solution.
I've followed MDN's document to create a toggle button addon.
Everything works fine except one problem:
Open a second browser window (cmd+n or ctrl+n) and click on the toggle button there
Click on the toggle button on the original browser window without closing the toggle button on the second window
the toggle button's panel becomes blank with the following error message:
JavaScript error: resource:///modules/WindowsPreviewPerTab.jsm, line 406: NS_ERR
OR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIT
askbarTabPreview.invalidate]
// ./lib/main.js
var { ToggleButton } = require("sdk/ui/button/toggle");
var panels = require("sdk/panel");
var self = require("sdk/self");
var buttonIndex = 0;
var lastKnownButtonIndex = 0;
var button = ToggleButton({
id: "button",
label: "my button",
icon: {
"16": "./icon-16.png"
},
onClick: handleChange,
});
var panel = panels.Panel({
contentURL: self.data.url("menu.html"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
function assignButtonIndex() {
return (buttonIndex++).toString();
}
The complete addon is here: https://goo.gl/9N3jle
To reproduce: Extract the zip file and $ cd testButton; cfx run and follow the above steps.
I really hope someone can help me with this. Thank you in advance!
It's a bug; you're not doing anything wrong. It's a racing condition between the windows' focus events, and the panel's event, that prevent somehow the panel's hidden event to be emitted properly.
You can try to mitigate with a workaround the issue until is properly fixed. I added some explanation in the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1174425#c2 but in short, you can try to add a setTimeout to delay a bit when the panel is shown, in order to avoid the racing condition with the window's focus. Something like:
const { setTimeout } = require("sdk/timers");
/* ... your code here ... */
function handleChange(state) {
if (state.checked) {
setTimeout(() => panel.show({ position: button }), 100);
}
}
I am currently using a workaround where I dynamically create a new Panel every time the user presses the toolbar button.
It is faster than the 100ms workaround and also handles a scenario where the user outright closes one of the browser windows while the panel is open. (The 100ms workaround fails in this case and a blank panel is still displayed.)
It works like this:
let myPanel = null;
const toolbarButton = ToggleButton({
...,
onChange: function (state) {
if (state.checked) {
createPanel();
}
}
});
function createPanel(){
// Prevent memory leaks
if(myPanel){
myPanel.destroy();
}
// Create a new instance of the panel
myPanel = Panel({
...,
onHide: function(){
// Destroy the panel instead of just hiding it.
myPanel.destroy();
}
});
// Display the panel immediately
myPanel.show();
}
I'm using Titanium and testing the camera on iOS. I'm getting an issue where code after the camera page is being run before I've gone through the camera page. In the below code, the line 'alert('Picture uploaded successfully.') is executed before the camera screen has even opened up.. Any ideas?
var wincam;
wincam = Titanium.UI.createWindow();
if (Ti.Platform.osname === 'android') {
win.addEventListener('open', function(e) {
});
} else {
Titanium.Media.showCamera({
success:function(event)
{
var cropRect = event.cropRect;
var image = event.media;
Ti.API.debug('Our type was: '+event.mediaType);
if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO)
{
var imageView = Ti.UI.createImageView({
width:win.width,
height:win.height,
image:event.media
});
win.add(imageView);
}
else
{
alert("got the wrong type back ="+event.mediaType);
}
},
saveToPhotoGallery:false,
allowEditing:true,
mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO]
});
}
//open next page
var w3 = Titanium.UI.createWindow({
backgroundImage:'/images/5-survey.png'
});
w3.open();
alert('Picture uploaded successfully.');
showCamera is an asynchronous event it does not stop the execution context. If you want an alert on the successful capture of an image, put the alert in the success event.
http://developer.appcelerator.com/question/144053/showcamera-issue-on-ios#answer-250088
— answered 1 hour ago by Anthony Decena
I write a Mozilla Jetpack based add-on that has to run whenever a document is loaded. For "toplevel documents" this mostly works using this code (OserverService = require('observer-service')):
this.endDocumentLoadCallback = function (subject, data) {
console.log('loaded: '+subject.location);
try {
server.onEndDocumentLoad(subject);
}
catch (e) {
console.error(formatTraceback(e));
}
};
ObserverService.add("EndDocumentLoad", this.endDocumentLoadCallback);
But the callback doesn't get called when the user opens a new tab using middle click or (more importantly!) for frames. And even this topic I only got through reading the source of another extension and not through the documentation.
So how do I register a callback that really gets called every time a document is loaded?
Edit: This seems to do what I want:
function callback (event) {
// this is the content document of the loaded page.
var doc = event.originalTarget;
if (doc instanceof Ci.nsIDOMNSHTMLDocument) {
// is this an inner frame?
if (doc.defaultView.frameElement) {
// Frame within a tab was loaded.
console.log('!!! loaded frame:',doc.location.href);
}
else {
console.log('!!! loaded top level document:',doc.location.href);
}
}
}
var wm = Cc["#mozilla.org/appshell/window-mediator;1"].getService(Ci.nsIWindowMediator);
var mainWindow = wm.getMostRecentWindow("navigator:browser");
mainWindow.gBrowser.addEventListener("load", callback, true);
Got it partially from here: https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads
#kizzx2 you are better served with #jetpack
To the original question: why don't you use tab-browser module. Something like this:
var browser = require("tab-browser");
exports.main = function main(options, callbacks) {
initialize(function (config) {
browser.whenContentLoaded(
function(window) {
// something to do with the window
// e.g., if (window.locations.href === "something")
}
);
});
Much cleaner than what you do IMHO and (until we have official pageMods module) the supported way how to do this.
As of Addon SDK 1.0, the proper way to do this is to use the page-mod module.
(Under the hood it's implemented using the document-element-inserted observer service notification, you can use it in a regular extension or if page-mod doesn't suit you.)