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