Merge pull request #1519 from biosistemika/ai-adding-multiple-select-plugin

Adding new Select2 library with customizations

app/assets/javascripts/application.js.erb

@@ -36,6 +36,8 @@
 //= require i18n.js
 //= require i18n/translations
 //= require users/settings/teams/invite_users_modal
+//= require select2.min
+//= require select2_customization
 //= require turbolinks
 
 

app/assets/javascripts/select2_customization.js

@@ -0,0 +1,92 @@
+
+$.fn.extend({
+  select2Multiple: function(config = {}) {
+    // Adding ID to each block
+    var templateSelection = (state) => {
+      return $('<span class="select2-block-body" data-select-id="' + state.id + '">'
+        + (config.customSelection !== undefined ? config.customSelection(state) : state.text)
+      + '</span>');
+    };
+    var select2 = this.select2({
+      closeOnSelect: false,
+      multiple: true,
+      ajax: config.ajax,
+      templateSelection: templateSelection
+    });
+    // select all check
+    this[0].dataset.singleDisplay = config.singleDisplay || false;
+    if (this[0].dataset.selectAll === 'true') {
+      $.each($(this).find('option'), (index, e) => { e.selected = true; });
+      this.trigger('change');
+    }
+    if (config.singleDisplay) {
+      $(this).updateSingleName();
+    }
+    return select2
+      // Adding select all button
+      .on('select2:open', function() {
+        var selectElement = this;
+        $('.select2-selection').scrollTo(0);
+        $('.select2_select_all').remove();
+        if (selectElement.dataset.selectAllButton !== undefined) {
+          $('<div class="select2_select_all btn btn-default"><strong>' + selectElement.dataset.selectAllButton + '</strong></div>').prependTo('.select2-dropdown').on('click', function() {
+            var elementsToSelect = $.map($(selectElement).find('option'), e => e.value);
+            if ($(selectElement).find('option:selected').length === elementsToSelect.length) elementsToSelect = [];
+            $(selectElement).val(elementsToSelect).trigger('change');
+            $(selectElement).select2('close');
+            $(selectElement).select2('open');
+          });
+        }
+      })
+      // Prevent shake bug with multiple select
+      .on('select2:open select2:close', function() {
+        if ($(this).val() != null && $(this).val().length > 3) {
+          $(this).next().find('.select2-search__field')[0].disabled = true;
+        } else {
+          $(this).next().find('.select2-search__field')[0].disabled = false;
+        }
+        $('.select2-selection').scrollTo(0);
+      })
+      // Prevent opening window when deleteing selection
+      .on('select2:unselect', function() {
+        var resultWindow = $('.select2-container--open');
+        if (resultWindow.length === 0) {
+          $(this).select2('open');
+        }
+      })
+      // Fxied scroll bug
+      .on('select2:selecting select2:unselecting', function(e) {
+        $(e.currentTarget).data('scrolltop', $('.select2-results__options').scrollTop());
+        $('.select2-selection').scrollTo(0);
+      })
+      // Fxied scroll bug
+      .on('select2:select select2:unselect change', function(e) {
+        $('.select2-selection').scrollTo(0);
+        $('.select2-results__options').scrollTop($(e.currentTarget).data('scrolltop'));
+        if (this.dataset.singleDisplay === 'true') {
+          $(this).updateSingleName();
+        }
+      });
+  },
+  select2MultipleClearAll: function() {
+    $(this).val([]).trigger('change');
+  },
+  // Create from multiple blocks single one with counter
+  updateSingleName: function() {
+    var template = '';
+    var selectElement = this;
+    var selectedOptions = selectElement.next().find('.select2-selection__choice');
+    var optionsCounter = selectedOptions.length;
+    var allOptionsSelected = this.find('option').length === optionsCounter;
+    var optionText = allOptionsSelected ? this[0].dataset.selectMultipleAllSelected : optionsCounter + ' ' + this[0].dataset.selectMultipleName;
+    if (optionsCounter > 1) {
+      selectedOptions.remove();
+      template = '<li class="select2-selection__choice">'
+                  + '<span class="select2-selection__choice__remove" role="presentation">×</span>'
+                    + optionText
+                + '</li>';
+      $(template).prependTo(selectElement.next().find('.select2-selection__rendered')).find('.select2-selection__choice__remove')
+        .click(function() { selectElement.select2MultipleClearAll(); });
+    }
+  }
+});

app/assets/stylesheets/select2_customizations.scss

@@ -0,0 +1,89 @@
+@import "constants";
+@import "mixins";
+
+.select2-container {
+
+  .select2-selection {
+    max-height: 23px;
+    overflow: hidden;
+    position: relative;
+
+    &.select2-selection--multiple {
+      border: 1px solid $color-alto;
+    }
+
+    .select2-selection__rendered {
+      width: 200%;
+    }
+
+    .select2-selection__choice {
+      background: $color-concrete;
+      border: 1px solid $color-alto;
+
+      .select2-selection__choice__remove {
+        float: right;
+        margin: 0;
+        margin-left: 5px;
+      }
+    }
+  }
+
+  .select2-dropdown {
+    border: 1px solid $color-alto;
+
+    .select2_select_all {
+      border: 0;
+      border-bottom: 1px solid $color-alto;
+      border-radius: 0;
+      cursor: pointer;
+      line-height: 20px;
+      padding: 5px;
+      text-align: center;
+      width: 100%;
+    }
+
+    .select2-results__option[role="group"] {
+      strong {
+        font-size: $font-size-base;
+      }
+    }
+
+    .select2-results__option[role="treeitem"] {
+      background: $color-white;
+      line-height: 18px;
+      padding-left: 30px;
+      position: relative;
+
+      &::before {
+        background: $color-white;
+        border: 1px solid $color-emperor;
+        border-radius: 6px;
+        content: "";
+        height: 12px;
+        left: 0;
+        margin: 9px;
+        position: absolute;
+        top: 0;
+        transition: .3s;
+        width: 12px;
+      }
+
+      &.select2-results__option--highlighted {
+        background: inherit;
+        color: inherit;
+      }
+
+      &[aria-selected="true"] {
+        background: $color-concrete;
+
+        &::before {
+          background: $color-emperor;
+        }
+      }
+
+      &:hover {
+        background: $color-alto;
+      }
+    }
+  }
+}