popup-tools

Popups with callbacks, post and data response

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
popup-tools
3541.0.27 years ago7 years agoMinified + gzip package size for popup-tools in KB

Readme

Popup Tools
Several simple tools to handle popups with callbacks. Posting data to popups as well as receiving data from them.
Build Status Codacy Badge Build Status

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) {
    // this executes when closed
}));

popupTools.popupWithPost('/some-form-submit', { data: 'some data' }, 'My Form', { width: 400, height: 100 }, function (err) {
    // this executes when closed
});

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) {
        // this executes when closed
    }));
</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.
// Server (express)
var popupTools = require('popup-tools');

app.get('/postback', function (req, res) {
    res.send(popupTools.popupResponse({ some_data: 'data' }));
});

// Client
var popupTools = require('popup-tools');

popupTools.popup('/postback', 'My Popup', { width: 400, height: 100 }, function (err, data) {
    // this executes when closed
    if (err) {
        // Closed by user
    } else {
        // Data returned by the server
        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 {
            // save the returned user in localStorage/cookie or something
        }
    });
};
</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) {
    // process facebook profile into user
}));

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.