2022-05-03 20:50:57 +02:00
|
|
|
'use strict'
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
import $ from 'jquery'
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
import select2 from 'select2/dist/js/select2.js'
|
|
|
|
import Events from '../_events'
|
2021-01-14 19:13:57 +01:00
|
|
|
|
|
|
|
const FormSelect2 = (($) => {
|
|
|
|
// Constants
|
2022-05-03 20:50:57 +02:00
|
|
|
const NAME = 'jsFormSelect2'
|
|
|
|
const DATA_KEY = NAME
|
|
|
|
const $Html = $('html, body')
|
|
|
|
const W = window
|
|
|
|
const D = document
|
2021-01-14 19:13:57 +01:00
|
|
|
|
|
|
|
class FormSelect2 {
|
2022-05-03 20:50:57 +02:00
|
|
|
constructor (el) {
|
|
|
|
const ui = this
|
|
|
|
const $el = $(el)
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
ui._el = el
|
|
|
|
ui.dispose()
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
console.log(`${NAME}: init`)
|
|
|
|
$el.data(DATA_KEY, this)
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
const $fields = $el.find(Events.FORM_FIELDS)
|
2021-01-14 19:13:57 +01:00
|
|
|
|
|
|
|
const $selectFields = $el
|
2022-05-03 20:50:57 +02:00
|
|
|
.find('select:not([readonly])')
|
|
|
|
.not('.no-select2')
|
2021-01-14 19:13:57 +01:00
|
|
|
|
|
|
|
$selectFields.each((i, el) => {
|
2022-05-03 20:50:57 +02:00
|
|
|
$(el).select2()
|
|
|
|
})
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
$el.addClass(`${NAME}-active`)
|
|
|
|
$el.trigger(Events.FORM_INIT_BASICS)
|
2021-01-14 19:13:57 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// Public methods
|
2022-05-03 20:50:57 +02:00
|
|
|
dispose () {
|
|
|
|
console.log(`${NAME}: dispose`)
|
|
|
|
const ui = this
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
const $el = $(ui._el)
|
2021-01-14 19:13:57 +01:00
|
|
|
|
|
|
|
const $selectFields = $el
|
2022-05-03 20:50:57 +02:00
|
|
|
.find('select:not([readonly])')
|
|
|
|
.not('.no-select2')
|
2021-01-14 19:13:57 +01:00
|
|
|
$selectFields.each((i, el) => {
|
2022-05-03 20:50:57 +02:00
|
|
|
const $el = $(el)
|
|
|
|
if ($el.hasClass('select2-hidden-accessible')) {
|
|
|
|
$el.select2('destroy')
|
2021-01-14 19:13:57 +01:00
|
|
|
}
|
2022-05-03 20:50:57 +02:00
|
|
|
})
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
$.removeData(ui._el, DATA_KEY)
|
|
|
|
ui._el = null
|
|
|
|
$el.removeClass(`${NAME}-active`)
|
2021-01-14 19:13:57 +01:00
|
|
|
}
|
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
static _jQueryInterface () {
|
2021-01-14 19:13:57 +01:00
|
|
|
return this.each(() => {
|
|
|
|
// attach functionality to el
|
2022-05-03 20:50:57 +02:00
|
|
|
const $el = $(this)
|
|
|
|
let data = $el.data(DATA_KEY)
|
2021-01-14 19:13:57 +01:00
|
|
|
|
|
|
|
if (!data) {
|
2022-05-03 20:50:57 +02:00
|
|
|
data = new FormSelect2(this)
|
|
|
|
$el.data(DATA_KEY, data)
|
2021-01-14 19:13:57 +01:00
|
|
|
}
|
2022-05-03 20:50:57 +02:00
|
|
|
})
|
2021-01-14 19:13:57 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// jQuery interface
|
2022-05-03 20:50:57 +02:00
|
|
|
$.fn[NAME] = FormSelect2._jQueryInterface
|
|
|
|
$.fn[NAME].Constructor = FormSelect2
|
2021-01-14 19:13:57 +01:00
|
|
|
$.fn[NAME].noConflict = function () {
|
2022-05-03 20:50:57 +02:00
|
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
|
|
|
return FormSelect2._jQueryInterface
|
|
|
|
}
|
2021-01-14 19:13:57 +01:00
|
|
|
|
|
|
|
const init = () => {
|
2022-05-03 20:50:57 +02:00
|
|
|
$('form').jsFormSelect2()
|
|
|
|
}
|
2021-01-14 19:13:57 +01:00
|
|
|
|
|
|
|
// auto-apply
|
|
|
|
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
2022-05-03 20:50:57 +02:00
|
|
|
init()
|
|
|
|
})
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
return FormSelect2
|
|
|
|
})($)
|
2021-01-14 19:13:57 +01:00
|
|
|
|
2022-05-03 20:50:57 +02:00
|
|
|
export default FormSelect2
|