← Back to branch summary

~canonical-sysadmins/wordpress/4.7.2

« back to all changes in this revision

Viewing changes to wp-includes/js/customize-preview.js

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-includes/js/customize-preview.js
 
1
(function( exports, $ ){
 
2
        var api = wp.customize,
 
3
                debounce;
 
4
 
 
5
        /**
 
6
         * Returns a debounced version of the function.
 
7
         *
 
8
         * @todo Require Underscore.js for this file and retire this.
 
9
         */
 
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
 
 
25
        /**
 
26
         * @constructor
 
27
         * @augments wp.customize.Messenger
 
28
         * @augments wp.customize.Class
 
29
         * @mixes wp.customize.Events
 
30
         */
 
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
 
 
70
                var preview, bg;
 
71
 
 
72
                preview = new api.Preview({
 
73
                        url: window.location.href,
 
74
                        channel: api.settings.channel
 
75
                });
 
76
 
 
77
                preview.bind( 'settings', function( values ) {
 
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
 
 
86
                preview.trigger( 'settings', api.settings.values );
 
87
 
 
88
                preview.bind( 'setting', function( args ) {
 
89
                        var value;
 
90
 
 
91
                        args = args.slice();
 
92
 
 
93
                        if ( value = api( args.shift() ) )
 
94
                                value.set.apply( value, args );
 
95
                });
 
96
 
 
97
                preview.bind( 'sync', function( events ) {
 
98
                        $.each( events, function( event, args ) {
 
99
                                preview.trigger( event, args );
 
100
                        });
 
101
                        preview.send( 'synced' );
 
102
                });
 
103
 
 
104
        preview.bind( 'active', function() {
 
105
            if ( api.settings.nonce )
 
106
                preview.send( 'nonce', api.settings.nonce );
 
107
        });
 
108
 
 
109
                preview.send( 'ready', {
 
110
                        activeControls: api.settings.activeControls
 
111
                } );
 
112
 
 
113
                /* Custom Backgrounds */
 
114
                bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
 
115
                        return 'background_' + prop;
 
116
                });
 
117
 
 
118
                api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
 
119
                        var body = $(document.body),
 
120
                                head = $('head'),
 
121
                                style = $('#custom-background-css'),
 
122
                                update;
 
123
 
 
124
                        update = function() {
 
125
                                var css = '';
 
126
 
 
127
                                // The body will support custom backgrounds if either
 
128
                                // the color or image are set.
 
129
                                //
 
130
                                // See get_body_class() in /wp-includes/post-template.php
 
131
                                body.toggleClass( 'custom-background', !! ( color() || image() ) );
 
132
 
 
133
                                if ( color() )
 
134
                                        css += 'background-color: ' + color() + ';';
 
135
 
 
136
                                if ( image() ) {
 
137
                                        css += 'background-image: url("' + image() + '");';
 
138
                                        css += 'background-position: top ' + position_x() + ';';
 
139
                                        css += 'background-repeat: ' + repeat() + ';';
 
140
                                        css += 'background-attachment: ' + attachment() + ';';
 
141
                                }
 
142
 
 
143
                                // Refresh the stylesheet by removing and recreating it.
 
144
                                style.remove();
 
145
                                style = $('<style type="text/css" id="custom-background-css">body.custom-background { ' + css + ' }</style>').appendTo( head );
 
146
                        };
 
147
 
 
148
                        $.each( arguments, function() {
 
149
                                this.bind( update );
 
150
                        });
 
151
                });
 
152
        });
 
153
 
 
154
})( wp, jQuery );