From 9932bff7a0a1afeb2d295449a8e4fdfe1b5b25fe Mon Sep 17 00:00:00 2001 From: Vitalii Shkolin Date: Tue, 1 Dec 2020 01:15:29 +0200 Subject: [PATCH] Add Modal widget --- README.md | 2 + docs/modal.md | 70 ++++++ docs/modalcard.md | 87 +++++++ src/Modal.php | 317 +++++++++++++++++++++++++ src/ModalCard.php | 502 ++++++++++++++++++++++++++++++++++++++++ tests/ModalCardTest.php | 471 +++++++++++++++++++++++++++++++++++++ tests/ModalTest.php | 243 +++++++++++++++++++ 7 files changed, 1692 insertions(+) create mode 100644 docs/modal.md create mode 100644 docs/modalcard.md create mode 100644 src/Modal.php create mode 100644 src/ModalCard.php create mode 100644 tests/ModalCardTest.php create mode 100644 tests/ModalTest.php diff --git a/README.md b/README.md index 86e3a6f..a2f6ba1 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,8 @@ We will quickly and easily describe how to use widgets, and be able to use all t - [Menu](docs/menu.md) - [Message](docs/message.md) - [ProgressBar](docs/progressbar.md) +- [Modal](docs/modal.md) +- [ModalCard](docs/modalcard.md) ### Unit testing diff --git a/docs/modal.md b/docs/modal.md new file mode 100644 index 0000000..6d52e72 --- /dev/null +++ b/docs/modal.md @@ -0,0 +1,70 @@ +# Modal widget + +A base [modal](https://bulma.io/documentation/components/modal/) overlay, in which you can include any content you want + +The modal structure: +- `modal`: the main container + - `modal-background`: a transparent overlay that can act as a click target to close the modal + - `modal-content`: a horizontally and vertically centered container, in which you can include any content + - `modal-close`: a simple cross located in the top right corner + +## Usage + +```php +register([ + BulmaAsset::class, + BulmaJsAsset::class, +]); + +$this->setCssFiles($assetManager->getCssFiles()); +$this->setJsFiles($assetManager->getJsFiles()); + +echo Modal::widget() + ->closeButtonSize(Modal::SIZE_LARGE) + ->begin(); +echo Html::tag('div', 'Say hello...', ['class' => 'box']); +echo Modal::end(); +``` + +HTML produced is like the following: +```html + + +``` + +## Reference + +Method | Description | Default +-------|-------------|--------- +options(array $value) | HTML attributes for the widget container tag. | [`class` => `modal`] +contentOptions(array $value) | | `[]` +closeButtonOptions(array $value) | | [`class` => `modal-close`, `aria-label` => `close`] +closeButtonSize(string $value) | | `''` +toggleButtonLabel(string $value) | | `Toggle button` +toggleButtonSize(string $value) | | `''` +toggleButtonColor(string $value) | | `''` +toggleButtonOptions(array $value) | | [`class` => `button`, `aria-haspopup` => `true`] +closeButtonEnabled(bool $value) | | `true` +toggleButtonEnabled(bool $value) | | `true` diff --git a/docs/modalcard.md b/docs/modalcard.md new file mode 100644 index 0000000..bdcc2c5 --- /dev/null +++ b/docs/modalcard.md @@ -0,0 +1,87 @@ +# Modal card widget + +A classic [modal](https://bulma.io/documentation/components/modal/) overlay, in which you can include any content you want + +The modal structure: +- `modal`: the main container + - `modal-background`: a transparent overlay that can act as a click target to close the modal + - `modal-card`: ... + - `modal-card-head`: ... + - `modal-card-title`: ... + - `modal-card-body`: ... + - `modal-card-foot`: ... + +## Usage + +```php +register([ + BulmaAsset::class, + BulmaJsAsset::class, +]); + +$this->setCssFiles($assetManager->getCssFiles()); +$this->setJsFiles($assetManager->getJsFiles()); + +$widget = ModalCard::widget() + ->title('Modal title') + ->footer( + Html::button('Cancel', ['class' => 'button']) + ) + ->begin(); +echo "Say hello..."; +echo ModalCard::end(); +``` + +HTML produced is like the following: +```html + +``` + +## Reference + +Method | Description | Default +-------|-------------|--------- +options(array $value) | HTML attributes for the widget container tag. | [`class` => `modal`] +contentOptions(array $value) | | [`class` => `modal-card`] +headerOptions(array $value) | | [`class` => `modal-card-head`] +title(string $value) | | `''` +titleOptions(array $value) | | [`class` => `modal-card-title`] +bodyOptions(bool $value) | | [`class` => `modal-card-body`] +footer(string $value) | | `''` +footerOptions(bool $value) | | [`class` => `modal-card-foot`] +closeButtonOptions(array $value) | | [`class` => `delete`, `aria-label` => `close`] +closeButtonSize(string $value) | | `''` +toggleButtonLabel(string $value) | | `Toggle button` +toggleButtonSize(string $value) | | `''` +toggleButtonColor(string $value) | | `''` +toggleButtonOptions(array $value) | | [`class` => `button`, `aria-haspopup` => `true`] +closeButtonEnabled(bool $value) | | `true` +toggleButtonEnabled(bool $value) | | `true` diff --git a/src/Modal.php b/src/Modal.php new file mode 100644 index 0000000..bfed344 --- /dev/null +++ b/src/Modal.php @@ -0,0 +1,317 @@ +begin(); + * + * echo 'Say hello...'; + * + * echo Modal::end(); + * ``` + * + * @link https://bulma.io/documentation/components/modal/ + */ +final class Modal extends Widget +{ + public const SIZE_SMALL = 'is-small'; + public const SIZE_MEDIUM = 'is-medium'; + public const SIZE_LARGE = 'is-large'; + private const SIZE_ALL = [ + self::SIZE_SMALL, + self::SIZE_MEDIUM, + self::SIZE_LARGE, + ]; + + public const COLOR_PRIMARY = 'is-primary'; + public const COLOR_LINK = 'is-link'; + public const COLOR_INFO = 'is-info'; + public const COLOR_SUCCESS = 'is-success'; + public const COLOR_WARNING = 'is-warning'; + public const COLOR_DANGER = 'is-danger'; + private const COLOR_ALL = [ + self::COLOR_PRIMARY, + self::COLOR_LINK, + self::COLOR_INFO, + self::COLOR_SUCCESS, + self::COLOR_WARNING, + self::COLOR_DANGER, + ]; + + private array $options = []; + private array $contentOptions = []; + private array $closeButtonOptions = []; + private string $closeButtonSize = ''; + private bool $closeButtonEnabled = true; + private string $toggleButtonLabel = 'Toggle button'; + private string $toggleButtonSize = ''; + private string $toggleButtonColor = ''; + private array $toggleButtonOptions = []; + private bool $toggleButtonEnabled = true; + + public function begin(): ?string + { + parent::begin(); + + $this->buildOptions(); + + $html = ''; + $html .= $this->renderToggleButton() . "\n"; + $html .= Html::beginTag('div', $this->options) . "\n"; // .modal + $html .= Html::tag('div', '', ['class' => 'modal-background']) . "\n"; + $html .= $this->renderCloseButton() . "\n"; + $html .= Html::beginTag('div', $this->contentOptions) . "\n"; // .modal-content + + return $html; + } + + protected function run(): string + { + $html = ''; + $html .= Html::endTag('div') . "\n"; // .modal-content + $html .= Html::endTag('div'); // .modal + + return $html; + } + + private function buildOptions(): void + { + $this->options['id'] ??= "{$this->getId()}-modal"; + $this->options = $this->addOptions($this->options, 'modal'); + + $this->contentOptions = $this->addOptions($this->contentOptions, 'modal-content'); + + $this->closeButtonOptions = $this->addOptions($this->closeButtonOptions, 'modal-close'); + $this->closeButtonOptions['aria-label'] = 'close'; + + if ($this->closeButtonSize !== '') { + Html::addCssClass($this->closeButtonOptions, $this->closeButtonSize); + } + + $this->toggleButtonOptions = $this->addOptions($this->toggleButtonOptions, 'button'); + $this->toggleButtonOptions['data-target'] = '#' . $this->options['id']; + $this->toggleButtonOptions['aria-haspopup'] = 'true'; + + if ($this->toggleButtonSize !== '') { + Html::addCssClass($this->toggleButtonOptions, $this->toggleButtonSize); + } + + if ($this->toggleButtonColor !== '') { + Html::addCssClass($this->toggleButtonOptions, $this->toggleButtonColor); + } + } + + /** + * Main container options. + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function options(array $value): self + { + $new = clone $this; + $new->options = $value; + + return $new; + } + + /** + * Toggle button label. + * + * @param string $value + * + * @return self + */ + public function toggleButtonLabel(string $value): self + { + $new = clone $this; + $new->toggleButtonLabel = $value; + + return $new; + } + + /** + * Toggle button options. + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function toggleButtonOptions(array $value): self + { + $new = clone $this; + $new->toggleButtonOptions = $value; + + return $new; + } + + /** + * Toggle button size. + * + * @param string $value + * + * @return self + */ + public function toggleButtonSize(string $value): self + { + if (!in_array($value, self::SIZE_ALL)) { + $values = implode('", "', self::SIZE_ALL); + throw new InvalidArgumentException("Invalid size. Valid values are: \"$values\"."); + } + + $new = clone $this; + $new->toggleButtonSize = $value; + + return $new; + } + + /** + * Toggle button color. + * + * @param string $value + * + * @return self + */ + public function toggleButtonColor(string $value): self + { + if (!in_array($value, self::COLOR_ALL)) { + $values = implode('", "', self::COLOR_ALL); + throw new InvalidArgumentException("Invalid color. Valid values are: \"$values\"."); + } + + $new = clone $this; + $new->toggleButtonColor = $value; + + return $new; + } + + /** + * Enable/Disable toggle button. + * + * @param bool $value + * + * @return self + */ + public function toggleButtonEnabled(bool $value): self + { + $new = clone $this; + $new->toggleButtonEnabled = $value; + + return $new; + } + + /** + * Renders the toggle button. + * + * @return string + * @throws \JsonException + */ + private function renderToggleButton(): string + { + if ($this->toggleButtonEnabled) { + return Html::button($this->toggleButtonLabel, $this->toggleButtonOptions); + } + + return ''; + } + + /** + * Close button size. + * + * @param string $value + * + * @return self + */ + public function closeButtonSize(string $value): self + { + if (!in_array($value, self::SIZE_ALL)) { + $values = implode('"', self::SIZE_ALL); + throw new InvalidArgumentException("Invalid size. Valid values are: \"$values\"."); + } + + $new = clone $this; + $new->closeButtonSize = $value; + + return $new; + } + + /** + * Close button options + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function closeButtonOptions(array $value): self + { + $new = clone $this; + $new->closeButtonOptions = $value; + + return $new; + } + + /** + * Enable/Disable close button. + * + * @param bool $value + * + * @return self + */ + public function closeButtonEnabled(bool $value): self + { + $new = clone $this; + $new->closeButtonEnabled = $value; + + return $new; + } + + /** + * Renders the close button. + * + * @return string + * @throws \JsonException + */ + private function renderCloseButton(): string + { + if ($this->closeButtonEnabled) { + return Html::button('', $this->closeButtonOptions); + } + + return ''; + } + + /** + * Content options. + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function contentOptions(array $value): self + { + $new = clone $this; + $new->contentOptions = $value; + + return $new; + } +} diff --git a/src/ModalCard.php b/src/ModalCard.php new file mode 100644 index 0000000..81ecbc4 --- /dev/null +++ b/src/ModalCard.php @@ -0,0 +1,502 @@ +title('Modal title') + * ->footer( + * Html::button('Cancel', ['class' => 'button']) + * ) + * ->begin(); + * + * echo 'Say hello...'; + * + * echo ModalCard::end(); + * ``` + * + * @link https://bulma.io/documentation/components/modal/ + */ +final class ModalCard extends Widget +{ + public const SIZE_SMALL = 'is-small'; + public const SIZE_MEDIUM = 'is-medium'; + public const SIZE_LARGE = 'is-large'; + private const SIZE_ALL = [ + self::SIZE_SMALL, + self::SIZE_MEDIUM, + self::SIZE_LARGE, + ]; + + public const COLOR_PRIMARY = 'is-primary'; + public const COLOR_LINK = 'is-link'; + public const COLOR_INFO = 'is-info'; + public const COLOR_SUCCESS = 'is-success'; + public const COLOR_WARNING = 'is-warning'; + public const COLOR_DANGER = 'is-danger'; + private const COLOR_ALL = [ + self::COLOR_PRIMARY, + self::COLOR_LINK, + self::COLOR_INFO, + self::COLOR_SUCCESS, + self::COLOR_WARNING, + self::COLOR_DANGER, + ]; + + private array $options = []; + private array $contentOptions = []; + private array $closeButtonOptions = []; + private string $closeButtonSize = ''; + private bool $closeButtonEnabled = true; + private string $toggleButtonLabel = 'Toggle button'; + private string $toggleButtonSize = ''; + private string $toggleButtonColor = ''; + private array $toggleButtonOptions = []; + private bool $toggleButtonEnabled = true; + private string $title = ''; + private string $footer = ''; + private array $titleOptions = []; + private array $headerOptions = []; + private array $bodyOptions = []; + private array $footerOptions = []; + + public function begin(): ?string + { + parent::begin(); + + $this->buildOptions(); + + $html = ''; + $html .= $this->renderToggleButton() . "\n"; + $html .= Html::beginTag('div', $this->options) . "\n"; // .modal + $html .= $this->renderBackgroundTransparentOverlay() . "\n"; // .modal-background + $html .= Html::beginTag('div', $this->contentOptions) . "\n"; // .modal-card + $html .= $this->renderHeader(); + $html .= $this->renderBodyBegin() . "\n"; + + return $html; + } + + protected function run(): string + { + $html = ''; + $html .= $this->renderBodyEnd() . "\n"; + $html .= $this->renderFooter() . "\n"; + $html .= Html::endTag('div') . "\n"; // .modal-card + $html .= Html::endTag('div'); // .modal + + return $html; + } + + private function buildOptions(): void + { + $this->options['id'] ??= "{$this->getId()}-modal"; + $this->options = $this->addOptions($this->options, 'modal'); + + $this->closeButtonOptions = $this->addOptions($this->closeButtonOptions, 'delete'); + $this->closeButtonOptions['aria-label'] = 'close'; + + if ($this->closeButtonSize !== '') { + Html::addCssClass($this->closeButtonOptions, $this->closeButtonSize); + } + + $this->toggleButtonOptions = $this->addOptions($this->toggleButtonOptions, 'button'); + $this->toggleButtonOptions['data-target'] = '#' . $this->options['id']; + $this->toggleButtonOptions['aria-haspopup'] = 'true'; + + if ($this->toggleButtonSize !== '') { + Html::addCssClass($this->toggleButtonOptions, $this->toggleButtonSize); + } + + if ($this->toggleButtonColor !== '') { + Html::addCssClass($this->toggleButtonOptions, $this->toggleButtonColor); + } + + $this->contentOptions = $this->addOptions($this->contentOptions, 'modal-card'); + $this->headerOptions = $this->addOptions($this->headerOptions, 'modal-card-head'); + $this->titleOptions = $this->addOptions($this->titleOptions, 'modal-card-title'); + $this->bodyOptions = $this->addOptions($this->bodyOptions, 'modal-card-body'); + $this->footerOptions = $this->addOptions($this->footerOptions, 'modal-card-foot'); + } + + /** + * Main container options. + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function options(array $value): self + { + $new = clone $this; + $new->options = $value; + + return $new; + } + + /** + * Main content container options. + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function contentOptions(array $value): self + { + $new = clone $this; + $new->contentOptions = $value; + + return $new; + } + + /** + * Toggle button label. + * + * @param string $value + * + * @return self + */ + public function toggleButtonLabel(string $value): self + { + $new = clone $this; + $new->toggleButtonLabel = $value; + + return $new; + } + + /** + * Toggle button options. + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function toggleButtonOptions(array $value): self + { + $new = clone $this; + $new->toggleButtonOptions = $value; + + return $new; + } + + /** + * Toggle button size. + * + * @param string $value + * + * @return self + */ + public function toggleButtonSize(string $value): self + { + if (!in_array($value, self::SIZE_ALL)) { + $values = implode('", "', self::SIZE_ALL); + throw new InvalidArgumentException("Invalid size. Valid values are: \"$values\"."); + } + + $new = clone $this; + $new->toggleButtonSize = $value; + + return $new; + } + + /** + * Toggle button color. + * + * @param string $value + * + * @return self + */ + public function toggleButtonColor(string $value): self + { + if (!in_array($value, self::COLOR_ALL)) { + $values = implode('", "', self::COLOR_ALL); + throw new InvalidArgumentException("Invalid color. Valid values are: \"$values\"."); + } + + $new = clone $this; + $new->toggleButtonColor = $value; + + return $new; + } + + /** + * Enable/Disable toggle button. + * + * @param bool $value + * + * @return self + */ + public function toggleButtonEnabled(bool $value): self + { + $new = clone $this; + $new->toggleButtonEnabled = $value; + + return $new; + } + + /** + * Renders the toggle button. + * + * @throws JsonException + * + * @return string + */ + private function renderToggleButton(): string + { + if ($this->toggleButtonEnabled) { + return Html::button($this->toggleButtonLabel, $this->toggleButtonOptions); + } + + return ''; + } + + /** + * Close button size. + * + * @param string $value + * + * @return self + */ + public function closeButtonSize(string $value): self + { + if (!in_array($value, self::SIZE_ALL)) { + $values = implode('"', self::SIZE_ALL); + throw new InvalidArgumentException("Invalid size. Valid values are: \"$values\"."); + } + + $new = clone $this; + $new->closeButtonSize = $value; + + return $new; + } + + /** + * Close button options + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function closeButtonOptions(array $value): self + { + $new = clone $this; + $new->closeButtonOptions = $value; + + return $new; + } + + /** + * Enable/Disable close button. + * + * @param bool $value + * + * @return self + */ + public function closeButtonEnabled(bool $value): self + { + $new = clone $this; + $new->closeButtonEnabled = $value; + + return $new; + } + + /** + * Renders the close button. + * + * @throws JsonException + * + * @return string + */ + private function renderCloseButton(): string + { + if ($this->closeButtonEnabled) { + return Html::button('', $this->closeButtonOptions); + } + + return ''; + } + + /** + * Header options. + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function headerOptions(array $value): self + { + $new = clone $this; + $new->headerOptions = $value; + + return $new; + } + + /** + * Renders header. + * + * @throws JsonException + * + * @return string + */ + private function renderHeader(): string + { + $html = ''; + $html .= Html::beginTag('header', $this->headerOptions) . "\n"; + $html .= Html::tag('p', $this->title, $this->titleOptions) . "\n"; + $html .= $this->renderCloseButton() . "\n"; + $html .= Html::endTag('header') . "\n"; + + return $html; + } + + /** + * Body options. + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function bodyOptions(array $value): self + { + $new = clone $this; + $new->bodyOptions = $value; + + return $new; + } + + /** + * Renders begin body tag. + * + * @throws JsonException + * + * @return string + */ + private function renderBodyBegin(): string + { + return Html::beginTag('section', $this->bodyOptions); + } + + /** + * Renders end body tag. + * + * @throws JsonException + * + * @return string + */ + private function renderBodyEnd(): string + { + return Html::endTag('section'); + } + + /** + * Footer options + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function footerOptions(array $value): self + { + $new = clone $this; + $new->footerOptions = $value; + + return $new; + } + + /** + * The footer content in the modal window. + * + * @param string $value + * + * @return self + */ + public function footer(string $value): self + { + $new = clone $this; + $new->footer = $value; + + return $new; + } + + /** + * Title options. + * + * {@see \Yiisoft\Html\Html::renderTagAttributes()} for details on how attributes are being rendered. + * + * @param array $value + * + * @return self + */ + public function titleOptions(array $value): self + { + $new = clone $this; + $new->titleOptions = $value; + + return $new; + } + + /** + * The title content in the modal window. + * + * @param string $value + * + * @return self + */ + public function title(string $value): self + { + $new = clone $this; + $new->title = $value; + + return $new; + } + + /** + * Renders the footer. + * + * @throws JsonException + * + * @return string + */ + private function renderFooter(): string + { + return Html::tag('footer', $this->footer, $this->footerOptions); + } + + /** + * Renders the background transparent overlay. + * + * @throws JsonException + * + * @return string + */ + private function renderBackgroundTransparentOverlay(): string + { + return Html::tag('div', '', ['class' => 'modal-background']); + } +} diff --git a/tests/ModalCardTest.php b/tests/ModalCardTest.php new file mode 100644 index 0000000..91db5a9 --- /dev/null +++ b/tests/ModalCardTest.php @@ -0,0 +1,471 @@ +begin(); + $html .= 'Say hello...'; + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testFooterOptions(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->footerOptions([ + 'class' => 'bg-transparent', + ]) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testContentOptions(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->contentOptions([ + 'class' => 'bg-white', + ]) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testToggleButtonLabel(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->toggleButtonLabel('Launch modal') + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Launch modal + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testToggleButtonOptions(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->toggleButtonOptions([ + 'disabled' => true, + ]) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testToggleButtonSize(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->toggleButtonSize(ModalCard::SIZE_LARGE) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testToggleButtonColor(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->toggleButtonColor(ModalCard::COLOR_PRIMARY) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testToggleButtonEnabled(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->toggleButtonEnabled(false) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = << +
+
+
+

