Garnish.HUDを開いたときにCraft.HandleGeneratorが機能しない

Craft 3のCPパネルプラグインで作業しています。アイテムの名前を変更または複製するための
Garnish.HUD ウィンドウを作成します。同じウィンドウで、
Craft.HandleGenerator
を使用して、タイトルに基づいて新しいハンドルを生成しています。

HUDを最初に開いたときにハンドルジェネレータが正常に動作しています。
HUDウィンドウを閉じてもう一度開くと、ハンドルジェネレータは機能しません。

enter image description here

Javascriptエラーはスローされません。私は単純な<�​​code> console.log
を表示しようとしましたが、これも表示されません。面白いことに、私は同じビューで異なるHUDウィンドウを持っています。
Craft.HandleGenerator
を使用していないHUDウィンドウの1つを開いて閉じると、そのハンドルジェネレータを使用しているHUDの1つを開くと、ジェネレータも作成に関係なく動作しません最初のインスタンスは、そのHUD内の
new Craft.HandleGenerator( '#name'、
'#prefix')
を呼び出すことです。

enter image description here

私はそれがちょうど異なるHUDウィンドウに関連しているかもしれないと思った。しかし、新しいフィールドを作成するための新しいモーダルウィンドウでも同じ問題があることに気付きました。新しくロードされたページでモーダルを開くと、ハンドルジェネレータは期待どおりに動作しています。しかし、最初にHUDウィンドウを開いたら、もう一度閉じてモーダルウィンドウを開いて、ハンドルジェネレータが動作しない新しいフィールドを作成します。
javascriptエラーや表示されたデバッグ出力がなくても同じです。

enter image description here

私は問題が Garnish.HUD ウィンドウコールに関連付けられていると思います。

// Javascript file
if (typeof Craft.FieldManager === typeof undefined) {
    Craft.FieldManager = {};
}

