| 1 |
/*global redux_change, wp, redux, libFilter */ |
| 2 |
|
| 3 |
/** |
| 4 |
* Media Uploader |
| 5 |
* Dependencies : jquery, wp media uploader |
| 6 |
* Feature added by : Smartik - http://smartik.ws/ |
| 7 |
* Date : 05.28.2013 |
| 8 |
*/ |
| 9 |
|
| 10 |
(function($){ |
| 11 |
"use strict"; |
| 12 |
|
| 13 |
redux.field_objects = redux.field_objects || {}; |
| 14 |
redux.field_objects.media = redux.field_objects.media || {}; |
| 15 |
|
| 16 |
var isFiltered; |
| 17 |
|
| 18 |
redux.field_objects.media.init = function( selector ) { |
| 19 |
if ( !selector ) { |
| 20 |
selector = $( document ).find( ".redux-group-tab:visible" ).find( '.redux-container-media:visible' ); |
| 21 |
} |
| 22 |
$( selector ).each( |
| 23 |
function() { |
| 24 |
var el = $( this ); |
| 25 |
var parent = el; |
| 26 |
|
| 27 |
if ( !el.hasClass( 'redux-field-container' ) ) { |
| 28 |
parent = el.parents( '.redux-field-container:first' ); |
| 29 |
} |
| 30 |
if ( parent.is( ":hidden" ) ) { // Skip hidden fields |
| 31 |
return; |
| 32 |
} |
| 33 |
if ( parent.hasClass( 'redux-field-init' ) ) { |
| 34 |
parent.removeClass( 'redux-field-init' ); |
| 35 |
} else { |
| 36 |
return; |
| 37 |
} |
| 38 |
|
| 39 |
isFiltered = false; |
| 40 |
|
| 41 |
// Remove the image button |
| 42 |
el.find( '.remove-image, .remove-file' ).unbind( 'click' ).on( |
| 43 |
'click', function() { |
| 44 |
redux.field_objects.media.removeFile( $( this ).parents( 'fieldset.redux-field:first' ) ); |
| 45 |
} |
| 46 |
); |
| 47 |
// Upload media button |
| 48 |
el.find( '.media_upload_button' ).unbind().on( |
| 49 |
'click', function( event ) { |
| 50 |
redux.field_objects.media.addFile( event, $( this ).parents( 'fieldset.redux-field:first' ) ); |
| 51 |
} |
| 52 |
); |
| 53 |
} |
| 54 |
); |
| 55 |
}; |
| 56 |
|
| 57 |
// Add a file via the wp.media function |
| 58 |
redux.field_objects.media.addFile = function( event, selector ) { |
| 59 |
event.preventDefault(); |
| 60 |
|
| 61 |
var frame; |
| 62 |
var jQueryel = $( this ); |
| 63 |
var libFilter; |
| 64 |
|
| 65 |
// If the media frame already exists, reopen it. |
| 66 |
if ( frame ) { |
| 67 |
frame.open(); |
| 68 |
return; |
| 69 |
} |
| 70 |
|
| 71 |
// Get library filter data |
| 72 |
var filter = $( selector ).find('.library-filter').data('lib-filter'); |
| 73 |
|
| 74 |
// Must exist to do decoding |
| 75 |
if (filter !== undefined) { |
| 76 |
if (filter !== ''){ |
| 77 |
libFilter = []; |
| 78 |
isFiltered = true; |
| 79 |
filter = decodeURIComponent(filter); |
| 80 |
filter = JSON.parse(filter); |
| 81 |
|
| 82 |
$.each(filter, function(index, value) { |
| 83 |
libFilter.push(value); |
| 84 |
}); |
| 85 |
} |
| 86 |
} |
| 87 |
|
| 88 |
// Create the media frame. |
| 89 |
frame = wp.media( |
| 90 |
{ |
| 91 |
multiple: false, |
| 92 |
library: { |
| 93 |
type: libFilter //Only allow images |
| 94 |
}, |
| 95 |
|
| 96 |
// Set the title of the modal. |
| 97 |
title: jQueryel.data( 'choose' ), |
| 98 |
|
| 99 |
// Customize the submit button. |
| 100 |
button: { |
| 101 |
// Set the text of the button. |
| 102 |
text: jQueryel.data( 'update' ) |
| 103 |
// Tell the button not to close the modal, since we're |
| 104 |
// going to refresh the page when the image is selected. |
| 105 |
} |
| 106 |
} |
| 107 |
); |
| 108 |
|
| 109 |
// When an image is selected, run a callback. |
| 110 |
frame.on( |
| 111 |
'select', function() { |
| 112 |
|
| 113 |
// Grab the selected attachment. |
| 114 |
var attachment = frame.state().get( 'selection' ).first(); |
| 115 |
frame.close(); |
| 116 |
|
| 117 |
var data = $( selector ).find('.data').data(); |
| 118 |
|
| 119 |
if ( typeof redux.field_objects.media === 'undefined' || typeof redux.field_objects.media === undefined ) { |
| 120 |
redux.field_objects.media = {}; |
| 121 |
} |
| 122 |
|
| 123 |
if ( data === undefined || data.mode === 'undefined' ) { |
| 124 |
data = {}; |
| 125 |
data.mode = "image"; |
| 126 |
} |
| 127 |
|
| 128 |
if (isFiltered === true) { |
| 129 |
data.mode = 0; |
| 130 |
} |
| 131 |
|
| 132 |
if (data.mode === 0) { |
| 133 |
|
| 134 |
} else { |
| 135 |
if ( data.mode !== false) { |
| 136 |
if (attachment.attributes.type !== data.mode) { |
| 137 |
if (attachment.attributes.subtype !== data.mode ) { |
| 138 |
return; |
| 139 |
} |
| 140 |
} |
| 141 |
} |
| 142 |
} |
| 143 |
console.log(attachment); |
| 144 |
|
| 145 |
selector.find( '.upload' ).val( attachment.attributes.url ); |
| 146 |
selector.find( '.upload-id' ).val( attachment.attributes.id ); |
| 147 |
selector.find( '.upload-height' ).val( attachment.attributes.height ); |
| 148 |
selector.find( '.upload-width' ).val( attachment.attributes.width ); |
| 149 |
selector.find( '.upload-title' ).val( attachment.attributes.title ); |
| 150 |
selector.find( '.upload-caption' ).val( attachment.attributes.caption ); |
| 151 |
selector.find( '.upload-alt' ).val( attachment.attributes.alt ); |
| 152 |
selector.find( '.upload-description' ).val( attachment.attributes.description ); |
| 153 |
|
| 154 |
redux_change( $( selector ).find( '.upload-id' ) ); |
| 155 |
|
| 156 |
var thumbSrc = attachment.attributes.url; |
| 157 |
if ( typeof attachment.attributes.sizes !== 'undefined' && typeof attachment.attributes.sizes.thumbnail !== 'undefined' ) { |
| 158 |
thumbSrc = attachment.attributes.sizes.thumbnail.url; |
| 159 |
} else if ( typeof attachment.attributes.sizes !== 'undefined' ) { |
| 160 |
var height = attachment.attributes.height; |
| 161 |
|
| 162 |
for ( var key in attachment.attributes.sizes ) { |
| 163 |
var object = attachment.attributes.sizes[key]; |
| 164 |
|
| 165 |
if ( object.height < height ) { |
| 166 |
height = object.height; |
| 167 |
thumbSrc = object.url; |
| 168 |
} |
| 169 |
} |
| 170 |
} else { |
| 171 |
thumbSrc = attachment.attributes.icon; |
| 172 |
} |
| 173 |
|
| 174 |
selector.find( '.upload-thumbnail' ).val( thumbSrc ); |
| 175 |
if ( !selector.find( '.upload' ).hasClass( 'noPreview' ) ) { |
| 176 |
selector.find( '.screenshot' ).empty().hide().append( '<img class="redux-option-image" src="' + thumbSrc + '">' ).slideDown( 'fast' ); |
| 177 |
} |
| 178 |
|
| 179 |
//selector.find('.media_upload_button').unbind(); |
| 180 |
selector.find( '.remove-image' ).removeClass( 'hide' );//show "Remove" button |
| 181 |
selector.find( '.redux-background-properties' ).slideDown(); |
| 182 |
} |
| 183 |
); |
| 184 |
|
| 185 |
// Finally, open the modal. |
| 186 |
frame.open(); |
| 187 |
}; |
| 188 |
|
| 189 |
// Function to remove the image on click. Still requires a save |
| 190 |
redux.field_objects.media.removeFile = function( selector ) { |
| 191 |
|
| 192 |
// This shouldn't have been run... |
| 193 |
if ( !selector.find( '.remove-image' ).addClass( 'hide' ) ) { |
| 194 |
return; |
| 195 |
} |
| 196 |
|
| 197 |
selector.find( '.remove-image' ).addClass( 'hide' );//hide "Remove" button |
| 198 |
selector.find( '.upload' ).val( '' ); |
| 199 |
selector.find( '.upload-id' ).val( '' ); |
| 200 |
selector.find( '.upload-height' ).val( '' ); |
| 201 |
selector.find( '.upload-width' ).val( '' ); |
| 202 |
selector.find( '.upload-title' ).val( '' ); |
| 203 |
selector.find( '.upload-caption' ).val( '' ); |
| 204 |
selector.find( '.upload-alt' ).val( '' ); |
| 205 |
selector.find( '.upload-description' ).val( '' ); |
| 206 |
selector.find( '.upload-thumbnail' ).val( '' ); |
| 207 |
redux_change( $( selector ).find( '.upload-id' ) ); |
| 208 |
selector.find( '.redux-background-properties' ).hide(); |
| 209 |
|
| 210 |
var screenshot = selector.find( '.screenshot' ); |
| 211 |
|
| 212 |
// Hide the screenshot |
| 213 |
screenshot.slideUp(); |
| 214 |
|
| 215 |
selector.find( '.remove-file' ).unbind(); |
| 216 |
|
| 217 |
// We don't display the upload button if .upload-notice is present |
| 218 |
// This means the user doesn't have the WordPress 3.5 Media Library Support |
| 219 |
if ( selector.find( '.section-upload .upload-notice' ).length > 0 ) { |
| 220 |
selector.find( '.media_upload_button' ).remove(); |
| 221 |
} |
| 222 |
}; |
| 223 |
})( jQuery ); |
| 224 |
|
