button.php
2 weeks ago
form-end.php
2 weeks ago
form-field.php
2 weeks ago
form-label.php
2 weeks ago
form-start.php
2 weeks ago
header.php
2 weeks ago
input-checkbox.php
2 weeks ago
input-date-picker.php
2 weeks ago
input-hidden.php
2 weeks ago
input-image.php
2 weeks ago
input-number.php
2 weeks ago
input-radio.php
2 weeks ago
input-submit.php
2 weeks ago
input-text-multiple.php
2 weeks ago
input-text.php
2 weeks ago
input.php
2 weeks ago
noonce.php
2 weeks ago
paragraph.php
2 weeks ago
product-select.php
2 weeks ago
select.php
2 weeks ago
textarea.php
2 weeks ago
wyswig.php
2 weeks ago
input-image.php
116 lines
| 1 | <?php |
| 2 | |
| 3 | namespace FSVendor; |
| 4 | |
| 5 | /** |
| 6 | * @var \WPDesk\Forms\Field $field |
| 7 | * @var string $name_prefix |
| 8 | * @var string $value |
| 9 | */ |
| 10 | $media_container_id = 'media_' . \sanitize_key($field->get_id()); |
| 11 | ?> |
| 12 | <div class="media-input-wrapper" id="<?php |
| 13 | echo \esc_attr($media_container_id); |
| 14 | ?>"> |
| 15 | <input type="hidden" class="image-field-value" value="<?php |
| 16 | echo \esc_html($value); |
| 17 | ?>" |
| 18 | name="<?php |
| 19 | echo \esc_attr($name_prefix) . '[' . \esc_attr($field->get_name()) . ']'; |
| 20 | ?>" |
| 21 | id="<?php |
| 22 | echo \esc_attr($field->get_id()); |
| 23 | ?>"/> |
| 24 | <div class="custom-img-container"> |
| 25 | <?php |
| 26 | if ($value) { |
| 27 | ?> |
| 28 | <img src="<?php |
| 29 | echo \esc_url($value); |
| 30 | ?>" alt="" width="100"/> |
| 31 | <?php |
| 32 | } |
| 33 | ?> |
| 34 | </div> |
| 35 | <p class="hide-if-no-js"> |
| 36 | <a class="upload-custom-img |
| 37 | <?php |
| 38 | if ($value) { |
| 39 | ?> |
| 40 | hidden<?php |
| 41 | } |
| 42 | ?>" href="<?php |
| 43 | echo \esc_url($value); |
| 44 | ?>"> |
| 45 | <?php |
| 46 | \esc_html_e('Set image', 'flexible-shipping'); |
| 47 | ?> |
| 48 | </a> |
| 49 | <a class="delete-custom-img |
| 50 | <?php |
| 51 | if (!$value) { |
| 52 | ?> |
| 53 | hidden<?php |
| 54 | } |
| 55 | ?>" href="#"> |
| 56 | <?php |
| 57 | \esc_html_e('Remove image', 'flexible-shipping'); |
| 58 | ?> |
| 59 | </a> |
| 60 | </p> |
| 61 | </div> |
| 62 | <script> |
| 63 | jQuery( function ( $ ) { |
| 64 | var frame, |
| 65 | metaBox = $( '#<?php |
| 66 | echo \esc_attr($media_container_id); |
| 67 | ?>' ), |
| 68 | addImgLink = metaBox.find( '.upload-custom-img' ), |
| 69 | delImgLink = metaBox.find( '.delete-custom-img' ), |
| 70 | imgContainer = metaBox.find( '.custom-img-container' ), |
| 71 | imgIdInput = metaBox.find( '.image-field-value' ); |
| 72 | |
| 73 | addImgLink.on( 'click', function ( event ) { |
| 74 | event.preventDefault(); |
| 75 | if ( frame ) { |
| 76 | frame.open(); |
| 77 | return; |
| 78 | } |
| 79 | |
| 80 | frame = wp.media( { |
| 81 | title: "<?php |
| 82 | \esc_html_e('Select or Upload Media', 'flexible-shipping'); |
| 83 | ?>", |
| 84 | button: { |
| 85 | text: "<?php |
| 86 | \esc_html_e('Use this media', 'flexible-shipping'); |
| 87 | ?>" |
| 88 | }, |
| 89 | library: { |
| 90 | type: ['image'] |
| 91 | }, |
| 92 | multiple: false |
| 93 | } ); |
| 94 | |
| 95 | frame.on( 'select', function () { |
| 96 | var attachment = frame.state().get( 'selection' ).first().toJSON(); |
| 97 | imgContainer.append( '<img src="' + attachment.url + '" alt="" width="100" />' ); |
| 98 | imgIdInput.val( attachment.url ); |
| 99 | addImgLink.addClass( 'hidden' ); |
| 100 | delImgLink.removeClass( 'hidden' ); |
| 101 | } ); |
| 102 | frame.open(); |
| 103 | } ); |
| 104 | |
| 105 | delImgLink.on( 'click', function () { |
| 106 | imgContainer.html( '' ); |
| 107 | addImgLink.removeClass( 'hidden' ); |
| 108 | delImgLink.addClass( 'hidden' ); |
| 109 | imgIdInput.val( '' ); |
| 110 | return false; |
| 111 | } ); |
| 112 | |
| 113 | } ); |
| 114 | </script> |
| 115 | <?php |
| 116 |