包简介

A MDC Dialog components integrated to Nette

README 文档

README

Material components DIALOG implementation to NETTE Framework.

Idea behind was inspired by Ipublikuj.

Install

The best way to get MDCNette dialog is via composer.

php composer.phar require mdcnette/dialog

In config add MDCNette dialog extension.

extensions:
    mdcdialog: MDCNette\Dialog\DI\DialogExtension

Client side (js/css)

And finally you need to setup javascript... The best approach is to install it with npm.

npm install @mdcnette/dialog

or you can find it in this repo in client-side folder.

in dist folder you can find files to include.

material-components-web.min.css

(styles for dialog and all of other material components) link this to your head in html layout.

material-components-web.min.js

(base js for dialog and all of other material components) add this to your script load.

mdcnette.ajax.dialog.js /or/ mdcnette.noajax.dialog.js

(js for dialog) add this to you script load.

@layout.latte preview

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path/to/material-components-web.min.css" type="text/css">
    
    <!--Optionaly you will want google fonts and icons-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
{include content}

<script src="path/to/material-components-web.min.js" type="text/javascript"></script>

<!--AJAX-->
<script src="path/to/nette.ajax.js" type="text/javascript"></script>
<script src="path/to/mdcnette.ajax.dialog.js" type="text/javascript"></script>
// Do not forget to initialize nette.ajax...
<!--or NO AJAX-->
<script src="path/to/mdcnette.noajax.dialog.js" type="text/javascript"></script>
</body>

</html>

After this you can start using material snackbar!

Usage

In presenter add Trait (normally in BasePresenter)

use MDCNette\Dialog\TDialog;

Wherever you want to have dialog, create component for it.

public function createComponentPermissionDialog() {
    $dialog = $this->dialogFactory->create();

    $dialog->addDialog(
        'add',                                                              // Name
        'Are you sure?',                                                    // Title    
        'You cannot take this action back'                                  // Optional Message
        ['add permission' => [$this, 'addPermission'], 'dismiss' => null]   // Actions ['buttonText' => [callable] || null]
    );

    return $dialog;
}

public function addPermission(MDCNette\Dialog\Components\Dialog, int $id){
    // doMagic
}

In template.

{control permissionDialog}
<a n:href="permissionDialog:add! id => $userId">Snackbar</a>

And you are good to go!

How to chain dialogs

Dialogs can be chained.

use MDCNette\Dialog\TDialog;

public function createComponentPermissionDialog() {
    $dialog = $this->dialogFactory->create();

    $dialog->addDialog(
        'add',
        'Giving important permission',
        [$this, 'getMessage'], // you can also add calback as message (title also)
        ['add permission' => [$this, 'addPermission'], 'nope' => null]
    );

    $dialog->addDialog(
        'addForce',
        'Are you sure?',
        'This user is badass! You cannot take this action back!'
        ['force add' => [$this, 'addForcePermission'], 'i made my mind' => null]
    );

    return $dialog;
}

public function getMessage(MDCNette\Dialog\Components\Dialog $dialog, int $id) {
    $user = //GET USER BY $id 
    return 'Do you want to give admin permission to '. $user['name'] . ' ' . $user['surname'];  
}

public function addPermission(int $id) {
    if (/*check User*/) {
        $this['permissionDialog']->showDialog('addForce', ['id' => $id]);
    }
}

public function addForcePermission(int $id) {
    //DO MAGIC HERE
}

Options

There are some options which you can set up in config

extensions:
    mdcdialog: MDCNette\Dialog\DI\DialogExtension
    
mdcdialog:
    ajax: true       # default value (boolean)
    scrolling: false # default value (boolean)
    icon: false      # default value (string - material icon name)
    button: dismiss  # default value (string)

ajax makes form submitting over ajax
scrolling makes content scrollable
- scrolling is made for long text inside dialog. For more information take a look for material component dialog
icon adds material icons in front of title
if button is not specify there will be one button with no actions = just to close dialog

Or you can set up inside component.

public function createComponentPermissionDialog() {
    $dialog = $this->dialogFactory->create();

    $dialog->setAjax(true);
    $dialog->setScrolling(false);
    $dialog->setIcon('stars');

    return $dialog;
}

Or for individual dialog.

public function createComponentPermissionDialog() {
    $dialog = $this->dialogFactory->create();

    $dialog->addDialog('add',[$this, 'addPermission'],'Are you sure?');
    
    $dialog->getDialog('add')->setAjax(true);
    $dialog->getDialog('add')->setScrolling(false);
    $dialog->getDialog('add')->setIcon('stars');

    return $dialog;
}

mdcnette/dialog 适用场景与选型建议

mdcnette/dialog 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 74 次下载、GitHub Stars 达 0，最近一次更新时间为 2017 年 06 月 14 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「nette」「dialog」「material design」「mdc」「components web」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 mdcnette/dialog 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 mdcnette/dialog 我们能提供哪些服务？

定制开发 / 二次开发

基于 mdcnette/dialog 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发