Merge remote-tracking branch 'origin/develop'

README.md

@@ -73,7 +73,7 @@ The following widgets are currently available:
 * Breadcrumbs
 * Button
 * Carousel
-* Chip
+* ChipInput
 * Collapsible
 * DatePicker
 * DetailView
@@ -93,6 +93,7 @@ The following widgets are currently available:
 * SideNav
 * Slider
 * Spinner
+* StaticChip
 * SubmitButton
 * SwitchButton
 * TimePicker

composer.json

@@ -15,10 +15,10 @@
     ],
     "version": "3.0.0",
     "require": {
-        "php": ">=7.0.0",
-        "yiisoft/yii2": "~2.0.14",
+        "php": ">=5.6.0",
+        "yiisoft/yii2": "~2.0.0",
 
-        "bower-asset/materialize": "1.0.0-beta"
+        "bower-asset/materialize": "1.0.*@beta"
     },
     "autoload": {
         "psr-4": {

src/assets/MaterializeAsset.php

@@ -11,7 +11,7 @@
 
 /**
  * MaterializeAsset provides the required Materialize CSS files.
- * 
+ *
  * @author Christoph Erdmann <yii2-materializecss@pluspunkt-coding.de>
  * @package assets
  */
@@ -33,6 +33,6 @@ class MaterializeAsset extends AssetBundle
      * @var array list of bundle class names that this bundle depends on.
      */
     public $depends = [
-        'macgyer\yii2materializecss\assets\MaterializeFontAsset',
+        MaterializeFontAsset::class,
     ];
 }

src/assets/MaterializePluginAsset.php

@@ -11,7 +11,7 @@
 
 /**
  * MaterializePluginAsset provides the Materialize JS files.
- * 
+ *
  * @author Christoph Erdmann <yii2-materializecss@pluspunkt-coding.de>
  * @package assets
  */
@@ -21,18 +21,11 @@ class MaterializePluginAsset extends AssetBundle
      * @var string the directory that contains the source asset files for this asset bundle.
      */
     public $sourcePath = '@bower/materialize/dist';
-    
+
     /**
      * @var array list of JS files that this bundle contains.
      */
     public $js = [
         'js/materialize.min.js'
     ];
-
-    /**
-     * @var array list of bundle class names that this bundle depends on.
-     */
-    public $depends = [
-        'yii\web\JqueryAsset'
-    ];
 }

src/lib/MaterializeWidgetTrait.php

@@ -10,6 +10,7 @@
 use macgyer\yii2materializecss\assets\MaterializePluginAsset;
 use Yii;
 use yii\helpers\Json;
+use yii\web\View;
 
 /**
  * MaterializeWidgetTrait provides the basics for all Materialize widgets features.
@@ -72,6 +73,7 @@ public function init()
      */
     protected function registerPlugin($name, $selector = null)
     {
+        /** @var View $view */
         $view = $this->getView();
 
         MaterializePluginAsset::register($view);
@@ -83,9 +85,10 @@ protected function registerPlugin($name, $selector = null)
         }
 
         if ($this->clientOptions !== false) {
-            $options = empty($this->clientOptions) ? '' : Json::htmlEncode($this->clientOptions);
-            $js = "jQuery('$selector').$name($options);";
-            $view->registerJs($js);
+            $options = empty($this->clientOptions) ? '{}' : Json::htmlEncode($this->clientOptions);
+
+            $js = "document.addEventListener('DOMContentLoaded', function() {M.$name.init(document.querySelectorAll('$selector'), $options);});";
+            $view->registerJs($js, View::POS_END);
         }
 
         $this->registerClientEvents();
@@ -97,12 +100,23 @@ protected function registerPlugin($name, $selector = null)
     protected function registerClientEvents()
     {
         if (!empty($this->clientEvents)) {
+            /** @var View $view */
+            $view = $this->getView();
             $id = $this->options['id'];
-            $js = [];
+            $js[] = "var elem_$id = document.getElementById('$id');";
             foreach ($this->clientEvents as $event => $handler) {
-                $js[] = "jQuery('#$id').on('$event', $handler);";
+                $js[] = "elem_$id.addEventListener('$event', $handler);";
             }
-            $this->getView()->registerJs(implode("\n", $js));
+            $view->registerJs(implode("\n", $js), View::POS_END);
         }
     }
