redux-background.js (9313B)
1 /** 2 * Redux Background 3 * Dependencies : jquery, wp media uploader 4 * Feature added by : Dovy Paukstys 5 * Date : 07 Jan 2014 6 */ 7 8 /*global redux_change, wp, redux, colorValidate, jQuery */ 9 10 (function( $ ) { 11 'use strict'; 12 13 redux.field_objects = redux.field_objects || {}; 14 redux.field_objects.background = redux.field_objects.background || {}; 15 16 redux.field_objects.background.init = function( selector ) { 17 selector = $.redux.getSelector( selector, 'background' ); 18 19 $( selector ).each( 20 function() { 21 var el = $( this ); 22 var parent = el; 23 24 if ( ! el.hasClass( 'redux-field-container' ) ) { 25 parent = el.parents( '.redux-field-container:first' ); 26 } 27 28 if ( parent.is( ':hidden' ) ) { 29 return; 30 } 31 32 if ( parent.hasClass( 'redux-field-init' ) ) { 33 parent.removeClass( 'redux-field-init' ); 34 } else { 35 return; 36 } 37 38 // Remove the image button. 39 el.find( '.redux-remove-background' ).off( 'click' ).on( 40 'click', 41 function( e ) { 42 e.preventDefault(); 43 redux.field_objects.background.removeImage( $( this ).parents( '.redux-container-background:first' ) ); 44 redux.field_objects.background.preview( $( this ) ); 45 return false; 46 } 47 ); 48 49 // Upload media button. 50 el.find( '.redux-background-upload' ).off().on( 51 'click', 52 function( event ) { 53 redux.field_objects.background.addImage( event, $( this ).parents( '.redux-container-background:first' ) ); 54 } 55 ); 56 57 el.find( '.redux-background-input' ).on( 58 'change', 59 function() { 60 redux.field_objects.background.preview( $( this ) ); 61 } 62 ); 63 64 el.find( '.redux-color' ).wpColorPicker( 65 { 66 change: function( e, ui ) { 67 $( this ).val( ui.color.toString() ); 68 redux_change( $( this ) ); 69 $( '#' + e.target.id + '-transparency' ).removeAttr( 'checked' ); 70 redux.field_objects.background.preview( $( this ) ); 71 }, 72 73 clear: function( e ) { 74 e = null; 75 redux_change( $( this ).parent().find( '.redux-color-init' ) ); 76 redux.field_objects.background.preview( $( this ) ); 77 } 78 } 79 ); 80 81 // Replace and validate field on blur. 82 el.find( '.redux-color' ).on( 83 'blur', 84 function() { 85 var value = $( this ).val(); 86 var id = '#' + $( this ).attr( 'id' ); 87 88 if ( 'transparent' === value ) { 89 $( this ).parent().parent().find( '.wp-color-result' ).css( 'background-color', 'transparent' ); 90 91 el.find( id + '-transparency' ).attr( 'checked', 'checked' ); 92 } else { 93 if ( colorValidate( this ) === value ) { 94 if ( 0 !== value.indexOf( '#' ) ) { 95 $( this ).val( $( this ).data( 'oldcolor' ) ); 96 } 97 } 98 99 el.find( id + '-transparency' ).removeAttr( 'checked' ); 100 } 101 } 102 ); 103 104 el.find( '.redux-color' ).on( 105 'focus', 106 function() { 107 $( this ).data( 'oldcolor', $( this ).val() ); 108 } 109 ); 110 111 el.find( '.redux-color' ).on( 112 'keyup', 113 function() { 114 var value = $( this ).val(); 115 var color = colorValidate( this ); 116 var id = '#' + $( this ).attr( 'id' ); 117 118 if ( 'transparent' === value ) { 119 $( this ).parent().parent().find( '.wp-color-result' ).css( 'background-color', 'transparent' ); 120 el.find( id + '-transparency' ).attr( 'checked', 'checked' ); 121 } else { 122 el.find( id + '-transparency' ).removeAttr( 'checked' ); 123 124 if ( color && color !== $( this ).val() ) { 125 $( this ).val( color ); 126 } 127 } 128 } 129 ); 130 131 // When transparency checkbox is clicked. 132 el.find( '.color-transparency' ).on( 133 'click', 134 function() { 135 var prevColor; 136 137 if ( $( this ).is( ':checked' ) ) { 138 el.find( '.redux-saved-color' ).val( $( '#' + $( this ).data( 'id' ) ).val() ); 139 el.find( '#' + $( this ).data( 'id' ) ).val( 'transparent' ); 140 el.find( '#' + $( this ).data( 'id' ) ).parents( '.redux-field-container' ).find( '.wp-color-result' ).css( 'background-color', 'transparent' ); 141 } else { 142 prevColor = $( this ).parents( '.redux-field-container' ).find( '.redux-saved-color' ).val(); 143 if ( '' === prevColor ) { 144 prevColor = $( '#' + $( this ).data( 'id' ) ).data( 'default-color' ); 145 } 146 el.find( '#' + $( this ).data( 'id' ) ).parents( '.redux-field-container' ).find( '.wp-color-result' ).css( 'background-color', prevColor ); 147 el.find( '#' + $( this ).data( 'id' ) ).val( prevColor ); 148 } 149 150 redux_change( $( this ) ); 151 } 152 ); 153 154 el.find( ' .redux-background-repeat, .redux-background-clip, .redux-background-origin, .redux-background-size, .redux-background-attachment, .redux-background-position' ).select2(); 155 } 156 ); 157 }; 158 159 // Update the background preview. 160 redux.field_objects.background.preview = function( selector ) { 161 var css; 162 163 var hide = true; 164 var parent = $( selector ).parents( '.redux-container-background:first' ); 165 var preview = $( parent ).find( '.background-preview' ); 166 167 if ( ! preview ) { // No preview present. 168 return; 169 } 170 171 css = 'height:' + preview.height() + 'px;'; 172 173 $( parent ).find( '.redux-background-input' ).each( 174 function() { 175 var data = $( this ).serializeArray(); 176 177 data = data[0]; 178 if ( data && data.name.indexOf( '[background-' ) !== - 1 ) { 179 if ( '' !== data.value ) { 180 hide = false; 181 182 data.name = data.name.split( '[background-' ); 183 data.name = 'background-' + data.name[1].replace( ']', '' ); 184 185 if ( 'background-image' === data.name ) { 186 css += data.name + ':url("' + data.value + '");'; 187 } else { 188 css += data.name + ':' + data.value + ';'; 189 } 190 } 191 } 192 } 193 ); 194 195 if ( ! hide ) { 196 preview.attr( 'style', css ).fadeIn(); 197 } else { 198 preview.slideUp(); 199 } 200 }; 201 202 // Add a file via the wp.media function. 203 redux.field_objects.background.addImage = function( event, selector ) { 204 var frame; 205 var jQueryel = $( this ); 206 207 event.preventDefault(); 208 209 // If the media frame already exists, reopen it. 210 if ( frame ) { 211 frame.open(); 212 return; 213 } 214 215 // Create the media frame. 216 frame = wp.media( 217 { 218 multiple: false, 219 library: { 220 221 }, 222 title: jQueryel.data( 'choose' ), 223 button: { 224 text: jQueryel.data( 'update' ) 225 226 } 227 } 228 ); 229 230 // When an image is selected, run a callback. 231 frame.on( 232 'select', 233 function() { 234 var thumbSrc; 235 var height; 236 var key; 237 var object; 238 239 // Grab the selected attachment. 240 var attachment = frame.state().get( 'selection' ).first(); 241 frame.close(); 242 243 if ( 'image' !== attachment.attributes.type ) { 244 return; 245 } 246 247 selector.find( '.upload' ).val( attachment.attributes.url ); 248 selector.find( '.upload-id' ).val( attachment.attributes.id ); 249 selector.find( '.upload-height' ).val( attachment.attributes.height ); 250 selector.find( '.upload-width' ).val( attachment.attributes.width ); 251 252 redux_change( $( selector ).find( '.upload-id' ) ); 253 254 thumbSrc = attachment.attributes.url; 255 256 if ( 'undefined' !== typeof attachment.attributes.sizes && 'undefined' !== typeof attachment.attributes.sizes.thumbnail ) { 257 thumbSrc = attachment.attributes.sizes.thumbnail.url; 258 } else if ( 'undefined' !== typeof attachment.attributes.sizes ) { 259 height = attachment.attributes.height; 260 261 for ( key in attachment.attributes.sizes ) { 262 if ( attachment.attributes.sizes.hasOwnProperty( key ) ) { 263 object = attachment.attributes.sizes[key]; 264 if ( object.height < height ) { 265 height = object.height; 266 thumbSrc = object.url; 267 } 268 } 269 } 270 } else { 271 thumbSrc = attachment.attributes.icon; 272 } 273 274 selector.find( '.upload-thumbnail' ).val( thumbSrc ); 275 276 if ( ! selector.find( '.upload' ).hasClass( 'noPreview' ) ) { 277 selector.find( '.screenshot' ).empty().hide().append( '<img class="redux-option-image" src="' + thumbSrc + '">' ).slideDown( 'fast' ); 278 } 279 280 selector.find( '.redux-remove-background' ).removeClass( 'hide' ); 281 selector.find( '.redux-background-input-properties' ).slideDown(); 282 283 redux.field_objects.background.preview( selector.find( '.upload' ) ); 284 } 285 ); 286 287 // Finally, open the modal. 288 frame.open(); 289 }; 290 291 // Update the background preview. 292 redux.field_objects.background.removeImage = function( selector ) { 293 var screenshot; 294 295 // This shouldn't have been run... 296 if ( ! selector.find( '.redux-remove-background' ).addClass( 'hide' ) ) { 297 return; 298 } 299 300 selector.find( '.redux-remove-background' ).addClass( 'hide' ); // Hide "Remove" button. 301 selector.find( '.upload' ).val( '' ); 302 selector.find( '.upload-id' ).val( '' ); 303 selector.find( '.upload-height' ).val( '' ); 304 selector.find( '.upload-width' ).val( '' ); 305 306 redux_change( $( selector ).find( '.upload-id' ) ); 307 308 selector.find( '.redux-background-input-properties' ).hide(); 309 310 screenshot = selector.find( '.screenshot' ); 311 312 // Hide the screenshot. 313 screenshot.slideUp(); 314 315 selector.find( '.remove-file' ).off(); 316 317 // We don't display the upload button if .upload-notice is present 318 // This means the user doesn't have the WordPress 3.5 Media Library Support. 319 if ( $( '.section-upload .upload-notice' ).length > 0 ) { 320 $( '.redux-background-upload' ).remove(); 321 } 322 }; 323 })( jQuery );