jquery.jetpack-resize.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. /* global Jetpack, JSON */
  2. /**
  3. * Resizeable Iframes.
  4. *
  5. * Start listening to resize postMessage events for selected iframes:
  6. * $( selector ).Jetpack( 'resizeable' );
  7. * - OR -
  8. * Jetpack.resizeable( 'on', context );
  9. *
  10. * Resize selected iframes:
  11. * $( selector ).Jetpack( 'resizeable', 'resize', { width: 100, height: 200 } );
  12. * - OR -
  13. * Jetpack.resizeable( 'resize', { width: 100, height: 200 }, context );
  14. *
  15. * Stop listening to resize postMessage events for selected iframes:
  16. * $( selector ).Jetpack( 'resizeable', 'off' );
  17. * - OR -
  18. * Jetpack.resizeable( 'off', context );
  19. *
  20. * Stop listening to all resize postMessage events:
  21. * Jetpack.resizeable( 'off' );
  22. */
  23. (function($) {
  24. var listening = false, // Are we listening for resize postMessage events
  25. sourceOrigins = [], // What origins are allowed to send resize postMessage events
  26. $sources = false, // What iframe elements are we tracking resize postMessage events from
  27. URLtoOrigin, // Utility to convert URLs into origins
  28. setupListener, // Binds global resize postMessage event handler
  29. destroyListener, // Unbinds global resize postMessage event handler
  30. methods; // Jetpack.resizeable methods
  31. // Setup the Jetpack global
  32. if ( 'undefined' === typeof window.Jetpack ) {
  33. window.Jetpack = {
  34. /**
  35. * Handles the two different calling methods:
  36. * $( selector ).Jetpack( 'namespace', 'method', context ) // here, context is optional and is used to filter the collection
  37. * - vs. -
  38. * Jetpack.namespace( 'method', context ) // here context defines the collection
  39. *
  40. * @internal
  41. *
  42. * Call as: Jetpack.getTarget.call( this, context )
  43. *
  44. * @param string context: jQuery selector
  45. * @return jQuery|undefined object on which to perform operations or undefined when context cannot be determined
  46. */
  47. getTarget: function( context ) {
  48. if ( this instanceof jQuery ) {
  49. return context ? this.filter( context ) : this;
  50. }
  51. return context ? $( context ) : context;
  52. }
  53. };
  54. }
  55. // Setup the Jetpack jQuery method
  56. if ( 'undefined' === typeof $.fn.Jetpack ) {
  57. /**
  58. * Dispatches calls to the correct namespace
  59. *
  60. * @param string namespace
  61. * @param ...
  62. * @return mixed|jQuery (chainable)
  63. */
  64. $.fn.Jetpack = function( namespace ) {
  65. if ( 'function' === typeof Jetpack[namespace] ) {
  66. // Send the call to the correct Jetpack.namespace
  67. return Jetpack[namespace].apply( this, Array.prototype.slice.call( arguments, 1 ) );
  68. } else {
  69. $.error( 'Namespace "' + namespace + '" does not exist on jQuery.Jetpack' );
  70. }
  71. };
  72. }
  73. // Define Jetpack.resizeable() namespace to just always bail if no postMessage
  74. if ( 'function' !== typeof window.postMessage ) {
  75. $.extend( window.Jetpack, {
  76. /**
  77. * Defines the Jetpack.resizeable() namespace.
  78. * See below for non-trivial definition for browsers with postMessage.
  79. */
  80. resizeable: function() {
  81. $.error( 'Browser does not support window.postMessage' );
  82. }
  83. } );
  84. return;
  85. }
  86. /**
  87. * Utility to convert URLs into origins
  88. *
  89. * http://example.com:port/path?query#fragment -> http://example.com:port
  90. *
  91. * @param string URL
  92. * @return string origin
  93. */
  94. URLtoOrigin = function( URL ) {
  95. if ( ! URL.match( /^https?:\/\// ) ) {
  96. URL = document.location.href;
  97. }
  98. return URL.split( '/' ).slice( 0, 3 ).join( '/' );
  99. };
  100. /**
  101. * Binds global resize postMessage event handler
  102. */
  103. setupListener = function() {
  104. listening = true;
  105. $( window ).on( 'message.JetpackResizeableIframe', function( e ) {
  106. var event = e.originalEvent,
  107. data;
  108. // Ensure origin is allowed
  109. if ( -1 === $.inArray( event.origin, sourceOrigins ) ) {
  110. return;
  111. }
  112. // Some browsers send structured data, some send JSON strings
  113. if ( 'object' === typeof event.data ) {
  114. data = event.data.data;
  115. } else {
  116. try {
  117. data = JSON.parse( event.data );
  118. } catch ( err ) {
  119. data = false;
  120. }
  121. }
  122. if ( !data.data ) {
  123. return;
  124. }
  125. // Un-nest
  126. data = data.data;
  127. // Is it a resize event?
  128. if ( 'undefined' === typeof data.action || 'resize' !== data.action ) {
  129. return;
  130. }
  131. // Find the correct iframe and resize it
  132. $sources.filter( function() {
  133. if ( 'undefined' !== typeof data.name ) {
  134. return this.name === data.name;
  135. } else {
  136. return event.source === this.contentWindow;
  137. }
  138. } ).first().Jetpack( 'resizeable', 'resize', data );
  139. } );
  140. };
  141. /**
  142. * Unbinds global resize postMessage event handler
  143. */
  144. destroyListener = function() {
  145. listening = false;
  146. $( window ).off( 'message.JetpackResizeableIframe' );
  147. sourceOrigins = [];
  148. $( '.jetpack-resizeable' ).removeClass( 'jetpack-resizeable' );
  149. $sources = false;
  150. };
  151. // Methods for Jetpack.resizeable() namespace
  152. methods = {
  153. /**
  154. * Start listening for resize postMessage events on the given iframes
  155. *
  156. * Call statically as: Jetpack.resizeable( 'on', context )
  157. * Call as: $( selector ).Jetpack( 'resizeable', 'on', context ) // context optional: used to filter the collectino
  158. *
  159. * @param string context jQuery selector.
  160. * @return jQuery (chainable)
  161. */
  162. on: function( context ) {
  163. var target = Jetpack.getTarget.call( this, context );
  164. if ( ! listening ) {
  165. setupListener();
  166. }
  167. target.each( function() {
  168. sourceOrigins.push( URLtoOrigin( $( this ).attr( 'src' ) ) );
  169. } ).addClass( 'jetpack-resizeable' );
  170. $sources = $( '.jetpack-resizeable' );
  171. return target;
  172. },
  173. /**
  174. * Stop listening for resize postMessage events on the given iframes
  175. *
  176. * Call statically as: Jetpack.resizeable( 'off', context )
  177. * Call as: $( selector ).Jetpack( 'resizeable', 'off', context ) // context optional: used to filter the collectino
  178. *
  179. * @param string context jQuery selector
  180. * @return jQuery (chainable)
  181. */
  182. off: function( context ) {
  183. var target = Jetpack.getTarget.call( this, context );
  184. if ( 'undefined' === typeof target ) {
  185. destroyListener();
  186. return target;
  187. }
  188. target.each( function() {
  189. var origin = URLtoOrigin( $( this ).attr( 'src' ) ),
  190. pos = $.inArray( origin, sourceOrigins );
  191. if ( -1 !== pos ) {
  192. sourceOrigins.splice( pos, 1 );
  193. }
  194. } ).removeClass( 'jetpack-resizeable' );
  195. $sources = $( '.jetpack-resizeable' );
  196. return target;
  197. },
  198. /**
  199. * Resize the given iframes
  200. *
  201. * Call statically as: Jetpack.resizeable( 'resize', dimensions, context )
  202. * Call as: $( selector ).Jetpack( 'resizeable', 'resize', dimensions, context ) // context optional: used to filter the collectino
  203. *
  204. * @param object dimensions in pixels: { width: (int), height: (int) }
  205. * @param string context jQuery selector
  206. * @return jQuery (chainable)
  207. */
  208. resize: function( dimensions, context ) {
  209. var target = Jetpack.getTarget.call( this, context );
  210. $.each( [ 'width', 'height' ], function( i, variable ) {
  211. var value = 0,
  212. container;
  213. if ( 'undefined' !== typeof dimensions[variable] ) {
  214. value = parseInt( dimensions[variable], 10 );
  215. }
  216. if ( 0 !== value ) {
  217. target[variable]( value );
  218. container = target.parent();
  219. if ( container.hasClass( 'slim-likes-widget' ) ) {
  220. container[variable]( value );
  221. }
  222. }
  223. } );
  224. return target;
  225. }
  226. };
  227. // Define Jetpack.resizeable() namespace
  228. $.extend( window.Jetpack, {
  229. /**
  230. * Defines the Jetpack.resizeable() namespace.
  231. * See above for trivial definition for browsers with no postMessage.
  232. *
  233. * @param string method
  234. * @param ...
  235. * @return mixed|jQuery (chainable)
  236. */
  237. resizeable: function( method ) {
  238. if ( methods[method] ) {
  239. // Send the call to the correct Jetpack.resizeable() method
  240. return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ) );
  241. } else if ( ! method ) {
  242. // By default, send to Jetpack.resizeable( 'on' ), which isn't useful in that form but is when called as
  243. // jQuery( selector ).Jetpack( 'resizeable' )
  244. return methods.on.apply( this );
  245. } else {
  246. $.error( 'Method ' + method + ' does not exist on Jetpack.resizeable' );
  247. }
  248. }
  249. } );
  250. })(jQuery);