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;
  }
 }