Skip to content

Commit fa9621e

Browse files
author
Anu1601CS
committed
eslit style
1 parent eafa453 commit fa9621e

File tree

1 file changed

+150
-148
lines changed

1 file changed

+150
-148
lines changed

‎build/webcomponents/js/editor-codemirror/editor-codemirror.js‎

Lines changed: 150 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,152 @@
11
customElements.define('joomla-editor-codemirror', class extends HTMLElement {
2-
constructor() {
3-
super();
4-
5-
this.instance = '';
6-
this.cm = '';
7-
this.host = window.location.origin;
8-
this.element = this.querySelector('textarea');
9-
this.refresh = this.refresh.bind(this);
10-
this.toggleFullScreen = this.toggleFullScreen.bind(this);
11-
this.closeFullScreen = this.closeFullScreen.bind(this);
12-
13-
// Append the editor script
14-
if (!document.head.querySelector('#cm-editor')) {
15-
const cmPath = this.getAttribute('editor');
16-
const script1 = document.createElement('script');
17-
18-
script1.src = `${this.host}/${cmPath}`;
19-
script1.id = 'cm-editor';
20-
script1.setAttribute('async', false);
21-
document.head.insertBefore(script1, this.file);
22-
}
23-
}
24-
25-
static get observedAttributes() {
26-
return ['options'];
27-
}
28-
29-
get options() { return JSON.parse(this.getAttribute('options')); }
30-
set options(value) { this.setAttribute('options', value); }
31-
32-
attributeChangedCallback(attr, oldValue, newValue) {
33-
switch (attr) {
34-
case 'options':
35-
if (oldValue && newValue !== oldValue) {
36-
this.refresh(this.element);
37-
}
38-
39-
break;
40-
}
41-
}
42-
43-
connectedCallback() {
44-
const that = this;
45-
const buttons = [].slice.call(this.querySelectorAll('.editor-xtd-buttons .xtd-button'));
46-
this.checkElement('CodeMirror')
47-
.then(() => {
48-
// Append the addons script
49-
if (!document.head.querySelector('#cm-addons')) {
50-
const addonsPath = this.getAttribute('addons');
51-
const script2 = document.createElement('script');
52-
53-
script2.src = `${this.host}/${addonsPath}`;
54-
script2.id = 'cm-addons';
55-
script2.setAttribute('async', false);
56-
document.head.insertBefore(script2, this.file)
57-
}
58-
59-
this.checkElement('CodeMirror', 'findModeByName')
60-
.then(() => {
61-
// For mode autoloading.
62-
window.CodeMirror.modeURL = this.getAttribute('mod-path');
63-
64-
// Fire this function any time an editor is created.
65-
window.CodeMirror.defineInitHook((editor) => {
66-
// Try to set up the mode
67-
const mode = window.CodeMirror.findModeByName(that.options.mode || '');
68-
69-
if (mode) {
70-
window.CodeMirror.autoLoadMode(editor, mode.mode);
71-
editor.setOption('mode', mode.mime);
72-
} else {
73-
window.CodeMirror.autoLoadMode(editor, that.options.mode);
74-
}
75-
76-
const map = {
77-
"Ctrl-Q": that.toggleFullScreen,
78-
[that.getAttribute('fs-combo')]: that.toggleFullScreen,
79-
'Esc': that.closeFullScreen,
80-
};
81-
82-
editor.addKeyMap(map);
83-
84-
// Handle gutter clicks (place or remove a marker).
85-
editor.on("gutterClick", function (ed, n, gutter) {
86-
if (gutter !== "CodeMirror-markergutter") {
87-
return;
88-
}
89-
90-
const info = ed.lineInfo(n);
91-
const hasMarker = !!info.gutterMarkers && !!info.gutterMarkers["CodeMirror-markergutter"];
92-
ed.setGutterMarker(n, "CodeMirror-markergutter", hasMarker ? null : this.makeMarker());
93-
});
94-
95-
// Some browsers do something weird with the fieldset which doesn't work well with CodeMirror. Fix it.
96-
if (this.parentNode.tagName.toLowerCase() === 'fieldset') {
97-
this.parentNode.style.minWidth = 0;
98-
}
99-
});
100-
101-
/** Register Editor */
102-
this.instance = window.CodeMirror.fromTextArea(this.element, this.options);
103-
Joomla.editors.instances[this.element.id] = this.instance;
104-
});
105-
});
106-
}
107-
108-
disconnectedCallback() {
109-
// Remove from the Joomla API
110-
delete Joomla.editors.instances[this.element.id];
111-
}
112-
113-
refresh(element) {
114-
this.instance = window.CodeMirror.fromTextArea(element, this.options);
115-
}
116-
117-
rafAsync() {
118-
return new Promise(resolve => {
119-
requestAnimationFrame(resolve);
120-
});
121-
}
122-
123-
async checkElement(string1, string2) {
124-
if (string2) {
125-
while (typeof window[string1][string2] !== 'function') {
126-
await this.rafAsync()
127-
}
128-
} else {
129-
while (typeof window[string1] !== 'function') {
130-
await this.rafAsync()
131-
}
132-
}
133-
134-
return true;
135-
}
136-
137-
toggleFullScreen() {
138-
this.instance.setOption("fullScreen", !this.instance.getOption("fullScreen"));
139-
}
140-
141-
closeFullScreen() {
142-
this.instance.getOption("fullScreen") && this.instance.setOption("fullScreen", false);
143-
}
144-
145-
makeMarker() {
146-
const marker = document.createElement("div");
147-
marker.className = "CodeMirror-markergutter-mark";
148-
return marker;
149-
}
2+
constructor() {
3+
super();
4+
5+
this.instance = '';
6+
this.cm = '';
7+
this.host = window.location.origin;
8+
this.element = this.querySelector('textarea');
9+
this.refresh = this.refresh.bind(this);
10+
this.toggleFullScreen = this.toggleFullScreen.bind(this);
11+
this.closeFullScreen = this.closeFullScreen.bind(this);
12+
13+
// Append the editor script
14+
if (!document.head.querySelector('#cm-editor')) {
15+
const cmPath = this.getAttribute('editor');
16+
const script1 = document.createElement('script');
17+
18+
script1.src = `${this.host}/${cmPath}`;
19+
script1.id = 'cm-editor';
20+
script1.setAttribute('async', false);
21+
document.head.insertBefore(script1, this.file);
22+
}
23+
}
24+
25+
static get observedAttributes() {
26+
return ['options'];
27+
}
28+
29+
get options() { return JSON.parse(this.getAttribute('options')); }
30+
set options(value) { this.setAttribute('options', value); }
31+
32+
attributeChangedCallback(attr, oldValue, newValue) {
33+
switch (attr) {
34+
case 'options':
35+
if (oldValue && newValue !== oldValue) {
36+
this.refresh(this.element);
37+
}
38+
break;
39+
default:
40+
// Do nothing
41+
}
42+
}
43+
44+
connectedCallback() {
45+
const that = this;
46+
this.checkElement('CodeMirror')
47+
.then(() => {
48+
// Append the addons script
49+
if (!document.head.querySelector('#cm-addons')) {
50+
const addonsPath = this.getAttribute('addons');
51+
const script2 = document.createElement('script');
52+
53+
script2.src = `${this.host}/${addonsPath}`;
54+
script2.id = 'cm-addons';
55+
script2.setAttribute('async', false);
56+
document.head.insertBefore(script2, this.file);
57+
}
58+
59+
this.checkElement('CodeMirror', 'findModeByName')
60+
.then(() => {
61+
// For mode autoloading.
62+
window.CodeMirror.modeURL = this.getAttribute('mod-path');
63+
64+
// Fire this function any time an editor is created.
65+
window.CodeMirror.defineInitHook((editor) => {
66+
// Try to set up the mode
67+
const mode = window.CodeMirror.findModeByName(that.options.mode || '');
68+
69+
if (mode) {
70+
window.CodeMirror.autoLoadMode(editor, mode.mode);
71+
editor.setOption('mode', mode.mime);
72+
} else {
73+
window.CodeMirror.autoLoadMode(editor, that.options.mode);
74+
}
75+
76+
const map = {
77+
'Ctrl-Q': that.toggleFullScreen,
78+
[that.getAttribute('fs-combo')]: that.toggleFullScreen,
79+
Esc: that.closeFullScreen,
80+
};
81+
82+
editor.addKeyMap(map);
83+
84+
// Handle gutter clicks (place or remove a marker).
85+
editor.on('gutterClick', (ed, n, gutter) => {
86+
if (gutter !== 'CodeMirror-markergutter') {
87+
return;
88+
}
89+
90+
const info = ed.lineInfo(n);
91+
const hasMarker = !!info.gutterMarkers && !!info.gutterMarkers['CodeMirror-markergutter'];
92+
ed.setGutterMarker(n, 'CodeMirror-markergutter', hasMarker ? null : this.makeMarker());
93+
});
94+
95+
/* Some browsers do something weird with the fieldset which doesn't
96+
work well with CodeMirror. Fix it. */
97+
if (this.parentNode.tagName.toLowerCase() === 'fieldset') {
98+
this.parentNode.style.minWidth = 0;
99+
}
100+
});
101+
102+
// Register Editor
103+
this.instance = window.CodeMirror.fromTextArea(this.element, this.options);
104+
Joomla.editors.instances[this.element.id] = this.instance;
105+
});
106+
});
107+
}
108+
109+
disconnectedCallback() {
110+
// Remove from the Joomla API
111+
delete Joomla.editors.instances[this.element.id];
112+
}
113+
114+
refresh(element) {
115+
this.instance = window.CodeMirror.fromTextArea(element, this.options);
116+
}
117+
118+
rafAsync() {
119+
return new Promise(resolve => {
120+
requestAnimationFrame(resolve);
121+
});
122+
}
123+
124+
async checkElement(string1, string2) {
125+
if (string2) {
126+
while (typeof window[string1][string2] !== 'function') {
127+
await this.rafAsync();
128+
}
129+
} else {
130+
while (typeof window[string1] !== 'function') {
131+
await this.rafAsync();
132+
}
133+
}
134+
135+
return true;
136+
}
137+
138+
toggleFullScreen() {
139+
this.instance.setOption('fullScreen', !this.instance.getOption('fullScreen'));
140+
}
141+
142+
closeFullScreen() {
143+
this.instance.getOption('fullScreen');
144+
this.instance.setOption('fullScreen', false);
145+
}
146+
147+
makeMarker() {
148+
const marker = document.createElement('div');
149+
marker.className = 'CodeMirror-markergutter-mark';
150+
return marker;
151+
}
150152
});

0 commit comments

Comments
 (0)