gromit/oc-popupbuilder-plugin

构建弹出窗口的控制器行为

安装: 172

依赖项: 0

建议者: 0

安全: 0

星标: 10

关注者: 3

分支: 3

开放问题: 0

类型:october-plugin

1.1.1 2023-10-03 13:03 UTC

This package is auto-updated.

Last update: 2024-10-03 15:11:35 UTC


README

插件提供了PopupController控制器行为,以便在OctoberCMS后端页面上轻松创建弹出窗口。

创建弹出窗口

将PopupController行为添加到您的控制器中。

use GromIT\PopupBuilder\Behaviors\PopupController;

class MyController extends Controller
{
    public $implement = [
        PopupController::class
    ]; 
    
    public $popupConfig = 'config_popup.yaml'; 
}

您可以添加多个配置。

public $popupConfig = [
    'popup1' => 'config_popup_1.yaml',
    'popup2' => 'config_popup_2.yaml',
]; 

要渲染打开弹出窗口按钮,请从控制器中调用popupRenderOpenBtn()方法。

popupRenderOpenBtn()接收两个可选参数。第一个是弹出窗口的定义,第二个是用于request-data属性的额外数据。

<?= $this->popupRenderOpenBtn('popup1', [
    'modelId'   => 1,
    'paramName' => 'paramValue',
]) ?>

或者您也可以自己编写HTML。

<button class="btn btn-primary"
        data-control="popup"
        data-handler="onOpenPopup"
        data-size="medium"
        data-request-data="popupDefinition: 'popup1', modelId: '1', paramName: 'paramValue'">
    Open popup
</button>

弹出窗口类型

PopupController支持3种类型的弹出窗口

  • 内容 - 带有静态内容的弹出窗口。

  • 消息 - 带有类似静态消息的弹出窗口。

  • 表单 - 带有自定义表单的弹出窗口。

弹出窗口配置

通用选项

所有类型弹出窗口的通用选项

类型是每个弹出窗口配置必需的。

打开按钮标签是渲染打开弹出窗口按钮必需的。

消息

消息弹出窗口的配置必须包含这两个选项。

内容

内容弹出窗口的配置必须包含内容内容部分

表单

表单弹出窗口的配置必须包含actionOnClick表单选项。

如果您的表单弹出窗口配置有按钮属性,则以下属性将被忽略

  • 操作按钮标签
  • 操作按钮类
  • actionOnClick
  • 加载指示器
  • 确认
  • 成功后关闭
  • 成功回调
  • 请求数据

按钮数组中的每个元素都具有以下属性

覆盖

有覆盖的方法。

public function getPopupFormModel(string $definition, ?string $modelClass): \October\Rain\Database\Model
{
}
public function getPopupContent(string $definition, ?bool $below = false): ?string
{
}
public function getPopupTitle(string $definition): ?string
{
}

您可以使用它来覆盖弹出窗口的标题和内容以及表单弹出窗口的表单模型。

getPopupContent()的以下参数用于覆盖内容下方

复杂示例

以下是一个使用PopupController创建简单向导的示例。为此,您可以使用弹出窗口ID。

# vendor/plugin/controllers/mycontroller/step1_popup.yaml

type: form
openBtnLabel: Start wizard
actionBtnLabel: Submit step1
actionOnClick: onSubmitStep1
form:
    fields:
        first_name:
            label: Name
        last_name:
            label: Surname
popupId: wizard
# vendor/plugin/controllers/mycontroller/step2_popup.yaml

type: form
actionBtnLabel: Submit step2
actionOnClick: onSubmitStep2
inset: true
form:
    fields:
        bio:
            label: Bio
# vendor/plugin/controllers/mycontroller/result_popup.yaml

type: content
content: Will be overriden in controller
inset: true
// vendor/plugin/controllers/MyController.php

use GromIT\PopupBuilder\Behaviors\PopupController;

class MyController extends Controller
{
    public $implement = [
        PopupController::class
    ]; 
    
    public $popupConfig = [
        'step1'        => 'step1_popup.yaml',
        'step2'        => 'step2_popup.yaml',
        'result_popup' => 'result_popup.yaml',
    ];
    
    public function index() {
        
    }
    
    public function onSubmitStep1() {
        // do something with post()
        // #wizard - popupId of step1 popup
        return [
            '#wizard' => $this->popupRender('step2')
        ];
    }
    
    public function onSubmitStep2() {
        // do something with post()
        // #wizard - popupId of step1 popup
        return [
            '#wizard' => $this->popupRender('result_popup')
        ];
    }
    
    public function getPopupContent(string $definition, ?bool $below = false): ?string
    {
        if ($definition === 'result_popup') {
            return '<pre>' . print_r(post(), true) . '</pre>';
        }
        
        return $this->asExtension(PopupController::class)->getPopupContent($definition, $below);
    }
}
<!-- vendor/plugin/controllers/mycontroller/index.htm -->
<?= $this->popupRenderOpenBtn('step1') ?>