Skip to content

Commit 6a7f492

Browse files
tabacitutabacitu
committed
added iconpicker field type
1 parent 3a00aa4 commit 6a7f492

File tree

2 files changed

+149
-0
lines changed

2 files changed

+149
-0
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ All Notable changes to `Backpack CRUD` will be documented in this file
2020
- Nothing
2121

2222

23+
## [3.1.11] - 2016-09-19
24+
25+
### Added
26+
- iconpicker field type;
27+
28+
2329
## [3.1.10] - 2016-09-16
2430

2531
### Fixed

‎src/resources/views/fields/iconpicker.blade.php‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!-- icon picker input -->
2+
3+
<?php
4+
// if no iconset was provided, set the default iconset to Font-Awesome
5+
if (!isset($field['iconset'])) {
6+
$field['iconset'] = 'fontawesome';
7+
}
8+
?>
9+
10+
<div @include('crud::inc.field_wrapper_attributes') >
11+
<label>{!! $field['label'] !!}</label>
12+
13+
<div>
14+
<button class="btn btn-default " role="iconpicker" data-icon="{{ old($field['name']) ? old($field['name']) : (isset($field['value']) ? $field['value'] : (isset($field['default']) ? $field['default'] : '' )) }}" data-iconset="{{ $field['iconset'] }}"></button>
15+
<input
16+
type="hidden"
17+
name="{{ $field['name'] }}"
18+
value="{{ old($field['name']) ? old($field['name']) : (isset($field['value']) ? $field['value'] : (isset($field['default']) ? $field['default'] : '' )) }}"
19+
@include('crud::inc.field_attributes')
20+
>
21+
</div>
22+
23+
{{-- HINT --}}
24+
@if (isset($field['hint']))
25+
<p class="help-block">{!! $field['hint'] !!}</p>
26+
@endif
27+
</div>
28+
29+
30+
@if ($crud->checkIfFieldIsFirstOfItsType($field, $fields))
31+
32+
@if($field['iconset'] == 'glyphicon')
33+
@push('crud_fields_scripts')
34+
<!-- Bootstrap-Iconpicker Iconset for Glyphicon -->
35+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-glyphicon.min.js') }}"></script>
36+
@endpush
37+
@elseif($field['iconset'] == 'ionicon')
38+
@push('crud_fields_styles')
39+
<!-- Ionicons -->
40+
<link rel="stylesheet" href="{{ asset('vendor/backpack/bootstrap-iconpicker/icon-fonts/ionicons-1.5.2/css/ionicons.min.css') }}"/>
41+
@endpush
42+
43+
@push('crud_fields_scripts')
44+
<!-- Bootstrap-Iconpicker Iconset for Ionicons -->
45+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-ionicon-1.5.2.min.js') }}"></script>
46+
@endpush
47+
@elseif($field['iconset'] == 'weathericon')
48+
@push('crud_fields_styles')
49+
<!-- Weather Icons -->
50+
<link rel="stylesheet" href="{{ asset('vendor/backpack/bootstrap-iconpicker/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css') }}"/>
51+
@endpush
52+
53+
@push('crud_fields_scripts')
54+
<!-- Bootstrap-Iconpicker Iconset for Weather Icons -->
55+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-weathericon-1.2.0.min.js') }}"></script>
56+
@endpush
57+
@elseif($field['iconset'] == 'mapicon')
58+
@push('crud_fields_styles')
59+
<!-- Map Icons -->
60+
<link rel="stylesheet" href="{{ asset('vendor/backpack/bootstrap-iconpicker/icon-fonts/map-icons-2.1.0/css/map-icons.min.css') }}"/>
61+
@endpush
62+
63+
@push('crud_fields_scripts')
64+
<!-- Bootstrap-Iconpicker Iconset for Map Icons -->
65+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-mapicon-2.1.0.min.js') }}"></script>
66+
@endpush
67+
@elseif($field['iconset'] == 'octicon')
68+
@push('crud_fields_styles')
69+
<!-- Octicons -->
70+
<link rel="stylesheet" href="{{ asset('vendor/backpack/bootstrap-iconpicker/icon-fonts/octicons-2.1.2/css/octicons.min.css') }}"/>
71+
@endpush
72+
73+
@push('crud_fields_scripts')
74+
<!-- Bootstrap-Iconpicker Iconset for Octicons -->
75+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-octicon-2.1.2.min.js') }}"></script>
76+
@endpush
77+
@elseif($field['iconset'] == 'typicon')
78+
@push('crud_fields_styles')
79+
<!-- Typicons -->
80+
<link rel="stylesheet" href="{{ asset('vendor/backpack/bootstrap-iconpicker/icon-fonts/typicons-2.0.6/css/typicons.min.css') }}"/>
81+
@endpush
82+
83+
@push('crud_fields_scripts')
84+
<!-- Bootstrap-Iconpicker Iconset for Typicons -->
85+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-typicon-2.0.6.min.js') }}"></script>
86+
@endpush
87+
@elseif($field['iconset'] == 'elusiveicon')
88+
@push('crud_fields_styles')
89+
<!-- Elusive Icons -->
90+
<link rel="stylesheet" href="{{ asset('vendor/backpack/bootstrap-iconpicker/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css') }}"/>
91+
@endpush
92+
93+
@push('crud_fields_scripts')
94+
<!-- Bootstrap-Iconpicker Iconset for Elusive Icons -->
95+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-elusiveicon-2.0.0.min.js') }}"></script>
96+
@endpush
97+
@elseif($field['iconset'] == 'materialdesign')
98+
@push('crud_fields_styles')
99+
<!-- Material Icons -->
100+
<link rel="stylesheet" href="{{ asset('vendor/backpack/bootstrap-iconpicker/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css') }}"/>
101+
@endpush
102+
103+
@push('crud_fields_scripts')
104+
<!-- Bootstrap-Iconpicker Iconset for Material Design -->
105+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-materialdesign-1.1.1.min.js') }}"></script>
106+
@endpush
107+
@else
108+
@push('crud_fields_styles')
109+
<!-- Font Awesome -->
110+
<link rel="stylesheet" href="{{ asset('vendor/backpack/bootstrap-iconpicker/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css') }}"/>
111+
@endpush
112+
113+
@push('crud_fields_scripts')
114+
<!-- Bootstrap-Iconpicker Iconset for Font Awesome -->
115+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.2.0.min.js') }}"></script>
116+
@endpush
117+
@endif
118+
119+
{{-- FIELD EXTRA CSS --}}
120+
@push('crud_fields_styles')
121+
<!-- Bootstrap-Iconpicker -->
122+
<link rel="stylesheet" href="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css') }}"/>
123+
@endpush
124+
125+
{{-- FIELD EXTRA JS --}}
126+
@push('crud_fields_scripts')
127+
<!-- Bootstrap-Iconpicker -->
128+
<script type="text/javascript" src="{{ asset('vendor/backpack/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js') }}"></script>
129+
130+
{{-- Bootstrap-Iconpicker - set hidden input value --}}
131+
<script>
132+
jQuery(document).ready(function($) {
133+
$('button[role=iconpicker]').on('change', function(e) {
134+
$(this).siblings('input[type=hidden]').val(e.icon);
135+
});
136+
});
137+
</script>
138+
@endpush
139+
140+
@endif
141+
142+
143+
{{-- Note: you can use @if ($crud->checkIfFieldIsFirstOfItsType($field, $fields)) to only load some CSS/JS once, even though there are multiple instances of it --}}

0 commit comments

Comments
 (0)