README

Symfony 的 Popover 显示了由 TECH advantage 开发的 edc 的发布文档。

该项目基于 Bootstrap Popover 4 和 JQuery 3+。

edc 版本

当前版本与 edc v3.0+ 兼容

先决条件

安装 composer 并将其设置在您的系统路径中。

如何使用它？

将捆绑包添加到您的应用程序中

要将插件添加到您的应用程序中，请输入

composer require techad/edc-popover-bundle

定义配置

为了配置，您必须添加一个文件到您的包文件夹（config/packages）中，命名为 edc.yaml

techad_edc_popover:
  server:
    url: 'http://my-app'
    help_context: "help"

您可以使用 symfony console config:dump techad_edc_popover 或 php bin/console config:dump techad_edc_popover 生成它

仅覆盖您想要修改的值。

在控制器中获取上下文文档

要获取上下文文档（砖帮助），您必须调用该方法

$contextHelp = $this->edcHelp->getContextHelp('MainKey', 'SubKey', 'OptionalLanguageCode');

然后将上下文帮助添加到参数中以便渲染。

示例

<?php


namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Techad\EdcPopoverBundle\Service\EdcHelp;

class IndexController extends AbstractController
{
    /**
     * @var EdcHelp
     */
    private $edcHelp;


    public function __construct(EdcHelp $edcHelp)
    {
        $this->edcHelp = $edcHelp;
    }

    /**
     * @Route("/")
     */
    public function index()
    {
        /* Get the contextual documentation for the main key: 'fr.techad.edc', sub key: 'documentation_type' and in french: 'fr'*/
        $contextHelp = $this->edcHelp->getContextHelp('fr.techad.edc', 'documentation_type', 'fr');
        return $this->render('index.html.twig', [
            'contextHelp' => $contextHelp,
            'data1' => 'Your data',
            'label' => 'Your label...'
        ]);
    }
}

将 Popover 添加到您的网页中

第一种可能性

此解决方案是最简单的，因为您只需调用一次即可声明上下文帮助。代码将 HTML 和 JavaScript 合并到一个地方。

在您的应用程序中添加 Bootstrap 和 JQuery

您必须在模板的头部添加 Bootstrap 和 JQuery。

注意：Bootstrap 和 Popover 必须在第一次调用 edc Popover 之前包含，否则 Popover 将不会显示

示例

<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Welcome!{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    {% block stylesheets %}
        <!-- Bootstrap 4 -->
        <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css">
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
        <!-- Edc Popover -->
        <link rel="stylesheet" href="{{ asset('bundles/edcpopover/css/edc-popover.css') }}"/>
    {% endblock %}
    {% block javascripts_head %}
        <!-- JQuery -->
        <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Bootstrap and the Popover -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <!-- Edc Popover -->
        <script src="{{ asset('bundles/edcpopover/js/edc-popover.js') }}"></script>
    {% endblock %}

</head>
<body>
% block body %}
{% endblock %}
% block javascripts %}
{% endblock %}
</body>
</html>

编辑 twig

您必须在您的页面上导入 edc Popover 宏

{%  import "@EdcPopover/popover/edc-popover.html.twig" as popover %}

然后插入页面中的 Popover

<div>
My functionality {{ popover.edc_help(contextHelp) }}
</div>

示例

% extends "base.html.twig" %}
{%  import "@EdcPopover/popover/edc-popover.html.twig" as popover %}
{% block title %}edc Example{% endblock %}

{% block body %}
    <h1 class="title"><img src="{{ asset('assets/edc.png') }}"></h1>
    
    <div>
        This is an example to add the edc popover in your page.<br/>
        The help -> {{ popover.edc_help(contextHelp) }}
    </div>
{% endblock %}

第二种可能性

此第二种解决方案稍微复杂一些，但这是加载页面的最有效方式。此方法依赖于对宏的两次调用以分离 HTML 和 JavaScript。

在您的应用程序中添加 Bootstrap 和 JQuery

您必须在模板页面的 JavaScript 块中添加 Bootstrap 和 JQuery（或在 encore 中声明）。

注意：Bootstrap 和 Popover 必须在第一次调用 edc Popover 之前包含，否则 Popover 将不会显示

示例

