有没有在 wagtail-admin 中打开模态 window 的正确方法?
Is there a right way to open modal window in wagtail-admin?
我尝试改进我的 wagtail-admin,现在我堆叠起来,因为无法打开模式 window。是的,当然,我可以创建一个带有关闭按钮的 div
,但这不是正确的方法。据我所知,有一个特殊的函数(或对象)负责打开这样的 window.
wagtail-admin的js对象的这种结构没有参考。可能有人知道,该怎么做?或者也许我应该忘记它并通过香草 javascript?
制作我的模态 window
简短的回答是没有记录的方法来使用现有的 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 脚本已加载
- 默认情况下,只有处理编辑的页面才会加载 modal-workflow 脚本
- 要将其添加到此特定页面,我们需要覆盖
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。创建视图和 url 来处理模态请求
- 确保有一个
admin/...
url 我们可以从 请求模态内容
- 这个url必须去一个观点returns一个基于
render_modal_workflow
的回应
- 可以在客户端启动数据,同时对服务器端呈现的模态内容使用正常的 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。设置您的模板以呈现模态内容
- 模态框都使用相同的共享 header 模板,这提供了一种使其感觉一致的好方法。
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>
我尝试改进我的 wagtail-admin,现在我堆叠起来,因为无法打开模式 window。是的,当然,我可以创建一个带有关闭按钮的 div
,但这不是正确的方法。据我所知,有一个特殊的函数(或对象)负责打开这样的 window.
wagtail-admin的js对象的这种结构没有参考。可能有人知道,该怎么做?或者也许我应该忘记它并通过香草 javascript?
制作我的模态 window简短的回答是没有记录的方法来使用现有的 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 脚本已加载
- 默认情况下,只有处理编辑的页面才会加载 modal-workflow 脚本
- 要将其添加到此特定页面,我们需要覆盖
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。创建视图和 url 来处理模态请求
- 确保有一个
admin/...
url 我们可以从 请求模态内容
- 这个url必须去一个观点returns一个基于
render_modal_workflow
的回应
- 可以在客户端启动数据,同时对服务器端呈现的模态内容使用正常的 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。设置您的模板以呈现模态内容
- 模态框都使用相同的共享 header 模板,这提供了一种使其感觉一致的好方法。
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>