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
|
// 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);"
+ '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(xTitle);
xPanel.appendChild(xBar);
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);
}
}
function getPanelSize (nWidth, nHeight) {
let s = "width: "+ nWidth.toString() + "px; height: " + nHeight.toString() + "px;";
s += "margin-top: -" + (nHeight/2).toString() + "px; margin-left: -" + (nWidth/2).toString() + "px;";
return s;
}
xButton.style = "float: right; padding: 2px 10px; color: hsl(210, 0%, 100%); text-align: center;"
+ "font-size: 22px; font-weight: bold; background-color: hsl(0, 80%, 50%); border-radius: 0 0 0 3px; cursor: pointer;";
xButton.textContent = "×";
xButton.onclick = function () {
xParentNode.style.display = "none";
}
return xButton;
}
/*
Common functions
*/
function createDiv (sId, sContent, sClass="", sStyle="") {
let xDiv = document.createElement("div");
xDiv.id = sId;
xDiv.className = sClass;
xDiv.style = sStyle;
xDiv.textContent = sContent;
return xDiv;
}
function createCheckbox (sId, bDefault, sClass="") {
let xInput = document.createElement("input");
xInput.type = "checkbox";
xInput.id = sId;
xInput.className = sClass;
|
|
|
<
<
<
<
|
<
|
|
|
|
<
<
<
<
<
<
|
<
|
>
|
<
|
<
<
|
>
>
>
>
|
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
|
// JavaScript
// Panel creator
"use strict";
function createPanelFrame (sId, sTitle) {
try {
let xPanel = createNode("div", {id: sId, className: "grammalecte_panel"});
let xBar = createNode("div", {className: "grammalecte_title_bar"});
xBar.appendChild(createCloseButton(xPanel));
let xTitle = createNode("div", {className: "grammalecte_title"});
xTitle.appendChild(createLogo());
xTitle.appendChild(createNode("div", {className: "grammalecte_label", textContent: "Grammalecte · " + sTitle}));
xBar.appendChild(xTitle);
xPanel.appendChild(xBar);
//xPanel.appendChild(createNode("div", {className: "grammalecte_empty_space_under_title_bar"}));
xPanel.appendChild(createNode("div", {id: sId+"_content", className: "grammalecte_panel_content"}));
return xPanel;
}
catch (e) {
showError(e);
}
}
function createCloseButton (xParentNode) {
let xButton = document.createElement("div");
xButton.className = "grammalecte_close_button";
xButton.textContent = "×";
xButton.onclick = function () {
xParentNode.style.display = "none";
}
return xButton;
}
/*
Common functions
*/
function createNode (sType, oAttr) {
try {
let xNode = document.createElement(sType);
Object.assign(xNode, oAttr);
return xNode;
}
catch (e) {
showError(e);
}
}
function createCheckbox (sId, bDefault, sClass="") {
let xInput = document.createElement("input");
xInput.type = "checkbox";
xInput.id = sId;
xInput.className = sClass;
|