diff --git a/README.md b/README.md index f1cd0a6..edf8def 100755 --- a/README.md +++ b/README.md @@ -6,39 +6,42 @@ ---- -This is the current, actively developed 3.x branch which is implementing Materialize version 1.0 and thus breaking backwards compatibility. +This is the current, actively developed 4.x branch which is implementing Materialize version 1.1 and thus breaking backwards compatibility. [Go to 1.x version](https://github.com/MacGyer/yii2-materializecss/tree/1.x) [Go to 2.x version](https://github.com/MacGyer/yii2-materializecss/tree/2.x) +[Go to 3.x version](https://github.com/MacGyer/yii2-materializecss/tree/3.x) + ---- This package integrates the Materialize CSS framework into [Yii2](http://www.yiiframework.com/). -[Materialize](http://materializecss.com/) is a modern responsive front-end framework based on Material Design. - -See [official documentation](http://macgyer.github.io/yii2-materializecss/) for detailed information. +[Materialize](https://materializecss.github.io/materialize/) is a modern responsive front-end framework based on Material Design. -Have a look at the [official demo page](https://yii2-materializecss.pluspunkt-coding.de) to see the repo in action (needs adaption to v3) +Have a look at the [official documentation page](https://yii2-materializecss.pluspunkt-coding.de) to see the repo in action (v4 only). -Current Materialize version implemented: 1.0.0. +Current Materialize version implemented: 1.1.0. ## Installation The preferred way of installation is through Composer. If you don't have Composer you can get it here: https://getcomposer.org/ -You also should install the Composer Asset Plugin to handle NPM and Bower assets: -``` -$ composer global require "fxp/composer-asset-plugin:~1.4" +You also should reference Asset Packagist in the ```repositories``` section to handle NPM and Bower assets: +```json +"repositories": [ + { + "type": "composer", + "url": "https://asset-packagist.org" + } +] ``` -Or you can make use of Asset Packagist: - To install the package add the following to the ```require``` section of your composer.json: -``` +```json "require": { - "macgyer/yii2-materializecss": "~3.0.0" + "macgyer/yii2-materializecss": "^4.0" }, ``` @@ -65,6 +68,18 @@ public $depends = [ ]; ``` +### Material Icons + +To be compatible with GDPR (EU) the MaterializeFontAsset is not loaded automatically via the MaterializeAsset. The font asset requests the Material Icon font from Google servers (as stated in the Materialize docs). + +If you are **not** affected by GDPR, simply load the MaterializeFontAsset in your layout or AppAsset. + +Otherwise you need to self-host the Material Icon font (i. e. do not request them from Google). You could use ```material-icons``` (https://www.npmjs.com/package/material-icons) to load the font files, CSS and SCSS from NPM and include them in your build process. + +### SCSS + +Customizing Materialize via SCSS is easy. Integrate the Materialize SCSS in your own SCSS files and build your own version. Do not use the MaterializeAsset then as it loads the pre-built CSS provided by Materialize. + ## Widgets The following widgets are currently available: @@ -137,6 +152,14 @@ You can find the sample layout file in ```src/layout/main.php```. ## Change log +### 4.0.0 - 2022-11-27 +* implement Materialize v1.1.0 (community fork https://materializecss.github.io/materialize/) +* PHP 8 support +* use NPM instead of Bower +* use constants to configure [Icon](https://github.com/MacGyer/yii2-materializecss/blob/master/src/widgets/Icon.php) +* **Breaking changes included**: + * MaterializeFontAsset not loaded automatically + ### 3.0.0 - 2018-11-16 * implement Materialize v1.0.0 * **Breaking changes included** diff --git a/composer.json b/composer.json index 3a69050..505ae68 100755 --- a/composer.json +++ b/composer.json @@ -13,12 +13,11 @@ "role": "Developer" } ], - "version": "3.0.0", "require": { - "php": ">=5.6.0", + "php": "^7.4 || ^8.0", "yiisoft/yii2": "~2.0.0", - "bower-asset/materialize": "1.0.0" + "npm-asset/materializecss--materialize": "1.1.0" }, "autoload": { "psr-4": { diff --git a/src/assets/MaterializeAsset.php b/src/assets/MaterializeAsset.php index 942653a..ad3a31c 100755 --- a/src/assets/MaterializeAsset.php +++ b/src/assets/MaterializeAsset.php @@ -20,7 +20,7 @@ class MaterializeAsset extends AssetBundle /** * @var string the directory that contains the source asset files for this asset bundle. */ - public $sourcePath = '@bower/materialize/dist'; + public $sourcePath = '@npm/materializecss--materialize/dist'; /** * @var array list of CSS files that this bundle contains. @@ -28,11 +28,4 @@ class MaterializeAsset extends AssetBundle public $css = [ 'css/materialize.min.css' ]; - - /** - * @var array list of bundle class names that this bundle depends on. - */ - public $depends = [ - MaterializeFontAsset::class, - ]; } diff --git a/src/assets/MaterializePluginAsset.php b/src/assets/MaterializePluginAsset.php index ef58546..a66d919 100755 --- a/src/assets/MaterializePluginAsset.php +++ b/src/assets/MaterializePluginAsset.php @@ -20,7 +20,7 @@ class MaterializePluginAsset extends AssetBundle /** * @var string the directory that contains the source asset files for this asset bundle. */ - public $sourcePath = '@bower/materialize/dist'; + public $sourcePath = '@npm/materializecss--materialize/dist'; /** * @var array list of JS files that this bundle contains. diff --git a/src/assets/NoUiSliderAsset.php b/src/assets/NoUiSliderAsset.php index 6705d41..ee7fd3f 100644 --- a/src/assets/NoUiSliderAsset.php +++ b/src/assets/NoUiSliderAsset.php @@ -21,7 +21,7 @@ class NoUiSliderAsset extends AssetBundle /** * @var string the directory that contains the source asset files for this asset bundle. */ - public $sourcePath = '@bower/materialize/extras/noUiSlider'; + public $sourcePath = '@npm/materializecss--materialize/extras/noUiSlider'; /** * @var array list of CSS files that this bundle contains. diff --git a/src/lib/Html.php b/src/lib/Html.php index 83e30ae..19b79de 100755 --- a/src/lib/Html.php +++ b/src/lib/Html.php @@ -112,7 +112,7 @@ public static function activeTextarea($model, $attribute, $options = []) * @param string $attribute the attribute name or expression. * @param array $options the tag options in terms of name-value pairs. * - * @see http://materializecss.com/forms.html#character-counter + * @see https://materializecss.github.io/materialize/text-inputs.html#character-counter */ private static function normalizeMaxLength($model, $attribute, &$options) { diff --git a/src/lib/MaterializeWidgetTrait.php b/src/lib/MaterializeWidgetTrait.php index 10225d7..8fb05be 100755 --- a/src/lib/MaterializeWidgetTrait.php +++ b/src/lib/MaterializeWidgetTrait.php @@ -37,7 +37,7 @@ trait MaterializeWidgetTrait * @var array the options for the underlying Materialize JS plugin. * Please refer to the corresponding Materialize documentation web page. * - * @see http://materializecss.com/ + * @see https://materializecss.github.io/materialize/ */ public $clientOptions = []; @@ -45,7 +45,7 @@ trait MaterializeWidgetTrait * @var array the event handlers for the underlying Materialize JS plugin. * Please refer to the corresponding Materialize documentation web page. * - * @see http://materializecss.com/ + * @see https://materializecss.github.io/materialize/ */ public $clientEvents = []; @@ -103,7 +103,7 @@ protected function registerClientEvents() /** @var View $view */ $view = $this->getView(); $id = $this->options['id']; - $js[] = "var elem_$id = document.getElementById('$id');"; + $js[] = "let elem_$id = document.getElementById('$id');"; foreach ($this->clientEvents as $event => $handler) { $js[] = "elem_$id.addEventListener('$event', $handler);"; } diff --git a/src/widgets/Icon.php b/src/widgets/Icon.php index e77f392..a077d93 100755 --- a/src/widgets/Icon.php +++ b/src/widgets/Icon.php @@ -15,12 +15,10 @@ /** * Icon can be used to display a Materialize icon. * - * Please note that the Materialize icons are shipped in a separate font file. This font file is automatically registered - * by the [[\macgyer\yii2materializecss\assets\MaterializeAsset|MaterializeAsset]]. + * To be compatible with GDPR (EU) the MaterializeFontAsset is not loaded automatically via the [[\macgyer\yii2materializecss\assets\MaterializeAsset|MaterializeAsset]]. The font asset requests the Material Icon font from Google servers (as stated in the Materialize docs). + * If you are not affected by GDPR, simply load the [[\macgyer\yii2materializecss\assets\MaterializeFontAsset|MaterializeFontAsset]] in your layout or AppAsset. * - * If you do not load the default [[\macgyer\yii2materializecss\assets\MaterializeAsset|MaterializeAsset]] make sure to at least load - * [[\macgyer\yii2materializecss\assets\MaterializeFontAsset|MaterializeFontAsset]] (or another source providing the font file) to correctly - * display the icons. + * Otherwise you need to self-host the Material Icon font (i. e. do not request them from Google). You could use `material-icons` (https://www.npmjs.com/package/material-icons) to load the font files, CSS and SCSS from NPM and include them in your build process. * * @author Christoph Erdmann * @package widgets @@ -28,6 +26,31 @@ */ class Icon extends BaseWidget { + /** + * Sets the [[size]] of the icon to "tiny". + */ + public const SIZE_TINY = 'tiny'; + /** + * Sets the [[size]] of the icon to "small". This is the default. + */ + public const SIZE_SMALL = 'small'; + /** + * Sets the [[size]] of the icon to "medium". + */ + public const SIZE_MEDIUM = 'medium'; + /** + * Sets the [[size]] of the icon to "large". + */ + public const SIZE_LARGE = 'large'; + /** + * Sets the [[position]] of the icon to "left". + */ + public const POSITION_LEFT = 'left'; + /** + * Sets the [[position]] of the icon to "right". + */ + public const POSITION_RIGHT = 'right'; + /** * @var string the name of the icon. * @@ -40,11 +63,16 @@ class Icon extends BaseWidget * * Currently "left" and "right" are natively supported by Materialize, but you can set this property to a custom string * which will be added to the HTML class attribute and thus can be individually styled. - * - * The default icon position is "left". */ public $position; + /** + * @var string the size of the icon. + * + * The default icon size is "small". + */ + public $size = self::SIZE_SMALL; + /** * @var array the HTML options for the icon tag. * @@ -69,12 +97,15 @@ public function init() if (!$this->name) { throw new InvalidConfigException('The icon name must be specified.'); } + Html::addCssClass($this->options, ['widget' => 'material-icons']); - if ($this->position === null) { - $this->position = 'left'; + if ($this->position) { + Html::addCssClass($this->options, ['material-icon-position' => $this->position]); } - Html::addCssClass($this->options, ['material-icons', $this->position]); + if ($this->size) { + Html::addCssClass($this->options, ['material-icon-size' => $this->size]); + } } /** diff --git a/src/widgets/Modal.php b/src/widgets/Modal.php index 577df3d..d753068 100755 --- a/src/widgets/Modal.php +++ b/src/widgets/Modal.php @@ -122,7 +122,7 @@ class Modal extends BaseWidget * - label: string, the label of the button. Defaults to '×'. * * The rest of the options will be rendered as the HTML attributes of the button tag. - * Please refer to the [Modal plugin help](http://materializecss.com/modals.html) + * Please refer to the [Modal plugin help](https://materializecss.github.io/materialize/modals.html) * for the supported HTML attributes. * @see [\yii\helpers\Html::renderTagAttributes()](http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#renderTagAttributes()-detail) for details on how attributes are being rendered. */ @@ -155,7 +155,7 @@ class Modal extends BaseWidget * - 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://materializecss.com/modals.html) + * Please refer to the [Modal plugin help](https://materializecss.github.io/materialize/modals.html) * for the supported HTML attributes. * @see [\yii\helpers\Html::renderTagAttributes()](http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#renderTagAttributes()-detail) for details on how attributes are being rendered. */ diff --git a/src/widgets/form/ActiveField.php b/src/widgets/form/ActiveField.php index e9ab183..743400e 100755 --- a/src/widgets/form/ActiveField.php +++ b/src/widgets/form/ActiveField.php @@ -111,7 +111,7 @@ class ActiveField extends \yii\widgets\ActiveField * * Note: the `characterCounter()` is currently available for input types `text` and `password`, and for `textarea`. * - * @see http://materializecss.com/forms.html#character-counter + * @see https://materializecss.github.io/materialize/text-inputs.html#character-counter */ public $showCharacterCounter = false; @@ -475,7 +475,7 @@ public function numberInput($options = []) * the Materialize character counter JS plugin is initialized for this field. * * @return $this the field object itself. - * @see http://materializecss.com/forms.html#character-counter + * @see https://materializecss.github.io/materialize/text-inputs.html#input */ public function passwordInput($options = []) { @@ -602,8 +602,8 @@ public function telInput($options = []) * - autocomplete: string|array, see [[initAutoComplete()]] for details * * @return $this the field object itself. - * @see http://materializecss.com/forms.html#character-counter - * @see http://materializecss.com/forms.html#autocomplete + * @see https://materializecss.github.io/materialize/text-inputs.html#textarea + * @see https://materializecss.github.io/materialize/autocomplete.html * @see https://www.w3.org/TR/html5/forms.html#attr-fe-autocomplete */ public function textarea($options = []) @@ -633,8 +633,8 @@ public function textarea($options = []) * - autocomplete: string|array, see [[initAutoComplete()]] for details * * @return $this the field object itself. - * @see http://materializecss.com/forms.html#character-counter - * @see http://materializecss.com/forms.html#autocomplete + * @see https://materializecss.github.io/materialize/text-inputs.html#textarea + * @see https://materializecss.github.io/materialize/autocomplete.html * @see https://www.w3.org/TR/html5/forms.html#attr-fe-autocomplete */ public function textInput($options = []) diff --git a/src/widgets/form/DatePicker.php b/src/widgets/form/DatePicker.php index 95a1413..1e4e954 100755 --- a/src/widgets/form/DatePicker.php +++ b/src/widgets/form/DatePicker.php @@ -11,9 +11,7 @@ use macgyer\yii2materializecss\lib\Html; /** - * DatePicker renders an date picker input element. - * - * Materialize is using a modified version of the JS library pickadate.js. + * DatePicker renders a date picker input element. * * @see https://materializecss.com/pickers.html#date-picker * @author Christoph Erdmann diff --git a/src/widgets/form/RangeInput.php b/src/widgets/form/RangeInput.php index 7174191..1b64990 100644 --- a/src/widgets/form/RangeInput.php +++ b/src/widgets/form/RangeInput.php @@ -55,7 +55,7 @@ class RangeInput extends BaseInputWidget /** * @var boolean whether to use noUiSlider. - * @see http://materializecss.com/forms.html#range + * @see https://materializecss.github.io/materialize/range.html */ public $useNoUiSlider = true; @@ -131,7 +131,7 @@ public function init() } if (!isset($this->sliderOptions['id'])) { - $this->sliderOptions['id'] = $this->getId(); + $this->sliderOptions['id'] = "{$this->getId()}-slider"; } $this->addUpdateEvent(); @@ -145,14 +145,15 @@ public function init() */ protected function addUpdateEvent() { + $containerId = $this->options['id']; $sliderId = $this->sliderOptions['id']; $this->inputOptions['data-slider-target'] = $sliderId; if (!isset($this->clientEvents['update'])) { $this->clientEvents['update'] = new JsExpression(<< 'range-field']); - // workaround for: https://github.com/Dogfalo/materialize/issues/5761 - if (!isset($this->inputOptions['min'])) { - $this->inputOptions['min'] = 0; - } - if (!isset($this->inputOptions['max'])) { - $this->inputOptions['max'] = 100; - } - if ($this->hasModel()) { $html[] = Html::activeInput('range', $this->model, $this->attribute, $this->inputOptions); } else { @@ -253,7 +246,7 @@ protected function registerClientScripts() if ($this->clientOptions !== false) { $options = empty($this->clientOptions) ? '{}' : Json::htmlEncode($this->clientOptions); $view->registerJs(<< [ * 'label' => 'Option 2', * - * // The 'data-icon' and 'class' attributes are Materialize specific. Refer to http://materializecss.com/forms.html#select + * // The 'data-icon' and 'class' attributes are Materialize specific. Refer to https://materializecss.github.io/materialize/select.html * // for information about adding icons to select options. * 'options' => [ * 'data-icon' => 'http://lorempixel.com/40/40/people/1', diff --git a/src/widgets/form/SwitchButton.php b/src/widgets/form/SwitchButton.php index 89f6b88..ece0b05 100755 --- a/src/widgets/form/SwitchButton.php +++ b/src/widgets/form/SwitchButton.php @@ -152,7 +152,7 @@ public function init() $this->inputOptions['name'] = $this->name; } - $this->inputOptions['uncheck'] = isset($this->uncheck) ? $this->uncheck : is_null($this->uncheck) ? null : '0'; + $this->inputOptions['uncheck'] = isset($this->uncheck) ? $this->uncheck : '0'; $this->inputOptions['value'] = isset($this->value) ? $this->value : '1'; } @@ -245,6 +245,7 @@ protected function renderIcon($state) return Icon::widget([ 'name' => ArrayHelper::getValue($this->$iconProperty, 'name', null), 'position' => ArrayHelper::getValue($this->$iconProperty, 'position', null), + 'size' => ArrayHelper::getValue($this->$iconProperty, 'size', Icon::SIZE_SMALL), 'options' => ArrayHelper::getValue($this->$iconProperty, 'options', []) ]); } diff --git a/src/widgets/form/TimePicker.php b/src/widgets/form/TimePicker.php index 3149d7d..cd37c5d 100644 --- a/src/widgets/form/TimePicker.php +++ b/src/widgets/form/TimePicker.php @@ -11,7 +11,7 @@ use macgyer\yii2materializecss\lib\Html; /** - * TimePicker renders a time picker input element with a modified version of pickadate.js. + * TimePicker renders a time picker input element. * * @author Christoph Erdmann * @package widgets diff --git a/src/widgets/media/Carousel.php b/src/widgets/media/Carousel.php index 1d5f7d5..673bf46 100644 --- a/src/widgets/media/Carousel.php +++ b/src/widgets/media/Carousel.php @@ -40,7 +40,7 @@ * @package widgets * @subpackage media * - * @see http://materializecss.com/carousel.html + * @see https://materializecss.github.io/materialize/carousel.html */ class Carousel extends BaseWidget { @@ -68,7 +68,7 @@ class Carousel extends BaseWidget * - 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 + * @see https://materializecss.github.io/materialize/carousel.html#special */ public $fixedItemOptions = false; @@ -115,7 +115,7 @@ class Carousel extends BaseWidget /** * @var boolean whether to start with first slide at the end. - * @see http://materializecss.com/carousel.html#options + * @see https://materializecss.github.io/materialize/carousel.html#options */ public $noWrap = false; diff --git a/src/widgets/media/MaterialBox.php b/src/widgets/media/MaterialBox.php index f04b268..92cf8f3 100644 --- a/src/widgets/media/MaterialBox.php +++ b/src/widgets/media/MaterialBox.php @@ -58,7 +58,7 @@ public function init() if (!$this->imageSrc) { $imageSrc = ArrayHelper::remove($this->imageOptions, 'src', null); if (!$imageSrc) { - throw new InvalidConfigException("Image src must be defined."); + throw new InvalidConfigException('Image src must be defined.'); } $this->imageSrc = $imageSrc; @@ -69,6 +69,11 @@ public function init() if ($this->imageCaption !== false) { $this->imageOptions['data-caption'] = $this->encodeImageCaption ? Html::encode($this->imageCaption) : $this->imageCaption; } + + $alt = Html::encode(ArrayHelper::getValue($this->imageOptions, 'alt')); + if (!$alt) { + $this->imageOptions['alt'] = Html::encode($this->imageCaption); + } } /** diff --git a/src/widgets/media/Parallax.php b/src/widgets/media/Parallax.php index e300cb9..8ef0d96 100644 --- a/src/widgets/media/Parallax.php +++ b/src/widgets/media/Parallax.php @@ -49,7 +49,7 @@ public function init() if (!$this->imageSrc) { $imageSrc = ArrayHelper::remove($this->imageOptions, 'src', null); if (!$imageSrc) { - throw new InvalidConfigException("Image src must be defined."); + throw new InvalidConfigException('Image src must be defined.'); } $this->imageSrc = $imageSrc; diff --git a/src/widgets/navigation/Nav.php b/src/widgets/navigation/Nav.php index dd6e243..7d5e1c8 100644 --- a/src/widgets/navigation/Nav.php +++ b/src/widgets/navigation/Nav.php @@ -7,7 +7,7 @@ namespace macgyer\yii2materializecss\widgets\navigation; -use macgyer\yii2materializecss\assets\MaterializeAsset; +use macgyer\yii2materializecss\assets\MaterializePluginAsset; use macgyer\yii2materializecss\lib\BaseWidget; use macgyer\yii2materializecss\lib\Html; use Yii; @@ -42,7 +42,7 @@ * ``` * * @author Christoph Erdmann - * @see http://materializecss.com/navbar.html + * @see https://materializecss.github.io/materialize/navbar.html * @package widgets * @subpackage navigation */ @@ -106,7 +106,7 @@ class Nav extends BaseWidget * Defaults to `null` which means `arrow_drop_down` will be used. * To disable the caret, set this property to be an empty string. * - * @see http://materializecss.com/navbar.html#navbar-dropdown + * @see https://materializecss.github.io/materialize/navbar.html#navbar-dropdown */ public $dropDownCaret; @@ -132,7 +132,7 @@ public function init() */ public function run() { - MaterializeAsset::register($this->getView()); + MaterializePluginAsset::register($this->getView()); $html[] = $this->renderItems(); return implode("\n", $html); @@ -216,7 +216,7 @@ protected function renderItem($item) * @throws \Exception * @since 2.0.1 * - * @see http://materializecss.com/navbar.html#navbar-dropdown + * @see https://materializecss.github.io/materialize/navbar.html#navbar-dropdown */ protected function renderDropdown($items, $parentItem, $targetId) { diff --git a/src/widgets/navigation/NavBar.php b/src/widgets/navigation/NavBar.php index 8b1ce58..6b4e4be 100644 --- a/src/widgets/navigation/NavBar.php +++ b/src/widgets/navigation/NavBar.php @@ -37,7 +37,7 @@ * NavBar::end(); * ``` * @author Christoph Erdmann - * @see http://materializecss.com/navbar.html + * @see https://materializecss.github.io/materialize/navbar.html * @package widgets * @subpackage navigation */ @@ -54,7 +54,7 @@ class NavBar extends BaseWidget /** * @var string|boolean the text of the brand or false if it's not used. Note that this is not HTML-encoded. - * @see http://materializecss.com/navbar.html + * @see https://materializecss.github.io/materialize/navbar.html */ public $brandLabel = false; diff --git a/src/widgets/navigation/SideNav.php b/src/widgets/navigation/SideNav.php index 42ff373..cd4a7a9 100644 --- a/src/widgets/navigation/SideNav.php +++ b/src/widgets/navigation/SideNav.php @@ -20,7 +20,7 @@ * See [[Nav::$items]] for details on item structure. * * @author Christoph Erdmann - * @see http://materializecss.com/side-nav.html + * @see https://materializecss.github.io/materialize/sidenav.html * @package widgets * @subpackage navigation */ @@ -53,7 +53,7 @@ class SideNav extends Nav * - closeOnClick: true, // Closes side-nav on clicks, useful for Angular/Meteor * - draggable: true // Choose whether you can drag to open on touch screens * - * @see http://materializecss.com/side-nav.html#options + * @see https://materializecss.github.io/materialize/sidenav.html#options */ public $clientOptions = [];