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