From 77f613df2081d186c8379833e7651c2a336ffdee Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Thu, 22 Jun 2017 20:15:51 +0200 Subject: [PATCH 01/12] update to Materialize 0.99.2 --- composer.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/composer.json b/composer.json index 7edc57a..36b12f3 100755 --- a/composer.json +++ b/composer.json @@ -13,12 +13,12 @@ "role": "Developer" } ], - "version": "1.4.0", + "version": "1.5.0", "require": { "php": ">=5.6.0", "yiisoft/yii2": "~2.0.0", - "bower-asset/materialize": "0.98.2" + "bower-asset/materialize": "0.99.0" }, "autoload": { "psr-4": { From 80fdc1f92c13459a3310ac544e5e61dc0381f685 Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Fri, 23 Jun 2017 20:43:03 +0200 Subject: [PATCH 02/12] revert 0.99 --- composer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/composer.json b/composer.json index 36b12f3..983bb3e 100755 --- a/composer.json +++ b/composer.json @@ -18,7 +18,7 @@ "php": ">=5.6.0", "yiisoft/yii2": "~2.0.0", - "bower-asset/materialize": "0.99.0" + "bower-asset/materialize": "0.98.2" }, "autoload": { "psr-4": { From 4efe0e86870ca9d38795fcb97f5183bebd8cb553 Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Fri, 23 Jun 2017 21:07:14 +0200 Subject: [PATCH 03/12] update layout --- src/layout/main.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/layout/main.php b/src/layout/main.php index db893ec..679943b 100644 --- a/src/layout/main.php +++ b/src/layout/main.php @@ -17,6 +17,7 @@ + <?= Html::encode($this->title) ?> @@ -106,4 +107,4 @@ endBody() ?> -endPage() ?> \ No newline at end of file +endPage() ?> From 739dd52eb059e3fec2edda31f5e7e6ba29ae29db Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Fri, 23 Jun 2017 21:34:58 +0200 Subject: [PATCH 04/12] add MaterialBox --- src/widgets/MaterialBox.php | 88 +++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 src/widgets/MaterialBox.php diff --git a/src/widgets/MaterialBox.php b/src/widgets/MaterialBox.php new file mode 100644 index 0000000..f681db4 --- /dev/null +++ b/src/widgets/MaterialBox.php @@ -0,0 +1,88 @@ +imageSrc) { + $imageSrc = ArrayHelper::remove($this->imageOptions, 'src', null); + if (!$imageSrc) { + throw new InvalidConfigException("Image src must be defined."); + } + + $this->imageSrc = $imageSrc; + } + + Html::addCssClass($this->imageOptions, ['plugin' => 'materialboxed']); + + if ($this->imageCaption !== false) { + $this->imageOptions['data-caption'] = $this->encodeImageCaption ? Html::encode($this->imageCaption) : $this->imageCaption; + } + } + + /** + * Execute the widget. + * @return string the widget's markup. + */ + public function run() + { + $this->registerPlugin('materialbox', '.materialboxed'); + + $tag = ArrayHelper::remove($this->options, 'tag', 'div'); + $html[] = Html::beginTag($tag, $this->options); + + $html[] = Html::img($this->imageSrc, $this->imageOptions); + + $html[] = Html::endTag($tag); + + return implode("\n", $html); + } +} From 8038823e58453431779cc0bee5c045dea1ce11a5 Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Fri, 30 Jun 2017 22:01:20 +0200 Subject: [PATCH 05/12] added Parallax --- src/widgets/Parallax.php | 62 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/widgets/Parallax.php diff --git a/src/widgets/Parallax.php b/src/widgets/Parallax.php new file mode 100644 index 0000000..fecb43b --- /dev/null +++ b/src/widgets/Parallax.php @@ -0,0 +1,62 @@ +imageSrc) { + $imageSrc = ArrayHelper::remove($this->imageOptions, 'src', null); + if (!$imageSrc) { + throw new InvalidConfigException("Image src must be defined."); + } + + $this->imageSrc = $imageSrc; + } + + $this->registerPlugin('parallax', '.parallax'); + } + + /** + * Execute the widget. + * @return string the widget's markup. + */ + public function run() + { + $tag = ArrayHelper::remove($this->options, 'tag', 'div'); + $html[] = Html::beginTag($tag, $this->options); + $html[] = Html::beginTag('div', ['class' => 'parallax-container']); + $html[] = Html::beginTag('div', ['class' => 'parallax']); + $html[] = Html::img($this->imageSrc, $this->imageOptions); + $html[] = Html::endTag('div'); + $html[] = Html::endTag('div'); + $html[] = Html::endTag($tag); + + return implode("\n", $html); + } +} From 43d9b7f20a90ca50e55d6c4e2ee3d08cbe46c7f8 Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Sat, 1 Jul 2017 01:44:30 +0200 Subject: [PATCH 06/12] moved Parallax, MaterialBox to media ns --- src/widgets/{ => media}/MaterialBox.php | 0 src/widgets/{ => media}/Parallax.php | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/widgets/{ => media}/MaterialBox.php (100%) rename src/widgets/{ => media}/Parallax.php (100%) diff --git a/src/widgets/MaterialBox.php b/src/widgets/media/MaterialBox.php similarity index 100% rename from src/widgets/MaterialBox.php rename to src/widgets/media/MaterialBox.php diff --git a/src/widgets/Parallax.php b/src/widgets/media/Parallax.php similarity index 100% rename from src/widgets/Parallax.php rename to src/widgets/media/Parallax.php From fa4709f7093c11bfd5d5b5873b947cab36457b6a Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Sat, 1 Jul 2017 01:45:06 +0200 Subject: [PATCH 07/12] ns --- src/widgets/media/MaterialBox.php | 2 +- src/widgets/media/Parallax.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/widgets/media/MaterialBox.php b/src/widgets/media/MaterialBox.php index f681db4..5745b73 100644 --- a/src/widgets/media/MaterialBox.php +++ b/src/widgets/media/MaterialBox.php @@ -5,7 +5,7 @@ * @license https://github.com/MacGyer/yii2-materializecss/blob/master/LICENSE */ -namespace macgyer\yii2materializecss\widgets; +namespace macgyer\yii2materializecss\widgets\media; use macgyer\yii2materializecss\lib\BaseWidget; use macgyer\yii2materializecss\lib\Html; diff --git a/src/widgets/media/Parallax.php b/src/widgets/media/Parallax.php index fecb43b..e8c2e37 100644 --- a/src/widgets/media/Parallax.php +++ b/src/widgets/media/Parallax.php @@ -1,6 +1,6 @@ Date: Sat, 1 Jul 2017 23:43:19 +0200 Subject: [PATCH 08/12] added Slider --- src/widgets/media/MaterialBox.php | 3 + src/widgets/media/Parallax.php | 15 +++ src/widgets/media/Slider.php | 199 ++++++++++++++++++++++++++++++ 3 files changed, 217 insertions(+) create mode 100644 src/widgets/media/Slider.php diff --git a/src/widgets/media/MaterialBox.php b/src/widgets/media/MaterialBox.php index 5745b73..72ec64e 100644 --- a/src/widgets/media/MaterialBox.php +++ b/src/widgets/media/MaterialBox.php @@ -15,7 +15,10 @@ /** * MaterialBox creates a lightweight lightbox variant to present images. * + * @author Christoph Erdmann * @package widgets + * @subpackage media + * * @see http://materializecss.com/media.html#materialbox */ class MaterialBox extends BaseWidget diff --git a/src/widgets/media/Parallax.php b/src/widgets/media/Parallax.php index e8c2e37..8818f28 100644 --- a/src/widgets/media/Parallax.php +++ b/src/widgets/media/Parallax.php @@ -1,4 +1,9 @@ + * @package widgets + * @subpackage media + * + * @see http://materializecss.com/parallax.html + * @see http://materializecss.com/parallax-demo.html + */ class Parallax extends BaseWidget { /** diff --git a/src/widgets/media/Slider.php b/src/widgets/media/Slider.php new file mode 100644 index 0000000..ee98cb4 --- /dev/null +++ b/src/widgets/media/Slider.php @@ -0,0 +1,199 @@ +not be encoded. + * + * ```php + * 'slideOptions' => [ + * 'class' => 'slide-item' // this class will be used for all slide elements (`
  • `) + * ], + * 'slides' => [ + * [ + * 'image' => ['src' => '/source/of/image'], + * ], + * [ + * 'image' => ['src' => '/source/of/image'], + * 'caption' => [ + * 'content' => '

    Caption content

    , + * 'align' => Slider::CAPTION_ALIGN_RIGHT + * ], + * 'options' => ['class' => 'slide-item-override'] // overrides [[slideOptions]] + * ] + * ] + * ``` + * @author Christoph Erdmann + * @package widgets + * @subpackage media + * + * @see http://materializecss.com/media.html#slider + */ +class Slider extends BaseWidget +{ + /** + * Sets the caption alignment to `left`. + */ + const CAPTION_ALIGN_LEFT = 'left-align'; + + /** + * Sets the caption alignment to `center`. + */ + const CAPTION_ALIGN_CENTER = 'center-align'; + + /** + * Sets the caption alignment to `right`. + */ + const CAPTION_ALIGN_RIGHT = 'right-align'; + + /** + * @var array the HTML attributes for the slider container tag. + * @see [yii\helpers\BaseHtml::renderTagAttributes()](http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#renderTagAttributes()-detail) + * for details on how attributes are being rendered. + */ + public $sliderOptions = []; + + /** + * @var array the HTML attributes for each slider's `
  • ` tag. + * These options will be merged with the individual slide options. + * + * @see [yii\helpers\BaseHtml::renderTagAttributes()](http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#renderTagAttributes()-detail) + * for details on how attributes are being rendered. + */ + public $slideOptions = []; + + /** + * @var array the HTML attributes for each caption. + * These options will be merged with the individual caption options. + * + * @see [yii\helpers\BaseHtml::renderTagAttributes()](http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#renderTagAttributes()-detail) + * for details on how attributes are being rendered. + */ + public $captionOptions = []; + + /** + * @var array the slide items. + * Provide a sub-array for each slide which contains at least the `image` key for the image options. Every image must + * have a `src` with the image's URL. + */ + public $slides = []; + + /** + * @var boolean whether to show the slider's navigation indicators + */ + public $showIndicators = true; + + /** + * @var boolean whether this is a fullscreen slider + */ + public $fullscreen = false; + + /** + * Initialize the widget. + */ + public function init() + { + parent::init(); + + Html::addCssClass($this->sliderOptions, ['plugin' => 'slider']); + + if ($this->fullscreen === true) { + Html::addCssClass($this->sliderOptions, ['fullscreen' => 'fullscreen']); + } + + $this->clientOptions['indicators'] = $this->showIndicators; + $this->registerPlugin('slider', "#{$this->id} > .slider"); + } + + /** + * Execute the widget. + * @return string the rendered markup + */ + public function run() + { + $tag = ArrayHelper::remove($this->options, 'tag', 'div'); + $html[] = Html::beginTag($tag, $this->options); + $html[] = Html::beginTag('div', $this->sliderOptions); + $html[] = $this->renderSlides(); + $html[] = Html::endTag('div'); + $html[] = Html::endTag($tag); + + return implode("\n", $html); + } + + /** + * Parses all slides and generates the slide list. + * @return string the list markup + */ + protected function renderSlides() + { + $slides = []; + foreach ($this->slides as $slide) { + $slides[] = $this->renderSlide($slide); + } + $html[] = Html::tag('ul', implode("\n", $slides), ['class' => 'slides']); + return implode("\n", $html); + } + + /** + * Renders a single slide. + * + * @param array $slideConfig the configuration for the slide + * @return string the slide's markup + */ + protected function renderSlide($slideConfig = []) + { + $imageOptions = ArrayHelper::getValue($slideConfig, 'image', []); + $imageSrc = ArrayHelper::remove($imageOptions, 'src', null); + if (!$imageSrc) { + return ''; + } + + $caption = $this->renderCaption(ArrayHelper::getValue($slideConfig, 'caption', false)); + $options = ArrayHelper::getValue($slideConfig, 'options', []); + $options = ArrayHelper::merge($this->slideOptions, $options); + + $html[] = Html::beginTag('li', $options); + $html[] = Html::img($imageSrc, $imageOptions); + $html[] = $caption; + $html[] = Html::endTag('li'); + return implode("\n", $html); + } + + /** + * Renders the caption markup. + * @param false|array $captionConfig the caption configuration data + * @return string the markup of the caption + */ + protected function renderCaption($captionConfig) + { + if ($captionConfig === false) { + return ''; + } + + $content = ArrayHelper::getValue($captionConfig, 'content', ''); + $alignment = ArrayHelper::getValue($captionConfig, 'align', null); + $options = ArrayHelper::getValue($captionConfig, 'options', []); + $options = ArrayHelper::merge($this->captionOptions, $options); + + Html::addCssClass($options, ['caption' => 'caption']); + if ($alignment) { + Html::addCssClass($options, ['align' => $alignment]); + } + + return Html::tag('div', $content, $options); + } +} From ae37faf55c5b27a6786361538419457ee5502048 Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Sat, 1 Jul 2017 23:50:47 +0200 Subject: [PATCH 09/12] fix docs --- src/widgets/media/Slider.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/widgets/media/Slider.php b/src/widgets/media/Slider.php index ee98cb4..267fb13 100644 --- a/src/widgets/media/Slider.php +++ b/src/widgets/media/Slider.php @@ -20,7 +20,7 @@ * * ```php * 'slideOptions' => [ - * 'class' => 'slide-item' // this class will be used for all slide elements (`
  • `) + * 'class' => 'slide-item' // this class will be used for all slide elements (
  • ) * ], * 'slides' => [ * [ @@ -29,10 +29,10 @@ * [ * 'image' => ['src' => '/source/of/image'], * 'caption' => [ - * 'content' => '

    Caption content

    , + * 'content' => '

    Caption content

    ', * 'align' => Slider::CAPTION_ALIGN_RIGHT * ], - * 'options' => ['class' => 'slide-item-override'] // overrides [[slideOptions]] + * 'options' => ['class' => 'slide-item-override'] // overrides $slideOptions * ] * ] * ``` From f2f8a92956867841ebbc447967151a3dfd8565ce Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Sun, 2 Jul 2017 20:26:57 +0200 Subject: [PATCH 10/12] added Carousel --- src/widgets/media/Carousel.php | 188 +++++++++++++++++++++++++++++++++ src/widgets/media/Slider.php | 4 +- 2 files changed, 190 insertions(+), 2 deletions(-) create mode 100644 src/widgets/media/Carousel.php diff --git a/src/widgets/media/Carousel.php b/src/widgets/media/Carousel.php new file mode 100644 index 0000000..83b14d0 --- /dev/null +++ b/src/widgets/media/Carousel.php @@ -0,0 +1,188 @@ +not be encoded. + * + * ```php + * 'itemOptions' => [ + * 'class' => 'amber white-text' // this class will be used for all carousel elements + * ], + * 'items' => [ + * [ + * 'content' => Html::img('http://lorempixel.com/800/800/sports/2'), + * ], + * [ + * 'content' => '

    Carousel item heading

    Arbitrary content

    ' + * 'options' => ['class' => 'carusel-item-override'] // overrides $itemOptions + * ] + * ], + * 'fixedItemOptions' => [ + * 'tag' => 'p', + * 'content' => 'Some content', + * ], + * ``` + * @author Christoph Erdmann + * @package widgets + * @subpackage media + * + * @see http://materializecss.com/carousel.html + */ +class Carousel extends BaseWidget +{ + /** + * @var array the HTML attributes for the carousel container tag. + * @see [yii\helpers\BaseHtml::renderTagAttributes()](http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#renderTagAttributes()-detail) + * for details on how attributes are being rendered. + */ + public $carouselOptions = []; + + /** + * @var array the HTML attributes for each carousel item's tag. + * These options will be merged with the individual item options. + * + * @see [yii\helpers\BaseHtml::renderTagAttributes()](http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#renderTagAttributes()-detail) + * for details on how attributes are being rendered. + */ + public $itemOptions = []; + + /** + * @var false|array the configuration for the fixed item. + * + * The following special options are recognized: + * - tag: the fixed item's HTML tag name + * - content: the content of the fixed item. Please note: this can be HTML and will not be encoded. + * + * If you do not want the fixed item to be rendered, set this option to `false`. + * @see http://materializecss.com/carousel.html#special + */ + public $fixedItemOptions = false; + + /** + * @var array the carousel items. + * Provide a sub-array for each item which can have the keys `tag`, `content` and `options`. + */ + public $items = []; + + /** + * @var boolean whether the carousel has full width. + */ + public $fullWidth = false; + + /** + * @var boolean whether to show navigation indicators. + */ + public $showIndicators = false; + + /** + * @var boolean whether to start with first slide at the end. + * @see http://materializecss.com/carousel.html#options + */ + public $noWrap = false; + + /** + * Initialize the widget. + */ + public function init() + { + parent::init(); + + Html::addCssClass($this->carouselOptions, ['plugin' => 'carousel']); + if ($this->fullWidth) { + Html::addCssClass($this->carouselOptions, ['fullwidth' => 'carousel-slider']); + $this->clientOptions['fullWidth'] = true; + } + + $this->clientOptions['noWrap'] = $this->noWrap; + $this->clientOptions['indicators'] = $this->showIndicators; + + $this->registerPlugin('carousel', '.carousel'); + } + + /** + * Execute the widget. + */ + public function run() + { + $tag = ArrayHelper::remove($this->options, 'tag', 'div'); + $html[] = Html::beginTag($tag, $this->options); + $html[] = Html::beginTag('div', $this->carouselOptions); + $html[] = $this->renderFixedItem(); + $html[] = $this->renderItems(); + $html[] = Html::endTag('div'); + $html[] = Html::endTag($tag); + + return implode("\n", $html); + } + + /** + * Parses all [[items]] and renders item list. + * + * @return string the item list markup + */ + protected function renderItems() + { + if (!$this->items) { + return ''; + } + + $html = []; + + foreach ($this->items as $item) { + $html[] = $this->renderItem($item); + } + + return implode("\n", $html); + } + + /** + * Renders a single carousel item. + * + * @param array $item the item configuration + * @return string the item markup + */ + protected function renderItem($item = []) + { + $tag = ArrayHelper::getValue($item, 'tag', 'div'); + $content = ArrayHelper::getValue($item, 'content', ''); + $options = ArrayHelper::getValue($item, 'options', []); + $options = ArrayHelper::merge($this->itemOptions, $options); + + Html::addCssClass($options, ['item' => 'carousel-item']); + + return Html::tag($tag, $content, $options); + } + + /** + * Renders the optional fixed item. + * + * @return string the fixed item's markup + */ + protected function renderFixedItem() + { + if ($this->fixedItemOptions === false) { + return ''; + } + + $tag = ArrayHelper::remove($this->fixedItemOptions, 'tag', 'div'); + $content = ArrayHelper::remove($this->fixedItemOptions, 'content', ''); + + Html::addCssClass($this->fixedItemOptions, ['fixed-item' => 'carousel-fixed-item']); + + return Html::tag($tag, $content, $this->fixedItemOptions); + } +} diff --git a/src/widgets/media/Slider.php b/src/widgets/media/Slider.php index 267fb13..aed3e68 100644 --- a/src/widgets/media/Slider.php +++ b/src/widgets/media/Slider.php @@ -115,7 +115,7 @@ public function init() } $this->clientOptions['indicators'] = $this->showIndicators; - $this->registerPlugin('slider', "#{$this->id} > .slider"); + $this->registerPlugin('slider', '.slider'); } /** @@ -135,7 +135,7 @@ public function run() } /** - * Parses all slides and generates the slide list. + * Parses all [[slides]] and generates the slide list. * @return string the list markup */ protected function renderSlides() From fb58106ee7c5d5b5965c77547af4622b214be7ef Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Mon, 3 Jul 2017 09:21:02 +0200 Subject: [PATCH 11/12] updated README, prepare 1.5.0 --- README.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 086bc24..920722a 100755 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ The following widgets are currently available: * Alert * Breadcrumbs * Button +* Carousel * Chip * DatePicker * DetailView @@ -70,25 +71,21 @@ The following widgets are currently available: * GridView with ActionColumn * Icon * LinkPager +* MaterialBox * Modal * Nav * NavBar +* Parallax * Progress * RangeInput * Select * SideNav +* Slider * Spinner * SubmitButton * SwitchButton * TimePicker -These widgets are planned for development: - -* Card -* Collapsible -* Collection -* Toast - ## Gii support If you are creating your CRUD controller and view files using Gii you can get materialized view files by integrating the adapted Gii templates. @@ -127,6 +124,7 @@ Unfortunately the issue still exists in the latest release, but can be fixed tem Hopefully one of the upcoming releases of Materialize will fix the issue. + ## Sample layout As of version 1.0.6 there is a sample layout file included in the package. You can use this file to get inspiration for @@ -136,6 +134,12 @@ You can find the sample layout file in ```src/layout/main.php```. ## Change log +### 1.5.0 - 2017-06-05 +* added [Carousel](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/Carousel.php) +* added [MaterialBox](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/MaterialBox.php) +* added [Parallax](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/Parallax.php) +* added [Slider](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/Slider.php) + ### 1.4.0 - 2017-06-05 * added [RangeInput](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/RangeInput.php) * updated Materialize to v0.98.2 From adf8b62529ab3aca4f6e7ec87a622624316a8597 Mon Sep 17 00:00:00 2001 From: Christoph Erdmann Date: Mon, 3 Jul 2017 09:22:37 +0200 Subject: [PATCH 12/12] add layout change --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 920722a..3112882 100755 --- a/README.md +++ b/README.md @@ -139,6 +139,7 @@ You can find the sample layout file in ```src/layout/main.php```. * added [MaterialBox](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/MaterialBox.php) * added [Parallax](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/Parallax.php) * added [Slider](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/media/Slider.php) +* improved sample layout ### 1.4.0 - 2017-06-05 * added [RangeInput](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/form/RangeInput.php)