icon-picker.html.twig 3.57 KB
Newer Older
1
2
{% if preventInput is defined %}
{% else %}
3
4
5
6
7
<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>
8
{% endif %}
9

Sebastian Castro's avatar
Sebastian Castro committed
10
11
<link rel="stylesheet" href="{{ asset('fonts/fontawesome-5/css/all.css') }}" />
<script src="{{ asset('js/fontawesome-iconpicker.min.js') }}"></script>
12
<link rel="stylesheet" href="{{ asset('css/fontawesome-iconpicker.min.css') }}" />
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<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) {
32
        return val;
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
      },
      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>',
      }
Sebastian Castro's avatar
Sebastian Castro committed
49
    };
50
    $('.icp-auto').iconpicker(options);
51
52
53
54
55

    // In the form buidler, icon field are added dyanmically, so we need to initialize them every 500ms
    setInterval(function() {
      $('.fld-icon').iconpicker(options);
    }, 500);
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
  }
  });
</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>