/Web/wp-includes/js/customize-preview.dev.js

https://bitbucket.org/jimjenkins5/blog · JavaScript · 146 lines · 102 code · 30 blank · 14 comment · 10 complexity · 16e10c6310bd62bb63876f0094592ef4 MD5 · raw file

  1. (function( exports, $ ){
  2. var api = wp.customize,
  3. debounce;
  4. debounce = function( fn, delay, context ) {
  5. var timeout;
  6. return function() {
  7. var args = arguments;
  8. context = context || this;
  9. clearTimeout( timeout );
  10. timeout = setTimeout( function() {
  11. timeout = null;
  12. fn.apply( context, args );
  13. }, delay );
  14. };
  15. };
  16. api.Preview = api.Messenger.extend({
  17. /**
  18. * Requires params:
  19. * - url - the URL of preview frame
  20. */
  21. initialize: function( params, options ) {
  22. var self = this;
  23. api.Messenger.prototype.initialize.call( this, params, options );
  24. this.body = $( document.body );
  25. this.body.on( 'click.preview', 'a', function( event ) {
  26. event.preventDefault();
  27. self.send( 'scroll', 0 );
  28. self.send( 'url', $(this).prop('href') );
  29. });
  30. // You cannot submit forms.
  31. // @todo: Allow form submissions by mixing $_POST data with the customize setting $_POST data.
  32. this.body.on( 'submit.preview', 'form', function( event ) {
  33. event.preventDefault();
  34. });
  35. this.window = $( window );
  36. this.window.on( 'scroll.preview', debounce( function() {
  37. self.send( 'scroll', self.window.scrollTop() );
  38. }, 200 ));
  39. this.bind( 'scroll', function( distance ) {
  40. self.window.scrollTop( distance );
  41. });
  42. }
  43. });
  44. $( function() {
  45. api.settings = window._wpCustomizeSettings;
  46. if ( ! api.settings )
  47. return;
  48. var preview, bg;
  49. preview = new api.Preview({
  50. url: window.location.href,
  51. channel: api.settings.channel
  52. });
  53. preview.bind( 'settings', function( values ) {
  54. $.each( values, function( id, value ) {
  55. if ( api.has( id ) )
  56. api( id ).set( value );
  57. else
  58. api.create( id, value );
  59. });
  60. });
  61. preview.trigger( 'settings', api.settings.values );
  62. preview.bind( 'setting', function( args ) {
  63. var value;
  64. args = args.slice();
  65. if ( value = api( args.shift() ) )
  66. value.set.apply( value, args );
  67. });
  68. preview.bind( 'sync', function( events ) {
  69. $.each( events, function( event, args ) {
  70. preview.trigger( event, args );
  71. });
  72. preview.send( 'synced' );
  73. });
  74. preview.bind( 'active', function() {
  75. if ( api.settings.nonce )
  76. preview.send( 'nonce', api.settings.nonce );
  77. });
  78. preview.send( 'ready' );
  79. /* Custom Backgrounds */
  80. bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
  81. return 'background_' + prop;
  82. });
  83. api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
  84. var body = $(document.body),
  85. head = $('head'),
  86. style = $('#custom-background-css'),
  87. update;
  88. // If custom backgrounds are active and we can't find the
  89. // default output, bail.
  90. if ( body.hasClass('custom-background') && ! style.length )
  91. return;
  92. update = function() {
  93. var css = '';
  94. // The body will support custom backgrounds if either
  95. // the color or image are set.
  96. //
  97. // See get_body_class() in /wp-includes/post-template.php
  98. body.toggleClass( 'custom-background', !! ( color() || image() ) );
  99. if ( color() )
  100. css += 'background-color: ' + color() + ';';
  101. if ( image() ) {
  102. css += 'background-image: url("' + image() + '");';
  103. css += 'background-position: top ' + position_x() + ';';
  104. css += 'background-repeat: ' + repeat() + ';';
  105. css += 'background-position: top ' + attachment() + ';';
  106. }
  107. // Refresh the stylesheet by removing and recreating it.
  108. style.remove();
  109. style = $('<style type="text/css" id="custom-background-css">body.custom-background { ' + css + ' }</style>').appendTo( head );
  110. };
  111. $.each( arguments, function() {
  112. this.bind( update );
  113. });
  114. });
  115. });
  116. })( wp, jQuery );