1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
// JavaScript
/* jshint esversion:6, -W097 */
/* jslint esversion:6 */
/* global oGrammalecte, showError, window, document */
"use strict";
constructor (nMenu, xNode) {
this.xNode = xNode;
this.xButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_main_button", textContent: " "});
this.xButton.onclick = () => {
oGrammalecte.startGCPanel(this.xNode);
};
this.xButton.style.zIndex = (xNode.style.zIndex.search(/^[0-9]+$/) !== -1) ? (parseInt(xNode.style.zIndex) + 1).toString() : xNode.style.zIndex;
this.bShadow = document.body.createShadowRoot || document.body.attachShadow;
if (this.bShadow) {
this.xShadowBtn = oGrammalecte.createNode("div", {style: "display:none;position:absolute;width:0;height:0;"});
this.xShadowBtnNode = this.xShadowBtn.attachShadow({mode: "open"});
oGrammalecte.createStyle("content_scripts/menu.css", null, this.xShadowBtnNode);
this.xShadowBtnNode.appendChild(this.xButton);
this._insert(this.xShadowBtn);
} else {
this._insert(this.xButton);
}
this._listen();
}
_insert (xNewNode) {
// insertion
let xReferenceNode = this.xNode;
if (this.xNode.classList.contains('rich-editor')) {
xReferenceNode = this.xNode.parentNode;
}
xReferenceNode.parentNode.insertBefore(xNewNode, xReferenceNode.nextSibling);
// offset
let nNodeMarginBottom = parseInt(window.getComputedStyle(this.xNode).marginBottom.replace('px', ''), 10);
let nMarginTop = (this.bShadow) ? -1 * nNodeMarginBottom : -1 * (8 + nNodeMarginBottom);
xNewNode.style.marginTop = nMarginTop + "px";
}
_listen () {
this.xNode.addEventListener('focus', (e) => {
if (this.bShadow) {
this.xShadowBtn.style.display = "block";
}
this.xButton.style.display = "block";
});
/*this.xNode.addEventListener('blur', (e) => {
window.setTimeout(() => { this.xButton.style.display = "none"; }, 300);
});*/
}
deleteNodes () {
if (this.bShadow) {
this.xShadowBtn.parentNode.removeChild(this.xShadowBtn);
} else {
this.xButton.parentNode.removeChild(this.xButton);
}
}
}
|
<
|
|
|
>
|
>
>
>
>
>
>
>
>
>
>
>
>
>
|
>
>
>
>
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
|
|
>
|
|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
// JavaScript
/* jshint esversion:6, -W097 */
/* jslint esversion:6 */
/* global oGrammalecte, showError, window, document */
"use strict";
class GrammalecteButton {
constructor () {
// the pearl button
this.xButton = oGrammalecte.createNode("div", { className: "grammalecte_menu_main_button", textContent: " " });
this.xButton.onclick = () => {
if (this.xTextNode) {
oGrammalecte.startGCPanel(this.xTextNode);
}
};
// about the text node
this.xTextNode = null;
// read user config
this._bTextArea = true;
this._bEditableNode = true;
this._bIframe = false;
if (bChrome) {
browser.storage.local.get("ui_options", this.setOptions.bind(this));
} else {
browser.storage.local.get("ui_options").then(this.setOptions.bind(this), showError);
}
}
setOptions (oOptions) {
if (oOptions.hasOwnProperty("ui_options")) {
this._bTextArea = oOptions.ui_options.textarea;
this._bEditableNode = oOptions.ui_options.editablenode;
}
}
examineNode (xNode) {
if (xNode && xNode instanceof HTMLElement
&& ( ((xNode.tagName == "TEXTAREA" || xNode.tagName == "INPUT") && this._bTextArea && xNode.getAttribute("spellcheck") !== "false")
|| (xNode.isContentEditable && this._bEditableNode)
|| (xNode.tagName == "IFRAME" && this._bIframe) )
&& xNode.style.display !== "none" && xNode.style.visibility !== "hidden"
&& !(xNode.dataset.grammalecte_button && xNode.dataset.grammalecte_button == "false")) {
this.xTextNode = xNode;
this.show()
}
else {
this.xTextNode = null;
this.hide();
}
}
show () {
if (this.xTextNode) {
this.xButton.style.display = "none"; // we hide it before showing it again to relaunch the animation
let oCoord = oGrammalecte.getElementCoord(this.xTextNode);
//console.log("top:", oCoord.left, "bottom:", oCoord.top, "left:", oCoord.bottom, "right:", oCoord.right);
this.xButton.style.top = `${oCoord.bottom}px`;
this.xButton.style.left = `${oCoord.left}px`;
this.xButton.style.display = "block";
}
}
hide () {
this.xButton.style.display = "none";
}
insertIntoPage () {
this.bShadow = document.body.createShadowRoot || document.body.attachShadow;
if (this.bShadow) {
this.xShadowBtn = oGrammalecte.createNode("div", { style: "display:none; position:absolute; width:0; height:0;" });
this.xShadowBtnNode = this.xShadowBtn.attachShadow({ mode: "open" });
oGrammalecte.createStyle("content_scripts/menu.css", null, this.xShadowBtnNode);
this.xShadowBtnNode.appendChild(this.xButton);
document.body.appendChild(this.xShadowBtnNode);
}
else {
if (!document.getElementById("grammalecte_cssmenu")) {
oGrammalecte.createStyle("content_scripts/menu.css", "grammalecte_cssmenu", document.head);
}
document.body.appendChild(this.xButton);
}
}
}
|