Several simple tools to handle popups with callbacks. Posting data to popups as well as receiving data from them.
Installation
Install the module with: npm install popup-tools
, or download the latast release.
Its built with UMD so you can include it with any package manager as well as use it directly in the browser.
Usage
There are 3 methods in this package
Function | Description |
---|
popup (url, title, options, callback) | Open a simple popup, and call the callback method on close |
popupWithPost (url, post, title, callback) | Open a popup and post the data into it. Again wait for callback |
popupResponse (data) | Called on the server as a response to the popup, will trigger the callback to be called with that response |
You can open popup windows, and recieve a callback whenever the window was closed. Options are also passed as an object, and not as a string, as is generally required.
var popupTools = require('popup-tools');
popupTools.popup('/popup-url.html', 'My Popup', { width: 400, height: 100 }, function (err) {
}));
popupTools.popupWithPost('/some-form-submit', { data: 'some data' }, 'My Form', { width: 400, height: 100 }, function (err) {
});
If you're including the file directly into your HTML without package managers, it will add popupTools
to the global window object.
<script src=".../PopupTools.min.js" ></script>
<script>
popupTools.popup('/popup-url.html', 'My Popup', { width: 400, height: 100 }, function (err) {
}));
</script>
Data reponse
You can also send data back from the popup to the server, by calling the popupResponse
method on the result for the popup page. This will trigger the closing of the popup, as well as sending the data in the callback function.
var popupTools = require('popup-tools');
app.get('/postback', function (req, res) {
res.send(popupTools.popupResponse({ some_data: 'data' }));
});
var popupTools = require('popup-tools');
popupTools.popup('/postback', 'My Popup', { width: 400, height: 100 }, function (err, data) {
if (err) {
} else {
console.log(data)
}
});
A full express & passport-facebook example
On the clinet you could have something like:
<button id="button">Facebook Login</button>
<script src=".../PopupTools.min.js"></script>
<script>
document.getElementById("button").onclick = function () {
popupTools.popup('/popup-url', "Facebook Connect", {}, function (err, user) {
if (err) {
alert(err.message);
} else {
}
});
};
</script>
And on the server:
var passport = require('passport');
var FacebookStrategy = require('passport-facebook').Strategy;
passport.use(new FacebookStrategy({
clientID: process.env.FACEBOOK_ID,
clientSecret: process.env.FACEBOOK_SECRET,
callbackURL: '/calback-url',
}, function (accessToken, refreshToken, profile, done) {
}));
var express = require('express');
var app = express();
app.post('/popup-url', passport.authenticate('facebook'))
app.get('/callback-url',
passport.authenticate('facebook'),
function (req, res) {
res.end(popupTools.popupResponse(req.user))
}
);
License
Copyright (c) 2016 Enhancv
Licensed under the MIT license.