Plugin Directory

source: elementor/tags/3.18.3/includes/controls/media.php

Last change on this file was 2995350, checked in by KingYes, 17 months ago

Upload v3.18.0-beta1

File size: 11.4 KB
Line 
1<?php
2namespace Elementor;
3
4use Elementor\Core\Files\Uploads_Manager;
5use Elementor\Modules\DynamicTags\Module as TagsModule;
6
7if ( ! defined( 'ABSPATH' ) ) {
8        exit; // Exit if accessed directly.
9}
10
11/**
12 * Elementor media control.
13 *
14 * A base control for creating a media chooser control. Based on the WordPress
15 * media library. Used to select an image from the WordPress media library.
16 *
17 * @since 1.0.0
18 */
19class Control_Media extends Control_Base_Multiple {
20
21        /**
22         * Get media control type.
23         *
24         * Retrieve the control type, in this case `media`.
25         *
26         * @since 1.0.0
27         * @access public
28         *
29         * @return string Control type.
30         */
31        public function get_type() {
32                return 'media';
33        }
34
35        /**
36         * Get media control default values.
37         *
38         * Retrieve the default value of the media control. Used to return the default
39         * values while initializing the media control.
40         *
41         * @since 1.0.0
42         * @access public
43         *
44         * @return array Control default value.
45         */
46        public function get_default_value() {
47                return [
48                        'url' => '',
49                        'id' => '',
50                        'size' => '',
51                ];
52        }
53
54        /**
55         * Import media images.
56         *
57         * Used to import media control files from external sites while importing
58         * Elementor template JSON file, and replacing the old data.
59         *
60         * @since 1.0.0
61         * @access public
62         *
63         * @param array $settings Control settings
64         *
65         * @return array Control settings.
66         */
67        public function on_import( $settings ) {
68                if ( empty( $settings['url'] ) ) {
69                        return $settings;
70                }
71
72                $settings = Plugin::$instance->templates_manager->get_import_images_instance()->import( $settings );
73
74                if ( ! $settings ) {
75                        $settings = [
76                                'id' => '',
77                                'url' => Utils::get_placeholder_image_src(),
78                        ];
79                }
80
81                return $settings;
82        }
83
84        /**
85         * Support SVG and JSON Import
86         *
87         * Called by the 'upload_mimes' filter. Adds SVG and JSON mime types to the list of WordPress' allowed mime types.
88         *
89         * @since 3.4.6
90         * @deprecated 3.5.0
91         *
92         * @param $mimes
93         * @return mixed
94         */
95        public function support_svg_and_json_import( $mimes ) {
96                Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_function( __METHOD__, '3.5.0' );
97
98                return $mimes;
99        }
100
101        /**
102         * Enqueue media control scripts and styles.
103         *
104         * Used to register and enqueue custom scripts and styles used by the media
105         * control.
106         *
107         * @since 1.0.0
108         * @access public
109         */
110        public function enqueue() {
111                global $wp_version;
112
113                $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
114                wp_enqueue_media();
115
116                wp_enqueue_style(
117                        'media',
118                        admin_url( '/css/media' . $suffix . '.css' ),
119                        [],
120                        $wp_version
121                );
122
123                wp_register_script(
124                        'image-edit',
125                        '/wp-admin/js/image-edit' . $suffix . '.js',
126                        [
127                                'jquery',
128                                'json2',
129                                'imgareaselect',
130                        ],
131                        $wp_version,
132                        true
133                );
134
135                wp_enqueue_script( 'image-edit' );
136        }
137
138        /**
139         * Render media control output in the editor.
140         *
141         * Used to generate the control HTML in the editor using Underscore JS
142         * template. The variables for the class are available using `data` JS
143         * object.
144         *
145         * @since 1.0.0
146         * @access public
147         */
148        public function content_template() {
149                ?>
150                <#
151                        // For BC.
152                        if ( data.media_type ) {
153                                data.media_types = [ data.media_type ];
154                        }
155
156                        if ( data.should_include_svg_inline_option ) {
157                                data.media_types.push( 'svg' );
158                        }
159
160                        // Determine if the current media type is viewable.
161                        const isViewable = () => {
162                                const viewable = [
163                                        'image',
164                                        'video',
165                                        'svg',
166                                ];
167
168                                // Make sure that all media types are viewable.
169                                return data.media_types.every( ( type ) => viewable.includes( type ) );
170                        };
171
172                        // Get the preview type for the current media type.
173                        const getPreviewType = () => {
174                                if ( data.media_types.includes( 'video' ) ) {
175                                        return 'video';
176                                }
177
178                                if ( data.media_types.includes( 'image' ) || data.media_types.includes( 'svg' ) ) {
179                                        return 'image';
180                                }
181
182                                return 'none';
183                        }
184
185                        // Retrieve a button label by media type.
186                        const getButtonLabel = ( mediaType ) => {
187                                switch( mediaType ) {
188                                        case 'image':
189                                                return '<?php esc_html_e( 'Choose Image', 'elementor' ); ?>';
190
191                                        case 'video':
192                                                return '<?php esc_html_e( 'Choose Video', 'elementor' ); ?>';
193
194                                        case 'svg':
195                                                return '<?php esc_html_e( 'Choose SVG', 'elementor' ); ?>';
196
197                                        default:
198                                                return '<?php esc_html_e( 'Choose File', 'elementor' ); ?>';
199                                }
200                        }
201                #>
202                <div class="elementor-control-field elementor-control-media">
203                        <label class="elementor-control-title">{{{ data.label }}}</label>
204                        <#
205                        if ( isViewable() ) {
206                                let inputWrapperClasses = 'elementor-control-input-wrapper';
207
208                                if ( ! data.label_block ) {
209                                        inputWrapperClasses += ' elementor-control-unit-5';
210                                }
211                        #>
212                                <div class="{{{ inputWrapperClasses }}}">
213                                        <div class="elementor-control-media__content elementor-control-tag-area elementor-control-preview-area">
214                                                <div class="elementor-control-media-area">
215                                                        <div class="elementor-control-media__remove elementor-control-media__content__remove" title="<?php echo esc_attr__( 'Remove', 'elementor' ); ?>">
216                                                                <i class="eicon-trash-o" aria-hidden="true"></i>
217                                                                <span class="elementor-screen-only"><?php echo esc_html__( 'Remove', 'elementor' ); ?></span>
218                                                        </div>
219                                                        <#
220                                                                switch( getPreviewType() ) {
221                                                                        case 'image':
222                                                                                #>
223                                                                                <div class="elementor-control-media__preview"></div>
224                                                                                <#
225                                                                                break;
226
227                                                                        case 'video':
228                                                                                #>
229                                                                                <video class="elementor-control-media-video" preload="metadata"></video>
230                                                                                <i class="eicon-video-camera" aria-hidden="true"></i>
231                                                                                <#
232                                                                                break;
233                                                                }
234                                                        #>
235                                                </div>
236                                                <div class="elementor-control-media-upload-button elementor-control-media__content__upload-button">
237                                                        <i class="eicon-plus-circle" aria-hidden="true"></i>
238                                                        <span class="elementor-screen-only"><?php echo esc_html__( 'Add', 'elementor' ); ?></span>
239                                                </div>
240                                                <div class="elementor-control-media__tools elementor-control-dynamic-switcher-wrapper">
241                                                        <#
242                                                                data.media_types.forEach( ( type ) => {
243                                                                        #>
244                                                                        <div class="elementor-control-media__tool elementor-control-media__replace" data-media-type="{{{ type }}}">{{{ getButtonLabel( type ) }}}</div>
245                                                                        <#
246                                                                } );
247                                                        #>
248                                                </div>
249                                        </div>
250                                </div>
251                        <# } /* endif isViewable() */ else { #>
252                                <div class="elementor-control-media__file elementor-control-preview-area">
253                                        <div class="elementor-control-media__file__content">
254                                                <div class="elementor-control-media__file__content__label"><?php echo esc_html__( 'Click the media icon to upload file', 'elementor' ); ?></div>
255                                                <div class="elementor-control-media__file__content__info">
256                                                        <div class="elementor-control-media__file__content__info__icon">
257                                                                <i class="eicon-document-file"></i>
258                                                        </div>
259                                                        <div class="elementor-control-media__file__content__info__name"></div>
260                                                </div>
261                                        </div>
262                                        <div class="elementor-control-media__file__controls">
263                                                <div class="elementor-control-media__remove elementor-control-media__file__controls__remove" title="<?php echo esc_attr__( 'Remove', 'elementor' ); ?>">
264                                                        <i class="eicon-trash-o" aria-hidden="true"></i>
265                                                        <span class="elementor-screen-only"><?php echo esc_html__( 'Remove', 'elementor' ); ?></span>
266                                                </div>
267                                                <div class="elementor-control-media__file__controls__upload-button elementor-control-media-upload-button" title="<?php echo esc_attr__( 'Upload', 'elementor' ); ?>">
268                                                        <i class="eicon-upload" aria-hidden="true"></i>
269                                                        <span class="elementor-screen-only"><?php echo esc_html__( 'Upload', 'elementor' ); ?></span>
270                                                </div>
271                                        </div>
272                                </div>
273                        <# } #>
274                        <# if ( data.description ) { #>
275                                <div class="elementor-control-field-description">{{{ data.description }}}</div>
276                        <# } #>
277
278                        <# if ( data.has_sizes ) { #>
279                        <div class="elementor-control-type-select e-control-image-size">
280                                <div class="elementor-control-field">
281                                        <label class="elementor-control-title" data-e-responsive-switcher-sibling="false" for="<?php $this->print_control_uid( 'size' ); ?>"><?php echo esc_html__( 'Image Resolution', 'elementor' ); ?></label>
282                                        <div class="elementor-control-input-wrapper elementor-control-unit-5">
283                                                <select class="e-image-size-select" id="<?php $this->print_control_uid( 'size' ); ?>" data-setting="size">
284                                                        <?php foreach ( $this->get_image_sizes() as $size_key => $size_title ) : ?>
285                                                                <option value="<?php echo esc_attr( $size_key ); ?>"><?php echo esc_html( $size_title ); ?></option>
286                                                        <?php endforeach; ?>
287                                                </select>
288                                        </div>
289                                </div>
290                        </div>
291                        <# } #>
292
293                        <input type="hidden" data-setting="{{ data.name }}"/>
294                </div>
295                <?php
296        }
297
298        private function get_image_sizes() : array {
299                $wp_image_sizes = Group_Control_Image_Size::get_all_image_sizes();
300
301                $image_sizes = [];
302
303                foreach ( $wp_image_sizes as $size_key => $size_attributes ) {
304                        $control_title = ucwords( str_replace( '_', ' ', $size_key ) );
305                        if ( is_array( $size_attributes ) ) {
306                                $control_title .= sprintf( ' - %d x %d', $size_attributes['width'], $size_attributes['height'] );
307                        }
308
309                        $image_sizes[ $size_key ] = $control_title;
310                }
311
312                $image_sizes[''] = esc_html_x( 'Full', 'Image Size Control', 'elementor' );
313
314                return $image_sizes;
315        }
316
317        /**
318         * Get media control default settings.
319         *
320         * Retrieve the default settings of the media control. Used to return the default
321         * settings while initializing the media control.
322         *
323         * @since 1.0.0
324         * @access protected
325         *
326         * @return array Control default settings.
327         */
328        protected function get_default_settings() {
329                return [
330                        'label_block' => true,
331                        'has_sizes' => false,
332                        'ai' => [
333                                'active' => true,
334                                'type' => 'media',
335                                'category' => 'photographic',
336                        ],
337                        'media_types' => [
338                                'image',
339                        ],
340                        'dynamic' => [
341                                'categories' => [ TagsModule::IMAGE_CATEGORY ],
342                                'returnType' => 'object',
343                        ],
344                ];
345        }
346
347        /**
348         * Get media control image title.
349         *
350         * Retrieve the `title` of the image selected by the media control.
351         *
352         * @since 1.0.0
353         * @access public
354         * @static
355         *
356         * @param array $attachment Media attachment.
357         *
358         * @return string Image title.
359         */
360        public static function get_image_title( $attachment ) {
361                if ( empty( $attachment['id'] ) ) {
362                        return '';
363                }
364
365                return get_the_title( $attachment['id'] );
366        }
367
368        /**
369         * Get media control image alt.
370         *
371         * Retrieve the `alt` value of the image selected by the media control.
372         *
373         * @since 1.0.0
374         * @access public
375         * @static
376         *
377         * @param array $instance Media attachment.
378         *
379         * @return string Image alt.
380         */
381        public static function get_image_alt( $instance ) {
382                if ( empty( $instance['id'] ) ) {
383                        // For `Insert From URL` images.
384                        return isset( $instance['alt'] ) ? trim( strip_tags( $instance['alt'] ) ) : '';
385                }
386
387                $attachment_id = $instance['id'];
388                if ( ! $attachment_id ) {
389                        return '';
390                }
391
392                $attachment = get_post( $attachment_id );
393                if ( ! $attachment ) {
394                        return '';
395                }
396
397                $alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
398                if ( ! $alt ) {
399                        $alt = $attachment->post_excerpt;
400                        if ( ! $alt ) {
401                                $alt = $attachment->post_title;
402                        }
403                }
404                return trim( strip_tags( $alt ) );
405        }
406
407        public function get_style_value( $css_property, $control_value, array $control_data ) {
408                if ( 'URL' !== $css_property || empty( $control_value['id'] ) ) {
409                        return parent::get_style_value( $css_property, $control_value, $control_data );
410                }
411
412                if ( empty( $control_value['size'] ) ) {
413                        $control_value['size'] = 'full';
414                }
415
416                return wp_get_attachment_image_url( $control_value['id'], $control_value['size'] );
417        }
418}
Note: See TracBrowser for help on using the repository browser.