У меня возникли проблемы с переопределением функции плагина 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">×</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>';
}
Ничего не добавляется. Коробка действий отображается нормально.
Итак, вот мои вопросы:
- Должен ли я поместить переопределенную функцию в
$(document).ready(function() { ... }
? - Ответственен ли Webpack Encore? Может быть, компилятор не принимает во внимание мою переопределенную функцию.
- Разве IIFE плагина не позволяет переопределять функции внутри?
- Что удивительно, это вывод
console.log
. До и после переопределения вывод изменился, даже если я не вносил никаких изменений в функцию. Это нормально?
PS: при необходимости: bootstrap -выбрать функцию .