Download the PHP package techad/edc-popover-bundle without Composer
On this page you can find all versions of the php package techad/edc-popover-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download techad/edc-popover-bundle
More information about techad/edc-popover-bundle
Files in techad/edc-popover-bundle
Package edc-popover-bundle
Short Description edc Popover for Symfony
License MIT
Homepage https://github.com/tech-advantage/edc-popover-symfony
Informations about the package edc-popover-bundle
edc-popover-symfony
The popover for Symfony shows the published documentation from edc developed by TECH advantage.
This project is based on Bootstrap Popover 4 and JQuery 3+.
edc Version
Current release is compatible with edc v3.0+
Prequisite
Install composer and set it in your system path.
How to use it?
Add the bundle in your application
To add the plugin in your application, type:
Define the configuration
To configure, you have to add a file in your packages folder (config/packages) named edc.yaml
You can generate it with symfony console config:dump techad_edc_popover
or php bin/console config:dump techad_edc_popover
Override only the value you want to modify.
Node | Properties | Default | Description |
---|---|---|---|
server | url | http://localhost | the edc web help url |
server | help_context | help | the url context |
Get the contextual documentation in the Controller
To get the contextual documentation (brick help), you have to call the method:
Then add the context help in the parameter to render it.
Example
Add the popover in your web page
First possibility
This solution is the easiest because you declare the contextual help with one call. The code merge the HTML and Javascript in one place.
Add Boostrap and JQuery in your application
You have to add Bootstrap and JQuery in the head of your template.
Warning: The bootstrap and popover have to be include before the first call of edc popover else the popover will not display
Example
Edit the twig
You have to import the edc popover macro in your page:
Then insert the popover in your page:
Example
Second possibility
This second solution is a little more complicated but is the most efficient way to load pages. This approach relies on 2 calls to the macro to separate HTML and Javascript.
Add Boostrap and JQuery in your application
You have to add Bootstrap and JQuery in your template page in javascript block (or declare it in encore).
Warning: The bootstrap and popover have to be include before the first call of edc popover else the popover will not display
Example
Edit the twig
You have to import the edc popover macro in your page:
Then insert the HTML popover part in your page:
And the Javascript part in the dedicated block:
Example
Customise the popover
To customise the popover, you have to define some global variables in twig. Add the following content in the edc.yaml file:
Variable | Default | Description |
---|---|---|
summary | true | Display the popover. If false, create a link on the first article of the contextual help |
icon | fa fa-question-circle | Equivalent class of your preferred icon bank (font awesome, ...). |
placement | bottom | Set the position of the popover. Based on the bootstrap popover, available values are auto, top, bottom, left or right |
trigger | focus | Set the trigger popover. Based on the bootstrap popover, available values are click, hover or focus. |
animation | true | Apply fade animation |
container | body | Appends the popover to a specific element. See Bootstrap documentation for more information |
delay_show | 100 | Delay showing the popover (ms). Apply for hover |
delay_hide | 100 | Delay hiding the popover (ms) |
A default ccs file (edc-popover.css) is delivered and available in public/bundles/edcpopover/css. You can override class to define your own style.
Create your environment
Only if you want to contribute or modify this bundle.
Install the environment
You have to clone this repository and go to the root folder.
Type the following command:
All dependencies will be installed.
Install the documentation server
Download and install nginx and declare the following configuration:
Create a folder named doc inside the YOUR_PATH_HERE then copy into it the exported documentation from your demo website .
Run the tests
Warning: Before to run the tests, you have to install and configure the documentation server.
To run the tests to valid your environment, type the following command:
Under Windows
Under Linux
Use the bundle in your application
If you want to include the edc popover under development in your application to valid it directly in real context, you have to declare this repository as an external repositories. In composer.json, you have to add:
And add the plugin in your application with the command:
Example
Tips
Copy the assets from this bundle to your application
If you add or edit the content of the folder: public (css file for example), you have to update the assets copy with symfony console assets:install
or php bin/console assets:install
Warning: This command has to be type in the root folder of your application.
License
MIT
All versions of edc-popover-bundle with dependencies
florianwolters/component-core-stringutils Version ^0.4.0
symfony/framework-bundle Version 4.4.*
symfony/http-client Version 4.4.*
symfony/twig-pack Version *