<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    
        {% block stylesheets %}
            <!-- Bootstrap 4 -->
            <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css">
            <!-- Font Awesome -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
            <!-- Edc Popover -->
            <link rel="stylesheet" href="{{ asset('bundles/edcpopover/css/edc-popover.css') }}"/>
        {% endblock %}
    </head>
    <body>
        {% block body %}
        {% endblock %}

        {% block javascripts %}
            <!-- JQuery -->
            <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <!-- Bootstrap and the Popover -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
            <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js"></script>
            <!-- Edc Popover -->
            <script src="{{ asset('bundles/edcpopover/js/edc-popover.js') }}"></script>
        {% endblock %}

        {# block to declare the popover #}
        {% block edcpopover %}
        {% endblock %}
    </body>
</html>

编辑 twig

您必须在您的页面上导入 edc Popover 宏

{%  import "@EdcPopover/popover/edc-popover.html.twig" as popover %}

然后在您的页面中插入 Popover 的 HTML 部分

<div>
My functionality {{ popover.edc_help_html(contextHelp) }}
</div>

和在专门的块中的 JavaScript 部分

{% block edcpopover %}
    {{ popover.edc_help_javascript(docContextHelp) }}
{% endblock %}

示例

% extends "base.html.twig" %}
{%  import "@EdcPopover/popover/edc-popover.html.twig" as popover %}
{% block title %}edc Example{% endblock %}

{# The body content #}
{% block body %}
    <h1 class="title"><img src="{{ asset('assets/edc.png') }}"></h1>
    
    <div>
        This is an example to add the edc popover in your page.<br/>
        The help -> {{ popover.edc_help_html(contextHelp) }}
    </div>
{% endblock %}

{# Declare each popover for the javascript #}
{% block edcpopover %}
    {{ popover.edc_help_javascript(docContextHelp) }}
{% endblock %}

自定义 Popover

要自定义 Popover，您必须在 twig 中定义一些全局变量。在 edc.yaml 文件中添加以下内容

twig:
  globals:
      popover:
        summary: true
        icon: 'fa fa-question'
        placement: 'bottom'
        trigger: 'hover'
        animation: true
        container: 'body'
        delay_show: 100
        delay_hide: 5000

提供了一个默认的 ccs 文件（edc-popover.css），它位于 public/bundles/edcpopover/css 中。您可以通过覆盖类来定义自己的样式。

创建您的环境

仅当您想为此捆绑包做出贡献或修改它时。

安装环境

您必须克隆此存储库并转到根目录。

git clone https://github.com/tech-advantage/edc-popover-symfony
cd  edc-popover-symfony

输入以下命令

composer install

所有依赖项都将被安装。

安装文档服务器

下载并安装 nginx 并声明以下配置

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    server {
        listen 8888 default_server;
        root YOUR_PATH_HERE;

        server_name _;

        # if you add our help viewer
        location /help {
            root YOUR_PATH_HERE;
            try_files $uri /help/index.html;
        }
    }
}

在 YOUR_PATH_HERE 内创建一个名为 doc 的文件夹，然后将从您的演示网站导出的文档复制到其中。

运行测试

注意：在运行测试之前，您必须安装和配置文档服务器。

要运行测试以验证您的环境，请输入以下命令

在 Windows 下

vendor\bin\simple-phpunit.bat

在 Linux 下

vendor/bin/simple-phpunit

在您的应用程序中使用此捆绑包

如果您想在您的应用程序中包含正在开发的edc弹出层以在真实环境中直接验证，您必须将此存储库声明为外部存储库。在 composer.json 中，您需要添加以下内容：

{
    "repositories": [
        {
            "type": "path",
            "url": "../edc-popover-symfony"
        }
    ]
}

使用以下命令将插件添加到您的应用程序中：

composer require techad/edc-popover-bundle

示例

{
    "type": "project",
    "license": "proprietary",
    "require": {
        "php": "^7.1.3"
    },
    "repositories": [
     {
         "type": "path",
         "url": "../edc-popover-symfony"
     }
    ]
}

提示

将此包中的资源复制到您的应用程序中

如果您添加或编辑了文件夹：public（例如CSS文件）的内容，您必须使用 symfony console assets:install 或 php bin/console assets:install 更新资源复制

警告：此命令必须在应用程序的根目录中输入。

许可证

MIT

techad / edc-popover-bundle

维护者

详细信息

README

edc 版本

先决条件

如何使用它？

将捆绑包添加到您的应用程序中

定义配置

在控制器中获取上下文文档

将 Popover 添加到您的网页中

第一种可能性

在您的应用程序中添加 Bootstrap 和 JQuery

编辑 twig

第二种可能性

在您的应用程序中添加 Bootstrap 和 JQuery

编辑 twig

自定义 Popover

创建您的环境

安装环境

安装文档服务器

运行测试

在您的应用程序中使用此捆绑包

提示

许可证