Merge remote-tracking branch 'origin/develop'

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: <https://asset-packagist.org/>
-
 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**

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": {

src/assets/MaterializeAsset.php

@@ -20,19 +20,12 @@ 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.
      */
     public $css = [
         'css/materialize.min.css'
     ];
-
-    /**
-     * @var array list of bundle class names that this bundle depends on.
-     */
-    public $depends = [
-        MaterializeFontAsset::class,
-    ];
 }

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.

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.

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)
     {

src/lib/MaterializeWidgetTrait.php

@@ -37,15 +37,15 @@ 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 = [];
 
     /**
      * @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);";
             }

src/widgets/Icon.php

@@ -15,19 +15,42 @@
 /**
  * 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 <[email protected]>
  * @package widgets
  * @see https://materializecss.com/icons.html
  */
 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]);
+        }
     }
 
     /**

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.
      */

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 = [])

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 <[email protected]>

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(<<<JS
 function (values, handle) {
-    var value = values[handle];
-    $('[data-slider-target="{$sliderId}"]').val(value);
+    let value = values[handle];
+    document.querySelector('#$containerId [data-slider-target="{$sliderId}"]').value = value;
 }
 JS
             );
@@ -189,14 +190,6 @@ protected function renderHtml5RangeInput()
     {
         $html[] = Html::beginTag('div', ['class' => '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(<<<JS
-var $varName = document.getElementById('$id');
+let $varName = document.getElementById('$id');
 noUiSlider.create($varName, {$options});
 JS
             );