icon-picker.html.twig 3.36 KB
Newer Older
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div class="input-group">
  <input data-placement="bottomRight" class="form-control gogo-icon-picker icp icp-auto" value="{{ form.vars.value }}"
       type="text" id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" />
  <span class="input-group-addon"></span>
</div>

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
<script src="{{ asset('assets/js/fontawesome-iconpicker.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/js/fontawesome-iconpicker.min.css') }}" />

<script>
  jQuery(document).ready(function() {
  if ($('.iconpicker-popover').length == 0) {
    var options = {
      title: false, // Popover title (optional) only if specified in the template
      selected: false, // use this value as the current item and ignore the original
      defaultValue: false, // use this value as the current item if input or element value is empty
      placement: 'right', // (has some issues with auto and CSS). auto, top, bottom, left, right
      collision: true, // If true, the popover will be repositioned to another position when collapses with the window borders
      animation: true, // fade in/out on show/hide ?
      //hide iconpicker automatically when a value is picked. it is ignored if mustAccept is not false and the accept button is visible
      hideOnSelect: false,
      showFooter: true,
      searchInFooter: true, // If true, the search will be added to the footer instead of the title
      mustAccept: false, // only applicable when there's an iconpicker-btn-accept button in the popover footer
      selectedCustomClass: 'bg-primary', // Appends this class when to the selected item
      // icons: [], // list of icon objects [{title:String, searchTerms:String}]. By default, all Font Awesome icons are included.
      fullClassFormatter: function(val) {
        return 'fab ' + val;
      },
      input: 'input,.iconpicker-input', // children input selector
      inputSearch: false, // use the input as a search box too?
      container: false, //  Appends the popover to a specific element. If not set, the selected element or element parent is used
      component: '.input-group-addon,.iconpicker-component', // children component jQuery selector or object, relative to the container element
      // Plugin templates:
      templates: {
        popover: '<div class="iconpicker-popover popover"><div class="arrow"></div>' +
          '<div class="popover-title"></div><div class="popover-content"></div></div>',
        footer: '<div class="popover-footer"></div>',
        buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Annuler</button>' +
          ' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Ok</button>',
        search: '<input type="search" class="form-control iconpicker-search" placeholder="Rechercher" />',
        iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
        iconpickerItem: '<a role="button" class="iconpicker-item"><i></i></a>',
      }
    }; 
    $('.icp-auto').iconpicker(options);
  }
  });
</script>

<style>
  .iconpicker-popover.popover {
    width: 400px;
    /*left: 0 !important;*/
  }
  .iconpicker .iconpicker-item {
    width: 20px;
    height: 20px;
    padding: 8px;
    margin: 0 5px 5px 0;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
    font-size: 20px;
  }
</style>