aristath /
kirki
| @@ 2-175 (lines=174) @@ | ||
| 1 | /* global kirkiControlLoader */ |
|
| 2 | wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.extend({ |
|
| 3 | ||
| 4 | // When we're finished loading continue processing |
|
| 5 | ready: function() { |
|
| 6 | ||
| 7 | 'use strict'; |
|
| 8 | ||
| 9 | var control = this; |
|
| 10 | ||
| 11 | // Init the control. |
|
| 12 | if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) { |
|
| 13 | kirkiControlLoader( control ); |
|
| 14 | } else { |
|
| 15 | control.initKirkiControl(); |
|
| 16 | } |
|
| 17 | }, |
|
| 18 | ||
| 19 | initKirkiControl: function() { |
|
| 20 | ||
| 21 | var control = this, |
|
| 22 | value = control.getValue(), |
|
| 23 | picker = control.container.find( '.kirki-color-control' ); |
|
| 24 | ||
| 25 | // Hide unnecessary controls if the value doesn't have an image. |
|
| 26 | if ( _.isUndefined( value['background-image'] ) || '' === value['background-image'] ) { |
|
| 27 | control.container.find( '.background-wrapper > .background-repeat' ).hide(); |
|
| 28 | control.container.find( '.background-wrapper > .background-position' ).hide(); |
|
| 29 | control.container.find( '.background-wrapper > .background-size' ).hide(); |
|
| 30 | control.container.find( '.background-wrapper > .background-attachment' ).hide(); |
|
| 31 | } |
|
| 32 | ||
| 33 | // Color. |
|
| 34 | picker.wpColorPicker({ |
|
| 35 | change: function() { |
|
| 36 | setTimeout( function() { |
|
| 37 | control.saveValue( 'background-color', picker.val() ); |
|
| 38 | }, 100 ); |
|
| 39 | } |
|
| 40 | }); |
|
| 41 | ||
| 42 | // Background-Repeat. |
|
| 43 | control.container.on( 'change', '.background-repeat select', function() { |
|
| 44 | control.saveValue( 'background-repeat', jQuery( this ).val() ); |
|
| 45 | }); |
|
| 46 | ||
| 47 | // Background-Size. |
|
| 48 | control.container.on( 'change click', '.background-size input', function() { |
|
| 49 | control.saveValue( 'background-size', jQuery( this ).val() ); |
|
| 50 | }); |
|
| 51 | ||
| 52 | // Background-Position. |
|
| 53 | control.container.on( 'change', '.background-position select', function() { |
|
| 54 | control.saveValue( 'background-position', jQuery( this ).val() ); |
|
| 55 | }); |
|
| 56 | ||
| 57 | // Background-Attachment. |
|
| 58 | control.container.on( 'change click', '.background-attachment input', function() { |
|
| 59 | control.saveValue( 'background-attachment', jQuery( this ).val() ); |
|
| 60 | }); |
|
| 61 | ||
| 62 | // Background-Image. |
|
| 63 | control.container.on( 'click', '.background-image-upload-button', function( e ) { |
|
| 64 | var image = wp.media({ multiple: false }).open().on( 'select', function() { |
|
| 65 | ||
| 66 | // This will return the selected image from the Media Uploader, the result is an object. |
|
| 67 | var uploadedImage = image.state().get( 'selection' ).first(), |
|
| 68 | previewImage = uploadedImage.toJSON().sizes.full.url, |
|
| 69 | imageUrl, |
|
| 70 | imageID, |
|
| 71 | imageWidth, |
|
| 72 | imageHeight, |
|
| 73 | preview, |
|
| 74 | removeButton; |
|
| 75 | ||
| 76 | if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) { |
|
| 77 | previewImage = uploadedImage.toJSON().sizes.medium.url; |
|
| 78 | } else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) { |
|
| 79 | previewImage = uploadedImage.toJSON().sizes.thumbnail.url; |
|
| 80 | } |
|
| 81 | ||
| 82 | imageUrl = uploadedImage.toJSON().sizes.full.url; |
|
| 83 | imageID = uploadedImage.toJSON().id; |
|
| 84 | imageWidth = uploadedImage.toJSON().width; |
|
| 85 | imageHeight = uploadedImage.toJSON().height; |
|
| 86 | ||
| 87 | // Show extra controls if the value has an image. |
|
| 88 | if ( '' !== imageUrl ) { |
|
| 89 | control.container.find( '.background-wrapper > .background-repeat, .background-wrapper > .background-position, .background-wrapper > .background-size, .background-wrapper > .background-attachment' ).show(); |
|
| 90 | } |
|
| 91 | ||
| 92 | control.saveValue( 'background-image', imageUrl ); |
|
| 93 | preview = control.container.find( '.placeholder, .thumbnail' ); |
|
| 94 | removeButton = control.container.find( '.background-image-upload-remove-button' ); |
|
| 95 | ||
| 96 | if ( preview.length ) { |
|
| 97 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' ); |
|
| 98 | } |
|
| 99 | if ( removeButton.length ) { |
|
| 100 | removeButton.show(); |
|
| 101 | } |
|
| 102 | }); |
|
| 103 | ||
| 104 | e.preventDefault(); |
|
| 105 | }); |
|
| 106 | ||
| 107 | control.container.on( 'click', '.background-image-upload-remove-button', function( e ) { |
|
| 108 | ||
| 109 | var preview, |
|
| 110 | removeButton; |
|
| 111 | ||
| 112 | e.preventDefault(); |
|
| 113 | ||
| 114 | control.saveValue( 'background-image', '' ); |
|
| 115 | ||
| 116 | preview = control.container.find( '.placeholder, .thumbnail' ); |
|
| 117 | removeButton = control.container.find( '.background-image-upload-remove-button' ); |
|
| 118 | ||
| 119 | // Hide unnecessary controls. |
|
| 120 | control.container.find( '.background-wrapper > .background-repeat' ).hide(); |
|
| 121 | control.container.find( '.background-wrapper > .background-position' ).hide(); |
|
| 122 | control.container.find( '.background-wrapper > .background-size' ).hide(); |
|
| 123 | control.container.find( '.background-wrapper > .background-attachment' ).hide(); |
|
| 124 | ||
| 125 | if ( preview.length ) { |
|
| 126 | preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' ); |
|
| 127 | } |
|
| 128 | if ( removeButton.length ) { |
|
| 129 | removeButton.hide(); |
|
| 130 | } |
|
| 131 | }); |
|
| 132 | }, |
|
| 133 | ||
| 134 | /** |
|
| 135 | * Gets the value. |
|
| 136 | */ |
|
| 137 | getValue: function() { |
|
| 138 | ||
| 139 | var control = this, |
|
| 140 | value = {}; |
|
| 141 | ||
| 142 | // Make sure everything we're going to need exists. |
|
| 143 | _.each( control.params['default'], function( defaultParamValue, param ) { |
|
| 144 | if ( false !== defaultParamValue ) { |
|
| 145 | value[ param ] = defaultParamValue; |
|
| 146 | if ( ! _.isUndefined( control.setting._value[ param ] ) ) { |
|
| 147 | value[ param ] = control.setting._value[ param ]; |
|
| 148 | } |
|
| 149 | } |
|
| 150 | }); |
|
| 151 | _.each( control.setting._value, function( subValue, param ) { |
|
| 152 | if ( _.isUndefined( value[ param ] ) ) { |
|
| 153 | value[ param ] = subValue; |
|
| 154 | } |
|
| 155 | }); |
|
| 156 | return value; |
|
| 157 | }, |
|
| 158 | ||
| 159 | /** |
|
| 160 | * Saves the value. |
|
| 161 | */ |
|
| 162 | saveValue: function( property, value ) { |
|
| 163 | ||
| 164 | 'use strict'; |
|
| 165 | ||
| 166 | var control = this, |
|
| 167 | input = jQuery( '#customize-control-' + control.id.replace( '[', '-' ).replace( ']', '' ) + ' .background-hidden-value' ), |
|
| 168 | valueJSON = jQuery( input ).val(), |
|
| 169 | valueObj = JSON.parse( valueJSON ); |
|
| 170 | ||
| 171 | valueObj[ property ] = value; |
|
| 172 | control.setting.set( valueObj ); |
|
| 173 | jQuery( input ).attr( 'value', JSON.stringify( valueObj ) ).trigger( 'change' ); |
|
| 174 | } |
|
| 175 | }); |
|
| 176 | ||
| @@ 2-148 (lines=147) @@ | ||
| 1 | /* global kirkiControlLoader */ |
|
| 2 | wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.extend({ |
|
| 3 | ||
| 4 | // When we're finished loading continue processing |
|
| 5 | ready: function() { |
|
| 6 | ||
| 7 | 'use strict'; |
|
| 8 | ||
| 9 | var control = this; |
|
| 10 | ||
| 11 | // Init the control. |
|
| 12 | if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) { |
|
| 13 | kirkiControlLoader( control ); |
|
| 14 | } else { |
|
| 15 | control.initKirkiControl(); |
|
| 16 | } |
|
| 17 | }, |
|
| 18 | ||
| 19 | initKirkiControl: function() { |
|
| 20 | ||
| 21 | var control = this, |
|
| 22 | value = control.setting._value, |
|
| 23 | picker = control.container.find( '.kirki-color-control' ); |
|
| 24 | ||
| 25 | // Hide unnecessary controls if the value doesn't have an image. |
|
| 26 | if ( _.isUndefined( value['background-image'] ) || '' === value['background-image'] ) { |
|
| 27 | control.container.find( '.background-wrapper > .background-repeat' ).hide(); |
|
| 28 | control.container.find( '.background-wrapper > .background-position' ).hide(); |
|
| 29 | control.container.find( '.background-wrapper > .background-size' ).hide(); |
|
| 30 | control.container.find( '.background-wrapper > .background-attachment' ).hide(); |
|
| 31 | } |
|
| 32 | ||
| 33 | // Color. |
|
| 34 | picker.wpColorPicker({ |
|
| 35 | change: function() { |
|
| 36 | setTimeout( function() { |
|
| 37 | control.saveValue( 'background-color', picker.val() ); |
|
| 38 | }, 100 ); |
|
| 39 | } |
|
| 40 | }); |
|
| 41 | ||
| 42 | // Background-Repeat. |
|
| 43 | control.container.on( 'change', '.background-repeat select', function() { |
|
| 44 | control.saveValue( 'background-repeat', jQuery( this ).val() ); |
|
| 45 | }); |
|
| 46 | ||
| 47 | // Background-Size. |
|
| 48 | control.container.on( 'change click', '.background-size input', function() { |
|
| 49 | control.saveValue( 'background-size', jQuery( this ).val() ); |
|
| 50 | }); |
|
| 51 | ||
| 52 | // Background-Position. |
|
| 53 | control.container.on( 'change', '.background-position select', function() { |
|
| 54 | control.saveValue( 'background-position', jQuery( this ).val() ); |
|
| 55 | }); |
|
| 56 | ||
| 57 | // Background-Attachment. |
|
| 58 | control.container.on( 'change click', '.background-attachment input', function() { |
|
| 59 | control.saveValue( 'background-attachment', jQuery( this ).val() ); |
|
| 60 | }); |
|
| 61 | ||
| 62 | // Background-Image. |
|
| 63 | control.container.on( 'click', '.background-image-upload-button', function( e ) { |
|
| 64 | var image = wp.media({ multiple: false }).open().on( 'select', function() { |
|
| 65 | ||
| 66 | // This will return the selected image from the Media Uploader, the result is an object. |
|
| 67 | var uploadedImage = image.state().get( 'selection' ).first(), |
|
| 68 | previewImage = uploadedImage.toJSON().sizes.full.url, |
|
| 69 | imageUrl, |
|
| 70 | imageID, |
|
| 71 | imageWidth, |
|
| 72 | imageHeight, |
|
| 73 | preview, |
|
| 74 | removeButton; |
|
| 75 | ||
| 76 | if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) { |
|
| 77 | previewImage = uploadedImage.toJSON().sizes.medium.url; |
|
| 78 | } else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) { |
|
| 79 | previewImage = uploadedImage.toJSON().sizes.thumbnail.url; |
|
| 80 | } |
|
| 81 | ||
| 82 | imageUrl = uploadedImage.toJSON().sizes.full.url; |
|
| 83 | imageID = uploadedImage.toJSON().id; |
|
| 84 | imageWidth = uploadedImage.toJSON().width; |
|
| 85 | imageHeight = uploadedImage.toJSON().height; |
|
| 86 | ||
| 87 | // Show extra controls if the value has an image. |
|
| 88 | if ( '' !== imageUrl ) { |
|
| 89 | control.container.find( '.background-wrapper > .background-repeat, .background-wrapper > .background-position, .background-wrapper > .background-size, .background-wrapper > .background-attachment' ).show(); |
|
| 90 | } |
|
| 91 | ||
| 92 | control.saveValue( 'background-image', imageUrl ); |
|
| 93 | preview = control.container.find( '.placeholder, .thumbnail' ); |
|
| 94 | removeButton = control.container.find( '.background-image-upload-remove-button' ); |
|
| 95 | ||
| 96 | if ( preview.length ) { |
|
| 97 | preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' ); |
|
| 98 | } |
|
| 99 | if ( removeButton.length ) { |
|
| 100 | removeButton.show(); |
|
| 101 | } |
|
| 102 | }); |
|
| 103 | ||
| 104 | e.preventDefault(); |
|
| 105 | }); |
|
| 106 | ||
| 107 | control.container.on( 'click', '.background-image-upload-remove-button', function( e ) { |
|
| 108 | ||
| 109 | var preview, |
|
| 110 | removeButton; |
|
| 111 | ||
| 112 | e.preventDefault(); |
|
| 113 | ||
| 114 | control.saveValue( 'background-image', '' ); |
|
| 115 | ||
| 116 | preview = control.container.find( '.placeholder, .thumbnail' ); |
|
| 117 | removeButton = control.container.find( '.background-image-upload-remove-button' ); |
|
| 118 | ||
| 119 | // Hide unnecessary controls. |
|
| 120 | control.container.find( '.background-wrapper > .background-repeat' ).hide(); |
|
| 121 | control.container.find( '.background-wrapper > .background-position' ).hide(); |
|
| 122 | control.container.find( '.background-wrapper > .background-size' ).hide(); |
|
| 123 | control.container.find( '.background-wrapper > .background-attachment' ).hide(); |
|
| 124 | ||
| 125 | if ( preview.length ) { |
|
| 126 | preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' ); |
|
| 127 | } |
|
| 128 | if ( removeButton.length ) { |
|
| 129 | removeButton.hide(); |
|
| 130 | } |
|
| 131 | }); |
|
| 132 | }, |
|
| 133 | ||
| 134 | /** |
|
| 135 | * Saves the value. |
|
| 136 | */ |
|
| 137 | saveValue: function( property, value ) { |
|
| 138 | ||
| 139 | var control = this, |
|
| 140 | input = jQuery( '#customize-control-' + control.id.replace( '[', '-' ).replace( ']', '' ) + ' .background-hidden-value' ), |
|
| 141 | val = control.setting._value; |
|
| 142 | ||
| 143 | val[ property ] = value; |
|
| 144 | ||
| 145 | jQuery( input ).attr( 'value', JSON.stringify( val ) ).trigger( 'change' ); |
|
| 146 | control.setting.set( val ); |
|
| 147 | } |
|
| 148 | }); |
|
| 149 | ||
