javascript - 有没有在 wagtail-admin 中打开模式窗口的正确方法？

Question

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

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

Answer 1

简短的回答是没有记录的方法来使用现有的 Wagtail 管理模式。

但是，通过查看源代码，可以利用模态工作流来实现您自己的模态。 Wagtail 中的方法是让服务器端模板响应由render_modal_workflow 提供。 .

在客户端，有一个函数可用ModalWorkflow .这将调用 URL 异步并在响应时在模态内呈现 html 内容，它期望由上述 render_modal_workflow 帮助器形成的响应。

根据这些基础知识，可以通过按钮触发器、错误处理、渲染回调和基于模态内部值的回调来添加打开行为。

下面是使用这种方法在管理中呈现模态的最简单示例。

示例

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

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

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())

2。确保加载了 modal-workflow JS 脚本

• 默认情况下，只有处理编辑的页面才会加载模态工作流脚本
• 要将其添加到此特定页面，我们需要覆盖 wagtailadmin/home.html template模板。
• 我们还将添加一些 jquery 来查找任何具有 data-modal-trigger 属性的元素，并添加一个 onClick 监听器，它将调用我们的 ModalWorkflow 函数。此数据可以与任何其他特定数据一起传回模态视图。

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 %}

3。创建一个 View 和 url 来处理模态请求

• 确保有一个 admin/... url，我们可以从中请求模态内容
• 此 url 必须转到返回基于 render_modal_workflow 的响应的 View
• 可以在客户端启动数据，同时对服务器端呈现的模态内容使用正常的 Django 模板响应

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
    )

urls.py

from django.conf.urls import url
from .views import modal_view

urlpatterns = [
    url(r'^admin/modal/', modal_view, name='modal'),
    url(r'^admin/', include(wagtailadmin_urls)),
    # ...
]

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

• Modals 都使用相同的共享标题模板，这提供了一种使其感觉一致的好方法。

templates/base/modal.html

{% include "wagtailadmin/shared/header.html" with title="Modal Title" icon="no-view" %}

<div class="nice-padding">
    <p>Modal Triggered by {{ trigger }}</p>
</div>