Working on clipboardjs and select2 support

2019-06-13 19:33:59 +02:00 · 2019-06-13 19:33:59 +02:00 · 173335f1b5
commit 173335f1b5
parent 8bd34d99e4
19 changed files with 780 additions and 45 deletions
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@ -10,6 +10,7 @@ Changelog
 - FontAwesome 5.9.0 support
 - remove issue_close_with_open_children functionality, because this is included in Redmine 3.4.x #47 (thanks to @pva)
 - add hierarchy support for projects macro #45
+- select2 support

 2.0.20
 ++++++
--- a/app/helpers/additionals_clipboardjs_helper.rb
+++ b/app/helpers/additionals_clipboardjs_helper.rb
@ -0,0 +1,20 @@
+module AdditionalsClipboardjsHelper
+  def clipboardjs_button_for(target)
+    render_clipboardjs_button(target) + render_clipboardjs_javascript(target)
+  end
+
+  private
+
+  def render_clipboardjs_button(target)
+    opts = { id: "zc_#{target}", class: 'clipboard_button', data: clipboardjs_options.merge('clipboard-target' => "##{target}") }
+    content_tag(:div, image_tag('paste.png', plugin: 'additionals'), opts)
+  end
+
+  def render_clipboardjs_javascript(target)
+    javascript_tag("setZeroClipBoard('#zc_#{target}');")
+  end
+
+  def clipboardjs_options
+    { 'label-copied' => l(:label_copied_to_clipboard), 'label-to-copy' => l(:label_copy_to_clipboard) }
+  end
+end
--- a/app/helpers/additionals_select2_helper.rb
+++ b/app/helpers/additionals_select2_helper.rb
@ -0,0 +1,13 @@
+module AdditionalsSelect2Helper
+  def additionals_select2_tag(name, option_tags = nil, options = {})
+    s = select_tag(name, option_tags, options)
+    s << hidden_field_tag("#{name}[]", '') if options[:multiple] && options.fetch(:include_hidden, true)
+
+    s + javascript_tag("select2Tag('#{sanitize_to_id(name)}', #{options.to_json});")
+  end
+
+  # Transforms select filters of +type+ fields into select2
+  def additionals_transform_to_select2(type, options = {})
+    javascript_tag("setSelect2Filter('#{type}', #{options.to_json});") unless type.empty?
+  end
+end
--- a/app/helpers/additionals_settings_helper.rb
+++ b/app/helpers/additionals_settings_helper.rb
@ -17,17 +17,23 @@ module AdditionalsSettingsHelper
  def additionals_settings_checkbox(name, options = {})
    label_title = options.delete(:label).presence || l("label_#{name}")
    value = options.delete(:value)
+    value_is_bool = options.delete(:value_is_bool)
    custom_value = if value.nil?
                     value = 1
                     false
                   else
+                     value = 1 if value_is_bool
                     true
                   end

-    checked = custom_value ? @settings[name] : Additionals.true?(@settings[name])
+    checked = if custom_value && !value_is_bool
+                @settings[name]
+              else
+                Additionals.true?(@settings[name])
+              end

    s = [label_tag("settings[#{name}]", label_title)]
-    s << hidden_field_tag("settings[#{name}]", 0, id: nil) unless custom_value
+    s << hidden_field_tag("settings[#{name}]", 0, id: nil) if !custom_value || value_is_bool
    s << check_box_tag("settings[#{name}]", value, checked, options)
    safe_join(s)
  end
--- a/assets/images/button_selected.svg
+++ b/assets/images/button_selected.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="gradient" x1="100%" y1="100%">
+      <stop offset="0%" style="stop-color: #aaa; stop-opacity: 1" />
+      <stop offset="100%" style="stop-color: #ccc; stop-opacity: 1" />
+    </linearGradient>
+  </defs>
+  <rect width="100%" height="100%" style="fill:url(#gradient)"/>
+</svg>
--- a/assets/images/paste.png
+++ b/assets/images/paste.png
--- a/assets/javascripts/.eslintignore
+++ b/assets/javascripts/.eslintignore
@ -3,3 +3,5 @@
 !additionals*.js
 !noreferrer.js
 !tooltips.js
