2021-07-13 22:50:02 +08:00
|
|
|
<?php
|
|
|
|
/**
|
|
|
|
* @package yii2-bootstrap5
|
|
|
|
* @author Simon Karlen <simi.albi@gmail.com>
|
|
|
|
*/
|
|
|
|
|
|
|
|
namespace yii\bootstrap5;
|
|
|
|
|
|
|
|
use yii\helpers\ArrayHelper;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Popover renders a popover that can be toggled by clicking on a button.
|
|
|
|
*
|
|
|
|
* The following example will show the content enclosed between the [[begin()]]
|
|
|
|
* and [[end()]] calls within the modal window:
|
|
|
|
*
|
2021-07-13 23:23:28 +08:00
|
|
|
* ```php
|
2021-07-13 22:50:02 +08:00
|
|
|
* Popover::begin([
|
|
|
|
* 'title' => 'Hello world',
|
|
|
|
* 'toggleButton' => ['label' => 'click me'],
|
|
|
|
* ]);
|
|
|
|
*
|
|
|
|
* echo 'Say hello...';
|
|
|
|
*
|
|
|
|
* Popover::end();
|
2021-07-13 23:23:28 +08:00
|
|
|
* ```
|
2021-07-13 22:50:02 +08:00
|
|
|
*
|
|
|
|
* @see https://getbootstrap.com/docs/5.0/components/popovers/
|
|
|
|
* @author Simon Karlen <simi.albi@outlook.com>
|
|
|
|
*/
|
|
|
|
class Popover extends Widget
|
|
|
|
{
|
|
|
|
const PLACEMENT_AUTO = 'auto';
|
|
|
|
const PLACEMENT_TOP = 'top';
|
|
|
|
const PLACEMENT_BOTTOM = 'bottom';
|
|
|
|
const PLACEMENT_LEFT = 'left';
|
|
|
|
const PLACEMENT_RIGHT = 'right';
|
|
|
|
|
|
|
|
const TRIGGER_CLICK = 'click';
|
|
|
|
const TRIGGER_HOVER = 'hover';
|
|
|
|
const TRIGGER_FOCUS = 'focus';
|
|
|
|
const TRIGGER_MANUAL = 'manual';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @var string|null the tile content in the popover.
|
|
|
|
*/
|
2021-08-04 14:03:41 +08:00
|
|
|
public $title = null;
|
2021-07-13 22:50:02 +08:00
|
|
|
/**
|
|
|
|
* @var array additional header options
|
|
|
|
* @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
|
|
|
|
*/
|
2021-08-04 14:03:41 +08:00
|
|
|
public $headerOptions = [];
|
2021-07-13 22:50:02 +08:00
|
|
|
/**
|
|
|
|
* @var array body options
|
|
|
|
* @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
|
|
|
|
*/
|
2021-08-04 14:03:41 +08:00
|
|
|
public $bodyOptions = [];
|
2021-07-13 22:50:02 +08:00
|
|
|
/**
|
|
|
|
* @var array arrow options
|
|
|
|
* @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
|
|
|
|
*/
|
2021-08-04 14:03:41 +08:00
|
|
|
public $arrowOptions = [];
|
2021-07-13 22:50:02 +08:00
|
|
|
/**
|
|
|
|
* @var string How to position the popover - [[PLACEMENT_AUTO]] | [[PLACEMENT_TOP]] | [[PLACEMENT_BOTTOM]] |
|
|
|
|
* [[PLACEMENT_LEFT]] | [[PLACEMENT_RIGHT]]. When auto is specified, it will dynamically reorient the popover.
|
|
|
|
*/
|
2021-08-04 14:03:41 +08:00
|
|
|
public $placement = self::PLACEMENT_AUTO;
|
2021-07-13 22:50:02 +08:00
|
|
|
/**
|
|
|
|
* @var array|false the options for rendering the toggle button tag.
|
|
|
|
* The toggle button is used to toggle the visibility of the popover.
|
|
|
|
* If this property is false, no toggle button will be rendered.
|
|
|
|
*
|
|
|
|
* The following special options are supported:
|
|
|
|
*
|
|
|
|
* - tag: string, the tag name of the button. Defaults to 'button'.
|
|
|
|
* - label: string, the label of the button. Defaults to 'Show'.
|
|
|
|
*
|
|
|
|
* The rest of the options will be rendered as the HTML attributes of the button tag.
|
|
|
|
* Please refer to the [Popover plugin help](https://getbootstrap.com/docs/5.0/components/popovers/)
|
|
|
|
* for the supported HTML attributes.
|
|
|
|
*/
|
|
|
|
public $toggleButton = false;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* {@inheritDoc}
|
|
|
|
*/
|
|
|
|
public function init()
|
|
|
|
{
|
|
|
|
parent::init();
|
|
|
|
|
|
|
|
$this->initOptions();
|
|
|
|
|
|
|
|
ob_start();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* {@inheritDoc}
|
|
|
|
*/
|
2021-08-04 14:03:41 +08:00
|
|
|
public function run()
|
2021-07-13 22:50:02 +08:00
|
|
|
{
|
|
|
|
$content = ob_get_clean();
|
|
|
|
|
2021-07-13 23:23:28 +08:00
|
|
|
if (!empty($content)) {
|
|
|
|
$this->clientOptions['content'] = $content;
|
|
|
|
}
|
2021-07-13 22:50:02 +08:00
|
|
|
$html = $this->renderToggleButton();
|
|
|
|
|
|
|
|
$this->registerPlugin('popover');
|
|
|
|
|
|
|
|
return $html;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Renders the arrow HTML markup of the popover
|
|
|
|
* @return string the rendering result
|
|
|
|
*/
|
|
|
|
protected function renderArrow(): string
|
|
|
|
{
|
|
|
|
Html::addCssClass($this->arrowOptions, ['widget' => 'popover-arrow']);
|
2021-08-04 14:03:41 +08:00
|
|
|
|
2021-07-13 22:50:02 +08:00
|
|
|
return Html::tag('div', '', $this->arrowOptions);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Renders the header HTML markup of the popover
|
|
|
|
* @return string the rendering result
|
|
|
|
*/
|
|
|
|
protected function renderHeader(): string
|
|
|
|
{
|
|
|
|
Html::addCssClass($this->headerOptions, ['widget' => 'popover-header']);
|
2021-08-04 14:03:41 +08:00
|
|
|
|
2021-07-13 23:23:28 +08:00
|
|
|
return Html::tag('h3', '', $this->headerOptions);
|
2021-07-13 22:50:02 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Renders the opening tag of the modal body.
|
|
|
|
* @return string the rendering result
|
|
|
|
*/
|
|
|
|
protected function renderBody(): string
|
|
|
|
{
|
|
|
|
Html::addCssClass($this->bodyOptions, ['widget' => 'popover-body']);
|
2021-08-04 14:03:41 +08:00
|
|
|
|
2021-07-13 23:23:28 +08:00
|
|
|
return Html::tag('div', '', $this->bodyOptions);
|
2021-07-13 22:50:02 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Renders the toggle button.
|
2021-08-04 14:03:41 +08:00
|
|
|
* @return string|null the rendering result
|
2021-07-13 22:50:02 +08:00
|
|
|
*/
|
2021-08-04 14:03:41 +08:00
|
|
|
protected function renderToggleButton()
|
2021-07-13 22:50:02 +08:00
|
|
|
{
|
|
|
|
if (($toggleButton = $this->toggleButton) !== false) {
|
|
|
|
$tag = ArrayHelper::remove($toggleButton, 'tag', 'button');
|
|
|
|
$label = ArrayHelper::remove($toggleButton, 'label', 'Show');
|
|
|
|
$toggleButton['id'] = $this->options['id'];
|
|
|
|
|
|
|
|
return Html::tag($tag, $label, $toggleButton);
|
|
|
|
} else {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Initializes the widget options.
|
|
|
|
* This method sets the default values for various options.
|
|
|
|
*/
|
|
|
|
protected function initOptions()
|
|
|
|
{
|
|
|
|
|
|
|
|
$options = array_merge([
|
|
|
|
'role' => 'tooltip',
|
|
|
|
], $this->options, ['id' => $this->options['id'] . '-popover']);
|
|
|
|
Html::addCssClass($options, ['widget' => 'popover']);
|
2021-07-13 23:23:28 +08:00
|
|
|
$template = Html::beginTag('div', $options);
|
2021-07-13 22:50:02 +08:00
|
|
|
$template .= $this->renderArrow();
|
|
|
|
$template .= $this->renderHeader();
|
|
|
|
$template .= $this->renderBody();
|
2021-07-13 23:23:28 +08:00
|
|
|
$template .= Html::endTag('div');
|
2021-07-13 22:50:02 +08:00
|
|
|
|
|
|
|
$this->clientOptions = array_merge([
|
|
|
|
'template' => $template,
|
|
|
|
'placement' => $this->placement,
|
|
|
|
'title' => $this->title,
|
|
|
|
'sanitize' => false,
|
|
|
|
'html' => true
|
|
|
|
], $this->clientOptions);
|
|
|
|
|
|
|
|
if ($this->toggleButton !== false) {
|
|
|
|
$this->toggleButton = array_merge([
|
|
|
|
'type' => 'button',
|
|
|
|
], $this->toggleButton);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|