$(function() {

   //Provide HUD functionality for cloning a group of fields
    Craft.FieldManager.CloneGroup = Garnish.Base.extend({
        $element: null,
        groupId: null,

        $form: null,
        $spinner: null,

        hud: null,

        init: function($element, $data) {
            this.$element = $element;
            this.groupId = $data.data('groupid');

            this.$element.addClass('loading');

            var data = {
                groupId: this.groupId,
                clone: true,
            };

            Craft.postActionRequest('field-manager/base/get-group-modal-body', data, $.proxy(this, 'showHud'));
        },

        showHud: function(response, textStatus) {
            this.$element.removeClass('loading');

            if (response.success) {
                var $hudContents = $();

                this.$form = $('<form/>');
                $('<input type="hidden" name="groupId" value="' + this.groupId + '">').appendTo(this.$form);
                $fieldsContainer = $('<div class="fields"/>').appendTo(this.$form);

                $fieldsContainer.html(response.modalHtml);
                Craft.initUiElements($fieldsContainer);

                var $buttonsOuterContainer = $('<div class="footer"/>').appendTo(this.$form);

                this.$spinner = $('<div class="spinner hidden"/>').appendTo($buttonsOuterContainer);

                var $buttonsContainer = $('<div class="buttons right"/>').appendTo($buttonsOuterContainer);
                $cancelBtn = $('<div class="btn">' + Craft.t('field-manager', 'Cancel') + '</div>').appendTo($buttonsContainer);
                $saveBtn = $('<input class="btn submit" type="submit" value="' + Craft.t('field-manager', 'Clone') + '"/>').appendTo($buttonsContainer);

                $hudContents = $hudContents.add(this.$form);

                this.hud = new Garnish.HUD(this.$element, $hudContents, {
                    bodyClass: 'body',
                    closeOtherHUDs: false
                });

                this.hud.on('hide', $.proxy(function() {
                    delete this.hud;
                }, this));

                this.addListener($saveBtn, 'activate', 'saveGroupField');
                this.addListener($cancelBtn, 'activate', 'closeHud');

               //new Craft.FieldManager.HandleGeneratorWithSuffix('#name', '#prefix');
                new Craft.HandleGenerator('#name', '#prefix');
            }
        },

        saveGroupField: function(ev) {
            ev.preventDefault();

            this.$spinner.removeClass('hidden');

            var data = this.$form.serialize();

            Craft.postActionRequest('field-manager/base/clone-group', data, $.proxy(function(response, textStatus) {
                this.$spinner.addClass('hidden');

                if (response.error) {
                    Garnish.shake(this.hud.$hud);

                    $.each(response.error, function(index, value) {
                        Craft.cp.displayError(value);
                    });
                } else if (response.success) {
                    Craft.cp.displayNotice(Craft.t('field-manager', 'Group cloned.'));
                    location.href = Craft.getUrl('field-manager');

                    this.onFadeOut();
                } else {
                    Craft.cp.displayError(Craft.t('field-manager', 'Could not clone group'));
                }
            }, this));
        },

        closeHud: function() {
            this.hud.hide();
            delete this.hud;
        }
    });

    Craft.FieldManager.EditGroup = Garnish.Base.extend({
        $element: null,
        groupId: null,

        $form: null,
        $spinner: null,

        hud: null,

        init: function($element, $data) {
            this.$element = $element;
            this.groupId = $data.data('groupid');

            this.$element.addClass('loading');

            var data = {
                groupId: this.groupId,
            };

            Craft.postActionRequest('field-manager/base/get-group-modal-body', data, $.proxy(this, 'showHud'));
        },

        showHud: function(response, textStatus) {
            this.$element.removeClass('loading');

            if (response.success) {
                var $hudContents = $();

                this.$form = $('<form/>');
                $('<input type="hidden" name="groupId" value="' + this.groupId + '">').appendTo(this.$form);
                $fieldsContainer = $('<div class="fields"/>').appendTo(this.$form);

                $fieldsContainer.html(response.modalHtml);
                Craft.initUiElements($fieldsContainer);

                var $buttonsOuterContainer = $('<div class="footer"/>').appendTo(this.$form);

                this.$spinner = $('<div class="spinner hidden"/>').appendTo($buttonsOuterContainer);

                var $buttonsContainer = $('<div class="buttons right"/>').appendTo($buttonsOuterContainer);
                $cancelBtn = $('<div class="btn">' + Craft.t('field-manager', 'Cancel') + '</div>').appendTo($buttonsContainer);
                $saveBtn = $('<input class="btn submit" type="submit" value="' + Craft.t('field-manager', 'Save') + '"/>').appendTo($buttonsContainer);

                $hudContents = $hudContents.add(this.$form);

                this.hud = new Garnish.HUD(this.$element, $hudContents, {
                    bodyClass: 'body',
                    closeOtherHUDs: false
                });

                this.hud.on('hide', $.proxy(function() {
                    delete this.hud;
                }, this));

                this.addListener($saveBtn, 'activate', 'saveGroupField');
                this.addListener($cancelBtn, 'activate', 'closeHud');
            }
        },

        saveGroupField: function(ev) {
            ev.preventDefault();

            this.$spinner.removeClass('hidden');

            var data = this.$form.serialize();

            Craft.postActionRequest('fields/save-group', data, $.proxy(function(response, textStatus) {
                this.$spinner.addClass('hidden');

                if (textStatus == 'success' && response.success) {
                    location.href = Craft.getUrl('field-manager');

                    Craft.cp.displayNotice(Craft.t('field-manager', 'Field group updated.'));

                    this.closeHud();
                } else {
                    Garnish.shake(this.hud.$hud);
                }
            }, this));
        },

        closeHud: function() {
            this.hud.hide();
            delete this.hud;
        }
    });



    Craft.FieldManager.CloneField = Garnish.Modal.extend({
        fieldId: null,
        groupId: null,

        $body: null,
        $element: null,
        $buttons: null,
        $cancelBtn: null,
        $saveBtn: null,
        $footerSpinner: null,

        init: function($element, $data) {
            this.$element = $element;
            this.fieldId = $data.data('id');
            this.groupId = $data.data('groupid');

           //Build the modal
            var $container = $('<div class="modal fieldsettingsmodal"></div>').appendTo(Garnish.$bod),
                $body = $('<div class="body"><div class="spinner big"></div></div>').appendTo($container),
                $footer = $('<div class="footer"/>').appendTo($container);

            this.base($container, this.settings);

            this.$footerSpinner = $('<div class="spinner hidden"/>').appendTo($footer);
            this.$buttons = $('<div class="buttons rightalign first"/>').appendTo($footer);
            this.$cancelBtn = $('<div class="btn">'+Craft.t('field-manager', 'Cancel')+'</div>').appendTo(this.$buttons);

            if (!this.fieldId) {
                this.$saveBtn = $('<div class="btn submit">'+Craft.t('field-manager', 'Add field')+'</div>').appendTo(this.$buttons);
            } else {
                this.$saveBtn = $('<div class="btn submit">'+Craft.t('field-manager', 'Clone')+'</div>').appendTo(this.$buttons);
            }

            this.$body = $body;

            this.addListener(this.$cancelBtn, 'activate', 'onFadeOut');
            this.addListener(this.$saveBtn, 'activate', 'saveSettings');
        },

        onFadeIn: function() {
            var data = {
                fieldId: this.fieldId,
                groupId: this.groupId,
            };

            Craft.postActionRequest('field-manager/base/get-field-modal-body', data, $.proxy(function(response, textStatus) {
                if (response.success) {
                    this.$body.html(response.modalHtml);

                    Craft.initUiElements(this.$body);

                    new Craft.HandleGenerator('#name', '#handle');
                }
            }, this));

            this.base();
        },

        onFadeOut: function() {
            this.hide();
            this.destroy();
            this.$shade.remove();
            this.$container.remove();

            this.removeListener(this.$saveBtn, 'click');
            this.removeListener(this.$cancelBtn, 'click');
        },

        saveSettings: function() {
            var params = this.$body.find('form').serializeObject();
            params.fieldId = this.fieldId;

            this.$footerSpinner.removeClass('hidden');

            Craft.postActionRequest('field-manager/base/clone-field', params, $.proxy(function(response, textStatus) {
                this.$footerSpinner.addClass('hidden');

                if (response.error) {
                    $.each(response.error, function(index, value) {
                        Craft.cp.displayError(value);
                    });
                } else if (response.success) {
                    Craft.cp.displayNotice(Craft.t('field-manager', 'Field cloned.'));
                    location.href = Craft.getUrl('field-manager');

                    this.onFadeOut();
                } else {
                    Craft.cp.displayError(Craft.t('field-manager', 'Could not clone field'));
                }

            }, this));

            this.removeListener(this.$saveBtn, 'click');
            this.removeListener(this.$cancelBtn, 'click');
        },

        show: function() {
            this.base();
        }
    });



    Craft.FieldManager.EditField = Garnish.Modal.extend({
        fieldId: null,
        groupId: null,

        $body: null,
        $element: null,
        $buttons: null,
        $cancelBtn: null,
        $saveBtn: null,
        $footerSpinner: null,

        init: function($element, $data) {
            this.$element = $element;

            if ($data) {
                this.fieldId = $data.data('id');
                this.groupId = $data.data('groupid');
            }

           //Build the modal
            var $container = $('<div class="modal fieldsettingsmodal"></div>').appendTo(Garnish.$bod),
                $body = $('<div class="body"><div class="spinner big"></div></div>').appendTo($container),
                $footer = $('<div class="footer"/>').appendTo($container);

            this.base($container, this.settings);

            this.$footerSpinner = $('<div class="spinner hidden"/>').appendTo($footer);
            this.$buttons = $('<div class="buttons rightalign first"/>').appendTo($footer);
            this.$cancelBtn = $('<div class="btn">' + Craft.t('field-manager', 'Cancel') + '</div>').appendTo(this.$buttons);
            this.$saveBtn = $('<div class="btn submit">' + Craft.t('field-manager', 'Save') + '</div>').appendTo(this.$buttons);

            this.$body = $body;

            this.addListener(this.$cancelBtn, 'activate', 'onFadeOut');
            this.addListener(this.$saveBtn, 'activate', 'saveSettings');
        },

        onFadeIn: function() {
            var data = {
                fieldId: this.fieldId,
                groupId: this.groupId,
            };

            Craft.postActionRequest('field-manager/base/get-field-modal-body', data, $.proxy(function(response, textStatus) {
                if (response.success) {
                    this.$body.html(response.modalHtml);
                    Garnish.$bod.append(response.modalJs);

                    Craft.initUiElements(this.$body);

                    new Craft.HandleGenerator('#name', '#handle');
                }
            }, this));

            this.base();
        },

        onFadeOut: function() {
            this.hide();
            this.destroy();
            this.$shade.remove();
            this.$container.remove();

            this.removeListener(this.$saveBtn, 'click');
            this.removeListener(this.$cancelBtn, 'click');
        },

        saveSettings: function() {
            var params = this.$body.find('form').serialize();

            this.$footerSpinner.removeClass('hidden');

            Craft.postActionRequest('field-manager/base/save-field', params, $.proxy(function(response, textStatus) {
                this.$footerSpinner.addClass('hidden');

                if (response.error) {
                    Garnish.shake(this.$container);

                    $.each(response.error, function(index, value) {
                        Craft.cp.displayError(value);
                    });
                } else if (response.success) {
                    Craft.cp.displayNotice(Craft.t('field-manager', 'Field updated.'));
                    location.href = Craft.getUrl('field-manager');

                    this.onFadeOut();
                } else {
                    Garnish.shake(this.$container);
                    Craft.cp.displayError(Craft.t('field-manager', 'Could not update field'));
                }

            }, this));

            this.removeListener(this.$saveBtn, 'click');
            this.removeListener(this.$cancelBtn, 'click');
        },

        show: function() {
            this.base();
        }
    });
});

