Yii2 useful assets

Useful assets (icons, js and css components) for Yii2 Framework.

OPTIMIZED FOR OWN PROJECTS!

Includes:

• Icons
  • FontAwesome: assets\FontAwesomeAsset, helpers\FA
  • WebHostingHub Glyphs: assets\WHHGAsset, helpers\WHHG
• Scripts
  • jQuery Migrate: assets\JQueryMigrateAsset
  • LazyLoad: assets\LazyLoadAsset, widgets\LazyLoadWidget
  • prettyLoader: assets\PrettyLoaderAsset, widgets\PrettyLoaderWidget
  • Owl Carousel: assets\OwlCarouselAsset, widgets\OwlCarouselWidget
  • Photobox: assets\PhotoboxAsset, widgets\PhotoboxWidget
  • Bootstrap Notify: assets\BootstrapNotifyAsset, depends on assets\AnimateCssAsset
  • Animate.css + jQuery addon AnimateCSS: assets\AnimateCssAsset
  • Owl Carousel: assets\OwlCarouselAsset
  • Slick: assets\SlickAsset
  • jQuery.NiceScroll: widgets\NiceScrollWidget
  • jQuery.mmenu: widgets\MmenuWidget
  • HTML5 Sortable: assets\SortableAsset

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist as-milano/yii2-assets "*"

or add

"as-milano/yii2-assets": "*"

to the require section of your composer.json file.

Usage

Assets

For any asset included just register it:

\milano\assets\PrettyPhotoAsset::register($view);

or add it to $depends section of one of your base asset classes:

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    ...
    
    public $depends = [
        ...
        'milano\assets\FontAwesomeAsset',
        'milano\assets\PrettyLoaderAsset',
        'milano\assets\PrettyPhotoAsset'
    ];
}

In this case you can handle published files in your own way. Or you can use included widgets.

Widgets

Run any widget in a view

\milano\widgets\PrettyLoaderWidget::widget([
    'blockContent' => false
]);

or attach it to another asset in AssetBundle::register method

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    ...
    
    public static function register($view)
    {
        $asset = parent::register($view);

        \milano\widgets\PrettyLoaderWidget::widget();
        \milano\widgets\PrettyPhotoWidget::widget();

        return $asset;
    }
}

Remember: you can pass additional settings in *::widget function.

prettyLoader

Add CSS to your project

#loaderBackground {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
}

#loaderIcon {
    font-size: 60px;
    line-height: 60px;
    font-weight: bold;
    display: none;
    position: fixed;
    top: 20px;
    right: 10px;
    z-index: 2000;
    color: #EEE;
}

Add HTML to your layout

<div id="loaderIcon"><i class="fa fa-spinner fa-spin"></i></div>
<div id="loaderBackground"></div>

Owl Carousel

Wrap carousel items in container with class owl-carousel.

LazyLoad

If you register AnimateCss Asset you can use it's animation effects to show loaded images:

LazyLoadWidget::widget([
    'selector' => 'img[data-original]',
    'pluginSettings' => [
        'effect' => 'lazyAnimate',
        'effect_speed' => 'zoomIn' // Choose effect you want
    ]
]);

Helpers

Icon helpers

First register or add to dependency corresponding asset. Then add helper to use section of your view:

use \milano\helpers\FA;

and use it:

FA::icon('mars', [FA::SIZE_2X, FA::ROTATE_90]);

FontAwesome helper includes some useful icon setting you can pass in the second parameter. Last parameter of ::icon function in both helpers is additional classes for generated <i> tag.