Aucune description

jquery.jetpack-resize.js 8.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  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
  133. .filter( function () {
  134. if ( 'undefined' !== typeof data.name ) {
  135. return this.name === data.name;
  136. } else {
  137. return event.source === this.contentWindow;
  138. }
  139. } )
  140. .first()
  141. .Jetpack( 'resizeable', 'resize', data );
  142. } );
  143. };
  144. /**
  145. * Unbinds global resize postMessage event handler
  146. */
  147. destroyListener = function () {
  148. listening = false;
  149. $( window ).off( 'message.JetpackResizeableIframe' );
  150. sourceOrigins = [];
  151. $( '.jetpack-resizeable' ).removeClass( 'jetpack-resizeable' );
  152. $sources = false;
  153. };
  154. // Methods for Jetpack.resizeable() namespace
  155. methods = {
  156. /**
  157. * Start listening for resize postMessage events on the given iframes
  158. *
  159. * Call statically as: Jetpack.resizeable( 'on', context )
  160. * Call as: $( selector ).Jetpack( 'resizeable', 'on', context ) // context optional: used to filter the collectino
  161. *
  162. * @param string context jQuery selector.
  163. * @return jQuery (chainable)
  164. */
  165. on: function ( context ) {
  166. var target = Jetpack.getTarget.call( this, context );
  167. if ( ! listening ) {
  168. setupListener();
  169. }
  170. target
  171. .each( function () {
  172. sourceOrigins.push( URLtoOrigin( $( this ).attr( 'src' ) ) );
  173. } )
  174. .addClass( 'jetpack-resizeable' );
  175. $sources = $( '.jetpack-resizeable' );
  176. return target;
  177. },
  178. /**
  179. * Stop listening for resize postMessage events on the given iframes
  180. *
  181. * Call statically as: Jetpack.resizeable( 'off', context )
  182. * Call as: $( selector ).Jetpack( 'resizeable', 'off', context ) // context optional: used to filter the collectino
  183. *
  184. * @param string context jQuery selector
  185. * @return jQuery (chainable)
  186. */
  187. off: function ( context ) {
  188. var target = Jetpack.getTarget.call( this, context );
  189. if ( 'undefined' === typeof target ) {
  190. destroyListener();
  191. return target;
  192. }
  193. target
  194. .each( function () {
  195. var origin = URLtoOrigin( $( this ).attr( 'src' ) ),
  196. pos = $.inArray( origin, sourceOrigins );
  197. if ( -1 !== pos ) {
  198. sourceOrigins.splice( pos, 1 );
  199. }
  200. } )
  201. .removeClass( 'jetpack-resizeable' );
  202. $sources = $( '.jetpack-resizeable' );
  203. return target;
  204. },
  205. /**
  206. * Resize the given iframes
  207. *
  208. * Call statically as: Jetpack.resizeable( 'resize', dimensions, context )
  209. * Call as: $( selector ).Jetpack( 'resizeable', 'resize', dimensions, context ) // context optional: used to filter the collectino
  210. *
  211. * @param object dimensions in pixels: { width: (int), height: (int) }
  212. * @param string context jQuery selector
  213. * @return jQuery (chainable)
  214. */
  215. resize: function ( dimensions, context ) {
  216. var target = Jetpack.getTarget.call( this, context );
  217. $.each( [ 'width', 'height' ], function ( i, variable ) {
  218. var value = 0,
  219. container;
  220. if ( 'undefined' !== typeof dimensions[ variable ] ) {
  221. value = parseInt( dimensions[ variable ], 10 );
  222. }
  223. if ( 0 !== value ) {
  224. target[ variable ]( value );
  225. container = target.parent();
  226. if ( container.hasClass( 'slim-likes-widget' ) ) {
  227. container[ variable ]( value );
  228. }
  229. }
  230. } );
  231. return target;
  232. },
  233. };
  234. // Define Jetpack.resizeable() namespace
  235. $.extend( window.Jetpack, {
  236. /**
  237. * Defines the Jetpack.resizeable() namespace.
  238. * See above for trivial definition for browsers with no postMessage.
  239. *
  240. * @param string method
  241. * @param ...
  242. * @return mixed|jQuery (chainable)
  243. */
  244. resizeable: function ( method ) {
  245. if ( methods[ method ] ) {
  246. // Send the call to the correct Jetpack.resizeable() method
  247. return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
  248. } else if ( ! method ) {
  249. // By default, send to Jetpack.resizeable( 'on' ), which isn't useful in that form but is when called as
  250. // jQuery( selector ).Jetpack( 'resizeable' )
  251. return methods.on.apply( this );
  252. } else {
  253. $.error( 'Method ' + method + ' does not exist on Jetpack.resizeable' );
  254. }
  255. },
  256. } );
  257. } )( jQuery );