/**

[0] Fix | Delete

* Redux Background

[1] Fix | Delete

* Dependencies : jquery, wp media uploader

[2] Fix | Delete

* Feature added by : Dovy Paukstys

[3] Fix | Delete

* Date : 07 Jan 2014

[4] Fix | Delete

*/

[5] Fix | Delete

[6] Fix | Delete

/*global redux_change, wp, redux, colorValidate, jQuery */

[7] Fix | Delete

[8] Fix | Delete

(function( $ ) {

[9] Fix | Delete

'use strict';

[10] Fix | Delete

[11] Fix | Delete

redux.field_objects = redux.field_objects || {};

[12] Fix | Delete

redux.field_objects.background = redux.field_objects.background || {};

[13] Fix | Delete

[14] Fix | Delete

redux.field_objects.background.init = function( selector ) {

[15] Fix | Delete

selector = $.redux.getSelector( selector, 'background' );

[16] Fix | Delete

[17] Fix | Delete

$( selector ).each(

[18] Fix | Delete

function() {

[19] Fix | Delete

var el = $( this );

[20] Fix | Delete

var parent = el;

[21] Fix | Delete

[22] Fix | Delete

if ( ! el.hasClass( 'redux-field-container' ) ) {

[23] Fix | Delete

parent = el.parents( '.redux-field-container:first' );

[24] Fix | Delete

}

[25] Fix | Delete

[26] Fix | Delete

if ( parent.is( ':hidden' ) ) {

[27] Fix | Delete

return;

[28] Fix | Delete

}

[29] Fix | Delete

[30] Fix | Delete

if ( parent.hasClass( 'redux-field-init' ) ) {

[31] Fix | Delete

parent.removeClass( 'redux-field-init' );

[32] Fix | Delete

} else {

[33] Fix | Delete

return;

[34] Fix | Delete

}

[35] Fix | Delete

[36] Fix | Delete

// Remove the image button.

[37] Fix | Delete

el.find( '.redux-remove-background' ).off( 'click' ).on(

[38] Fix | Delete

'click',

[39] Fix | Delete

function( e ) {

[40] Fix | Delete

e.preventDefault();

[41] Fix | Delete

redux.field_objects.background.removeImage( $( this ).parents( '.redux-container-background:first' ) );

[42] Fix | Delete

redux.field_objects.background.preview( $( this ) );

[43] Fix | Delete

return false;

[44] Fix | Delete

}

[45] Fix | Delete

);

[46] Fix | Delete

[47] Fix | Delete

// Upload media button.

[48] Fix | Delete

el.find( '.redux-background-upload' ).off().on(

[49] Fix | Delete

'click',

[50] Fix | Delete

function( event ) {

[51] Fix | Delete

redux.field_objects.background.addImage( event, $( this ).parents( '.redux-container-background:first' ) );

[52] Fix | Delete

}

[53] Fix | Delete

);

[54] Fix | Delete

[55] Fix | Delete

el.find( '.redux-background-input' ).on(

[56] Fix | Delete

'change',

[57] Fix | Delete

function() {

[58] Fix | Delete

redux.field_objects.background.preview( $( this ) );

[59] Fix | Delete

}

[60] Fix | Delete

);

[61] Fix | Delete

[62] Fix | Delete

el.find( '.redux-color' ).wpColorPicker(

[63] Fix | Delete

{

[64] Fix | Delete

change: function( e, ui ) {

[65] Fix | Delete

$( this ).val( ui.color.toString() );

[66] Fix | Delete

redux_change( $( this ) );

[67] Fix | Delete

$( '#' + e.target.id + '-transparency' ).prop( 'checked', false );

[68] Fix | Delete

redux.field_objects.background.preview( $( this ) );

[69] Fix | Delete

},

[70] Fix | Delete

[71] Fix | Delete

clear: function( e ) {

[72] Fix | Delete

e = null;

[73] Fix | Delete

redux_change( $( this ).parent().find( '.redux-color-init' ) );

[74] Fix | Delete

redux.field_objects.background.preview( $( this ) );

[75] Fix | Delete

}

[76] Fix | Delete

}

[77] Fix | Delete

);

[78] Fix | Delete

[79] Fix | Delete

// Replace and validate field on blur.

[80] Fix | Delete

el.find( '.redux-color' ).on(

[81] Fix | Delete

'blur',

[82] Fix | Delete

function() {

[83] Fix | Delete

var value = $( this ).val();

[84] Fix | Delete

var id = '#' + $( this ).attr( 'id' );

[85] Fix | Delete

[86] Fix | Delete

if ( 'transparent' === value ) {

[87] Fix | Delete

$( this ).parent().parent().find( '.wp-color-result' ).css( 'background-color', 'transparent' );

[88] Fix | Delete

[89] Fix | Delete

el.find( id + '-transparency' ).prop( 'checked', true );

[90] Fix | Delete

} else {

[91] Fix | Delete

if ( colorValidate( this ) === value ) {

[92] Fix | Delete

if ( 0 !== value.indexOf( '#' ) ) {

[93] Fix | Delete

$( this ).val( $( this ).data( 'oldcolor' ) );

[94] Fix | Delete

}

[95] Fix | Delete

}

[96] Fix | Delete

[97] Fix | Delete

el.find( id + '-transparency' ).prop( 'checked', false );

[98] Fix | Delete

}

[99] Fix | Delete

}

[100] Fix | Delete

);

[101] Fix | Delete

[102] Fix | Delete

el.find( '.redux-color' ).on(

[103] Fix | Delete

'focus',

[104] Fix | Delete

function() {

[105] Fix | Delete

$( this ).data( 'oldcolor', $( this ).val() );

[106] Fix | Delete

}

[107] Fix | Delete

);

[108] Fix | Delete

[109] Fix | Delete

el.find( '.redux-color' ).on(

[110] Fix | Delete

'keyup',

[111] Fix | Delete

function() {

[112] Fix | Delete

var value = $( this ).val();

[113] Fix | Delete

var color = colorValidate( this );

[114] Fix | Delete

var id = '#' + $( this ).attr( 'id' );

[115] Fix | Delete

[116] Fix | Delete

if ( 'transparent' === value ) {

[117] Fix | Delete

$( this ).parent().parent().find( '.wp-color-result' ).css( 'background-color', 'transparent' );

[118] Fix | Delete

el.find( id + '-transparency' ).prop( 'checked', true );

[119] Fix | Delete

} else {

[120] Fix | Delete

el.find( id + '-transparency' ).prop( 'checked', false );

[121] Fix | Delete

[122] Fix | Delete

if ( color && color !== $( this ).val() ) {

[123] Fix | Delete

$( this ).val( color );

[124] Fix | Delete

}

[125] Fix | Delete

}

[126] Fix | Delete

}

[127] Fix | Delete

);

[128] Fix | Delete

[129] Fix | Delete

// When transparency checkbox is clicked.

[130] Fix | Delete

el.find( '.color-transparency' ).on(

[131] Fix | Delete

'click',

[132] Fix | Delete

function() {

[133] Fix | Delete

var prevColor;

[134] Fix | Delete

[135] Fix | Delete

if ( $( this ).is( ':checked' ) ) {

[136] Fix | Delete

el.find( '.redux-saved-color' ).val( $( '#' + $( this ).data( 'id' ) ).val() );

[137] Fix | Delete

el.find( '#' + $( this ).data( 'id' ) ).val( 'transparent' );

[138] Fix | Delete

el.find( '#' + $( this ).data( 'id' ) ).parents( '.redux-field-container' ).find( '.wp-color-result' ).css( 'background-color', 'transparent' );

[139] Fix | Delete

} else {

[140] Fix | Delete

prevColor = $( this ).parents( '.redux-field-container' ).find( '.redux-saved-color' ).val();

[141] Fix | Delete

if ( '' === prevColor ) {

[142] Fix | Delete

prevColor = $( '#' + $( this ).data( 'id' ) ).data( 'default-color' );

[143] Fix | Delete

}

[144] Fix | Delete

el.find( '#' + $( this ).data( 'id' ) ).parents( '.redux-field-container' ).find( '.wp-color-result' ).css( 'background-color', prevColor );

[145] Fix | Delete

el.find( '#' + $( this ).data( 'id' ) ).val( prevColor );

[146] Fix | Delete

}

[147] Fix | Delete

[148] Fix | Delete

redux_change( $( this ) );

[149] Fix | Delete

}

[150] Fix | Delete

);

[151] Fix | Delete

[152] Fix | Delete

el.find( ' .redux-background-repeat, .redux-background-clip, .redux-background-origin, .redux-background-size, .redux-background-attachment, .redux-background-position' ).select2();

[153] Fix | Delete

}

[154] Fix | Delete

);

[155] Fix | Delete

};

[156] Fix | Delete

[157] Fix | Delete

// Update the background preview.

[158] Fix | Delete

redux.field_objects.background.preview = function( selector ) {

[159] Fix | Delete

var css;

[160] Fix | Delete

[161] Fix | Delete

var hide = true;

[162] Fix | Delete

var parent = $( selector ).parents( '.redux-container-background:first' );

[163] Fix | Delete

var preview = $( parent ).find( '.background-preview' );

[164] Fix | Delete

[165] Fix | Delete

if ( ! preview ) { // No preview present.

[166] Fix | Delete

return;

[167] Fix | Delete

}

[168] Fix | Delete

[169] Fix | Delete

css = 'height:' + preview.height() + 'px;';

[170] Fix | Delete

[171] Fix | Delete

$( parent ).find( '.redux-background-input' ).each(

[172] Fix | Delete

function() {

[173] Fix | Delete

var data = $( this ).serializeArray();

[174] Fix | Delete

[175] Fix | Delete

data = data[0];

[176] Fix | Delete

if ( data && data.name.indexOf( '[background-' ) !== - 1 ) {

[177] Fix | Delete

if ( '' !== data.value ) {

[178] Fix | Delete

hide = false;

[179] Fix | Delete

[180] Fix | Delete

data.name = data.name.split( '[background-' );

[181] Fix | Delete

data.name = 'background-' + data.name[1].replace( ']', '' );

[182] Fix | Delete

[183] Fix | Delete

if ( 'background-image' === data.name ) {

[184] Fix | Delete

css += data.name + ':url("' + data.value + '");';

[185] Fix | Delete

} else {

[186] Fix | Delete

css += data.name + ':' + data.value + ';';

[187] Fix | Delete

}

[188] Fix | Delete

}

[189] Fix | Delete

}

[190] Fix | Delete

}

[191] Fix | Delete

);

[192] Fix | Delete

[193] Fix | Delete

if ( ! hide ) {

[194] Fix | Delete

preview.attr( 'style', css ).fadeIn();

[195] Fix | Delete

} else {

[196] Fix | Delete

preview.slideUp();

[197] Fix | Delete

}

[198] Fix | Delete

};

[199] Fix | Delete

[200] Fix | Delete

// Add a file via the wp.media function.

[201] Fix | Delete

redux.field_objects.background.addImage = function( event, selector ) {

[202] Fix | Delete

var frame;

[203] Fix | Delete

var jQueryel = $( this );

[204] Fix | Delete

[205] Fix | Delete

event.preventDefault();

[206] Fix | Delete

[207] Fix | Delete

// If the media frame already exists, reopen it.

[208] Fix | Delete

if ( frame ) {

[209] Fix | Delete

frame.open();

[210] Fix | Delete

return;

[211] Fix | Delete

}

[212] Fix | Delete

[213] Fix | Delete

// Create the media frame.

[214] Fix | Delete

frame = wp.media(

[215] Fix | Delete

{

[216] Fix | Delete

multiple: false,

[217] Fix | Delete

library: {

[218] Fix | Delete

[219] Fix | Delete

},

[220] Fix | Delete

title: jQueryel.data( 'choose' ),

[221] Fix | Delete

button: {

[222] Fix | Delete

text: jQueryel.data( 'update' )

[223] Fix | Delete

[224] Fix | Delete

}

[225] Fix | Delete

}

[226] Fix | Delete

);

[227] Fix | Delete

[228] Fix | Delete

// When an image is selected, run a callback.

[229] Fix | Delete

frame.on(

[230] Fix | Delete

'select',

[231] Fix | Delete

function() {

[232] Fix | Delete

var thumbSrc;

[233] Fix | Delete

var height;

[234] Fix | Delete

var key;

[235] Fix | Delete

var object;

[236] Fix | Delete

[237] Fix | Delete

// Grab the selected attachment.

[238] Fix | Delete

var attachment = frame.state().get( 'selection' ).first();

[239] Fix | Delete

frame.close();

[240] Fix | Delete

[241] Fix | Delete

if ( 'image' !== attachment.attributes.type ) {

[242] Fix | Delete

return;

[243] Fix | Delete

}

[244] Fix | Delete

[245] Fix | Delete

selector.find( '.upload' ).val( attachment.attributes.url );

[246] Fix | Delete

selector.find( '.upload-id' ).val( attachment.attributes.id );

[247] Fix | Delete

selector.find( '.upload-height' ).val( attachment.attributes.height );

[248] Fix | Delete

selector.find( '.upload-width' ).val( attachment.attributes.width );

[249] Fix | Delete

[250] Fix | Delete

redux_change( $( selector ).find( '.upload-id' ) );

[251] Fix | Delete

[252] Fix | Delete

thumbSrc = attachment.attributes.url;

[253] Fix | Delete

[254] Fix | Delete

if ( 'undefined' !== typeof attachment.attributes.sizes && 'undefined' !== typeof attachment.attributes.sizes.thumbnail ) {

[255] Fix | Delete

thumbSrc = attachment.attributes.sizes.thumbnail.url;

[256] Fix | Delete

} else if ( 'undefined' !== typeof attachment.attributes.sizes ) {

[257] Fix | Delete

height = attachment.attributes.height;

[258] Fix | Delete

[259] Fix | Delete

for ( key in attachment.attributes.sizes ) {

[260] Fix | Delete

if ( attachment.attributes.sizes.hasOwnProperty( key ) ) {

[261] Fix | Delete

object = attachment.attributes.sizes[key];

[262] Fix | Delete

if ( object.height < height ) {

[263] Fix | Delete

height = object.height;

[264] Fix | Delete

thumbSrc = object.url;

[265] Fix | Delete

}

[266] Fix | Delete

}

[267] Fix | Delete

}

[268] Fix | Delete

} else {

[269] Fix | Delete

thumbSrc = attachment.attributes.icon;

[270] Fix | Delete

}

[271] Fix | Delete

[272] Fix | Delete

selector.find( '.upload-thumbnail' ).val( thumbSrc );

[273] Fix | Delete

[274] Fix | Delete

if ( ! selector.find( '.upload' ).hasClass( 'noPreview' ) ) {

[275] Fix | Delete

selector.find( '.screenshot' ).empty().hide().append( '<img class="redux-option-image" src="' + thumbSrc + '">' ).slideDown( 'fast' );

[276] Fix | Delete

}

[277] Fix | Delete

[278] Fix | Delete

selector.find( '.redux-remove-background' ).removeClass( 'hide' );

[279] Fix | Delete

selector.find( '.redux-background-input-properties' ).slideDown();

[280] Fix | Delete

[281] Fix | Delete

redux.field_objects.background.preview( selector.find( '.upload' ) );

[282] Fix | Delete

}

[283] Fix | Delete

);

[284] Fix | Delete

[285] Fix | Delete

// Finally, open the modal.

[286] Fix | Delete

frame.open();

[287] Fix | Delete

};

[288] Fix | Delete

[289] Fix | Delete

// Update the background preview.

[290] Fix | Delete

redux.field_objects.background.removeImage = function( selector ) {

[291] Fix | Delete

var screenshot;

[292] Fix | Delete

[293] Fix | Delete

// This shouldn't have been run...

[294] Fix | Delete

if ( ! selector.find( '.redux-remove-background' ).addClass( 'hide' ) ) {

[295] Fix | Delete

return;

[296] Fix | Delete

}

[297] Fix | Delete

[298] Fix | Delete

selector.find( '.redux-remove-background' ).addClass( 'hide' ); // Hide "Remove" button.

[299] Fix | Delete

selector.find( '.upload' ).val( '' );

[300] Fix | Delete

selector.find( '.upload-id' ).val( '' );

[301] Fix | Delete

selector.find( '.upload-height' ).val( '' );

[302] Fix | Delete

selector.find( '.upload-width' ).val( '' );

[303] Fix | Delete

[304] Fix | Delete

redux_change( $( selector ).find( '.upload-id' ) );

[305] Fix | Delete

[306] Fix | Delete

selector.find( '.redux-background-input-properties' ).hide();

[307] Fix | Delete

[308] Fix | Delete

screenshot = selector.find( '.screenshot' );

[309] Fix | Delete

[310] Fix | Delete

// Hide the screenshot.

[311] Fix | Delete

screenshot.slideUp();

[312] Fix | Delete

[313] Fix | Delete

selector.find( '.remove-file' ).off();

[314] Fix | Delete

[315] Fix | Delete

// We don't display the upload button if .upload-notice is present

[316] Fix | Delete

// This means the user doesn't have the WordPress 3.5 Media Library Support.

[317] Fix | Delete

if ( $( '.section-upload .upload-notice' ).length > 0 ) {

[318] Fix | Delete

$( '.redux-background-upload' ).remove();

[319] Fix | Delete

}

[320] Fix | Delete

};

[321] Fix | Delete

})( jQuery );

[322] Fix | Delete

[323] Fix | Delete