In my index.html I have:
<head>
<script src="../../../scripts/buildfire.js"></script>
<script src="../../../scripts/buildfire/services/camera/camera.js"></script>
</head>
Then inside of my react app I have:
buildfire.services.camera.getPicture({}, (err, image) => {
if (err) {
console.log('error: ', err);
} else {
console.log('image: ', image);
}
})
When the function fires, half of the time the console.log of image will be null, half the time it will correctly launch the camera on my phone (testing inside of the previewer). I never run into issues where it errors. In order to get it to work I just keep restarting the previewer. It seems to be a 50/50 chance of working each time I load the previewer. Testing on an android galaxy s6.
If you create a bare bones version of the plugin, without React or any other custom code, can you reproduce the issue? If so, share the code for this bare bones example plugin. Thanks.
Update: I created a bare bones plugin that utilizes the camera, and it seems to work fine when I use it on the Previewer:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../../scripts/buildfire.js"></script>
<script src="../../../scripts/buildfire/services/camera/camera.js"></script>
</head>
<body>
<img id="pic">
</body>
<script>
buildfire.services.camera.getPicture({},
function (err, imageData) {
console.log('error', err);
console.log('imageData', imageData);
if (imageData) {
document.getElementById("pic").src = imageData;
}
}
);
</script>
</html>
Related
We have an excel add-in hosted in azure where the Office.context.ui.messageParent API messages aren't being sent/received on the desktop. There's no errors, the message just doesn't get caught at the event listener.
We use the dialog for MFA and we have it working locally for both desktop and web but when we deploy to a stage add-in hosted in azure this issue occurs just on the desktop.
This works:
dialog url (https://localhost:3000/dist/callback.html)
taskpane url (https://localhost:3000/dist/taskpane.html)
This doesn't:
dialog url (https://ip-dev-custom-functions.azurewebsites.net/addin/callback.html)
taskpane url (https://ip-dev-custom-functions.azurewebsites.net/addin/taskpane.html)
Surprisingly the DialogEventReceived is being triggered but not the message DialogMessageReceived.
callback.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Cache-Control" content="private, no-cache, no-store"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
<title></title>
<script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
</head>
<body>
<script>
if (window.opener)
window.opener.postMessage({type: 'interstitial', url: document.location.href}, "*");
Office.initialize = function (reason) {
console.log("Sending auth complete message through dialog: " + document.location.href);
Office.context.ui.messageParent(document.location.href);
}
</script>
</body>
</html>
snippet of the taskpane.html where's the event listener:
Office.context.ui.displayDialogAsync(url, {
height: dim.height,
width: dim.width,
promptBeforeOpen: false
}, async (result) => {
_loginDialog = result.value;
_loginDialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
_loginDialog.addEventHandler(Office.EventType.DialogEventReceived, (ev) => {
console.log("## EVENT RECEIVED ##", ev);
});
});
function processMessage(arg) {
console.log("Message received in processMessage: " + JSON.stringify(arg));
_lastCallback(arg.message);
_loginDialog?.close();
_loginDialog = null;
}
Based on Authenticate and authorize with the Office dialog API, the correct flow is:
The add-in should launch the page in the dialog in add-in's domain, then redirect to the sign-in page, and then redirect to another page with the same domain as the first page in dialog again.
Otherwise, the messageParent API won't work, because it only trust the domain of the page used in the displayDialogAsync() API. In your scenario, the sign-in page (launched first time in the dialog) and the callback page are in different domains, which causes the problem.
Thanks.
I want to use a NodeJs Module on the browser. I read, that I can do this with http://browserify.org/.
Concret I want to use this NodeJs Module: https://github.com/ovvn/dom-to-pdf
So I create a bundle.js form this like explained here: http://browserify.org/
You can see my bundle in my github repo: https://github.com/astridx/dom-to-pdf/blob/javascriptexport_browserify/bundle.js
But now I do not know how to go on. I created an example: https://github.com/astridx/dom-to-pdf/blob/javascriptexport_browserify/example/index.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./../bundle.js"></script>
</head>
<body>
<div id="test">TODO write content</div>
<script>
var domToPdf = require('dom-to-pdf');
var element = document.getElementById('test');
var options = {
filename: 'test.pdf'
};
domToPdf(element, options, function () {
console.log('done');
});
</script>
</body>
</html>
But I do not know how to change the line var domToPdf = require('dom-to-pdf');
Can someone give me a hint?
Try using import instead, but you might need babel for that to work properly.
e.g import domToPdf from 'dom-to-pdf';
I have a static html page which intercept authorization message, I'd like to expose this on the domain. It looks like so:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>JwtAuthDemo - Facebook Auth</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="assets/util.js"></script>
</head>
<body>
<script>
// if we don't receive an access token then login failed and/or the user has not connected properly
var accessToken = getParameterByName("access_token");
var message = {};
if (accessToken) {
message.status = true;
message.accessToken = accessToken;
}
else
{
message.status = false;
message.error = getParameterByName("error");
message.errorDescription = getParameterByName("error_description");
}
window.opener.postMessage(JSON.stringify(message), "http://localhost:5000");
</script>
</body>
</html>
If I place this page next to the index.html page it is not exposed, however when I place it inside the assets folder it can be access. I'm guessing I have to explicitly expose the page in one of the json config files however I'm not to sure how to do so?
I'd prefer not to have my redirect url be www.mydomain.com/assets/oauth-response-parser.html. I'd like to keep this in my application seeing as it's part of the application.
How can I expose a static html page from Ionic as a sibling to the index.html page ?
You can automatically get files to your assets directory by specifying that you want to run a custom script during your ionic builds.
In your package.json you'd have a 'config' section where you can specify this script:
...
"config": {
"ionic_copy": "./config/customCopy.config.js"
},
...
and then your customCopy.config.js would contain an entry to copy over your html into assets:
module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
}
}
More info on this process at the ionic app scripts page
I hope this steers you in the right direction.
I have added to my Node ExpressJS app some components in ReactJS. Since I introduced these components, my tests are failing due to timeout error.
My test suites is including mocha, zombie, chai and sinon, but the first two are enough to reproduce the error.
This is the test:
// tests/home-tests.js
process.env.NODE_ENV = 'test';
var app = require('../index.js');
var Browser = require('zombie');
describe('Homepage Tests', function() {
before(function(){
server = app.listen(3002);
browser = new Browser({ site: 'http://localhost:3002' });
})
it('should render title', function(done){
browser.visit('/', function() {
browser.assert.text('h1', 'A test page for ReactJS');
done();
})
});
after(function(done) {
server.close(done);
});
});
This is the layout:
// views/layouts/main.handlebars
<!doctype html>
<!--[if IE 8]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Zombie ReactJS Test!</title>
{{{_sections.page_stylesheets}}}
</head>
<body>
{{{body}}}
{{{_sections.page_javascripts}}}
</body>
</html>
This is the view I want to test:
<h1>A test page for ReactJS</h1>
<div id="example"></div>
{{#section 'page_stylesheets'}}
<!-- ReactJS -->
<script src="https://npmcdn.com/react#15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.1/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
{{/section}}
{{#section 'page_javascripts'}}
<script type="text/babel">
ReactDOM.render(
<p>Hello, world!</p>,
document.getElementById('example')
);
</script>
{{/section}}
I have reproduced the error in this small repo.
It seems that it could be easily fixed with a timeout like it follows:
// tests/home-tests.js
// ...
it('should render title', function(done){
this.timeout(5000);
browser.visit('/', function() {
browser.assert.text('h1', 'A test page for ReactJS');
done();
})
});
However, this doesn't appear to be the most suitable solution. In particular, would you be able to suggest a way to run test only after the page is fully loaded (without timeouts to be set)?
Thank you in advance
I've been having trouble setting up a test framework for a NodeJS + Backbone app with the constant "require is not defined" error. I finally got it working using an in-browser test framework which picks up all of the dependencies I need and running a test.js file.
Currently, I'm only doing basic testing of my Backbone models, views, and collections. Now, I want to add in API testing but I'm back to the same "require is not defined" error. What is causing this? It's clear that I'm missing something fundamental here. I just want to add:
var request = require('supertest')
, express = require('express');
var app = express();
Snippet of test.js:
describe('Application', function(){
it("creates a global variable for the namespace", function() {
should.exist(App);
})
});
describe('Models', function() {
describe('SearchFormModel', function() {
beforeEach(function() {
this.SearchFormModel = new App.Model.SearchFormModel();
this.defaultFields = this.SearchFormModel.attributes;
})
it("created a SearchFormModel", function() {
should.exist(this.SearchFormModel);
})
it("should have 7 default fields", function() {
Object.keys(this.SearchFormModel).length.should.equal(7);
})
it("should default all fields to empty string", function() {
for (var key in this.defaultFields) {
this.defaultFields[key].should.equal("");
}
})
});
});
test-runner.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Title & Meta -->
<title>Frontend tests</title>
<meta charset="utf-8">
<!-- Stylesheets -->
<link rel="stylesheet" href="../node_modules/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<!-- Testing Libraries -->
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script>
// Use the expect version of chai assertions - http://chaijs.com/api/bdd
var should = chai.should();
// Tell mocha we want TDD syntax
mocha.setup('tdd');
</script>
<!-- Libs -->
<script src="../public/lib/jquery-1.8.2.min.js"></script>
<script src="../public/lib/underscore-min.js"></script>
<script src="../public/lib/backbone-min.js"></script>
<script src="../public/lib/bootstrap.min.js"></script>
<script src="../public/lib/highcharts.js"></script>
<script src="../public/lib/bootstrap-datepicker.js"></script>
<script src="../public/js/modules/exporting.js"></script>
<!-- Source files -->
<script src="../public/js/namespace.js"></script>
<script src="../public/js/jst.js"></script>
<script src="../public/js/utils.js"></script>
<script src="../public/js/models/models.js"></script>
<script src="../public/js/models/search.js"></script>
<script src="../public/js/models/plot.js"></script>
<script src="../public/js/models/search_result.js"></script>
<script src="../public/js/views/header.js"></script>
<script src="../public/js/views/plot.js"></script>
<script src="../public/js/views/list.js"></script>
<script src="../public/js/views/search.js"></script>
<script src="../public/js/router.js"></script>
<script src="../public/js/app.js"></script>
<!-- Test -->
<script src="test.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
require and commonjs only works in Node.js
If you run Browser test, then you need to code it like you'll run it in the browser. Also note that Unit Test should be done in isolation, you shouldn't need to load you app server (express) to run your test.
I'd like to point you to an easy solution from there, but there's just too many choices. Very basically, you should start running browser test in the browser by loading an html file.
Then, you'll want to automatize this and run browser test from the terminal. That's when you want to run test in PhantomJs and the likes and output browser results on the terminal. Around this, you can checkout Karma and Testem who're two browser test runner (remember here Mocha alone won't run browser test via command line).
As you're using Backbone, you might be interested in the Backbone-Boilerplate Karma + Grunt test setup as a starting point. See more on this here: https://github.com/backbone-boilerplate/backbone-boilerplate