Support » Plugin: ACF Photo Gallery Field » Edit modal=Native UI issues & fix

  • Resolved timoid

    (@timoid)


    I’ve been testing out this plug-in (version 1.7.9) and for the most part it works perfectly. I noticed a slight UI issue that I’ve since patched.

    The bug;
    In your Edit Field Group set Edit modal to Native
    When editing your gallery images click on the pencil icon to edit an image
    >> This opens the native modal as expected
    Closing the modal by way of the close icon (top right) or the ‘Insert into page’ button fails to close the ‘acf-gallery-backdrop’ overlay or unsets the scroll overflow on the page body.

    The solution:
    Edit the acf-photo-gallery-field.js file and adjust the code from line 119 onwards to add the close and submit buttons to the existing code.

    My updated code is;

    $(document).on('click', '#acf-photo-gallery-metabox-edit .acf-edit-photo-gallery button.button-close, div.media-modal button.media-modal-close', function() {
            var id;
            id = $(this).attr('data-close');
            $('#acf-photo-gallery-metabox-edit #acf-photo-gallery-metabox-edit-' + id).fadeOut('fast');
            $('.acf-gallery-backdrop').remove();
            $('body').css('overflow', 'auto');
            return false;
        });
    	
        $(document).on('click', '#acf-photo-gallery-metabox-edit .acf-edit-photo-gallery button.button-primary, div.media-modal-content  button.button-primary', function() {
            var button, field, data, post, attachment, action, nonce, fieldname, form = {};
            button = $(this);
            url = $(this).attr('data-ajaxurl');
            action = 'acf_photo_gallery_edit_save';
            attachment = $(this).attr('data-id');
            fieldname = button.attr('data-fieldname');
    
            $('div.acf-photo-gallery-group-' + fieldname + ' #acf-photo-gallery-metabox-edit-' + attachment + ' .acf-photo-gallery-edit-field').each(function(i, obj) {
                if (obj.name == 'acf-pg-hidden-action') {
                    form['action'] = obj.value;
                } else if (obj.type == 'checkbox') {
                    if ($(this).prop("checked")) {
                        form[obj.name] = obj.value;
                    } else {
                        form[obj.name] = null;
                    }
                } else {
                    form[obj.name] = obj.value;
                }
            });
    
            button.attr('disabled', true).html('Saving...');
            $.post(url, form, function(data) {
                button.attr('disabled', false).html('Save Changes');
                $('#acf-photo-gallery-metabox-edit #acf-photo-gallery-metabox-edit-' + attachment).fadeOut('fast');
                $('.acf-gallery-backdrop').remove();
                $('body').css('overflow', 'auto');
            });
            return false;
        });
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.