API Docs for: 0.0.8
Show:

File: client/auth/lightbox/lightbox.js

  1. /* This Source Code Form is subject to the terms of the Mozilla Public
  2. * License, v. 2.0. If a copy of the MPL was not distributed with this
  3. * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
  4. /*globals define*/
  5. define([
  6. ], function () {
  7. 'use strict';
  8. function createElement(window, type, attributes) {
  9. var el = window.document.createElement(type);
  10. for (var attribute in attributes) {
  11. el.setAttribute(attribute, attributes[attribute]);
  12. }
  13. return el;
  14. }
  15. function cssPropsToString(props) {
  16. var str = '';
  17. for (var key in props) {
  18. str += key + ':' + props[key] + ';';
  19. }
  20. return str;
  21. }
  22. /**
  23. * Create a lightbox.
  24. *
  25. * @class Lightbox
  26. * @constructor
  27. * @param {options={}} options
  28. * @param {String} options.window
  29. * The window object
  30. */
  31. function Lightbox(options) {
  32. options = options || {};
  33. this._window = options.window;
  34. }
  35. Lightbox.prototype = {
  36. /**
  37. * Load content into the lightbox
  38. * @method load
  39. * @param {String} src
  40. * URL to load.
  41. * @param {options={}} options
  42. * @param {Number} [options.zIndex]
  43. * z-index to set on the background.
  44. * @default 100
  45. * @param {String} [options.background]
  46. * Lightbox background CSS.
  47. * @default rgba(0,0,0,0.5)
  48. */
  49. load: function (src, options) {
  50. options = options || {};
  51. var backgroundStyle = options.background || 'rgba(0,0,0,0.5)';
  52. var zIndexStyle = options.zIndex || 100;
  53. var background = this._backgroundEl = createElement(this._window, 'div', {
  54. id: 'fxa-background',
  55. style: cssPropsToString({
  56. background: backgroundStyle,
  57. bottom: 0,
  58. left: 0,
  59. position: 'fixed',
  60. right: 0,
  61. top: 0,
  62. 'z-index': zIndexStyle
  63. })
  64. });
  65. var iframe = createElement(this._window, 'iframe', {
  66. id: 'fxa',
  67. src: src,
  68. width: '600',
  69. height: '400',
  70. allowtransparency: 'true',
  71. border: '0',
  72. style: cssPropsToString({
  73. background: 'transparent',
  74. border: 'none',
  75. display: 'block',
  76. height: '600px',
  77. margin: '0 auto 0 auto',
  78. position: 'relative',
  79. top: '10%',
  80. width: '400px'
  81. })
  82. });
  83. background.appendChild(iframe);
  84. this._window.document.body.appendChild(background);
  85. this._iframe = iframe;
  86. this._contentWindow = iframe.contentWindow;
  87. },
  88. /**
  89. * Get the content iframe element.
  90. * @method getContentElement
  91. * @returns {DOM Element}
  92. */
  93. getContentElement: function () {
  94. return this._iframe;
  95. },
  96. /**
  97. * Get the content window in the iframe.
  98. * @method getContentWindow
  99. * @returns {DOM Element}
  100. */
  101. getContentWindow: function () {
  102. return this._contentWindow;
  103. },
  104. /**
  105. * Check if the lightbox is loaded
  106. * @method isLoaded
  107. * @returns {Boolean}
  108. */
  109. isLoaded: function () {
  110. return !! this._backgroundEl;
  111. },
  112. /**
  113. * Unload the lightbox
  114. * @method unload
  115. */
  116. unload: function () {
  117. if (this._backgroundEl) {
  118. this._window.document.body.removeChild(this._backgroundEl);
  119. delete this._backgroundEl;
  120. delete this._iframe;
  121. }
  122. }
  123. };
  124. return Lightbox;
  125. });