-}
+
+    /**
+     * @return string
+     */
+    protected function getUniqueId($prefix = 'u_')
+    {
+        $uniqid = sha1(uniqid($prefix, true));
+        return "{$prefix}{$uniqid}";
+    }
+}

src/widgets/Alert.php

@@ -13,11 +13,11 @@
 use yii\helpers\ArrayHelper;
 
 /**
- * Alert renders Yii's session flash messages. 
- * 
- * All flash messages are displayed in the sequence they were assigned using 
- * [yii\web\Session::setFlash()](http://www.yiiframework.com/doc-2.0/yii-web-session.html#setFlash()-detail). 
- * 
+ * Alert renders Yii's session flash messages.
+ *
+ * All flash messages are displayed in the sequence they were assigned using
+ * [yii\web\Session::setFlash()](http://www.yiiframework.com/doc-2.0/yii-web-session.html#setFlash()-detail).
+ *
  * You can set messages as follows:
  *
  * ```php
@@ -62,7 +62,7 @@ class Alert extends BaseWidget
 
     /**
      * @var array the HTML attributes for the widget container tag.
-     * @see [yii\helpers\BaseHtml::renderTagAttributes()](http://www.yiiframework.com/doc-2.0/yii-helpers-basehtml.html#renderTagAttributes()-detail) for details on 
+     * @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 $options = [];
@@ -81,8 +81,7 @@ public function init()
 
     /**
      * Executes the widget.
-     * @return string the result of widget execution to be outputted.
-     * 
+     *
      * @uses [yii\web\Session](http://www.yiiframework.com/doc-2.0/yii-web-session.html)
      */
     public function run()

src/widgets/Button.php

@@ -21,7 +21,7 @@
  *
  * The button can be displayed with an optional icon. This class uses the [[Icon|Icon]] widget to show icons.
  *
- * @see http://materializecss.com/buttons.html
+ * @see https://materializecss.com/buttons.html
  * @author Christoph Erdmann <yii2-materializecss@pluspunkt-coding.de>
  * @package widgets
  */
@@ -42,6 +42,21 @@ class Button extends BaseWidget
      */
     const TYPE_FLAT = 'flat';
 
+    /**
+     * Sets the [[size]] of the button to the default size.
+     */
+    const SIZE_DEFAULT = 'default';
+
+    /**
+     * Sets the [[size]] of the button to "small".
+     */
+    const SIZE_SMALL = 'small';
+
+    /**
+     * Sets the [[size]] of the button to "large".
+     */
+    const SIZE_LARGE = 'large';
+
     /**
      * @var string the tag used to render the button.
      */
@@ -88,9 +103,17 @@ class Button extends BaseWidget
     public $type = self::TYPE_RAISED;
 
     /**
-     * @var boolean whether the button shall be of larger size.
+     * @var string the size of button to be rendered.
+     *
+     * The following options are supported:
+     * - default
+     * - small
+     * - large
+     *
+     * This property defaults to "default". To set the type, use the corresponding `TYPE_*` constant of this class.
+     * If no type from this range is given, the button will be of the "default" type.
      */
