/wp-includes/js/customize-loader.js

https://bitbucket.org/skyarch-iijima/wordpress · JavaScript · 286 lines · 169 code · 46 blank · 71 comment · 37 complexity · a2c8b624e5fad7d54a01eb87471d66b0 MD5 · raw file

  1. /* global _wpCustomizeLoaderSettings */
  2. /**
  3. * Expose a public API that allows the customizer to be
  4. * loaded on any page.
  5. *
  6. * @namespace wp
  7. */
  8. window.wp = window.wp || {};
  9. (function( exports, $ ){
  10. var api = wp.customize,
  11. Loader;
  12. $.extend( $.support, {
  13. history: !! ( window.history && history.pushState ),
  14. hashchange: ('onhashchange' in window) && (document.documentMode === undefined || document.documentMode > 7)
  15. });
  16. /**
  17. * Allows the Customizer to be overlayed on any page.
  18. *
  19. * By default, any element in the body with the load-customize class will open
  20. * an iframe overlay with the URL specified.
  21. *
  22. * e.g. <a class="load-customize" href="<?php echo wp_customize_url(); ?>">Open Customizer</a>
  23. *
  24. * @memberOf wp.customize
  25. *
  26. * @class
  27. * @augments wp.customize.Events
  28. */
  29. Loader = $.extend( {}, api.Events,/** @lends wp.customize.Loader.prototype */{
  30. /**
  31. * Setup the Loader; triggered on document#ready.
  32. */
  33. initialize: function() {
  34. this.body = $( document.body );
  35. // Ensure the loader is supported.
  36. // Check for settings, postMessage support, and whether we require CORS support.
  37. if ( ! Loader.settings || ! $.support.postMessage || ( ! $.support.cors && Loader.settings.isCrossDomain ) ) {
  38. return;
  39. }
  40. this.window = $( window );
  41. this.element = $( '<div id="customize-container" />' ).appendTo( this.body );
  42. // Bind events for opening and closing the overlay.
  43. this.bind( 'open', this.overlay.show );
  44. this.bind( 'close', this.overlay.hide );
  45. // Any element in the body with the `load-customize` class opens
  46. // the Customizer.
  47. $('#wpbody').on( 'click', '.load-customize', function( event ) {
  48. event.preventDefault();
  49. // Store a reference to the link that opened the Customizer.
  50. Loader.link = $(this);
  51. // Load the theme.
  52. Loader.open( Loader.link.attr('href') );
  53. });
  54. // Add navigation listeners.
  55. if ( $.support.history ) {
  56. this.window.on( 'popstate', Loader.popstate );
  57. }
  58. if ( $.support.hashchange ) {
  59. this.window.on( 'hashchange', Loader.hashchange );
  60. this.window.triggerHandler( 'hashchange' );
  61. }
  62. },
  63. popstate: function( e ) {
  64. var state = e.originalEvent.state;
  65. if ( state && state.customize ) {
  66. Loader.open( state.customize );
  67. } else if ( Loader.active ) {
  68. Loader.close();
  69. }
  70. },
  71. hashchange: function() {
  72. var hash = window.location.toString().split('#')[1];
  73. if ( hash && 0 === hash.indexOf( 'wp_customize=on' ) ) {
  74. Loader.open( Loader.settings.url + '?' + hash );
  75. }
  76. if ( ! hash && ! $.support.history ) {
  77. Loader.close();
  78. }
  79. },
  80. beforeunload: function () {
  81. if ( ! Loader.saved() ) {
  82. return Loader.settings.l10n.saveAlert;
  83. }
  84. },
  85. /**
  86. * Open the Customizer overlay for a specific URL.
  87. *
  88. * @param string src URL to load in the Customizer.
  89. */
  90. open: function( src ) {
  91. if ( this.active ) {
  92. return;
  93. }
  94. // Load the full page on mobile devices.
  95. if ( Loader.settings.browser.mobile ) {
  96. return window.location = src;
  97. }
  98. // Store the document title prior to opening the Live Preview
  99. this.originalDocumentTitle = document.title;
  100. this.active = true;
  101. this.body.addClass('customize-loading');
  102. /*
  103. * Track the dirtiness state (whether the drafted changes have been published)
  104. * of the Customizer in the iframe. This is used to decide whether to display
  105. * an AYS alert if the user tries to close the window before saving changes.
  106. */
  107. this.saved = new api.Value( true );
  108. this.iframe = $( '<iframe />', { 'src': src, 'title': Loader.settings.l10n.mainIframeTitle } ).appendTo( this.element );
  109. this.iframe.one( 'load', this.loaded );
  110. // Create a postMessage connection with the iframe.
  111. this.messenger = new api.Messenger({
  112. url: src,
  113. channel: 'loader',
  114. targetWindow: this.iframe[0].contentWindow
  115. });
  116. // Expose the changeset UUID on the parent window's URL so that the customized state can survive a refresh.
  117. if ( history.replaceState ) {
  118. this.messenger.bind( 'changeset-uuid', function( changesetUuid ) {
  119. var urlParser = document.createElement( 'a' );
  120. urlParser.href = location.href;
  121. urlParser.search = $.param( _.extend(
  122. api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
  123. { changeset_uuid: changesetUuid }
  124. ) );
  125. history.replaceState( { customize: urlParser.href }, '', urlParser.href );
  126. } );
  127. }
  128. // Wait for the connection from the iframe before sending any postMessage events.
  129. this.messenger.bind( 'ready', function() {
  130. Loader.messenger.send( 'back' );
  131. });
  132. this.messenger.bind( 'close', function() {
  133. if ( $.support.history ) {
  134. history.back();
  135. } else if ( $.support.hashchange ) {
  136. window.location.hash = '';
  137. } else {
  138. Loader.close();
  139. }
  140. });
  141. // Prompt AYS dialog when navigating away
  142. $( window ).on( 'beforeunload', this.beforeunload );
  143. this.messenger.bind( 'saved', function () {
  144. Loader.saved( true );
  145. } );
  146. this.messenger.bind( 'change', function () {
  147. Loader.saved( false );
  148. } );
  149. this.messenger.bind( 'title', function( newTitle ){
  150. window.document.title = newTitle;
  151. });
  152. this.pushState( src );
  153. this.trigger( 'open' );
  154. },
  155. pushState: function ( src ) {
  156. var hash = src.split( '?' )[1];
  157. // Ensure we don't call pushState if the user hit the forward button.
  158. if ( $.support.history && window.location.href !== src ) {
  159. history.pushState( { customize: src }, '', src );
  160. } else if ( ! $.support.history && $.support.hashchange && hash ) {
  161. window.location.hash = 'wp_customize=on&' + hash;
  162. }
  163. this.trigger( 'open' );
  164. },
  165. /**
  166. * Callback after the Customizer has been opened.
  167. */
  168. opened: function() {
  169. Loader.body.addClass( 'customize-active full-overlay-active' ).attr( 'aria-busy', 'true' );
  170. },
  171. /**
  172. * Close the Customizer overlay.
  173. */
  174. close: function() {
  175. var self = this, onConfirmClose;
  176. if ( ! self.active ) {
  177. return;
  178. }
  179. onConfirmClose = function( confirmed ) {
  180. if ( confirmed ) {
  181. self.active = false;
  182. self.trigger( 'close' );
  183. // Restore document title prior to opening the Live Preview
  184. if ( self.originalDocumentTitle ) {
  185. document.title = self.originalDocumentTitle;
  186. }
  187. } else {
  188. // Go forward since Customizer is exited by history.back()
  189. history.forward();
  190. }
  191. self.messenger.unbind( 'confirmed-close', onConfirmClose );
  192. };
  193. self.messenger.bind( 'confirmed-close', onConfirmClose );
  194. Loader.messenger.send( 'confirm-close' );
  195. },
  196. /**
  197. * Callback after the Customizer has been closed.
  198. */
  199. closed: function() {
  200. Loader.iframe.remove();
  201. Loader.messenger.destroy();
  202. Loader.iframe = null;
  203. Loader.messenger = null;
  204. Loader.saved = null;
  205. Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
  206. $( window ).off( 'beforeunload', Loader.beforeunload );
  207. /*
  208. * Return focus to the link that opened the Customizer overlay after
  209. * the body element visibility is restored.
  210. */
  211. if ( Loader.link ) {
  212. Loader.link.focus();
  213. }
  214. },
  215. /**
  216. * Callback for the `load` event on the Customizer iframe.
  217. */
  218. loaded: function() {
  219. Loader.body.removeClass( 'customize-loading' ).attr( 'aria-busy', 'false' );
  220. },
  221. /**
  222. * Overlay hide/show utility methods.
  223. */
  224. overlay: {
  225. show: function() {
  226. this.element.fadeIn( 200, Loader.opened );
  227. },
  228. hide: function() {
  229. this.element.fadeOut( 200, Loader.closed );
  230. }
  231. }
  232. });
  233. // Bootstrap the Loader on document#ready.
  234. $( function() {
  235. Loader.settings = _wpCustomizeLoaderSettings;
  236. Loader.initialize();
  237. });
  238. // Expose the API publicly on window.wp.customize.Loader
  239. api.Loader = Loader;
  240. })( wp, jQuery );