File: client/auth/lightbox/lightbox.js
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/*globals define*/
define([
], function () {
'use strict';
function createElement(window, type, attributes) {
var el = window.document.createElement(type);
for (var attribute in attributes) {
el.setAttribute(attribute, attributes[attribute]);
}
return el;
}
function cssPropsToString(props) {
var str = '';
for (var key in props) {
str += key + ':' + props[key] + ';';
}
return str;
}
/**
* Create a lightbox.
*
* @class Lightbox
* @constructor
* @param {options={}} options
* @param {String} options.window
* The window object
*/
function Lightbox(options) {
options = options || {};
this._window = options.window;
}
Lightbox.prototype = {
/**
* Load content into the lightbox
* @method load
* @param {String} src
* URL to load.
* @param {options={}} options
* @param {Number} [options.zIndex]
* z-index to set on the background.
* @default 100
* @param {String} [options.background]
* Lightbox background CSS.
* @default rgba(0,0,0,0.5)
*/
load: function (src, options) {
options = options || {};
var backgroundStyle = options.background || 'rgba(0,0,0,0.5)';
var zIndexStyle = options.zIndex || 100;
var background = this._backgroundEl = createElement(this._window, 'div', {
id: 'fxa-background',
style: cssPropsToString({
background: backgroundStyle,
bottom: 0,
left: 0,
position: 'fixed',
right: 0,
top: 0,
'z-index': zIndexStyle
})
});
var iframe = createElement(this._window, 'iframe', {
id: 'fxa',
src: src,
width: '600',
height: '400',
allowtransparency: 'true',
border: '0',
style: cssPropsToString({
background: 'transparent',
border: 'none',
display: 'block',
height: '600px',
margin: '0 auto 0 auto',
position: 'relative',
top: '10%',
width: '400px'
})
});
background.appendChild(iframe);
this._window.document.body.appendChild(background);
this._iframe = iframe;
this._contentWindow = iframe.contentWindow;
},
/**
* Get the content iframe element.
* @method getContentElement
* @returns {DOM Element}
*/
getContentElement: function () {
return this._iframe;
},
/**
* Get the content window in the iframe.
* @method getContentWindow
* @returns {DOM Element}
*/
getContentWindow: function () {
return this._contentWindow;
},
/**
* Check if the lightbox is loaded
* @method isLoaded
* @returns {Boolean}
*/
isLoaded: function () {
return !! this._backgroundEl;
},
/**
* Unload the lightbox
* @method unload
*/
unload: function () {
if (this._backgroundEl) {
this._window.document.body.removeChild(this._backgroundEl);
delete this._backgroundEl;
delete this._iframe;
}
}
};
return Lightbox;
});