在wagtail-admin中有打开模态窗口的正确方法吗？

Question

我试图改善我的wagtail-admin，现在我堆叠了，因为无法打开模式窗口。是的，当然，我可以创建一个带有关闭按钮的div，但这不是正确的方法。据我所知，有一个特殊的函数（或对象）负责打开这样的窗口。

没有关于wagtail-admin的js对象结构的参考。可能有人知道，该怎么做？或者，也许我应该忘记它，仅使用普通javascript制作我的模态窗口？

Answer 1

简短的答案是，没有使用现有Wagtail管理模式的文档记录方法。

但是，只要稍微看一下源代码，就可以利用模态工作流来实现自己的模态。 Wagtail中的方法是让服务器端模板响应由render_modal_workflow提供。

在客户端上，功能可用render_modal_workflow。这将调用URL异步并在响应时在模式内部呈现html内容，它期望由上述ModalWorkflow帮助器形成的响应。

从这些基础知识出发，可以通过按钮触发器，错误处理，呈现回调以及基于模态内部值的回调来添加打开行为。

下面是使用此方法在管理员中呈现模式的一种最简单的示例。

示例

1。呈现一些带有按钮作为触发器的html内容

• 为了示例，我们将在Wagtail主页（仪表板）页面上呈现一个模态。
• 使用ModalWorkflow，我们可以向页面下方的面板中添加一些html。

render_modal_workflow

construct_homepage_panels

2。确保已加载模态工作流JS脚本

• 默认情况下，只有处理编辑的页面才会加载模式工作流程脚本
• 要将其添加到此特定页面，我们需要覆盖construct_homepage_panels模板。
• 我们还将添加一些jquery来查找具有wagtail_hooks.py属性的任何元素，并添加一个

  from django.utils.safestring import mark_safe
  from wagtail.core import hooks
  
  class WelcomePanel:
      order = 110
  
      def render(self):
          return mark_safe("""
          <section class="panel summary nice-padding">
            <h3>Dashboard Panel Section Title</h3>
            <button data-modal-trigger="some-param">Open Modal</button>
          </section>
          """)
  
  @hooks.register('construct_homepage_panels')
  def add_another_welcome_panel(request, panels):
      panels.append(WelcomePanel())

  侦听器，该侦听器将调用我们的wagtailadmin/home.html template函数。该数据可以与任何其他特定数据一起传递回模态视图。

wagtailadmin/home.html

data-modal-trigger

3。创建一个视图和URL以处理模式请求

• 确保有一个onClick网址，我们可以从中请求模式内容
• 此网址必须转到基于ModalWorkflow返回响应的视图>
• 可以在客户端初始化数据，并且可以对服务器端呈现的模式内容使用常规的Django模板响应
templates/wagtailadmin/home.html

{% extends "wagtailadmin/home.html" %}
{% load wagtailadmin_tags %}

{% comment %}
    Javascript declaration added to bring in the modal loader, by default it is only available on edit pages
    example of usage - wagtail/search/templates/wagtailsearch/queries/chooser_field.js
{% endcomment %}

{% block extra_js %}
  {{ block.super }}
  <script src="{% versioned_static 'wagtailadmin/js/modal-workflow.js' %}"></script>
  <script type="text/javascript">
    $(function() {
      $('[data-modal-trigger]').on('click', function(element) {
        /* options passed in 'opts':
          'url' (required): initial
          'responses' (optional): dict of callbacks to be called when the modal content
              calls modal.respond(callbackName, params)
          'onload' (optional): dict of callbacks to be called when loading a step of the workflow.
              The 'step' field in the response identifies the callback to call, passing it the
              modal object and response data as arguments
        */
        ModalWorkflow({
          onError: function(error) { console.log('error', error); },
          url: '/admin/modal/?trigger=' + element.target.dataset.modalTrigger
        });
      });
    });
  </script>
{% endblock %}
admin/...

render_modal_workflow
4。设置模板以呈现模态内容

• 所有模块都使用相同的共享头模板，这提供了一种使它感觉一致的好方法。
views.py

from django.template.response import TemplateResponse

from wagtail.admin.modal_workflow import render_modal_workflow


def modal_view(request):

    return render_modal_workflow(
        request,
        'base/modal.html', # html template
        None, # js template
        {'trigger': request.GET.get('trigger')}, # html template vars
        json_data={'some': 'data'} # js template data
    )