Grammalecte  Check-in [30498d19e4]

Overview
Comment:[fx] Use shadow for bouton and menu
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | shadowdom
Files: files | file ages | folders
SHA3-256: 30498d19e40c15274a7a2a0c4189770545042a10cf1526b9620599cc6bbd7cb0
User & Date: IllusionPerdu on 2018-10-19 15:48:07
Other Links: branch diff | manifest | tags
Context
2018-10-19
16:36
[fx] Fix auto-ajust height of TextFormateur check-in: cea1ffe126 user: IllusionPerdu tags: fx, shadowdom
15:48
[fx] Use shadow for bouton and menu check-in: 30498d19e4 user: IllusionPerdu tags: fx, shadowdom
15:07
[fx] We can expose the css in webpage check-in: 3da397c601 user: IllusionPerdu tags: fx, shadowdom
Changes
Hide Diffs Side-by-Side Diffs Ignore Whitespace Patch

Modified gc_lang/fr/webext/content_scripts/menu.css from [ccd6be088e] to [b015cf663a].

︙
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

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








+
+
+
+
+












+








    }
}


/*
    Menu
*/
div.grammalecte_abs {
    display: none;
    position: absolute;
}

div.grammalecte_menu {
    all: initial;
    display: none;
    position: absolute;
    margin-left: -10px;
    border-radius: 5px;
    border: 3px solid hsl(210, 50%, 30%);
    box-shadow: 0px 0px 2px hsla(210, 10%, 10%, .5);
    background-color: hsl(210, 50%, 30%);
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    z-index: 2147483640; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
    text-align: left;
    width: 220px;
}

@media print {
    .grammalecte_menu { display: none; }
}

div.grammalecte_menu > div {
︙

Modified gc_lang/fr/webext/content_scripts/menu.js from [18300b18f9] to [0e7a0e2ea5]. 

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

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
87



+
+
+
+








+













+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+










+
+
+
















+
+
+








// JavaScript

/* jshint esversion:6, -W097 */
/* jslint esversion:6 */
/* global oGrammalecte, xGrammalectePort, showError, window, document */

"use strict";


class GrammalecteMenu {

    constructor (nMenu, xNode) {
        this.xNode = xNode;
        this.sMenuId = "grammalecte_menu" + nMenu;
        this.bShadow = document.body.createShadowRoot || document.body.attachShadow;
        this.xButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_main_button", textContent: " "});
        this.xButton.onclick = () => { this.switchMenu(); };
        this.xButton.style.zIndex = (xNode.style.zIndex.search(/^[0-9]+$/) !== -1) ? (parseInt(xNode.style.zIndex) + 1).toString() : xNode.style.zIndex;
        this.xMenu = this._createMenu();

        let xStyle = window.getComputedStyle(this.xNode);
        let nMarginTop = -1 * (8 + parseInt(xStyle.marginBottom.replace('px', ''), 10));

        let xNodeInsertAfter = this.xNode;
        if (document.location.host == "twitter.com" && this.xNode.classList.contains('rich-editor')) {
            xNodeInsertAfter = this.xNode.parentNode;
        }

        if (this.bShadow){
            this.oShadowBtn = oGrammalecte.createNode("div", {className: "grammalecte_abs", style: "width:16px;height:16px;"});
            this.oShadowBtnNode = this.oShadowBtn.attachShadow({mode: "open"});
            this.oShadowBtnNode.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/menu.css"})
            );
            this.oShadowBtnNode.appendChild(this.xButton);
            this._insertAfter(this.oShadowBtn, xNodeInsertAfter, nMarginTop);

            this.oShadowMenu = oGrammalecte.createNode("div", {id: this.sMenuId+"_shadow", className: "grammalecte_abs", style: "width:0;height:0;"});
            this.oShadowMenuNode = this.oShadowMenu.attachShadow({mode: "open"});
            this.oShadowMenuNode.appendChild(
                oGrammalecte.createNode("link", {rel: "stylesheet", type: "text/css", media: "all", href: oGrammalecte.sExtensionUrl + "content_scripts/menu.css"})
            );
            this.oShadowMenuNode.appendChild(this.xMenu);
            this._insertAfter(this.oShadowMenu, xNodeInsertAfter, nMarginTop + 8);
        } else {
        this._insertAfter(this.xButton, xNodeInsertAfter, nMarginTop);
        this._insertAfter(this.xMenu, xNodeInsertAfter, nMarginTop + 8);
            this._insertAfter(this.xButton, xNodeInsertAfter, nMarginTop);
            this._insertAfter(this.xMenu, xNodeInsertAfter, nMarginTop + 8);
        }
        this._createListeners();
    }

    _insertAfter (xNewNode, xReferenceNode, nMarginTop) {
        xReferenceNode.parentNode.insertBefore(xNewNode, xReferenceNode.nextSibling);
        xNewNode.style.marginTop = nMarginTop + "px";
    }

    _createListeners () {
        this.xNode.addEventListener('focus', (e) => {
            if (this.bShadow){
                this.oShadowBtn.style.display = "block";
            }
            this.xButton.style.display = "block";
        });
        /*this.xNode.addEventListener('blur', (e) => {
            window.setTimeout(() => {this.xButton.style.display = "none";}, 300);
        });*/
    }

    _getText () {
        return (this.xNode.tagName == "TEXTAREA") ? this.xNode.value.normalize("NFC") : this.xNode.innerText.normalize("NFC");
    }

    _createMenu () {
        try {
            let xMenu = oGrammalecte.createNode("div", {id: this.sMenuId, className: "grammalecte_menu"});
            let xCloseButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_close_button", textContent: "×"} );
            xCloseButton.onclick = () => {
                if (this.bShadow){
                    this.oShadowBtn.style.display = "none";
                }
                this.xButton.style.display = "none";
                this.switchMenu();
            }
            xMenu.appendChild(xCloseButton);
            xMenu.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_menu_header", textContent: "GRAMMALECTE"}));
            // Text formatter
            if (this.xNode.tagName == "TEXTAREA") {
︙
111
112
113
114
115
116
117




118
119



120
121
122



123
124
125

140
141
142
143
144
145
146
147
148
149
150


151
152
153
154
155
156
157
158
159
160
161
162








+
+
+
+
-
-
+
+
+



+
+
+




        }
        catch (e) {
            showError(e);
        }
    }

    deleteNodes () {
        if (this.bShadow){
            this.oShadowMenu.parentNode.removeChild(this.oShadowMenu);
            this.oShadowBtn.parentNode.removeChild(this.oShadowBtn);
        } else {
        this.xMenu.parentNode.removeChild(this.xMenu);
        this.xButton.parentNode.removeChild(this.xButton);
            this.xMenu.parentNode.removeChild(this.xMenu);
            this.xButton.parentNode.removeChild(this.xButton);
        }
    }

    switchMenu () {
        if (this.bShadow){
            this.oShadowMenu.style.display = (this.oShadowMenu.style.display == "block") ? "none" : "block";
        }
        this.xMenu.style.display = (this.xMenu.style.display == "block") ? "none" : "block";
    }
}

Fossil 2.20 [210e89a059] 2022-11-16 18:46:32
This page was generated in about 0.005s