Переопределить функцию jquery plugin bootstrap -select - PullRequest
Новая
       34

Переопределить функцию jquery plugin bootstrap -select

0 голосов
/ 25 апреля 2020

У меня возникли проблемы с переопределением функции плагина bootstrap. Я работаю над Symfony 5 с веб-пакетом Encore.

Я пытаюсь переопределить функцию createDropdown, как описано в this topi c.

Здесь мой код: 

const $ = require('jquery');

require('../css/document.scss');
require('bootstrap-select');
require('bootstrap-select/dist/js/i18n/defaults-fr_FR.js');


$(document).ready(function() {

    $.fn.selectpicker.Constructor.BootstrapVersion = '4';

    console.log($.fn.selectpicker.Constructor.prototype.createDropdown);

    $.fn.selectpicker.Constructor.prototype.createDropdown = function () {
      // Options
      // If we are multiple or showTick option is set, then add the show-tick class
      var showTick = (this.multiple || this.options.showTick) ? ' show-tick' : '',
          multiselectable = this.multiple ? ' aria-multiselectable="true"' : '',
          inputGroup = '',
          autofocus = this.autofocus ? ' autofocus' : '';

      if (version.major < 4 && this.$element.parent().hasClass('input-group')) {
        inputGroup = ' input-group-btn';
      }

      // Elements
      var drop,
          header = '',
          searchbox = '',
          actionsbox = '',
          donebutton = '';

      if (this.options.header) {
        header =
          '<div class="' + classNames.POPOVERHEADER + '">' +
            '<button type="button" class="close" aria-hidden="true">&times;</button>' +
              this.options.header +
          '</div>';
      }

      if (this.options.liveSearch) {

        searchbox =
          '<div class="bs-searchbox">' +
            '<input type="search" class="form-control" autocomplete="off"' +
              (
                this.options.liveSearchPlaceholder === null ? ''
                :
                ' placeholder="' + htmlEscape(this.options.liveSearchPlaceholder) + '"'
              ) +
              ' role="combobox" aria-label="Search" aria-controls="' + this.selectId + '" aria-autocomplete="list">' +
          '</div>';
      }

      if (this.multiple && this.options.actionsBox) {
        actionsbox =
            '<div class="bs-actionsbox">' +
              '<div class="btn-group btn-group-sm btn-block">' +
                '<button type="button" class="actions-btn bs-select-all btn ' + classNames.BUTTONCLASS + '">' +
                  this.options.selectAllText +
                '</button>' +
                '<button type="button" class="actions-btn bs-deselect-all btn ' + classNames.BUTTONCLASS + '">' +
                  this.options.deselectAllText +
                '</button>' +
              '</div>' +
            '</div>';
      }

      if (this.multiple && this.options.doneButton) {
        donebutton =
          '<div class="bs-donebutton">' +
            '<div class="btn-group btn-block">' +
              '<button type="button" class="btn btn-sm ' + classNames.BUTTONCLASS + '">' +
                this.options.doneButtonText +
              '</button>' +
            '</div>' +
          '</div>';
      }

      drop =
        '<div class="dropdown bootstrap-select' + showTick + inputGroup + '">' +
          '<button type="button" class="' + this.options.styleBase + ' dropdown-toggle" ' + (this.options.display === 'static' ? 'data-display="static"' : '') + 'data-toggle="dropdown"' + autofocus + ' role="combobox" aria-owns="' + this.selectId + '" aria-haspopup="listbox" aria-expanded="false">' +
            '<div class="filter-option">' +
              '<div class="filter-option-inner">' +
                '<div class="filter-option-inner-inner"></div>' +
              '</div> ' +
            '</div>' +
            (
              version.major === '4' ? ''
              :
              '<span class="bs-caret">' +
                this.options.template.caret +
              '</span>'
            ) +
          '</button>' +
          '<div class="' + classNames.MENU + ' ' + (version.major === '4' ? '' : classNames.SHOW) + '">' +
            header +
            searchbox +
            actionsbox +
            '<div class="inner ' + classNames.SHOW + '" role="listbox" id="' + this.selectId + '" tabindex="-1" ' + multiselectable + '>' +
                '<ul class="' + classNames.MENU + ' inner ' + (version.major === '4' ? classNames.SHOW : '') + '" role="presentation">' +
                '</ul>' +
            '</div>' +
            donebutton +
          '</div>' +
        '</div>';

      return $(drop);
    };

    console.log($.fn.selectpicker.Constructor.prototype.createDropdown);
});

Если я что-то изменю в этом коде, например: 

if (this.multiple && this.options.actionsBox) {
    actionsbox =
        '<div class="bs-actionsbox">' +
            '<div class="btn-group btn-group-sm btn-block">' +
                '<button type="button" class="actions-btn bs-select-all btn ' + classNames.BUTTONCLASS + '">' +
                    this.options.selectAllText +
                '</button>' +
                '<button type="button" class="actions-btn bs-deselect-all btn ' + classNames.BUTTONCLASS + '">' +
                    this.options.deselectAllText +
                '</button>' +
            '</div>' +
        '</div>';
}

по: 

if (this.multiple && this.options.actionsBox) {
    actionsbox =
        '<div class="bs-actionsbox"></div>';
}

Ничего не добавляется. Коробка действий отображается нормально.

Итак, вот мои вопросы:

  1. Должен ли я поместить переопределенную функцию в $(document).ready(function() { ... }?
  2. Ответственен ли Webpack Encore? Может быть, компилятор не принимает во внимание мою переопределенную функцию.
  3. Разве IIFE плагина не позволяет переопределять функции внутри?
  4. Что удивительно, это вывод console.log. До и после переопределения вывод изменился, даже если я не вносил никаких изменений в функцию. Это нормально?

Console.log output

PS: при необходимости: bootstrap -выбрать функцию .

...