Grammalecte  Check-in [a974df14bb]

Overview
Comment:[fx] panels ui improvement + image inline
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | webext2
Files: files | file ages | folders
SHA3-256: a974df14bb1e1c5773ebb67d015c758b6696397d2ff7b407953b8061094c042c
User & Date: olr on 2017-08-12 12:04:19
Other Links: branch diff | manifest | tags
Context
2017-08-12
14:53
[fx] we can inject CSS in content-scripts -> drop inline style check-in: 94fe285315 user: olr tags: fx, webext2
12:04
[fx] panels ui improvement + image inline check-in: a974df14bb user: olr tags: fx, webext2
09:51
[fx] panels ui (draft) check-in: e0f8e36d5a user: olr tags: fx, webext2
Changes
Hide Diffs Side-by-Side Diffs Ignore Whitespace Patch

Modified gc_lang/fr/webext/content_scripts/modify_page.js from [e3f8378c10] to [4865d913a8].

︙
39
40
41
42
43
44
45
46

47
48
49
50
51
52
53

39
40
41
42
43
44
45

46
47
48
49
50
51
52
53








-
+








        xWrapper.style = "padding: 5px; color: hsl(210, 10%, 90%); background-color: hsl(210, 50%, 50%); border-radius: 3px;";
        xWrapper.id = nWrapper + 1;
        nWrapper += 1;
        xParentElement.insertBefore(xWrapper, xTextArea);
        xWrapper.appendChild(xTextArea); // move textarea in wrapper
        let xToolbar = createWrapperToolbar(xTextArea);
        xWrapper.appendChild(xToolbar);
        loadImage("GrammalecteTitle", "img/logo-16.png");
        //loadImage("GrammalecteTitle", "img/logo-16.png");
    }
    catch (e) {
        showError(e);
    }
}

let sButtonStyle = "display: inline-block; padding: 0 5px; margin-left: 5px; background-color: hsl(210, 50%, 60%); border-radius: 2px; cursor: pointer;";
︙
114
115
116
117
118
119
120
121
122

123
124
125
126
127
128
129

114
115
116
117
118
119
120

121
122
123
124
125
126
127
128
129








-

+








function createTFPanel (xTextArea) {
    console.log("Formateur de texte");
    if (xTFPanel !== null) {
        xTFPanel.style.display = "block";
    } else {
        // create the panel
        xTFPanel = createPanelFrame("tf_panel", "Formateur de texte", 800, 500);
        xTFPanel.appendChild(createTextFormatter(xTextArea));
        document.body.appendChild(xTFPanel);
        document.getElementById("tf_panel_content").appendChild(createTextFormatter(xTextArea));
    }
}