+ +
+
+
+
+
+ +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCloseButtonSize(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->closeButtonSize(ModalCard::SIZE_LARGE) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCloseButtonOptions(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->closeButtonOptions([ + 'disabled' => true + ]) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCloseButtonEnabled(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->closeButtonEnabled(false) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testHeaderOptions(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->headerOptions([ + 'class' => 'bg-info', + ]) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testFooter(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->footer('Some text') + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testTitle(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->title('Some title') + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testBodyOptions(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->bodyOptions([ + 'class' => 'bg-white' + ]) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testTitleOptions(): void + { + ModalCard::counter(0); + + $html = ModalCard::widget() + ->titleOptions([ + 'class' => 'text-info' + ]) + ->begin(); + $html .= ModalCard::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } +} diff --git a/tests/ModalTest.php b/tests/ModalTest.php new file mode 100644 index 0000000..eac82dc --- /dev/null +++ b/tests/ModalTest.php @@ -0,0 +1,243 @@ +toggleButtonEnabled(false) + ->closeButtonEnabled(false) + ->begin(); + $html .= 'Say hello...'; + $html .= Modal::end(); + + $expectedHtml = << +
+ +
+Say hello...
+ +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testOptions(): void + { + Modal::counter(0); + + $html = Modal::widget() + ->toggleButtonEnabled(false) + ->closeButtonEnabled(false) + ->options(['class' => 'widescreen']) + ->begin(); + $html .= Modal::end(); + + $expectedHtml = << +
+ +
+
+ +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testToggleButtonEnabled(): void + { + Modal::counter(0); + + $html = Modal::widget() + ->closeButtonEnabled(false) + ->begin(); + $html .= Modal::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testToggleButtonLabel(): void + { + Modal::counter(0); + + $html = Modal::widget() + ->toggleButtonLabel('Click to open.') + ->begin(); + $html .= Modal::end(); + + $expectedHtml = <<Click to open. + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testToggleButtonColor(): void + { + Modal::counter(0); + + $html = Modal::widget() + ->toggleButtonColor(Modal::COLOR_INFO) + ->begin(); + $html .= Modal::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testToggleButtonSize(): void + { + Modal::counter(0); + + $html = Modal::widget() + ->toggleButtonSize(Modal::SIZE_LARGE) + ->begin(); + $html .= Modal::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCloseButtonEnabled(): void + { + Modal::counter(0); + + $html = Modal::widget() + ->toggleButtonEnabled(false) + ->begin(); + $html .= Modal::end(); + + $expectedHtml = << +
+ +
+
+ +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCloseButtonSize(): void + { + Modal::counter(0); + + $html = Modal::widget() + ->closeButtonSize(Modal::SIZE_LARGE) + ->begin(); + $html .= Modal::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCloseButtonOptions(): void + { + Modal::counter(0); + + $html = Modal::widget() + ->closeButtonOptions(['class' => 'some-class']) + ->begin(); + $html .= Modal::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testContentOptions(): void + { + Modal::counter(0); + + $html = Modal::widget() + ->contentOptions(['class' => 'some-class']) + ->begin(); + $html .= Modal::end(); + + $expectedHtml = <<Toggle button + +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testException() + { + $this->expectException(\InvalidArgumentException::class); + + Modal::widget()->toggleButtonSize('is-non-existent'); + Modal::widget()->toggleButtonColor('is-non-existent'); + Modal::widget()->closeButtonSize('is-non-existent'); + } +}