2020-12-24 23:42:33 +01:00
|
|
|
'use strict';
|
2019-06-08 17:20:51 +02:00
|
|
|
|
|
|
|
import $ from 'jquery';
|
|
|
|
|
|
|
|
import Events from '../_events';
|
|
|
|
import Spinner from '../_components/_ui.spinner';
|
2020-12-24 23:42:33 +01:00
|
|
|
import FormValidateField from './_ui.form.validate.field';
|
2019-12-02 16:33:28 +01:00
|
|
|
|
|
|
|
import '../../thirdparty/jQuery-TE_v.1.4.0/jquery-te-1.4.0.css';
|
|
|
|
import '../../thirdparty/jQuery-TE_v.1.4.0/uncompressed/jquery-te-1.4.0.js';
|
|
|
|
|
2019-06-08 17:20:51 +02:00
|
|
|
const JqteUI = (($) => {
|
|
|
|
const NAME = 'jsJqteUI';
|
|
|
|
const DATA_KEY = NAME;
|
|
|
|
|
|
|
|
const jqteOptions = {
|
|
|
|
color: false,
|
|
|
|
fsize: false,
|
|
|
|
funit: 'em',
|
|
|
|
format: false,
|
|
|
|
rule: false,
|
|
|
|
source: false,
|
|
|
|
sub: false,
|
|
|
|
sup: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
class JqteUI {
|
|
|
|
constructor(element) {
|
2020-12-24 23:42:33 +01:00
|
|
|
console.log(`${NAME}: init`);
|
2020-09-09 17:40:58 +02:00
|
|
|
|
2019-06-08 17:20:51 +02:00
|
|
|
const ui = this;
|
|
|
|
const $element = $(element);
|
|
|
|
const validationUI = $element.data('jsFormValidateField');
|
|
|
|
|
|
|
|
ui._element = element;
|
|
|
|
$element.data(DATA_KEY, this);
|
|
|
|
$element.jqte(jqteOptions);
|
|
|
|
|
|
|
|
// dynamic error control
|
|
|
|
if (validationUI) {
|
2020-12-24 23:42:33 +01:00
|
|
|
$element
|
|
|
|
.parents('.jqte')
|
|
|
|
.find('.jqte_editor')
|
|
|
|
.on('change', (e) => {
|
|
|
|
validationUI.validate();
|
|
|
|
});
|
2019-06-08 17:20:51 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
static dispose() {
|
2020-09-09 17:40:58 +02:00
|
|
|
console.log(`${NAME}: dispose`);
|
2019-06-08 17:20:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
static _jQueryInterface() {
|
2020-12-24 23:42:33 +01:00
|
|
|
return this.each(function () {
|
2019-06-08 17:20:51 +02:00
|
|
|
// attach functionality to element
|
|
|
|
const $element = $(this);
|
|
|
|
let data = $element.data(DATA_KEY);
|
|
|
|
|
|
|
|
if (!data) {
|
|
|
|
data = new JqteUI(this);
|
|
|
|
$element.data(DATA_KEY, data);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// jQuery interface
|
|
|
|
$.fn[NAME] = JqteUI._jQueryInterface;
|
|
|
|
$.fn[NAME].Constructor = JqteUI;
|
2020-12-24 23:42:33 +01:00
|
|
|
$.fn[NAME].noConflict = function () {
|
2019-06-08 17:20:51 +02:00
|
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
|
|
|
return JqteUI._jQueryInterface;
|
|
|
|
};
|
|
|
|
|
|
|
|
// auto-apply
|
|
|
|
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
|
|
|
$('textarea.jqte-field').jsJqteUI();
|
|
|
|
});
|
|
|
|
|
|
|
|
return JqteUI;
|
|
|
|
})($);
|
|
|
|
|
|
|
|
export default JqteUI;
|