basic.js/01-basic-js-by-example/04-label.htm at main · bug7a/basic.js · GitHub

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
    <head>

        <title>Label</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- LIBRARY FILES: basic.css and basic.js come first, your own code after them -->
        <link rel="preload" href="../basic/font/open-sans/OpenSans-Regular.ttf" as="font" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="../basic/basic.css">
        <script src="../basic/basic.js" type="text/javascript" charset="utf-8"></script>

        <script>

        /*

        LABEL

        A Label shows a text. Its props set the letters, the background and the place of the text.

        - Label(left, top, width, height, props)
                                    -> a text at a place on the page (in px, from the top left corner).
                                       width "auto": as wide as its text. A number: a longer text goes on
                                       to the next line.
        - text                      -> the text. It is HTML: <b>, <i> and <br> work in it.
        - plainText                 -> the text exactly as it is. Use it for a text the user typed.
        - fontSize, bold, textColor, textAlign, lineHeight
                                    -> the letters.
        - color, padding, round     -> the background, the space around the text and the round corners.
        - ellipsis: 1               -> one line: the end that does not fit becomes "...".
        - left, top, right, bottom  -> the place can be in the props too. bottom: 20 is 20 px above the
                                       bottom of the page.

        TRY: make the paragraph narrower (its width), or delete ellipsis: 1 and look at the long line.

        */

        // *** VARIABLES:

        const LEFT = 40;
        const TEXT_SIZE = 16;

        // *** START:

        const start = function () {

            page.color = "white";

            // LABEL: A title: big and bold
            Label(LEFT, 30, "auto", "auto", {
                text: "Label",
                fontSize: 32,
                bold: 1,
            });

            // LABEL: A paragraph: its width is a number, so the text goes on to the next lines
            Label(LEFT, 90, 300, "auto", {
                text: "A label shows a text. When the text is longer than the width, it goes on to the next line.",
                fontSize: TEXT_SIZE,
                lineHeight: 24,             // the height of one line (px)
                textColor: Black(0.6),      // Black(0.6): black at 60%
            });

            // LABEL: text is HTML: the tags change the look of the words
            Label(LEFT, 180, "auto", "auto", {
                text: "The text can have <b>bold</b> and <i>italic</i> words.",
                fontSize: TEXT_SIZE,
            });

            // LABEL: plainText shows the tags as they are
            Label(LEFT, 215, "auto", "auto", {
                plainText: "With plainText, <b> is not a tag.",
                fontSize: TEXT_SIZE,
            });

            // LABEL: One line: the end of the text that does not fit becomes "..."
            Label(LEFT, 250, 240, "auto", {
                text: "This line is too long for the width of its label.",
                fontSize: TEXT_SIZE,
                ellipsis: 1,
            });

            // LABEL: A tag: a background color, the space around the text and round corners
            Label(LEFT, 295, "auto", "auto", {
                text: "NEW",
                fontSize: 13,
                bold: 1,
                textColor: "white",
                color: "orangered",
                padding: [10, 3],           // [left and right, top and bottom]
                round: 4,
            });

            // LABEL: At the bottom of the page, as wide as the page
            Label({
                left: 0,
                bottom: 20,
                width: "100%",
                text: "This label is 20 px above the bottom of the page.",
                fontSize: TEXT_SIZE,
                textAlign: "center",
                textColor: Black(0.6),
                color: "gold",
                padding: [0, 10],
            });

        };

        </script>

    </head>
    <body>
    </body>
</html>