ConditionalConsole/examples.html at master · BirkAndMe/ConditionalConsole · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

    <!-- Highlight.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>

    <!-- Include conditional console -->
    <script src="conditionalConsole.js"></script>

  </head>
  <body>

    <div class="container">

      <!-- Intro -->
      <h1>Introduction</h1>
      <p>A very simple use of the <code>and()</code> function.</p>

      <div class="alert alert-info" role="alert">Output is in your console.</div>
<script data-example>
console.log('-- Introduction --');
console.and(true).log('ConditionalConsole has successfully decorated the console object.');
console.and(true).and(1 === 2).log('Not you can chain any conditional function. This is NOT logged by the way.');
</script>

      <!-- Tags -->
      <h1>Using tags</h1>
      <p>The tagging system makes it easy to setup keywords, so console is only used if the keywords are active.</p>

<script data-example>
console.log('-- Using tags --');

// The 'my-component-keyword' is not active yet.
console.tags('my-component-keyword').log('Not logged.');

// Activate keywords using the setTags() function.
console.setTags('my-component-keyword');
console.tags('my-component-keyword').log('Now the tag is added and output is logged.');
</script>

      <p>This way you can tag all your console commands in a specific component, and simply set the tags to only show that specifc component output.</p>

      <h3>Multiple tags</h3>
      <p>
        It's possible to check (and set) multiple tags by using a <em>space</em> seperated string or an array.<br>
        The <code>setTags()</code> function supports prefix to remove tags.
      </p>

<script data-example>
console.log('-- Multiple tags --');
// This removes the "my-component-keyword" (note the "-" character) and adds
// "akey" and "bkey". The + (plus) infront of the bkey makes it more explicit,
// but it's not needed.
console.setTags('akey -my-component-keyword +bkey').log('setTags() is also chainable');

// "my-component-keyword" has been removed so it's not logged anymore.
console.tags('my-component-keyword').log('Not logged.');

// Note that each tags check is using OR, so this checks "my-component-keyword"
// OR "akey".
console.tags('my-component-keyword akey').log('Logged because 1 or more of the tags is present.');

// To simulate AND simple chain the tags() functions.
console.tags('my-component-keyword').tags('akey').log('Not logged.');
</script>

      <h3>Set with query parameters</h3>
      <p>
        Use the <code>cc-tags</code> query parameter to set tags.<br>
        Try adding <code>?cc-tags=ckey</code> and check your console (<a href="javascript:var usp=new URLSearchParams(location.search);usp.set('cc-tags', 'ckey');location.search='?'+usp.toString()">use this link to test</a>).
      </p>

<script data-example>
console.log('-- Set with query parameters --');
console.tags('ckey').log('Only shown if the ckey is set.');
</script>

      <p>The value of the <code>cc-tags</code> parameter is passed directly to the <code>setTags()</code> function so it supports the "-" prefix</p>

      <!-- Verbosity -->
      <h1>Using verbosity</h1>
      <p>The verbosity is a simple integer, and the condition simply needs to be less or equal to the set verbosity.</p>

<script data-example>
console.log('-- Using verbosity --');

// Verbosity defaults to 0
console.verbosity(2).log('Verbosity level 2. Not logged.');

// Activate keywords using the setTags() function.
console.setVerbosity(5);
console.verbosity(2).log('Verbosity level 2. Is logged because current level is 5.');
</script>

      <p>
        Like setTags() this also supports query parameters, use the <code>cc-verbosity</code> parameter (<a href="javascript:var usp=new URLSearchParams(location.search);usp.set('cc-verbosity', 10);location.search='?'+usp.toString()">check this link</a>).
      </p>

      <!-- Once -->
      <h1>Using once</h1>
      <p>The <code>once()</code> function is useful when looping through many items, but only wanting a single sample:</p>

      <div class="alert alert-info" role="alert">Output is in your console.</div>
<script data-example>
console.log('-- Using once --');
[1, 2, 3, 4].forEach(function (value) {
  console.once('once name').log('Only shown once', value);
  console.once().log('If the name is omitted once() will autocreate one');
});
</script>

    <script>
      // Simple init of the example page.
      document.querySelectorAll('script[data-example]').forEach(function (element) {
        const pre = document.createElement('pre');
        pre.innerHTML = '<code class="javascript">' + element.textContent.trim() + '</code>';

        element.parentElement.insertBefore(pre, element);
      });
    </script>
  </body>
</html>