+!clipboard_helpers.js
+!select2_helpers.js
--- a/assets/javascripts/additionals_to_select2.js
+++ b/assets/javascripts/additionals_to_select2.js
@ -1,41 +0,0 @@
-var oldAdditionalsToggleFilter = window.toggleFilter;
-
-window.toggleFilter = function(field) {
-  oldAdditionalsToggleFilter(field);
-  return additionals_transform_to_select2(field);
-};
-
-function filterAdditionalsFormatState (opt) {
-  var $opt = $('<span>' + opt.name_with_icon + '</span>');
-  return $opt;
-}
-
-/* global availableFilters additionals_field_formats additionals_filter_urls:true* */
-function additionals_transform_to_select2(field){
-  var field_format = availableFilters[field]['field_format'];
-  var initialized_select2 = $('#tr_' + field + ' .values .select2');
-  if (initialized_select2.size() == 0 && $.inArray(field_format, additionals_field_formats) >= 0) {
-    $('#tr_' + field + ' .toggle-multiselect').hide();
-    $('#tr_' + field + ' .values .value').attr('multiple', 'multiple');
-    $('#tr_' + field + ' .values .value').select2({
-      ajax: {
-        url: additionals_filter_urls[field_format],
-        dataType: 'json',
-        delay: 250,
-        data: function(params) {
-          return { q: params.term };
-        },
-        processResults: function(data, params) {
-          return { results: data };
-        },
-        cache: true
-      },
-      placeholder: ' ',
-      minimumInputLength: 1,
-      width: '60%',
-      templateResult: filterAdditionalsFormatState
-    }).on('select2:open', function (e) {
-      $(this).parent('span').find('.select2-search__field').val(' ').trigger($.Event('input', { which: 13 })).val('');
-    });
-  }
-}
--- a/assets/javascripts/clipboard.min.js
+++ b/assets/javascripts/clipboard.min.js
--- a/assets/javascripts/clipboard_helper.js
+++ b/assets/javascripts/clipboard_helper.js
@ -0,0 +1,26 @@
+function setZeroClipBoard(element){
+  $(element).tooltip({
+    title: $(element).data('label-to-copy'),
+    placement: 'right'
+  });
+
+  var clipboard = new ClipboardJS(element);
+
+  clipboard.on('success', function(e) {
+    setTooltip(e.trigger, $(element).data('label-copied'));
+    hideTooltip(e.trigger);
+  });
+}
+
+// Tooltip
+function setTooltip(btn, message) {
+  $(btn).tooltip('hide')
+    .attr('data-original-title', message)
+    .tooltip('show');
+}
+
+function hideTooltip(btn) {
+  setTimeout(function() {
+    $(btn).tooltip('hide');
+  }, 1000);
+}
--- a/assets/javascripts/select2.min.js
+++ b/assets/javascripts/select2.min.js
--- a/assets/javascripts/select2_helper.js
+++ b/assets/javascripts/select2_helper.js
@ -0,0 +1,216 @@
+var oldAdditionalsToggleFilter = window.toggleFilter;
+
+window.toggleFilter = function(field) {
+  oldAdditionalsToggleFilter(field);
+  return additionals_transform_to_select2(field);
+};
+
+function filterAdditionalsFormatState (opt) {
+  var $opt = $('<span>' + opt.name_with_icon + '</span>');
+  return $opt;
+}
+
+/* global availableFilters additionals_field_formats additionals_filter_urls:true* */
+function additionals_transform_to_select2(field){
+  var field_format = availableFilters[field]['field_format'];
+  var initialized_select2 = $('#tr_' + field + ' .values .select2');
+  if (initialized_select2.size() == 0 && $.inArray(field_format, additionals_field_formats) >= 0) {
+    $('#tr_' + field + ' .toggle-multiselect').hide();
+    $('#tr_' + field + ' .values .value').attr('multiple', 'multiple');
+    $('#tr_' + field + ' .values .value').select2({
+      ajax: {
+        url: additionals_filter_urls[field_format],
+        dataType: 'json',
+        delay: 250,
+        data: function(params) {
+          return { q: params.term };
+        },
+        processResults: function(data, params) {
+          return { results: data };
+        },
+        cache: true
+      },
+      placeholder: ' ',
+      minimumInputLength: 1,
+      width: '60%',
+      templateResult: filterAdditionalsFormatState
+    }).on('select2:open', function (e) {
+      $(this).parent('span').find('.select2-search__field').val(' ').trigger($.Event('input', { which: 13 })).val('');
+    });
+  }
+}
+
+var SELECT2_DELAY = 250;
+
+var select2Filters = {};
+
+function setSelect2Filter(type, options) {
+  if (typeof operatorByType === 'undefined') { return; }
+
+  operatorByType[type] = operatorByType[type] || operatorByType['list_optional'];
+  select2Filters[type] = options;
+}
+
+var originBuildFilterRow = buildFilterRow;
+buildFilterRow = function (field, operator, values) {
+  originBuildFilterRow(field, operator, values);
+
+  var options = select2Options(field);
+  if (options) {
+    setSelect2FilterValues(field, options, values);
+    transformToSelect2(field, options);
+  }
+};
+
+function select2Options(field) {
+  var filter = availableFilters[field];
+  var options = select2Filters[filter['type']];
+
+  if (!options && filter['field_format']) {
+    options = select2Filters[field];
+  }
+
+  return options;
+}
+
+function setSelect2FilterValues(field, options, values) {
+  var needAddValues = !rowHasSelectTag(field);
+  if (needAddValues) { addSelectTag(field); }
+
+  var $select = findSelectTagInRowBy(field);
+  if (options['multiple'] !== false) { $select.attr('multiple', true); }
+
+  if (needAddValues) { addOptionTags($select, field, values); }
+}
+
+function addSelectTag(field) {
+  var fieldId = sanitizeToId(field);
+  $('#tr_' + fieldId).find('td.values').append(
+    '<span style="display:none;"><select class="value" id="values_'+fieldId+'_1" name="v['+field+'][]"></select></span>'
+  );
+}
+
+function addOptionTags($select, field, values) {
+  var filterValues = availableFilters[field]['values'];
+
+  for (var i = 0; i < filterValues.length; i++) {
+    var filterValue = filterValues[i];
+    var option = $('<option>');
+
+    if ($.isArray(filterValue)) {
+      option.val(filterValue[1]).text(filterValue[0]);
+      if ($.inArray(filterValue[1], values) > -1) { option.attr('selected', true); }
+    } else {
+      option.val(filterValue).text(filterValue);
+      if ($.inArray(filterValue, values) > -1) { option.attr('selected', true); }
+    }
+
+    $select.append(option);
+  }
+}
+
+function sanitizeToId(field) { return field.replace('.', '_'); }
+
+function findSelectTagInRowBy(field) {
+  return findInRowBy(field, '.values select.value');
+}
+
+function rowHasSelectTag(field) {
+  return findInRowBy(field, '.values select.value').size() > 0;
+}
+
+function rowHasSelect2(field) {
+  return findInRowBy(field, '.values .select2').size() > 0;
+}
+
+function findInRowBy(field, selector) {
+  return $('#tr_' + sanitizeToId(field) + ' ' + selector);
+}
+
+function formatStateWithAvatar(opt) {
+  return $('<span>' + opt.avatar + '&nbsp;' + opt.text + '</span>');
+}
+
+function formatStateWithMultiaddress(opt) {
+  return $('<span class="select2-contact">' + opt.avatar + '<p class="select2-contact__name">' + opt.text + '</p><p class="select2-contact__email">' + opt.email + '</p></span>');
+}
+
+function transformToSelect2(field, options) {
+  if (rowHasSelect2(field)) { return }
+
+  findInRowBy(field, '.toggle-multiselect').hide();
+  var selectField = findSelectTagInRowBy(field);
+  selectField.select2(buildSelect2Options(options));
+
+  var select2Instance = selectField.data('select2');
+  select2Instance.on('results:message', function(params){
+    this.dropdown._resizeDropdown();
+    this.dropdown._positionDropdown();
+  });
+}
+
+function select2Tag(id, options) {
+  $(function () {
+    var selectField = $('select#' + id);
+    selectField.select2(buildSelect2Options(options));
+
+    var select2Instance = selectField.data('select2');
+    select2Instance.on('results:message', function(params){
+      this.dropdown._resizeDropdown();
+      this.dropdown._positionDropdown();
+    });
+  });
+}
+
+function buildSelect2Options(options) {
+  result = {
+    placeholder: options['placeholder'] || '',
+    allowClear: !!options['allow_clear'],
+    minimumInputLength: options['min_input_length'] || 0,
+    templateResult: window[options['format_state']],
+    width: options['width'] || '60%'
+  };
+
+  addDataSourceOptions(result, options);
+  addTagsOptions(result, options);
+
+  return result;
+}
+
+function addDataSourceOptions(target, options) {
+  if (options['url']) {
+    target['ajax'] = {
+      url: options['url'],
+      dataType: 'json',
+      delay: SELECT2_DELAY,
+      data: function (params) {
+        return { q: params.term };
+      },
+      processResults: function (data, params) {
+        return { results: data };
+      },
+      cache: true
+    };
+  } else {
+    target['data'] = options['data'] || [];
+  }
+}
+
+function addTagsOptions(target, options) {
+  if (options['tags']) {
+    target['tags'] = true;
+    target['tokenSeparators'] = [','];
+    target['createTag'] = createTag;
+  } else {
+    target['tags'] = false;
+  }
+}
+
+function createTag(params) {
+  var term = $.trim(params.term);
+  if (term === '' || term.indexOf(',') > -1) {
+    return null; // Return null to disable tag creation
+  }
+
+  return { id: term, text: term };
+}
--- a/assets/stylesheets/.stylelintignore
+++ b/assets/stylesheets/.stylelintignore
@ -1,4 +1,5 @@
 # stylelint ignore file
 bootstrap*
