├── CHANGELOG.md ├── Iconpicker.php ├── README.md ├── assets ├── ElusiveiconIconset.php ├── FontawesomeIconset.php ├── GlyphiconIconset.php ├── IconpickerAsset.php ├── IoniconIconset.php ├── MapiconIconset.php ├── MaterialdesignIconset.php ├── OcticonIconset.php ├── TypiconIconset.php └── WeathericonIconset.php ├── composer.json └── messages ├── en └── iconpicker.php └── ru └── iconpicker.php /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | CHANGELOG 2 | --------- 3 | 4 | #### 3.0 5 | - Change source repository to more actual fork https://github.com/eliberty/bootstrap-iconpicker 6 | - Support font-awesome 4.7.0 7 | - Internal reformatting 8 | 9 | #### 2.0 10 | - Remove font-awesome depend 11 | - Use original bower component 12 | - remove $columns, $rows, $placement properties 13 | - add $clientOptions property with plugin configurations 14 | - remove $removePrefix property 15 | - add $onSelectIconCallback property for add custom javascript behavior after select icon -------------------------------------------------------------------------------- /Iconpicker.php: -------------------------------------------------------------------------------- 1 | 'btn btn-default btn-sm']; 26 | 27 | /** 28 | * @var array $containerOptions additional html options for container 29 | */ 30 | public $containerOptions = []; 31 | 32 | /** 33 | * @var array $clientOptions - iconpicker options 34 | * (will be merged with defaultOptions @see getDefaultOptions() , so you can set only overrides) 35 | * @see http://victor-valencia.github.io/bootstrap-iconpicker/ 36 | **/ 37 | public $clientOptions 38 | = [ 39 | 'rows' => 5, 40 | 'columns' => 10, 41 | 'placement' => 'right', 42 | 'align' => 'center', 43 | 'arrowClass' => 'btn-primary', 44 | 'header' => true, 45 | 'footer' => true, 46 | 'labelHeader' => '{0} / {1}', 47 | 'labelFooter' => '{0} - {1}:[{2}]', 48 | 'search' => true, 49 | 'searchText' => 'Search icon', 50 | 'selectedClass' => 'btn-warning', 51 | 'unselectedClass' => 'btn-default', 52 | ]; 53 | 54 | /** 55 | * @var JsExpression $onSelectIconCallback 56 | * @example 57 | * onSelectIconCallback=>new JsExpression('function(e){ 58 | * var icon = e.icon; 59 | * icon = "some "+icon; 60 | * $('#target').val(icon); 61 | * }'), 62 | */ 63 | public $onSelectIconCallback; 64 | 65 | /** 66 | * @var 67 | */ 68 | private $internalId; 69 | 70 | /** 71 | * @var string 72 | */ 73 | private $defaultIcon = 'fa-ellipsis-h'; 74 | 75 | /** 76 | * 77 | */ 78 | public function init() 79 | { 80 | $this->registerTranslations(); 81 | if (!isset($this->options['id']) && !$this->hasModel()) { 82 | $this->options['id'] = 'iconpicker_' . $this->getId(); 83 | } 84 | parent::init(); 85 | $this->internalId = $this->options['id']; 86 | if ($this->hasModel() && !empty(Html::getAttributeValue($this->model, $this->attribute))) { 87 | $this->defaultIcon = $this->pickerOptions['data-icon'] = Html::getAttributeValue($this->model, $this->attribute); 88 | } 89 | if (!$this->hasModel() && !empty($this->value)) { 90 | $this->defaultIcon = $this->pickerOptions['data-icon'] = $this->value; 91 | } 92 | if (!isset($this->pickerOptions['id'])) { 93 | $this->pickerOptions['id'] = $this->internalId . '_jspicker'; 94 | } 95 | $this->clientOptions = ArrayHelper::merge($this->getDefaultOptions(), $this->clientOptions); 96 | $this->registerAssets(); 97 | } 98 | 99 | /** 100 | * Register widget translations. 101 | */ 102 | public function registerTranslations() 103 | { 104 | if (!isset(\Yii::$app->i18n->translations['insolita/iconpicker']) 105 | && !isset 106 | ( 107 | \Yii::$app->i18n->translations['insolita/iconpicker/*'] 108 | ) 109 | ) { 110 | \Yii::$app->i18n->translations['insolita/iconpicker'] = [ 111 | 'class' => 'yii\i18n\PhpMessageSource', 112 | 'basePath' => '@insolita/iconpicker/messages', 113 | 'forceTranslation' => true, 114 | 'fileMap' => [ 115 | 'insolita/iconpicker' => 'iconpicker.php', 116 | ], 117 | ]; 118 | } 119 | } 120 | 121 | /** 122 | * Registers the needed assets 123 | */ 124 | public function registerAssets() 125 | { 126 | $view = $this->getView(); 127 | $targetId = $this->internalId; 128 | $iconPickerId = $this->pickerOptions['id']; 129 | $assetClass = 'insolita\\iconpicker\\assets\\' . ucfirst($this->iconset) . 'Iconset'; 130 | $view->registerAssetBundle($assetClass); 131 | $this->clientOptions = ArrayHelper::merge( 132 | $this->clientOptions, 133 | [ 134 | 'icon' => $this->defaultIcon, 135 | ] 136 | ); 137 | $this->clientOptions = Json::encode($this->clientOptions); 138 | $js[] = <<clientOptions}); 140 | JS; 141 | $callback = null; 142 | if (!empty($this->onSelectIconCallback)) { 143 | $callback = $this->onSelectIconCallback instanceof JsExpression 144 | ? $this->onSelectIconCallback->__toString() 145 | : $this->onSelectIconCallback; 146 | } 147 | $js[] = ($callback) 148 | ? <<registerJs(implode("\n", $js)); 162 | } 163 | 164 | /** 165 | * @return string bootstrap-picker button with hiddenInput field where we put selected value 166 | */ 167 | public function run() 168 | { 169 | 170 | if ($this->hasModel()) { 171 | $inp = Html::activeHiddenInput($this->model, $this->attribute, $this->options); 172 | } else { 173 | $inp = Html::hiddenInput($this->name, $this->value, $this->options); 174 | } 175 | $picker = Html::button(\Yii::t('insolita/iconpicker', 'CHOOSE_ICON'), $this->pickerOptions); 176 | 177 | return Html::tag('div', $picker . $inp, $this->containerOptions); 178 | } 179 | 180 | /** 181 | * Default js-plugin options 182 | * 183 | * @return array 184 | **/ 185 | protected function getDefaultOptions() 186 | { 187 | return [ 188 | 'iconset' => $this->iconset, 189 | 'rows' => 5, 190 | 'columns' => 10, 191 | 'placement' => 'right', 192 | 'align' => 'center', 193 | 'arrowClass' => 'btn-primary', 194 | 'header' => true, 195 | 'footer' => true, 196 | 'labelHeader' => '{0} / {1}', 197 | 'labelFooter' => '{0} - {1}:[{2}]', 198 | 'search' => true, 199 | 'searchText' => \Yii::t('insolita/iconpicker', 'SEARCH_ICON'), 200 | 'selectedClass' => 'btn-warning', 201 | 'unselectedClass' => 'btn-default', 202 | ]; 203 | } 204 | } 205 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Widget for bootstrap-iconpicker 3.0 2 | =================================== 3 | 4 | ![Latest Stable Version](https://img.shields.io/packagist/v/insolita/yii2-iconpicker.svg) 5 | [![Total Downloads](https://img.shields.io/packagist/dt/insolita/yii2-iconpicker.svg)](https://packagist.org/packages/insolita/yii2-iconpicker) 6 | ![License](https://img.shields.io/packagist/l/insolita/yii2-iconpicker.svg) 7 | 8 | Widget for bootstrap-iconpicker plugin http://victor-valencia.github.io/bootstrap-iconpicker/ 9 | 10 | Now based on more actual fork https://github.com/eliberty/bootstrap-iconpicker 11 | 12 | FontAwesome 4.7.0 support 13 | 14 | Installation 15 | ------------ 16 | 17 | The preferred way to install this extension is through [composer](http://getcomposer.org/download/). 18 | 19 | Either run 20 | 21 | ``` 22 | composer require --prefer-dist insolita/yii2-iconpicker "^3.0" 23 | ``` 24 | 25 | or add 26 | 27 | ``` 28 | "insolita/yii2-iconpicker": "^3.0" 29 | ``` 30 | 31 | to the require section of your `composer.json` file. 32 | 33 | Requirements 34 | ------------ 35 | This extension require twitter-bootstrap >3.0 36 | You can use it for 37 | - glyphicon (with bootstrap by default) 38 | - ionicon https://packagist.org/packages/rmrevin/yii2-ionicon 39 | - fontawesome https://packagist.org/packages/rmrevin/yii2-fontawesome 40 | - weathericon https://github.com/erikflowers/weather-icons 41 | - mapicon 42 | - octicon https://github.com/github/octicons 43 | - typicon https://github.com/stephenhutchings/typicons.font 44 | - elusiveicon https://github.com/reduxframework/elusive-icons 45 | - materialdesign https://packagist.org/packages/mervick/yii2-material-design-icons 46 | 47 | By default - native bootstrap glyphicon 48 | 49 | #### NOTE! 50 | 51 | This extension not provide assets for icon source - you can setup and register it`s in view separately 52 | You can create needed assets, or direct include css of icon fonts from folder @bower/eliberty-bootstrap-iconpicker/icon-fonts 53 | 54 | Usage 55 | ----- 56 | 57 | Once the extension is installed, simply use it in your code by : 58 | 59 | ```php 60 | field($model, 'icon')->widget('\insolita\iconpicker\Iconpicker', 61 | [ 62 | 'iconset'=>'fontawesome', 63 | 'clientOptions'=>['rows'=>8,'cols'=>10,'placement'=>'right'], 64 | ])->label('Choose icon'); ?> 65 | ``` 66 | 67 | or without ActiveForm 68 | 69 | ```php 70 | 'choose_icon', 73 | 'name'=>'myicon', 74 | 'value'=>'glyphicon-cog', 75 | 'iconset'=>'glyphicon', 76 | 'pickerOptions'=>['class'=>'btn btn-primary'], 77 | 'clientOptions'=>['placement'=>'bottom','search'=>false], 78 | ]); 79 | ?> 80 | ``` 81 | -------------------------------------------------------------------------------- /assets/ElusiveiconIconset.php: -------------------------------------------------------------------------------- 1 | js[] = $this->iconsetResolver('elusiveicon'); 13 | parent::init(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/FontawesomeIconset.php: -------------------------------------------------------------------------------- 1 | js[] = $this->iconsetResolver('fontawesome'); 13 | parent::init(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/GlyphiconIconset.php: -------------------------------------------------------------------------------- 1 | js[] = $this->iconsetResolver('glyphicon'); 13 | parent::init(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/IconpickerAsset.php: -------------------------------------------------------------------------------- 1 | css[] = 'bootstrap-iconpicker/css/bootstrap-iconpicker' . (YII_DEBUG ? '' : '.min') . '.css'; 33 | $this->js[] = 'bootstrap-iconpicker/js/bootstrap-iconpicker' . (YII_DEBUG ? '' : '.min') . '.js'; 34 | 35 | } 36 | 37 | /** 38 | * Helper for register iconset file 39 | **/ 40 | protected function iconsetResolver($set) 41 | { 42 | $map = [ 43 | 'glyphicon' => '', 44 | 'fontawesome' => '-4.7.0', 45 | 'ionicon' => '-1.5.2', 46 | 'elusiveicon' => '-2.0.0', 47 | 'mapicon' => '-2.1.0', 48 | 'materialdesign' => '-1.1.1', 49 | 'octicon' => '-2.1.2', 50 | 'typicon' => '-2.0.6', 51 | 'weathericon' => '-1.2.0', 52 | ]; 53 | $tail = ArrayHelper::getValue($map, $set, 'glyphicon'); 54 | return 'bootstrap-iconpicker/js/iconset/iconset-' . $set . $tail . (YII_DEBUG ? '' : '.min') . '.js'; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /assets/IoniconIconset.php: -------------------------------------------------------------------------------- 1 | js[] = $this->iconsetResolver('ionicon'); 13 | parent::init(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/MapiconIconset.php: -------------------------------------------------------------------------------- 1 | js[] = $this->iconsetResolver('mapicon'); 13 | parent::init(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/MaterialdesignIconset.php: -------------------------------------------------------------------------------- 1 | js[] = $this->iconsetResolver('materialdesign'); 13 | parent::init(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/OcticonIconset.php: -------------------------------------------------------------------------------- 1 | js[] = $this->iconsetResolver('octicon'); 13 | parent::init(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/TypiconIconset.php: -------------------------------------------------------------------------------- 1 | js[] = $this->iconsetResolver('typicon'); 13 | parent::init(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/WeathericonIconset.php: -------------------------------------------------------------------------------- 1 | js[] = $this->iconsetResolver('weathericon'); 13 | parent::init(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "insolita/yii2-iconpicker", 3 | "description": "Widget for bootstrap-iconpicker plugin http://victor-valencia.github.io/bootstrap-iconpicker/", 4 | "type": "yii2-extension", 5 | "version": "3.0.0", 6 | "keywords": ["yii2","fontawesome","icons","bootstrap","ionicon","glyphicon","picker"], 7 | "license": "MIT", 8 | "authors": [ 9 | { 10 | "name": "insolita", 11 | "email": "webmaster100500@ya.ru" 12 | } 13 | ], 14 | "require": { 15 | "yiisoft/yii2": "*", 16 | "yiisoft/yii2-bootstrap": "*", 17 | "bower-asset/eliberty-bootstrap-iconpicker":"1.8.1" 18 | }, 19 | "autoload": { 20 | "psr-4": { 21 | "insolita\\iconpicker\\": "" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /messages/en/iconpicker.php: -------------------------------------------------------------------------------- 1 | 'Choose icon', 4 | 'SEARCH_ICON' => 'Search icon', 5 | ]; 6 | -------------------------------------------------------------------------------- /messages/ru/iconpicker.php: -------------------------------------------------------------------------------- 1 | 'Выберите иконку', 4 | 'SEARCH_ICON' => 'Поиск иконок', 5 | ]; 6 | --------------------------------------------------------------------------------