Added container image set widget showcase.

controllers/ContainerImageSetController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace humhub\modules\devtools\controllers;
+
+
+use humhub\modules\devtools\models\ContainerImageSetModel;
+use humhub\widgets\ModalClose;
+use Yii;
+
+class ContainerImageSetController extends DevtoolsController
+{
+    public function actionIndex()
+    {
+        $model = new ContainerImageSetModel();
+        if ($model->load(Yii::$app->request->post())) {
+            return $this->renderAjax('../widgets/image_set/result', ['model' => $model]);
+        }
+
+        return ModalClose::widget(['error', 'Could not load form data!']);
+    }
+}

models/ContainerImageSetModel.php

@@ -0,0 +1,111 @@
+<?php
+
+namespace humhub\modules\devtools\models;
+
+class ContainerImageSetModel extends \yii\base\Model
+{
+    /**
+     * @var string the instance of items to render
+     */
+
+    public $instance;
+
+    /**
+     * @var int the amount of visible items to render
+     */
+    public $max;
+
+    /**
+     * @var int the width of the visible imageamount of visible items to render
+     */
+    public $width;
+
+    /**
+     * @var int the height of the visible image
+     */
+    public $height;
+
+    /**
+     * @var array html options for the generated tag
+     */
+    public $htmlOptions;
+
+    /**
+     * @var boolean create link to the space or user profile
+     */
+    public $link;
+
+    /**
+     * @var array Html Options of the link
+     */
+    public $linkOptions;
+
+    /**
+     * @var string show tooltip with further information about the space or the user (Only available when link is true)
+     * @since 1.3
+     */
+    public $tooltip;
+
+    /**
+     * @var array optional html options for the image tag
+     */
+    public $imageOptions;
+
+    /**
+     * @var int number of characters used in the acronym (for spaces only)
+     */
+    public $acronymCount;
+
+    /**
+     * @var int the width of the hidden image
+     */
+    public $hiddenImageWidth;
+
+    /**
+     * @var int the height of the hidden image
+     */
+    public $hiddenImageHeight;
+
+
+    public function rules()
+    {
+        return [
+            [['instance'], 'in', 'range' => ['user', 'space']],
+            [['max', 'width', 'height', 'acronymCount', 'hiddenImageWidth', 'hiddenImageHeight'], 'integer'],
+            [['link', 'tooltip'], 'boolean'],
+            [['htmlOptions', 'linkOptions', 'imageOptions', 'instance'], 'string']
+        ];
+    }
+
+    public function attributeHints()
+    {
+        return [
+            'instance' => 'Select instance of items.',
+            'max' => 'Maximal amount of visible items to render.',
+            'width' => 'The width of the visible image in pixels. Default 50px.',
+            'height' => 'The height of the visible image in pixels. Equals to width if empty.',
+            'htmlOptions' => 'Html options for the generated tag.',
+            'link' => 'Create link to the space or user profile.',
+            'linkOptions' => 'Html Options of the link.',
+            'tooltip' => 'Show tooltip with further information about the space or the user (Only available when link is true).',
+            'imageOptions' => 'Optional html options for the image tag.',
+            'acronymCount' => 'Number of characters used in the acronym (for spaces only).',
+            'hiddenImageWidth' => 'The width of the hidden image in pixels. Default 24px.',
+            'hiddenImageHeight' => 'The height of the hidden image in pixels. Equals to width if empty.',
+        ];
+    }
+
+    public function prepareOptions($prop)
+    {
+        $options = [];
+        $string = str_replace(['[', ']', '\'', '"'], '', $this->$prop);
+        foreach (explode(',', $string) as $item) {
+            $temp = explode('=>', $item);
+            $key = trim($temp[0]);
+            $value = trim($temp[1]);
+            $options[$key] = $value;
+        }
+
+        return $options;
+    }
+}

views/index/index.php

@@ -61,7 +61,7 @@
             PanelRow::widget([
                 'items' => [
                     ['title' => Yii::t('DevtoolsModule.views_index_index', 'Forms'), 'url' => Url::to(['/devtools/showcase/view', 'id' => 'forms']), 'text' => Yii::t('DevtoolsModule.views_index_index', 'Learn how to submit form data.')],
-                    ['disabled' => true, 'title' => Yii::t('DevtoolsModule.views_index_index', 'Widgets'), 'url' => Url::to(['/devtools/showcase/view', 'id' => 'widgets']), 'text' => Yii::t('DevtoolsModule.views_index_index', 'Learn how implement ui widgets.')],
+                    ['disabled' => version_compare(Yii::$app->version, '1.4.dev', '<') ? true : false, 'title' => Yii::t('DevtoolsModule.views_index_index', 'Widgets'), 'url' => Url::to(['/devtools/showcase/view', 'id' => 'widgets']), 'text' => Yii::t('DevtoolsModule.views_index_index', 'Learn how implement ui widgets.')],
                     ['disabled' => version_compare(Yii::$app->version, '1.3', '<') ? true : false, 'title' => Yii::t('DevtoolsModule.views_index_index', 'Richtext'), 'url' => Url::to(['/devtools/showcase/view', 'id' => 'richtext']), 'text' => Yii::t('DevtoolsModule.views_index_index', 'Learn how to use the Richtext widget and plugin system.')],
                 ]
             ]);

views/showcase/tabs/widgets_image_set/try.php