+select2.css
 *.map
 *.min.css
--- a/assets/stylesheets/clipboard.css
+++ b/assets/stylesheets/clipboard.css
@ -0,0 +1,39 @@
+/*
+ZERO CLIPBOARD
+*/
+.clipboard_button {
+  display: block;
+  float: left;
+  position: relative;
+  padding: 0;
+  text-align: center;
+  border-color: #bbb;
+  border-style: solid;
+  border-width: 1px;
+  width: 24px;
+  height: 23px;
+}
+
+.clipboard_button img {
+  padding-top: 4px;
+  padding-left: 5px;
+  display: block;
+}
+
+.clipboard_button.zeroclipboard-is-hover {
+  background-color: #aaa;
+  background-image: url('../images/button_selected.svg') 0 0 no-repeat;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#aaa));
+  background-image: -moz-linear-gradient(top, #ccc, #aaa);
+  background-image: -webkit-linear-gradient(top, #ccc, #aaa);
+  background-image: -ms-linear-gradient(top, #ccc, #aaa);
+  background-image: -o-linear-gradient(top, #ccc, #aaa);
+  background-image: linear-gradient(to bottom, #ccc, #aaa);
+}
+
+.clipboard_button.zeroclipboard-is-active {
+  background-color: #dcdcdc;
+  background-image: none;
+  border-color: #b5b5b5;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
+}
--- a/assets/stylesheets/select2.css
+++ b/assets/stylesheets/select2.css
@ -0,0 +1,367 @@
+.select2-container {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  position: relative;
+  vertical-align: middle;
+}
+.select2-container .select2-selection--single {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 28px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.select2-container .select2-selection--single .select2-selection__rendered {
+  display: block;
+  padding-left: 8px;
+  padding-right: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.select2-container .select2-selection--single .select2-selection__clear {
+  position: relative;
+}
+.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
+  padding-right: 8px;
+  padding-left: 20px;
+}
+.select2-container .select2-selection--multiple {
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  min-height: 24px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.select2-container .select2-selection--multiple .select2-selection__rendered {
+  /*display: inline-block;*/
+  overflow: hidden;
+  padding-left: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.select2-container .select2-search--inline {
+  float: left;
+}
+.select2-container .select2-search--inline .select2-search__field {
+  box-sizing: border-box;
+  border: none;
+  font-size: 100%;
+  margin-top: 2px;
+  padding: 0;
+}
+.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.select2-dropdown {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  left: -100000px;
+  width: 100%;
+  z-index: 1051;
+}
+
+.select2-results {
+  display: block;
+}
+
+.select2-results__options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.select2-results__option {
+  padding: 6px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.select2-results__option[aria-selected] {
+  cursor: pointer;
+}
+
+.select2-container--open .select2-dropdown {
+  left: 0;
+}
+
+.select2-container--open .select2-dropdown--above {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.select2-container--open .select2-dropdown--below {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.select2-search--dropdown {
+  display: block;
+  padding: 4px;
+}
+.select2-search--dropdown .select2-search__field {
+  padding: 4px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+.select2-search--dropdown.select2-search--hide {
+  display: none;
+}
+
+.select2-close-mask {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  min-width: 100%;
+  height: auto;
+  width: auto;
+  opacity: 0;
+  z-index: 99;
+  background-color: #fff;
+  filter: alpha(opacity=0);
+}
+
+.select2-hidden-accessible {
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+.select2-container--default .select2-selection--single {
+  background-color: #fff;
+  border: 1px solid #9eb1c2;
+  border-radius: 2px;
+  height: 21px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  padding-left: 21px;
+  line-height: 18px;
+  font-size: 11px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__clear {
+  cursor: pointer;
+  float: right;
+  font-weight: normal;
+  color: #888;
+}
+.select2-container--default .select2-selection--single .select2-selection__placeholder {
+  color: #999;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+  height: 20px;
+  position: absolute;
+  top: 0px;
+  right: 1px;
+  width: 20px;
+}
+.select2-container--default .select2-selection--single .select2-selection__arrow b {
+  border-color: #888 transparent transparent transparent;
+  border-style: solid;
+  border-width: 5px 4px 0 4px;
+  height: 0;
+  left: 50%;
+  margin-left: -4px;
+  margin-top: -2px;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
+  float: left;
+}
+.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
+  left: 1px;
+  right: auto;
+}
+.select2-container--default.select2-container--disabled .select2-selection--single {
+  background-color: #eee;
+  cursor: default;
+}
+.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
+  display: none;
+}
+.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+  border-color: transparent transparent #888 transparent;
+  border-width: 0 4px 5px 4px;
+}
+.select2-container--default .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #9eb1c2;
+  border-radius: 2px;
+  cursor: text;
+}
+
+#sidebar .select2-container--default .select2-selection--multiple .select2-selection__rendered,
+.select2-container--default .select2-selection--multiple .select2-selection__rendered {
+  box-sizing: border-box;
+  list-style: none;
+  margin: 0;
+  padding: 0 2px 2px 2px;
+  width: 100%;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
+  list-style: none;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
+  color: #999;
+  margin-top: 5px;
+  float: left;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__clear {
+  cursor: pointer;
+  float: right;
+  font-weight: bold;
+  margin-top: 5px;
+  margin-right: 10px;
+}
+
+#sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice,
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+  background-color: #efefef;
+  border-radius: 2px;
+  cursor: default;
+  float: left;
+  margin-right: 3px;
+  margin-top: 3px;
+  padding: 0 3px;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+  color: #aaa;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: normal;
+  margin-right: 2px;
+}
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+  color: #333;
+}
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
+  float: right;
+}
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
+  margin-left: 5px;
+  margin-right: auto;
+}
+.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+  margin-left: 2px;
+  margin-right: auto;
+}
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: solid #aaa 1px;
+  outline: 0;
+}
+.select2-container--default.select2-container--disabled .select2-selection--multiple {
+  background-color: #eee;
+  cursor: default;
+}
+.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
+  display: none;
+}
+.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.select2-container--default .select2-search--dropdown .select2-search__field {
+  border: 1px solid #aaa;
+}
+.select2-container--default .select2-search--inline .select2-search__field {
+  background: transparent;
+  border: none;
+  outline: 0;
+  box-shadow: none;
+  -webkit-appearance: textfield;
+}
+.select2-container--default .select2-results > .select2-results__options {
+  max-height: 200px;
+  overflow-y: auto;
+}
+.select2-container--default .select2-results__option[role=group] {
+  padding: 0;
+}
+.select2-container--default .select2-results__option[aria-disabled=true] {
+  color: #999;
+}
+.select2-container--default .select2-results__option[aria-selected=true] {
+  background-color: #eee;
+}
+.select2-container--default .select2-results__option .select2-results__option {
+  padding-left: 1em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
+  padding-left: 0;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -1em;
+  padding-left: 2em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -2em;
+  padding-left: 3em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -3em;
+  padding-left: 4em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -4em;
+  padding-left: 5em;
+}
+.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
+  margin-left: -5em;
+  padding-left: 6em;
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: #759fcf;
+  color: #fff;
+}
+.select2-container--default .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px;
+}
+
+.filter .select2 {
+  margin: 1px;
+}
+
+.filter .select2-selection--multiple .select2-search--inline .select2-search__field {
+  border: 0px !important;
+  height: inherit !important;
+  padding: 0px !important;
+  width: 2em !important;
+}
+
+.filter .select2-container--default .select2-selection--multiple .select2-selection__choice {
+  border: 0px;
+  padding: 2px 5px;
+}
--- a/docs/index.rst
+++ b/docs/index.rst
@ -167,11 +167,13 @@ Don't worry, if you only need a subset of the provided libraries. If you do not
 It provides :

 * `bootstrap-datepicker 1.8.0 <https://github.com/uxsolutions/bootstrap-datepicker>`_
+* `clipboardJS 2.0.4 <https://clipboardjs.com/>`_
 * `d3 3.5.17 <https://d3js.org/>`_
 * `d3plus v2.0.0-alpha.17 <https://d3plus.org/>`_
 * `FontAwesome 5.9.0 <https://fontawesome.com/>`_
 * `mermaid 8.0.0 <https://github.com/knsv/mermaid/>`_
 * `nvd3 1.8.6 <https://github.com/novus/nvd3>`_
+* `Select2 4.0.7 <https://select2.org/>`_
 * `ZeroClipboard 2.3.0 <https://github.com/zeroclipboard/zeroclipboard>`_

 And a set of various Rails helper methods (see below).
@ -190,12 +192,14 @@ This method loads all JS and CSS files needed by the required module.

 The following modules are available :

+* clipboardjs
 * d3
 * d3plus
 * mermaid
 * nvd3
 * font_awesome
 * notify
+* select2
 * zeroclipboard


--- a/lib/additionals.rb
+++ b/lib/additionals.rb
@ -48,6 +48,7 @@ module Additionals
      ActionView::Base.send :include, Additionals::Helpers
      ActionView::Base.send :include, AdditionalsFontawesomeHelper
      ActionView::Base.send :include, AdditionalsMenuHelper
+      ActionView::Base.send :include, Additionals::AdditionalsSelect2Helper

      # Hooks
      require_dependency 'additionals/hooks'
@ -84,7 +85,8 @@ module Additionals
    end

    def true?(value)
-      return true if value.to_i == 1 || value.to_s.casecmp('true').zero?
+      return false if value.is_a? FalseClass
+      return true if value.is_a?(TrueClass) || value.to_i == 1 || value.to_s.casecmp('true').zero?

      false
    end
--- a/lib/additionals/helpers.rb
+++ b/lib/additionals/helpers.rb
@ -240,7 +240,15 @@ module Additionals
    end

    def additionals_load_select2
-      additionals_include_js('additionals_to_select2')
+      additionals_include_css('select2') +
+        additionals_include_js('select2.min') +
+        additionals_include_js('select2_helper')
+    end
+
+    def additionals_load_clipboardjs
+      additionals_include_css('clipboard') +
+        additionals_include_js('clipboard.min') +
+        additionals_include_js('clipboard_helper')
    end

    def additionals_load_observe_field
--- a/test/unit/additionals_test.rb
+++ b/test/unit/additionals_test.rb
@ -0,0 +1,52 @@
+require File.expand_path('../../test_helper', __FILE__)
+
+class AdditionalsTest < Additionals::TestCase
+  fixtures :projects, :users, :members, :member_roles, :roles,
+           :trackers, :projects_trackers,
+           :enabled_modules,
+           :enumerations
+
+  include Redmine::I18n
+
+  def setup
+    prepare_tests
+  end
+
+  def test_true
+    assert Additionals.true? 1
+    assert Additionals.true? true
+    assert Additionals.true? 'true'
+    assert Additionals.true? 'True'
+
+    assert_not Additionals.true?(-1)
+    assert_not Additionals.true? 0
+    assert_not Additionals.true? '0'
+    assert_not Additionals.true? 1000
+    assert_not Additionals.true? false
+    assert_not Additionals.true? 'false'
+    assert_not Additionals.true? 'False'
+    assert_not Additionals.true? 'yes'
+    assert_not Additionals.true? ''
+    assert_not Additionals.true? nil
+    assert_not Additionals.true? 'unknown'
+  end
+
+  def test_settings
+    assert_equal 'Don\'t forget to define acceptance criteria!',
+                 Additionals.settings[:new_ticket_message]
+    assert_equal 1, Additionals.settings[:external_urls]
+  end
+
+  def test_setting
+    assert Additionals.setting?(:external_urls)
+    assert_not Additionals.setting?(:add_go_to_top)
+  end
+
+  def test_load_macros
+    assert_equal ['fa'], Additionals.load_macros(['fa'])
+
+    assert_raises LoadError do
+      Additionals.load_macros(%w[fa invalid])
+    end
+  end
+end