-    public $large = false;
+    public $size = self::SIZE_DEFAULT;
 
     /**
      * @var boolean whether the button shall be disabled.
@@ -113,10 +136,17 @@ public function init()
                 break;
         }
 
-        if ($this->large) {
-            Html::addCssClass($this->options, ['btn_size' => 'btn-large']);
+        switch ($this->size) {
+            case self::SIZE_SMALL:
+            case self::SIZE_LARGE:
+                Html::addCssClass($this->options, ['btn_size' => "btn-$this->size"]);
+                break;
         }
 
+//        if ($this->large) {
+//            Html::addCssClass($this->options, ['btn_size' => 'btn-large']);
+//        }
+
         if ($this->disabled) {
             Html::addCssClass($this->options, ['btn_disabled' => 'disabled']);
         }

src/widgets/Collapsible.php

@@ -44,13 +44,14 @@
  *              'tag' => 'p',
  *              'data-body-category' => 'example',
  *          ],
+ *          'options' => ['class' => 'active'], // to make this item pre-selected
  *      ],
  * ]
  * ```
  * @author Christoph Erdmann <yii2-materializecss@pluspunkt-coding.de>
  * @package widgets
  *
- * @see http://materializecss.com/collapsible.html
+ * @see https://materializecss.com/collapsible.html
  */
 class Collapsible extends BaseWidget
 {
@@ -91,7 +92,12 @@ public function init()
         if ($this->isPopoutStyle) {
             Html::addCssClass($this->options, ['popout' => 'popout']);
         }
-        $this->options['data-collapsible'] = $this->type;
+
+        if ($this->type == self::TYPE_EXPANDABLE) {
+            $this->clientOptions['accordion'] = false;
+        }
+
+        $this->registerPlugin('Collapsible');
     }
 
     /**

src/widgets/Icon.php

@@ -18,20 +18,20 @@
  * 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]].
  *
- * 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 
+ * 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.
  *
  * @author Christoph Erdmann <yii2-materializecss@pluspunkt-coding.de>
  * @package widgets
- * @see http://materializecss.com/icons.html
+ * @see https://materializecss.com/icons.html
  */
 class Icon extends BaseWidget
 {
     /**
      * @var string the name of the icon.
      *
-     * @see http://materializecss.com/icons.html
+     * @see https://materializecss.com/icons.html
      */
     public $name;
 

src/widgets/Modal.php

@@ -37,7 +37,7 @@
  * ```
  * @author Christoph Erdmann <yii2-materializecss@pluspunkt-coding.de>
  * @package widgets
- * @see http://materializecss.com/modals.html
+ * @see https://materializecss.com/modals.html
  */
 class Modal extends BaseWidget
 {
@@ -107,7 +107,7 @@ class Modal extends BaseWidget
      * - fixedFooter
      * - bottomSheet
      *
-     * @see http://materializecss.com/modals.html
+     * @see https://materializecss.com/modals.html
      */
     public $modalType = self::TYPE_LEAN;
 
@@ -173,6 +173,41 @@ class Modal extends BaseWidget
      */
     public $footerOptions = [];
 
+    /**
+     * @var float the opacity of the Modal overlay. Valid values are 0 through 1.
+     */
+    public $overlayOpacity = 0.5;
+
+    /**
+     * @var int duration of the opening transition in ms.
+     */
+    public $inDuration = 250;
+
+    /**
+     * @var int duration of the closing transition in ms.
+     */
+    public $outDuration = 250;
+
+    /**
+     * @var boolean whether the page scrolling is disabled when the Modal is open.
+     */
+    public $preventScrolling = true;
+
+    /**
+     * @var boolean whether the Modal can be closed by keyboard or click.
+     */
+    public $dismissible = true;
+
+    /**
+     * @var string|mixed the starting top offset.
+     */
+    public $startingTopOffset = '4%';
+
+    /**
+     * @var string|mixed the ending top offset.
+     */
+    public $endingTopOffset = '10%';
+
     /**
      * Initializes the widget.
      * @uses [[renderCloseButton()]]
@@ -203,7 +238,7 @@ public function init()
 
         echo $html;
 
-        $this->registerPlugin('modal');
+        $this->registerPlugin('Modal');
     }
 
     /**
@@ -346,8 +381,12 @@ protected function initDefaults()
             ], $this->toggleButton);
         }
 
-        if ($this->clientOptions !== false) {
-            $this->clientOptions = ArrayHelper::merge(['show' => false], $this->clientOptions);
-        }
+        $this->clientOptions['opacity'] = $this->overlayOpacity;
+        $this->clientOptions['inDuration'] = $this->inDuration;
+        $this->clientOptions['outDuration'] = $this->outDuration;
+        $this->clientOptions['preventScrolling'] = $this->preventScrolling;
+        $this->clientOptions['dismissible'] = $this->dismissible;
+        $this->clientOptions['startingTop'] = $this->startingTopOffset;
+        $this->clientOptions['endingTop'] = $this->endingTopOffset;
     }
 }