どうもこんにちは
Laravel-adminで、入力にRateitを使いたくなったので
やったことのメモです。
管理画面なのにわざわざRateitで入力するってどういうことよ？！
というツッコミは一切受け付けません。
目次
RateItとは？
評価を入力、表示するときに使う★（スター）を便利にできるjQueryのプラグインです。
サンプルも多く、非常に使いやすい印象です。
詳しくはコチラ ⇒ GitHub – gjunge/rateit.js: Rating plugin for jQuery.
目標
Laravel-adminのカスタムフィールドで追加してみます。
公式ドキュメントはコチラ ⇒ Form field management – Laravel-admin の Extend the custom field
また、見た目は、サンプルから
2c) Icon Font – Sizing
7) Javascript invocation
の合わせ技、みたいなものを作ります。
Rateitのサンプル ⇒ Rateit.js by gjunge
では、実装に行きましょう。
フィールドクラス
なにはなくともコレです。js、CSSはCDNで取得しています。
リソースを自分のアプリに入れておきたいときは、$css, $jsの内容を書き換えればよいかと。
今回はApp\Admin\Extensions\Fields\RateIt.phpとしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<?php namespace App\Admin\Extensions\Fields; use Encore\Admin\Form\Field; class RateIt extends Field { protected $style; protected $view = 'admin.form.rateit'; protected static $css =[ '//rawgit.com/gjunge/rateit.js/master/scripts/rateit.css' ]; protected static $js =[ '//rawgit.com/gjunge/rateit.js/master/scripts/jquery.rateit.js', ]; public function render() { $_options = $this->options; if (!array_key_exists('backingfld', $_options)) { $_options['backingfld'] = "#backing_{$this->id}"; } $json_options = json_encode($_options); $this->script = "$('#{$this->id}').rateit({$json_options});"; return parent::render(); } public function style($style) { $this->style = $style; return $this; } public function variables() { return array_merge( parent::variables(), [ 'style' => $this->style, ] ); } } |
ビューファイル
指定されたときの見た目です。前述通り、サンプルの2a)と7)に特化したのでこんな感じになっていますが、
他の見た目やHTMLにしたいときは、ビューファイルと、フィールドクラスのvarivables()メソッドで返す値を
調節してください。
というわけで、resources\views\admin\form\rateit.blade.phpというファイルを作ります。
※ムリくりなstyleタグはご愛嬌
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="form-group {!! !$errors->has($label) ?: 'has-error' !!}"> <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label> <div class="col-sm-6"> @include('admin::form.error') <input type="hidden" id="backing_{{$id}}" name="{{$name}}" value="{{$value}}" class="{{$class}}" {!! $attributes !!} /> <div id="{{$id}}" style="{{$style}}"></div> @include('admin::form.help-block') </div> </div> <style> .rateit.rateit-font .rateit-reset span { height: calc(50% + 0.045em); } </style> |
作ったクラスを登録
app\Admin\bootstrap.phpに、作ったフィールドクラスを登録します。
|
1 |
Form::extend('rateit', RateIt::class); |
これで、$form->rateit(…)が使えるようになります。
やってみる
適当なコントローラ（表現が適当）の、編集画面にrateitな項目を追加します。
こんな感じです。
|
1 2 3 |
$form->rateit('recommended_point', 'おすすめ度') ->style("font-size:50px;") ->options(['max' => 10, 'min' => 0, 'step' => 1, 'mode' => 'font' ]); |
styleメソッドには、divのstyle属性に入るスタイルを記述します。
optionsには、javascriptのrateitメソッドに渡すオプション値（連想配列、出力時にjsonに変換）を設定します。
で、画面を表示すると
ほい。できあがり。
公式ドキュメントに沿って作っただけですが、そこまで詰まることなく進みました。
フィールドクラスとか、ビューファイルをもうちょっと改造して、
もっと汎用的に作ってくれる人絶賛募集中です。
※管理画面でRateitを使用する需要がどこにあるのか、というツッコミは無視（２回目
R.TANAKAがお届けしました。