javascript - 在选择时验证 Wordpress 媒体附件字段

Question

我们正在扩展/修改媒体上传器 UI（wp.media 框架），以允许在插入帖子之前对媒体文件的某些元数据字段进行基本验证。目的是迫使编辑在上传或选择后始终为任何照片添加功劳。

如果在 media_credit 字段中没有找到数据，验证器会显示警告并隐藏选择按钮，并且还会显示一个复选框以允许编辑者在他们真正想要的情况下覆盖此规则：

我们正在使用wp.media扩展器来扩展和添加框架的 selection.single 事件的验证功能，因为每当从库中选择图像或上传然后自动选择图像时都会触发。我们在此事件中访问附件数据，提取附件.id 并使用此 id 定位 media_credit 字段文本框（<input type="text" class="text" id="attachments-256993-media_credit" name="attachments[256993][media_credit]" value="">）我们面临的问题是此事件中的附件数据在触发此事件时不包含 id 值一个刚刚上传的图像，而不是仅仅从库中选择。

在这种情况下， attachment.id 显示为未定义，但几秒钟后，数据确实出现了。但是代码不能等待附件数据被刷新（因为它不是异步的），因此只能得到未定义。

当前补丁：我添加了一个 setTimeout 处理程序以将处理延迟任意时间（2 秒）并且这有效 - 但当然这不可用，因为延迟有时不足以用于需要超过 2 秒才能上传和处理的较大文件.

理想情况下，我们需要一个回调函数，当图像完全处理并且 attachment.id 可用时调用，我们可以将验证代码放入其中，而不是使用超时构建解决方法。

这是当前的处理程序代码：

( function( $ ) {
    var media_credit = '';
    var selection    = '';
    if ( wp.media ) {

        wp.media.view.Modal.prototype.on( "open", function() {
            if ( typeof wp.media.frame.state() !== 'undefined' ) {
                selection = wp.media.frame.state().get('selection')
            } else if ( typeof wp.media.featuredImage.frame().state('featured-image') !== 'undefined' ) {
                selection = wp.media.featuredImage.frame().state('featured-image').get('selection');
            }
            console.log('state', wp.media.frame.state().get('selection').first());

            if ( selection ) {
                console.log('add', selection);

                selection.on( 'selection:unsingle', function ( attachment ) {
                    console.log('unselected');
                    $('.confirm_field').remove();
                    $('.media-frame-toolbar > .media-toolbar .media-toolbar-secondary .credit-notice').remove();
                });

                selection.on( 'add', function ( attachment ) {

                    console.log('insert add', attachment);

                    var attach_id = '';
                    if (typeof attachment.id !== 'undefined' ) { // this is for selected from library
                        console.log(attachment);
                        attach_id = attachment.id;
                        console.log('attachment.id without delay', attach_id, $('#attachments-' + attach_id + '-media_credit') );
                        media_watch(attach_id);
                    } else {
                        // this is for uploaded
                        attach_id = selection.first().changed.id;
                        console.log('attachment.id with delay', attach_id, $('#attachments-' + attach_id + '-media_credit') );
                        media_watch(attach_id);
                    }

                    function media_watch(aid) {
                        // Check if credit data has value
                        let media_credit = $('#attachments-' + aid + '-media_credit').val();

                        let confirm_field = '<table class="confirm_field"><tr class="compat-field-media_confirm"><th scope="row" class="label"><input type="checkbox" class="checkbox" id="confirmNoCredit" value="yes"></th><td class="field"><label for="confirmNoCredit"><p class="description">Confirm without credit</p></label></td></tr></table>';
                        let notice        = '<div class="credit-notice notice notice-warning notice-alt inline"><p>The selected image has no Credit value. You are advised to add proper Credit. </p></div>';

                        // Hide the select button and show warning message
                        if ( media_credit == '' || ! media_credit ) {
                            $('.media-frame-toolbar > .media-toolbar .media-toolbar-primary').hide();
                            $('.media-sidebar').append(confirm_field);
                            $('.media-frame-toolbar > .media-toolbar > .media-toolbar-secondary').html(notice);
                        } else {
                            $('.media-frame-toolbar > .media-toolbar .media-toolbar-primary').show();
                        }

                        $(document).on('change', '#attachments-' + aid + '-media_credit', function() {
                            console.log('credit value', this.value.length);
                            if(this.value.length == 0) {
                                $('.media-frame-toolbar > .media-toolbar .media-toolbar-primary').hide();
                                $('.confirm_field').remove();
                                $('.media-sidebar').append(confirm_field);
                                $('.media-frame-toolbar > .media-toolbar > .media-toolbar-secondary').html(notice);
                            } else {
                                $('.confirm_field').remove();
                                $('.media-frame-toolbar > .media-toolbar .media-toolbar-primary').show();
                                $('.media-frame-toolbar > .media-toolbar .media-toolbar-secondary .credit-notice').remove();
                            }
                        });

                        // When editor check the checkbox (this is working)
                        $(document).on('change', "#confirmNoCredit", function() {
                            console.log('checked state', this.checked );
                            if(this.checked) {
                                $('.media-frame-toolbar > .media-toolbar .media-toolbar-primary').show();
                                $('.media-frame-toolbar > .media-toolbar .media-toolbar-secondary .credit-notice').remove();
                            } else {
                                $('.media-frame-toolbar > .media-toolbar .media-toolbar-primary').hide();
                                $('.media-frame-toolbar > .media-toolbar > .media-toolbar-secondary').html(notice);
                            }
                        });
                    }

                } );
            }
        });

        // Execute this code when a Modal is closed.
        wp.media.view.Modal.prototype.on( "close", function() {
            $('.credit-notice').remove();
        });

    }
})( jQuery );

标签： javascriptjquerywordpress