// HUD template file
{% import "_includes/forms" as forms %}

{{ forms.textField({
    label: "Name" | t ('field-manager'),
    instructions: 'What do you want to name your group?' | t ('field-manager'),
    id: 'name',
    name: 'name',
    required: true,
    autofocus: true,
    value: group.name,
}) }}

{% if clone %}
{{ forms.textField({
    label: "Field Prefix" | t ('field-manager'),
    instructions: 'A prefix for each field's handle in this group. 
Field handles must be unique.' | t ('field-manager'), id: 'prefix', name: 'prefix', required: true, value: prefix, }) }} {% endif %} <input type="hidden" name="id" value="{{ group.id }}" style="display: none;" /> //Modal template file {% import "_includes/forms" as forms %} <div class="content"> <div class="main"> <div class="elements"> <form> <input type="hidden" name="redirect" value="field-manager"> {% if field is defined %} <input type="hidden" name="fieldId" value="{{ field.id }}"> {% endif %} {{ forms.selectField({ first: true, label: "Group"|t('app'), instructions: "Which group should this field be displayed in?"|t('app'), id: 'group', name: 'group', options: groupOptions, value: groupId }) }} {{ forms.textField({ label: "Name"|t('app'), instructions: "What this field will be called in the CP."|t('app'), id: 'name', name: 'name', value: (field is not empty ? field.name : null), errors: (field is not empty ? field.getErrors('name') : null), required: true, translatable: true, autofocus: true }) }} {{ forms.textField({ label: "Handle"|t('app'), instructions: "How you’ll refer to this field in the templates."|t('app'), id: 'handle', class: 'code', name: 'handle', maxlength: 64, value: (field is not empty ? field.handle : null), errors: (field is not empty ? field.getErrors('handle') : null), required: true, }) }} {{ forms.textareaField({ label: "Instructions"|t('app'), instructions: "Helper text to guide the author."|t('app'), id: 'instructions', class: 'nicetext', name: 'inenter code herestructions', value: (field is not empty ? field.instructions : null), errors: (field is not empty ? field.getErrors('instructions') : null), translatable: true }) }} {{ forms.selectField({ label: "Field Type"|t('app'), instructions: "What type of field is this?"|t('app'), warning: (fieldId is not empty and not field.hasErrors('type') ? "Changing this may result in data loss."|t('app')), id: 'type', name: 'type', options: fieldTypeOptions, value: className(field), errors: field.getErrors('type') ?? null, toggle: true }) }} {% if craft.app.getIsMultiSite() %} {% set translationMethods = field.supportedTranslationMethods %} {% if translationMethods|length > 1 %} <div id="translation-settings"> {{ forms.selectField({ label: "Translation Method"|t('app'), instructions: "How should this field’s values be translated?"|t('app'), id: 'translation-method', name: 'translationMethod', options: [ 'none' in translationMethods ? { value: 'none', label: "Not translatable"|t('app') }, 'language' in translationMethods ? { value: 'language', label: "Translate for each language"|t('app') }, 'site' in translationMethods ? { value: 'site', label: "Translate for each site"|t('app') }, 'custom' in translationMethods ? { value: 'custom', label: "Custom…"|t('app') } ]|filter, value: field.translationMethod, toggle: true, targetPrefix: 'translation-method-' }) }} {% if 'custom' in translationMethods %} <div id="translation-method-custom" {% if field.translationMethod != 'custom' %}class="hidden"{% endif %}> {{ forms.textField({ label: "Translation Key Format"|t('app'), instructions: "Template that defines the field’s custom “translation key” format. Field values will be copied to all sites that produce the same key. For example, to make the field translatable based on the first two characters of the site handle, you could enter `{site.handle[:2]}`.", id: 'translation-key-format', name: 'translationKeyFormat', value: field.translationKeyFormat, errors: field.getErrors('translationKeyFormat') }) }} </div> {% endif %} </div> {% endif %} {% endif %}

{% for type in allowedFieldTypes %}
{% set isCurrent = (type == className(field)) %}
<div id="{{ type|id }}"{% if not isCurrent %} class="hidden"{% endif %}>
{% namespace 'types['~type~']' %}
{% set _field = isCurrent ? field : craft.app.fields.createField(type) %}
{{ _field.getSettingsHtml()|raw }}
{% endnamespace %}
</div>
{% endfor %}
</form>
</div>

<div class="centeralign">
    <div class="spinner loadingmore hidden"></div>
    </div>
    </div>
    </div>

{% if field is not defined or not field.handle %}
{% JS %}
new Craft.HandleGenerator('#name', '#handle');
{% endjs %}
{% endif %}

{% JS %}
Craft.supportedTranslationMethods = {{ supportedTranslationMethods|json_encode|raw }};

Craft.updateTranslationMethodSettings = function(type, container) {
    var $container = $(container);
    if (!Craft.supportedTranslationMethods[type] || Craft.supportedTranslationMethods[type].length == 1) {
        $container.addClass('hidden');
    } else {
        $container.removeClass('hidden');
       //Rebuild the options based on the field type's supported translation methods
        $container.find('select').html(
            ($.inArray('none', Craft.supportedTranslationMethods[type]) != -1 ? '
' : '') +
            ($.inArray('language', Craft.supportedTranslationMethods[type]) != -1 ? '
' : '') +
            ($.inArray('site', Craft.supportedTranslationMethods[type]) != -1 ? '
' : '') +
            ($.inArray('custom', Craft.supportedTranslationMethods[type]) != -1 ? '
' : '')
    );
    }
}

var $fieldTypeInput = $("#{{ 'type'|namespaceInputId|e('js') }}"),
    $translationSettings = $("#{{ 'translation-settings'|namespaceInputId|e('js') }}");

$fieldTypeInput.change(function(e) {
    Craft.updateTranslationMethodSettings($(this).val(), $translationSettings);
});
{% endjs %}
ベストアンサー
申し訳ありませんが、適切な答えはありません

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です