From 1896029bcc3516937610638a15c8b41cc63dccc5 Mon Sep 17 00:00:00 2001 From: Wilmer Arambula <42547589+terabytesoftw@users.noreply.github.com> Date: Tue, 4 Jan 2022 05:40:45 -0300 Subject: [PATCH] Clean up `Modal::class` (#57) --- docs/modal.md | 111 ++++++++++---- src/Modal.php | 308 ++++++++++++++++++++++++++------------ tests/ModalTest.php | 355 +++++++++++++++++++++++++++++++------------- 3 files changed, 546 insertions(+), 228 deletions(-) diff --git a/docs/modal.md b/docs/modal.md index a48983c..10c512e 100644 --- a/docs/modal.md +++ b/docs/modal.md @@ -25,48 +25,105 @@ use Yiisoft\Yii\Bulma\Asset\BulmaJsAsset; * @var \Yiisoft\View\WebView $this */ -$assetManager->registerMany([ - BulmaAsset::class, - BulmaJsAsset::class, -]); +$assetManager->register(BulmaAsset::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(); +// Note: Bulma does not include any JavaScript interaction. You will have to implement the class toggle yourself. +// Example of a toggle: +$modalJS = << 0) { + $modalButtons.forEach(function ($el) { + $el.addEventListener('click', function () { + var target = $el.dataset.target; + openModal(target); + }); + }); + } + + if ($modalCloses.length > 0) { + $modalCloses.forEach(function ($el) { + $el.addEventListener('click', function () { + closeModals(); + }); + }); + } + + function openModal(target) { + var $target = document.getElementById('modal'); + rootEl.classList.add('is-clipped'); + $target.classList.add('is-active'); + } + + function closeModals() { + rootEl.classList.remove('is-clipped'); + $modals.forEach(function ($el) { + $el.classList.remove('is-active'); + }); + } + + function getAll(selector) { + var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document; + + return Array.prototype.slice.call(parent.querySelectorAll(selector), 0); + } + + document.addEventListener('keydown', function (event) { + var e = event || window.event; + + if (e.keyCode === 27) { + closeModals(); + closeDropdowns(); + } + }); +JS; + +$this->registerJs($modalJS); +?> + +id('modal')->begin() . + Div::tag()->class('box')->content('Say hello...')->render() . PHP_EOL . + Modal::end() ?> ``` -HTML produced is like the following: +The code above generates the following HTML: + ```html - - HTML; - $this->assertEqualsWithoutLE($expected, $html); + $this->assertEqualsWithoutLE( + $expected, + Modal::widget()->begin() . + Div::tag()->class('box')->content('Say hello...')->render() . PHP_EOL . + Modal::end(), + ); } - public function testOptions(): void + /** + * @throws CircularReferenceException|InvalidConfigException|NotFoundException|NotInstantiableException + */ + public function testAttributes(): void { - Modal::counter(0); + $this->setInaccessibleProperty(new Html(), 'generateIdCounter', []); - $html = Modal::widget() - ->withoutToggleButton() - ->withoutCloseButton() - ->options(['class' => 'widescreen']) - ->begin(); - $html .= Modal::end(); - $expected = <<<'HTML' - - HTML; - $this->assertEqualsWithoutLE($expected, $html); + $this->assertEqualsWithoutLE($expected, Modal::widget()->withoutToggleButton(true)->begin() . Modal::end()); } + /** + * @throws CircularReferenceException|InvalidConfigException|NotFoundException|NotInstantiableException + */ public function testToggleButtonLabel(): void { - Modal::counter(0); + $this->setInaccessibleProperty(new Html(), 'generateIdCounter', []); - $html = Modal::widget()->toggleButtonLabel('Click to open.')->begin(); - $html .= Modal::end(); - $expected = <<<'HTML' - + $expected = <<Click to open. HTML; - $this->assertEqualsWithoutLE($expected, $html); + $this->assertEqualsWithoutLE( + $expected, + Modal::widget()->toggleButtonLabel('Click to open.')->begin() . Modal::end(), + ); } + /** + * @throws CircularReferenceException|InvalidConfigException|NotFoundException|NotInstantiableException + */ public function testToggleButtonColor(): void { - Modal::counter(0); + $this->setInaccessibleProperty(new Html(), 'generateIdCounter', []); - $html = Modal::widget()->toggleButtonColor(Modal::COLOR_INFO)->begin(); - $html .= Modal::end(); - $expected = <<<'HTML' - + $expected = <<Toggle button HTML; - $this->assertEqualsWithoutLE($expected, $html); + $this->assertEqualsWithoutLE( + $expected, + Modal::widget()->toggleButtonColor(Modal::COLOR_INFO)->begin() . Modal::end(), + ); } + /** + * @throws CircularReferenceException|InvalidConfigException|NotFoundException|NotInstantiableException + */ public function testToggleButtonSize(): void { - Modal::counter(0); + $this->setInaccessibleProperty(new Html(), 'generateIdCounter', []); - $html = Modal::widget()->toggleButtonSize(Modal::SIZE_LARGE)->begin(); - $html .= Modal::end(); - $expected = <<<'HTML' - + $expected = <<Toggle button HTML; - $this->assertEqualsWithoutLE($expected, $html); + $this->assertEqualsWithoutLE( + $expected, + Modal::widget()->toggleButtonSize(Modal::SIZE_LARGE)->begin() . Modal::end(), + ); } - public function testCloseButtonEnabled(): void + /** + * @throws CircularReferenceException|InvalidConfigException|NotFoundException|NotInstantiableException + */ + public function testWithoutCloseButton(): void { - Modal::counter(0); - - $html = Modal::widget()->withoutToggleButton()->begin(); - $html .= Modal::end(); - $expected = <<<'HTML' + $this->setInaccessibleProperty(new Html(), 'generateIdCounter', []); + $expected = <<Toggle button HTML; - $this->assertEqualsWithoutLE($expected, $html); + $this->assertEqualsWithoutLE($expected, Modal::widget()->withoutCloseButton(true)->begin() . Modal::end()); } + /** + * @throws CircularReferenceException|InvalidConfigException|NotFoundException|NotInstantiableException + */ public function testCloseButtonSize(): void { - Modal::counter(0); + $this->setInaccessibleProperty(new Html(), 'generateIdCounter', []); - $html = Modal::widget()->closeButtonSize(Modal::SIZE_LARGE)->begin(); - $html .= Modal::end(); - $expected = <<<'HTML' - + $expected = <<Toggle button HTML; - $this->assertEqualsWithoutLE($expected, $html); + $this->assertEqualsWithoutLE( + $expected, + Modal::widget()->closeButtonSize(Modal::SIZE_LARGE)->begin() . Modal::end(), + ); } - public function testCloseButtonOptions(): void + /** + * @throws CircularReferenceException|InvalidConfigException|NotFoundException|NotInstantiableException + */ + public function testCloseButtonAttributes(): void { - Modal::counter(0); + $this->setInaccessibleProperty(new Html(), 'generateIdCounter', []); - $html = Modal::widget()->closeButtonOptions(['class' => 'some-class'])->begin(); - $html .= Modal::end(); - $expected = <<<'HTML' - + $expected = <<Toggle button HTML; - $this->assertEqualsWithoutLE($expected, $html); + $this->assertEqualsWithoutLE( + $expected, + Modal::widget()->closeButtonAttributes(['class' => 'some-class'])->begin() . Modal::end(), + ); } - public function testContentOptions(): void + /** + * @throws CircularReferenceException|InvalidConfigException|NotFoundException|NotInstantiableException + */ + public function testContentAttributes(): void { - Modal::counter(0); + $this->setInaccessibleProperty(new Html(), 'generateIdCounter', []); - $html = Modal::widget()->contentOptions(['class' => 'some-class'])->begin(); - $html .= Modal::end(); - $expected = <<<'HTML' - + $expected = <<Toggle button