yii2-bootstrap5/src/Offcanvas.php

259 lines
7.9 KiB
PHP
Raw Normal View History

2021-08-04 15:57:30 +08:00
<?php
/**
* @package yii2-bootstrap5
* @author Simon Karlen <simi.albi@gmail.com>
*/
namespace yii\bootstrap5;
use yii\helpers\ArrayHelper;
/**
* Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge
* of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data
* attributes are used to invoke the required JavaScript.
*
* The following example will show the content enclosed the [[begin()]] and [[end()]] calls within the offcancas
* container:
*
* ```php
* Offcanvas::begin([
* 'placement' => Offcanvas::PLACEMENT_END,
* 'backdrop' => true,
* 'scrolling' => true
* ]);
*
* Nav::widget([...]);
*
* Offcanvas::end();
* ```
*
* @see https://getbootstrap.com/docs/5.0/components/offcanvas/
* @author Simon Karlen <simi.albi@outlook.com>
*/
class Offcanvas extends Widget
{
const PLACEMENT_START = 'start';
const PLACEMENT_END = 'end';
const PLACEMENT_TOP = 'top';
const PLACEMENT_BOTTOM = 'bottom';
/**
* @var string Where to place the offcanvas. Can be of of the [[PLACEMENT_*]] constants.
*/
public $placement = self::PLACEMENT_START;
/**
* @var boolean Whether to enable backdrop or not. Defaults to `true`.
*/
public $backdrop = true;
/**
* @var boolean Whether to enable body scrolling or not. Defaults to `false`.
*/
public $scrolling = false;
/**
* @var string The title content in the offcanvas container.
*/
public $title;
/**
* @var array|false the options for rendering the close button tag.
* The close button is displayed in the header of the offcanvas container. Clicking
* on the button will hide the offcanvas container. If this is false, no close button will be rendered.
*
* The following special options are supported:
*
* - tag: string, the tag name of the button. Defaults to 'button'.
*
* The rest of the options will be rendered as the HTML attributes of the button tag.
* Please refer to the [Offcanvas plugin help](https://getbootstrap.com/docs/5.0/components/offcanvas/)
* for the supported HTML attributes.
*/
public $closeButton = [];
/**
* @var array|false the options for rendering the toggle button tag.
* The toggle button is used to toggle the visibility of the modal window.
* 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 [Modal plugin help](http://getbootstrap.com/javascript/#modals)
* for the supported HTML attributes.
*/
public $toggleButton = false;
/**
* @var array Additional header options.
* @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
*/
public $headerOptions = [];
/**
* @var array Additional title options.
*
* The following special options are supported:
*
* - tag: string, the tag name of the button. Defaults to 'h5'.
*
2021-08-04 15:57:30 +08:00
* @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
*/
public $titleOptions = [];
/**
* @var array Additional body options.
* @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
*/
public $bodyOptions = [];
/**
* {@inheritDoc}
*/
public function init()
{
parent::init();
$this->initOptions();
echo $this->renderToggleButton() . "\n";
echo Html::beginTag('div', $this->options) . "\n";
echo $this->renderHeader() . "\n";
echo $this->renderBodyBegin() . "\n";
}
/**
* Renders the widget.
*/
public function run()
{
echo "\n" . $this->renderBodyEnd();
echo "\n" . Html::endTag('div');
$this->registerPlugin('offcanvas');
}
/**
* Renders the header HTML markup of the modal
* @return string the rendering result
*/
protected function renderHeader(): string
{
$button = $this->renderCloseButton();
if (isset($this->title)) {
$tag = ArrayHelper::remove($this->titleOptions, 'tag', 'h5');
2021-08-04 15:57:30 +08:00
Html::addCssClass($this->titleOptions, ['widget' => 'offcanvas-title']);
$header = Html::tag($tag, $this->title, $this->titleOptions);
2021-08-04 15:57:30 +08:00
} else {
$header = '';
}
if ($button !== null) {
$header .= "\n" . $button;
} elseif ($header === '') {
return '';
}
Html::addCssClass($this->headerOptions, ['widget' => 'offcanvas-header']);
return Html::tag('div', "\n" . $header . "\n", $this->headerOptions);
}
/**
* Renders the opening tag of the modal body.
* @return string the rendering result
*/
protected function renderBodyBegin(): string
{
Html::addCssClass($this->bodyOptions, ['widget' => 'offcanvas-body']);
return Html::beginTag('div', $this->bodyOptions);
}
/**
* Renders the closing tag of the modal body.
* @return string the rendering result
*/
protected function renderBodyEnd(): string
{
return Html::endTag('div');
}
/**
* Renders the toggle button.
* @return string|null the rendering result
*/
protected function renderToggleButton()
{
if (($toggleButton = $this->toggleButton) !== false) {
$tag = ArrayHelper::remove($toggleButton, 'tag', 'button');
$label = ArrayHelper::remove($toggleButton, 'label', 'Show');
return Html::tag($tag, $label, $toggleButton);
} else {
return null;
}
}
/**
* Renders the close button.
* @return string|null the rendering result
*/
protected function renderCloseButton()
{
if (($closeButton = $this->closeButton) !== false) {
$tag = ArrayHelper::remove($closeButton, 'tag', 'button');
return Html::tag($tag, '', $closeButton);
} else {
return null;
}
}
/**
* Initializes the widget options.
* This method sets the default values for various options.
*/
protected function initOptions()
{
$this->options = array_merge([
'tabindex' => -1,
'data-bs-backdrop' => $this->backdrop ? 'true' : 'false',
'data-bs-scroll' => $this->scrolling ? 'true' : 'false'
], $this->options);
Html::addCssClass($this->options, ['widget' => 'offcanvas offcanvas-' . $this->placement]);
$this->titleOptions = array_merge([
'id' => $this->options['id'] . '-label',
], $this->titleOptions);
if (!isset($this->options['aria-label'], $this->options['aria-labelledby']) && isset($this->title)) {
$this->options['aria-labelledby'] = $this->titleOptions['id'];
}
if ($this->closeButton !== false) {
$this->closeButton = array_merge([
'data-bs-dismiss' => 'offcanvas',
'class' => 'btn-close text-reset',
'type' => 'button',
'aria-label' => 'Close'
], $this->closeButton);
}
if ($this->toggleButton !== false) {
$this->toggleButton = array_merge([
'data-bs-toggle' => 'offcanvas',
'type' => 'button',
'aria-controls' => $this->options['id']
], $this->toggleButton);
if (!isset($this->toggleButton['data-bs-target']) && !isset($this->toggleButton['href'])) {
$this->toggleButton['data-bs-target'] = '#' . $this->options['id'];
}
}
}
}