function createLxgPanel (xTextArea) {
    console.log("Lexicographe");
    if (xLxgPanel !== null) {
        xLxgPanel.style.display = "block";
︙
137
138
139
140
141
142
143
144
145

146
147
148
149
150
151
152

137
138
139
140
141
142
143

144
145
146
147
148
149
150
151
152








-

+








function createGCPanel (oErrors) {
    console.log("Correction grammaticale");
    if (xGCPanel !== null) {
        xGCPanel.style.display = "block";
    } else {
        // create the panel
        xGCPanel = createPanelFrame("gc_panel", "Correcteur", 400, 800);
        xGCPanel.appendChild(document.createTextNode(JSON.stringify(oErrors)));
        document.body.appendChild(xGCPanel);
        document.getElementById("gc_panel_content").appendChild(document.createTextNode(JSON.stringify(oErrors)));
    }
}


/*
    Simple message
*/
︙

Modified gc_lang/fr/webext/content_scripts/panel_creator.js from [ef4b06b969] to [16b43963ab]. 

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

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











-
+
+




+
+
+
-
+

-
+
+








// JavaScript
// Panel creator

"use strict";


function createPanelFrame (sId, sTitle, nWidth, nHeight) {
    try {
        let xPanel = document.createElement("div");
        xPanel.style = "position: fixed; left: 50%; top: 50%; z-index: 100; border-radius: 10px;"
                     + "color: hsl(210, 10%, 4%); background-color: hsl(210, 20%, 90%); border: 10px solid hsla(210, 20%, 70%, .5); overflow: auto;"
                     + "color: hsl(210, 10%, 4%); background-color: hsl(210, 20%, 90%); border: 10px solid hsla(210, 20%, 70%, .5);"
                     + 'font-family: "Trebuchet MS", "Liberation Sans", sans-serif;'
                     + getPanelSize(nWidth, nHeight);
        let xBar = document.createElement("div");
        xBar.style = "position: fixed; width: "+nWidth+"px ; background-color: hsl(210, 0%, 100%); border-bottom: 1px solid hsl(210, 10%, 50%); font-size: 20px;";
        xBar.appendChild(createCloseButton(xPanel));
        let xTitle = createDiv(sId+"_title", "", "", "padding: 10px 20px;");
        xTitle.appendChild(createLogo());
        xTitle.appendChild(createDiv(sId+"_label", "Grammalecte · " + sTitle, "", "display: inline-block; padding: 0 10px;"));
        xBar.appendChild(createDiv(sId+"_title", "Grammalecte · " + sTitle));
        xBar.appendChild(xTitle);
        xPanel.appendChild(xBar);
        xPanel.appendChild(createDiv(sId+"_empty_space", "", "", "height: 40px;")); // empty space to fill behind the title bar
        xPanel.appendChild(createDiv(sId+"_empty_space", "", "", "height: 50px;")); // empty space to fill behind the title bar
        xPanel.appendChild(createDiv(sId+"_content", "", "", "overflow: auto;"));
        return xPanel;
    }
    catch (e) {
        showError(e);
    }
}
︙
64
65
66
67
68
69
70






71
72
73
74
75
76
77
78
79

80
81
82
83

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

90
91
92
93
94








+
+
+
+
+
+








-
+






function createLabel (sForId, sLabel, sClass="") {
    let xLabel = document.createElement("label");
    xLabel.setAttribute("for", sForId);
    xLabel.textContent = sLabel;
    return xLabel;
}

function createLogo () {
    let xImg = document.createElement("img");
    xImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAC8UlEQVQ4jX3TbUgTcRwH8P89ddu5u9tt082aZmpFEU4tFz0QGTUwCi0heniR9MSUIKRaD0RvIlKigsooo+iNFa0XJYuwIjEK19OcDtPElsG0ktyp591t7u7+vUh7MPX3+vf5/n8/+P0BmKJIPUUVlh2rdVVeesWlzEybqg+bFOsoylnqPmNavGFfknV2Omu2Lvja3vxAURKJib3opHizu8riLK6gjRyuKgmoSoMRFENRUqfXTzvBGK62LC2uoFkOl4RhjQ8+qWt7dPNE3sbdp+2LXbsGe9qb4rIo/BfwFy6nWQ4ThWGNDzbcfu29dMDh2nHU7CypYNLmzTda0/L5cNuzmDQi/A4Y27k6eQxLI79wS/11D0AAMNvs6XT6ojVJjJEgTbMy2BT77xBMp09KcpaWV1uc41jQoi0NdUHfjeOO9WWn7AVF7s7n986SithPJGeupBh2PCSP/xxqxAp3eq6wuUV7Wc6MSZIEhA8vHjbfOe/OcW3zmAuKy+nUzAyD2bow8ODaEROFq8AyZ5WBYdEZXGqGxZ61HJV+9HYCJRbTNA0QBA40HWunaKN5dKg/DBKxeCIe09Th/m4MJwiMSZmLEzMQAABQRuNqgu8NYX3doTcMpvCkLbtQZ2AJkrPOZG1zlnY13T+Hy9EehY90h57eqcorcZ/lctZuMzAsOjLEqwNv66/6vZcPYRBC+C3cGaBxhSet2av1BpYgTTY7k5y2JPT41slIR6Axv8R9nnOs+4Pf+2r992uOxGVJwgAAAEINfgt3BGgsESWtWas1iGDyl+CT/u7WpvxNFRc4x7qtBoZFhSFejb7z1fq9NYfjsiT+cwcQavBruCOgU4SIGo18amuoq3Js3FNlynVtH385+s53ze+t8cRkURx3yMTTRBAEQVAUXbFlf3XystJKA2NExeFBdWASDAAA+MQACCEEmqbJ0b6PMC7JwhDU8YFHV5u9NZ64LErT/oW/63tPV6uJwmKoOND78u7Fg5NhAAD4CVbzY9cwrWQrAAAAAElFTkSuQmCC";
    return xImg;
}

function loadImage (sContainerClass, sImagePath) {
    let xRequest = new XMLHttpRequest();
    xRequest.open('GET', browser.extension.getURL("")+sImagePath, false);
    xRequest.responseType = "arraybuffer";
    xRequest.send();
    let blobTxt = new Blob([xRequest.response], {type: 'image/png'});
    let img = document.createElement('img');
    img.src = (URL || webkitURL).createObjectURL(blobTxt);
    img.src = (URL || webkitURL).createObjectURL(blobTxt); // webkitURL is obsolete: https://bugs.webkit.org/show_bug.cgi?id=167518
    Array.filter(document.getElementsByClassName(sContainerClass), function (oElem) {
        oElem.appendChild(img);
    });
}

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