Grammalecte  Check-in [eb18e7fd4b]

Overview
Comment:[fx] position and size of panels
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | fx
Files: files | file ages | folders
SHA3-256: eb18e7fd4bf0d88822bf86e4833a2c266181ddfe4013ffc984b00021d02c38ac
User & Date: olr on 2019-05-15 16:12:22
Other Links: manifest | tags
Context
2019-05-15
19:11
[fr] nr da: le/la/l’/les check-in: fbf99ca531 user: olr tags: trunk, fr
16:12
[fx] position and size of panels check-in: eb18e7fd4b user: olr tags: trunk, fx
11:55
[graphspell][core][fr] code cleaning (pylint) check-in: c65b7e2b8b user: olr tags: trunk, fr, core, graphspell
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Modified gc_lang/fr/webext/content_scripts/init.js from [66d1a87b27] to [b3b4072034].

︙︙
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

            this.oTFPanel = new GrammalecteTextFormatter("grammalecte_tf_panel", "Formateur de texte", 760, 595, false);
            this.oTFPanel.insertIntoPage();
        }
    },

    createGCPanel: function () {
        if (this.oGCPanel === null) {
            this.oGCPanel = new GrammalecteGrammarChecker("grammalecte_gc_panel", "Grammalecte", 540, 700);
            this.oGCPanel.insertIntoPage();
        }
    },

    createMessageBox: function () {
        if (this.oMessageBox === null) {
            this.oMessageBox = new GrammalecteMessageBox("grammalecte_message_box", "Grammalecte");








|








142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

            this.oTFPanel = new GrammalecteTextFormatter("grammalecte_tf_panel", "Formateur de texte", 760, 595, false);
            this.oTFPanel.insertIntoPage();
        }
    },

    createGCPanel: function () {
        if (this.oGCPanel === null) {
            this.oGCPanel = new GrammalecteGrammarChecker("grammalecte_gc_panel", "Grammalecte", 540, 950);
            this.oGCPanel.insertIntoPage();
        }
    },

    createMessageBox: function () {
        if (this.oMessageBox === null) {
            this.oMessageBox = new GrammalecteMessageBox("grammalecte_message_box", "Grammalecte");
︙︙

Modified gc_lang/fr/webext/content_scripts/panel.js from [22a401fc27] to [8e0ee87553].

︙︙
11
12
13
14
15
16
17




18
19
20
21
22
23
24

class GrammalectePanel {

    constructor (sId, sTitle, nWidth, nHeight, bFlexible=true) {
        this.sId = sId;
        this.nWidth = nWidth;
        this.nHeight = nHeight;
        this.bFlexible = bFlexible;




        this.bWorking = false;

        this.bShadow = document.body.createShadowRoot || document.body.attachShadow;
        if (this.bShadow) {
            this.xShadowPanel = oGrammalecte.createNode("div", {id: this.sId+"_shadow", style: "width:0;height:0;"});
            this.xShadow = this.xShadowPanel.attachShadow({mode: "open"});
            this.xParent = this.xShadow;








>
>
>
>








11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

class GrammalectePanel {

    constructor (sId, sTitle, nWidth, nHeight, bFlexible=true) {
        this.sId = sId;
        this.nWidth = nWidth;
        this.nHeight = nHeight;
        this.bFlexible = bFlexible;
        this.bHorizStrech = false;
        this.bVertStrech = false;
        this.nPositionX = 2;
        this.nPositionY = 2;
        this.bWorking = false;

        this.bShadow = document.body.createShadowRoot || document.body.attachShadow;
        if (this.bShadow) {
            this.xShadowPanel = oGrammalecte.createNode("div", {id: this.sId+"_shadow", style: "width:0;height:0;"});
            this.xShadow = this.xShadowPanel.attachShadow({mode: "open"});
            this.xParent = this.xShadow;
︙︙
62
63
64
65
66
67
68




69
70
71
72
73
74
75
76
77
78
79
80


    _createButtons () {
        let xButtonLine = oGrammalecte.createNode("div", {className: "grammalecte_panel_commands"});
        xButtonLine.appendChild(this.xWaitIcon);
        if (this.sId === "grammalecte_gc_panel") {
            xButtonLine.appendChild(this._createCopyButton());
        }




        xButtonLine.appendChild(this._createMoveButton("stickToTop", "⏶", "Coller en haut"));
        xButtonLine.appendChild(this._createMoveButton("stickToLeft", "⏴", "Coller à gauche"));
        xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer"));
        xButtonLine.appendChild(this._createMoveButton("stickToRight", "⏵", "Coller à droite"));
        xButtonLine.appendChild(this._createMoveButton("stickToBottom", "⏷", "Coller en bas"));
        this.xCloseButton = this._createCloseButton();
        xButtonLine.appendChild(this.xCloseButton);
        return xButtonLine;
    }

    _createWaitIcon () {
        let xWaitIcon = oGrammalecte.createNode("div", {className: "grammalecte_spinner"});








>
>
>
>
|
|

|
|








66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88


    _createButtons () {
        let xButtonLine = oGrammalecte.createNode("div", {className: "grammalecte_panel_commands"});
        xButtonLine.appendChild(this.xWaitIcon);
        if (this.sId === "grammalecte_gc_panel") {
            xButtonLine.appendChild(this._createCopyButton());
        }
        if (this.bFlexible) {
            xButtonLine.appendChild(this._createMoveButton("changeWidth", "⭾", "Bascule la largeur"));
            xButtonLine.appendChild(this._createMoveButton("changeHeight", "⭿", "Bascule la hauteur"));
        }
        xButtonLine.appendChild(this._createMoveButton("up", "⏶", "Monter"));
        xButtonLine.appendChild(this._createMoveButton("left", "⏴", "À gauche"));
        xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer"));
        xButtonLine.appendChild(this._createMoveButton("right", "⏵", "À droite"));
        xButtonLine.appendChild(this._createMoveButton("down", "⏷", "Descendre"));
        this.xCloseButton = this._createCloseButton();
        xButtonLine.appendChild(this.xCloseButton);
        return xButtonLine;
    }

    _createWaitIcon () {
        let xWaitIcon = oGrammalecte.createNode("div", {className: "grammalecte_spinner"});
︙︙
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150



151


152
153
154
155



156




157


158
159
160
161

162




163
164
165
166
167
168
169














170
171
172
173
174
175
176
177
178
179
180
181
182

    }

    hide () {
        this.xPanel.style.display = "none";
    }

    center () {
        let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
        this.setSizeAndPosition(`${this.nWidth}px`, `${nHeight}px`, "50%", "", "", "50%", `-${nHeight/2}px`, `-${this.nWidth/2}px`);
    }

    stickToLeft () {
        let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
        this.setSizeAndPosition(`${this.nWidth}px`, `${nHeight}px`, "50%", "", "", "-2px", `-${nHeight/2}px`, "");
    }

    stickToRight () {



        let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;


        this.setSizeAndPosition(`${this.nWidth}px`, `${nHeight}px`, "50%", "-2px", "", "", `-${nHeight/2}px`, "");
    }

    stickToTop () {



        let nWidth = (this.bFlexible) ? Math.floor(window.innerWidth/2) : this.nWidth;




        let nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight;


        this.setSizeAndPosition(`${nWidth}px`, `${nHeight}px`, "-2px", "", "", "50%", "", `-${nWidth/2}px`);
    }

    stickToBottom () {

        let nWidth = (this.bFlexible) ? Math.floor(window.innerWidth/2) : this.nWidth;




        let nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight;
        this.setSizeAndPosition(`${nWidth}px`, `${nHeight}px`, "", "", "-2px", "50%", "", `-${nWidth/2}px`);
    }

    setSizeAndPosition (sWidth, sHeight, sTop, sRight, sBottom, sLeft, sMarginTop, sMarginLeft) {
        this.xPanel.style.width = sWidth;
        this.xPanel.style.height = sHeight;














        this.xPanel.style.top = sTop;
        this.xPanel.style.right = sRight;
        this.xPanel.style.bottom = sBottom;
        this.xPanel.style.left = sLeft;
        this.xPanel.style.marginTop = sMarginTop;
        this.xPanel.style.marginLeft = sMarginLeft;
    }

    reduce () {
        // todo
    }

    getWidth () {








|
|


|
|
|


|
>
>
>
|
>
>
|


|
>
>
>
|
>
>
>
>
|
>
>
|


|
>
|
>
>
>
>
|
<
|
<
<
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
|
|
|
|
|








142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

191


192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220

    }

    hide () {
        this.xPanel.style.display = "none";
    }

    center () {
        this.nPosition = 5;
        this.setSizeAndPosition();
    }

    left () {
        if (![1, 4, 7].includes(this.nPosition)) { this.nPosition -= 1 };
        this.setSizeAndPosition();
    }

    right () {
        if (![3, 6, 9].includes(this.nPosition)) { this.nPosition += 1 };
        this.setSizeAndPosition();
    }

    up () {
        if (![7, 8, 9].includes(this.nPosition)) { this.nPosition += 3 };
        this.setSizeAndPosition();
    }

    down () {
        if (![1, 2, 3].includes(this.nPosition)) { this.nPosition -= 3 };
        this.setSizeAndPosition();
    }

    changeWidth () {
        this.bHorizStrech = !this.bHorizStrech;
        this.setSizeAndPosition();
    }

    changeHeight () {
        this.bVertStrech = !this.bVertStrech;
        this.setSizeAndPosition();
    }

    setSizeAndPosition () {
        // size
        let nWidth = (this.bFlexible && this.bHorizStrech) ? Math.min(this.nWidth*1.5, window.innerWidth-200) : Math.min(this.nWidth, window.innerWidth-200);
        let nHeight = this.nHeight;
        if ([4, 5, 6].includes(this.nPosition)) {
            nHeight = (this.bFlexible && this.bVertStrech) ? (window.innerHeight-100) : Math.min(window.innerHeight-100, this.nHeight);
        } else {
            nHeight = (this.bFlexible) ? Math.floor(window.innerHeight*0.45) : this.nHeight;

        }


        this.xPanel.style.width = `${nWidth}px`;
        this.xPanel.style.height = `${nHeight}px`;
        // position
        let oPos = null;
        switch (this.nPosition) {
            case 1: oPos = { top:"",     right:"",     bottom:"-2px", left:"-2px", marginTop:"",                marginLeft:"" }; break;
            case 2: oPos = { top:"",     right:"",     bottom:"-2px", left:"50%",  marginTop:"",                marginLeft:`-${nWidth/2}px` }; break;
            case 3: oPos = { top:"",     right:"-2px", bottom:"-2px", left:"",     marginTop:"",                marginLeft:"" }; break;
            case 4: oPos = { top:"50%",  right:"",     bottom:"",     left:"-2px", marginTop:`-${nHeight/2}px`, marginLeft:"" }; break;
            case 5: oPos = { top:"50%",  right:"",     bottom:"",     left:"50%",  marginTop:`-${nHeight/2}px`, marginLeft:`-${nWidth/2}px` }; break;
            case 6: oPos = { top:"50%",  right:"-2px", bottom:"",     left:"",     marginTop:`-${nHeight/2}px`, marginLeft:"" }; break;
            case 7: oPos = { top:"-2px", right:"",     bottom:"",     left:"-2px", marginTop:"",                marginLeft:"" }; break;
            case 8: oPos = { top:"-2px", right:"",     bottom:"",     left:"50%",  marginTop:"",                marginLeft:`-${nWidth/2}px` }; break;
            case 9: oPos = { top:"-2px", right:"-2px", bottom:"",     left:"",     marginTop:"",                marginLeft:"" }; break;
        }
        // change
        this.xPanel.style.top = oPos.top;
        this.xPanel.style.right = oPos.right;
        this.xPanel.style.bottom = oPos.bottom;
        this.xPanel.style.left = oPos.left;
        this.xPanel.style.marginTop = oPos.marginTop;
        this.xPanel.style.marginLeft = oPos.marginLeft;
    }

    reduce () {
        // todo
    }

    getWidth () {
︙︙

Fossil 2.24 [8be0372c10] 2024-04-23 13:25:26
This page was generated in about 0.005s