philippfrenzel / yii2masonry
Yii2 Masonry Integration for Yii2
Installs: 16 036
Dependents: 0
Suggesters: 0
Security: 0
Stars: 13
Watchers: 4
Forks: 10
Open Issues: 3
Type:yii2-extension
Requires
- php: >=5.4.0
- bower-asset/eventemitter: 4.*
- bower-asset/imagesloaded: *
- bower-asset/masonry: 3.*
- bower-asset/outlayer: 1.*
- yiisoft/yii2: *
Requires (Dev)
README
yii2masonry
===============
Widget for masonry.js pinterest like layout container for Yii Framework 2 Original sources for the jquery plugin: http://masonry.desandro.com/
How to install?
Get it via composer by adding the package to your composer.json
:
{ "require": { "philippfrenzel/yii2masonry": "*" } }
And ensure, that you have the follwing plugin installed global:
php composer.phar global require "fxp/composer-asset-plugin:~1.0"
Due to limitations of fxp/composer-asset-plugin
you also need to add the following section to the "extra"
section of your composer.json
"asset-repositories": [
{
"name": "bower-asset/eventemitter",
"type": "bower-vcs",
"url": "git://github.com/Wolfy87/EventEmitter.git"
}
]
You may also check the package information on packagist.
Usage
On a page with a ListView, just add:
<?php \yii2masonry\yii2masonry::begin([ 'clientOptions' => [ 'columnWidth' => 50, 'itemSelector' => '.item' ] ]); ?> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <div class="item"><h3>Test</h3><p>Und mehr Text</p></div> <?php \yii2masonry\yii2masonry::end(); ?>
CSS
Size of columns can be defined within css
.item { width: 25%; } .item.w2 { width: 50%; }
If you have a sidebar resizeble by a button you need to reload the masonry container adding these following code:
<?php $script = <<< JS $('a#menu_toggle').on('click', function() { $('.js-masonry').masonry(); }); JS; $this->registerJs($script, View::POS_READY); ?>
My button have an ID name #menu_toggle
INFINITE SCROLL Sample:
use yii\helpers\Html; use yii\widgets\ListView; use yii\web\JsExpression; use yii\widgets\Pjax; /* @var $this yii\web\View */ /* @var $searchModel app\models\PolizzenserviceSearch */ /* @var $dataProvider yii\data\ActiveDataProvider */ $script = <<<SKRIPT $('#boxes').on('infinitescroll:afterRetrieve', function(){ msnryWgArbeiten.masonry('reloadItems'); mscontainerWgArbeiten.imagesLoaded(function(){ msnryWgArbeiten.masonry() }); }); $(document).on('submit', '#WgArbeitenSearchform', function(event) { $.pjax.submit(event, '#WgArbeitenPjaxContainer') }); SKRIPT; $this->registerJs($script); ?> <?php \yii2masonry\yii2masonry::begin([ 'id' => 'WgArbeiten', 'clientOptions' => [ 'columnWidth' => 20, 'itemSelector' => '.flowers' ] ]); ?> <div id="boxes"> <?php $pjax = Pjax::begin(['id'=>'WgArbeitenPjaxContainer']); ?> <?php echo $this->render('@app/views/arbeiten/_search', ['model' => $searchModel]); ?> <?= \yii\widgets\ListView::widget([ 'dataProvider' => $dataProvider, 'itemOptions' => ['class' => 'flowers'], 'itemView' => '@app/views/arbeiten/iviews/_view', 'summary' => false, 'layout' => '{items}<div style="visibility:hidden;">{pager}</div>' ]); ?> <?php echo \darkcs\infinitescroll\InfiniteScrollPager::widget([ 'itemSelector' => '.flowers', 'paginationSelector' => '.pagination', 'containerSelector' => '#WgArbeitenPjaxContainer', 'pjaxContainer' => $pjax->id, 'pagination' => $dataProvider->pagination, ]); ?> <?php Pjax::end(); ?> </div> <?php \yii2masonry\yii2masonry::end(); ?>