jslogger/example.html at master · danielbush/jslogger · 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 PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
/*
 * This file is part of Logger, a javascript-based logger.
 * Copyright (C) 2008-2010 Daniel Bush
 * This program is distributed under the terms of the GNU
 * General Public License.  A copy of the license should be
 * enclosed with this project in the file LICENSE.  If not
 * see <http://www.gnu.org/licenses/>.
 *
 */
-->

<head>
        <title>Logger usage - deferred example</title>
        <meta http-equiv="content-type"
              content="text/html;charset=utf-8" />
        <meta http-equiv="Content-Style-Type"
              content="text/css" />
<!--
        <link href="" rel="stylesheet"
              type="text/css"
              media="screen" />
-->
        <script type="text/javascript" src="pretty_print.js" ></script>
        <script type="text/javascript" src="Logger.js" ></script>
        <script type="text/javascript" >

        var Logger,frame,logger2,logger3,logger;

        function run() {
            Logger = $web17_com_au$.logger.Logger;
            frame = new Logger('log1',
                               {minimized:false,
                                width:'500px',
                                height:'300px',
                                wrap:true});
            logger2 = frame.add('log2');
            logger3 = frame.add('log3');
            logger = frame.logger;

            frame.logs.log2.log('entry for log2');

            logger2.log('entry for log2');

            logger.log('howdy!');
            logger.log('oh dear, document.body is '+document.body);

            logger.divider();
            logger.log('next entries show use of [] to pretty print objects');
            logger.log([1,2,3],{a:1,b:2});
            logger.log([[1,2,3]],[{a:1,b:2}]);

            logger.divider();
            logger.log('this array is ',[[1,2,3]],'!');
            logger.log('this obj is ',[{a:'foo',b:2}],'!');
            logger.log('these objects are ',[[1,2,'bar'],{a:'foo',b:2}],'!');

            logger.divider();
            logger.alert("error! ",[[1,2,'bar'],{a:'foo',b:2}]);
            logger.red("fail! ",[[1,2,'bar'],{a:'foo',b:2}]);
            logger.green("phew! ",[[1,2,'bar'],{a:'foo',b:2}]);
            logger.blue("relax! ",[[1,2,'bar'],{a:'foo',b:2}]);
            logger.yellow("happy! ",[[1,2,'bar'],{a:'foo',b:2}]);

            logger.divider();
            logger.makeLogFunction(
                'foo',
                {backgroundColor:'blue',color:'white',fontWeight:'bold'});
            logger.foo('new logging function! ',[[1,'foo',4]])
        }
        run();

        function init() {
            logger.log('document.body is now '+document.body);
        }
        </script>

        <style type="text/css" >
          * {
            margin:0;
            padding:0;
          }
          body {
              background-color:#eee;
          }
        </style>

</head>

<body onload="init();" >
        <h1>Logger usage - deferred example</h1>
        <p>This example shows that we can start using logger
           before the html document has loaded.</p>
           <input type="button"
                  onclick="logger.log('This is a log entry.');"
                  value="Create log entry" /><br/>
           <input type="button"
                  onclick="logger.log([[1,2,3]]);"
                  value="pp array" /><br/>
           <input type="button"
                  onclick="logger.log([{a:1,b:2,c:'foo',d:[1,2,3]}]);"
                  value="pp obj" /><br/>
           <input type="button"
                  onclick="logger.log([function(){var a='a';}]);"
                  value="pp func" /><br/>
           <input type="button"
                  onclick="frame.logs.log2.log('entry for log2');"
                  value="create entry in log2" /><br/>
           <input type="button"
                  onclick="frame.logs.log3.log('entry for log3');"
                  value="create entry in log3" /><br/>
</body>
</html>