added Spinner & Progress

Author: Christoph Erdmann

README.md

@@ -58,6 +58,8 @@ The following widgets are currently available:
 * Fixed Action Button
 * DatePicker
 * Modal
+* Spinner
+* Progress
 
 These widgets are planned for development:
 

composer.json

@@ -12,7 +12,7 @@
             "role": "Developer"
         }
     ],
-    "version": "1.0.1",
+    "version": "1.0.2",
     "require": {
         "php": ">=5.4.0",
         "yiisoft/yii2": "~2.0",

src/widgets/Progress.php

@@ -0,0 +1,79 @@
+<?php
+
+namespace macgyer\yii2materializecss\widgets;
+
+use macgyer\yii2materializecss\lib\BaseWidget;
+use macgyer\yii2materializecss\lib\Html;
+
+/**
+ * Class Progress
+ * @package macgyer\yii2materializecss\widgets
+ */
+class Progress extends BaseWidget
+{
+    /**
+     * @var array the HTML attributes for the widget container tag
+     *
+     * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
+     */
+    public $options = [];
+
+    /**
+     * @var array the HTML attributes for the progress tag
+     *
+     * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
+     */
+    public $progressOptions = [];
+
+    /**
+     * @var string the type of the progress bar
+     *
+     * The following options are supported:
+     *
+     * - indeterminate (default)
+     * - determinate
+     *
+     * @see http://materializecss.com/preloader.html
+     */
+    public $type = 'indeterminate';
+
+    /**
+     * @var int the (initial) value for 'determinate' progress bars
+     *
+     * The supported range is [0 ... 100].
+     * This value will be applied as inline CSS style to show the progress:
+     *
+     * <div class="determinate" style="width: 70%"></div>
+     *
+     * @see http://materializecss.com/preloader.html
+     */
+    public $value = 0;
+
+    /**
+     * Initialize the widget.
+     */
+    public function init()
+    {
+        parent::init();
+
+        Html::addCssClass($this->options, ['widget' => 'progress']);
+        Html::addCssClass($this->progressOptions, ['type' => $this->type]);
+
+        if ($this->type === 'determinate') {
+            Html::addCssStyle($this->progressOptions, ['width' => $this->value . '%']);
+        }
+    }
+
+    /**
+     * Executes the widget.
+     * @return string the result of widget execution to be outputted.
+     */
+    public function run()
+    {
+        $html[] = Html::beginTag('div', $this->options);
+        $html[] = Html::tag('div', null, $this->progressOptions);
+        $html[] = Html::endTag('div');
+
+        return implode("\n", $html);
+    }
+}

src/widgets/Spinner.php

@@ -0,0 +1,104 @@
+<?php
+
+namespace macgyer\yii2materializecss\widgets;
+
+use macgyer\yii2materializecss\lib\BaseWidget;
+use macgyer\yii2materializecss\lib\Html;
+
+/**
+ * Class Spinner
+ * @package macgyer\yii2materializecss\widgets
+ */
+class Spinner extends BaseWidget
+{
+    /**
+     * @var array the HTML attributes for the widget container tag
+     *
+     * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
+     */
+    public $options = [];
+
+    /**
+     * @var array the HTML attributes for the spinner
+     *
+     * @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
+     */
+    public $spinnerOptions = [];
+
+    /**
+     * @var bool whether to show alternating colors in spinner
+     *
+     * @see http://materializecss.com/preloader.html
+     */
+    public $flashColors = false;
+
+    /**
+     * @var array the colors alternating when $flashColors equals 'true'
+     */
+    private $colors = [
+        'blue',
+        'red',
+        'yellow',
+        'green',
+    ];
+
+    /**
+     * Initialize the widget.
+     */
+    public function init()
+    {
+        parent::init();
+
+        Html::addCssClass($this->options, ['widget' => 'preloader-wrapper active']);
+        Html::addCssClass($this->spinnerOptions, ['spinner' => 'spinner-layer']);
+    }
+
+    /**
+     * Executes the widget.
+     * @return string the result of widget execution to be outputted.
+     */
+    public function run()
+    {
+        $html[] = Html::beginTag('div', $this->options);
+
+        if ($this->flashColors !== false) {
+            foreach ($this->colors as $color) {
+                Html::addCssClass($this->spinnerOptions, ['color' => 'spinner-' . $color]);
+
+                $html[] = Html::beginTag('div', $this->spinnerOptions);
+                $html[] = $this->renderSpinner();
+                $html[] = Html::endTag('div');
+
+                Html::removeCssClass($this->spinnerOptions, ['color' => 'spinner-' . $color]);
+            }
+        } else {
+            $html[] = Html::beginTag('div', $this->spinnerOptions);
+            $html[] = $this->renderSpinner();
+            $html[] = Html::endTag('div');
+        }
+
+        $html[] = Html::endTag('div');
+
+        return implode("\n", $html);
+    }
+
+    /**
+     * @return string
+     */
+    private function renderSpinner()
+    {
+        $html = [
+            '<div class="circle-clipper left">',
+            '<div class="circle"></div>',
+            '</div>',
+            '<div class="gap-patch">',
+            '<div class="circle"></div>',
+            '</div>',
+            '<div class="circle-clipper right">',
+            '<div class="circle"></div>',
+            '</div>'
+        ];
+
+        return implode("\n", $html);
+    }
+}