@@ -0,0 +1,32 @@
+<?php
+
+use humhub\widgets\ModalButton;
+use yii\bootstrap\ActiveForm;
+use humhub\widgets\RichtextField;
+use \humhub\modules\user\widgets\UserPickerField;
+
+
+if(!isset($model)) {
+    $model = new \humhub\modules\devtools\models\ContainerImageSetModel;
+}
+
+/** @var $model \humhub\modules\devtools\models\ContainerImageSetModel */
+
+?>
+
+<?php $form = ActiveForm::begin();?>
+    <?= $form->field($model, 'instance')->radioList(['user' => 'Users', 'space' => 'Spaces'], ['value' => 'user']);?>
+    <?= $form->field($model, 'max')->textInput(['value' => 5])?>
+    <?= $form->field($model, 'width')->textInput(['value' => 50])?>
+    <?= $form->field($model, 'height')->textInput()?>
+    <?= $form->field($model, 'htmlOptions')->textInput()?>
+    <?= $form->field($model, 'link')->checkboxList(['Yes'])?>
+    <?= $form->field($model, 'linkOptions')->textInput()?>
+    <?= $form->field($model, 'tooltip')->checkboxList(['Yes'])?>
+    <?= $form->field($model, 'imageOptions')->textInput()?>
+    <?= $form->field($model, 'acronymCount')->textInput()?>
+    <?= $form->field($model, 'hiddenImageWidth')->textInput()?>
+    <?= $form->field($model, 'hiddenImageHeight')->textInput()?>
+
+    <?= ModalButton::submitModal(['/devtools/container-image-set'], Yii::t('base', 'Submit')) ?>
+<?php ActiveForm::end();?>

views/showcase/tabs/widgets_image_set/view.php

@@ -0,0 +1,26 @@
+<?php humhub\modules\devtools\widgets\CodeView::begin(['type' => 'php']); ?>
+
+<?= \humhub\modules\devtools\widgets\CodeView::PHP_START ?>
+
+use \humhub\modules\ui\widgets\ContainerImageSet;
+
+/** @var $items \humhub\modules\user\models\User || \humhub\modules\user\models\Space */
+
+?>
+
+<?= \humhub\modules\devtools\widgets\CodeView::PHP_START_ECHO ?> ContainerImageSet::widget([
+        'items' => $items,
+        'max' => 2, //Default 5
+        'width' => 50, // Default 50
+        'height' => null, // Default null
+        'htmlOptions' => [],
+        'link' => true, // Default false
+        'linkOptions' => ['class' => 'pull-left'], //Default []
+        'showTooltip' => true, // Default false
+        'imageOptions' => ['class' => 'img-rounded tt img_margin'], //Default []
+        'hiddenImageWidth' => 24, // Default 24
+        'hiddenImageWidth' => null // Default null
+        ]);
+    ?>
+
+<?php humhub\modules\devtools\widgets\CodeView::end();

views/showcase/widgets.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ *
+ */
+
+$showcases = [
+    [
+        'id' => 'widgets_image_set',
+        'title' => Yii::t('DevtoolsModule.views_showcase_widgets', 'Container image set'),
+        'description' => Yii::t('DevtoolsModule.views_showcase_widgets', 'Learn how to include container image set into your page.'),
+        'tabs' => [
+            ['id' => 'try', 'active' => true, 'title' => Yii::t('DevtoolsModule.base', 'Try')],
+            ['id' => 'view', 'title' => Yii::t('DevtoolsModule.base', 'View')],
+        ]
+    ],
+];
+?>
+
+<?= \humhub\modules\devtools\widgets\ShowcasePage::widget(['items' => $showcases])?>

views/widgets/image_set/result.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2017 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ *
+ */
+
+use humhub\modules\devtools\models\ContainerImageSetModel;
+use humhub\modules\space\models\Space;
+use humhub\modules\ui\widgets\ContainerImageSet;
+use humhub\modules\user\models\User;
+use humhub\widgets\ModalButton;
+use humhub\widgets\ModalDialog;
+
+/* @var $this \humhub\components\View */
+/* @var $model ContainerImageSetModel */
+?>
+
+<?php ModalDialog::begin(['header' => Yii::t('DevtoolsModule.views_client_result', 'Result')]); ?>
+    <div class="modal-body">
+        <?= ContainerImageSet::widget([
+            'items' => $model->instance === 'user' ? User::find()->indexBy('id')->all() : Space::find()->indexBy('id')->all(),
+            'max' => ! empty($model->max) ? $model->max : 5,
+            'width' => ! empty($model->width) ? $model->width : 50,
+            'height' => ! empty($model->height) ? $model->height : null,
+            'htmlOptions' => ! empty($model->htmlOptions) ? $model->prepareOptions('htmlOptions') : [],
+            'link' => $model->link,
+            'linkOptions' => ! empty($model->linkOptions) ? $model->prepareOptions('linkOptions') : [],
+            'showTooltip' => $model->tooltip,
+            'imageOptions' => ! empty($model->imageOptions) ? $model->prepareOptions('imageOptions') : [],
+            'hiddenImageWidth' => ! empty($model->hiddenImageWidth) ? $model->hiddenImageWidth : 24,
+            'hiddenImageHeight' => ! empty($model->hiddenImageHeight) ? $model->hiddenImageHeight : null,
+        ]); ?>
+    </div>
+    <div class="modal-footer">
+        <?= ModalButton::cancel(Yii::t('base', 'Close')) ?>
+    </div>
+<?php ModalDialog::end() ?>