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